/* ============================================================
   Yesh — Product app styles
   The SPA shell (sidebar + topbar + view) and every screen:
   dashboard, CRM, pipeline, invoices, projects, agents, brand.
   Layered on yesh.css.
   ============================================================ */

/* ---------- Line-art icons ---------- */
.ic { width: 1em; height: 1em; display: inline-block; vertical-align: -0.16em; flex: none; }

/* ---------- Brand logo (sidebar) ---------- */
.side-logo { width: 38px; height: 38px; border-radius: 10px; display: block; flex: none; box-shadow: var(--sh-1); }

html, body.app { height: 100%; }
body.app { overflow: hidden; background: var(--bg); }

/* ============================================================
   SHELL
   ============================================================ */
.shell { display: grid; grid-template-columns: 248px 1fr; height: 100vh; }

/* ---------- Sidebar ---------- */
.side {
  display: flex; flex-direction: column; min-height: 0;
  background: linear-gradient(180deg, var(--side-bg), color-mix(in srgb, var(--side-bg) 84%, #000));
  color: var(--side-ink); border-right: 1px solid var(--side-line);
}
.side-brand { display: flex; align-items: center; gap: 11px; padding: 18px 18px 16px; }
.side-brand-txt { display: flex; flex-direction: column; line-height: 1.1; }
.side-brand-txt b { font-family: var(--font-display); color: var(--side-ink); font-size: 1.12rem; }
.side-brand-txt i { font-style: normal; font-size: .78rem; color: var(--side-mute); }
.side-nav { flex: 1; overflow-y: auto; padding: 6px 12px 12px; display: flex; flex-direction: column; gap: 2px; }
.nav-sect { font-size: .68rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--side-faint); padding: 14px 10px 6px; }
.nav-i {
  display: flex; align-items: center; gap: 11px; width: 100%; text-align: left;
  padding: 9px 11px; border-radius: var(--r-sm); color: var(--side-ink-2); font-size: .92rem; font-weight: 500;
  transition: background .13s ease, color .13s ease;
}
.nav-i .ni-ico { width: 20px; display: grid; place-items: center; font-size: 1.15rem; flex: none; }
.nav-i .ni-label { flex: 1; }
.nav-i:hover { background: var(--side-hover); color: var(--side-ink); }
.nav-i.active { background: var(--nav-active-bg); color: var(--nav-active-text); box-shadow: var(--sh-1); }
.nav-i.gold.active { background: linear-gradient(150deg, var(--gold), var(--gold-700)); color: var(--on-accent-2); }
.nav-i.ghost { color: var(--side-faint); }
.nav-i.ghost:hover { background: var(--side-hover); color: var(--side-ink-2); }
.ni-phase { font-size: .6rem; font-weight: 700; letter-spacing: .03em; text-transform: uppercase; color: var(--side-faint); background: var(--side-hover); padding: 2px 6px; border-radius: var(--pill); flex: none; }
.side-foot { padding: 12px; border-top: 1px solid var(--side-line); }
.side-foot .btn-ghost { background: var(--side-hover); color: var(--side-ink); border-color: var(--side-line); }
.side-foot .btn-ghost:hover { background: color-mix(in srgb, var(--on-hero) 16%, transparent); color: var(--side-ink); border-color: color-mix(in srgb, var(--on-hero) 26%, transparent); }
.side-tag { text-align: center; margin-top: 12px; color: color-mix(in srgb, var(--accent-2) 58%, var(--on-hero)); font-size: .92rem; }

/* ---------- Main + topbar ---------- */
.main { display: flex; flex-direction: column; min-width: 0; min-height: 0; }
.topbar {
  display: flex; align-items: center; gap: 16px; height: 62px; flex: none;
  padding: 0 24px; background: var(--surface); border-bottom: 1px solid var(--line);
}
.icon-btn { width: 38px; height: 38px; border-radius: var(--r-sm); display: grid; place-items: center; font-size: 1.2rem; color: var(--ink-2); }
.icon-btn:hover { background: var(--line-2); }
.side-toggle { display: none; }
.topbar-title { font-family: var(--font-display); font-weight: 600; font-size: 1.12rem; color: var(--ink); letter-spacing: -.01em; }
.topbar-search { flex: 1; max-width: 420px; margin-left: auto; position: relative; display: flex; align-items: center; }
.topbar-search .search-ic { position: absolute; left: 13px; color: var(--ink-faint); pointer-events: none; }
.topbar-search .input { width: 100%; padding: 9px 13px 9px 36px; background: var(--surface-2); }
.topbar-right { display: flex; align-items: center; gap: 12px; }
.notif-btn { position: relative; }
.notif-dot { position: absolute; top: 3px; right: 3px; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 9px;
  background: var(--neg); color: #fff; font-size: .64rem; font-weight: 800; line-height: 16px; text-align: center;
  border: 2px solid var(--surface); box-sizing: content-box; pointer-events: none; }
.notif-dot[hidden] { display: none; }
.avatar { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; font-size: .8rem; font-weight: 700; color: var(--on-accent); background: linear-gradient(150deg, var(--brand-500), var(--brand-800)); }

.view { flex: 1; overflow-y: auto; padding: 28px 32px 60px; }
.view:focus { outline: none; }

/* ---------- Page header ---------- */
.page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 22px; flex-wrap: wrap; }
.page-title { font-family: var(--font-display); font-size: 1.6rem; font-weight: 700; color: var(--ink); letter-spacing: -.02em; }
.page-sub { color: var(--muted); font-size: .95rem; margin-top: 3px; }
.page-actions { display: flex; gap: 10px; flex-wrap: wrap; }

/* ============================================================
   PANELS (generic app card)
   ============================================================ */
.panel { background: var(--card-bg); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--shadow-sm); }
.panel-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 18px; border-bottom: 1px solid var(--line-2); }
.panel-title { font-weight: 700; font-size: 1rem; color: var(--ink); }
.panel-body { padding: 18px; }
.panel-pad { padding: 18px; }
.panel-collapsible > .panel-head { cursor: pointer; user-select: none; }
.panel-collapsible > .panel-head:hover .panel-caret { color: var(--ink-mute); }
.panel-collapsible > .panel-head:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.panel-head-r { display: inline-flex; align-items: center; gap: 10px; }
.panel-caret { display: inline-flex; align-items: center; color: var(--ink-faint); transition: transform .18s ease; }
.panel-collapsible:not(.collapsed) > .panel-head .panel-caret { transform: rotate(90deg); }
.panel-collapsible.collapsed > .panel-head { border-bottom: none; }
.panel-collapsible.collapsed > .panel-body { display: none; }
.grid-2 { display: grid; grid-template-columns: 1.4fr 1fr; gap: 20px; }
.grid-2b { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }

/* ============================================================
   DASHBOARD — bento / editorial
   ============================================================ */
.bento { display: grid; grid-template-columns: repeat(12, 1fr); gap: 18px; }
.bento > * { min-width: 0; display: flex; flex-direction: column; }
.b-hero  { grid-column: span 8; }
.b-spot  { grid-column: span 4; }
.b-stat  { grid-column: span 4; }
.b-pipe  { grid-column: span 7; }
.b-act   { grid-column: span 5; }
.b-quick { grid-column: span 12; }
.bento .panel { flex: 1; display: flex; flex-direction: column; }
.bento .panel .panel-body { flex: 1; }
.b-quick .quick-grid { grid-template-columns: repeat(4, 1fr); }

/* dark hero greeting card */
.hero-card {
  flex: 1; position: relative; overflow: hidden; min-height: 230px;
  background: linear-gradient(150deg, var(--hero), color-mix(in srgb, var(--hero) 80%, #000));
  color: var(--on-hero); border-radius: var(--r-xl); padding: 30px 32px;
  display: flex; flex-direction: column; justify-content: space-between; gap: 26px;
  box-shadow: var(--sh-2);
}
.hero-card::after {
  content: "יֵשׁ"; position: absolute; right: 20px; bottom: -26px;
  font-family: var(--font-hebrew); font-size: 8.5rem; line-height: 1; pointer-events: none;
  color: color-mix(in srgb, var(--on-hero) 8%, transparent);
}
.hero-eyebrow { font-size: .74rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: color-mix(in srgb, var(--accent-2) 55%, var(--on-hero)); }
.hero-greet { font-family: var(--font-serif); font-style: italic; font-weight: 500; font-size: clamp(1.7rem, 3vw, 2.5rem); line-height: 1.1; letter-spacing: -.01em; margin-top: 6px; max-width: 20ch; }
.hero-actions { display: flex; gap: 10px; flex-wrap: wrap; position: relative; z-index: 1; }
.hero-card .btn-ghost { background: color-mix(in srgb, var(--on-hero) 10%, transparent); color: var(--on-hero); border-color: color-mix(in srgb, var(--on-hero) 22%, transparent); }
.hero-card .btn-ghost:hover { background: color-mix(in srgb, var(--on-hero) 18%, transparent); color: var(--on-hero); border-color: color-mix(in srgb, var(--on-hero) 34%, transparent); }

/* stat cards with oversized numerals */
.statc { flex: 1; position: relative; overflow: hidden; display: flex; flex-direction: column; gap: 4px;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-xl); padding: 22px 22px 20px;
  box-shadow: var(--sh-1); transition: transform .12s ease, box-shadow .16s ease; }
.statc:hover { transform: translateY(-2px); box-shadow: var(--sh-2); }
.sc-label { font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--ink-faint); display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.sc-ico { font-size: 1rem; opacity: .65; }
.sc-num { font-family: var(--font-display); font-weight: 700; font-size: clamp(2rem, 4vw, 2.9rem); line-height: 1; letter-spacing: -.03em; color: var(--ink); font-variant-numeric: tabular-nums; margin-top: 6px; }
.sc-meta { font-size: .82rem; color: var(--muted); margin-top: auto; padding-top: 10px; }
.sc-meta.up { color: var(--pos); }
.sc-meta.down { color: var(--neg); }
.statc.spot { border-color: color-mix(in srgb, var(--accent) 32%, var(--line)); }
.statc.spot::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--accent); }
.statc.spot .sc-num { font-size: clamp(2.4rem, 5vw, 3.4rem); color: var(--accent); }

.greet { font-family: var(--font-display); font-weight: 600; }

/* ---------- Appearance / skins picker ---------- */
.skin-wrap { display: flex; flex-direction: column; gap: 20px; }
.skin-mode { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-bottom: 16px; border-bottom: 1px solid var(--line); }
.skin-mode-l { font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--ink-faint); }
.skin-fam-h { font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--ink-faint); margin-bottom: 11px; }
.skin-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(148px, 1fr)); gap: 12px; }
.skin-card { position: relative; display: flex; flex-direction: column; gap: 10px; padding: 12px; text-align: left;
  border: 1px solid var(--line); border-radius: var(--r); background: var(--surface);
  transition: transform .12s ease, box-shadow .14s ease, border-color .14s ease; }
.skin-card:hover { transform: translateY(-2px); box-shadow: var(--sh-2); border-color: var(--brand-200); }
.skin-card.on { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.skin-card.on::after { content: "✓"; position: absolute; top: 9px; right: 11px; font-size: .8rem; font-weight: 800; color: var(--accent); }
.skin-sw { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; height: 42px; border-radius: 8px; overflow: hidden; }
.skin-sw i { display: block; height: 100%; }
.skin-name { font-size: .9rem; font-weight: 600; color: var(--ink); }
.skin-tag { position: absolute; top: 9px; right: 11px; font-size: .58rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); background: var(--surface-2); padding: 2px 6px; border-radius: var(--pill); }
.skin-card.on .skin-tag { display: none; }
.skin-custom { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 22px; padding: 16px; border: 1px dashed var(--line); border-radius: var(--r); background: var(--surface-2); }
.skin-custom.on { border-style: solid; border-color: var(--accent); }
.cpick { display: inline-flex; align-items: center; gap: 9px; font-size: .85rem; font-weight: 600; color: var(--ink-2); }
.cpick input[type=color] { width: 36px; height: 36px; padding: 0; border: 1px solid var(--line); border-radius: 8px; background: none; cursor: pointer; }
.cpick code { font-size: .76rem; color: var(--muted); font-family: ui-monospace, Menlo, monospace; text-transform: uppercase; }

/* ---------- Brand Kit: logos / palette / type ---------- */
.logo-slots { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.logo-slot { display: flex; flex-direction: column; gap: 11px; padding: 12px; border: 1px solid var(--line); border-radius: var(--r); background: var(--surface); }
.logo-prev { position: relative; display: grid; place-items: center; height: 106px; border-radius: var(--r-sm); border: 1px solid var(--line-2); overflow: hidden;
  background-color: #fbfbfc;
  background-image: linear-gradient(45deg, #eceef1 25%, transparent 25%), linear-gradient(-45deg, #eceef1 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #eceef1 75%), linear-gradient(-45deg, transparent 75%, #eceef1 75%);
  background-size: 16px 16px; background-position: 0 0, 0 8px, 8px -8px, -8px 0; }
.logo-prev img { position: absolute; inset: 0; margin: auto; max-width: 84%; max-height: 78%; width: auto; height: auto; object-fit: contain; display: block; }
.logo-ph { display: inline-flex; flex-direction: column; align-items: center; gap: 6px; color: #9aa0a6; font-size: .75rem; font-weight: 500; }
.logo-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.logo-meta { min-width: 0; }
.logo-name { font-size: .9rem; font-weight: 700; color: var(--ink); }
.logo-hint { font-size: .73rem; color: var(--muted); margin-top: 1px; }
.logo-acts { display: flex; align-items: center; gap: 6px; flex: none; }

.pal-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 14px; }
.pal-card { display: flex; flex-direction: column; gap: 9px; }
.pal-block { position: relative; display: block; height: 62px; border-radius: var(--r-sm); border: 1px solid var(--line); cursor: pointer; overflow: hidden; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .05); }
.pal-block input[type=color] { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; padding: 0; border: 0; opacity: 0; cursor: pointer; }
.pal-meta { display: flex; flex-direction: column; gap: 6px; }
.pal-name { padding: 7px 9px; font-size: .82rem; font-weight: 600; }
.pal-foot { display: flex; align-items: center; justify-content: space-between; gap: 6px; }
.icon-btn.sm { width: 28px; height: 28px; font-size: .9rem; border-radius: var(--r-xs); }

.font-block { display: flex; flex-direction: column; }
.font-prev { margin-top: 14px; padding: 16px 18px; border: 1px solid var(--line); border-radius: var(--r); background: var(--surface-2); font-size: 1.9rem; line-height: 1.2; letter-spacing: -.01em; color: var(--ink); overflow-wrap: anywhere; }
.font-prev.sm { font-size: 1.02rem; line-height: 1.55; letter-spacing: 0; }

@media (max-width: 760px) { .logo-slots { grid-template-columns: 1fr; } }

.act-list { display: flex; flex-direction: column; }
.act-item { display: flex; align-items: flex-start; gap: 12px; padding: 11px 0; border-bottom: 1px solid var(--line-2); }
.act-item:last-child { border-bottom: 0; }
.act-ico { width: 30px; height: 30px; border-radius: 8px; background: var(--surface-2); border: 1px solid var(--line-2); display: grid; place-items: center; font-size: .9rem; flex: none; }
.act-txt { font-size: .9rem; color: var(--ink-2); }
.act-time { font-size: .76rem; color: var(--faint); margin-top: 1px; }

.mini-pipe { display: flex; flex-direction: column; gap: 10px; }
.mini-row { display: flex; align-items: center; gap: 10px; }
.mini-row .mr-label { width: 78px; font-size: .82rem; color: var(--ink-2); font-weight: 500; flex: none; }
.mini-bar { flex: 1; height: 9px; background: var(--line-2); border-radius: var(--pill); overflow: hidden; }
.mini-bar i { display: block; height: 100%; border-radius: var(--pill); background: linear-gradient(90deg, var(--brand-500), var(--brand-700)); }
.mini-row .mr-val { width: 74px; text-align: right; font-size: .82rem; font-weight: 600; color: var(--ink); flex: none; }

.quick-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.quick { display: flex; align-items: center; gap: 10px; padding: 13px; border: 1px solid var(--line); border-radius: var(--r); background: var(--surface); text-align: left; transition: border-color .14s ease, background .14s ease, transform .1s ease; }
.quick:hover { border-color: var(--brand-200); background: var(--brand-50); transform: translateY(-1px); }
.quick .q-ico { font-size: 1.15rem; }
.quick b { display: block; font-size: .9rem; color: var(--ink); }
.quick span { font-size: .76rem; color: var(--muted); }

/* ============================================================
   TABLE (CRM, invoices)
   ============================================================ */
.tbl { width: 100%; border-collapse: collapse; }
.tbl th { text-align: left; font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--faint); padding: 10px 14px; border-bottom: 1px solid var(--line); background: var(--table-header-bg); }
.tbl td { padding: 12px 14px; border-bottom: 1px solid var(--line-2); font-size: .9rem; color: var(--ink-2); vertical-align: middle; }
.tbl tr { transition: background .12s ease; }
.tbl tbody tr:hover { background: var(--table-row-hover); cursor: pointer; }
.tbl tbody tr:last-child td { border-bottom: 0; }
.cell-name { display: flex; align-items: center; gap: 11px; }
.cell-name b { color: var(--ink); font-weight: 600; }
.cell-name span { font-size: .78rem; color: var(--muted); }
.av-chip { width: 34px; height: 34px; border-radius: 9px; display: grid; place-items: center; font-size: .76rem; font-weight: 700; color: var(--on-accent); flex: none; background: linear-gradient(150deg, var(--brand-400), var(--brand-700)); }
.av-chip.lead { background: linear-gradient(150deg, var(--gold-400), var(--gold-700)); color: var(--on-accent-2); }
.av-chip.partner { background: linear-gradient(150deg, var(--ink-faint), var(--ink-soft)); color: var(--surface); }
.row-num { text-align: right; font-variant-numeric: tabular-nums; }
.tbl-tools { display: flex; gap: 10px; align-items: center; }
.seg { display: inline-flex; background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r-sm); padding: 3px; gap: 2px; }
.seg button { padding: 6px 12px; border-radius: 6px; font-size: .82rem; font-weight: 600; color: var(--muted); }
.seg button.on { background: var(--surface); color: var(--brand-700); box-shadow: var(--sh-1); }

/* ============================================================
   KANBAN (pipeline)
   ============================================================ */
.kanban { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(232px, 1fr); gap: 14px; overflow-x: auto; padding-bottom: 8px; align-items: start; }
.kcol { background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r-lg); display: flex; flex-direction: column; min-height: 120px; transition: border-color .14s ease, background .14s ease; }
.kcol.over { border-color: var(--brand-500); background: var(--brand-50); box-shadow: var(--ring); }
.kcol-head { display: flex; align-items: center; justify-content: space-between; padding: 12px 14px; border-bottom: 1px solid var(--line-2); }
.kcol-head .kc-name { font-weight: 700; font-size: .88rem; color: var(--ink); display: flex; align-items: center; gap: 8px; }
.kc-dot { width: 8px; height: 8px; border-radius: 50%; }
.kc-inquiry { background: var(--faint); } .kc-discovery { background: var(--brand-200); } .kc-booked { background: var(--brand-400); } .kc-qualified { background: var(--brand-500); } .kc-proposal { background: var(--gold); } .kc-followup { background: var(--accent-2); } .kc-contract { background: var(--accent); } .kc-deposit { background: color-mix(in srgb, var(--pos) 55%, var(--gold)); } .kc-won { background: var(--pos); } .kc-lost { background: var(--neg); }
.kcol-won { background: color-mix(in srgb, var(--pos) 5%, var(--surface-2)); } .kcol-lost { background: color-mix(in srgb, var(--neg) 4%, var(--surface-2)); }
.kc-count { font-size: .76rem; color: var(--muted); font-weight: 600; background: var(--surface); border: 1px solid var(--line); border-radius: var(--pill); padding: 1px 8px; }
.kcol-sum { font-size: .72rem; color: var(--muted); padding: 6px 14px 0; }
.kcol-body { padding: 10px; display: flex; flex-direction: column; gap: 9px; min-height: 40px; }
.deal-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); padding: 12px; box-shadow: var(--sh-1); cursor: grab; transition: box-shadow .14s ease, transform .08s ease, border-color .14s ease; }
.deal-card:hover { box-shadow: var(--sh-2); border-color: var(--brand-200); }
.deal-card:active { cursor: grabbing; }
.deal-card.dragging { opacity: .5; transform: rotate(1.5deg); }
.dc-title { font-weight: 600; font-size: .92rem; color: var(--ink); }
.dc-meta { display: flex; align-items: center; justify-content: space-between; margin-top: 8px; }
.dc-co { font-size: .78rem; color: var(--muted); }
.dc-val { font-size: .86rem; font-weight: 700; color: var(--brand-700); }
.kempty { font-size: .8rem; color: var(--faint); text-align: center; padding: 14px 8px; border: 1px dashed var(--line); border-radius: var(--r); }

/* ============================================================
   Pipeline — revenue command center
   ============================================================ */
.pipe-summary { display: grid; grid-template-columns: repeat(6, 1fr); gap: 12px; margin-bottom: 14px; }
.pipe-summary .statc { padding: 15px 16px 13px; border-radius: var(--r-lg); }
.pipe-summary .sc-num { font-size: clamp(1.35rem, 2.1vw, 1.85rem); margin-top: 4px; }
.pipe-summary .statc.spot .sc-num { font-size: clamp(1.45rem, 2.3vw, 2rem); }
.pipe-summary .sc-meta { padding-top: 8px; font-size: .75rem; }

/* Next Best Actions */
.nba-panel { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--sh-1); margin-bottom: 14px; overflow: hidden; }
.nba-head { display: flex; align-items: baseline; gap: 10px; padding: 12px 16px; border-bottom: 1px solid var(--line-2); background: color-mix(in srgb, var(--accent) 6%, var(--surface)); }
.nba-title { font-weight: 700; font-size: .95rem; color: var(--ink); display: inline-flex; align-items: center; gap: 8px; }
.nba-title svg { color: var(--accent); }
.nba-sub { font-size: .76rem; color: var(--muted); }
.nba-list { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px; background: var(--line-2); }
.nba-item { display: flex; align-items: center; gap: 11px; text-align: left; padding: 12px 16px; background: var(--surface); border: 0; cursor: pointer; transition: background .12s ease; font: inherit; width: 100%; }
.nba-item:hover { background: var(--surface-2); }
.nba-ico { flex: none; width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; background: var(--surface-2); color: var(--muted); }
.nba-overdue .nba-ico { background: var(--neg-bg); color: var(--neg); }
.nba-today .nba-ico { background: var(--gold-50); color: var(--gold-700); }
.nba-hot .nba-ico { background: color-mix(in srgb, var(--accent) 16%, var(--surface)); color: var(--accent); }
.nba-stalled .nba-ico { background: var(--surface-2); color: var(--ink-faint); }
.nba-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.nba-it-title { font-weight: 600; font-size: .85rem; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nba-it-sub { font-size: .76rem; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nba-go { flex: none; color: var(--faint); font-weight: 700; font-size: 1.05rem; }
.nba-item:hover .nba-go { color: var(--accent); }
.nba-empty { grid-column: 1 / -1; display: flex; align-items: center; gap: 8px; padding: 16px; color: var(--muted); font-size: .86rem; background: var(--surface); }
.nba-empty svg { color: var(--pos); }

/* Toolbar — view switcher + filters */
.pipe-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; flex-wrap: wrap; }
.pipe-views { display: inline-flex; gap: 4px; background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--pill); padding: 4px; }
.pv-btn { display: inline-flex; align-items: center; gap: 7px; padding: 7px 14px; border-radius: var(--pill); border: 0; background: transparent; color: var(--muted); font: inherit; font-size: .84rem; font-weight: 600; cursor: pointer; transition: background .12s ease, color .12s ease; }
.pv-btn svg { width: 15px; height: 15px; }
.pv-btn:hover { color: var(--ink); }
.pv-btn.on { background: var(--surface); color: var(--ink); box-shadow: var(--sh-1); }
.pipe-filters { display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.select.sm { font-size: .82rem; padding-block: 8px; }
.pipe-filters .select.sm { width: auto; display: inline-block; min-width: 138px; flex: 0 0 auto; }
.pipe-body { min-height: 200px; }

/* Rich deal card */
.deal-card { position: relative; }
.dc-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; }
.dc-health { width: 9px; height: 9px; border-radius: 50%; flex: none; }
.dc-health.hb-healthy, .dc-health.hb-won { background: var(--pos); }
.dc-health.hb-watch { background: var(--gold); }
.dc-health.hb-stalled { background: color-mix(in srgb, var(--gold) 60%, var(--neg)); }
.dc-health.hb-at-risk { background: var(--neg); }
.dc-health.hb-nurture { background: var(--faint); }
.dc-prob { font-size: .72rem; font-weight: 700; color: var(--muted); font-variant-numeric: tabular-nums; background: var(--surface-2); border: 1px solid var(--line-2); border-radius: var(--pill); padding: 1px 7px; }
.dc-client { display: flex; align-items: center; gap: 7px; margin-top: 7px; font-size: .78rem; color: var(--muted); }
.dc-client .av-chip { flex: none; }
.dc-client span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dc-project { display: flex; align-items: center; gap: 5px; margin-top: 6px; font-size: .75rem; color: var(--ink-faint); }
.dc-project svg { flex: none; color: var(--faint); }
.dc-value { display: flex; align-items: center; gap: 8px; margin-top: 9px; font-size: 1rem; font-weight: 800; color: var(--ink); font-family: var(--font-display); letter-spacing: -.01em; }
.dc-hot { display: inline-flex; align-items: center; gap: 3px; font-size: .68rem; font-weight: 700; color: var(--accent); background: color-mix(in srgb, var(--accent) 14%, var(--surface)); border-radius: var(--pill); padding: 2px 7px; letter-spacing: 0; }
.dc-hot svg { color: var(--accent); }
.dc-next { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 9px; padding-top: 9px; border-top: 1px dashed var(--line-2); }
.dc-next-t { font-size: .76rem; color: var(--ink-soft); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dc-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 8px; }
.dc-age { display: inline-flex; align-items: center; gap: 4px; font-size: .72rem; color: var(--muted); }
.dc-age svg { color: var(--faint); }
.dc-health-l { font-size: .7rem; font-weight: 700; }
.dc-health-l.hb-healthy, .dc-health-l.hb-won { color: var(--pos); }
.dc-health-l.hb-watch, .dc-health-l.hb-stalled { color: var(--gold-700); }
.dc-health-l.hb-at-risk { color: var(--neg); }
.dc-health-l.hb-nurture { color: var(--muted); }
.dc-actions { display: flex; gap: 4px; margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--line-2); }
.dc-act { flex: 1; min-width: 28px; display: grid; place-items: center; padding: 6px 0; border-radius: 8px; border: 1px solid var(--line-2); background: var(--surface-2); color: var(--muted); cursor: pointer; transition: background .12s ease, color .12s ease, border-color .12s ease, transform .08s ease; }
.dc-act:hover { background: var(--accent); color: var(--on-accent); border-color: var(--accent); transform: translateY(-1px); }
.dc-act svg { width: 14px; height: 14px; }

/* List view */
.pipe-tbl td .nx { color: var(--ink-soft); font-size: .82rem; }
.pipe-tbl .prob { width: 64px; }

/* Forecast view */
.forecast { display: flex; flex-direction: column; gap: 14px; }
.fc-top { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.fc-head { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.fc-h-label { font-size: .78rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--ink-faint); }
.fc-h-num { font-family: var(--font-display); font-weight: 800; font-size: clamp(1.8rem, 3vw, 2.4rem); color: var(--accent); letter-spacing: -.02em; }
.fc-h-sub { font-size: .82rem; color: var(--muted); }
.fc-legend { display: inline-flex; gap: 14px; font-size: .76rem; color: var(--muted); }
.fc-legend i { display: inline-block; width: 12px; height: 12px; border-radius: 3px; vertical-align: -1px; margin-right: 4px; }
.fc-legend .lg-v { background: var(--brand-200); }
.fc-legend .lg-w { background: var(--accent); }
.fc-panel { padding: 4px 18px 12px; }
.fc-cols { display: grid; grid-template-columns: 180px 1fr 200px; gap: 14px; align-items: center; padding: 12px 0 8px; font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--ink-faint); border-bottom: 1px solid var(--line-2); }
.fc-rows { display: flex; flex-direction: column; }
.fc-row { display: grid; grid-template-columns: 180px 1fr 200px; gap: 14px; align-items: center; padding: 11px 0; border-bottom: 1px solid var(--line-2); }
.fc-row:last-child { border-bottom: 0; }
.fc-stage { display: inline-flex; align-items: center; gap: 8px; font-size: .85rem; font-weight: 600; color: var(--ink); }
.fc-bar { position: relative; height: 12px; background: var(--surface-2); border-radius: var(--pill); overflow: hidden; }
.fc-bar i { position: absolute; left: 0; top: 0; bottom: 0; background: var(--brand-200); border-radius: var(--pill); }
.fc-bar b { position: absolute; left: 0; top: 0; bottom: 0; background: var(--accent); border-radius: var(--pill); }
.fc-nums { display: inline-flex; gap: 12px; align-items: baseline; justify-content: flex-end; font-variant-numeric: tabular-nums; }
.fc-nums .fc-count { width: 42px; color: var(--muted); font-size: .82rem; text-align: right; }
.fc-nums .fc-val { width: 72px; text-align: right; color: var(--ink-soft); font-size: .85rem; }
.fc-nums .fc-w { width: 72px; text-align: right; font-weight: 800; color: var(--accent); font-size: .9rem; }
.fo-rows { padding: 4px 0; }
.fo-row { display: grid; grid-template-columns: 1fr auto auto; gap: 16px; align-items: center; padding: 11px 18px; border-bottom: 1px solid var(--line-2); }
.fo-row:last-child { border-bottom: 0; }
.fo-name { display: inline-flex; align-items: center; gap: 9px; font-weight: 600; color: var(--ink); font-size: .88rem; }
.fo-c { color: var(--muted); font-size: .82rem; }
.fo-w { font-weight: 800; color: var(--accent); font-variant-numeric: tabular-nums; }

/* Calendar / agenda view */
.cal-agenda { display: flex; flex-direction: column; gap: 14px; }
.cal-group { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--sh-1); overflow: hidden; }
.cal-g-head { display: flex; align-items: center; gap: 9px; padding: 11px 16px; border-bottom: 1px solid var(--line-2); background: var(--surface-2); }
.cal-g-label { font-weight: 700; font-size: .85rem; color: var(--ink); }
.cal-g-n { font-size: .72rem; font-weight: 700; color: var(--muted); background: var(--surface); border: 1px solid var(--line); border-radius: var(--pill); padding: 1px 8px; }
.cal-over .cal-g-head { background: var(--neg-bg); } .cal-over .cal-g-label { color: var(--neg); }
.cal-today .cal-g-head { background: var(--gold-50); } .cal-today .cal-g-label { color: var(--gold-700); }
.cal-items { display: flex; flex-direction: column; }
.cal-item { display: grid; grid-template-columns: 110px 1fr auto; gap: 14px; align-items: center; padding: 12px 16px; border-bottom: 1px solid var(--line-2); cursor: pointer; transition: background .12s ease; }
.cal-item:last-child { border-bottom: 0; }
.cal-item:hover { background: var(--surface-2); }
.cal-due { font-size: .74rem; font-weight: 700; padding: 3px 9px; border-radius: var(--pill); background: var(--surface-2); color: var(--muted); border: 1px solid var(--line-2); text-align: center; }
.cal-due.over { background: var(--neg-bg); color: var(--neg); border-color: color-mix(in srgb, var(--neg) 30%, var(--line)); }
.cal-due.today { background: color-mix(in srgb, var(--accent) 16%, var(--surface)); color: color-mix(in srgb, var(--ink) 58%, var(--accent)); }
.cal-due.soon { background: var(--gold-50); color: var(--gold-700); border-color: var(--gold-200); }
.cal-main { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.cal-main b { font-size: .88rem; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cal-sub { font-size: .77rem; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cal-val { font-weight: 800; color: var(--ink); font-variant-numeric: tabular-nums; }

/* Stage-automation modal */
.auto-intro { font-size: .9rem; color: var(--ink-soft); margin-bottom: 14px; line-height: 1.5; }
.auto-list { display: flex; flex-direction: column; gap: 8px; }
.auto-row { display: flex; align-items: center; gap: 11px; padding: 11px 13px; border: 1px solid var(--line); border-radius: var(--r); background: var(--surface-2); }
.auto-ico { flex: none; width: 30px; height: 30px; border-radius: 8px; display: grid; place-items: center; background: color-mix(in srgb, var(--accent) 12%, var(--surface)); color: var(--accent); }
.auto-label { flex: 1; font-size: .87rem; font-weight: 600; color: var(--ink); }
.btn.sm { padding: 6px 14px; font-size: .8rem; }
.auto-row .btn.done { color: var(--pos); border-color: color-mix(in srgb, var(--pos) 30%, var(--line)); }

@media (max-width: 1080px) { .pipe-summary { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 860px) {
  .nba-list { grid-template-columns: 1fr; }
  .fc-cols, .fc-row { grid-template-columns: 120px 1fr 150px; }
  .fc-nums .fc-val, .fc-nums .fc-w { width: 60px; }
}
@media (max-width: 560px) {
  .pipe-summary { grid-template-columns: repeat(2, 1fr); }
  .pipe-toolbar { flex-direction: column; align-items: stretch; }
  .pipe-views { justify-content: space-between; }
  .pv-btn { flex: 1; justify-content: center; padding: 8px 6px; }
  .pv-btn span { display: none; }
  .cal-item { grid-template-columns: 84px 1fr; }
  .cal-val { display: none; }
  .fc-nums .fc-val { display: none; }
  .fc-cols, .fc-row { grid-template-columns: 90px 1fr 90px; }
}

/* ============================================================
   PROJECTS board
   ============================================================ */
.proj-list { display: flex; flex-direction: column; gap: 18px; }
.proj { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--sh-1); overflow: hidden; }
.proj-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 15px 18px; border-bottom: 1px solid var(--line-2); }
.proj-head h3 { font-size: 1.04rem; }
.proj-head .proj-co { font-size: .82rem; color: var(--muted); }
.task-cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; padding: 16px; }
.task-col-h { font-size: .74rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--faint); margin-bottom: 10px; display: flex; justify-content: space-between; }
.task-card { background: var(--surface-2); border: 1px solid var(--line-2); border-radius: var(--r-sm); padding: 11px 12px; margin-bottom: 8px; cursor: pointer; transition: border-color .12s ease, background .12s ease; }
.task-card:hover { border-color: var(--brand-200); }
.task-card.done { opacity: .62; }
.task-card.done .tc-title { text-decoration: line-through; }
.tc-title { font-size: .88rem; color: var(--ink); font-weight: 500; }
.tc-meta { display: flex; align-items: center; justify-content: space-between; margin-top: 7px; font-size: .74rem; color: var(--muted); }
.tc-assignee { display: inline-flex; align-items: center; gap: 5px; }
.tc-av { width: 18px; height: 18px; border-radius: 50%; background: var(--brand-100); color: var(--brand-700); display: grid; place-items: center; font-size: .58rem; font-weight: 700; }

/* ============================================================
   AI AGENTS
   ============================================================ */
.agent-gal { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; margin-bottom: 24px; }
.agent-tile { display: flex; gap: 14px; align-items: flex-start; padding: 18px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--sh-1); cursor: pointer; transition: transform .12s ease, box-shadow .16s ease, border-color .16s ease; text-align: left; width: 100%; }
.agent-tile:hover { transform: translateY(-2px); box-shadow: var(--sh-2); border-color: var(--gold-200); }
.agent-tile.on { border-color: var(--brand-600); box-shadow: 0 0 0 1px var(--brand-600), var(--sh-1); }
.at-ico { width: 46px; height: 46px; border-radius: var(--r-sm); display: grid; place-items: center; font-size: 1.3rem; flex: none; background: linear-gradient(150deg, var(--gold), var(--gold-700)); color: var(--on-accent-2); }
.at-name { font-weight: 700; font-size: 1rem; color: var(--ink); display: flex; align-items: center; gap: 8px; }
.at-tag { font-size: .85rem; color: var(--muted); margin-top: 3px; line-height: 1.45; }

.runner { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--sh-1); overflow: hidden; }
.runner-head { display: flex; align-items: center; gap: 12px; padding: 16px 18px; border-bottom: 1px solid var(--line-2); background: var(--surface-2); }
.runner-head .at-ico { width: 38px; height: 38px; font-size: 1.1rem; }
.runner-grid { display: grid; grid-template-columns: 320px 1fr; min-height: 360px; }
.runner-in { padding: 18px; border-right: 1px solid var(--line-2); display: flex; flex-direction: column; gap: 14px; }
.runner-out { padding: 18px; background: var(--surface-2); display: flex; flex-direction: column; min-height: 0; }
.out-box { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); padding: 16px; font-size: .9rem; color: var(--ink); white-space: pre-wrap; line-height: 1.6; flex: 1; overflow: auto; font-family: var(--font-sans); }
.out-empty { display: grid; place-items: center; height: 100%; color: var(--faint); text-align: center; padding: 30px; }
.out-empty .oe-ico { font-size: 2rem; margin-bottom: 10px; }
.out-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; gap: 10px; flex-wrap: wrap; }
.out-meta { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; font-size: .78rem; color: var(--muted); }
.score-ring { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; font-size: .82rem; }
.score-num { font-size: 1.05rem; font-weight: 800; }

/* scope detector specifics */
.scope-verdict { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-radius: var(--r); margin-bottom: 14px; border: 1px solid; }
.scope-verdict.out { background: var(--neg-bg); border-color: color-mix(in srgb, var(--neg) 34%, var(--surface)); }
.scope-verdict.ambiguous { background: var(--warn-bg); border-color: color-mix(in srgb, var(--warn) 36%, var(--surface)); }
.scope-verdict.in { background: var(--pos-bg); border-color: color-mix(in srgb, var(--pos) 32%, var(--surface)); }
.sv-emoji { font-size: 1.6rem; }
.sv-label { font-weight: 800; font-size: 1.05rem; color: var(--ink); }
.sv-sum { font-size: .85rem; color: var(--ink-2); }
.co-table { width: 100%; border-collapse: collapse; margin: 6px 0 4px; }
.co-table td { padding: 8px 0; border-bottom: 1px solid var(--line-2); font-size: .88rem; }
.co-table tr:last-child td { border-bottom: 0; font-weight: 800; color: var(--ink); }
.reason-list li { font-size: .86rem; color: var(--ink-2); padding: 4px 0 4px 18px; position: relative; }
.reason-list li::before { content: "›"; position: absolute; left: 4px; color: var(--brand-500); font-weight: 700; }

/* ============================================================
   BRAND KIT
   ============================================================ */
.chip-row { display: flex; flex-wrap: wrap; gap: 8px; }
.chip-tog { padding: 7px 13px; border-radius: var(--pill); border: 1px solid var(--line); background: var(--surface); font-size: .85rem; font-weight: 600; color: var(--ink-2); transition: all .12s ease; }
.chip-tog:hover { border-color: var(--brand-200); }
.chip-tog.on { background: var(--brand-600); border-color: var(--brand-600); color: var(--on-accent); }
.switch { position: relative; width: 44px; height: 25px; border-radius: var(--pill); background: var(--line); transition: background .15s ease; flex: none; }
.switch.on { background: var(--brand-600); }
.switch::after { content: ""; position: absolute; top: 3px; left: 3px; width: 19px; height: 19px; border-radius: 50%; background: #fff; box-shadow: var(--sh-1); transition: transform .15s ease; }
.switch.on::after { transform: translateX(19px); }
.range { width: 100%; accent-color: var(--brand-600); }
.tag-del { display: inline-flex; align-items: center; gap: 7px; padding: 5px 10px 5px 12px; border-radius: var(--pill); background: var(--neg-bg); color: var(--neg); font-size: .82rem; font-weight: 600; }
.tag-del button { color: var(--neg); font-weight: 700; line-height: 1; }
.tag-pref { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border-radius: var(--pill); background: var(--brand-50); color: var(--brand-700); font-size: .82rem; font-weight: 600; }
.val-list li { font-size: .92rem; color: var(--ink-2); padding: 7px 0; border-bottom: 1px solid var(--line-2); display: flex; gap: 10px; }
.val-list li::before { content: "✦"; color: var(--gold); }
.swatch { display: inline-flex; align-items: center; gap: 8px; }
.swatch i { width: 22px; height: 22px; border-radius: 6px; border: 1px solid var(--line); }

/* ============================================================
   PHASE placeholder
   ============================================================ */
.phase-ph { display: grid; place-items: center; min-height: 56vh; text-align: center; }
.phase-ph .pp-ico { width: 76px; height: 76px; border-radius: var(--r-lg); display: grid; place-items: center; font-size: 2.2rem; background: var(--brand-50); margin: 0 auto 20px; }
.phase-ph h2 { margin-bottom: 8px; }
.phase-ph p { max-width: 440px; margin: 0 auto 18px; }

/* ============================================================
   EMPTY state
   ============================================================ */
.empty { text-align: center; padding: 40px 20px; color: var(--muted); }
.empty .e-ico { font-size: 2rem; margin-bottom: 10px; opacity: .7; }

/* ============================================================
   MODAL
   ============================================================ */
.modal-root { position: fixed; inset: 0; z-index: 100; display: none; }
.modal-root.show { display: block; }
.modal-back { position: absolute; inset: 0; background: rgba(20,18,12,.55); backdrop-filter: blur(2px); animation: fadeIn .15s ease; }
.modal {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: min(560px, calc(100vw - 32px)); max-height: calc(100vh - 48px); display: flex; flex-direction: column;
  background: var(--modal-bg); border-radius: var(--r-lg); box-shadow: var(--shadow-lg); animation: fadeUp .22s cubic-bezier(.2,.7,.3,1);
}
.modal.wide { width: min(720px, calc(100vw - 32px)); }
.modal-head { display: flex; align-items: center; justify-content: space-between; padding: 18px 20px; border-bottom: 1px solid var(--line-2); }
.modal-head h3 { font-size: 1.12rem; }
.modal-body { padding: 20px; overflow-y: auto; }
.modal-foot { display: flex; justify-content: flex-end; gap: 10px; padding: 16px 20px; border-top: 1px solid var(--line-2); }
.modal .field { margin-bottom: 14px; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.form-row[hidden] { display: none !important; }
.x-btn { width: 34px; height: 34px; border-radius: var(--r-sm); display: grid; place-items: center; font-size: 1.1rem; color: var(--muted); }
.x-btn:hover { background: var(--line-2); color: var(--ink); }

/* line items editor */
.li-row { display: grid; grid-template-columns: 1fr 64px 96px 32px; gap: 8px; align-items: center; margin-bottom: 8px; }
.li-row .input { padding: 8px 10px; font-size: .88rem; }
.li-head { font-size: .72rem; color: var(--faint); font-weight: 700; text-transform: uppercase; letter-spacing: .04em; }

/* ============================================================
   TOAST
   ============================================================ */
.toast-wrap { position: fixed; bottom: 22px; left: 50%; transform: translateX(-50%); z-index: 200; display: flex; flex-direction: column; gap: 10px; align-items: center; }
.toast { display: flex; align-items: center; gap: 10px; background: var(--hero); color: var(--on-hero); padding: 11px 18px; border-radius: var(--pill); box-shadow: var(--sh-3); font-size: .9rem; font-weight: 500; animation: fadeUp .25s ease; }
.toast .t-ico { font-size: 1rem; }
.toast.ok { background: #0F8A57; color: #fff; }
.toast.warn { background: var(--gold-700); color: #fff; }
.t-action { background: none; border: none; color: inherit; font-weight: 700; font-size: .82rem; padding: 0 0 0 10px; cursor: pointer; text-decoration: underline; opacity: .9; flex: none; }
.t-action:hover { opacity: 1; }

/* ============================================================
   CLIENTS — list avatars, kind toggle, logo picker
   ============================================================ */
.hide { display: none !important; }
.gap-14 { gap: 14px; }
.av-chip img { width: 100%; height: 100%; object-fit: cover; border-radius: inherit; }
.av-chip.has-logo { background: var(--surface); border: 1px solid var(--line); padding: 0; overflow: hidden; }
.av-chip.round { border-radius: 50%; }
.kind-badge svg { width: 12px; height: 12px; }

.seg-btn { display: inline-flex; align-items: center; gap: 6px; }
.seg-btn svg { width: 15px; height: 15px; }
.kind-seg { margin-bottom: 16px; }

.logo-pick { display: flex; align-items: center; gap: 16px; padding: 14px; border: 1px dashed var(--line); border-radius: var(--r); background: var(--surface-2); margin-bottom: 18px; }
.logo-pick-prev { width: 64px; height: 64px; border-radius: var(--r-sm); overflow: hidden; display: grid; place-items: center; background: var(--surface); border: 1px solid var(--line); flex: none; color: var(--faint); }
.logo-pick-prev img { width: 100%; height: 100%; object-fit: cover; }
.logo-pick-meta { flex: 1; min-width: 0; }
.logo-pick-h { font-weight: 600; color: var(--ink); font-size: .92rem; }

.form-row.three { grid-template-columns: 1fr 1fr 1fr; }

/* ============================================================
   CLIENT PROFILE
   ============================================================ */
.back-link { display: inline-flex; align-items: center; gap: 6px; font-size: .85rem; font-weight: 600; color: var(--muted); margin-bottom: 14px; cursor: pointer; }
.back-link:hover { color: var(--brand-700); }
.back-link svg { width: 16px; height: 16px; }

.client-hero { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; padding: 22px 24px; flex-wrap: wrap; }
.ch-main { display: flex; gap: 18px; align-items: flex-start; min-width: 0; }
.ch-avatar { width: 72px; height: 72px; border-radius: 16px; flex: none; display: grid; place-items: center; font-size: 1.55rem; font-weight: 700; color: var(--on-accent); background: linear-gradient(150deg, var(--brand-400), var(--brand-700)); overflow: hidden; }
.ch-avatar.round { border-radius: 50%; }
.ch-avatar.has-logo { background: var(--surface); border: 1px solid var(--line); }
.ch-avatar img { width: 100%; height: 100%; object-fit: cover; }
.ch-id { min-width: 0; }
.ch-badges { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 7px; }
.ch-name { font-size: 1.6rem; font-weight: 750; color: var(--ink); line-height: 1.1; letter-spacing: -.01em; }
.ch-sub { color: var(--muted); font-size: .92rem; margin-top: 4px; }
.ch-contacts { display: flex; flex-wrap: wrap; gap: 8px 16px; margin-top: 12px; }
.ch-c { display: inline-flex; align-items: center; gap: 6px; font-size: .85rem; color: var(--ink-2); }
.ch-c svg { width: 15px; height: 15px; color: var(--muted); }
a.ch-c:hover { color: var(--brand-700); }
a.ch-c:hover svg { color: var(--brand-600); }
.ch-socials { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.soc-pill { display: inline-flex; align-items: center; gap: 7px; font-size: .8rem; font-weight: 500; color: var(--ink-2); background: var(--surface-2); border: 1px solid var(--line); padding: 5px 11px; border-radius: var(--pill); }
.soc-pill:hover { border-color: var(--brand-200); color: var(--brand-700); }
.soc-pill svg { width: 15px; height: 15px; }
.ch-actions { display: flex; gap: 8px; flex-wrap: wrap; flex: none; }
.ch-actions svg { width: 15px; height: 15px; }

.client-grid { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 18px; margin-top: 18px; align-items: start; }
.client-main, .client-side { display: flex; flex-direction: column; gap: 18px; min-width: 0; }

.kv-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 0; padding: 0; }
.kv-stats > div { display: flex; flex-direction: column; gap: 4px; padding: 16px 18px; border-right: 1px solid var(--line-2); border-bottom: 1px solid var(--line-2); }
.kv-stats > div:nth-child(2n) { border-right: 0; }
.kv-stats > div:nth-last-child(-n+2) { border-bottom: 0; }
.kv-stats span { font-size: .68rem; text-transform: uppercase; letter-spacing: .04em; color: var(--faint); font-weight: 700; }
.kv-stats b { font-size: 1.1rem; color: var(--ink); }
.neg-num { color: var(--neg); }

.kv { display: grid; grid-template-columns: 116px 1fr; gap: 12px; align-items: start; }
.kv-l { display: inline-flex; align-items: center; gap: 7px; font-size: .8rem; color: var(--muted); font-weight: 500; }
.kv-l svg { width: 15px; height: 15px; flex: none; }
.kv-v { font-size: .87rem; color: var(--ink); line-height: 1.5; }
.client-note { font-size: .88rem; color: var(--ink-2); line-height: 1.55; white-space: pre-wrap; }

.panel-head .panel-title { display: inline-flex; align-items: center; gap: 8px; }
.panel-head .panel-title svg { width: 17px; height: 17px; color: var(--muted); }
.count-pill { font-size: .72rem; font-weight: 700; color: var(--muted); background: var(--line-2); border-radius: var(--pill); padding: 1px 8px; min-width: 20px; text-align: center; }
.panel-body.no-pad { padding: 0; }
.panel-body.no-pad .tbl td:first-child, .panel-body.no-pad .tbl th:first-child { padding-left: 18px; }
.panel-body.no-pad .tbl td:last-child, .panel-body.no-pad .tbl th:last-child { padding-right: 18px; }

.sub-label { font-size: .7rem; text-transform: uppercase; letter-spacing: .05em; font-weight: 700; color: var(--faint); margin-bottom: 8px; }

.line-item { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--line-2); }
.line-item:last-child { border-bottom: 0; padding-bottom: 0; }
.line-item b { color: var(--ink); font-weight: 600; font-size: .92rem; }
.li-sub { font-size: .78rem; color: var(--muted); margin-top: 2px; }
.li-right { text-align: right; }
.li-date { font-size: .76rem; color: var(--muted); margin-top: 3px; }

.people-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.person-card { display: flex; gap: 12px; align-items: flex-start; text-align: left; padding: 13px; border: 1px solid var(--line); border-radius: var(--r); background: var(--surface); transition: border-color .12s, box-shadow .12s; }
.person-card:hover { border-color: var(--brand-200); box-shadow: var(--sh-1); }
.pc-av { width: 38px; height: 38px; border-radius: 50%; flex: none; display: grid; place-items: center; font-size: .8rem; font-weight: 700; color: var(--on-accent-2); background: linear-gradient(150deg, var(--gold-200), var(--gold-700)); }
.pc-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.pc-top { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }
.pc-top b { color: var(--ink); font-weight: 600; font-size: .9rem; }
.pc-primary { display: inline-flex; align-items: center; gap: 3px; font-size: .62rem; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; color: var(--brand-700); background: var(--brand-50); padding: 1px 6px; border-radius: var(--pill); }
.pc-primary svg { width: 11px; height: 11px; }
.pc-role { font-size: .8rem; color: var(--ink-2); }
.pc-contact { font-size: .76rem; color: var(--muted); overflow: hidden; text-overflow: ellipsis; }

.tbl.compact td { padding: 10px 8px; font-size: .86rem; }
.tbl.compact .badge { font-size: .68rem; padding: 2px 8px; }

.comm-list { display: flex; flex-direction: column; }
.comm-row { display: flex; gap: 12px; align-items: flex-start; padding: 12px 0; border-bottom: 1px solid var(--line-2); }
.comm-row:last-child { border-bottom: 0; padding-bottom: 0; }
.comm-row:first-child { padding-top: 0; }
.comm-ico { width: 32px; height: 32px; border-radius: 9px; flex: none; display: grid; place-items: center; background: var(--surface-2); color: var(--ink-2); }
.comm-ico svg { width: 16px; height: 16px; }
.comm-body { flex: 1; min-width: 0; }
.comm-top { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.comm-top b { color: var(--ink); font-weight: 600; font-size: .88rem; }
.comm-time { font-size: .74rem; color: var(--faint); margin-left: auto; }
.comm-prev { font-size: .82rem; color: var(--muted); margin-top: 3px; line-height: 1.45; }
.dir-pill { font-size: .62rem; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; padding: 1px 7px; border-radius: var(--pill); }
.dir-pill.out { background: var(--brand-50); color: var(--brand-700); }
.dir-pill.in { background: var(--gold-50); color: var(--gold-700); }
.comm-row .icon-btn { flex: none; }

.file-list { display: flex; flex-direction: column; gap: 8px; }
.file-row { display: flex; gap: 12px; align-items: center; padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--r); background: var(--surface); }
.file-ico { width: 34px; height: 34px; border-radius: 8px; flex: none; display: grid; place-items: center; color: #fff; }
.file-ico svg { width: 17px; height: 17px; }
.file-ico.img { background: linear-gradient(150deg, #5B8DEF, #2A5BD7); }
.file-ico.pdf { background: linear-gradient(150deg, #EF6B6B, #C53030); }
.file-meta { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.file-meta b { color: var(--ink); font-weight: 600; font-size: .86rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.file-meta span { font-size: .74rem; }
.file-row .icon-btn { flex: none; }

.empty.sm { padding: 22px 16px; font-size: .85rem; }

/* ============================================================
   Outbound (Apollo-style sequences + prospects)
   ============================================================ */
.stat-row { display: grid; grid-template-columns: repeat(6, 1fr); gap: 14px; margin-bottom: 18px; }
.stat-row .statc { padding: 16px 16px 15px; }
.stat-row .sc-num { font-size: clamp(1.5rem, 2.4vw, 2rem); }

/* --- sequence cards --- */
.seq-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 14px; }
.seq-card { border: 1px solid var(--line); border-radius: var(--r); background: var(--surface); padding: 16px 16px 15px; cursor: pointer; transition: border-color .14s ease, box-shadow .14s ease, transform .14s ease; display: flex; flex-direction: column; gap: 13px; }
.seq-card:hover { border-color: color-mix(in srgb, var(--accent) 55%, var(--line)); box-shadow: var(--sh-2); transform: translateY(-2px); }
.seq-card-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.seq-name { font-family: var(--font-display); font-weight: 700; font-size: 1.02rem; color: var(--ink); line-height: 1.25; letter-spacing: -.01em; }
.seq-meta { display: flex; align-items: center; gap: 7px; margin-top: 6px; font-size: .8rem; }
.seq-toggle { flex: none; }
.seq-cad { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; padding: 11px 0; border-top: 1px solid var(--line-2); border-bottom: 1px solid var(--line-2); }
.cad-pill { width: 26px; height: 26px; border-radius: var(--r-xs); display: grid; place-items: center; background: var(--surface-2); color: var(--ink-2); border: 1px solid var(--line-2); }
.cad-pill.cad-email { background: color-mix(in srgb, var(--accent) 16%, var(--surface)); color: color-mix(in srgb, var(--ink) 70%, var(--accent)); border-color: color-mix(in srgb, var(--accent) 30%, var(--line-2)); }
.cad-pill.cad-call { background: color-mix(in srgb, var(--pos) 14%, var(--surface)); color: var(--pos); border-color: color-mix(in srgb, var(--pos) 26%, var(--line-2)); }
.cad-pill.cad-linkedin { background: color-mix(in srgb, #2563eb 14%, var(--surface)); color: #2563eb; border-color: color-mix(in srgb, #2563eb 24%, var(--line-2)); }
.seq-steps { font-size: .76rem; font-weight: 600; color: var(--ink-faint); margin-left: auto; }
.seq-figs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.seq-figs > div { display: flex; flex-direction: column; gap: 1px; }
.seq-figs b { font-family: var(--font-display); font-weight: 700; font-size: 1.15rem; color: var(--ink); line-height: 1; font-variant-numeric: tabular-nums; }
.seq-figs span { font-size: .7rem; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; color: var(--ink-faint); }

/* --- engagement bars --- */
.eng { display: flex; flex-direction: column; gap: 7px; }
.eng-row { display: flex; align-items: center; gap: 9px; }
.eng-l { width: 40px; font-size: .72rem; font-weight: 600; color: var(--ink-faint); flex: none; }
.eng-track { flex: 1; height: 6px; border-radius: var(--pill); background: var(--surface-2); overflow: hidden; }
.eng-track i { display: block; height: 100%; border-radius: var(--pill); background: var(--accent); }
.eng-track.reply i { background: var(--pos); }
.eng-v { width: 38px; text-align: right; font-size: .74rem; font-weight: 700; color: var(--ink-2); flex: none; font-variant-numeric: tabular-nums; }
.eng-inline { font-size: .8rem; color: var(--ink-2); font-variant-numeric: tabular-nums; white-space: nowrap; }
.step-prog { font-size: .82rem; font-weight: 600; color: var(--ink-2); font-variant-numeric: tabular-nums; }

/* --- sequence detail --- */
.seq-hero { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; padding: 22px; margin-bottom: 18px; }
.seq-hero-main { min-width: 0; }
.seq-grid2 { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 18px; align-items: start; }
.seq-main { display: flex; flex-direction: column; gap: 18px; min-width: 0; }
.seq-side { display: flex; flex-direction: column; gap: 14px; position: sticky; top: 18px; }

/* --- cadence timeline --- */
.cadence { display: flex; flex-direction: column; }
.cad-step { display: flex; gap: 14px; padding: 0 0 18px; position: relative; }
.cad-step:not(:last-child)::before { content: ""; position: absolute; left: 17px; top: 36px; bottom: 0; width: 2px; background: var(--line-2); }
.cad-step:last-child { padding-bottom: 0; }
.cad-ico { width: 36px; height: 36px; border-radius: 50%; flex: none; display: grid; place-items: center; background: var(--surface-2); color: var(--ink-2); border: 1px solid var(--line); z-index: 1; }
.cad-step.cad-email .cad-ico { background: color-mix(in srgb, var(--accent) 18%, var(--surface)); color: color-mix(in srgb, var(--ink) 65%, var(--accent)); border-color: color-mix(in srgb, var(--accent) 34%, var(--line)); }
.cad-step.cad-call .cad-ico { background: color-mix(in srgb, var(--pos) 16%, var(--surface)); color: var(--pos); border-color: color-mix(in srgb, var(--pos) 30%, var(--line)); }
.cad-step.cad-linkedin .cad-ico { background: color-mix(in srgb, #2563eb 14%, var(--surface)); color: #2563eb; border-color: color-mix(in srgb, #2563eb 26%, var(--line)); }
.cad-step.cad-wait .cad-ico { border-style: dashed; }
.cad-body { padding-top: 6px; min-width: 0; flex: 1; }
.cad-h { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }
.cad-h b { font-size: .94rem; color: var(--ink); font-weight: 650; }
.cad-day { font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--ink-faint); }
.cad-type { font-size: .66rem !important; }
.cad-sub { font-size: .87rem; font-weight: 600; color: var(--ink); margin-top: 7px; }
.cad-text { font-size: .85rem; color: var(--ink-2); line-height: 1.55; margin-top: 4px; }

/* --- prospect drawer --- */
.pro-drawer { display: flex; flex-direction: column; gap: 16px; }
.pro-head { display: flex; align-items: center; gap: 13px; }
.pro-head-id { min-width: 0; }
.pro-title { font-size: .92rem; color: var(--ink-2); margin-top: 4px; }
.pro-contacts { display: flex; flex-wrap: wrap; gap: 8px 18px; padding: 14px 0; border-top: 1px solid var(--line-2); border-bottom: 1px solid var(--line-2); }
.pro-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.pro-fig { background: var(--surface-2); border: 1px solid var(--line-2); border-radius: var(--r-sm); padding: 12px; display: flex; flex-direction: column; gap: 3px; }
.pro-fig span { font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--ink-faint); }
.pro-fig b { font-family: var(--font-display); font-weight: 700; font-size: 1.4rem; color: var(--ink); line-height: 1; font-variant-numeric: tabular-nums; }
.pro-hist { display: flex; flex-direction: column; }
.hist-row { display: flex; gap: 11px; padding: 9px 0; }
.hist-row:not(:last-child) { border-bottom: 1px solid var(--line-2); }
.hist-ico { width: 26px; height: 26px; border-radius: 50%; flex: none; display: grid; place-items: center; background: var(--surface-2); color: var(--ink-2); border: 1px solid var(--line-2); }
.hist-body { font-size: .87rem; color: var(--ink); line-height: 1.4; }
.hist-ts { font-size: .76rem; margin-top: 2px; }

/* --- enroll picker --- */
.enroll-list { display: flex; flex-direction: column; max-height: 52vh; overflow: auto; border: 1px solid var(--line); border-radius: var(--r); }
.enroll-row { display: flex; align-items: center; gap: 12px; padding: 11px 14px; cursor: pointer; }
.enroll-row:not(:last-child) { border-bottom: 1px solid var(--line-2); }
.enroll-row:hover { background: var(--surface-2); }
.enroll-cb { width: 17px; height: 17px; flex: none; accent-color: var(--accent); cursor: pointer; }
.enroll-av { flex: none; }
.enroll-main { display: flex; flex-direction: column; gap: 1px; min-width: 0; flex: 1; }
.enroll-main b { font-size: .9rem; color: var(--ink); font-weight: 600; }
.enroll-main span { font-size: .8rem; }
.enroll-status { flex: none; }

/* --- step builder --- */
.step-builder { margin-top: 6px; border-top: 1px solid var(--line-2); padding-top: 16px; }
.sb-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.step-row { border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--surface-2); padding: 12px; margin-bottom: 10px; display: flex; flex-direction: column; gap: 9px; }
.step-row-top { display: flex; align-items: center; gap: 9px; }
.step-ico { width: 30px; height: 30px; border-radius: var(--r-xs); flex: none; display: grid; place-items: center; background: var(--surface); color: var(--ink-2); border: 1px solid var(--line); }
.step-ico.cad-email { color: color-mix(in srgb, var(--ink) 65%, var(--accent)); }
.step-row-top .select { width: auto; flex: none; }
.step-day-l { font-size: .78rem; font-weight: 600; color: var(--ink-faint); flex: none; }
.step-day-in { width: 64px; flex: none; }
.step-label { flex: 1; min-width: 0; }
.step-del { flex: none; }
.step-note { font-size: .82rem; color: var(--ink-faint); font-style: italic; padding-left: 39px; }

/* ============================================================
   CRM depth — lifecycle, lead status, owners, tasks, timeline
   ============================================================ */
/* Lifecycle filter pills (clients list) */
.lc-filter { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
.lcf { display: inline-flex; align-items: center; gap: 7px; padding: 6px 12px; border: 1px solid var(--line); border-radius: var(--pill); background: var(--surface); color: var(--muted); font-size: .82rem; font-weight: 600; cursor: pointer; transition: border-color .14s, color .14s, background .14s; }
.lcf:hover { border-color: color-mix(in srgb, var(--accent) 40%, var(--line)); color: var(--ink-2); }
.lcf.on { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.lcf-n { font-size: .72rem; font-weight: 700; background: var(--surface-2); color: var(--muted); border-radius: var(--pill); padding: 0 7px; min-width: 18px; text-align: center; }
.lcf.on .lcf-n { background: color-mix(in srgb, var(--on-accent) 20%, transparent); color: var(--on-accent); }

/* Owner cell + mini avatar */
.owner-cell { display: inline-flex; align-items: center; gap: 8px; font-size: .85rem; color: var(--ink-2); }
.mini-av { width: 24px; height: 24px; border-radius: 50%; flex: none; display: grid; place-items: center; font-size: .62rem; font-weight: 700; background: linear-gradient(150deg, var(--brand-400), var(--brand-700)); color: var(--on-accent); }

/* Lead status pill with semantic dot */
.status-pill { display: inline-flex; align-items: center; gap: 6px; font-size: .76rem; font-weight: 600; color: var(--ink-2); }
.sd { width: 8px; height: 8px; border-radius: 50%; background: var(--muted); flex: none; }
.sd.new { background: var(--accent); }
.sd.open { background: var(--gold); }
.sd.work { background: var(--warn); }
.sd.good { background: var(--pos); }
.sd.warm { background: color-mix(in srgb, var(--gold) 60%, var(--neg)); }
.sd.cold { background: var(--faint); }

/* Lifecycle stage tracker (client profile) */
.lifecycle-bar { padding: 14px 16px; margin-bottom: 18px; }
.lc-track { display: flex; gap: 7px; }
.lc-step { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 7px; padding: 11px 6px 10px; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--surface); cursor: pointer; transition: transform .12s, border-color .15s, background .15s; }
.lc-step:hover { transform: translateY(-2px); border-color: color-mix(in srgb, var(--accent) 42%, var(--line)); }
.lc-dot { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; font-size: .8rem; font-weight: 700; background: var(--surface-2); color: var(--muted); border: 1px solid var(--line); }
.lc-dot svg { width: 13px; height: 13px; }
.lc-name { font-size: .75rem; font-weight: 600; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.lc-step.done .lc-dot { background: color-mix(in srgb, var(--accent) 20%, var(--surface)); color: color-mix(in srgb, var(--ink) 55%, var(--accent)); border-color: color-mix(in srgb, var(--accent) 35%, var(--line)); }
.lc-step.done .lc-name { color: var(--ink-2); }
.lc-step.on { background: var(--accent); border-color: var(--accent); }
.lc-step.on .lc-dot { background: var(--on-accent); color: color-mix(in srgb, var(--ink) 55%, var(--accent)); border-color: transparent; }
.lc-step.on .lc-name { color: var(--on-accent); font-weight: 700; }

/* Inline-editable account properties (side panel) */
.prop-list { display: flex; flex-direction: column; padding: 0; }
.prop { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 18px; border-bottom: 1px solid var(--line-2); margin: 0; }
.prop:last-child { border-bottom: 0; }
.prop-l { display: inline-flex; align-items: center; gap: 8px; font-size: .8rem; color: var(--muted); font-weight: 600; flex: none; }
.prop-l svg { width: 15px; height: 15px; color: var(--faint); }
.prop-v { font-size: .85rem; color: var(--ink-2); font-weight: 600; text-align: right; }
.prop .select { width: auto; max-width: 58%; flex: none; font-size: .82rem; padding: 5px 26px 5px 10px; }

/* Open tasks / follow-ups */
.crm-tasks { display: flex; flex-direction: column; gap: 8px; }
.task-row { display: flex; align-items: center; gap: 11px; padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--surface); cursor: pointer; transition: border-color .14s, background .14s; }
.task-row:hover { border-color: color-mix(in srgb, var(--accent) 35%, var(--line)); background: var(--surface-2); }
.task-check { width: 22px; height: 22px; border-radius: 50%; border: 1.6px solid var(--line); background: var(--surface); flex: none; display: grid; place-items: center; cursor: pointer; color: transparent; transition: border-color .14s, color .14s; }
.task-check svg { width: 13px; height: 13px; }
.task-check:hover { border-color: var(--pos); color: color-mix(in srgb, var(--pos) 60%, transparent); }
.task-type { width: 28px; height: 28px; border-radius: var(--r-xs); flex: none; display: grid; place-items: center; background: var(--surface-2); color: var(--ink-2); border: 1px solid var(--line-2); }
.task-type svg { width: 14px; height: 14px; }
.task-main { flex: 1; min-width: 0; }
.task-title { font-size: .9rem; font-weight: 600; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.task-meta { font-size: .76rem; color: var(--muted); margin-top: 1px; }
.due-chip { flex: none; font-size: .72rem; font-weight: 700; padding: 3px 9px; border-radius: var(--pill); background: var(--surface-2); color: var(--muted); border: 1px solid var(--line-2); white-space: nowrap; }
.due-chip.soon { background: var(--gold-50); color: var(--gold-700); border-color: var(--gold-200); }
.due-chip.today { background: color-mix(in srgb, var(--accent) 18%, var(--surface)); color: color-mix(in srgb, var(--ink) 58%, var(--accent)); border-color: color-mix(in srgb, var(--accent) 32%, var(--line)); }
.due-chip.over { background: var(--neg-bg); color: var(--neg); border-color: color-mix(in srgb, var(--neg) 30%, var(--line)); }

/* Unified activity timeline */
.timeline { display: flex; flex-direction: column; }
.tl-row { display: flex; gap: 12px; padding: 0 0 16px; position: relative; }
.tl-row::before { content: ""; position: absolute; left: 14px; top: 32px; bottom: -2px; width: 2px; background: var(--line-2); }
.tl-row:last-child { padding-bottom: 0; }
.tl-row:last-child::before { display: none; }
.tl-ico { width: 30px; height: 30px; border-radius: 50%; flex: none; display: grid; place-items: center; background: var(--surface-2); color: var(--ink-2); border: 1px solid var(--line); position: relative; z-index: 1; }
.tl-ico svg { width: 15px; height: 15px; }
.tl-deal { background: color-mix(in srgb, var(--accent) 16%, var(--surface)); color: color-mix(in srgb, var(--ink) 52%, var(--accent)); border-color: color-mix(in srgb, var(--accent) 28%, var(--line)); }
.tl-invoice { background: var(--pos-bg); color: var(--pos); border-color: color-mix(in srgb, var(--pos) 28%, var(--line)); }
.tl-form { background: var(--gold-50); color: var(--gold-700); border-color: var(--gold-200); }
.tl-task { background: color-mix(in srgb, var(--pos) 14%, var(--surface)); color: var(--pos); border-color: color-mix(in srgb, var(--pos) 26%, var(--line)); }
.tl-body { flex: 1; min-width: 0; padding-top: 3px; }
.tl-top { display: flex; align-items: baseline; gap: 10px; justify-content: space-between; }
.tl-title { font-size: .86rem; font-weight: 600; color: var(--ink); }
.tl-ts { font-size: .72rem; color: var(--faint); flex: none; white-space: nowrap; }
.tl-sub { font-size: .8rem; color: var(--muted); margin-top: 2px; line-height: 1.45; }

/* Deal win-probability bar (profile deals table) */
.prob { display: inline-block; width: 54px; height: 6px; border-radius: var(--pill); background: var(--line-2); overflow: hidden; vertical-align: middle; }
.prob i { display: block; height: 100%; background: var(--accent); border-radius: inherit; }
.prob-n { font-size: .76rem; color: var(--muted); font-weight: 600; margin-left: 8px; }

@media (max-width: 720px) {
  .lc-track { overflow-x: auto; -webkit-overflow-scrolling: touch; padding-bottom: 2px; }
  .lc-step { flex: 0 0 auto; min-width: 88px; }
  .prop .select { max-width: 56%; }
}

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width: 1080px) {
  .kpis { grid-template-columns: repeat(2, 1fr); }
  .grid-2, .grid-2b { grid-template-columns: 1fr; }
  .agent-gal { grid-template-columns: 1fr; }
  .runner-grid { grid-template-columns: 1fr; }
  .runner-in { border-right: 0; border-bottom: 1px solid var(--line-2); }
  /* bento: hero full-width, stats become a 4-up row */
  .b-hero { grid-column: span 12; }
  .b-spot, .b-stat { grid-column: span 3; }
  .b-pipe, .b-act { grid-column: span 12; }
  .stat-row { grid-template-columns: repeat(3, 1fr); }
  .seq-grid2 { grid-template-columns: 1fr; }
  .seq-side { position: static; flex-direction: row; flex-wrap: wrap; }
  .seq-side > .panel { flex: 1 1 260px; }
  .seq-side > .btn { flex-basis: 100%; }
}
@media (max-width: 860px) {
  .b-quick .quick-grid { grid-template-columns: repeat(2, 1fr); }
  .shell { grid-template-columns: 1fr; }
  .side {
    position: fixed; z-index: 90; top: 0; bottom: 0; left: 0; width: 264px;
    transform: translateX(-100%); transition: transform .22s ease; box-shadow: var(--sh-3);
  }
  .side.open { transform: none; }
  .side-toggle { display: grid; }
  .view { padding: 20px 18px 50px; }
  .task-cols { grid-template-columns: 1fr; }
  .topbar-search { display: none; }
  .client-grid { grid-template-columns: 1fr; }
  .client-side { flex-direction: row; flex-wrap: wrap; }
  .client-side > .panel { flex: 1 1 280px; }
}
@media (max-width: 720px) {
  .b-spot, .b-stat { grid-column: span 6; }
  .stat-row { grid-template-columns: repeat(2, 1fr); }
  .seq-hero { flex-direction: column; }
  .seq-hero .ch-actions { width: 100%; flex-wrap: wrap; }
}
@media (max-width: 560px) {
  .kpis { grid-template-columns: 1fr; }
  .quick-grid, .b-quick .quick-grid { grid-template-columns: 1fr; }
  .b-spot, .b-stat { grid-column: span 12; }
  .bento { gap: 14px; }
  .people-grid { grid-template-columns: 1fr; }
  .client-hero { padding: 18px; }
  .ch-actions { width: 100%; }
  .hero-card { padding: 24px 22px; min-height: 0; }
  .form-row { grid-template-columns: 1fr; }
  .page-head { align-items: flex-start; }
  .stat-row { grid-template-columns: 1fr 1fr; }
  .pro-grid { grid-template-columns: 1fr 1fr; }
}

/* ============================================================
   Invoices — revenue command center
   ============================================================ */
.inv-summary { display: grid; grid-template-columns: repeat(6, 1fr); gap: 12px; margin-bottom: 14px; }
.inv-summary .statc { padding: 15px 16px 13px; border-radius: var(--r-lg); }
.inv-summary .sc-num { font-size: clamp(1.3rem, 2vw, 1.8rem); margin-top: 4px; }
.inv-summary .statc.spot .sc-num { font-size: clamp(1.4rem, 2.2vw, 1.95rem); }
.inv-summary .sc-meta { padding-top: 8px; font-size: .74rem; }

.inv-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-bottom: 12px; flex-wrap: wrap; }
.inv-tabs { display: inline-flex; flex-wrap: wrap; gap: 4px; background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r-sm); padding: 4px; }
.it-tab { display: inline-flex; align-items: center; gap: 7px; padding: 7px 13px; border-radius: 7px; font-size: .85rem; font-weight: 600; color: var(--muted); transition: background .12s ease, color .12s ease; }
.it-tab:hover { color: var(--ink); }
.it-tab.on { background: var(--surface); color: var(--brand-700); box-shadow: var(--sh-1); }
.it-count { display: inline-flex; align-items: center; justify-content: center; min-width: 19px; height: 18px; padding: 0 5px; border-radius: var(--pill); background: var(--line-2); color: var(--muted); font-size: .72rem; font-weight: 700; }
.it-tab.on .it-count { background: var(--brand-100); color: var(--brand-700); }
.inv-tools { display: inline-flex; align-items: center; gap: 10px; }

.inv-panel { padding: 0; overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; }
.inv-tbl { min-width: 680px; }
.inv-tbl td { vertical-align: middle; }
.iv-num { display: flex; align-items: center; gap: 8px; }
.iv-num b { font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums; }
.iv-chip { display: inline-flex; align-items: center; gap: 4px; padding: 2px 7px; border-radius: var(--pill); background: var(--brand-50); color: var(--brand-700); font-size: .67rem; font-weight: 700; }
.iv-desc { font-size: .8rem; color: var(--muted); margin-top: 3px; max-width: 270px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.iv-client { display: inline-flex; align-items: center; gap: 9px; font-weight: 600; color: var(--ink-2); }
.iv-struct { font-size: .82rem; color: var(--muted); }
.iv-due-over { color: var(--neg); font-weight: 600; }
.iv-due-tag { font-size: .69rem; font-weight: 700; color: var(--neg); margin-top: 2px; }
.iv-bal { font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums; }
.iv-bal.paid { color: var(--pos); font-weight: 600; font-size: .82rem; }
.iv-bar { width: 84px; height: 4px; border-radius: var(--pill); background: var(--line-2); margin: 5px 0 0 auto; overflow: hidden; }
.iv-bar i { display: block; height: 100%; background: var(--brand-500); border-radius: inherit; }
.iv-row-acts { display: inline-flex; gap: 4px; justify-content: flex-end; }
.ir-act { width: 30px; height: 30px; display: inline-flex; align-items: center; justify-content: center; border-radius: 8px; color: var(--muted); border: 1px solid transparent; transition: background .12s ease, color .12s ease, border-color .12s ease; }
.ir-act:hover { background: var(--brand-50); color: var(--brand-700); border-color: var(--brand-200); }
.inv-badge { white-space: nowrap; }

/* ============================================================
   Invoice builder — full builder dialog
   ============================================================ */
.inv-builder { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: min(1100px, calc(100vw - 40px)); height: min(800px, calc(100vh - 40px));
  display: flex; flex-direction: column; background: var(--surface); border-radius: var(--r-lg);
  box-shadow: var(--sh-3); overflow: hidden; animation: fadeUp .22s cubic-bezier(.2,.7,.3,1); }
.ib-head { display: flex; align-items: center; justify-content: space-between; padding: 14px 18px; border-bottom: 1px solid var(--line-2); flex: none; }
.ib-head-l { display: flex; align-items: center; gap: 12px; }
.ib-doc { width: 38px; height: 38px; display: inline-flex; align-items: center; justify-content: center; border-radius: 10px; background: var(--brand-50); color: var(--brand-600); flex: none; }
.ib-title { font-family: var(--font-display); font-weight: 700; font-size: 1.05rem; color: var(--ink); }
.ib-sub { font-size: .82rem; color: var(--muted); margin-top: 1px; }
.ib-body { flex: 1; display: flex; min-height: 0; }
.ib-left { flex: 1; display: flex; flex-direction: column; min-width: 0; border-right: 1px solid var(--line-2); }
.ib-tabs { display: flex; gap: 2px; padding: 10px 14px 0; border-bottom: 1px solid var(--line-2); overflow-x: auto; flex: none; }
.ib-tab { display: inline-flex; align-items: center; gap: 7px; padding: 9px 13px; border-radius: 8px 8px 0 0; font-size: .85rem; font-weight: 600; color: var(--muted); white-space: nowrap; border-bottom: 2px solid transparent; margin-bottom: -1px; transition: color .12s ease, background .12s ease, border-color .12s ease; }
.ib-tab:hover { color: var(--ink); }
.ib-tab.on { color: var(--brand-700); border-bottom-color: var(--brand-600); background: var(--brand-50); }
.ib-tab svg { opacity: .8; }
.ib-tabwrap { flex: 1; overflow-y: auto; padding: 18px 20px; }
.ib-right { width: 420px; flex: none; background: var(--surface-2); overflow-y: auto; padding: 18px; }
.ib-foot { display: flex; align-items: center; gap: 10px; padding: 13px 18px; border-top: 1px solid var(--line-2); flex: none; }

.ib-pane-h { font-family: var(--font-display); font-weight: 700; font-size: 1.02rem; color: var(--ink); margin-bottom: 14px; }
.ib-pane-sh { font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--faint); margin-bottom: 8px; }
.ib-link-note { display: flex; align-items: center; gap: 8px; padding: 10px 12px; border-radius: var(--r-sm); background: var(--brand-50); color: var(--brand-700); font-size: .85rem; }
.ib-from-deal { display: inline-flex; align-items: center; gap: 8px; padding: 10px 14px; border-radius: var(--r-sm); border: 1px dashed var(--line); color: var(--muted); font-weight: 600; font-size: .85rem; width: 100%; justify-content: center; transition: color .12s ease, border-color .12s ease, background .12s ease; }
.ib-from-deal:hover { border-color: var(--brand-400); color: var(--brand-700); background: var(--brand-50); }

/* line items */
.ib-pane .li-row { grid-template-columns: 1fr 58px 92px 30px 28px; }
.li-head { font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--faint); margin-bottom: 6px; }
.li-head span { padding: 0 2px; }
.li-ai { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 34px; border-radius: 8px; color: var(--brand-600); background: var(--brand-50); transition: background .12s ease; }
.li-ai:hover { background: var(--brand-100); }
.ib-totals { margin: 14px 0 4px; padding: 12px 14px; border-radius: var(--r-sm); background: var(--surface-2); }
.ibt-row { display: flex; justify-content: space-between; font-size: .88rem; padding: 3px 0; color: var(--ink-2); }
.ibt-row.muted { color: var(--muted); font-size: .83rem; }
.ibt-total { border-top: 1px solid var(--line); margin-top: 6px; padding-top: 8px; font-weight: 700; color: var(--ink); font-size: 1rem; }
.ibt-total b { font-family: var(--font-display); }

/* AI assist */
.ai-tools { margin-top: 16px; padding: 14px; border-radius: var(--r-sm); border: 1px solid var(--line); background: color-mix(in srgb, var(--accent) 4%, var(--surface)); }
.ai-tools-h { display: flex; align-items: center; gap: 7px; font-size: .8rem; font-weight: 700; color: var(--brand-700); margin-bottom: 10px; }
.ai-tools-h svg { color: var(--accent); }
.ai-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 7px; }
.ai-tool { display: inline-flex; align-items: center; gap: 8px; padding: 9px 11px; border-radius: 9px; border: 1px solid var(--line); background: var(--surface); font-size: .82rem; font-weight: 600; color: var(--ink-2); text-align: left; transition: border-color .12s ease, color .12s ease, transform .1s ease, box-shadow .12s ease; }
.ai-tool svg { color: var(--brand-500); flex: none; }
.ai-tool:hover { border-color: var(--brand-400); color: var(--brand-700); transform: translateY(-1px); box-shadow: var(--sh-1); }
.ai-chip { display: inline-flex; align-items: center; gap: 6px; padding: 6px 11px; border-radius: var(--pill); border: 1px solid var(--line); background: var(--surface); font-size: .8rem; font-weight: 600; color: var(--ink-2); transition: border-color .12s ease, color .12s ease, background .12s ease; }
.ai-chip svg { color: var(--brand-500); }
.ai-chip:hover { border-color: var(--brand-400); color: var(--brand-700); background: var(--brand-50); }

/* payment structure + processors */
.ib-cond { margin: 10px 0 14px; padding: 12px 14px; border-radius: var(--r-sm); background: var(--brand-50); }
.ib-cond .field { margin-bottom: 0; }
.ib-recur-note { display: flex; align-items: center; gap: 8px; color: var(--brand-700); font-size: .85rem; }
.ms-row { display: grid; grid-template-columns: 1fr 66px 88px; gap: 8px; align-items: center; margin-bottom: 7px; }
.ms-amt { text-align: right; font-weight: 600; color: var(--ink-2); font-variant-numeric: tabular-nums; font-size: .86rem; }
.ms-row[data-status="paid"] .ms-amt { color: var(--pos); }
.proc-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-bottom: 14px; }
.proc-card { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 12px 8px; border-radius: 10px; border: 1px solid var(--line); background: var(--surface); transition: border-color .12s ease, background .12s ease; }
.proc-card:hover { border-color: var(--brand-400); }
.proc-card.on { border-color: var(--brand-600); background: var(--brand-50); box-shadow: inset 0 0 0 1px var(--brand-600); }
.proc-ico { color: var(--ink-2); }
.proc-card.on .proc-ico { color: var(--brand-700); }
.proc-name { font-size: .8rem; font-weight: 700; color: var(--ink); }
.proc-fee { font-size: .67rem; color: var(--muted); }
.ib-paylink { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-radius: var(--r-sm); border: 1px solid var(--line); background: var(--surface-2); }
.ib-paylink.solo { background: var(--brand-50); border-color: var(--brand-200); }
.ib-pl-label { display: inline-flex; align-items: center; gap: 6px; font-size: .78rem; font-weight: 600; color: var(--muted); white-space: nowrap; }
.ib-paylink code { flex: 1; font-size: .8rem; color: var(--brand-700); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ib-pl-copy { font-size: .78rem; font-weight: 700; color: var(--brand-600); padding: 4px 8px; border-radius: 6px; }
.ib-pl-copy:hover { background: var(--brand-100); }

/* templates */
.tmpl-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.tmpl-card { display: flex; flex-direction: column; gap: 4px; padding: 14px; border-radius: var(--r-sm); border: 1px solid var(--line); background: var(--surface); text-align: left; transition: border-color .14s ease, transform .12s ease, box-shadow .14s ease; }
.tmpl-card:hover { border-color: var(--brand-400); transform: translateY(-2px); box-shadow: var(--sh-1); }
.tmpl-card.on { border-color: var(--brand-600); box-shadow: inset 0 0 0 1px var(--brand-600); background: var(--brand-50); }
.tc-ico { width: 34px; height: 34px; display: inline-flex; align-items: center; justify-content: center; border-radius: 9px; background: var(--brand-50); color: var(--brand-600); margin-bottom: 4px; }
.tmpl-card.on .tc-ico { background: var(--brand-100); }
.tc-name { font-weight: 700; color: var(--ink); font-size: .92rem; }
.tc-desc { font-size: .79rem; color: var(--muted); line-height: 1.35; }
.tc-best { font-size: .72rem; font-weight: 600; color: var(--brand-600); margin-top: 2px; }

/* send */
.send-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 9px; margin: 14px 0; }
.send-opt { display: inline-flex; align-items: center; gap: 10px; padding: 13px 14px; border-radius: var(--r-sm); border: 1px solid var(--line); background: var(--surface); font-weight: 600; font-size: .86rem; color: var(--ink-2); text-align: left; transition: border-color .12s ease, color .12s ease, background .12s ease, transform .1s ease; }
.send-opt svg { color: var(--brand-500); flex: none; }
.send-opt:hover { border-color: var(--brand-400); color: var(--brand-700); background: var(--brand-50); transform: translateY(-1px); }
.send-note { display: flex; align-items: flex-start; gap: 8px; font-size: .8rem; color: var(--muted); line-height: 1.4; }
.send-note svg { color: var(--pos); flex: none; margin-top: 1px; }

/* automations */
.auto-list { display: flex; flex-direction: column; gap: 8px; margin-bottom: 14px; }
.auto-step { display: flex; align-items: center; gap: 11px; padding: 12px 14px; border-radius: var(--r-sm); border: 1px solid var(--line); background: var(--surface); }
.auto-ic { width: 30px; height: 30px; display: inline-flex; align-items: center; justify-content: center; border-radius: 8px; background: var(--brand-50); color: var(--brand-600); flex: none; }
.auto-lbl { flex: 1; font-size: .88rem; font-weight: 600; color: var(--ink-2); }

/* ============================================================
   Hosted invoice preview — looks like a real hosted pay page
   ============================================================ */
.hosted { border-radius: 10px; overflow: hidden; box-shadow: var(--sh-2); background: #fff; }
.ho-bar { display: flex; align-items: center; gap: 8px; padding: 8px 12px; background: #2b2924; }
.ho-bar-dot { width: 9px; height: 9px; border-radius: 50%; background: #5ac26a; flex: none; }
.ho-bar-url { flex: 1; font-size: .71rem; color: #cfcabb; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ho-bar-lock { display: inline-flex; align-items: center; gap: 4px; font-size: .67rem; color: #9fd6a6; flex: none; }
.ho-paper { padding: 22px; background: #fff; color: #2a2820; font-size: .82rem; }
.ho-paper .muted { color: #8a8578 !important; }
.ho-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; margin-bottom: 18px; }
.ho-brand { display: flex; align-items: center; gap: 10px; }
.ho-logo { width: 38px; height: 38px; border-radius: 9px; background: var(--brand-600); color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: .9rem; flex: none; }
.ho-studio { font-weight: 800; color: #1a1a1a; font-size: .95rem; }
.ho-tag { font-size: .71rem; }
.ho-meta { text-align: right; flex: none; }
.ho-inv-no { font-weight: 800; color: #1a1a1a; font-variant-numeric: tabular-nums; margin-bottom: 5px; }
.ho-parties { display: flex; justify-content: space-between; gap: 14px; margin-bottom: 16px; }
.ho-lbl { font-size: .63rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: #a39e90; display: block; margin-bottom: 2px; }
.ho-party { font-weight: 700; color: #1a1a1a; }
.ho-dates { text-align: right; font-size: .77rem; color: #4a473f; }
.ho-dates > div { margin-bottom: 4px; }
.ho-dates .ho-lbl { display: inline; margin-right: 4px; }
.ho-items { width: 100%; border-collapse: collapse; margin-bottom: 14px; }
.ho-items th { text-align: left; font-size: .63rem; text-transform: uppercase; letter-spacing: .05em; color: #a39e90; padding: 6px 0; border-bottom: 1px solid #e7e3d8; }
.ho-items td { padding: 8px 0; border-bottom: 1px solid #f0ece1; color: #2a2820; font-size: .82rem; }
.hi-q { text-align: center; width: 48px; }
.hi-r { text-align: right; width: 90px; font-variant-numeric: tabular-nums; }
.ho-totals { margin-left: auto; width: 64%; }
.ho-tline { display: flex; justify-content: space-between; padding: 3px 0; font-size: .82rem; color: #4a473f; }
.ho-grand { border-top: 2px solid #1a1a1a; margin-top: 6px; padding-top: 8px; font-weight: 800; color: #1a1a1a; font-size: 1rem; }
.ho-pay { margin-top: 18px; }
.ho-paybtn { width: 100%; padding: 14px; border-radius: 10px; background: var(--brand-600); color: #fff; font-weight: 700; font-size: .95rem; display: flex; align-items: center; justify-content: center; gap: 6px; box-shadow: 0 8px 18px -8px var(--brand-600); transition: background .14s ease; }
.ho-paybtn:hover { background: var(--brand-700); }
.ho-pay-foot { text-align: center; margin-top: 8px; }
.ho-proc { display: inline-flex; align-items: center; gap: 5px; font-size: .71rem; color: #8a8578; }
.ho-qr-wrap { display: flex; align-items: center; gap: 12px; justify-content: center; margin-top: 14px; padding-top: 14px; border-top: 1px dashed #e2ded2; }
.ho-qr { color: #161616; line-height: 0; }
.ho-qr svg.qr { display: block; border-radius: 6px; }
.ho-qr-cap { font-size: .72rem; color: #6f6a5e; line-height: 1.35; }
.ho-terms { margin-top: 14px; padding-top: 12px; border-top: 1px solid #f0ece1; font-size: .72rem; color: #8a8578; line-height: 1.45; }
/* template skins */
.ho-paper.tmpl-creative .ho-head { margin: -22px -22px 18px; padding: 22px; background: linear-gradient(135deg, var(--brand-600), var(--brand-800)); }
.ho-paper.tmpl-creative .ho-studio, .ho-paper.tmpl-creative .ho-inv-no { color: #fff; }
.ho-paper.tmpl-creative .ho-tag { color: rgba(255,255,255,.82) !important; }
.ho-paper.tmpl-creative .ho-logo { background: rgba(255,255,255,.2); }
.ho-paper.tmpl-detailed .ho-items th, .ho-paper.tmpl-detailed .ho-items td { border: 1px solid #e7e3d8; padding-left: 8px; padding-right: 8px; }
.ho-paper.tmpl-quickpay .ho-items { font-size: .78rem; }
.ho-paper.tmpl-quickpay .ho-paybtn { font-size: 1.05rem; padding: 16px; }
.ho-paper.tmpl-minimal .ho-grand { border-top-color: var(--brand-600); }
.ho-paper.tmpl-retainer .ho-logo, .ho-paper.tmpl-deposit .ho-logo, .ho-paper.tmpl-milestone .ho-logo { border-radius: 50%; }

/* ============================================================
   Record-payment modal + receipt
   ============================================================ */
.pm-inv { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 14px; border-radius: var(--r-sm); background: var(--surface-2); margin-bottom: 14px; }
.pay-done { text-align: center; padding: 8px 4px 2px; }
.pd-check { width: 54px; height: 54px; margin: 0 auto 12px; border-radius: 50%; background: var(--pos-bg); color: var(--pos); display: flex; align-items: center; justify-content: center; }
.pd-title { font-family: var(--font-display); font-weight: 700; font-size: 1.3rem; color: var(--ink); }
.pd-sub { color: var(--muted); font-size: .9rem; margin-top: 4px; }
.pd-flow-h { display: flex; align-items: center; gap: 7px; justify-content: center; font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--faint); margin: 18px 0 10px; }
.pd-flow { display: flex; flex-direction: column; gap: 7px; text-align: left; }
.pd-step { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: var(--r-sm); background: var(--surface-2); font-size: .85rem; color: var(--ink-2); }
.pd-ic { color: var(--pos); flex: none; display: inline-flex; }

/* start-from-deal picker */
.pick-list { display: flex; flex-direction: column; gap: 7px; }
.pick-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 14px; border-radius: var(--r-sm); border: 1px solid var(--line); background: var(--surface); text-align: left; transition: border-color .12s ease, background .12s ease; }
.pick-row:hover { border-color: var(--brand-400); background: var(--brand-50); }
.pick-row b { color: var(--ink); }

.gap-6 { gap: 6px; }

@media (max-width: 1080px) {
  .inv-summary { grid-template-columns: repeat(3, 1fr); }
  .ib-right { display: none; }
  .ib-left { border-right: 0; }
}
@media (max-width: 720px) {
  .inv-summary { grid-template-columns: repeat(2, 1fr); }
  .proc-grid { grid-template-columns: repeat(2, 1fr); }
  .ai-grid, .send-grid, .tmpl-grid { grid-template-columns: 1fr; }
  .inv-builder { width: 100vw; height: 100vh; max-height: 100vh; border-radius: 0; top: 0; left: 0; transform: none; }
}

/* ============================================================
   Projects — clickable cards + meta row + footer affordance
   ============================================================ */
.proj.clickable { cursor: pointer; transition: transform .14s ease, box-shadow .14s ease, border-color .14s ease; }
.proj.clickable:hover { transform: translateY(-2px); box-shadow: var(--sh-2); border-color: var(--brand-200); }
.proj.clickable:focus-visible { outline: 2px solid var(--brand-500); outline-offset: 2px; }
.proj-id { min-width: 0; }
.proj-co { display: inline-flex; align-items: center; gap: 5px; margin-top: 3px; }
.proj-co svg { color: var(--faint); flex: none; }
.proj-head-right { display: inline-flex; align-items: center; gap: 12px; flex: none; }
.proj-open { display: inline-flex; align-items: center; gap: 5px; font-size: .82rem; font-weight: 600; color: var(--brand-700); opacity: 0; transform: translateX(-4px); transition: opacity .14s ease, transform .14s ease; }
.proj.clickable:hover .proj-open { opacity: 1; transform: none; }
.proj-meta-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; padding: 12px 18px; border-bottom: 1px solid var(--line-2); }
.pm-chip { display: inline-flex; align-items: center; gap: 6px; font-size: .78rem; font-weight: 600; color: var(--ink-2); background: var(--surface-2); border: 1px solid var(--line-2); border-radius: var(--pill); padding: 4px 11px; }
.pm-chip svg { color: var(--faint); flex: none; }
.pm-chip.prio-high { color: var(--neg); background: var(--neg-bg); border-color: color-mix(in srgb, var(--neg) 24%, var(--line)); }
.pm-chip.prio-high svg { color: var(--neg); }
.pm-chip.prio-medium { color: var(--gold-700); background: var(--gold-50); border-color: var(--gold-200); }
.pm-chip.prio-medium svg { color: var(--gold-700); }
.pm-chip.prio-low { color: var(--muted); background: var(--line-2); border-color: var(--line); }
.pm-team { display: inline-flex; margin-left: auto; padding-left: 4px; }
.pm-av { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; font-size: .64rem; font-weight: 700; color: var(--on-accent); background: linear-gradient(150deg, var(--brand-400), var(--brand-700)); border: 2px solid var(--surface); }
.pm-av + .pm-av { margin-left: -8px; }
.proj-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 18px; border-top: 1px solid var(--line-2); }
.pf-prog { font-size: .8rem; color: var(--muted); font-weight: 600; }
.pf-open { display: inline-flex; align-items: center; gap: 5px; font-size: .82rem; font-weight: 700; color: var(--brand-700); }
.pf-open svg { transition: transform .14s ease; }
.proj.clickable:hover .pf-open svg { transform: translateX(3px); }

/* ============================================================
   Project detail — breadcrumbs, hero, progress, grid, notes
   ============================================================ */
.crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; margin-bottom: 16px; font-size: .84rem; }
.crumbs a { color: var(--muted); font-weight: 600; cursor: pointer; }
.crumbs a:hover { color: var(--brand-700); }
.crumb-sep { display: inline-flex; color: var(--faint); }
.crumb-sep svg { width: 13px; height: 13px; }
.crumb-cur { color: var(--ink); font-weight: 700; }
.project-hero { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; padding: 22px 24px; margin-bottom: 14px; }
.ph-main { display: flex; gap: 16px; min-width: 0; }
.ph-ico { width: 52px; height: 52px; border-radius: var(--r); flex: none; display: grid; place-items: center; color: var(--brand-700); background: var(--brand-50); border: 1px solid var(--brand-200); }
.ph-id { min-width: 0; }
.ph-badges { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 9px; }
.ph-name { font-size: 1.6rem; line-height: 1.15; letter-spacing: -.02em; }
.ph-client { display: inline-flex; align-items: center; gap: 6px; margin-top: 6px; font-size: .9rem; font-weight: 600; color: var(--muted); cursor: pointer; }
.ph-client:hover { color: var(--brand-700); }
.ph-facts { display: flex; flex-wrap: wrap; gap: 8px 18px; margin-top: 14px; }
.ph-fact { display: inline-flex; align-items: center; gap: 6px; font-size: .84rem; color: var(--ink-2); font-weight: 600; }
.ph-fact svg { color: var(--faint); flex: none; }
.ph-fact.neg, .ph-fact.neg svg { color: var(--neg); }
.ph-team { gap: 4px; }
.ph-team .pm-av { width: 24px; height: 24px; }
.ph-actions { display: flex; flex-wrap: wrap; gap: 8px; flex: none; }
.project-prog { display: flex; align-items: center; gap: 14px; margin-bottom: 16px; padding: 0 2px; }
.pp-bar { flex: 1; height: 10px; border-radius: var(--pill); background: var(--line-2); overflow: hidden; }
.pp-bar i { display: block; height: 100%; border-radius: var(--pill); background: linear-gradient(90deg, var(--brand-500), var(--brand-700)); transition: width .3s ease; }
.pp-label { font-size: .82rem; font-weight: 600; color: var(--muted); flex: none; white-space: nowrap; }
.project-grid { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); gap: 16px; align-items: start; }
.project-main, .project-side { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.proj-desc { font-size: .95rem; line-height: 1.6; color: var(--ink-2); margin: 0; }
.note-list { display: flex; flex-direction: column; }
.note-row { display: flex; gap: 12px; padding: 13px 0; border-bottom: 1px solid var(--line-2); }
.note-row:first-child { padding-top: 0; }
.note-row:last-child { border-bottom: 0; padding-bottom: 0; }
.note-ico { width: 32px; height: 32px; border-radius: 9px; flex: none; display: grid; place-items: center; background: var(--surface-2); color: var(--ink-2); border: 1px solid var(--line-2); }
.note-ico svg { width: 15px; height: 15px; }
.note-client { background: var(--brand-50); color: var(--brand-700); border-color: var(--brand-200); }
.note-internal { background: var(--gold-50); color: var(--gold-700); border-color: var(--gold-200); }
.note-meeting { background: var(--pos-bg); color: var(--pos); border-color: color-mix(in srgb, var(--pos) 26%, var(--line)); }
.note-discovery, .note-strategy { background: color-mix(in srgb, var(--accent) 14%, var(--surface)); color: color-mix(in srgb, var(--ink) 50%, var(--accent)); border-color: color-mix(in srgb, var(--accent) 26%, var(--line)); }
.note-body { flex: 1; min-width: 0; }
.note-top { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.note-kind { font-size: .8rem; font-weight: 700; color: var(--ink); }
.note-by { font-size: .78rem; color: var(--muted); }
.note-ts { font-size: .72rem; color: var(--faint); margin-left: auto; }
.note-text { font-size: .86rem; line-height: 1.5; color: var(--ink-2); margin-top: 3px; }
.note-row .icon-btn { flex: none; align-self: flex-start; opacity: 0; transition: opacity .12s ease; }
.note-row:hover .icon-btn { opacity: 1; }
.proj-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; width: 100%; max-width: 100%; overflow: hidden; }
.paction { width: 100%; min-width: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; padding: 14px 10px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); font-size: .78rem; font-weight: 600; color: var(--ink-2); text-align: center; white-space: normal; cursor: pointer; transition: border-color .12s ease, background .12s ease, transform .1s ease; }
.paction:hover { border-color: var(--brand-200); background: var(--brand-50); color: var(--brand-700); transform: translateY(-1px); }
.pa-ico { display: grid; place-items: center; color: var(--faint); flex: none; }
.paction:hover .pa-ico { color: var(--brand-600); }
.paction.danger { border-color: color-mix(in srgb, var(--neg) 20%, var(--line)); color: var(--neg); background: var(--neg-bg); }
.paction.danger .pa-ico { color: var(--neg); opacity: .7; }
.paction.danger:hover { border-color: var(--neg); background: color-mix(in srgb, var(--neg) 12%, var(--surface)); transform: translateY(-1px); }
.paction.danger:hover .pa-ico { opacity: 1; }
.fin-due { display: inline-flex; align-items: center; gap: 7px; font-size: .8rem; font-weight: 600; color: var(--gold-700); background: var(--gold-50); border: 1px solid var(--gold-200); border-radius: var(--r-sm); padding: 8px 12px; }

/* ============================================================
   Brand Kit — type system, font cards, enforcement, agents, kits
   ============================================================ */
.badge.sm { font-size: .66rem; padding: 2px 8px; }
.type-system { display: flex; flex-direction: column; }
.type-row { display: grid; grid-template-columns: minmax(0, 1fr) 220px; grid-template-areas: "info control" "prev prev"; gap: 10px 18px; padding: 16px 0; border-bottom: 1px solid var(--line-2); align-items: center; }
.type-row:first-child { padding-top: 0; }
.type-row:last-child { border-bottom: 0; padding-bottom: 0; }
.tr-info { grid-area: info; }
.tr-label { font-size: .9rem; font-weight: 700; color: var(--ink); }
.tr-desc { font-size: .8rem; margin-top: 2px; }
.tr-control { grid-area: control; }
.tr-prev { grid-area: prev; padding: 14px 16px; border: 1px solid var(--line); border-radius: var(--r); background: var(--surface-2); font-size: 1.15rem; line-height: 1.3; color: var(--ink); overflow-wrap: anywhere; }
.tr-prev.big { font-size: 1.9rem; letter-spacing: -.01em; }
.font-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 14px; }
.font-card { display: flex; flex-direction: column; gap: 10px; padding: 16px; border: 1px solid var(--line); border-radius: var(--r); background: var(--surface); }
.fc-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.fc-name { font-size: .95rem; font-weight: 700; color: var(--ink); }
.fc-sub { font-size: .76rem; margin-top: 2px; }
.fc-prev { padding: 10px 12px; border: 1px solid var(--line-2); border-radius: var(--r-sm); background: var(--surface-2); color: var(--ink); line-height: 1.3; overflow-wrap: anywhere; font-size: .92rem; }
.fc-prev.big { font-size: 1.5rem; letter-spacing: -.01em; }
.fc-role { display: flex; flex-direction: column; gap: 5px; }
.fc-role .sub-label { margin-bottom: 0; }
.fc-lic { display: inline-flex; align-items: center; gap: 6px; font-size: .74rem; }
.fc-lic svg { color: var(--pos); flex: none; }
.fc-acts { display: flex; align-items: center; gap: 8px; margin-top: 2px; }
.fc-acts .icon-btn { margin-left: auto; }
.font-note { display: flex; align-items: center; gap: 8px; margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--line-2); font-size: .8rem; }
.font-note svg { color: var(--pos); flex: none; }
.lock-list { display: flex; flex-direction: column; }
.lock-row { padding: 11px 0; border-bottom: 1px solid var(--line-2); }
.lock-row:last-child { border-bottom: 0; padding-bottom: 0; }
.lock-info { min-width: 0; padding-right: 12px; }
.enf-email { padding: 13px 14px; border: 1px dashed var(--line); border-radius: var(--r-sm); background: var(--surface-2); }
.enf-email .label { display: inline-flex; align-items: center; gap: 6px; }
.enf-email .label svg { color: var(--brand-600); }
.agent-rules { display: flex; flex-direction: column; }
.agent-rule { display: flex; align-items: flex-start; gap: 12px; padding: 11px 0; border-bottom: 1px solid var(--line-2); }
.agent-rule:first-child { padding-top: 0; }
.agent-rule:last-child { border-bottom: 0; padding-bottom: 0; }
.ar-ico { width: 32px; height: 32px; border-radius: 9px; flex: none; display: grid; place-items: center; color: var(--brand-700); background: var(--brand-50); border: 1px solid var(--brand-200); }
.ar-body { min-width: 0; }
.ar-name { font-size: .86rem; font-weight: 700; color: var(--ink); }
.ar-uses { font-size: .78rem; margin-top: 1px; }
.kit-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 14px; }
.kit-card { display: flex; flex-direction: column; gap: 9px; padding: 16px; border: 1px solid var(--line); border-radius: var(--r); background: var(--surface); }
.kit-card.primary { border-color: var(--brand-200); background: var(--brand-50); }
.kit-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.kit-name { font-size: .92rem; font-weight: 700; color: var(--ink); }
.kit-fonts { font-size: .8rem; }
.kit-swatches { display: flex; gap: 5px; }
.kit-swatches span { width: 22px; height: 22px; border-radius: 6px; border: 1px solid rgba(0, 0, 0, .08); flex: none; }
.kit-foot { font-size: .77rem; line-height: 1.45; margin-top: 2px; }

@media (max-width: 1080px) { .project-grid { grid-template-columns: 1fr; } }
@media (max-width: 760px) {
  .project-hero { flex-direction: column; }
  .ph-actions { width: 100%; }
  .ph-name { font-size: 1.35rem; }
  .type-row { grid-template-columns: 1fr; grid-template-areas: "info" "control" "prev"; }
  .proj-actions { grid-template-columns: 1fr; }
}

/* ============================================================
   CRM UPGRADE — Relationship intelligence (health + next action)
   ============================================================ */
.intel-panel .panel-head .health-pill { font-size: .72rem; }
.hd { width: 7px; height: 7px; border-radius: 50%; flex: none; background: currentColor; }
.hd-good { background: var(--pos); }
.hd-warm { background: var(--warn); }
.hd-cold { background: currentColor; }
.health-pill.sm { font-size: .68rem; padding: 2px 9px; }

.health-meter { display: flex; flex-direction: column; gap: 7px; }
.hm-top { display: flex; align-items: baseline; justify-content: space-between; }
.hm-top .muted { font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--faint); }
.hm-top b { font-family: var(--font-display); font-weight: 700; font-size: 1.3rem; color: var(--ink); font-variant-numeric: tabular-nums; }
.hm-max { font-size: .8rem; font-weight: 600; color: var(--faint); margin-left: 1px; }
.hm-bar { height: 8px; border-radius: var(--pill); background: var(--line-2); overflow: hidden; }
.hm-bar i { display: block; height: 100%; border-radius: var(--pill); background: var(--pos); transition: width .3s ease; }
.hm-good { background: var(--pos); }
.hm-warm { background: var(--warn); }
.hm-cold { background: var(--neg); }

.intel-flag { display: inline-flex; align-items: center; gap: 7px; padding: 7px 11px; border-radius: var(--r-sm); background: var(--gold-50); color: var(--gold-700); border: 1px solid var(--gold-200); font-size: .8rem; font-weight: 600; }
.intel-flag svg { flex: none; }
.intel-reasons { display: flex; flex-direction: column; }
.intel-reasons li { position: relative; padding: 4px 0 4px 16px; font-size: .83rem; color: var(--ink-2); line-height: 1.45; }
.intel-reasons li::before { content: "\203A"; position: absolute; left: 2px; color: var(--accent); font-weight: 700; }

.next-action { display: flex; align-items: center; gap: 12px; padding: 13px; border-radius: var(--r); border: 1px solid color-mix(in srgb, var(--accent) 30%, var(--line)); background: color-mix(in srgb, var(--accent) 6%, var(--surface)); }
.na-ico { width: 34px; height: 34px; border-radius: 9px; flex: none; display: grid; place-items: center; background: color-mix(in srgb, var(--accent) 18%, var(--surface)); color: color-mix(in srgb, var(--ink) 55%, var(--accent)); }
.na-body { display: flex; flex-direction: column; gap: 1px; min-width: 0; flex: 1; }
.na-k { font-size: .64rem; font-weight: 700; text-transform: uppercase; letter-spacing: .07em; color: var(--ink-faint); }
.na-l { font-size: .9rem; font-weight: 700; color: var(--ink); line-height: 1.25; }
.na-s { font-size: .78rem; color: var(--muted); }
.na-do { flex: none; }

/* ============================================================
   CRM UPGRADE — Client portal card (relationship command center)
   ============================================================ */
.portal-panel.is-off .portal-link-row,
.portal-panel.is-off .portal-meta,
.portal-panel.is-off .portal-users,
.portal-panel.is-off .portal-activity { opacity: .55; }

.portal-link-row { display: flex; align-items: center; gap: 9px; padding: 9px 11px; border-radius: var(--r-sm); background: var(--surface-2); border: 1px solid var(--line); }
.portal-link-row.plain { background: var(--brand-50); border-color: var(--brand-200); }
.pl-ico { display: inline-flex; color: var(--muted); flex: none; }
.portal-link { flex: 1; min-width: 0; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .8rem; color: var(--brand-700); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.portal-link-row .icon-btn { flex: none; }

.portal-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.portal-actions .btn svg { flex: none; }

.portal-meta { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px; background: var(--line-2); border: 1px solid var(--line-2); border-radius: var(--r-sm); overflow: hidden; }
.portal-meta > div { display: flex; flex-direction: column; gap: 3px; padding: 10px 12px; background: var(--surface); }
.pm-k { display: inline-flex; align-items: center; gap: 5px; font-size: .66rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--faint); }
.pm-k svg { flex: none; }
.portal-meta > div b { font-size: .86rem; color: var(--ink); font-weight: 600; }

.portal-users { display: flex; flex-direction: column; gap: 7px; }
.portal-user { display: flex; align-items: center; gap: 11px; width: 100%; text-align: left; padding: 9px 11px; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--surface); transition: border-color .12s ease, background .12s ease; }
.portal-user:hover { border-color: var(--brand-200); background: var(--surface-2); }
.pu-av { width: 32px; height: 32px; border-radius: 50%; flex: none; display: grid; place-items: center; font-size: .72rem; font-weight: 700; color: var(--on-accent-2); background: linear-gradient(150deg, var(--gold-200), var(--gold-700)); }
.pu-body { display: flex; flex-direction: column; gap: 1px; min-width: 0; flex: 1; }
.pu-body b { font-size: .86rem; font-weight: 600; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pu-body span { font-size: .76rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pu-right { display: inline-flex; align-items: center; gap: 8px; flex: none; }
.pu-role { text-transform: capitalize; }
.pu-perms { display: inline-flex; align-items: center; gap: 3px; font-size: .72rem; font-weight: 700; color: var(--muted); font-variant-numeric: tabular-nums; }
.pu-perms svg { color: var(--faint); }
.portal-users.lg .portal-user { padding: 11px 13px; }
.portal-users.lg .pu-av { width: 36px; height: 36px; }

.portal-activity .sub-label { margin-bottom: 8px; }
.pa-row { display: flex; align-items: center; gap: 9px; padding: 6px 0; }
.portal-activity .pa-ico { width: 24px; height: 24px; border-radius: 7px; flex: none; display: grid; place-items: center; background: var(--surface-2); color: var(--muted); border: 1px solid var(--line-2); }
.pa-text { flex: 1; min-width: 0; font-size: .82rem; color: var(--ink-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pa-ts { flex: none; font-size: .72rem; color: var(--faint); }

/* portal status cell + timeline event */
.portal-cell { display: inline-grid; place-items: center; width: 30px; height: 26px; border-radius: var(--r-xs); color: var(--faint); background: var(--surface-2); border: 1px solid var(--line-2); }
.portal-cell.on { color: color-mix(in srgb, var(--ink) 55%, var(--accent)); background: color-mix(in srgb, var(--accent) 16%, var(--surface)); border-color: color-mix(in srgb, var(--accent) 30%, var(--line)); }
.tl-portal { background: color-mix(in srgb, #6366F1 13%, var(--surface)); color: #6366F1; border-color: color-mix(in srgb, #6366F1 26%, var(--line)); }

/* ============================================================
   CRM UPGRADE — File visibility controls
   ============================================================ */
.file-vis-dot { width: 26px; height: 26px; border-radius: 7px; flex: none; display: grid; place-items: center; background: var(--surface-2); color: var(--ink-faint); border: 1px solid var(--line-2); }
.file-vis-dot.vis-client { background: var(--pos-bg); color: var(--pos); border-color: color-mix(in srgb, var(--pos) 26%, var(--line)); }
.file-vis-dot.vis-approval { background: var(--gold-50); color: var(--gold-700); border-color: var(--gold-200); }
.file-vis-dot.vis-final { background: var(--brand-50); color: var(--brand-700); border-color: var(--brand-200); }
select.file-vis { width: auto; flex: none; max-width: 162px; font-size: .8rem; padding: 6px 26px 6px 10px; }

/* ============================================================
   CRM UPGRADE — Small switch + config / permission grids
   ============================================================ */
.switch.sm { width: 36px; height: 20px; }
.switch.sm::after { width: 14px; height: 14px; top: 3px; left: 3px; }
.switch.sm.on::after { transform: translateX(16px); }

.vis-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px 14px; }
.vis-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 9px 11px; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--surface); cursor: pointer; }
.vis-l { display: inline-flex; align-items: center; gap: 8px; min-width: 0; font-size: .85rem; font-weight: 600; color: var(--ink-2); }
.vis-l svg { color: var(--muted); flex: none; }
.perm-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 7px 14px; }
.perm-row { display: flex; align-items: center; gap: 10px; padding: 5px 0; font-size: .85rem; color: var(--ink-2); cursor: pointer; }
.perm-row span:last-child { min-width: 0; }

/* ============================================================
   CRM UPGRADE — "Preview as client" portal mockup
   ============================================================ */
.portal-preview { border-radius: var(--r); overflow: hidden; border: 1px solid var(--pv-border, var(--line)); box-shadow: var(--sh-2); background: var(--pv-bg, var(--surface)); color: var(--pv-text, var(--ink)); }
.pv-banner { height: 88px; background-size: cover; background-position: center; background-color: color-mix(in srgb, var(--pv-accent) 30%, var(--pv-surface, var(--surface))); }
.pv-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 13px 18px; background: var(--pv-accent); color: var(--pv-accent-text, #fff); }
.pv-brand { display: inline-flex; align-items: center; gap: 10px; min-width: 0; }
.pv-brand b { font-family: var(--font-display); font-weight: 700; font-size: 1rem; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pv-brand img { width: 30px; height: 30px; border-radius: 8px; object-fit: cover; background: rgba(255,255,255,.18); flex: none; }
.pv-mono { width: 30px; height: 30px; border-radius: 8px; flex: none; display: grid; place-items: center; font-weight: 800; font-size: .8rem; color: #fff; background: rgba(255,255,255,.2); }
.pv-tag { flex: none; font-size: .66rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: #fff; background: rgba(255,255,255,.18); padding: 3px 10px; border-radius: var(--pill); }
.pv-hero { padding: 22px 20px; background: color-mix(in srgb, var(--pv-accent) 10%, var(--pv-surface, var(--surface))); border-bottom: 1px solid var(--pv-border, var(--line-2)); }
.pv-hero h3 { font-family: var(--font-serif); font-style: italic; font-weight: 500; font-size: 1.25rem; line-height: 1.3; letter-spacing: -.01em; color: var(--pv-text, var(--ink)); }
.pv-hero-meta { font-size: .8rem; color: var(--pv-muted, var(--muted)); margin-top: 7px; }
.pv-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; padding: 18px 20px; background: var(--pv-bg, var(--surface)); }
.pv-card { display: flex; gap: 11px; align-items: flex-start; padding: 14px; border: 1px solid var(--pv-border, var(--line)); border-radius: var(--r-sm); background: var(--pv-surface, var(--surface)); }
.pv-ico { width: 34px; height: 34px; border-radius: 9px; flex: none; display: grid; place-items: center; background: color-mix(in srgb, var(--pv-accent) 14%, var(--pv-surface, var(--surface))); color: var(--pv-accent); }
.pv-c-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.pv-c-t { font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--pv-muted, var(--ink-faint)); }
.pv-c-big { font-family: var(--font-display); font-weight: 700; font-size: 1.3rem; line-height: 1.1; letter-spacing: -.01em; color: var(--pv-text, var(--ink)); }
.pv-c-s { font-size: .77rem; color: var(--pv-muted, var(--muted)); }
.pv-note { display: flex; align-items: center; gap: 8px; padding: 12px 20px; background: var(--surface-2); border-top: 1px solid var(--line-2); font-size: .78rem; color: var(--muted); }
.pv-note svg { flex: none; color: var(--pv-accent); }
.pv-note code { font-family: ui-monospace, Menlo, monospace; font-size: .75rem; color: var(--ink-2); }

/* ============================================================
   CRM UPGRADE — Custom fields manager
   ============================================================ */
.cf-list { display: flex; flex-direction: column; gap: 8px; }
.cf-def { display: flex; align-items: center; gap: 11px; padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--surface); }
.cf-ico { width: 30px; height: 30px; border-radius: 8px; flex: none; display: grid; place-items: center; background: var(--brand-50); color: var(--brand-600); border: 1px solid var(--brand-200); }
.cf-meta { display: flex; flex-direction: column; gap: 1px; min-width: 0; flex: 1; }
.cf-meta b { font-size: .87rem; font-weight: 600; color: var(--ink); }
.cf-meta span { font-size: .76rem; }
.cf-def .icon-btn { flex: none; }
.prop-input { width: auto; max-width: 58%; min-width: 120px; flex: none; font-size: .85rem; padding: 7px 10px; text-align: right; }
.prop-input[type=date] { text-align: left; }

/* ============================================================
   CRM UPGRADE — Saved views + segment bar (clients list)
   ============================================================ */
.views-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 14px; }
.views-bar-label { display: inline-flex; align-items: center; gap: 5px; font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--ink-faint); padding-right: 4px; flex: none; }
.views-bar-label svg { flex: none; }
.views-manage-btn { margin-left: auto; font-size: .78rem; }
.view-chip { display: inline-flex; align-items: center; gap: 6px; padding: 6px 8px 6px 12px; border: 1px solid var(--line); border-radius: var(--pill); background: var(--surface); color: var(--ink-2); font-size: .82rem; font-weight: 600; transition: border-color .14s ease, background .14s ease, color .14s ease; }
.view-chip .vc-ico { flex: none; display: inline-grid; place-items: center; }
.view-chip .vc-ico svg { color: var(--muted); }
.view-chip:hover { border-color: var(--brand-200); background: var(--brand-50); }
.view-chip.on { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.view-chip.on .vc-ico svg { color: var(--on-accent); }
.view-chip.vc-custom { border-style: dashed; }
.vc-x { display: inline-grid; place-items: center; width: 17px; height: 17px; border-radius: 50%; color: var(--faint); transition: background .12s ease, color .12s ease; opacity: 0; }
.view-chip:hover .vc-x { opacity: 1; }
.vc-x:hover { background: var(--neg-bg); color: var(--neg); }
.vc-hide:hover { background: color-mix(in srgb, var(--gold-500) 15%, transparent); color: var(--gold-700); }
.view-chip.on .vc-x { color: color-mix(in srgb, var(--on-accent) 70%, transparent); opacity: 0; }
.view-chip.on:hover .vc-x { opacity: 1; }
.view-chip.on .vc-x:hover { background: color-mix(in srgb, var(--on-accent) 22%, transparent); color: var(--on-accent); }
.view-chip.add { padding: 6px 12px; color: var(--muted); border-style: dashed; }
.view-chip.add:hover { color: var(--brand-700); border-color: var(--brand-400); }
/* Active view tag in filter bar */
.seg-view-tag { display: inline-flex; align-items: center; gap: 5px; padding: 4px 10px; border-radius: var(--pill); background: color-mix(in srgb, var(--accent) 12%, transparent); border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent); color: var(--accent); font-size: .78rem; font-weight: 700; flex: none; }
.seg-view-tag svg { flex: none; }
/* Manage Views modal */
.mv-section { margin-bottom: 20px; }
.mv-section:last-child { margin-bottom: 0; }
.mv-section-head { font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--ink-faint); padding-bottom: 8px; border-bottom: 1px solid var(--line); margin-bottom: 6px; }
.mv-list { display: flex; flex-direction: column; gap: 2px; }
.mv-item { display: flex; align-items: center; gap: 10px; padding: 8px 6px; border-radius: var(--r); transition: background .1s; }
.mv-item:hover { background: var(--surface-2); }
.mv-item-name { flex: 1; font-size: .88rem; font-weight: 500; color: var(--ink-2); }
.mv-badge { font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; padding: 2px 7px; border-radius: var(--pill); flex: none; }
.mv-badge-def { background: var(--surface-2); color: var(--muted); border: 1px solid var(--line); }
.mv-badge-scope { background: color-mix(in srgb, var(--accent) 12%, transparent); color: var(--accent); border: 1px solid color-mix(in srgb, var(--accent) 25%, transparent); }
.mv-del-btn { color: var(--muted); }
.mv-del-btn:hover { color: var(--neg); }
.mv-empty { font-size: .85rem; color: var(--muted); padding: 12px 6px; }
/* Save view modal extras */
.sv-radio-group { display: flex; gap: 16px; margin-top: 4px; }
.sv-radio-opt { display: flex; align-items: center; gap: 6px; font-size: .88rem; color: var(--ink-2); cursor: pointer; }
.sv-chk-label { display: flex; align-items: center; gap: 8px; font-size: .88rem; color: var(--ink-2); cursor: pointer; }

.seg-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 16px; padding: 11px 13px; border: 1px solid var(--line); border-radius: var(--r); background: var(--surface-2); }
.seg-l { display: inline-flex; align-items: center; gap: 6px; font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--ink-faint); }
.seg-l svg { flex: none; }
.seg-bar .select { width: auto; flex: 0 0 auto; min-width: 132px; font-size: .82rem; padding: 7px 28px 7px 11px; background: var(--surface); }
.seg-chip { display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; border: 1px solid var(--line); border-radius: var(--pill); background: var(--surface); color: var(--muted); font-size: .8rem; font-weight: 600; transition: border-color .14s ease, color .14s ease, background .14s ease; }
.seg-chip svg { flex: none; }
.seg-chip:hover { border-color: var(--brand-200); color: var(--ink-2); }
.seg-chip.on { background: var(--brand-600); border-color: var(--brand-600); color: var(--on-accent); }
.seg-clear { display: inline-flex; align-items: center; gap: 5px; padding: 7px 10px; border-radius: var(--pill); font-size: .8rem; font-weight: 600; color: var(--muted); }
.seg-clear:hover { color: var(--neg); background: var(--neg-bg); }
.seg-count { margin-left: auto; font-size: .78rem; font-weight: 600; color: var(--muted); font-variant-numeric: tabular-nums; }

/* ============================================================
   CRM UPGRADE — Duplicate detection banner + merge
   ============================================================ */
.dupe-banner { display: flex; align-items: center; gap: 13px; padding: 13px 16px; margin-bottom: 16px; border: 1px solid var(--gold-200); border-radius: var(--r); background: var(--gold-50); }
.db-ico { width: 38px; height: 38px; border-radius: 10px; flex: none; display: grid; place-items: center; background: var(--surface); color: var(--gold-700); border: 1px solid var(--gold-200); }
.db-body { display: flex; flex-direction: column; gap: 1px; min-width: 0; flex: 1; }
.db-body b { font-size: .9rem; font-weight: 700; color: var(--ink); }
.db-body span { font-size: .8rem; color: var(--gold-700); }
.dupe-banner .btn { flex: none; }

.dupe-groups { display: flex; flex-direction: column; gap: 14px; }
.dupe-group { border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; }
.dg-head { display: flex; align-items: center; gap: 7px; padding: 10px 14px; background: var(--surface-2); border-bottom: 1px solid var(--line-2); font-size: .78rem; font-weight: 700; color: var(--ink-2); }
.dg-head svg { color: var(--muted); flex: none; }
.dg-member { display: flex; align-items: center; gap: 11px; padding: 11px 14px; border-bottom: 1px solid var(--line-2); cursor: pointer; transition: background .12s ease; }
.dg-member:hover { background: var(--surface-2); }
.dg-member input[type=radio] { width: 17px; height: 17px; flex: none; accent-color: var(--accent); cursor: pointer; }
.dg-av { flex: none; }
.dg-meta { display: flex; flex-direction: column; gap: 1px; min-width: 0; flex: 1; }
.dg-meta b { font-size: .88rem; font-weight: 600; color: var(--ink); }
.dg-meta span { font-size: .77rem; }
.dg-foot { padding: 11px 14px; background: var(--surface); }

/* shared modal intro line */
.modal-intro { font-size: .88rem; color: var(--muted); line-height: 1.5; margin-bottom: 16px; }

/* ---- New Proof: reviewer "Send to" + permissions ---- */
.np-recips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 6px; }
.np-recip { display: flex; align-items: center; gap: 8px; padding: 7px 11px 7px 9px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); cursor: pointer; transition: border-color .12s, background .12s; }
.np-recip:hover { border-color: var(--brand-300, var(--brand-500)); }
.np-recip:has(input:checked) { border-color: var(--brand-500); background: var(--brand-50); }
.np-recip input { accent-color: var(--brand-600); flex: none; }
.np-recip > span { display: flex; flex-direction: column; line-height: 1.25; gap: 1px; }
.np-recip > span small { font-size: .72rem; color: var(--muted); font-weight: 500; }
.np-perms { display: flex; flex-wrap: wrap; gap: 8px; }
.np-perm { display: inline-flex; align-items: center; gap: 6px; padding: 7px 11px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); cursor: pointer; font-size: .82rem; transition: border-color .12s, background .12s; }
.np-perm:has(input:checked) { border-color: var(--brand-500); background: var(--brand-50); }
.np-perm input { accent-color: var(--brand-600); }

/* ---- New Proof: adaptive source section ---- */
.np-source { margin: 4px 0 14px; }
.np-src-tabs { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.np-src-tab { display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); color: var(--ink-2, var(--muted)); font-size: .8rem; font-weight: 600; cursor: pointer; transition: all .12s; }
.np-src-tab:hover { border-color: var(--brand-500); color: var(--ink); }
.np-src-tab.on { background: var(--brand-600); border-color: var(--brand-600); color: #fff; }
.np-src-panel { display: none; }
.np-src-panel.on { display: block; }
.np-drop { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; text-align: center; padding: 26px 18px; border: 1.5px dashed var(--line-2, var(--line)); border-radius: 14px; background: var(--surface-2, var(--surface)); cursor: pointer; transition: border-color .14s, background .14s; }
.np-drop:hover { border-color: var(--brand-500); background: var(--brand-50); }
.np-drop.drag { border-color: var(--brand-600); background: var(--brand-50); border-style: solid; }
.np-drop-ic { color: var(--brand-600); display: inline-flex; }
.np-drop-main { font-size: .9rem; font-weight: 700; color: var(--ink); }
.np-drop-main b { color: var(--brand-600); }
.np-drop-sub { font-size: .76rem; color: var(--muted); }
.np-src-hint { font-size: .76rem; color: var(--muted); margin-top: 7px; }
.np-files { display: flex; flex-direction: column; gap: 7px; margin-top: 11px; }
.np-files.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(86px, 1fr)); gap: 8px; }
.np-file { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); }
.np-file-thumb { width: 38px; height: 38px; border-radius: 8px; flex: none; background: var(--brand-50) center/cover no-repeat; display: grid; place-items: center; color: var(--brand-600); overflow: hidden; }
.np-file-meta { display: flex; flex-direction: column; min-width: 0; flex: 1; gap: 1px; }
.np-file-name { font-size: .82rem; font-weight: 600; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.np-file-sub { font-size: .71rem; color: var(--muted); }
.np-file-x { flex: none; background: none; border: none; color: var(--muted); cursor: pointer; padding: 4px; border-radius: 6px; display: inline-flex; }
.np-file-x:hover { background: var(--neg-bg, var(--brand-50)); color: var(--neg); }
.np-files.grid .np-file { flex-direction: column; gap: 5px; padding: 6px; text-align: center; position: relative; }
.np-files.grid .np-file-thumb { width: 100%; height: 56px; }
.np-files.grid .np-file-meta { align-items: center; width: 100%; }
.np-files.grid .np-file-name { max-width: 100%; font-size: .72rem; }
.np-files.grid .np-file-x { position: absolute; top: 3px; right: 3px; background: rgba(0,0,0,.45); color: #fff; }
.np-count { display: inline-flex; align-items: center; gap: 6px; font-size: .78rem; font-weight: 700; color: var(--brand-600); margin-top: 10px; }
.np-count.zero { color: var(--muted); }
.np-providers { display: flex; flex-wrap: wrap; gap: 8px; }
.np-prov { display: inline-flex; align-items: center; gap: 7px; padding: 10px 13px; border: 1px solid var(--line); border-radius: 11px; background: var(--surface); cursor: pointer; font-size: .82rem; font-weight: 600; color: var(--ink); transition: all .12s; }
.np-prov:hover { border-color: var(--brand-500); background: var(--brand-50); }
.np-prov .np-prov-dot { width: 9px; height: 9px; border-radius: 50%; }
.np-pfiles { display: flex; flex-direction: column; gap: 6px; max-height: 168px; overflow-y: auto; }
.np-pfile { display: flex; align-items: center; gap: 9px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 9px; background: var(--surface); cursor: pointer; text-align: left; transition: all .12s; }
.np-pfile:hover { border-color: var(--brand-500); background: var(--brand-50); }
.np-pfile.added { border-color: var(--pos); background: var(--pos-bg, var(--brand-50)); }
.np-pfile-ic { color: var(--brand-600); flex: none; display: inline-flex; }
.np-pfile-b { flex: 1; min-width: 0; }
.np-pfile-b b { display: block; font-size: .82rem; font-weight: 600; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.np-pfile-b small { font-size: .71rem; color: var(--muted); }
.np-pfile-empty { font-size: .8rem; color: var(--muted); padding: 10px 2px; }
.np-sample { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px; }
.np-sample .field { margin: 0; }
.np-src-req { display: inline-flex; align-items: center; gap: 6px; font-size: .76rem; color: var(--gold, var(--warn)); margin: 9px 0 4px; }
.np-recip > span b { font-weight: 600; font-size: .83rem; color: var(--ink); }
/* gated primary action (e.g. Create & send before a source is attached) */
.btn:disabled, .btn.is-disabled { opacity: .45; cursor: not-allowed; box-shadow: none; filter: grayscale(.25); pointer-events: none; }

@media (max-width: 560px) {
  .portal-meta { grid-template-columns: 1fr; }
  .vis-grid, .perm-grid, .pv-grid { grid-template-columns: 1fr; }
  .seg-bar .select { flex: 1 1 auto; min-width: 0; }
  .seg-count { width: 100%; margin-left: 0; }
}

/* ============================================================
   TASK CARD indicators + TASK DETAIL DRAWER
   ============================================================ */
.tc-top { display: flex; align-items: flex-start; gap: 7px; }
.tc-prio { width: 7px; height: 7px; border-radius: 50%; margin-top: 5px; flex: none; background: var(--muted); }
.tc-prio.prio-urgent { background: var(--neg); }
.tc-prio.prio-high { background: color-mix(in srgb, var(--neg) 68%, var(--gold)); }
.tc-prio.prio-medium { background: var(--gold); }
.tc-prio.prio-low { background: var(--pos); }
.tc-indicators { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 8px; padding-top: 8px; border-top: 1px dashed var(--line-2); font-size: .7rem; color: var(--muted); }
.tc-ind { display: inline-flex; align-items: center; gap: 3px; }
.tc-timer { font-weight: 600; }
.tc-timer.live { color: var(--pos); }
.tc-timer.live svg { color: var(--pos); animation: tdpulse 1.6s ease-in-out infinite; }
.tc-proof { color: var(--brand-600); }
@keyframes tdpulse { 0%, 100% { opacity: 1; } 50% { opacity: .32; } }

/* drawer shell — slides in from the right over the project */
.task-drawer {
  position: absolute; top: 0; right: 0; height: 100%;
  width: min(560px, 100vw); display: flex; flex-direction: column;
  background: var(--surface); box-shadow: var(--sh-3);
  animation: tdSlide .24s cubic-bezier(.2,.7,.3,1);
}
@keyframes tdSlide { from { transform: translateX(34px); opacity: .3; } to { transform: translateX(0); opacity: 1; } }
.td-head { padding: 16px 18px 13px; border-bottom: 1px solid var(--line-2); flex: none; }
.td-head-top { display: flex; align-items: center; gap: 8px; margin-bottom: 11px; }
.td-status-pill { display: inline-flex; align-items: center; gap: 5px; padding: 3px 10px; border-radius: var(--pill); font-size: .73rem; font-weight: 700; background: var(--surface-2); color: var(--muted); border: 1px solid var(--line-2); }
.td-status-pill.st-doing { background: var(--gold-50); color: var(--gold-700); border-color: var(--gold-200); }
.td-status-pill.st-done { background: var(--pos-bg); color: var(--pos); border-color: color-mix(in srgb, var(--pos) 28%, var(--line)); }
.td-prio { display: inline-flex; align-items: center; gap: 4px; font-size: .72rem; font-weight: 600; color: var(--muted); }
.td-prio.prio-urgent, .td-prio.prio-high { color: var(--neg); }
.td-prio.prio-medium { color: var(--gold-700); }
.td-title-input { width: calc(100% + 12px); border: 1px solid transparent; background: transparent; font-family: var(--font-display); font-weight: 700; font-size: 1.18rem; color: var(--ink); padding: 4px 6px; border-radius: 8px; margin: 0 -6px; }
.td-title-input:hover { background: var(--surface-2); }
.td-title-input:focus { background: var(--surface-2); border-color: var(--brand-200); outline: none; }
.td-crumb { display: flex; align-items: center; gap: 5px; flex-wrap: wrap; margin-top: 7px; font-size: .8rem; color: var(--muted); }
.td-crumb a { display: inline-flex; align-items: center; gap: 4px; color: var(--brand-700); font-weight: 600; cursor: pointer; }
.td-crumb a:hover { text-decoration: underline; }

.td-body { flex: 1; overflow-y: auto; padding: 16px 18px 20px; display: flex; flex-direction: column; gap: 18px; }

.td-seg { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; background: var(--surface-2); padding: 4px; border-radius: 10px; }
.td-seg-b { padding: 8px 6px; border-radius: 7px; font-size: .82rem; font-weight: 600; color: var(--muted); transition: background .12s ease, color .12s ease, box-shadow .12s ease; }
.td-seg-b:hover { color: var(--ink); }
.td-seg-b.on { background: var(--surface); color: var(--brand-700); box-shadow: var(--sh-1); }

.td-props { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 12px; }
.td-prop { display: flex; flex-direction: column; gap: 5px; }
.td-prop-l { display: inline-flex; align-items: center; gap: 5px; font-size: .73rem; font-weight: 600; color: var(--muted); }
.td-prop .select, .td-prop .input { padding: 7px 9px; font-size: .85rem; }
.td-overdue { display: inline-flex; align-items: center; gap: 6px; align-self: flex-start; padding: 5px 10px; border-radius: var(--pill); background: var(--neg-bg); color: var(--neg); font-size: .76rem; font-weight: 600; margin-top: -8px; }

.td-proof { display: flex; flex-direction: column; gap: 9px; padding: 12px 14px; border-radius: var(--r-sm); background: var(--brand-50); border: 1px solid var(--brand-200); }
.td-proof-h { display: flex; align-items: center; gap: 6px; font-size: .8rem; color: var(--brand-700); }
.td-proof-q { display: flex; gap: 7px; font-size: .85rem; color: var(--ink-2); line-height: 1.45; }
.td-proof-q svg { flex: none; margin-top: 2px; color: var(--brand-500); }
.td-proof .btn { align-self: flex-start; }

.td-sec { display: flex; flex-direction: column; gap: 10px; }
.td-sec-h { display: flex; align-items: center; gap: 7px; font-size: .82rem; font-weight: 700; color: var(--ink); }
.td-sec-h svg { color: var(--muted); }
.td-sec-h .count-pill { margin-left: 1px; }
.td-desc { min-height: 68px; font-size: .88rem; }
.td-empty { font-size: .82rem; color: var(--faint); padding: 2px 0; }

.td-add-row { display: flex; gap: 8px; }
.td-add-row .input { flex: 1; padding: 8px 10px; font-size: .85rem; }
.td-add-row .td-mins { flex: none; width: 76px; }

.td-checks { display: flex; flex-direction: column; gap: 4px; }
.td-check { display: flex; align-items: center; gap: 9px; padding: 7px 9px; border-radius: 8px; background: var(--surface-2); }
.td-check-box { width: 19px; height: 19px; border-radius: 6px; border: 1.6px solid var(--line); display: grid; place-items: center; color: #fff; flex: none; transition: background .12s ease, border-color .12s ease; }
.td-check-box:hover { border-color: var(--pos); }
.td-check.done .td-check-box { background: var(--pos); border-color: var(--pos); }
.td-check-t { flex: 1; font-size: .85rem; color: var(--ink-2); }
.td-check.done .td-check-t { text-decoration: line-through; color: var(--muted); }
.td-check-as { width: 20px; height: 20px; border-radius: 50%; background: var(--brand-100); color: var(--brand-700); display: grid; place-items: center; font-size: .57rem; font-weight: 700; flex: none; }
.td-check-x { color: var(--faint); opacity: 0; transition: opacity .12s ease, color .12s ease; }
.td-check:hover .td-check-x { opacity: 1; }
.td-check-x:hover { color: var(--neg); }

.td-timer { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 14px; border-radius: var(--r-sm); background: var(--surface-2); border: 1px solid var(--line-2); }
.td-timer.live { background: var(--pos-bg); border-color: color-mix(in srgb, var(--pos) 30%, var(--line)); }
.td-timer-big { font-family: var(--font-display); font-weight: 700; font-size: 1.3rem; color: var(--ink); }
.td-timer-big span { font-family: var(--font-body); font-weight: 500; font-size: .76rem; color: var(--muted); margin-left: 5px; }
.td-timer-run { display: flex; align-items: center; gap: 4px; font-size: .73rem; color: var(--pos); font-weight: 600; margin-top: 3px; }
.td-timer-run svg { animation: tdpulse 1.6s ease-in-out infinite; }
.td-time-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.td-time-stats > div { background: var(--surface-2); border-radius: 8px; padding: 8px 10px; }
.td-time-stats span { display: block; font-size: .66rem; text-transform: uppercase; letter-spacing: .04em; color: var(--faint); font-weight: 700; margin-bottom: 1px; }
.td-time-stats b { font-size: .92rem; color: var(--ink); }
.td-time-meta { display: flex; align-items: flex-end; gap: 10px; flex-wrap: wrap; }
.td-mini { display: flex; flex-direction: column; gap: 4px; flex: 1; min-width: 94px; }
.td-mini span { font-size: .72rem; font-weight: 600; color: var(--muted); }
.td-mini .input { padding: 7px 9px; font-size: .85rem; }
.td-toggle { display: inline-flex; align-items: center; gap: 7px; font-size: .82rem; font-weight: 600; color: var(--ink-2); padding-bottom: 8px; white-space: nowrap; }
.td-toggle input { width: 16px; height: 16px; accent-color: var(--pos); }
.td-tlog { display: flex; flex-direction: column; gap: 0; }
.td-tlog-row { display: flex; align-items: center; gap: 9px; padding: 6px 4px; font-size: .82rem; border-bottom: 1px solid var(--line-2); }
.td-tlog-d { font-weight: 700; color: var(--ink); min-width: 50px; }
.td-tlog-l { flex: 1; color: var(--ink-2); }
.td-bill { font-size: .62rem; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; color: var(--pos); background: var(--pos-bg); padding: 1px 5px; border-radius: 4px; }
.td-tlog-t { font-size: .73rem; color: var(--faint); }
.td-tlog-x { color: var(--faint); }
.td-tlog-x:hover { color: var(--neg); }

.td-files { display: flex; flex-direction: column; gap: 5px; }
.td-file { display: flex; align-items: center; gap: 9px; padding: 8px 10px; border-radius: 8px; background: var(--surface-2); }
.td-file-ico { color: var(--brand-600); flex: none; display: inline-flex; }
.td-file-n { flex: 1; font-size: .84rem; color: var(--ink-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.td-file-s { font-size: .73rem; color: var(--faint); flex: none; }
.td-file-x { color: var(--faint); flex: none; }
.td-file-x:hover { color: var(--neg); }

.td-comments { display: flex; flex-direction: column; gap: 13px; }
.td-comment { display: flex; gap: 9px; }
.td-c-av { width: 28px; height: 28px; border-radius: 50%; background: linear-gradient(150deg, var(--gold-200), var(--gold-700)); color: var(--on-accent-2); display: grid; place-items: center; font-size: .64rem; font-weight: 700; flex: none; }
.td-c-body { flex: 1; min-width: 0; }
.td-c-top { display: flex; align-items: baseline; gap: 8px; }
.td-c-top b { font-size: .84rem; color: var(--ink); }
.td-c-top span { font-size: .72rem; color: var(--faint); }
.td-c-text { font-size: .85rem; color: var(--ink-2); line-height: 1.5; margin-top: 2px; }

.td-activity { display: flex; flex-direction: column; gap: 1px; }
.td-act { display: flex; align-items: center; gap: 9px; padding: 5px 0; font-size: .8rem; }
.td-act-ico { width: 22px; height: 22px; border-radius: 50%; background: var(--surface-2); display: grid; place-items: center; color: var(--muted); flex: none; }
.td-act-t { flex: 1; color: var(--ink-2); }
.td-act-ts { font-size: .72rem; color: var(--faint); flex: none; }

.td-foot { display: flex; align-items: center; gap: 8px; padding: 12px 18px; border-top: 1px solid var(--line-2); flex: none; background: var(--surface); }

@media (max-width: 600px) {
  .task-drawer { width: 100vw; }
  .td-props { grid-template-columns: 1fr; }
  .td-foot { gap: 6px; padding: 11px 14px; }
  .td-foot-sec span { display: none; }
}

/* ============================================================
   PROOFS & APPROVALS — panel cards + two-pane review drawer
   ============================================================ */
/* Project-window revision-rules strip + change orders */
.prr { background: var(--surface-2); border: 1px solid var(--line-2); border-radius: var(--r); padding: 12px 14px; }
.prr-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
.prr-title { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; font-size: .85rem; color: var(--ink); flex-wrap: wrap; }
.prr-title > svg { color: var(--brand-600); flex: none; }
.prr-facts { display: flex; flex-wrap: wrap; gap: 8px 18px; }
.prr-fact { display: inline-flex; align-items: center; gap: 6px; font-size: .8rem; color: var(--muted); font-weight: 600; }
.prr-fact svg { color: var(--faint); flex: none; }
.prr-fact b { color: var(--ink); font-weight: 800; }
.prr-cos { margin-top: 2px; padding-top: 12px; border-top: 1px solid var(--line-2); }
.co-rows { display: flex; flex-direction: column; gap: 8px; }
.co-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; text-align: left; background: var(--surface); border: 1px solid var(--line-2); border-radius: var(--r-sm); padding: 9px 12px; cursor: pointer; font: inherit; transition: border-color .14s, box-shadow .14s; }
.co-row:hover { border-color: var(--brand-200); box-shadow: var(--sh-1); }
.co-row-main { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.co-row-main b { font-size: .86rem; color: var(--ink); font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.co-row-sub { font-size: .74rem; color: var(--muted); }
.co-row-right { display: inline-flex; align-items: center; gap: 10px; flex: none; }
.co-row-amt { font-size: .86rem; color: var(--ink); font-weight: 800; }

/* Archived proofs (collapsible, owner-only) */
.prr-arch > summary { cursor: pointer; list-style: none; display: flex; align-items: center; gap: 7px; user-select: none; margin-bottom: 0; }
.prr-arch > summary::-webkit-details-marker { display: none; }
.prr-arch > summary svg { color: var(--faint); }
.prr-arch > summary:hover { color: var(--muted); }
.prr-arch[open] > summary { margin-bottom: 10px; }
.arch-row { cursor: default; background: var(--surface-2); }
.arch-row:hover { border-color: var(--line-2); box-shadow: none; }
.arch-row .co-row-main { background: none; border: 0; padding: 0; font: inherit; cursor: pointer; border-radius: var(--r-xs); }
.arch-row .co-row-main b { color: var(--muted); }
.arch-row .co-row-main:hover b { color: var(--brand-700); text-decoration: underline; }

/* Per-project revision-rules modal */
.prc-banner { display: flex; align-items: flex-start; gap: 10px; padding: 11px 13px; border-radius: var(--r-sm); font-size: .84rem; line-height: 1.5; color: var(--brand-700); background: var(--brand-50); border: 1px solid var(--brand-100, var(--brand-50)); }
.prc-banner svg { flex: none; margin-top: 1px; color: var(--brand-600); }
.prc-banner b { font-weight: 800; }
.prc-banner.custom { color: #7a5a12; background: var(--gold-bg, #fbf2da); border-color: rgba(176,138,40,.32); }
.prc-banner.custom svg { color: var(--gold); }
.prc-sec { border: 1px solid var(--line-2); border-radius: var(--r); padding: 14px 15px; display: flex; flex-direction: column; gap: 14px; }
.prc-sec-h { display: inline-flex; align-items: center; gap: 8px; font-weight: 800; font-size: .82rem; color: var(--ink); }
.prc-sec-h svg { color: var(--brand-600); flex: none; }

.proof-summary { display: flex; gap: 16px; flex-wrap: wrap; margin-bottom: 13px; padding-bottom: 12px; border-bottom: 1px solid var(--line-2); }
.ps-stat { font-size: .82rem; color: var(--muted); }
.ps-stat b { color: var(--ink); font-weight: 800; margin-right: 3px; }
.ps-stat.neg b { color: var(--neg); }
.ps-stat.pos b { color: var(--pos); }

.proof-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px; }
.proof-card { display: flex; flex-direction: column; text-align: left; background: var(--surface); border: 1px solid var(--line-2); border-radius: var(--r-lg); overflow: hidden; cursor: pointer; padding: 0; font: inherit; transition: border-color .14s, box-shadow .14s, transform .14s; }
.proof-card:hover { border-color: var(--brand-200); box-shadow: var(--sh-1); transform: translateY(-2px); }
.pc-thumb { position: relative; aspect-ratio: 16 / 10; background-size: cover; background-position: center; background-color: var(--surface-2); display: block; }
.pc-type { position: absolute; left: 8px; top: 8px; display: inline-flex; align-items: center; gap: 4px; font-size: .64rem; font-weight: 700; color: #fff; background: rgba(0,0,0,.42); border-radius: var(--pill); padding: 2px 8px; letter-spacing: .02em; }
.pc-ver { position: absolute; right: 8px; top: 8px; font-size: .64rem; font-weight: 700; color: #fff; background: rgba(0,0,0,.42); border-radius: var(--pill); padding: 2px 8px; }
.pc-play { position: absolute; inset: 0; display: grid; place-items: center; color: #fff; }
.pc-play svg { filter: drop-shadow(0 2px 6px rgba(0,0,0,.45)); }
.pc-body { display: flex; flex-direction: column; gap: 7px; padding: 11px 12px 12px; }
.pc-title { font-weight: 700; font-size: .9rem; line-height: 1.25; color: var(--ink); }
.proof-st { align-self: flex-start; font-size: .7rem; padding: 3px 9px; }
.pc-foot { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.pc-f { display: inline-flex; align-items: center; gap: 4px; font-size: .74rem; color: var(--muted); font-weight: 600; }
.pc-f.hot { color: var(--brand-600); }
.pc-f.neg { color: var(--neg); }
.pc-recips { display: inline-flex; margin-left: auto; }
.pc-av { width: 22px; height: 22px; border-radius: 50%; background: var(--brand-100); color: var(--brand-700); font-size: .58rem; font-weight: 700; display: grid; place-items: center; border: 1.5px solid var(--surface); margin-left: -6px; }
.pc-recips .pc-av:first-child { margin-left: 0; }

/* ---- review drawer shell (centered review workspace) ---- */
.proof-drawer { position: absolute; inset: 0; margin: auto; width: min(1120px, calc(100vw - 24px)); height: min(88vh, 840px); display: flex; flex-direction: column; background: var(--surface); border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--sh-3); animation: tdSlide .24s cubic-bezier(.2,.7,.3,1); }
.linklike { background: none; border: none; color: var(--brand-600); font-weight: 700; font-size: .8rem; cursor: pointer; padding: 0; }
.linklike:hover { text-decoration: underline; }
.pd-clientbar { display: flex; align-items: center; gap: 8px; font-size: .8rem; font-weight: 600; color: var(--brand-700); background: var(--brand-50); border-bottom: 1px solid var(--brand-200); padding: 8px 16px; flex: none; }
.pd-clientbar b { font-weight: 800; }
.pd-clientbar .linklike { margin-left: auto; }

.pd-head { display: flex; align-items: flex-start; gap: 12px; padding: 14px 16px; border-bottom: 1px solid var(--line-2); flex: none; }
.pd-head-l { display: flex; gap: 11px; flex: 1; min-width: 0; }
.pd-type-ico { width: 38px; height: 38px; border-radius: 10px; background: var(--brand-50); color: var(--brand-600); display: grid; place-items: center; flex: none; }
.pd-id { min-width: 0; }
.pd-id-top { display: flex; align-items: center; gap: 7px; margin-bottom: 4px; }
.pd-ver-badge { font-size: .68rem; font-weight: 700; color: var(--muted); background: var(--surface-2); border: 1px solid var(--line-2); border-radius: var(--pill); padding: 1px 8px; }
.pd-title { font-size: 1.06rem; font-weight: 800; line-height: 1.2; margin: 0; }
.pd-sub { display: flex; align-items: center; gap: 5px; flex-wrap: wrap; font-size: .78rem; color: var(--muted); margin-top: 3px; }
.pd-sub a { display: inline-flex; align-items: center; gap: 4px; color: var(--brand-600); font-weight: 600; cursor: pointer; }
.pd-sub .neg { color: var(--neg); }
.pd-head-actions { display: flex; align-items: center; gap: 2px; flex: none; }
.pd-icon-btn { width: 34px; height: 34px; border-radius: var(--r-sm); display: grid; place-items: center; color: var(--muted); border: 0; background: none; cursor: pointer; transition: background .14s, color .14s; }
.pd-icon-btn:hover { background: var(--line-2); color: var(--ink); }
.pd-icon-btn.is-restore { color: var(--brand-600); }
.pd-icon-btn.is-restore:hover { background: var(--brand-50); color: var(--brand-700); }

.pd-main { flex: 1; display: flex; min-height: 0; }
.pd-stage { flex: 1; min-width: 0; background: #16181d; display: flex; flex-direction: column; }
.pd-canvas-wrap { flex: 1; min-height: 0; display: flex; flex-direction: column; padding: 18px; gap: 12px; }
.pd-canvas { position: relative; flex: 1; min-height: 0; border-radius: 8px; overflow: hidden; background: #0e1013; display: flex; align-items: center; justify-content: center; box-shadow: 0 8px 28px rgba(0,0,0,.32); }
.pd-canvas.placing { cursor: crosshair; touch-action: none; }
.pd-art-wrap { position: relative; display: flex; max-width: 100%; max-height: 100%; flex: none; }
.pd-art { max-width: 100%; max-height: 100%; object-fit: contain; display: block; user-select: none; -webkit-user-drag: none; }
.pd-markers { position: absolute; inset: 0; pointer-events: none; }
.pd-markers .pmark { pointer-events: auto; }
.pmark { position: absolute; }
.pmark-pin { width: 24px; height: 24px; margin: -12px 0 0 -12px; }
.pmark-pin .pmark-n { width: 24px; height: 24px; border-radius: 50% 50% 50% 2px; background: var(--brand-600); color: #fff; font-size: .72rem; font-weight: 800; display: grid; place-items: center; border: 2px solid #fff; box-shadow: 0 2px 8px rgba(0,0,0,.4); cursor: pointer; transition: transform .12s; }
.pmark-pin:hover .pmark-n, .pmark-pin.focus .pmark-n { transform: scale(1.18); }
.pmark-pin.done .pmark-n { background: var(--pos); }
.pmark-box { border: 2px solid var(--brand-500); background: color-mix(in srgb, var(--brand-500) 16%, transparent); border-radius: 4px; cursor: pointer; }
.pmark-box.hl { border-color: var(--gold); background: color-mix(in srgb, var(--gold) 22%, transparent); }
.pmark-box.done { border-color: var(--pos); background: color-mix(in srgb, var(--pos) 14%, transparent); }
.pmark-box .pmark-n { position: absolute; left: -2px; top: -22px; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 5px; background: var(--brand-600); color: #fff; font-size: .68rem; font-weight: 800; display: grid; place-items: center; }
.pmark-box.hl .pmark-n { background: var(--gold-700); }
.pmark-box.done .pmark-n { background: var(--pos); }
.pmark-box.focus { box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand-500) 40%, transparent); }
.pmark.ghost { opacity: .9; animation: tdpulse 1.2s ease-in-out infinite; }
.pmark-pin.ghost .pmark-n { background: var(--ink-2); }
.pmark-box.ghost { border-style: dashed; border-color: #fff; background: rgba(255,255,255,.14); }
.pmark-box.ghost .pmark-n { background: var(--ink-2); }

/* SVG markup overlay — draw / arrow / rectangle / circle annotations (percent coords, non-scaling stroke) */
.pd-anno-svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.pd-anno-svg .pmark-draw, .pd-anno-svg .pmark-arrow, .pd-anno-svg .pmark-rect, .pd-anno-svg .pmark-ell { fill: none; stroke: var(--brand-500); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; pointer-events: stroke; cursor: pointer; }
.pd-anno-svg .pmark-rect, .pd-anno-svg .pmark-ell { fill: color-mix(in srgb, var(--brand-500) 9%, transparent); }
.pd-anno-svg .focus { stroke: var(--brand-600); stroke-width: 3.4; }
.pd-anno-svg .done { stroke: var(--pos); }
.pd-anno-svg .done.pmark-rect, .pd-anno-svg .done.pmark-ell { fill: color-mix(in srgb, var(--pos) 10%, transparent); }
.pd-anno-svg .ghost { stroke: #fff; stroke-width: 2.4; stroke-dasharray: 3.5 2.8; fill: rgba(255,255,255,.08); opacity: .96; animation: tdpulse 1.2s ease-in-out infinite; }
/* numbered chip anchoring a markup shape to its comment */
.pmark-badge { width: 0; height: 0; }
.pmark-badge .pmark-n { position: absolute; left: 3px; top: -10px; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 5px; background: var(--brand-600); color: #fff; font-size: .68rem; font-weight: 800; display: grid; place-items: center; box-shadow: 0 1px 4px rgba(0,0,0,.3); }
.pmark-badge.done .pmark-n { background: var(--pos); }
.pmark-badge.focus .pmark-n { box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand-500) 40%, transparent); }

.pd-video-ui { position: absolute; left: 0; right: 0; bottom: 0; display: flex; align-items: center; gap: 12px; padding: 12px 16px; background: linear-gradient(transparent, rgba(0,0,0,.55)); color: #fff; }
.pd-vplay { display: grid; place-items: center; }
.pd-scrub { position: relative; flex: 1; height: 16px; display: flex; align-items: center; }
.pd-scrub-track { position: absolute; left: 0; right: 0; height: 4px; border-radius: 3px; background: rgba(255,255,255,.28); }
.pd-scrub-track i { display: block; height: 100%; border-radius: 3px; background: var(--brand-500); }
.pd-tmark { position: absolute; top: 50%; width: 11px; height: 11px; margin: -5.5px 0 0 -5.5px; border-radius: 50%; background: var(--gold); border: 2px solid #fff; cursor: pointer; transition: transform .12s; }
.pd-tmark.focus { transform: scale(1.3); }
.pd-vtime { font-size: .72rem; font-variant-numeric: tabular-nums; opacity: .9; flex: none; }
.pd-lock { position: absolute; right: 10px; top: 10px; display: inline-flex; align-items: center; gap: 5px; font-size: .66rem; font-weight: 700; color: #fff; background: color-mix(in srgb, var(--pos) 86%, black); border-radius: var(--pill); padding: 3px 9px; }

/* extended proof types — website link chip + audio scrub */
.pd-audio-ui { background: linear-gradient(transparent, rgba(0,0,0,.46)); }
.pd-weblink { position: absolute; left: 12px; bottom: 12px; z-index: 2; display: inline-flex; align-items: center; gap: 6px; max-width: calc(100% - 24px); font-size: .74rem; font-weight: 600; color: #fff; background: rgba(0,0,0,.5); border: 1px solid rgba(255,255,255,.28); border-radius: var(--pill); padding: 6px 12px; cursor: pointer; }
.pd-weblink span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pd-weblink:hover { background: rgba(0,0,0,.68); }
.pd-weblink.in-details { position: static; max-width: 100%; color: var(--brand-600, var(--brand-500)); background: color-mix(in srgb, var(--brand-500) 10%, transparent); border-color: color-mix(in srgb, var(--brand-500) 30%, transparent); }

.pd-filmstrip { display: flex; gap: 8px; flex: none; overflow-x: auto; padding-bottom: 2px; }
.pd-frame { flex: none; width: 78px; border-radius: 6px; overflow: hidden; border: 2px solid transparent; background: #0e1013; cursor: pointer; padding: 0; display: flex; flex-direction: column; }
.pd-frame img { width: 100%; height: 46px; object-fit: cover; display: block; }
.pd-frame span { font-size: .6rem; font-weight: 700; color: rgba(255,255,255,.8); padding: 3px 2px; text-align: center; }
.pd-frame.on { border-color: var(--brand-500); }

.pd-rail { width: 384px; flex: none; border-left: 1px solid var(--line-2); display: flex; flex-direction: column; min-height: 0; background: var(--surface); }
.pd-tabs { display: flex; gap: 2px; padding: 8px 8px 0; flex: none; border-bottom: 1px solid var(--line-2); }
.pd-tab { display: inline-flex; align-items: center; gap: 6px; font-size: .8rem; font-weight: 600; color: var(--muted); background: none; border: none; border-bottom: 2px solid transparent; padding: 8px 10px; cursor: pointer; }
.pd-tab.on { color: var(--brand-700); border-bottom-color: var(--brand-600); }
.pd-tab .count-pill { font-size: .62rem; padding: 0 6px; min-width: 16px; }
.pd-tab-body { flex: 1; min-height: 0; overflow-y: auto; padding: 12px 14px; display: flex; flex-direction: column; }

.pd-comments { display: flex; flex-direction: column; gap: 10px; }
.pcm { border: 1px solid var(--line-2); border-radius: var(--r-sm); padding: 9px 11px; background: var(--surface); transition: border-color .12s, box-shadow .12s; }
.pcm.focus { border-color: var(--brand-200); box-shadow: 0 0 0 2px var(--brand-50); }
.pcm.done { opacity: .72; }
.pcm.done .pcm-text { text-decoration: line-through; text-decoration-color: var(--faint); }
.pcm-top { display: flex; align-items: center; gap: 7px; }
.pcm-top.sm { gap: 6px; }
.pcm-n { width: 19px; height: 19px; border-radius: 50%; background: var(--brand-600); color: #fff; font-size: .64rem; font-weight: 800; display: grid; place-items: center; flex: none; }
.pcm.done .pcm-n { background: var(--pos); }
.pcm-n.gen { background: var(--surface-2); color: var(--muted); }
.pcm-av { width: 22px; height: 22px; border-radius: 50%; background: var(--brand-100); color: var(--brand-700); font-size: .58rem; font-weight: 800; display: grid; place-items: center; flex: none; }
.pcm-av.sm { width: 18px; height: 18px; font-size: .52rem; }
.pcm-author { font-size: .82rem; font-weight: 700; }
.pcm-role { font-size: .58rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); background: var(--surface-2); border-radius: var(--pill); padding: 1px 6px; }
.pcm-role.client { color: var(--brand-700); background: var(--brand-50); }
.pcm-tool { display: inline-flex; align-items: center; gap: 3px; font-size: .64rem; font-weight: 600; color: var(--gold-700); background: var(--gold-50); border-radius: var(--pill); padding: 1px 7px; }
.pcm-ts { font-size: .68rem; color: var(--faint); margin-left: auto; flex: none; }
.pcm-text { font-size: .85rem; color: var(--ink-2); line-height: 1.45; margin-top: 6px; }
.pcm-replies { margin-top: 8px; padding-left: 9px; border-left: 2px solid var(--line-2); display: flex; flex-direction: column; gap: 7px; }
.pcm-reply { display: flex; gap: 7px; }
.pcm-reply-b { min-width: 0; }
.pcm-reply-b .pcm-text { margin-top: 2px; }
.pcm-acts { display: flex; gap: 6px; margin-top: 8px; flex-wrap: wrap; }
.pcm-act { display: inline-flex; align-items: center; gap: 4px; font-size: .72rem; font-weight: 600; color: var(--muted); background: var(--surface-2); border: 1px solid var(--line-2); border-radius: var(--pill); padding: 3px 9px; cursor: pointer; }
.pcm-act:hover { border-color: var(--brand-200); color: var(--brand-700); }
.pcm-act.task { color: var(--brand-700); }
.pcm-replybox { display: flex; gap: 6px; margin-top: 8px; }
.pcm-replybox .input { flex: 1; }

.pd-compose { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line-2); flex: none; }
.pd-compose-tools { display: flex; gap: 5px; margin-bottom: 8px; flex-wrap: wrap; }
.pd-ct { width: 30px; height: 30px; border-radius: 7px; display: grid; place-items: center; background: var(--surface-2); border: 1px solid var(--line-2); color: var(--muted); cursor: pointer; }
.pd-ct:hover { border-color: var(--brand-200); color: var(--brand-700); }
.pd-ct.on { background: var(--brand-600); border-color: var(--brand-600); color: #fff; }
.pd-ct:disabled, .pd-ct.off { opacity: .4; cursor: not-allowed; border-style: dashed; background: var(--surface-2); }
.pd-ct.off:hover { border-color: var(--line-2); color: var(--muted); }
.pd-draw-acts { display: flex; align-items: center; gap: 6px; margin-bottom: 8px; }
.pd-da { display: inline-flex; align-items: center; gap: 4px; font-size: .72rem; font-weight: 600; color: var(--muted); background: var(--surface-2); border: 1px solid var(--line-2); border-radius: var(--pill); padding: 3px 9px; cursor: pointer; }
.pd-da:hover:not(:disabled) { border-color: var(--brand-200); color: var(--brand-700); }
.pd-da:disabled { opacity: .45; cursor: default; }
.pd-da-n { font-size: .68rem; color: var(--faint); margin-left: auto; }
.pd-place-hint { display: flex; align-items: center; gap: 6px; font-size: .74rem; color: var(--muted); margin-bottom: 8px; padding: 6px 9px; background: var(--surface-2); border-radius: var(--r-sm); }
.pd-place-hint.ready { color: var(--pos); background: var(--pos-bg); }
.pd-hint-clear { margin-left: auto; display: inline-grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; border: none; background: transparent; color: inherit; cursor: pointer; flex: none; }
.pd-hint-clear:hover { background: rgba(0,0,0,.1); }
.pd-time-in { width: 70px; height: 28px; padding: 4px 8px; }
.pd-compose-row { display: flex; gap: 7px; }
.pd-compose-row .input { flex: 1; }
.pd-compose-row .btn { flex: none; }

.pd-empty { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 9px; color: var(--faint); font-size: .82rem; padding: 30px 0; text-align: center; }
.pd-vbanner { display: flex; align-items: center; gap: 6px; font-size: .76rem; color: var(--gold-700); background: var(--gold-50); border: 1px solid var(--gold-200); border-radius: var(--r-sm); padding: 7px 10px; margin-bottom: 10px; }
.pd-vbanner .linklike { margin-left: auto; color: var(--gold-700); }
.pd-activity { display: flex; flex-direction: column; }
.pd-act { display: flex; align-items: center; gap: 9px; padding: 6px 0; font-size: .8rem; }
.pd-act-ico { width: 24px; height: 24px; border-radius: 50%; background: var(--surface-2); color: var(--muted); display: grid; place-items: center; flex: none; }
.pd-act-t { flex: 1; color: var(--ink-2); }
.pd-act-ts { font-size: .7rem; color: var(--faint); flex: none; }

.pd-details { gap: 16px; }
.pd-d-sec { display: flex; flex-direction: column; gap: 8px; }
.pd-d-h { display: flex; align-items: center; gap: 7px; font-size: .72rem; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .03em; }
.pd-d-p { font-size: .86rem; color: var(--ink-2); line-height: 1.5; }
.pd-recips { display: flex; flex-direction: column; gap: 7px; }
.pd-recip { display: flex; align-items: center; gap: 8px; font-size: .84rem; font-weight: 600; }
.pd-recip small { display: block; font-weight: 400; color: var(--faint); font-size: .72rem; }
.pd-perms { display: flex; gap: 7px; flex-wrap: wrap; }
.pd-permchip { display: inline-flex; align-items: center; gap: 5px; font-size: .74rem; font-weight: 600; color: var(--muted); background: var(--surface-2); border: 1px solid var(--line-2); border-radius: var(--pill); padding: 4px 10px; }
button.pd-permchip { cursor: pointer; }
.pd-permchip.on { color: var(--pos); background: var(--pos-bg); border-color: color-mix(in srgb, var(--pos) 28%, var(--line)); }
.pd-vlist { display: flex; flex-direction: column; gap: 8px; }
.pd-vrow { border: 1px solid var(--line-2); border-radius: var(--r-sm); padding: 8px 10px; cursor: pointer; }
.pd-vrow.on { border-color: var(--brand-200); background: var(--brand-50); }
.pd-vrow-top { display: flex; align-items: center; gap: 7px; }
.pd-now { font-size: .58rem; font-weight: 700; text-transform: uppercase; color: var(--pos); background: var(--pos-bg); border-radius: var(--pill); padding: 1px 6px; }
.pd-vrow-t { font-size: .72rem; color: var(--faint); margin-left: auto; }
.pd-vrow-f { font-size: .8rem; font-weight: 600; color: var(--ink-2); margin-top: 3px; }
.pd-vrow-n { font-size: .78rem; color: var(--muted); margin-top: 3px; }
.pd-approved { display: flex; align-items: center; gap: 7px; font-size: .84rem; color: var(--pos); font-weight: 600; }
.pd-d-meta { display: flex; justify-content: space-between; font-size: .72rem; color: var(--faint); padding-top: 6px; border-top: 1px solid var(--line-2); }

.pd-foot { display: flex; align-items: center; gap: 8px; padding: 12px 16px; border-top: 1px solid var(--line-2); flex: none; background: var(--surface); }
.pd-final-tag { display: inline-flex; align-items: center; gap: 6px; font-size: .82rem; font-weight: 700; color: var(--pos); }
.pd-overlay { position: absolute; inset: 0; background: rgba(20,18,12,.45); display: grid; place-items: center; padding: 20px; z-index: 5; animation: fadeIn .15s ease; }
.pd-overlay-card { width: min(440px, 100%); background: var(--surface); border-radius: var(--r-lg); box-shadow: var(--sh-3); padding: 18px; }
.pd-ov-h { display: flex; align-items: center; justify-content: space-between; font-weight: 800; font-size: 1rem; margin-bottom: 6px; }
.pd-ov-h span { display: inline-flex; align-items: center; gap: 7px; }
.pd-ov-sub { font-size: .78rem; color: var(--muted); line-height: 1.45; margin-bottom: 14px; }
.pd-ov-foot { display: flex; justify-content: flex-end; gap: 9px; margin-top: 6px; }

/* ---- revision banner (proof drawer) ---- */
.pd-revbar { display: flex; align-items: center; gap: 10px; padding: 9px 16px; border-bottom: 1px solid var(--line-2); flex: none; background: var(--surface-2); }
.pd-rev-ico { width: 26px; height: 26px; border-radius: 7px; display: grid; place-items: center; flex: none; background: var(--surface); border: 1px solid var(--line-2); color: var(--muted); }
.pd-rev-txt { display: flex; flex-direction: column; min-width: 0; line-height: 1.3; }
.pd-rev-txt b { font-size: .82rem; font-weight: 700; color: var(--ink); }
.pd-rev-txt span { font-size: .72rem; color: var(--muted); overflow: hidden; text-overflow: ellipsis; }
.pd-rev-co { margin-left: auto; flex: none; display: inline-flex; align-items: center; gap: 5px; font-size: .72rem; font-weight: 650; color: var(--gold-700); background: var(--gold-50); border: 1px solid var(--gold-200); border-radius: var(--pill); padding: 3px 10px; cursor: pointer; }
.pd-rev-co:hover { border-color: var(--gold); }
.pd-rev-flag { flex: none; margin-left: auto; font-size: .62rem; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; color: var(--neg); background: var(--neg-bg); border-radius: var(--pill); padding: 2px 8px; }
.pd-rev-co + .pd-rev-flag { margin-left: 0; }
.pd-revbar.tone-pos { background: var(--pos-bg); border-bottom-color: color-mix(in srgb, var(--pos) 24%, var(--line)); }
.pd-revbar.tone-pos .pd-rev-ico { color: var(--pos); border-color: color-mix(in srgb, var(--pos) 30%, var(--line)); }
.pd-revbar.tone-gold { background: var(--gold-50); border-bottom-color: var(--gold-200); }
.pd-revbar.tone-gold .pd-rev-ico { color: var(--gold-700); border-color: var(--gold-200); }
.pd-revbar.tone-neg { background: var(--neg-bg); border-bottom-color: color-mix(in srgb, var(--neg) 24%, var(--line)); }
.pd-revbar.tone-neg .pd-rev-ico { color: var(--neg); border-color: color-mix(in srgb, var(--neg) 30%, var(--line)); }

/* ---- revision policy + change orders (details tab) ---- */
.pd-policy { display: flex; flex-direction: column; gap: 5px; font-size: .82rem; color: var(--ink-2); background: var(--surface-2); border: 1px solid var(--line-2); border-radius: var(--r-sm); padding: 10px 12px; }
.pd-policy > span { display: flex; align-items: center; gap: 6px; }
.pd-policy-tag { font-size: .6rem; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; color: var(--brand-600); background: var(--brand-50); border-radius: var(--pill); padding: 1px 7px; }
.pd-policy-edit { align-self: flex-start; margin-top: 3px; display: inline-flex; align-items: center; gap: 5px; font-size: .72rem; font-weight: 650; color: var(--brand-600); background: none; border: none; cursor: pointer; padding: 2px 0; }
.pd-policy-edit:hover { color: var(--brand-700); text-decoration: underline; }
.pd-colist { display: flex; flex-direction: column; gap: 9px; }
.pd-co { border: 1px solid var(--line-2); border-radius: var(--r-sm); padding: 10px 12px; background: var(--surface); }
.pd-co-top { display: flex; align-items: baseline; gap: 8px; }
.pd-co-top b { font-size: .86rem; font-weight: 650; color: var(--ink); flex: 1; min-width: 0; }
.pd-co-amt { font-size: .9rem; font-weight: 700; color: var(--ink); white-space: nowrap; }
.pd-co-meta { display: flex; align-items: center; gap: 8px; margin-top: 6px; flex-wrap: wrap; }
.pd-co-detail { font-size: .78rem; color: var(--muted); }
.pd-co-acts { display: flex; gap: 7px; margin-top: 9px; flex-wrap: wrap; }
.pd-co-act { font-size: .74rem; font-weight: 650; color: var(--ink-2); background: var(--surface-2); border: 1px solid var(--line-2); border-radius: var(--pill); padding: 4px 11px; cursor: pointer; }
.pd-co-act:hover { border-color: var(--brand-200); color: var(--brand-700); }
.pd-co-act.ok { color: #fff; background: var(--pos); border-color: transparent; }
.pd-co-act.ok:hover { background: color-mix(in srgb, var(--pos) 88%, #000); color: #fff; }
.pd-signoff-id { margin-left: 6px; font-size: .66rem; font-weight: 700; letter-spacing: .02em; color: var(--muted); background: var(--surface-2); border: 1px solid var(--line-2); border-radius: var(--pill); padding: 1px 7px; }
.pd-foot-note { font-size: .74rem; color: var(--muted); line-height: 1.4; flex: 1; min-width: 0; }
.pcm-act.co { color: var(--gold-700); }
.pcm-act.co:hover { border-color: var(--gold-200); color: var(--gold-700); }
.pcm-act.bill { color: var(--gold-700); background: var(--gold-50); border-color: var(--gold-200); }
.pcm-act.bill:hover { border-color: var(--gold); }

/* ============================================================
   Proof addenda: routing, guests, protection, deadlines, audit, AI, compare
   ============================================================ */
.pd-d-h-act { margin-left: auto; display: inline-flex; align-items: center; gap: 5px; font-size: .68rem; font-weight: 650; text-transform: none; letter-spacing: 0; color: var(--brand-600); background: var(--brand-50); border: 1px solid var(--brand-200); border-radius: var(--pill); padding: 2px 9px; cursor: pointer; }
.pd-d-h-act:hover { border-color: var(--brand-600); }
.pd-toggle { display: flex; align-items: center; gap: 8px; font-size: .82rem; color: var(--ink-2); cursor: pointer; }
.pd-toggle input { width: 15px; height: 15px; accent-color: var(--brand-600); cursor: pointer; flex: none; }
.pd-toggle code { font-size: .74rem; font-weight: 700; color: var(--brand-700); background: var(--brand-50); border-radius: var(--r-xs); padding: 0 5px; }
.pd-toggle.sm { font-size: .76rem; }
.pd-rv-empty { font-size: .8rem; padding: 2px 0; }

/* deadline */
.pd-deadline { display: flex; flex-direction: column; gap: 8px; background: var(--surface-2); border: 1px solid var(--line-2); border-radius: var(--r-sm); padding: 11px 12px; }
.pd-dl-row { display: flex; align-items: center; justify-content: space-between; font-size: .82rem; color: var(--muted); }
.pd-dl-row b { color: var(--ink); font-weight: 650; display: inline-flex; align-items: center; gap: 6px; }
.pd-dl-days { font-size: .66rem; font-weight: 700; border-radius: var(--pill); padding: 1px 7px; }
.pd-dl-days.pos { color: var(--pos); background: var(--pos-bg); }
.pd-dl-days.gold { color: var(--gold-700); background: var(--gold-50); }
.pd-dl-days.neg { color: var(--neg); background: var(--neg-bg); }
.pd-dl-rem { font-size: .74rem; color: var(--faint); }

/* approval routing */
.pd-route { display: flex; flex-direction: column; gap: 9px; }
.pd-seg { display: flex; gap: 4px; background: var(--surface-2); border: 1px solid var(--line-2); border-radius: var(--r-sm); padding: 3px; flex-wrap: wrap; }
.pd-seg-b { flex: 1; min-width: 0; font-size: .72rem; font-weight: 600; color: var(--muted); background: none; border: none; border-radius: var(--r-xs); padding: 5px 7px; cursor: pointer; white-space: nowrap; }
.pd-seg-b.on { color: var(--brand-700); background: var(--surface); box-shadow: var(--sh-1); }
.pd-route-state { display: flex; align-items: center; gap: 6px; font-size: .78rem; color: var(--muted); }
.pd-route-rule { display: flex; align-items: center; gap: 7px; font-size: .78rem; color: var(--muted); }
.pd-pill { font-size: .72rem; font-weight: 650; color: var(--muted); background: var(--surface-2); border: 1px solid var(--line-2); border-radius: var(--pill); padding: 3px 10px; cursor: pointer; }
.pd-pill.on { color: var(--brand-700); background: var(--brand-50); border-color: var(--brand-200); }
.pd-reviewers { display: flex; flex-direction: column; gap: 7px; }
.pd-rv { display: flex; align-items: center; gap: 8px; border: 1px solid var(--line-2); border-radius: var(--r-sm); padding: 6px 9px; }
.pd-rv-b { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.pd-rv-b b { font-size: .82rem; font-weight: 650; }
.pd-rv-b small { font-size: .7rem; color: var(--faint); text-transform: capitalize; }
.pd-rv-dec { font-size: .7rem; font-weight: 650; display: inline-flex; align-items: center; gap: 4px; border-radius: var(--pill); padding: 2px 8px; }
.pd-rv-dec.approved { color: var(--pos); background: var(--pos-bg); }
.pd-rv-dec.changes { color: var(--gold-700); background: var(--gold-50); }
.pd-rv-act { font-size: .7rem; font-weight: 650; color: var(--ink-2); background: var(--surface-2); border: 1px solid var(--line-2); border-radius: var(--pill); padding: 3px 9px; cursor: pointer; }
.pd-rv-act.ok { color: var(--pos); border-color: color-mix(in srgb, var(--pos) 28%, var(--line)); }
.pd-rv-act:hover { border-color: var(--brand-200); }
.pd-rv-x { flex: none; color: var(--faint); background: none; border: none; cursor: pointer; display: grid; place-items: center; padding: 2px; border-radius: var(--r-xs); }
.pd-rv-x:hover { color: var(--neg); background: var(--neg-bg); }
.pd-rv-form { display: flex; flex-direction: column; gap: 7px; border: 1px dashed var(--line); border-radius: var(--r-sm); padding: 10px; }
.pd-rv-form .input { font-size: .82rem; }
.pd-rv-form-acts { display: flex; gap: 7px; }

/* guest links */
.pd-guests { display: flex; flex-direction: column; gap: 7px; }
.pd-guest { display: flex; align-items: center; gap: 8px; border: 1px solid var(--line-2); border-radius: var(--r-sm); padding: 7px 10px; }
.pd-guest.off { opacity: .55; }
.pd-guest-b { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.pd-guest-b b { font-size: .82rem; font-weight: 650; }
.pd-guest-b small { font-size: .7rem; color: var(--faint); }
.pd-guest-acts { display: flex; gap: 6px; flex: none; }
.pd-guest-copy, .pd-guest-rv { font-size: .7rem; font-weight: 650; border-radius: var(--pill); padding: 3px 9px; cursor: pointer; display: inline-flex; align-items: center; gap: 4px; }
.pd-guest-copy { color: var(--brand-700); background: var(--brand-50); border: 1px solid var(--brand-200); }
.pd-guest-copy:hover { border-color: var(--brand-600); }
.pd-guest-rv { color: var(--muted); background: var(--surface-2); border: 1px solid var(--line-2); }
.pd-guest-rv:hover { color: var(--neg); border-color: color-mix(in srgb, var(--neg) 28%, var(--line)); }
.pd-guest-new { display: flex; gap: 7px; flex-wrap: wrap; }

/* asset protection */
.pd-prot { display: flex; flex-direction: column; gap: 8px; background: var(--surface-2); border: 1px solid var(--line-2); border-radius: var(--r-sm); padding: 11px 12px; }
.pd-access { margin-top: 3px; border-top: 1px solid var(--line-2); padding-top: 8px; }
.pd-access-h { display: flex; align-items: center; gap: 5px; font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; color: var(--faint); margin-bottom: 6px; }
.pd-access-list { display: flex; flex-direction: column; gap: 4px; }
.pd-access-row { display: flex; align-items: center; gap: 8px; font-size: .76rem; }
.pd-access-row > span:first-child { font-weight: 600; }
.pd-access-ts { margin-left: auto; font-size: .7rem; color: var(--faint); white-space: nowrap; }

/* audit */
.pd-audit { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: .8rem; background: var(--surface-2); border: 1px solid var(--line-2); border-radius: var(--r-sm); padding: 9px 12px; }

/* protection effects on stage (client) */
.pd-canvas.is-lowres .pd-art { filter: blur(1.4px) saturate(.92); }
.pd-watermark { position: absolute; inset: 0; pointer-events: none; z-index: 4; display: grid; place-items: center; overflow: hidden; }
.pd-watermark span { font-size: 1.4rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: rgba(255,255,255,.5); text-shadow: 0 1px 3px rgba(0,0,0,.35); transform: rotate(-24deg); white-space: nowrap; opacity: .8; }
.pd-protchip { position: absolute; top: 12px; left: 12px; z-index: 5; display: inline-flex; align-items: center; gap: 5px; font-size: .68rem; font-weight: 650; color: #fff; background: rgba(20,18,12,.6); border-radius: var(--pill); padding: 3px 9px; backdrop-filter: blur(3px); }

/* AI assistant */
.pd-assistant { gap: 14px; }
.pd-ai-sum { display: flex; flex-direction: column; gap: 6px; background: linear-gradient(135deg, var(--brand-50), var(--surface-2)); border: 1px solid var(--brand-200); border-radius: var(--r-sm); padding: 12px 13px; }
.pd-ai-badge { display: inline-flex; align-items: center; gap: 5px; font-size: .66rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--brand-700); }
.pd-ai-sum p { font-size: .86rem; color: var(--ink); line-height: 1.5; margin: 0; }
.pd-ai-flags { display: flex; flex-direction: column; gap: 6px; }
.pd-ai-flag { display: flex; align-items: flex-start; gap: 7px; font-size: .79rem; line-height: 1.4; border-radius: var(--r-sm); padding: 8px 11px; }
.pd-ai-flag svg { flex: none; margin-top: 1px; }
.pd-ai-flag.rounds, .pd-ai-flag.gallery { color: var(--gold-700); background: var(--gold-50); border: 1px solid var(--gold-200); }
.pd-ai-flag.scope { color: var(--neg); background: var(--neg-bg); border: 1px solid color-mix(in srgb, var(--neg) 24%, var(--line)); }
.pd-ai-sec { display: flex; flex-direction: column; gap: 8px; }
.pd-ai-list { display: flex; flex-direction: column; gap: 6px; }
.pd-ai-item { display: flex; align-items: center; gap: 8px; font-size: .82rem; border: 1px solid var(--line-2); border-radius: var(--r-sm); padding: 7px 10px; }
.pd-ai-tick { color: var(--faint); flex: none; display: grid; place-items: center; }
.pd-ai-tick.on { color: var(--pos); }
.pd-ai-tx { flex: 1; min-width: 0; color: var(--ink-2); }
.pd-ai-tx small { color: var(--faint); font-size: .7rem; }
.pd-ai-done { font-size: .72rem; flex: none; }
.pd-ai-mk { flex: none; font-size: .72rem; font-weight: 650; color: var(--brand-700); background: var(--brand-50); border: 1px solid var(--brand-200); border-radius: var(--pill); padding: 3px 10px; cursor: pointer; }
.pd-ai-mk:hover { border-color: var(--brand-600); }
.pd-ai-themes { display: flex; flex-wrap: wrap; gap: 6px; }
.pd-ai-theme { font-size: .76rem; color: var(--ink-2); background: var(--surface-2); border: 1px solid var(--line-2); border-radius: var(--pill); padding: 3px 10px; }
.pd-ai-theme b { color: var(--brand-700); margin-left: 2px; }
.pd-ai-draft { width: 100%; resize: vertical; font: inherit; font-size: .84rem; line-height: 1.5; }
.pd-ai-draft-acts { display: flex; gap: 7px; }

/* version compare modal */
.cmp-modal { width: min(840px, calc(100vw - 32px)); }
.cmp-body { padding: 16px 18px; overflow-y: auto; }
.cmp-grid { display: grid; grid-template-columns: 1fr auto 1fr; gap: 14px; align-items: stretch; }
.cmp-vs { align-self: center; color: var(--faint); }
.cmp-col { display: flex; flex-direction: column; gap: 9px; }
.cmp-col-h { display: flex; align-items: center; gap: 8px; }
.cmp-sel { flex: 1; font-size: .82rem; }
.cmp-stage { aspect-ratio: 4 / 3; border-radius: var(--r-sm); border: 1px solid var(--line-2); overflow: hidden; background: var(--surface-2); }
.cmp-art { display: block; width: 100%; height: 100%; background-size: cover; background-position: center; }
.cmp-art.ph { display: grid; place-items: center; color: var(--faint); }
.cmp-meta { display: flex; flex-direction: column; gap: 3px; }
.cmp-fn { font-size: .84rem; font-weight: 650; }
.cmp-sub { font-size: .72rem; color: var(--faint); }
.cmp-note { font-size: .78rem; color: var(--muted); margin-top: 3px; }
.cmp-cc { display: inline-flex; align-items: center; gap: 5px; font-size: .74rem; color: var(--muted); margin-top: 4px; }
.cmp-foot { padding: 12px 18px 2px; font-size: .74rem; }

/* review-risk chip on proof cards (#10) */
.pc-risk { font-weight: 650; border-radius: var(--pill); padding: 1px 7px; }
.pc-risk.high { color: var(--neg); background: var(--neg-bg); }
.pc-risk.med { color: var(--gold-700); background: var(--gold-50); }

/* ---- change order modal (body overlay) ---- */
.co-modal-overlay { position: fixed; inset: 0; z-index: 150; display: grid; place-items: center; padding: 24px; }
.co-modal-back { position: absolute; inset: 0; background: rgba(20,18,12,.5); backdrop-filter: blur(2px); animation: fadeIn .15s ease; }
.co-modal { position: relative; z-index: 1; width: min(480px, calc(100vw - 32px)); max-height: calc(100vh - 56px); display: flex; flex-direction: column; background: var(--modal-bg); border-radius: var(--r-lg); box-shadow: var(--shadow-lg); overflow: hidden; animation: fadeUp .22s cubic-bezier(.2,.7,.3,1); }
.co-modal-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 15px 18px; border-bottom: 1px solid var(--line-2); }
.co-modal-title { display: inline-flex; align-items: center; gap: 8px; font-size: 1.02rem; font-weight: 700; }
.co-modal-title svg { color: var(--gold-700); }
.co-modal-body { padding: 14px 18px; overflow-y: auto; display: flex; flex-direction: column; gap: 12px; }
.co-modal-body .form-row { margin: 0; }
.co-modal-sub { font-size: .8rem; color: var(--muted); line-height: 1.45; margin: 0; }
.co-modal-sub svg { vertical-align: -2px; }
.co-modal-total { display: flex; align-items: center; justify-content: space-between; font-size: .84rem; font-weight: 650; color: var(--muted); background: var(--surface-2); border: 1px solid var(--line-2); border-radius: var(--r-sm); padding: 10px 13px; }
.co-modal-total b { font-size: 1.05rem; font-weight: 800; color: var(--ink); }
.co-modal-foot { display: flex; align-items: center; justify-content: flex-end; gap: 9px; padding: 13px 18px; border-top: 1px solid var(--line-2); }

/* ---- portal: proofs-for-review tile + strip ---- */
.pv-card-btn { cursor: pointer; text-align: left; font: inherit; transition: box-shadow .14s, transform .14s, border-color .14s; }
.pv-card-btn:hover { box-shadow: var(--sh-1); transform: translateY(-1px); border-color: var(--pv-accent); }
.pv-proofs-sec { padding: 4px 20px 16px; background: var(--surface); }
.pv-sec-h { display: flex; align-items: center; gap: 7px; font-size: .72rem; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; margin-bottom: 11px; }
.pv-proof-row { display: grid; grid-template-columns: repeat(auto-fill, minmax(184px, 1fr)); gap: 11px; }

/* ---- Client portal Action Center — "what needs you" ---- */
.pv-actions { padding: 16px 20px 4px; background: var(--surface); }
.pv-actions .count-pill.urgent { color: var(--neg); background: var(--neg-bg); }
.pv-action-list { display: flex; flex-direction: column; gap: 8px; }
.pv-action { display: flex; align-items: center; gap: 12px; width: 100%; text-align: left; font: inherit; cursor: pointer;
  padding: 13px 14px; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--surface);
  transition: box-shadow .14s, transform .14s, border-color .14s; }
.pv-action:hover { box-shadow: var(--sh-1); transform: translateY(-1px); border-color: var(--pv-accent); }
.pv-action.urgent { border-color: color-mix(in srgb, var(--neg) 34%, var(--line)); background: color-mix(in srgb, var(--neg) 5%, var(--surface)); }
.pv-action-ico { flex: none; width: 34px; height: 34px; border-radius: 9px; display: grid; place-items: center;
  background: color-mix(in srgb, var(--pv-accent) 13%, var(--surface)); color: var(--pv-accent); }
.pv-action.urgent .pv-action-ico { background: var(--neg-bg); color: var(--neg); }
.pv-action-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.pv-action-body b { font-size: .9rem; color: var(--ink); font-weight: 650; }
.pv-action-body span { font-size: .78rem; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pv-action-go { flex: none; display: inline-flex; align-items: center; gap: 4px; font-size: .76rem; font-weight: 700;
  color: var(--pv-accent); padding: 5px 9px; border-radius: var(--pill); background: color-mix(in srgb, var(--pv-accent) 11%, var(--surface)); }
.pv-action.urgent .pv-action-go { color: var(--neg); background: var(--neg-bg); }
.pv-actions-clear { display: flex; align-items: center; gap: 9px; margin: 16px 20px 4px; padding: 13px 15px;
  border: 1px solid var(--pos); border-radius: var(--r-sm); background: var(--pos-bg); color: var(--pos); font-size: .84rem; font-weight: 600; }
.pv-actions-clear svg { flex: none; }

/* ---- Client pay sheet (portalPayModal) — simulated checkout ---- */
.pay-now { display: flex; flex-direction: column; gap: 15px; }
.pn-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.pn-lbl { font-size: .68rem; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; margin-bottom: 4px; }
.pn-amt { font-size: 1.7rem; font-weight: 700; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.pn-items { width: 100%; border-collapse: collapse; font-size: .85rem; }
.pn-items td { padding: 8px 0; border-bottom: 1px solid var(--line); vertical-align: top; }
.pn-items tbody tr:last-child td { border-bottom: 1px solid var(--line-2); }
.pn-items .pn-q { color: var(--muted); text-align: right; white-space: nowrap; padding-right: 14px; font-variant-numeric: tabular-nums; }
.pn-items .pn-r { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.pn-items tfoot td { padding: 7px 0; border: none; }
.pn-items .pn-paid td { color: var(--muted); }
.pn-items .pn-total td { font-weight: 700; font-size: .96rem; padding-top: 9px; }
.pn-method { padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--surface-2); }
.pn-card { display: inline-flex; align-items: center; gap: 8px; font-size: .88rem; font-weight: 600; color: var(--ink); }
.pn-card svg { color: var(--ink-2); }
.pn-card.muted { color: var(--muted); font-weight: 500; }
.pn-sim { display: flex; align-items: center; gap: 7px; font-size: .76rem; color: var(--muted); }
.pn-sim svg { flex: none; color: var(--pos); }

/* ---- Notifications panel (topbar bell) ---- */
.ntf-panel { margin: -4px -4px 0; }
.ntf-list { display: flex; flex-direction: column; }
.ntf-row { display: flex; align-items: flex-start; gap: 12px; width: 100%; text-align: left; font: inherit; cursor: pointer;
  padding: 13px 14px; border: none; border-bottom: 1px solid var(--line); background: var(--surface); transition: background .12s; }
.ntf-row:last-child { border-bottom: none; }
.ntf-row:hover { background: var(--surface-2); }
.ntf-row.unread { background: color-mix(in srgb, var(--brand-500) 6%, var(--surface)); }
.ntf-row.unread:hover { background: color-mix(in srgb, var(--brand-500) 10%, var(--surface)); }
.ntf-ico { flex: none; width: 32px; height: 32px; border-radius: 9px; display: grid; place-items: center; margin-top: 1px;
  background: var(--brand-50); color: var(--brand-600); }
.ntf-row.unread .ntf-ico { background: var(--brand-100, var(--brand-50)); }
.ntf-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.ntf-body b { font-size: .88rem; font-weight: 650; color: var(--ink); display: flex; align-items: center; gap: 7px; }
.ntf-row.unread .ntf-body b::after { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--brand-500); flex: none; }
.ntf-text { font-size: .8rem; color: var(--ink-2); line-height: 1.35; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.ntf-meta { font-size: .72rem; color: var(--muted); margin-top: 2px; }
.ntf-go { flex: none; color: var(--faint); align-self: center; }
.ntf-row:hover .ntf-go { color: var(--brand-500); }
.ntf-empty { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 36px 20px; text-align: center; }
.ntf-empty svg { color: var(--pos); margin-bottom: 2px; }
.ntf-empty b { font-size: .95rem; color: var(--ink); }
.ntf-empty span { font-size: .82rem; color: var(--muted); }

/* ---- Gallery / multi-file proofing ---- */
/* card: 2x2 montage + image-count badge */
.pc-thumb.gallery { background: #14161b; }
.pc-montage { position: absolute; inset: 0; display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; gap: 2px; }
.pc-montage span { background-size: cover; background-position: center; background-color: var(--surface-2); }
.pc-montage span:empty { background: linear-gradient(135deg, #232a31, #39505b); }
.pc-gcount { position: absolute; left: 8px; bottom: 8px; display: inline-flex; align-items: center; gap: 4px; font-size: .64rem; font-weight: 700; color: #fff; background: rgba(0,0,0,.5); border-radius: var(--pill); padding: 2px 8px; letter-spacing: .02em; }

/* galbar (gallery selection standing) — reuses .pd-revbar tones */
.pd-galbar.final { background: var(--pos-bg); border-bottom-color: color-mix(in srgb, var(--pos) 24%, var(--line)); }
.pd-galbar-stat { display: inline-flex; align-items: center; gap: 4px; font-size: .72rem; font-weight: 700; color: var(--muted); background: var(--surface); border: 1px solid var(--line-2); border-radius: var(--pill); padding: 2px 9px; cursor: pointer; margin-left: auto; }
.pd-galbar .pd-rev-flag.pos { color: var(--pos); background: var(--pos-bg); }
.pd-galbar-stat + .pd-rev-flag { margin-left: 8px; }

/* grid (contact sheet) */
.pd-gallery { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.pd-galfilters { display: flex; gap: 7px; flex-wrap: wrap; padding: 12px 16px; border-bottom: 1px solid rgba(255,255,255,.08); flex: none; overflow-x: auto; }
.pd-galf { display: inline-flex; align-items: center; gap: 6px; font: inherit; font-size: .76rem; font-weight: 650; color: #c4ccd4; background: rgba(255,255,255,.06); border: 1px solid transparent; border-radius: var(--pill); padding: 5px 11px; cursor: pointer; white-space: nowrap; transition: background .12s, color .12s, border-color .12s; }
.pd-galf:hover { background: rgba(255,255,255,.12); }
.pd-galf.on { background: #fff; color: #16181d; }
.pd-galf-n { font-size: .68rem; font-weight: 800; opacity: .7; font-variant-numeric: tabular-nums; }
.pd-grid { flex: 1; min-height: 0; overflow-y: auto; padding: 16px; display: grid; grid-template-columns: repeat(auto-fill, minmax(168px, 1fr)); gap: 13px; align-content: start; }
.pd-gtile { position: relative; display: flex; flex-direction: column; gap: 6px; cursor: pointer; margin: 0; }
.pd-gthumb { position: relative; aspect-ratio: 4 / 3; border-radius: 9px; overflow: hidden; background-size: cover; background-position: center; background-color: #232a31; border: 2px solid transparent; transition: border-color .14s, transform .14s, box-shadow .14s; }
.pd-gtile:hover .pd-gthumb { transform: translateY(-2px); box-shadow: 0 6px 18px rgba(0,0,0,.4); }
.pd-gtile.sel .pd-gthumb { border-color: var(--brand-400, #6ea8fe); box-shadow: 0 0 0 2px color-mix(in srgb, var(--brand-500) 50%, transparent); }
.pd-gfav, .pd-gsel { position: absolute; top: 7px; width: 27px; height: 27px; border-radius: 50%; display: grid; place-items: center; cursor: pointer; border: none; color: #fff; background: rgba(0,0,0,.46); backdrop-filter: blur(2px); transition: background .12s, color .12s, transform .12s; }
.pd-gfav { left: 7px; }
.pd-gsel { right: 7px; background: rgba(0,0,0,.36); box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.85); }
.pd-gfav:hover, .pd-gsel:hover { transform: scale(1.08); }
.pd-gfav.on { background: #fff; color: #e0556e; }
.pd-gfav.on svg { fill: #e0556e; }
.pd-gsel.on { background: var(--brand-500, #3b82f6); box-shadow: inset 0 0 0 1.5px var(--brand-500, #3b82f6); }
.pd-gstat { position: absolute; left: 7px; bottom: 7px; display: inline-flex; align-items: center; gap: 4px; font-size: .64rem; font-weight: 700; color: #fff; background: rgba(0,0,0,.55); border-radius: var(--pill); padding: 2px 7px; }
.pd-gstat.tone-pos { color: #7ee0a8; } .pd-gstat.tone-gold { color: #f1c878; } .pd-gstat.tone-neg { color: #f0928c; }
.pd-gcmt { position: absolute; right: 7px; bottom: 7px; display: inline-flex; align-items: center; gap: 3px; font-size: .64rem; font-weight: 700; color: #fff; background: rgba(0,0,0,.55); border-radius: var(--pill); padding: 2px 7px; }
.pd-gname { font-size: .76rem; font-weight: 600; color: #d6dde3; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding: 0 2px; }
.pd-grid-empty { flex: 1; color: #aab3bc; }
.pd-grid-empty svg { color: #6b7681; }

/* lightbox (single image open) */
.pd-galopen { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.pd-galopen-bar { display: flex; align-items: center; gap: 12px; padding: 11px 16px; border-bottom: 1px solid rgba(255,255,255,.08); flex: none; }
.pd-gback { display: inline-flex; align-items: center; gap: 6px; font: inherit; font-size: .8rem; font-weight: 650; color: #d6dde3; background: rgba(255,255,255,.07); border: none; border-radius: var(--pill); padding: 6px 12px; cursor: pointer; }
.pd-gback:hover { background: rgba(255,255,255,.14); }
.pd-galopen-name { flex: 1; min-width: 0; color: #fff; font-size: .92rem; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pd-galopen-idx { font-size: .76rem; font-weight: 650; color: #99a3ad; font-variant-numeric: tabular-nums; flex: none; }
.pd-galstage { flex: 1; min-height: 0; position: relative; display: grid; place-items: center; padding: 20px; }
.pd-galart { max-width: 100%; max-height: 100%; border-radius: 8px; box-shadow: 0 10px 34px rgba(0,0,0,.5); object-fit: contain; }
.pd-gnav { position: absolute; top: 50%; transform: translateY(-50%); width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; cursor: pointer; border: none; color: #fff; background: rgba(0,0,0,.5); backdrop-filter: blur(2px); transition: background .12s; }
.pd-gnav:hover { background: rgba(0,0,0,.74); }
.pd-gnav.prev { left: 14px; } .pd-gnav.prev svg { transform: rotate(180deg); }
.pd-gnav.next { right: 14px; }
.pd-galopen-acts { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; padding: 12px 16px; border-top: 1px solid rgba(255,255,255,.08); flex: none; }
.pd-goact { display: inline-flex; align-items: center; gap: 6px; font: inherit; font-size: .8rem; font-weight: 650; color: #d6dde3; background: rgba(255,255,255,.07); border: 1px solid transparent; border-radius: var(--pill); padding: 7px 13px; cursor: pointer; transition: background .12s, color .12s; }
.pd-goact:hover { background: rgba(255,255,255,.14); }
.pd-goact.on { background: #fff; color: #16181d; }
.pd-goact.on svg { fill: #e0556e; color: #e0556e; }
.pd-goact.sel.on { background: var(--brand-500, #3b82f6); color: #fff; }
.pd-goact.sel.on svg { fill: none; color: #fff; }
.pd-gostatus { display: inline-flex; gap: 7px; margin-left: auto; }
.pd-gostat-b { display: inline-flex; align-items: center; gap: 5px; font: inherit; font-size: .76rem; font-weight: 650; color: #c4ccd4; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.14); border-radius: var(--pill); padding: 6px 11px; cursor: pointer; transition: background .12s, color .12s, border-color .12s; }
.pd-gostat-b:hover { background: rgba(255,255,255,.13); }
.pd-gostat-b.tone-pos.on { background: var(--pos); border-color: var(--pos); color: #fff; }
.pd-gostat-b.tone-gold.on { background: var(--gold-500, #d99a2b); border-color: var(--gold-500, #d99a2b); color: #fff; }
.pd-gostat-b.tone-neg.on { background: var(--neg); border-color: var(--neg); color: #fff; }
.pd-gostat-tag { margin-left: auto; display: inline-flex; align-items: center; gap: 5px; font-size: .76rem; font-weight: 700; padding: 5px 11px; border-radius: var(--pill); background: rgba(255,255,255,.08); }
.pd-gostat-tag.tone-pos { color: #7ee0a8; } .pd-gostat-tag.tone-gold { color: #f1c878; } .pd-gostat-tag.tone-neg { color: #f0928c; }

/* comments-tab gallery context banner */
.pd-gctx { display: flex; align-items: center; gap: 7px; }
.pd-gctx b { font-weight: 700; }
.pd-gctx .linklike { margin-left: auto; }
.pd-gctx.subtle { color: var(--muted); background: var(--surface-2); border-color: var(--line-2); font-weight: 600; }
.pd-foot-note.gold { color: var(--gold-700); }

/* add-images modal (drop zone + staged chips) */
.gal-drop { display: flex; flex-direction: column; align-items: center; gap: 5px; padding: 26px 16px; text-align: center; cursor: pointer;
  border: 1.5px dashed var(--line); border-radius: var(--r-md, 12px); background: var(--surface-2); color: var(--muted); transition: border-color .14s, background .14s; }
.gal-drop:hover, .gal-drop.over { border-color: var(--brand-400, var(--brand-500)); background: var(--brand-50); color: var(--brand-700); }
.gal-drop svg { color: var(--brand-500); }
.gal-drop b { font-size: .9rem; color: var(--ink); }
.gal-drop span { font-size: .76rem; }
.gal-staged { display: flex; flex-wrap: wrap; gap: 7px; }
.gal-chip { display: inline-flex; align-items: center; gap: 6px; font-size: .76rem; font-weight: 600; color: var(--ink); background: var(--surface-2); border: 1px solid var(--line-2); border-radius: var(--pill); padding: 3px 5px 3px 4px; max-width: 100%; }
.gal-chip-th { width: 22px; height: 22px; border-radius: 5px; flex: none; background-size: cover; background-position: center; background-color: var(--brand-100); }
.gal-chip button { display: inline-flex; border: none; background: none; color: var(--muted); cursor: pointer; padding: 0 2px; }
.gal-chip button:hover { color: var(--neg); }
.gal-quick { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: .78rem; color: var(--muted); }
.gal-quick svg { color: var(--muted); }

/* ----- gallery management (owner manage mode — dark drawer context) ----- */
.pd-gmbar { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; padding: 10px 16px; border-bottom: 1px solid rgba(255,255,255,.08); flex: none; }
.pd-gmbar.on { background: rgba(110,168,254,.07); }
.pd-gmtoggle { display: inline-flex; align-items: center; gap: 6px; font: inherit; font-size: .78rem; font-weight: 700; color: #d6dde3; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.16); border-radius: var(--pill); padding: 6px 13px; cursor: pointer; transition: background .12s, color .12s; }
.pd-gmtoggle:hover { background: rgba(255,255,255,.16); }
.pd-gmtoggle.on { background: var(--brand-500, #3b82f6); border-color: var(--brand-500, #3b82f6); color: #fff; }
.pd-gmbar-meta { font-size: .74rem; color: #99a3ad; font-weight: 600; }
.pd-gmbulk { display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.pd-gmbulk b { font-size: .74rem; color: #fff; font-weight: 800; }
.pd-gm2 { display: inline-flex; align-items: center; gap: 5px; font: inherit; font-size: .73rem; font-weight: 650; color: #c4ccd4; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.14); border-radius: var(--pill); padding: 5px 10px; cursor: pointer; white-space: nowrap; transition: background .12s, color .12s, border-color .12s; }
.pd-gm2:hover { background: rgba(255,255,255,.14); }
.pd-gm2.on { background: #fff; color: #16181d; border-color: #fff; }
.pd-gm2.quiet { color: #99a3ad; border-color: transparent; }
.pd-gm2.tone-pos { color: #7ee0a8; } .pd-gm2.tone-gold { color: #f1c878; } .pd-gm2.tone-neg { color: #f0928c; }
/* manage tile affordances */
.pd-gtile.manage { cursor: default; }
.pd-gtile.manage .pd-gthumb { cursor: pointer; }
.pd-gbulk { position: absolute; top: 7px; left: 7px; width: 27px; height: 27px; border-radius: 50%; display: grid; place-items: center; cursor: pointer; border: none; color: #fff; background: rgba(0,0,0,.42); box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.85); backdrop-filter: blur(2px); transition: background .12s, transform .12s; z-index: 2; }
.pd-gbulk:hover { transform: scale(1.08); }
.pd-gbulk.on { background: var(--brand-500, #3b82f6); box-shadow: inset 0 0 0 1.5px var(--brand-500, #3b82f6); }
.pd-gtile.picked .pd-gthumb { border-color: var(--brand-400, #6ea8fe); box-shadow: 0 0 0 2px color-mix(in srgb, var(--brand-500) 55%, transparent); }
.pd-gtile.arch .pd-gthumb { filter: grayscale(.7) brightness(.7); border-color: rgba(255,255,255,.12); }
.pd-garchtag { position: absolute; left: 7px; bottom: 7px; display: inline-flex; align-items: center; gap: 4px; font-size: .62rem; font-weight: 800; color: #fff; background: rgba(0,0,0,.62); border-radius: var(--pill); padding: 2px 7px; letter-spacing: .02em; }
.pd-gname-n { margin-left: 6px; color: #99a3ad; font-weight: 700; font-size: .68rem; }
.pd-grename { width: 100%; font: inherit; font-size: .76rem; font-weight: 600; color: #16181d; background: #fff; border: 1px solid var(--brand-400, #6ea8fe); border-radius: 6px; padding: 3px 7px; }
.pd-gmacts { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.pd-gm { display: inline-flex; align-items: center; gap: 4px; font: inherit; font-size: .7rem; font-weight: 650; color: #c4ccd4; background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.12); border-radius: 7px; padding: 4px 7px; cursor: pointer; transition: background .12s, color .12s, border-color .12s; }
.pd-gm:hover { background: rgba(255,255,255,.16); color: #fff; }
.pd-gm.danger:hover { background: var(--neg); border-color: var(--neg); color: #fff; }
.pd-gm.archiveact:hover { background: var(--gold-500, #d99a2b); border-color: var(--gold-500, #d99a2b); color: #fff; }
/* archived section */
.pd-garch { padding: 4px 16px 16px; }
.pd-garch-h { display: flex; align-items: center; gap: 7px; font-size: .76rem; font-weight: 700; color: #c4ccd4; padding: 10px 0; border-top: 1px solid rgba(255,255,255,.08); }
.pd-garch-h .muted { font-weight: 600; color: #818b95; }
.pd-grid.arch { padding: 4px 0 0; }

/* ----- gallery replace + settings modals (body-level, theme context) ----- */
.gal-drop.sm { padding: 16px; }
.gal-replace-cmp { display: flex; align-items: center; justify-content: center; gap: 14px; }
.gal-rc { display: flex; flex-direction: column; align-items: center; gap: 5px; }
.gal-rc-l { font-size: .7rem; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }
.gal-rc-th { width: 108px; height: 78px; border-radius: 9px; background-size: cover; background-position: center; background-color: var(--surface-2); border: 1px solid var(--line-2); display: grid; place-items: center; color: var(--muted); }
.gal-rc-th.empty { border-style: dashed; }
.gal-rc-arrow { color: var(--muted); }
.co-modal.wide { max-width: 560px; }
.gal-manage-body { display: flex; flex-direction: column; gap: 14px; }
.gm-sec { border: 1px solid var(--line-2); border-radius: var(--r-md, 12px); padding: 12px 13px; background: var(--surface-2); }
.gm-sec-h { display: flex; align-items: center; gap: 7px; font-size: .82rem; font-weight: 750; color: var(--ink); margin-bottom: 9px; }
.gm-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 11px; }
.gm-check { display: flex; align-items: center; gap: 8px; font-size: .82rem; color: var(--ink); cursor: pointer; margin-top: 9px; }
.gm-check input { width: 15px; height: 15px; accent-color: var(--brand-500); cursor: pointer; }
.gm-status { margin-top: 10px; font-size: .78rem; }
.gm-actsrow { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 10px; }
.pd-final-tag.sm { font-size: .76rem; padding: 4px 9px; }
@media (max-width: 560px) { .gm-grid2 { grid-template-columns: 1fr; } }

@media (max-width: 860px) {
  .proof-drawer { width: 100vw; height: 100vh; border-radius: 0; }
  .pd-main { flex-direction: column; }
  .pd-stage { flex: none; height: 40vh; }
  .pd-rail { width: 100%; flex: 1; border-left: none; border-top: 1px solid var(--line-2); }
  .pd-foot-sec span { display: none; }
  .pd-grid { grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 9px; padding: 11px; }
  .pd-gostatus { margin-left: 0; width: 100%; }
  .pd-tabs { overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
  .pd-tabs::-webkit-scrollbar { display: none; }
  .pd-tab { white-space: nowrap; }
  .pd-seg { flex-wrap: nowrap; overflow-x: auto; }
  .pd-seg-b { flex: 0 0 auto; }
  .cmp-grid { grid-template-columns: 1fr; }
  .cmp-vs { transform: rotate(90deg); justify-self: center; }
  .pd-guest, .pd-rv { flex-wrap: wrap; }
}

/* ============================================================
   STRATEGY / CONSULTING DELIVERABLE (additive proof type)
   Stage lives on the dark .pd-stage backdrop; rail/footer pieces
   use the light surface tokens like the rest of the drawer.
   ============================================================ */
.strat-stage { flex: 1; min-height: 0; overflow-y: auto; padding: 18px; display: flex; flex-direction: column; gap: 14px; color: #d7dce2; }
.strat-src { display: flex; align-items: center; gap: 12px; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.1); border-radius: 12px; padding: 13px 15px; }
.strat-src-ic { display: inline-grid; place-items: center; width: 38px; height: 38px; border-radius: 10px; background: rgba(122,99,255,.18); color: #b9aaff; flex: none; }
.strat-src-b { display: flex; flex-direction: column; gap: 3px; min-width: 0; flex: 1; }
.strat-src-k { font-size: .68rem; text-transform: uppercase; letter-spacing: .05em; color: #99a3ad; font-weight: 700; }
.strat-src-open { display: inline-flex; align-items: center; gap: 7px; background: none; border: none; color: #cdd4dc; font-weight: 700; font-size: .92rem; cursor: pointer; padding: 0; text-align: left; min-width: 0; }
.strat-src-open span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.strat-src-open:hover { color: #fff; text-decoration: underline; }
.strat-src-none { font-size: .84rem; color: #99a3ad; display: inline-flex; align-items: center; gap: 6px; }
.strat-flag { display: flex; align-items: center; gap: 11px; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.12); border-left: 3px solid #b9aaff; border-radius: 10px; padding: 11px 14px; font-size: .86rem; }
.strat-flag.warn { border-left-color: var(--gold-500, #e0a93b); background: rgba(224,169,59,.1); }
.strat-flag > div { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
.strat-flag b { font-weight: 700; color: #eef1f4; }
.strat-flag span { color: #aab3bc; }
.strat-flag svg { color: #cbb6ff; flex: none; }
.strat-flag.warn svg { color: var(--gold-300, #f0c45a); }
.strat-flag .btn { margin-left: auto; flex: none; }
.strat-secs { display: flex; flex-direction: column; gap: 9px; }
.strat-secs-h { display: flex; align-items: center; gap: 7px; font-size: .72rem; text-transform: uppercase; letter-spacing: .05em; color: #99a3ad; font-weight: 700; }
.strat-secs-h .muted { color: #6b7681; text-transform: none; letter-spacing: 0; }
.strat-secs-add { margin-left: auto; display: inline-flex; align-items: center; gap: 5px; background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.12); color: #cdd4dc; border-radius: var(--pill); padding: 3px 10px; font-size: .72rem; font-weight: 700; cursor: pointer; }
.strat-secs-add:hover { background: rgba(255,255,255,.13); color: #fff; }
.strat-sec { background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.1); border-radius: 10px; padding: 12px 14px; display: flex; flex-direction: column; gap: 8px; }
.strat-sec.active { border-color: #8b78ff; box-shadow: 0 0 0 1px #8b78ff; background: rgba(139,120,255,.08); }
.strat-sec.has-open { border-left: 3px solid var(--gold-500, #e0a93b); }
.strat-sec-h { display: flex; align-items: center; gap: 9px; }
.strat-sec-name { font-weight: 700; font-size: .92rem; color: #eef1f4; flex: 1; }
.strat-sec-n { display: inline-flex; align-items: center; gap: 4px; font-size: .72rem; color: #aab3bc; font-weight: 600; flex: none; }
.strat-sec-mng { display: inline-flex; gap: 2px; flex: none; }
.strat-sec-mb { display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 7px; background: none; border: none; color: #99a3ad; cursor: pointer; }
.strat-sec-mb:hover { background: rgba(255,255,255,.1); color: #fff; }
.strat-sec-mb.danger:hover { background: rgba(255,90,90,.16); color: #ff8a8a; }
.strat-sec-body-tx { font-size: .85rem; color: #c2c9d1; line-height: 1.5; margin: 0; }
.strat-sec-cmt { align-self: flex-start; display: inline-flex; align-items: center; gap: 6px; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.12); color: #cdd4dc; border-radius: var(--pill); padding: 4px 12px; font-size: .76rem; font-weight: 700; cursor: pointer; }
.strat-sec-cmt:hover { background: rgba(255,255,255,.13); color: #fff; }
.strat-sec-cmt.on { background: #6f5cff; border-color: #6f5cff; color: #fff; }
.strat-sec-cmt-ro { font-size: .74rem; color: #99a3ad; display: inline-flex; align-items: center; gap: 5px; }
.strat-sec.editing { gap: 9px; }
.strat-sec-label, .strat-sec-body { width: 100%; }
.strat-sec-body { min-height: 56px; resize: vertical; }
.strat-sec-editacts { display: flex; gap: 8px; }
.strat-recap { background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.1); border-radius: 12px; padding: 14px 16px; display: flex; flex-direction: column; gap: 11px; }
.strat-recap.empty { gap: 9px; }
.strat-recap-h { display: flex; align-items: center; gap: 8px; font-size: .8rem; font-weight: 700; color: #eef1f4; flex-wrap: wrap; }
.strat-recap-h .btn { margin-left: auto; }
.strat-recap .muted { color: #99a3ad; font-size: .85rem; }
.strat-recap-sum { font-size: .9rem; line-height: 1.55; color: #d7dce2; margin: 0; }
.strat-recap-corr { font-size: .84rem; color: var(--gold-300, #f0c45a); background: rgba(224,169,59,.1); border: 1px solid rgba(224,169,59,.25); border-radius: 8px; padding: 8px 11px; display: flex; gap: 7px; align-items: flex-start; }
.strat-recap-grp { display: flex; flex-direction: column; gap: 5px; }
.strat-recap-k { font-size: .68rem; text-transform: uppercase; letter-spacing: .05em; color: #99a3ad; font-weight: 700; display: inline-flex; align-items: center; gap: 5px; }
.strat-recap-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.strat-recap-list li { display: flex; gap: 7px; align-items: flex-start; font-size: .86rem; color: #cdd4dc; line-height: 1.45; }
.strat-recap-list svg { flex: none; margin-top: 3px; color: #8b94a0; }
.strat-ai { display: flex; align-items: center; gap: 9px; padding: 5px 0; }
.strat-ai-tick { display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; border: 1.5px solid rgba(255,255,255,.22); background: none; color: transparent; cursor: pointer; flex: none; }
.strat-ai-tick.on { background: var(--pos, #38b27a); border-color: var(--pos, #38b27a); color: #fff; }
.strat-ai-tick[disabled] { cursor: default; opacity: .45; }
.strat-ai-tx { flex: 1; font-size: .86rem; color: #d7dce2; display: flex; flex-direction: column; min-width: 0; }
.strat-ai-tx small { color: #8b94a0; font-size: .72rem; }
.strat-ai.done .strat-ai-tx { color: #8b94a0; text-decoration: line-through; }
.strat-ai-who { font-size: .64rem; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; padding: 2px 8px; border-radius: var(--pill); flex: none; }
.strat-ai-who.client { background: rgba(122,99,255,.18); color: #b9aaff; }
.strat-ai-who.team { background: rgba(255,255,255,.08); color: #aab3bc; }
.strat-recap-conf { font-size: .8rem; color: var(--pos, #4cc38a); display: flex; align-items: center; gap: 6px; }
.strat-recap-acts { display: flex; gap: 9px; flex-wrap: wrap; padding-top: 3px; }
.pd-stratbar .pd-rev-co { margin-left: auto; }
/* comment section chip (rail — light surface) */
.pcm-sec { display: inline-flex; align-items: center; gap: 4px; font-size: .68rem; font-weight: 700; color: var(--brand-700, #5a4ad1); background: var(--brand-50, #f0eefe); border-radius: var(--pill); padding: 1px 7px; }
/* details: decision records + review areas (rail — light surface) */
.pd-decisions { display: flex; flex-direction: column; gap: 9px; }
.pd-decision { display: flex; gap: 10px; align-items: flex-start; background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r-sm); padding: 10px 12px; }
.pd-dec-ic { display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: 8px; background: var(--pos-bg); color: var(--pos); flex: none; }
.pd-dec-b { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.pd-dec-b b { font-size: .88rem; }
.pd-dec-what { font-size: .82rem; color: var(--ink-2); }
.pd-dec-meta { font-size: .72rem; color: var(--muted); font-variant-numeric: tabular-nums; }
.pd-strat-seclist { display: flex; flex-direction: column; gap: 0; }
.pd-strat-secitem { display: flex; justify-content: space-between; gap: 10px; font-size: .85rem; padding: 6px 0; border-bottom: 1px solid var(--line); }
.pd-strat-secitem:last-child { border-bottom: none; }
.pd-strat-srcrow { display: flex; align-items: center; gap: 7px; font-size: .86rem; color: var(--ink-2); }
/* footer client decision cluster */
.pd-strat-decide { display: flex; gap: 8px; flex-wrap: wrap; }

/* ============================================================
   PAYMENTS & RECEIPTS
   ============================================================ */
.pos-num { color: var(--pos); }
.btn-link { background: none; border: none; color: var(--brand-600); font-weight: 700; cursor: pointer; padding: 2px 5px; border-radius: 6px; display: inline-flex; align-items: center; gap: 5px; font-size: .82rem; }
.btn-link:hover { background: var(--brand-50); }
.btn-link.sm { font-size: .72rem; padding: 1px 4px; }

/* client-profile payment summary strip */
.pay-sum { display: grid; grid-template-columns: repeat(auto-fit, minmax(118px, 1fr)); gap: 4px 14px; padding: 14px 16px; border-bottom: 1px solid var(--line); background: var(--surface-2); }
.pay-sum > div { display: flex; flex-direction: column; gap: 3px; }
.pay-sum span { font-size: .68rem; color: var(--muted); text-transform: uppercase; letter-spacing: .03em; font-weight: 700; }
.pay-sum b { font-size: 1.02rem; font-variant-numeric: tabular-nums; }

/* shared ledger table (client profile, project, portal) */
.pay-tbl tbody tr { cursor: pointer; transition: background .12s; }
.pay-tbl tbody tr:hover { background: var(--brand-50); }
.pay-tbl tbody tr:focus-visible { outline: 2px solid var(--brand-500); outline-offset: -2px; }
.pay-tbl .rc-method { color: var(--ink-2); font-size: .85rem; }
.ir-act.ir-paid { color: var(--pos); }
.pv-pay-tbl { background: var(--surface); border-radius: var(--r-sm); overflow: hidden; border: 1px solid var(--line); }

/* paid hosted CTA */
.ho-paybtn.is-paid { background: var(--pos-bg); color: var(--pos); cursor: pointer; border: 1px solid color-mix(in srgb, var(--pos) 32%, transparent); box-shadow: none; }
.ho-paybtn.is-paid:hover { background: color-mix(in srgb, var(--pos) 20%, var(--surface)); }
.ho-paid-ic { display: inline-flex; vertical-align: middle; }
.ho-paid-link { text-decoration: underline; opacity: .85; }

/* the receipt / credit-note document */
.receipt-doc { position: relative; overflow: hidden; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 26px 28px; max-width: 620px; margin: 0 auto; font-size: .9rem; }
.receipt-doc > * { position: relative; z-index: 1; }
.rc-stamp { position: absolute; z-index: 0; top: 46%; left: 50%; transform: translate(-50%, -50%) rotate(-17deg); border: 4px solid var(--pos); color: var(--pos); font-weight: 800; font-size: 2.7rem; letter-spacing: .14em; padding: 6px 26px; border-radius: 12px; opacity: .12; pointer-events: none; white-space: nowrap; }
.receipt-doc.is-credit .rc-stamp { border-color: var(--neg); color: var(--neg); }
.rc-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 14px; padding-bottom: 18px; border-bottom: 1px solid var(--line); }
.rc-brand { display: flex; gap: 11px; align-items: center; }
.rc-logo { width: 42px; height: 42px; border-radius: 11px; background: var(--brand-600); color: #fff; font-weight: 800; display: grid; place-items: center; font-size: .95rem; flex: none; }
.rc-studio { font-weight: 800; font-size: 1.05rem; }
.rc-tag { font-size: .76rem; }
.rc-doc-meta { text-align: right; display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
.rc-doc-t { font-size: .7rem; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); font-weight: 700; }
.rc-no { font-weight: 800; font-size: 1rem; font-variant-numeric: tabular-nums; }
.rc-parties { display: flex; justify-content: space-between; gap: 18px; padding: 16px 0; }
.rc-lbl { font-size: .66rem; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); font-weight: 700; }
.rc-party { font-weight: 700; font-size: .98rem; margin-top: 2px; }
.rc-card { font-size: .78rem; margin-top: 3px; display: inline-flex; align-items: center; gap: 5px; }
.rc-paymeta { text-align: right; display: flex; flex-direction: column; gap: 5px; font-size: .85rem; }
.rc-paymeta .rc-lbl { display: inline; margin-right: 6px; }
.rc-items { width: 100%; border-collapse: collapse; margin: 6px 0 4px; }
.rc-items th { text-align: left; font-size: .66rem; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); padding: 8px 0; border-bottom: 1px solid var(--line); }
.rc-items td { padding: 9px 0; border-bottom: 1px solid var(--line); }
.rc-items .rc-q, .rc-items th.rc-q { text-align: center; width: 60px; }
.rc-items .rc-r, .rc-items th.rc-r { text-align: right; width: 112px; font-variant-numeric: tabular-nums; }
.rc-totals { margin: 14px 0; display: flex; flex-direction: column; gap: 6px; }
.rc-tline { display: flex; justify-content: space-between; font-size: .9rem; }
.rc-tline.muted { color: var(--muted); }
.rc-amt { font-weight: 800; font-size: 1.12rem; padding-top: 10px; border-top: 2px solid var(--line-2); margin-top: 4px; color: var(--pos); }
.rc-amt.neg { color: var(--neg); }
.rc-bal { font-size: .85rem; color: var(--muted); }
.rc-bal.pos { color: var(--pos); }
.rc-pay-detail { background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r-sm); padding: 14px 16px; margin-top: 4px; }
.rc-pd-h { display: flex; align-items: center; gap: 7px; font-weight: 700; font-size: .8rem; margin-bottom: 11px; }
.rc-pd-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 18px; }
.rc-pd-grid > div { display: flex; flex-direction: column; gap: 2px; font-size: .88rem; }
.rc-pd-grid code { font-size: .76rem; background: var(--pill); padding: 1px 5px; border-radius: 5px; align-self: flex-start; }
.rc-note { margin-top: 11px; font-size: .82rem; color: var(--ink-2); display: flex; gap: 6px; align-items: center; }
.rc-foot { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--line); font-size: .78rem; color: var(--muted); display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.rc-sim { width: 100%; font-size: .72rem; opacity: .7; margin-top: 2px; }

/* Agency-only refund action + form */
.rc-refund-btn { color: var(--neg); }
.rc-refund-btn:hover { background: color-mix(in srgb, var(--neg) 10%, transparent); }
.refund-form { display: flex; flex-direction: column; gap: 14px; }
.rf-ctx { background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r-sm); padding: 12px 14px; display: flex; flex-direction: column; gap: 7px; }
.rf-ctx-row { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; font-size: .9rem; }
.rf-sim { font-size: .76rem; color: var(--muted); display: flex; gap: 7px; align-items: flex-start; line-height: 1.45; }
.rf-sim svg { flex: none; margin-top: 1px; }

@media (max-width: 620px) {
  .receipt-doc { padding: 20px 18px; }
  .rc-parties { flex-direction: column; }
  .rc-paymeta { text-align: left; }
  .rc-pd-grid { grid-template-columns: 1fr; }
  .rc-stamp { position: static; transform: none; display: inline-block; margin-bottom: 10px; }
  .rc-head { flex-wrap: wrap; }
}

/* ============================================================
   SERVICES & LINE ITEMS LIBRARY
   ============================================================ */
/* --- Toolbar: search box + count chips --- */
.lib-search { display: flex; align-items: center; gap: 7px; padding: 0 11px; border: 1px solid var(--line); border-radius: var(--pill); background: var(--surface); min-width: 190px; }
.lib-search span { display: inline-flex; color: var(--muted); flex: none; }
.lib-search .input { border: none; background: none; box-shadow: none; padding: 8px 0; font-size: .85rem; }
.lib-search .input:focus { box-shadow: none; outline: none; }
.lib-search.grow { flex: 1 1 auto; }
.seg-n { display: inline-grid; place-items: center; min-width: 18px; height: 18px; padding: 0 5px; border-radius: var(--pill); background: color-mix(in srgb, currentColor 18%, transparent); font-size: .7rem; font-weight: 700; }

/* --- Service cards --- */
.svc-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(264px, 1fr)); gap: 14px; }
.svc-card { display: flex; flex-direction: column; gap: 8px; text-align: left; background: var(--surface); border: 1px solid var(--line-2); border-radius: var(--r-lg); padding: 0 0 13px; overflow: hidden; cursor: pointer; font: inherit; transition: border-color .14s, box-shadow .14s, transform .14s; }
.svc-card:hover { border-color: var(--brand-200); box-shadow: var(--sh-1); transform: translateY(-2px); }
.svc-card:focus-visible { outline: 2px solid var(--brand-400); outline-offset: 2px; }
.svc-card.is-arch { opacity: .6; }
.svc-card.is-arch:hover { opacity: 1; }
.svc-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.svc-cat { font-size: .7rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); }
.svc-fav { display: inline-flex; padding: 3px; border-radius: 7px; color: var(--muted); opacity: .5; transition: color .12s, opacity .12s, background .12s; }
.svc-fav:hover { background: var(--surface-2); opacity: 1; }
.svc-fav.on { color: var(--gold); opacity: 1; }
.svc-fav.on svg { fill: currentColor; }
.svc-name { font-size: 1rem; font-weight: 700; color: var(--ink); line-height: 1.3; }
.svc-arch-tag { font-size: .66rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); background: var(--surface-2); border-radius: var(--pill); padding: 2px 7px; vertical-align: middle; }
.svc-price-row { display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px; }
.svc-price { font-size: 1.05rem; font-weight: 800; color: var(--ink); }
.svc-pre { font-size: .76rem; font-weight: 600; color: var(--muted); }
.svc-suffix { font-size: .78rem; color: var(--muted); font-weight: 600; }
.svc-flag { font-size: .66rem; font-weight: 700; color: var(--ink-2); background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--pill); padding: 1px 8px; }
.svc-desc { font-size: .84rem; color: var(--ink-2); line-height: 1.45; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.svc-tags { display: flex; flex-wrap: wrap; gap: 5px; }
.svc-tag { font-size: .72rem; font-weight: 600; color: var(--brand-700); background: var(--brand-50); border-radius: var(--pill); padding: 2px 9px; }
.svc-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: auto; padding-top: 9px; border-top: 1px solid var(--line); }
.svc-used { display: inline-flex; align-items: center; gap: 5px; font-size: .74rem; color: var(--muted); font-weight: 600; }
.svc-acts { display: flex; gap: 2px; }
.svc-act { display: inline-flex; padding: 6px; border-radius: 7px; color: var(--muted); transition: color .12s, background .12s; }
.svc-act:hover { background: var(--surface-2); color: var(--brand-600); }
.svc-act-share { color: var(--brand-500) !important; opacity: 1 !important; }

/* --- Service card thumbnail --- */
.svc-thumb { width: 100%; height: 88px; border-radius: 0; overflow: hidden; flex: none; margin-bottom: 6px; }
.svc-card > .svc-top, .svc-card > .svc-name, .svc-card > .svc-price-row, .svc-card > .svc-desc, .svc-card > .svc-tags, .svc-card > .svc-foot { padding-left: 15px; padding-right: 15px; }
.svc-thumb img { width: 100%; height: 100%; object-fit: cover; }
.svc-thumb.svc-thumb-grad { opacity: .8; }

/* --- Service sharing link row --- */
.svc-share-link-row { display: flex; align-items: center; gap: 8px; background: var(--surface-2); border-radius: var(--r-sm); padding: 8px 12px; margin-top: 8px; flex-wrap: wrap; }
.svc-share-link-row .muted { flex: 1 1 auto; font-size: .81rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* --- Service analytics grid --- */
.svc-an-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 10px; margin-top: 4px; }
.svc-an-card { background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r-sm); padding: 12px; text-align: center; }
.svc-an-card b { display: block; font-size: 1.2rem; font-weight: 800; color: var(--ink); }
.svc-an-card span { font-size: .72rem; color: var(--muted); font-weight: 600; }

/* --- Service media upload row --- */
.svc-media-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 4px; }
.svc-media-slot { display: flex; flex-direction: column; }
.svc-media-preview { width: 100%; height: 96px; border-radius: var(--r-sm); background: var(--surface-2); border: 1px solid var(--line); overflow: hidden; }

/* --- Service category list in settings --- */
.svc-cat-item { cursor: default; }
.svc-cat-drag { color: var(--muted); cursor: grab; flex: none; }

/* --- Public service landing page overlay --- */
.pub-svc-overlay { position: fixed; inset: 0; z-index: 9999; overflow-y: auto; background: var(--canvas); animation: fadeIn .18s ease; }
.pub-svc-back { position: fixed; inset: 0; z-index: -1; }
.pub-svc-page { max-width: 900px; margin: 0 auto; min-height: 100vh; display: flex; flex-direction: column; }
.pub-svc-topbar { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px 24px; border-bottom: 1px solid var(--line-2); background: var(--surface); position: sticky; top: 0; z-index: 10; }
.pub-svc-brand { display: flex; align-items: center; gap: 10px; }
.pub-svc-hero { position: relative; width: 100%; height: 300px; background: var(--brand-500); overflow: hidden; }
.pub-svc-hero.has-img { height: 340px; }
.pub-hero-img { width: 100%; height: 100%; object-fit: cover; opacity: .85; }
.pub-hero-overlay { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: flex-end; padding: 28px 32px; background: linear-gradient(to top, rgba(0,0,0,.6) 0%, transparent 60%); color: #fff; }
.pub-hero-cat { font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .07em; opacity: .85; margin-bottom: 6px; }
.pub-hero-name { font-size: 2rem; font-weight: 800; line-height: 1.2; margin: 0 0 8px; }
.pub-hero-price { display: flex; align-items: baseline; gap: 4px; }
.pub-price { font-size: 1.4rem; font-weight: 800; }
.pub-price-pre, .pub-price-sfx { font-size: .88rem; opacity: .8; }
.pub-svc-body { display: grid; grid-template-columns: 1fr 280px; gap: 32px; padding: 32px 24px; flex: 1; }
.pub-svc-main { display: flex; flex-direction: column; gap: 24px; }
.pub-short-desc { font-size: 1.08rem; color: var(--ink-2); line-height: 1.6; margin: 0; }
.pub-section { display: flex; flex-direction: column; gap: 8px; }
.pub-sec-title { font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); }
.pub-inc-row { display: flex; align-items: center; gap: 10px; font-size: .9rem; color: var(--ink-2); padding: 6px 0; border-bottom: 1px solid var(--line); }
.pub-inc-row:last-child { border-bottom: none; }
.pub-inc-row svg { color: var(--pos); flex: none; }
.pub-inc-row span:first-of-type { flex: 1; }
.pub-inc-amt { font-weight: 700; color: var(--ink); white-space: nowrap; }
.pub-details { background: var(--surface-2); border-radius: var(--r-md); padding: 16px; }
.pub-detail-row { display: flex; gap: 14px; padding: 7px 0; border-bottom: 1px solid var(--line); font-size: .87rem; }
.pub-detail-row:last-child { border-bottom: none; }
.pub-detail-l { font-weight: 700; color: var(--ink); min-width: 120px; flex: none; }
.pub-detail-v { color: var(--ink-2); }
.pub-cta-block { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; margin-top: 8px; }
.pub-cta-btn { padding: 14px 32px; font-size: 1rem; font-weight: 700; background: var(--brand-500); color: #fff; border: none; border-radius: var(--r-md); cursor: pointer; transition: background .14s, transform .1s; }
.pub-cta-btn:hover { background: var(--brand-600); transform: translateY(-1px); }
.pub-exp-note { display: inline-flex; align-items: center; gap: 6px; font-size: .8rem; color: var(--muted); }
.pub-arch-note { font-size: .9rem; color: var(--warn); background: var(--warn-bg, #fef9c3); border-radius: var(--r-sm); padding: 12px 16px; }
.pub-svc-side { display: flex; flex-direction: column; gap: 16px; }
.pub-side-card { background: var(--surface); border: 1px solid var(--line-2); border-radius: var(--r-lg); padding: 20px; }
.pub-side-biz { font-size: 1rem; font-weight: 700; color: var(--ink); }
.pub-contact-row { display: flex; align-items: center; gap: 8px; font-size: .84rem; color: var(--ink-2); margin-top: 8px; }
.pub-contact-row svg { color: var(--muted); flex: none; }
.pub-svc-footer { padding: 24px; border-top: 1px solid var(--line-2); text-align: center; font-size: .78rem; color: var(--muted); }

/* --- Checkout co-item --- */
.pub-co-item { background: var(--surface-2); border-radius: var(--r-sm); padding: 12px 14px; }
.pub-co-price { font-size: .92rem; color: var(--ink-2); }

@media (max-width: 680px) {
  .pub-svc-body { grid-template-columns: 1fr; }
  .pub-svc-side { display: none; }
  .svc-media-row { grid-template-columns: 1fr; }
}

/* --- Service / package editor forms --- */
.svc-form, .pkg-form { display: flex; flex-direction: column; }
.sh-note { font-size: .72rem; font-weight: 600; color: var(--muted); display: inline-flex; align-items: center; gap: 5px; margin-left: 8px; text-transform: none; letter-spacing: 0; }
.sh-note svg { color: var(--muted); }

/* --- Client-specific pricing --- */
.cp-list { display: flex; flex-direction: column; gap: 7px; }
.cp-row { display: flex; align-items: center; gap: 10px; background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r-sm); padding: 8px 10px; }
.cp-client { display: inline-flex; align-items: center; gap: 8px; font-size: .86rem; font-weight: 600; color: var(--ink); flex: 1 1 auto; min-width: 0; }
.cp-vs { display: inline-flex; align-items: center; gap: 6px; font-size: .86rem; color: var(--ink-2); white-space: nowrap; }
.cp-vs svg { color: var(--muted); }
.cp-default { color: var(--muted); text-decoration: line-through; }
.cp-row.cp-new { background: var(--surface); }
.cp-csel { flex: 1 1 auto; min-width: 0; }
.cp-price { width: 130px; flex: none; }
.cp-empty { padding: 4px 2px; }

/* --- Package cards --- */
.pkg-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 14px; }
.pkg-card { display: flex; flex-direction: column; gap: 9px; text-align: left; background: var(--surface); border: 1px solid var(--line-2); border-radius: var(--r-lg); padding: 16px; cursor: pointer; font: inherit; transition: border-color .14s, box-shadow .14s, transform .14s; }
.pkg-card:hover { border-color: var(--brand-200); box-shadow: var(--sh-1); transform: translateY(-2px); }
.pkg-card:focus-visible { outline: 2px solid var(--brand-400); outline-offset: 2px; }
.pkg-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.pkg-name { display: inline-flex; align-items: center; gap: 7px; font-size: 1.04rem; font-weight: 700; color: var(--ink); }
.pkg-name svg { color: var(--brand-500); flex: none; }
.pkg-price { font-size: 1.1rem; font-weight: 800; color: var(--ink); white-space: nowrap; }
.pkg-desc { font-size: .84rem; color: var(--ink-2); line-height: 1.45; }
.pkg-items { display: flex; flex-direction: column; gap: 4px; background: var(--surface-2); border-radius: var(--r-sm); padding: 9px 11px; }
.pkg-line { display: flex; justify-content: space-between; gap: 10px; font-size: .83rem; color: var(--ink-2); }
.pkg-line-amt { color: var(--muted); font-variant-numeric: tabular-nums; }
.pkg-addons { display: flex; flex-direction: column; gap: 5px; }
.pkg-addons-l { font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); }
.pkg-note { display: flex; align-items: center; gap: 6px; font-size: .78rem; color: var(--brand-700); }
.pkg-note svg { flex: none; color: var(--brand-500); }
.pkg-card.pkg-new { align-items: center; justify-content: center; text-align: center; gap: 4px; border-style: dashed; color: var(--muted); min-height: 152px; }
.pkg-card.pkg-new svg { color: var(--brand-400); margin-bottom: 4px; }
.pkg-card.pkg-new span:first-of-type { font-weight: 700; color: var(--ink-2); font-size: .92rem; }
.pkg-card.pkg-new:hover { border-color: var(--brand-400); color: var(--ink-2); }

/* --- Package modal builder rows --- */
.pkg-total-row { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin: 12px 0 4px; padding: 11px 13px; background: var(--surface-2); border-radius: var(--r-sm); font-size: .9rem; }
.pkg-total-row b { font-size: 1.05rem; }
.pk-item-row { display: grid; grid-template-columns: 1fr 78px 84px 30px; align-items: center; gap: 8px; margin-bottom: 7px; }
.pk-amt { font-size: .86rem; font-weight: 700; color: var(--ink); text-align: right; font-variant-numeric: tabular-nums; }

/* --- "Add from library" picker overlay (stacks above the invoice builder) --- */
.lib-pick-overlay { position: fixed; inset: 0; z-index: 150; display: grid; place-items: center; padding: 24px; }
.lib-pick-back { position: absolute; inset: 0; background: rgba(20,18,12,.5); backdrop-filter: blur(2px); animation: fadeIn .15s ease; }
.lib-pick { position: relative; z-index: 1; width: min(640px, calc(100vw - 32px)); max-height: calc(100vh - 56px); display: flex; flex-direction: column; background: var(--surface); border-radius: var(--r-lg); box-shadow: var(--sh-3); overflow: hidden; animation: fadeUp .22s cubic-bezier(.2,.7,.3,1); }
.lib-pick-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 15px 18px; border-bottom: 1px solid var(--line-2); }
.lib-pick-title { display: inline-flex; align-items: center; gap: 8px; font-size: 1.02rem; font-weight: 700; }
.lib-pick-title svg { color: var(--brand-500); }
.lib-pick-tools { display: flex; gap: 9px; padding: 13px 18px; border-bottom: 1px solid var(--line); }
.lib-pick-tools .select { width: auto; flex: 0 0 auto; min-width: 140px; }
.lib-pick-body { padding: 6px 18px 14px; overflow-y: auto; }
.lib-pick-sec { font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); margin: 12px 0 4px; }
.lib-pick-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 13px 18px; border-top: 1px solid var(--line-2); }
.lp-row { display: flex; align-items: center; gap: 12px; padding: 9px 0; border-bottom: 1px solid var(--line); }
.lp-row:last-child { border-bottom: none; }
.lp-info { flex: 1 1 auto; min-width: 0; }
.lp-name { display: flex; align-items: center; gap: 6px; font-size: .9rem; font-weight: 650; color: var(--ink); }
.lp-name svg { color: var(--brand-500); flex: none; }
.lp-star { display: inline-flex; color: var(--gold); }
.lp-star svg { fill: currentColor; }
.lp-sub { font-size: .77rem; color: var(--muted); margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 330px; }
.lp-price { font-size: .9rem; font-weight: 700; color: var(--ink); white-space: nowrap; display: flex; flex-direction: column; align-items: flex-end; gap: 2px; }
.lp-custom { font-size: .62rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--brand-600); background: var(--brand-50); border-radius: var(--pill); padding: 1px 6px; }
.lp-row .btn.added { background: var(--pos-bg); color: var(--pos); border-color: transparent; pointer-events: none; }

@media (max-width: 620px) {
  .svc-grid, .pkg-grid { grid-template-columns: 1fr; }
  .lib-pick-tools { flex-wrap: wrap; }
  .pk-item-row { grid-template-columns: 1fr 64px 30px; }
  .pk-item-row .pk-amt { display: none; }
  .lp-sub { max-width: 180px; }
}

/* ============================================================
   SETTINGS — revision rules / edit pricing
   ============================================================ */
.set-wrap { max-width: 880px; }
.set-tog-row { gap: 16px; padding: 2px 0; align-items: flex-start; }
.set-tog-info { min-width: 0; }
.set-tog-list { display: flex; flex-direction: column; gap: 14px; }
.set-step { display: inline-flex; align-items: center; flex: none; border: 1px solid var(--line); border-radius: var(--r-sm); overflow: hidden; background: var(--surface); }
.set-step-b { width: 36px; height: 38px; display: grid; place-items: center; font-size: 1.2rem; font-weight: 700; line-height: 1; color: var(--muted); background: var(--surface-2); cursor: pointer; border: none; }
.set-step-b:hover { color: var(--brand-700); background: var(--brand-50); }
.set-step-in { width: 58px; height: 38px; text-align: center; border: none; border-left: 1px solid var(--line); border-right: 1px solid var(--line); border-radius: 0; font-weight: 700; -moz-appearance: textfield; }
.set-step-in::-webkit-outer-spin-button, .set-step-in::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.set-edits { display: flex; flex-direction: column; }
.set-edit-row { display: flex; align-items: center; gap: 16px; padding: 11px 0; border-bottom: 1px solid var(--line); }
.set-edit-row:last-child { border-bottom: none; }
.set-edit-info { flex: 1; min-width: 0; }
.set-edit-seg { flex: none; }
.set-ptypes .chip-tog { display: inline-flex; align-items: center; gap: 6px; }
.set-ptypes .chip-tog svg { opacity: .85; }

@media (max-width: 620px) {
  .set-edit-row { flex-direction: column; align-items: stretch; gap: 9px; }
  .set-edit-seg { align-self: flex-start; }
  .set-tog-row { flex-wrap: wrap; }
}

/* ============================================================
   Global Settings / Admin Console
   ============================================================ */
.set-console { display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: 20px; align-items: start; }
.set-side { position: sticky; top: 8px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--sh-1); overflow: hidden; }
.set-side-head { padding: 14px 14px 10px; border-bottom: 1px solid var(--line-2); }
.set-side-title { display: flex; align-items: center; gap: 8px; font-weight: 800; font-size: .92rem; color: var(--ink); margin-bottom: 10px; }
.set-side-title svg { color: var(--muted); }
.set-search { position: relative; }
.set-search-ic { position: absolute; left: 10px; top: 50%; transform: translateY(-50%); color: var(--ink-faint); display: inline-flex; pointer-events: none; }
.set-search .input { padding-left: 30px; height: 34px; font-size: .85rem; }
.set-nav { padding: 8px; max-height: calc(100vh - 220px); overflow-y: auto; }
.set-nav-sect { font-size: .68rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-faint); padding: 12px 8px 5px; }
.set-nav-sect:first-child { padding-top: 4px; }
.set-nav-i { display: flex; align-items: center; gap: 9px; width: 100%; text-align: left; padding: 8px 9px; border-radius: var(--r-sm); border: none; background: none; cursor: pointer; color: var(--ink-soft); font-size: .88rem; font-weight: 600; }
.set-nav-i:hover { background: var(--surface-2); color: var(--ink); }
.set-nav-i.active { background: var(--brand-50); color: var(--brand-700); }
.set-nav-ic { display: inline-flex; color: var(--muted); flex: none; }
.set-nav-i.active .set-nav-ic { color: var(--brand-600); }
.set-nav-l { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.set-nav-lock { display: inline-flex; color: var(--gold-700); flex: none; }
.set-side-foot { padding: 12px 14px; border-top: 1px solid var(--line-2); }
.set-prog-top { display: flex; justify-content: space-between; font-size: .76rem; color: var(--muted); margin-bottom: 6px; }
.set-prog-top b { color: var(--ink); }
.set-prog-bar { height: 7px; border-radius: 999px; background: var(--surface-2); overflow: hidden; border: 1px solid var(--line-2); }
.set-prog-bar i { display: block; height: 100%; background: linear-gradient(90deg, var(--accent), var(--brand-500)); border-radius: 999px; transition: width .4s ease; }
.set-prog-bar.lg { height: 10px; margin-bottom: 16px; }

.set-main { min-width: 0; }
.set-sec-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 18px; flex-wrap: wrap; }
.set-sec-title { font-family: var(--font-display); font-size: 1.45rem; font-weight: 800; color: var(--ink); margin: 0; letter-spacing: -.01em; }
.set-sec-sub { color: var(--muted); font-size: .9rem; margin: 5px 0 0; max-width: 64ch; line-height: 1.5; }
.set-sec-actions { display: flex; gap: 8px; flex: none; }
.set-panel { margin-bottom: 16px; max-width: 920px; }
.set-panel-sub { font-size: .82rem; }
.set-error { padding: 30px; text-align: center; color: var(--muted); }

/* Plan gate */
.set-gate { display: flex; align-items: center; gap: 13px; padding: 14px 16px; border: 1px solid var(--gold-200); background: var(--gold-50); border-radius: var(--r-lg); margin-bottom: 16px; max-width: 920px; }
.set-gate-ic { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; background: var(--gold-200); color: var(--gold-700); flex: none; }
.set-gate-tx { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.set-gate-tx b { color: var(--ink); font-size: .92rem; }
.set-gate-tx .muted { font-size: .82rem; }

/* Status pills */
.set-stat { display: inline-flex; align-items: center; gap: 6px; }
.set-dot { width: 7px; height: 7px; border-radius: 50%; flex: none; background: var(--muted); }
.set-dot.good { background: var(--pos); }
.set-dot.warm { background: var(--gold); }
.set-dot.cold { background: var(--ink-faint); }

/* Overview */
.set-overview { display: flex; flex-direction: column; gap: 16px; max-width: 920px; }
.set-next { display: flex; align-items: center; gap: 14px; padding: 14px 16px; background: var(--brand-50); border: 1px solid var(--brand-100); border-radius: var(--r-lg); margin: 14px 0 6px; }
.set-next-tx { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.set-next-tx b { color: var(--ink); }
.set-next.done { justify-content: flex-start; gap: 10px; }
.set-next.done .set-next-ic, .set-next-ic { color: var(--pos); display: inline-flex; }
.set-steps { display: flex; flex-direction: column; margin-top: 8px; }
.set-step-row { display: flex; align-items: center; gap: 11px; padding: 11px 4px; border-bottom: 1px solid var(--line-2); }
.set-step-row:last-child { border-bottom: none; }
.set-step-check { display: inline-flex; color: var(--ink-faint); flex: none; }
.set-step-row.done .set-step-check { color: var(--pos); }
.set-step-go { flex: 1; min-width: 0; text-align: left; background: none; border: none; cursor: pointer; display: flex; flex-direction: column; gap: 1px; padding: 0; }
.set-step-go b { color: var(--ink); font-size: .9rem; font-weight: 650; }
.set-step-go .muted { font-size: .8rem; }
.set-step-row.done .set-step-go b { color: var(--muted); font-weight: 600; }
.set-step-row.skipped .set-step-go b { text-decoration: line-through; color: var(--ink-faint); }
.set-step-skip { flex: none; background: none; border: 1px solid var(--line); border-radius: var(--r-sm); padding: 4px 10px; font-size: .76rem; font-weight: 600; color: var(--muted); cursor: pointer; }
.set-step-skip:hover { color: var(--ink); border-color: var(--line-2); background: var(--surface-2); }
.set-snap-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
.set-snap { display: flex; flex-direction: column; gap: 2px; padding: 14px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--sh-1); cursor: pointer; text-align: left; }
.set-snap:hover { border-color: var(--brand-200); box-shadow: var(--sh-2); transform: translateY(-1px); transition: transform .12s, box-shadow .12s; }
.set-snap-ic { display: inline-flex; color: var(--muted); margin-bottom: 4px; }
.set-snap-l { font-size: .72rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--ink-faint); }
.set-snap b { font-size: 1.05rem; color: var(--ink); }
.set-snap .muted { font-size: .78rem; }

/* Security note callout (shown across connection-heavy sections) */
.set-secnote { display: flex; align-items: flex-start; gap: 9px; padding: 11px 13px; background: var(--brand-50); border: 1px solid var(--brand-100); border-radius: var(--r-sm); font-size: .82rem; color: var(--ink-soft); line-height: 1.45; margin-bottom: 14px; }
.set-secnote svg { color: var(--brand-600); flex: none; margin-top: 1px; }
.set-secnote b { color: var(--ink); font-weight: 700; }
.set-secnote.sm { padding: 8px 11px; font-size: .78rem; margin-bottom: 10px; }

/* Status pill wrapper (section headers) + small info / lock note */
.set-stat-wrap { display: inline-flex; align-items: center; }
.set-note { display: flex; align-items: center; gap: 7px; font-size: .82rem; color: var(--muted); padding-top: 10px; }
.set-note svg { color: var(--gold-700); flex: none; }
.set-note b { color: var(--ink); }

/* Snapshot 3-up override */
.set-snap-3 { grid-template-columns: repeat(3, 1fr); }

/* ---- Connection cards (integrations, payments, email, AI providers) ---- */
.set-conn-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(248px, 1fr)); gap: 12px; }
.set-conn { display: flex; flex-direction: column; gap: 9px; padding: 14px; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface); box-shadow: var(--sh-1); }
.set-conn.is-current { border-color: var(--brand-500); box-shadow: 0 0 0 3px var(--brand-50); }
.set-conn.is-locked { opacity: .72; }
.set-conn-top { display: flex; align-items: center; gap: 10px; }
.set-conn-ic { display: grid; place-items: center; width: 38px; height: 38px; border-radius: var(--r-sm); background: var(--surface-2); border: 1px solid var(--line-2); color: var(--ink-soft); flex: none; }
.set-conn-meta { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.set-conn-meta b { color: var(--ink); font-size: .9rem; }
.set-conn-meta .muted { font-size: .78rem; }
.set-conn-top .set-stat, .set-conn-top .badge { flex: none; }
.set-int-blurb { font-size: .8rem; color: var(--muted); line-height: 1.45; margin: 0; min-height: 34px; }
.set-int-acct { font-size: .78rem; }
.set-int-err { display: flex; align-items: center; gap: 5px; font-size: .78rem; color: var(--neg); }
.set-int-err svg { flex: none; }
.set-int-acts { margin-top: 2px; }

/* ---- Simple list rows + empty states (shared) ---- */
.set-list { display: flex; flex-direction: column; }
.set-li { display: flex; align-items: center; gap: 12px; padding: 12px 2px; border-bottom: 1px solid var(--line-2); }
.set-li:last-child { border-bottom: none; }
.set-li-ic { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 8px; background: var(--surface-2); color: var(--muted); flex: none; }
.set-li-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.set-li-main b { color: var(--ink); font-size: .9rem; font-weight: 650; }
.set-li-main .muted { font-size: .8rem; }
.set-li-acts { display: flex; align-items: center; gap: 6px; flex: none; }
.set-empty { text-align: center; padding: 26px; color: var(--muted); display: flex; flex-direction: column; align-items: center; gap: 6px; }
.set-empty svg { color: var(--ink-faint); }

/* Initials avatar chip */
.set-avatar { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--brand-100); color: var(--brand-700); font-size: .76rem; font-weight: 800; flex: none; }

/* Modifiers on shared bases (.set-conn / .set-list / .set-li) */
.set-int { min-height: 150px; }                 /* even integration-card heights */
.set-svc { gap: 11px; }                          /* tighter row alongside the star */
.set-member .badge { flex: none; }               /* role/status badges never stretch */
.set-audit .set-li-ic, .set-auto-list .set-li-ic { color: var(--brand-600); }  /* friendly brand-tinted icons */

/* ---- Search row + category chips ---- */
.set-search-row { display: flex; gap: 10px; margin-bottom: 14px; align-items: center; flex-wrap: wrap; }
.set-search-row .set-search { flex: 1; min-width: 180px; display: flex; align-items: center; gap: 7px; padding: 0 11px; height: 38px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-sm); }
.set-search-row .set-search svg { color: var(--ink-faint); flex: none; }
.set-search-row .set-search input { flex: 1; min-width: 0; border: none; background: none; outline: none; font-size: .88rem; color: var(--ink); }
.set-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 14px; }
.set-chip { display: inline-flex; align-items: center; gap: 5px; padding: 6px 11px; border: 1px solid var(--line); background: var(--surface); border-radius: 999px; font-size: .8rem; font-weight: 600; color: var(--ink-soft); cursor: pointer; }
.set-chip:hover { border-color: var(--line-2); background: var(--surface-2); color: var(--ink); }
.set-chip.active { background: var(--brand-600); border-color: var(--brand-600); color: #fff; }
.set-chip.active svg { color: #fff; }

/* ---- Activity log (accountability, not surveillance) ---- */
.set-audit-row .set-li-main b { font-weight: 600; }
.set-audit-time { flex: none; margin-left: auto; font-size: .76rem; white-space: nowrap; }

/* ---- Automations ---- */
.set-auto.is-off { opacity: .6; }
.set-auto-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
.set-auto-meta .badge { font-size: .68rem; }
.set-auto-meta .muted { font-size: .76rem; }

/* ---- Notifications matrix (flex columns so any channel count aligns) ---- */
.set-notif { border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; }
.set-notif-head, .set-notif-row { display: flex; align-items: center; gap: 8px; padding: 10px 14px; }
.set-notif-head { background: var(--surface-2); border-bottom: 1px solid var(--line); }
.set-notif-row { border-bottom: 1px solid var(--line-2); }
.set-notif-row:last-child { border-bottom: none; }
.set-notif-head > span:first-child, .set-notif-ev { flex: 1; min-width: 0; }
.set-notif-head > span:first-child { font-size: .72rem; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: var(--ink-faint); }
.set-notif-ch { width: 90px; flex: none; display: inline-flex; align-items: center; justify-content: center; gap: 4px; font-size: .72rem; font-weight: 700; color: var(--ink-soft); text-align: center; }
.set-notif-ch svg { flex: none; }
.set-notif-cell { width: 90px; flex: none; display: flex; justify-content: center; }
.set-notif-ev { display: flex; align-items: center; gap: 8px; }
.set-notif-ev b { color: var(--ink); font-size: .86rem; font-weight: 600; }

/* ---- Roles & permissions ---- */
.set-role-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(224px, 1fr)); gap: 12px; }
.set-role { display: flex; flex-direction: column; gap: 7px; padding: 14px; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface); box-shadow: var(--sh-1); }
.set-role-h { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.set-role-h b { color: var(--ink); font-size: .94rem; }
.set-role-desc { font-size: .8rem; line-height: 1.45; margin: 0; flex: 1; }
.set-role-meta { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: .76rem; color: var(--muted); padding-top: 8px; border-top: 1px solid var(--line-2); }
.set-perm-ref { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 16px; }
.set-perm-grp { display: flex; flex-direction: column; gap: 6px; }
.set-perm-grp-h { font-size: .72rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-faint); }
.set-perm-item { display: flex; align-items: center; gap: 6px; font-size: .82rem; color: var(--ink-soft); }
.set-perm-item svg { flex: none; }
.set-perm-item.on svg { color: var(--pos); }
.set-perm-item.off { color: var(--ink-faint); }
.set-perm-item.off svg { color: var(--ink-faint); }

/* ---- Branding identity (logos + swatches) ---- */
.set-brand-id { display: flex; flex-direction: column; gap: 16px; }
.set-logos { display: flex; flex-wrap: wrap; gap: 12px; }
.set-logo { display: flex; flex-direction: column; gap: 5px; }
.set-logo > .muted { font-size: .72rem; text-transform: capitalize; }
.set-logo-box { display: grid; place-items: center; width: 120px; height: 64px; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--surface-2); overflow: hidden; }
.set-logo-box img { max-width: 100%; max-height: 100%; object-fit: contain; }
.set-swatches { display: flex; flex-wrap: wrap; gap: 16px; }
.set-swatch { display: flex; align-items: center; gap: 9px; }
.set-swatch b { display: block; color: var(--ink); font-size: .82rem; }
.set-swatch code { font-size: .76rem; color: var(--muted); }
.set-sw { width: 34px; height: 34px; border-radius: 8px; border: 1px solid var(--line); flex: none; }

/* ---- Document templates ---- */
.set-tpl-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 12px; }
.set-tpl { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; padding: 14px; border: 1.5px solid var(--line); border-radius: var(--r-lg); background: var(--surface); cursor: pointer; text-align: left; }
.set-tpl:hover { border-color: var(--brand-200); }
.set-tpl.active { border-color: var(--brand-500); box-shadow: 0 0 0 3px var(--brand-50); }
.set-tpl-ic { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 8px; background: var(--surface-2); color: var(--ink-soft); margin-bottom: 4px; }
.set-tpl.active .set-tpl-ic { background: var(--brand-100); color: var(--brand-700); }
.set-tpl b { color: var(--ink); font-size: .88rem; }
.set-tpl .muted { font-size: .78rem; line-height: 1.4; }
.set-tpl-best { margin-top: 5px; font-size: .68rem; font-weight: 700; color: var(--brand-700); background: var(--brand-50); padding: 2px 7px; border-radius: 999px; }

/* ---- Domains + DNS / email authentication rows ---- */
.set-domain { display: flex; flex-direction: column; gap: 10px; padding: 13px 2px; border-bottom: 1px solid var(--line-2); }
.set-domain:last-child { border-bottom: none; }
.set-domain-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.set-domain-head b { color: var(--ink); }
.set-domain-dns, .set-dns-list { display: flex; flex-direction: column; gap: 6px; }
.set-dns { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: .8rem; }
.set-dns code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .76rem; background: var(--surface-2); border: 1px solid var(--line-2); border-radius: 6px; padding: 2px 7px; color: var(--ink-soft); }
.set-dns-list .set-dns { padding: 10px 0; border-bottom: 1px solid var(--line-2); }
.set-dns-list .set-dns:last-child { border-bottom: none; }

/* ---- Services ---- */
.set-fav { background: none; border: none; cursor: pointer; color: var(--ink-faint); padding: 2px; flex: none; display: inline-flex; }
.set-fav:hover { color: var(--gold); }
.set-fav.on { color: var(--gold); }
.set-svc-price { font-weight: 700; color: var(--ink); font-size: .88rem; flex: none; white-space: nowrap; }

/* ---- Usage meters ---- */
.set-usage { display: flex; flex-direction: column; gap: 6px; }
.set-usage-top { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; font-size: .84rem; color: var(--ink-soft); }
.set-usage-top b { color: var(--ink); }
.set-usage-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 16px; }

/* ---- Portal visibility toggles ---- */
.set-vis-grid { display: flex; flex-direction: column; gap: 2px; }
.set-vis-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 2px; border-bottom: 1px solid var(--line-2); cursor: pointer; }
.set-vis-row:last-child { border-bottom: none; }
.set-vis-l { display: inline-flex; align-items: center; gap: 8px; font-size: .88rem; color: var(--ink); }
.set-vis-l svg { color: var(--muted); flex: none; }

/* ---- Plan / billing ---- */
.set-plan-now { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; padding: 16px; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface); box-shadow: var(--sh-1); margin-bottom: 16px; }
.set-plan-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; }
.set-plan { display: flex; flex-direction: column; gap: 8px; padding: 16px; border: 1.5px solid var(--line); border-radius: var(--r-lg); background: var(--surface); }
.set-plan.current { border-color: var(--brand-500); box-shadow: 0 0 0 3px var(--brand-50); }
.set-plan-h { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.set-plan-h b { font-weight: 800; color: var(--ink); }
.set-plan-price { font-family: var(--font-display); font-size: 1.5rem; font-weight: 800; color: var(--ink); }
.set-plan-price .muted { font-size: .8rem; font-weight: 600; }
.set-plan-blurb { font-size: .8rem; min-height: 32px; line-height: 1.4; }
.set-plan-feats { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.set-plan-feats li { font-size: .8rem; color: var(--ink-soft); padding-left: 16px; position: relative; }
.set-plan-feats li::before { content: '✓'; position: absolute; left: 0; color: var(--pos); font-weight: 800; }

/* ---- API keys & webhooks ---- */
.set-key.is-off, .set-wh.is-off { opacity: .55; }
.set-key-reveal { display: flex; align-items: center; gap: 8px; padding: 11px 13px; background: var(--ink); border-radius: var(--r-sm); }
.set-key-reveal code { flex: 1; min-width: 0; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .82rem; color: #fff; word-break: break-all; }
.set-ok { color: var(--pos); font-weight: 700; }
.set-bad { color: var(--neg); font-weight: 700; }

/* ---- Action / scope checkbox grids (modals) ---- */
.set-act-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 8px; }
.set-act { display: flex; align-items: center; gap: 8px; padding: 9px 11px; border: 1px solid var(--line); border-radius: var(--r-sm); font-size: .84rem; color: var(--ink-soft); cursor: pointer; }
.set-act:hover { border-color: var(--line-2); background: var(--surface-2); }
.set-act input { flex: none; accent-color: var(--brand-600); }

/* ---- Danger zone (privacy) ---- */
.set-danger { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 16px; border: 1px solid color-mix(in srgb, var(--neg) 35%, var(--line)); background: var(--neg-bg); border-radius: var(--r-lg); }
.set-danger-tx { min-width: 0; }
.set-danger-tx b { color: var(--ink); }
.set-danger-tx p { font-size: .82rem; margin: 2px 0 0; }
.set-danger-btn { background: var(--neg); border-color: var(--neg); color: #fff; flex: none; }
.set-danger-btn:hover { filter: brightness(.94); }

/* ---- Overview setup panel + sidebar setup progress ---- */
.set-setup { background: linear-gradient(135deg, var(--brand-50), var(--surface)); border-color: var(--brand-100); }
.set-prog { display: flex; flex-direction: column; gap: 6px; }

/* ============================================================
   Console — gap-analysis additions (storage, support, health,
   switcher, AI/privacy/integration/team strengthenings)
   ============================================================ */

/* Workspace health score (overview) */
.set-health { display: flex; gap: 18px; align-items: center; padding: 16px 18px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--sh-1); flex-wrap: wrap; }
.set-health-score { display: flex; flex-direction: column; align-items: center; gap: 6px; flex: none; }
.set-health-ring { position: relative; width: 88px; height: 88px; border-radius: 50%; display: grid; place-items: center; background: conic-gradient(var(--accent) calc(var(--score, 0) * 1%), var(--surface-2) 0); }
.set-health-ring::before { content: ''; position: absolute; width: 66px; height: 66px; border-radius: 50%; background: var(--surface); }
.set-health-num { position: relative; display: flex; align-items: baseline; gap: 1px; }
.set-health-num b { font-family: var(--font-display); font-size: 1.5rem; font-weight: 800; color: var(--ink); }
.set-health-num span { font-size: .74rem; color: var(--muted); }
.set-health-grade { font-size: .8rem; font-weight: 700; color: var(--ink-soft); }
.set-health.is-good .set-health-grade { color: var(--pos); }
.set-health.is-low .set-health-grade { color: var(--neg); }
.set-health-factors { flex: 1; min-width: 240px; display: flex; flex-direction: column; gap: 3px; }
.set-health-h { display: flex; align-items: center; gap: 7px; font-weight: 800; font-size: .82rem; color: var(--ink); margin-bottom: 4px; }
.set-health-h svg { color: var(--muted); }
.set-health-f { display: flex; align-items: center; gap: 8px; padding: 5px 7px; border: none; background: none; width: 100%; text-align: left; cursor: pointer; border-radius: var(--r-sm); font-size: .84rem; color: var(--ink-soft); }
.set-health-f:hover { background: var(--surface-2); }
.set-health-f.ok svg { color: var(--pos); flex: none; }
.set-health-f.no svg { color: var(--gold-700); flex: none; }
.set-health-fl { flex: 1; min-width: 0; color: var(--ink); }
.set-health-f .muted { font-size: .78rem; }

/* Section error / retry state */
.set-error { display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; padding: 36px 24px; color: var(--muted); background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); }
.set-error-ic { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--gold-50); color: var(--gold-700); }
.set-error b { color: var(--ink); font-size: 1rem; }
.set-error p { max-width: 42ch; margin: 0; }
.set-error .row { margin-top: 6px; }

/* Storage — stacked usage bar + legend */
.set-stack { display: flex; height: 14px; border-radius: 999px; overflow: hidden; background: var(--surface-2); border: 1px solid var(--line-2); }
.set-stack i { display: block; height: 100%; }
.set-store-dot { width: 12px; height: 12px; border-radius: 3px; flex: none; }
.set-store-pct { min-width: 42px; text-align: right; font-size: .8rem; }

/* Integration scopes/permissions chips */
.set-int-scopes { display: flex; flex-wrap: wrap; align-items: center; gap: 5px; font-size: .74rem; color: var(--muted); }
.set-int-scopes svg { color: var(--muted); flex: none; }
.set-scope { background: var(--surface-2); border: 1px solid var(--line-2); border-radius: 999px; padding: 1px 8px; color: var(--ink-soft); font-size: .72rem; }

/* Support — help resource cards reuse .set-conn as buttons */
.set-help { text-align: left; cursor: pointer; font: inherit; }
.set-help:hover { border-color: var(--brand-200); box-shadow: var(--sh-2); }
.set-help-ext { color: var(--ink-faint); flex: none; }

/* Team member profile modal */
.set-member-head { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.set-avatar.lg { width: 52px; height: 52px; font-size: 1.05rem; overflow: hidden; }
.set-avatar img { width: 100%; height: 100%; object-fit: cover; border-radius: inherit; }
.set-member-head-tx b { display: block; color: var(--ink); font-size: 1.02rem; }
.set-member-head-tx .muted { font-size: .82rem; }
.set-member-extra { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--line-2); }
.set-member-col { min-width: 0; }
.set-member-col-h { display: flex; align-items: center; gap: 6px; font-size: .72rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-faint); margin-bottom: 6px; }
.set-member-col-h svg { color: var(--muted); }
.set-member-empty { font-size: .82rem; padding: 4px 0; }

/* Workspace switcher (topbar) + switch modal rows */
.ws-switch { display: inline-flex; align-items: center; gap: 7px; padding: 5px 10px; border: 1px solid var(--line); background: var(--surface); border-radius: 999px; font-size: .82rem; font-weight: 700; color: var(--ink-soft); cursor: pointer; }
.ws-switch:hover { border-color: var(--line-2); background: var(--surface-2); color: var(--ink); }
.ws-switch .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--pos); flex: none; }
.ws-switch-caret { color: var(--ink-faint); flex: none; }
.set-ws-row { width: 100%; text-align: left; background: none; border: none; border-bottom: 1px solid var(--line-2); cursor: pointer; }
.set-ws-row:hover { background: var(--surface-2); }
.set-ws-row.is-current { background: var(--brand-50); }

@media (max-width: 900px) {
  .set-console { grid-template-columns: 1fr; gap: 14px; }
  .set-side { position: static; }
  .set-nav { display: flex; flex-wrap: wrap; gap: 4px; max-height: none; }
  .set-nav-sect { width: 100%; }
  .set-nav-i { width: auto; }
  .set-side-foot { display: none; }
}

/* ============================================================
   Client command center — enriched panels (in-place upgrade)
   ============================================================ */
/* Sticky right rail on desktop; the grid already aligns items to start. */
@media (min-width: 901px) {
  .client-side { position: sticky; top: 16px; align-self: start; }
}

/* Collapsible head action cluster (sits left of the caret). */
.panel-head-actions { display: inline-flex; align-items: center; gap: 8px; }

/* Header "More" dropdown menu. */
.hdr-menu { position: relative; display: inline-flex; }
.hdr-menu-pop { position: absolute; right: 0; top: calc(100% + 6px); min-width: 196px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); box-shadow: var(--sh-2); padding: 6px; display: none; flex-direction: column; gap: 2px; z-index: 60; }
.hdr-menu-pop.open { display: flex; }
.hdr-menu-item { display: flex; align-items: center; gap: 9px; padding: 8px 10px; border-radius: 9px; font-size: .85rem; font-weight: 600; color: var(--ink-2); text-align: left; background: transparent; width: 100%; }
.hdr-menu-item:hover { background: var(--surface-2); color: var(--ink); }
.hdr-menu-item svg { flex: none; color: var(--muted); }

/* Compact summary-stat strip (Projects, Invoices, Contracts).
   Separated bordered chips so a partial last row never leaves empty grid tracks. */
.cc-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(112px, 1fr)); gap: 8px; margin-bottom: 14px; }
.cc-stats > div { background: var(--surface-2); border: 1px solid var(--line); border-radius: 10px; padding: 9px 12px; display: flex; flex-direction: column; gap: 3px; }
.cc-stats span { font-size: .66rem; text-transform: uppercase; letter-spacing: .04em; color: var(--faint); font-weight: 700; }
.cc-stats b { font-size: .92rem; color: var(--ink); font-weight: 700; }
.cc-stats b.neg-num { color: var(--neg); }
.cc-stats b.pos-num { color: var(--pos); }

/* Suggested-next-service nudge card. */
.cc-suggest { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border: 1px solid var(--brand-200); border-radius: var(--r); background: var(--brand-50); cursor: pointer; margin-bottom: 14px; transition: border-color .12s, box-shadow .12s; }
.cc-suggest:hover { border-color: var(--brand-500); box-shadow: var(--sh-1); }
.cc-suggest:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.cs-ico { flex: none; width: 32px; height: 32px; border-radius: 9px; display: grid; place-items: center; color: var(--on-accent); background: linear-gradient(150deg, var(--brand-500), var(--brand-700)); }
.cs-body { display: flex; flex-direction: column; gap: 1px; min-width: 0; flex: 1; }
.cs-body b { font-size: .86rem; color: var(--ink); }
.cs-body .muted { font-size: .77rem; }
.cs-cta { flex: none; display: inline-flex; align-items: center; gap: 4px; font-size: .77rem; font-weight: 700; color: var(--brand-700); }

/* Segmented filter chip row (reuses existing .seg-chip styling). */
.seg-row { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }

/* Tiny inline meta chip used in titles / rows. */
.chip-mini { display: inline-flex; align-items: center; font-size: .66rem; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; color: var(--muted); background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--pill); padding: 1px 7px; }

/* Project History rows. */
.proj-list { display: flex; flex-direction: column; gap: 10px; }
.proj-list .sub-label { margin: 4px 0 -2px; }
.proj-row { display: flex; align-items: flex-start; gap: 12px; padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--r); background: var(--surface); transition: border-color .12s, box-shadow .12s; }
.proj-row:hover { border-color: var(--brand-200); box-shadow: var(--sh-1); }
.proj-row.is-archived { opacity: .72; background: var(--surface-2); }
.proj-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 5px; }
.proj-top { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.proj-top b { font-size: .9rem; color: var(--ink); font-weight: 600; }
.proj-meta { font-size: .76rem; color: var(--muted); }
.proj-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 2px; }
.pt-chip { display: inline-flex; align-items: center; gap: 4px; font-size: .72rem; font-weight: 600; color: var(--ink-2); background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--pill); padding: 2px 8px; }
.pt-chip svg { flex: none; color: var(--muted); }
.proj-row-actions { flex: none; display: flex; align-items: center; gap: 6px; }

/* Generic record rows — Contracts, Proofs, Communications. */
.rec-list { display: flex; flex-direction: column; gap: 8px; }
.rec-row { display: flex; align-items: center; gap: 12px; padding: 11px 13px; border: 1px solid var(--line); border-radius: var(--r); background: var(--surface); transition: border-color .12s, box-shadow .12s; }
.rec-row:hover { border-color: var(--brand-200); box-shadow: var(--sh-1); }
.rec-row[data-commrow] { cursor: pointer; }
.rec-ico { flex: none; width: 32px; height: 32px; border-radius: 9px; display: grid; place-items: center; color: var(--brand-700); background: var(--brand-50); }
.rec-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.rec-top { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.rec-top b { font-size: .87rem; color: var(--ink); font-weight: 600; }
.rec-meta { font-size: .76rem; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rec-actions { flex: none; display: flex; align-items: center; gap: 6px; }

/* Forms rich rows. */
.forms-list { display: flex; flex-direction: column; gap: 8px; }
.form-row-rec { display: flex; align-items: center; gap: 12px; padding: 11px 13px; border: 1px solid var(--line); border-radius: var(--r); background: var(--surface); transition: border-color .12s; }
.form-row-rec:hover { border-color: var(--brand-200); }
.frm-ico { flex: none; width: 30px; height: 30px; border-radius: 8px; display: grid; place-items: center; color: var(--brand-700); background: var(--brand-50); }
.frm-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.frm-top { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.frm-top b { font-size: .87rem; color: var(--ink); font-weight: 600; }
.frm-meta { font-size: .76rem; color: var(--muted); }

/* People card foot + actions (scoped so proof-card .pc-* styles don't bleed). */
.person-card .pc-body { padding: 0; gap: 3px; flex: 1; min-width: 0; }
.person-card .pc-top b { word-break: break-word; }
.person-card .pc-contact { overflow: hidden; text-overflow: ellipsis; }
.person-card .pc-foot { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 4px; }
.person-card .pc-perm { display: inline-flex; align-items: center; gap: 3px; font-size: .72rem; }
.person-card .pc-actions { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--line); }

/* Tags & notes (right rail). */
.tn-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.tn-tag { display: inline-flex; align-items: center; gap: 3px; font-size: .76rem; font-weight: 600; color: var(--ink-2); background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--pill); padding: 3px 4px 3px 10px; }
.tn-x { display: inline-grid; place-items: center; width: 16px; height: 16px; border-radius: 50%; color: var(--muted); }
.tn-x:hover { color: var(--neg); background: var(--neg-bg); }
.tn-add { border: 1px dashed var(--line-2); border-radius: var(--pill); padding: 3px 11px; font-size: .76rem; background: transparent; color: var(--ink); min-width: 84px; }
.tn-add:focus { outline: none; border-color: var(--brand-400); }
.tn-note { width: 100%; resize: vertical; font: inherit; font-size: .82rem; }

/* Activity log internal/client flag + person. */
.tl-flag { display: inline-flex; align-items: center; gap: 3px; font-size: .64rem; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; padding: 1px 6px; border-radius: var(--pill); margin-left: 6px; vertical-align: middle; }
.tl-flag svg { flex: none; }
.tl-flag.is-int { color: var(--muted); background: var(--surface-2); }
.tl-flag.is-cli { color: var(--brand-700); background: var(--brand-50); }
.tl-person { color: var(--ink-2); font-weight: 600; }
.act-more { margin-top: 10px; }

/* Read-only modal note text. */
.modal-note { font-size: .85rem; color: var(--ink-2); line-height: 1.55; white-space: pre-wrap; }

@media (max-width: 720px) {
  .cc-stats { grid-template-columns: repeat(auto-fit, minmax(92px, 1fr)); }
  .rec-meta { white-space: normal; }
  .proj-row, .rec-row, .form-row-rec { flex-wrap: wrap; }
  .proj-row-actions, .rec-actions { width: 100%; justify-content: flex-end; }
  .proj-actions { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ============================================================
   Growth Finder
   ============================================================ */

/* Layout */
.gf-shell { display: flex; flex-direction: column; gap: 0; height: 100%; min-height: 0; }
.gf-header { padding: 22px 24px 0; display: flex; flex-direction: column; gap: 14px; flex: none; }
.gf-title-row { display: flex; align-items: center; gap: 12px; }
.gf-title-row h1 { font-size: 1.25rem; font-weight: 700; letter-spacing: -.02em; color: var(--ink); flex: 1; }
.gf-badge-chip { display: inline-flex; align-items: center; gap: 4px; font-size: .7rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--brand-700); background: var(--brand-50); border: 1px solid var(--brand-200); border-radius: var(--pill); padding: 3px 10px; }
.gf-tabs { display: flex; gap: 2px; border-bottom: 1px solid var(--line); padding: 0 24px; flex: none; }
.gf-tab { padding: 9px 14px; font-size: .84rem; font-weight: 600; color: var(--muted); background: none; border: none; border-bottom: 2px solid transparent; cursor: pointer; display: flex; align-items: center; gap: 6px; transition: color .15s; }
.gf-tab:hover { color: var(--ink); }
.gf-tab.active { color: var(--brand-700); border-bottom-color: var(--brand-500); }
.gf-body { flex: 1; min-height: 0; overflow-y: auto; padding: 20px 24px 24px; }

/* Credit usage bar */
.gf-credits-bar { display: flex; align-items: center; gap: 10px; background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--radius); padding: 9px 14px; font-size: .8rem; }
.gf-credits-bar .gf-cred-label { color: var(--muted); flex: 1; }
.gf-credits-bar .gf-cred-used { font-weight: 700; color: var(--ink); }
.gf-cred-track { height: 5px; background: var(--line); border-radius: 9px; width: 120px; overflow: hidden; flex: none; }
.gf-cred-fill { height: 100%; background: var(--brand-500); border-radius: 9px; transition: width .3s; }
.gf-cred-fill.warn { background: var(--warn, #E0A52E); }
.gf-cred-fill.full { background: var(--neg); }

/* ICP Builder panel */
.gf-icp-panel { background: var(--surface-2); border: 1px solid var(--brand-200); border-radius: var(--radius); margin-bottom: 18px; overflow: hidden; }
.gf-icp-head { display: flex; align-items: center; gap: 10px; padding: 12px 16px; cursor: pointer; user-select: none; }
.gf-icp-head:hover { background: var(--brand-50); }
.gf-icp-head .gf-icp-name { font-size: .87rem; font-weight: 700; color: var(--brand-700); flex: 1; }
.gf-icp-head .gf-icp-sub { font-size: .78rem; color: var(--muted); }
.gf-icp-body { padding: 0 16px 16px; border-top: 1px solid var(--brand-100); display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.gf-icp-field { display: flex; flex-direction: column; gap: 5px; }
.gf-icp-field label { font-size: .75rem; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }
.gf-icp-chips { display: flex; flex-wrap: wrap; gap: 5px; }
.gf-icp-chip { font-size: .76rem; font-weight: 600; padding: 4px 10px; border-radius: var(--pill); background: var(--surface-3); border: 1px solid var(--line); color: var(--ink-2); cursor: pointer; }
.gf-icp-chip.on { background: var(--brand-100); border-color: var(--brand-300); color: var(--brand-700); }
.gf-icp-full { grid-column: 1 / -1; }

/* Search bar */
.gf-search-bar { display: flex; gap: 8px; align-items: center; margin-bottom: 14px; flex-wrap: wrap; }
.gf-search-bar .input { flex: 1; min-width: 180px; }
.gf-search-bar .select { min-width: 150px; }
.gf-view-toggle { display: flex; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; flex: none; }
.gf-view-btn { padding: 7px 12px; background: var(--surface-1); border: none; cursor: pointer; color: var(--muted); display: flex; align-items: center; gap: 5px; font-size: .81rem; font-weight: 600; transition: background .15s; }
.gf-view-btn:hover { background: var(--surface-2); color: var(--ink); }
.gf-view-btn.active { background: var(--brand-600); color: #fff; }
.gf-view-btn + .gf-view-btn { border-left: 1px solid var(--line); }
.gf-view-btn.active + .gf-view-btn { border-left-color: var(--brand-600); }

/* Main content split */
.gf-content { display: grid; grid-template-columns: 1fr 360px; gap: 16px; min-height: 0; }
.gf-content.no-detail { grid-template-columns: 1fr; }

/* Map view */
.gf-map { position: relative; background: linear-gradient(145deg, var(--map-base) 0%, color-mix(in srgb, var(--map-base) 80%, #3a6090) 35%, color-mix(in srgb, var(--map-base) 88%, #000) 100%); border: 1px solid var(--border-strong); border-radius: var(--radius); min-height: 460px; overflow: hidden; }
.gf-map-grid { position: absolute; inset: 0; background-image: linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px); background-size: 48px 48px; }
.gf-map-roads { position: absolute; inset: 0; opacity: .18; background-image: linear-gradient(to right, rgba(255,255,255,.6) 1px, transparent 1px), linear-gradient(to bottom, rgba(255,255,255,.6) 1px, transparent 1px), linear-gradient(30deg, rgba(255,255,255,.3) 1px, transparent 1px); background-size: 120px 80px, 80px 120px, 200px 200px; }
.gf-map-label { position: absolute; top: 12px; left: 14px; font-size: .72rem; font-weight: 700; color: rgba(255,255,255,.55); letter-spacing: .06em; text-transform: uppercase; pointer-events: none; }
.gf-map-area { position: absolute; top: 14px; right: 14px; font-size: .7rem; font-weight: 600; color: rgba(255,255,255,.45); pointer-events: none; }
.gf-map-territory { position: absolute; inset: 25% 20% 20% 15%; border: 2px dashed rgba(45,82,224,.5); border-radius: 30%; background: rgba(45,82,224,.06); pointer-events: none; }
.gf-pin { position: absolute; display: flex; flex-direction: column; align-items: center; cursor: pointer; transition: transform .15s; z-index: 2; }
.gf-pin:hover { transform: scale(1.15); z-index: 10; }
.gf-pin.selected { z-index: 20; }
.gf-pin-dot { width: 28px; height: 28px; border-radius: 50% 50% 50% 0; background: var(--brand-500); border: 2px solid #fff; box-shadow: 0 2px 6px rgba(0,0,0,.35); display: flex; align-items: center; justify-content: center; transform: rotate(-45deg); transition: background .15s; }
.gf-pin-dot svg { transform: rotate(45deg); color: #fff; }
.gf-pin.selected .gf-pin-dot { background: var(--brand-700); box-shadow: 0 0 0 4px rgba(45,82,224,.35), 0 2px 8px rgba(0,0,0,.4); }
.gf-pin-dot.cat-restaurant { background: #e05050; }
.gf-pin-dot.cat-ministry { background: #8b5cf6; }
.gf-pin-dot.cat-nonprofit { background: #8b5cf6; }
.gf-pin-dot.cat-salon { background: #ec4899; }
.gf-pin-dot.cat-fitness { background: #10b981; }
.gf-pin-dot.cat-contractor { background: #f59e0b; }
.gf-pin-dot.cat-photography { background: #0ea5e9; }
.gf-pin-dot.cat-catering { background: #e05050; }
.gf-pin-dot.cat-law { background: #6366f1; }
.gf-pin-dot.cat-wellness { background: #10b981; }
.gf-pin-label { font-size: .64rem; font-weight: 700; color: #fff; background: rgba(15,23,42,.72); border-radius: 3px; padding: 2px 6px; margin-top: 3px; white-space: nowrap; max-width: 120px; overflow: hidden; text-overflow: ellipsis; pointer-events: none; }
.gf-pin:hover .gf-pin-label, .gf-pin.selected .gf-pin-label { background: var(--brand-700); }

/* List view */
.gf-list { display: flex; flex-direction: column; gap: 8px; }
.gf-prospect-card { background: var(--surface-1); border: 1px solid var(--line); border-radius: var(--radius); padding: 14px 16px; cursor: pointer; transition: border-color .15s, box-shadow .15s; display: flex; gap: 12px; align-items: flex-start; }
.gf-prospect-card:hover { border-color: var(--brand-300); box-shadow: 0 2px 8px rgba(0,0,0,.08); }
.gf-prospect-card.selected { border-color: var(--brand-500); box-shadow: 0 0 0 2px var(--brand-100); }
.gf-card-icon { width: 38px; height: 38px; border-radius: var(--radius); background: var(--surface-2); display: flex; align-items: center; justify-content: center; color: var(--brand-500); flex: none; font-size: .7rem; font-weight: 700; }
.gf-card-body { flex: 1; min-width: 0; }
.gf-card-top { display: flex; align-items: flex-start; gap: 8px; margin-bottom: 4px; }
.gf-card-name { font-size: .9rem; font-weight: 700; color: var(--ink); flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gf-card-cat { font-size: .75rem; color: var(--muted); margin-bottom: 5px; }
.gf-card-meta { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: .77rem; color: var(--ink-2); }
.gf-card-meta .sep { color: var(--line-2); }
.gf-score-mini { display: inline-flex; align-items: center; gap: 4px; font-size: .74rem; font-weight: 700; }
.gf-score-mini.opp { color: var(--brand-700); }
.gf-score-mini.fit { color: var(--pos, #16a34a); }
.gf-star { color: var(--warn); }
.gf-signals-row { display: flex; gap: 4px; flex-wrap: wrap; margin-top: 6px; }
.gf-sig-chip { font-size: .68rem; font-weight: 600; padding: 2px 7px; border-radius: var(--pill); background: var(--brand-50); border: 1px solid var(--brand-100); color: var(--brand-700); }

/* Detail panel */
.gf-detail { background: var(--surface-1); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; display: flex; flex-direction: column; max-height: 700px; }
.gf-detail-head { padding: 16px; border-bottom: 1px solid var(--line); background: var(--surface-2); }
.gf-detail-name { font-size: 1rem; font-weight: 700; color: var(--ink); margin-bottom: 3px; }
.gf-detail-cat { font-size: .78rem; color: var(--muted); margin-bottom: 10px; }
.gf-detail-actions { display: flex; gap: 6px; flex-wrap: wrap; }
.gf-detail-scroll { flex: 1; overflow-y: auto; padding: 16px; display: flex; flex-direction: column; gap: 14px; }
.gf-detail-section { display: flex; flex-direction: column; gap: 6px; }
.gf-detail-section h4 { font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); margin: 0; }
.gf-info-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; }
.gf-info-item { display: flex; flex-direction: column; gap: 2px; }
.gf-info-item span:first-child { font-size: .7rem; color: var(--muted); font-weight: 600; }
.gf-info-item span:last-child { font-size: .82rem; color: var(--ink); font-weight: 500; }
.gf-info-item a { color: var(--brand-600); font-size: .82rem; font-weight: 500; text-decoration: none; }
.gf-info-item a:hover { text-decoration: underline; }

/* Score gauges */
.gf-scores { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.gf-score-card { background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--radius); padding: 12px; text-align: center; }
.gf-score-card h5 { font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); margin: 0 0 6px; }
.gf-score-num { font-size: 2rem; font-weight: 900; line-height: 1; margin-bottom: 4px; }
.gf-score-num.opp { color: var(--brand-600); }
.gf-score-num.fit { color: var(--pos, #16a34a); }
.gf-score-track { height: 4px; background: var(--line); border-radius: 9px; overflow: hidden; margin-bottom: 5px; }
.gf-score-fill { height: 100%; border-radius: 9px; }
.gf-score-fill.opp { background: var(--brand-500); }
.gf-score-fill.fit { background: var(--pos, #16a34a); }
.gf-score-reason { font-size: .7rem; color: var(--muted); line-height: 1.4; }

/* AI analysis */
.gf-analysis-summary { font-size: .83rem; color: var(--ink-2); line-height: 1.55; padding: 10px 12px; background: var(--brand-50); border-radius: var(--radius); border-left: 3px solid var(--brand-400); }
.gf-obs-list { display: flex; flex-direction: column; gap: 8px; }
.gf-obs { background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--radius); padding: 10px 12px; }
.gf-obs-signal { font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--brand-600); margin-bottom: 4px; }
.gf-obs-what { font-size: .81rem; font-weight: 600; color: var(--ink); margin-bottom: 3px; }
.gf-obs-why { font-size: .79rem; color: var(--ink-2); line-height: 1.45; }
.gf-obs-conf { font-size: .68rem; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; margin-top: 4px; }
.gf-obs-conf.high { color: var(--pos, #16a34a); }
.gf-obs-conf.medium { color: var(--warn, #d97706); }
.gf-obs-conf.low { color: var(--muted); }
.gf-action-box { background: var(--brand-50); border: 1px solid var(--brand-200); border-radius: var(--radius); padding: 10px 12px; display: flex; flex-direction: column; gap: 5px; }
.gf-action-box .gf-action-label { font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--brand-700); }
.gf-action-box .gf-action-text { font-size: .82rem; color: var(--ink-2); line-height: 1.4; }
.gf-action-box .gf-angle { font-size: .8rem; font-style: italic; color: var(--ink-2); border-top: 1px solid var(--brand-100); margin-top: 4px; padding-top: 6px; }
.gf-pkg-chips { display: flex; flex-wrap: wrap; gap: 5px; }
.gf-pkg-chip { font-size: .75rem; font-weight: 600; padding: 4px 11px; border-radius: var(--pill); background: var(--surface-3); border: 1px solid var(--line); color: var(--ink-2); }

/* Compliance check */
.gf-compliance { display: flex; flex-direction: column; gap: 6px; }
.gf-comp-item { display: flex; align-items: center; gap: 8px; font-size: .81rem; padding: 6px 10px; border-radius: var(--radius); }
.gf-comp-item.ok { background: var(--pos-bg, #f0fdf4); color: var(--pos, #16a34a); }
.gf-comp-item.warn { background: var(--warn-bg, #fffbeb); color: var(--warn, #d97706); }
.gf-comp-item.fail { background: var(--neg-bg, #fef2f2); color: var(--neg, #dc2626); }

/* Lists panel */
.gf-lists-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px; margin-bottom: 20px; }
.gf-list-card { background: var(--surface-1); border: 1px solid var(--line); border-radius: var(--radius); padding: 14px 16px; cursor: pointer; transition: border-color .15s, box-shadow .15s; }
.gf-list-card:hover { border-color: var(--brand-300); box-shadow: 0 2px 8px rgba(0,0,0,.07); }
.gf-list-dot { width: 10px; height: 10px; border-radius: 50%; display: inline-block; margin-right: 8px; }
.gf-list-card-name { font-size: .9rem; font-weight: 700; color: var(--ink); display: flex; align-items: center; margin-bottom: 4px; }
.gf-list-card-desc { font-size: .78rem; color: var(--muted); margin-bottom: 10px; line-height: 1.4; }
.gf-list-card-meta { font-size: .77rem; color: var(--ink-2); font-weight: 600; }

/* Territories */
.gf-territories-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 12px; }
.gf-territory-card { background: var(--surface-1); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px; }
.gf-territory-top { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.gf-territory-color { width: 12px; height: 12px; border-radius: 50%; flex: none; }
.gf-territory-name { font-size: .9rem; font-weight: 700; color: var(--ink); flex: 1; }
.gf-territory-type { font-size: .72rem; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); }
.gf-territory-goals { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px; margin-top: 10px; }
.gf-territory-goal { text-align: center; }
.gf-territory-goal span:first-child { display: block; font-size: 1.1rem; font-weight: 800; color: var(--ink); }
.gf-territory-goal span:last-child { font-size: .68rem; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }
.gf-territory-prog { height: 4px; background: var(--line); border-radius: 9px; overflow: hidden; margin-top: 8px; }
.gf-territory-prog-fill { height: 100%; border-radius: 9px; }

/* ROI / stats */
.gf-roi-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 12px; margin-bottom: 24px; }
.gf-roi-card { background: var(--surface-1); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px; }
.gf-roi-card h4 { font-size: .71rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); margin: 0 0 6px; }
.gf-roi-card .gf-roi-num { font-size: 1.6rem; font-weight: 900; color: var(--ink); line-height: 1; margin-bottom: 3px; }
.gf-roi-card .gf-roi-sub { font-size: .74rem; color: var(--muted); }
.gf-funnel { display: flex; gap: 1px; align-items: flex-end; height: 60px; margin-bottom: 8px; }
.gf-funnel-bar { flex: 1; background: var(--brand-100); border-radius: 3px 3px 0 0; border: 1px solid var(--brand-200); min-height: 4px; transition: height .3s; cursor: default; }
.gf-funnel-bar:hover { background: var(--brand-200); }
.gf-funnel-labels { display: flex; gap: 1px; }
.gf-funnel-labels span { flex: 1; font-size: .6rem; text-align: center; color: var(--muted); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Warm prospects */
.gf-warm-list { display: flex; flex-direction: column; gap: 7px; }
.gf-warm-item { display: flex; align-items: center; gap: 10px; padding: 10px 12px; background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--radius); cursor: pointer; }
.gf-warm-item:hover { border-color: var(--brand-300); }
.gf-warm-icon { width: 32px; height: 32px; border-radius: 50%; background: var(--brand-100); display: flex; align-items: center; justify-content: center; color: var(--brand-600); flex: none; }
.gf-warm-name { font-size: .85rem; font-weight: 700; color: var(--ink); }
.gf-warm-sub { font-size: .76rem; color: var(--muted); }
.gf-warm-kind { font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; padding: 2px 8px; border-radius: var(--pill); }
.gf-warm-kind.dormant_client { background: var(--warn-bg, #fffbeb); color: var(--warn, #d97706); }
.gf-warm-kind.lost_deal { background: var(--neg-bg, #fef2f2); color: var(--neg, #dc2626); }

/* Source badge */
.gf-source-tag { display: inline-flex; align-items: center; gap: 4px; font-size: .69rem; font-weight: 600; color: var(--muted); background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--pill); padding: 2px 8px; }

/* Activity in detail */
.gf-act-list { display: flex; flex-direction: column; gap: 5px; }
.gf-act-item { display: flex; gap: 8px; align-items: flex-start; font-size: .79rem; color: var(--ink-2); }
.gf-act-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--brand-300); flex: none; margin-top: 5px; }
.gf-act-dot.contacted { background: var(--warn, #d97706); }
.gf-act-dot.analysis { background: var(--brand-500); }
.gf-act-dot.saved { background: var(--pos, #16a34a); }
.gf-act-dot.proposal { background: var(--brand-700); }
.gf-act-dot.converted { background: var(--pos, #16a34a); }
.gf-act-dot.pipeline { background: var(--brand-600); }
.gf-act-ts { font-size: .72rem; color: var(--muted); white-space: nowrap; flex: none; }

/* Provider abstraction banner */
.gf-providers-row { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 16px; }
.gf-provider-chip { display: inline-flex; align-items: center; gap: 6px; font-size: .76rem; font-weight: 600; padding: 5px 11px; border-radius: var(--pill); background: var(--surface-2); border: 1px solid var(--line); color: var(--ink-2); }
.gf-provider-chip.active { background: var(--brand-50); border-color: var(--brand-300); color: var(--brand-700); }
.gf-provider-chip.future { color: var(--muted); opacity: .7; }
.gf-provider-chip .gf-prov-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--line); }
.gf-provider-chip.active .gf-prov-dot { background: var(--pos, #16a34a); }

/* Empty state */
.gf-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 64px 24px; gap: 12px; color: var(--muted); }
.gf-empty svg { opacity: .35; }
.gf-empty h3 { font-size: 1rem; font-weight: 700; color: var(--ink); margin: 0; }
.gf-empty p { font-size: .85rem; margin: 0; max-width: 320px; }

/* Opportunity badge on card */
.gf-opp-badge { font-size: .7rem; font-weight: 800; padding: 3px 8px; border-radius: var(--pill); background: var(--brand-100); color: var(--brand-700); }
.gf-opp-badge.high { background: var(--brand-600); color: #fff; }
.gf-opp-badge.med { background: var(--brand-100); color: var(--brand-700); }

/* Compliance section */
.gf-readiness { display: flex; flex-direction: column; gap: 5px; background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--radius); padding: 12px 14px; margin-bottom: 12px; }
.gf-readiness h4 { font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); margin: 0 0 8px; }
.gf-ready-row { display: flex; align-items: center; gap: 8px; font-size: .8rem; }
.gf-ready-row .gf-ready-icon { flex: none; }
.gf-ready-row.ok { color: var(--pos, #16a34a); }
.gf-ready-row.warn { color: var(--warn, #d97706); }
.gf-ready-row.fail { color: var(--neg, #dc2626); }

/* Saved searches list */
.gf-saved-searches { display: flex; flex-direction: column; gap: 7px; margin-bottom: 20px; }
.gf-saved-search-row { display: flex; align-items: center; gap: 10px; padding: 10px 14px; background: var(--surface-1); border: 1px solid var(--line); border-radius: var(--radius); cursor: pointer; }
.gf-saved-search-row:hover { border-color: var(--brand-300); }
.gf-ss-name { font-size: .87rem; font-weight: 700; color: var(--ink); flex: 1; }
.gf-ss-meta { font-size: .76rem; color: var(--muted); }
.gf-ss-alert { font-size: .7rem; font-weight: 700; padding: 2px 8px; border-radius: var(--pill); }
.gf-ss-alert.on { background: var(--brand-50); color: var(--brand-700); border: 1px solid var(--brand-200); }
.gf-ss-alert.off { background: var(--surface-2); color: var(--muted); border: 1px solid var(--line); }

@media (max-width: 900px) {
  .gf-content { grid-template-columns: 1fr; }
  .gf-detail { max-height: none; }
  .gf-icp-body { grid-template-columns: 1fr; }
  .gf-info-grid { grid-template-columns: 1fr 1fr; }
  .gf-scores { grid-template-columns: 1fr 1fr; }
}

/* ============================================================
   Finance Operations — fin-* class family
   ============================================================ */

/* Summary stats grid */
.fin-summary { display: grid; grid-template-columns: repeat(6, 1fr); gap: 10px; margin-bottom: 18px; }

/* Alerts panel */
.fin-alerts-panel { background: var(--surface-1); border: 1px solid var(--warn-200, #fde68a); border-radius: var(--radius); margin-bottom: 16px; overflow: hidden; }
.fin-alerts-head { display: flex; align-items: center; justify-content: space-between; padding: 10px 14px; cursor: pointer; user-select: none; }
.fin-alerts-head:hover { background: var(--surface-2); }
.fin-ah-title { display: flex; align-items: center; gap: 7px; font-weight: 700; font-size: .87rem; color: var(--warn, #d97706); }
.fin-ah-count { background: var(--warn, #d97706); color: #fff; font-size: .7rem; font-weight: 800; padding: 2px 6px; border-radius: var(--pill); }
.fin-ah-chevron { color: var(--muted); transition: transform .15s; }
.fin-alerts-panel:not(.collapsed) .fin-ah-chevron { transform: rotate(90deg); }
.fin-alerts-body { display: flex; flex-direction: column; gap: 0; border-top: 1px solid var(--line); }
.fin-alert { display: flex; align-items: center; gap: 10px; padding: 9px 14px; border-bottom: 1px solid var(--line); font-size: .84rem; }
.fin-alert:last-child { border-bottom: none; }
.fin-alert-warn { background: var(--surface-1); }
.fin-alert-neg { background: color-mix(in srgb, var(--neg, #dc2626) 5%, transparent); }
.fin-alert-info { background: color-mix(in srgb, var(--brand-400) 5%, transparent); }
.fin-alert-ico { flex: none; color: var(--muted); }
.fin-alert-warn .fin-alert-ico { color: var(--warn, #d97706); }
.fin-alert-neg .fin-alert-ico { color: var(--neg, #dc2626); }
.fin-alert-body { flex: 1; display: flex; flex-direction: column; gap: 1px; }
.fin-alert-body b { font-weight: 700; color: var(--ink); }
.fin-alert-body span { color: var(--muted); font-size: .8rem; }
.fin-alert-go { margin-left: auto; flex: none; }

/* Tab bar */
.fin-tabs { display: flex; gap: 2px; border-bottom: 2px solid var(--line); margin-bottom: 16px; overflow-x: auto; position: sticky; top: 0; background: var(--canvas); z-index: 10; padding-top: 2px; }
.fin-tab { padding: 8px 16px; font-size: .85rem; font-weight: 600; color: var(--muted); background: none; border: none; border-bottom: 2px solid transparent; cursor: pointer; white-space: nowrap; transition: color .12s; margin-bottom: -2px; display: flex; align-items: center; gap: 6px; }
.fin-tab:hover { color: var(--ink); }
.fin-tab.on { color: var(--brand-600); border-bottom-color: var(--brand-600); }
.fin-tab-body { min-height: 200px; }

/* Expense type chips */
.fin-type-chip { display: inline-block; font-size: .68rem; font-weight: 700; padding: 2px 7px; border-radius: var(--pill); background: var(--surface-2); border: 1px solid var(--line); color: var(--muted); margin: 1px; }
.fin-billable-chip { display: inline-flex; align-items: center; gap: 3px; font-size: .7rem; font-weight: 700; color: var(--brand-600); background: var(--brand-50); border: 1px solid var(--brand-100); border-radius: var(--pill); padding: 1px 7px; margin-top: 3px; }
.fin-state-badge { font-size: .72rem; }
.fin-dup-flag { display: inline-flex; align-items: center; gap: 3px; font-size: .7rem; font-weight: 700; color: var(--neg, #dc2626); background: color-mix(in srgb, var(--neg, #dc2626) 8%, transparent); border-radius: var(--pill); padding: 1px 6px; border: 1px solid color-mix(in srgb, var(--neg, #dc2626) 20%, transparent); margin-left: 4px; }
.fin-ca-badge { font-size: .7rem; color: var(--warn, #d97706); margin-top: 3px; }
.fin-reserved { font-weight: 700; color: var(--warn, #d97706); }

/* Expense table */
.fin-exp-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; flex-wrap: wrap; }
.fin-exp-filters { display: flex; gap: 4px; flex-wrap: wrap; }
.fin-ef { padding: 5px 12px; font-size: .8rem; font-weight: 600; border: 1px solid var(--line); border-radius: var(--pill); background: var(--surface-1); color: var(--muted); cursor: pointer; transition: all .12s; }
.fin-ef:hover, .fin-ef.on { background: var(--brand-600); color: #fff; border-color: var(--brand-600); }
.fin-exp-tools { display: flex; align-items: center; gap: 8px; }
.fin-exp-panel, .fin-po-panel { overflow-x: auto; }
.fin-exp-tbl, .fin-po-tbl { min-width: 700px; }
.fin-exp-row:hover, .fin-po-row:hover { background: var(--surface-2); cursor: pointer; }
.fin-exp-row.fin-dup { background: color-mix(in srgb, var(--neg, #dc2626) 4%, transparent); }
.fin-er-name { font-weight: 700; font-size: .87rem; color: var(--ink); }
.fin-er-sub { font-size: .75rem; color: var(--muted); display: flex; align-items: center; gap: 4px; margin-top: 2px; }
.fin-po-num b { font-size: .87rem; }
.fin-over-badge { display: inline-block; font-size: .65rem; font-weight: 900; padding: 2px 6px; background: var(--neg, #dc2626); color: #fff; border-radius: 3px; margin-left: 6px; text-transform: uppercase; letter-spacing: .04em; }

/* Purchase Orders toolbar */
.fin-po-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; flex-wrap: wrap; }
.fin-po-approve-hint { font-size: .82rem; color: var(--warn, #d97706); display: flex; align-items: center; gap: 6px; background: var(--surface-2); border-radius: var(--radius); padding: 8px 12px; margin-top: 8px; }

/* Inbox */
.fin-inbox-list { display: flex; flex-direction: column; gap: 0; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.fin-inbox-item { display: flex; align-items: center; gap: 12px; padding: 11px 14px; border-bottom: 1px solid var(--line); cursor: pointer; background: var(--surface-1); transition: background .1s; }
.fin-inbox-item:last-child { border-bottom: none; }
.fin-inbox-item:hover { background: var(--surface-2); }
.fin-inbox-item.has-dup { border-left: 3px solid var(--neg, #dc2626); }
.fin-ii-icon { flex: none; width: 36px; height: 36px; border-radius: 50%; background: var(--surface-2); border: 1px solid var(--line); display: flex; align-items: center; justify-content: center; color: var(--muted); }
.fin-ii-receipt .fin-ii-icon, .fin-ii-email-receipt .fin-ii-icon { background: color-mix(in srgb, var(--brand-400) 10%, transparent); color: var(--brand-600); }
.fin-ii-supplier-invoice .fin-ii-icon, .fin-ii-contractor-bill .fin-ii-icon { background: color-mix(in srgb, var(--warn, #d97706) 10%, transparent); color: var(--warn, #d97706); }
.fin-ii-unmatched .fin-ii-icon { background: color-mix(in srgb, var(--neg, #dc2626) 10%, transparent); color: var(--neg, #dc2626); }
.fin-ii-body { flex: 1; min-width: 0; }
.fin-ii-title { font-weight: 700; font-size: .87rem; color: var(--ink); display: flex; align-items: center; flex-wrap: wrap; gap: 4px; }
.fin-ii-meta { font-size: .78rem; color: var(--muted); margin-top: 2px; }
.fin-ii-actions { display: flex; gap: 6px; flex: none; }
.fin-dup-warn { background: color-mix(in srgb, var(--neg, #dc2626) 8%, transparent); border: 1px solid color-mix(in srgb, var(--neg, #dc2626) 20%, transparent); border-radius: var(--radius); padding: 8px 12px; font-size: .82rem; color: var(--neg, #dc2626); display: flex; align-items: center; gap: 6px; margin-bottom: 12px; }
.fin-inbox-footer { padding: 10px 14px; border-top: 1px solid var(--line); background: var(--surface-2); }

/* Reimbursements board */
.fin-reimb-board { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.fin-reimb-col { display: flex; flex-direction: column; gap: 8px; }
.fin-rc-head { font-size: .75rem; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); padding: 4px 0 8px; border-bottom: 2px solid var(--line); margin-bottom: 4px; display: flex; align-items: center; gap: 6px; }
.fin-reimb-card { background: var(--surface-1); border: 1px solid var(--line); border-radius: var(--radius); padding: 11px 13px; display: flex; flex-direction: column; gap: 4px; cursor: pointer; transition: border-color .12s; }
.fin-reimb-card:hover { border-color: var(--brand-300); }
.fin-rc-who { font-weight: 700; font-size: .87rem; color: var(--ink); }
.fin-rc-desc { font-size: .8rem; color: var(--muted); }
.fin-rc-meta { font-size: .75rem; color: var(--muted); }
.fin-rc-amount { font-weight: 800; font-size: 1rem; color: var(--ink); margin-top: 2px; }
.fin-rc-empty { font-size: .82rem; color: var(--muted); text-align: center; padding: 16px 0; }

/* Reports */
.fin-reports { display: flex; flex-direction: column; gap: 16px; }
.fin-reports-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.fin-report-card { background: var(--surface-1); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.fin-rc-title { display: flex; align-items: center; gap: 8px; padding: 12px 16px; font-weight: 700; font-size: .9rem; border-bottom: 1px solid var(--line); background: var(--surface-2); color: var(--ink); }
.fin-rc-body { padding: 14px 16px; display: flex; flex-direction: column; gap: 10px; }
.fin-cogs-row { display: flex; justify-content: space-between; font-size: .85rem; }
.fin-cogs-bar { height: 8px; background: var(--line); border-radius: 4px; overflow: hidden; }
.fin-cogs-bar i { display: block; height: 100%; background: var(--brand-600); border-radius: 4px; }
.fin-cogs-sub { font-size: .78rem; }
.fin-missing-count { font-weight: 700; font-size: .95rem; color: var(--neg, #dc2626); }
.fin-missing-row { font-size: .8rem; color: var(--muted); padding: 3px 0; border-bottom: 1px dashed var(--line); }
.fin-pkg-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.fin-pkg-item { display: flex; align-items: flex-start; gap: 9px; padding: 8px 10px; background: var(--surface-2); border-radius: var(--radius); }
.fin-pkg-ico { flex: none; color: var(--brand-600); margin-top: 1px; }
.fin-pkg-item b { display: block; font-size: .83rem; font-weight: 700; color: var(--ink); }
.fin-pkg-item span { font-size: .76rem; color: var(--muted); }
.fin-pkg-disclaimer { font-size: .77rem; color: var(--muted); background: var(--surface-2); border-radius: var(--radius); padding: 8px 10px; display: flex; align-items: flex-start; gap: 6px; border: 1px solid var(--line); }
.fin-pkg-actions { display: flex; gap: 8px; }
.fin-report-pkg .fin-rc-body { gap: 12px; }
.fin-proj-budget-row { display: flex; flex-direction: column; gap: 4px; padding: 8px 0; border-bottom: 1px solid var(--line); }
.fin-proj-budget-row:last-child { border-bottom: none; }
.fin-pb-name { font-weight: 700; font-size: .87rem; color: var(--ink); }
.fin-pb-bar-wrap { display: flex; align-items: center; gap: 8px; }
.fin-pb-bar { flex: 1; height: 8px; background: var(--line); border-radius: 4px; position: relative; overflow: hidden; }
.fin-pb-spent { display: block; position: absolute; top: 0; left: 0; height: 100%; background: var(--brand-600); border-radius: 4px; }
.fin-pb-committed { display: block; position: absolute; top: 0; height: 100%; background: var(--warn, #d97706); opacity: .7; }
.fin-pb-pct { font-size: .75rem; font-weight: 700; color: var(--muted); flex: none; min-width: 32px; text-align: right; }
.fin-pb-pct.risk { color: var(--neg, #dc2626); }
.fin-pb-meta { font-size: .76rem; color: var(--muted); display: flex; gap: 6px; flex-wrap: wrap; }

/* Expense form modal */
.fin-exp-form .fin-ef-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.fin-type-checks { display: flex; flex-wrap: wrap; gap: 6px; padding: 8px 0; }
.fin-type-check { display: flex; align-items: center; gap: 6px; font-size: .82rem; cursor: pointer; }
.fin-type-check input { accent-color: var(--brand-600); }
.fin-ef-switches { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; padding: 4px 0; grid-column: 1 / -1; }
.fin-sw-label { display: flex; align-items: center; gap: 7px; font-size: .85rem; cursor: pointer; }
.fin-inbox-process .fin-ip-meta { font-size: .85rem; color: var(--muted); margin-bottom: 10px; display: flex; gap: 6px; flex-wrap: wrap; }

@media (max-width: 900px) {
  .fin-summary { grid-template-columns: repeat(3, 1fr); }
  .fin-reimb-board { grid-template-columns: 1fr; }
  .fin-reports-row { grid-template-columns: 1fr; }
  .fin-exp-form .fin-ef-row { grid-template-columns: 1fr; }
  .fin-ef-row { grid-template-columns: 1fr !important; }
  .fin-pkg-grid { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
  .fin-summary { grid-template-columns: repeat(2, 1fr); }
  .fin-tabs { gap: 0; }
  .fin-tab { padding: 7px 10px; font-size: .78rem; }
}

/* ============================================================
   Growth Engine
   ============================================================ */

/* Shell & tabs (reuse gf-shell / gf-tabs / gf-body patterns) */
.ge-shell { display: flex; flex-direction: column; gap: 0; height: 100%; min-height: 0; }
.ge-header { padding: 22px 24px 0; flex: none; }
.ge-title-row { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.ge-title-row h1 { font-size: 1.25rem; font-weight: 700; letter-spacing: -.02em; color: var(--ink); flex: 1; }
.ge-tabs { display: flex; gap: 2px; border-bottom: 1px solid var(--line); padding: 0 24px; flex: none; }
.ge-tab { padding: 9px 14px; font-size: .84rem; font-weight: 600; color: var(--muted); background: none; border: none; border-bottom: 2px solid transparent; cursor: pointer; display: flex; align-items: center; gap: 6px; transition: color .15s; }
.ge-tab:hover { color: var(--ink); }
.ge-tab.active { color: var(--brand-700); border-bottom-color: var(--brand-500); }
.ge-body { flex: 1; min-height: 0; overflow-y: auto; padding: 20px 24px 24px; }

/* Health banner */
.ge-health-banner { display: grid; grid-template-columns: auto 1fr auto auto; gap: 16px; align-items: center; background: var(--surface-1); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px 20px; margin-bottom: 20px; }
.ge-score-ring { width: 72px; height: 72px; position: relative; flex: none; }
.ge-score-ring svg { transform: rotate(-90deg); }
.ge-score-ring-val { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; font-size: 1.35rem; font-weight: 900; color: var(--ink); line-height: 1; }
.ge-score-ring-val span { font-size: .6rem; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }
.ge-health-info h2 { font-size: 1rem; font-weight: 700; color: var(--ink); margin: 0 0 4px; }
.ge-health-sub { font-size: .81rem; color: var(--muted); margin: 0; }
.ge-health-stat { text-align: right; }
.ge-health-stat .ge-hs-num { font-size: 1.4rem; font-weight: 900; color: var(--ink); line-height: 1; }
.ge-health-stat .ge-hs-label { font-size: .72rem; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }
.ge-health-banner.slow { border-color: var(--warn, #d97706); background: var(--warn-bg, #fffbeb); }
.ge-health-banner.slow .ge-health-info h2 { color: var(--warn, #d97706); }

/* Slow mode alert strip */
.ge-slow-strip { display: flex; align-items: center; gap: 12px; background: var(--warn-bg, #fffbeb); border: 1.5px solid var(--warn, #d97706); border-radius: var(--radius); padding: 12px 16px; margin-bottom: 16px; }
.ge-slow-strip .ge-slow-text { flex: 1; font-size: .85rem; color: var(--ink); }
.ge-slow-strip .ge-slow-text b { color: var(--warn, #d97706); }

/* Recommendations */
.ge-rec-list { display: flex; flex-direction: column; gap: 8px; }
.ge-rec { background: var(--surface-1); border: 1px solid var(--line); border-radius: var(--radius); padding: 14px 16px; display: flex; gap: 12px; align-items: flex-start; transition: border-color .15s; }
.ge-rec:hover { border-color: var(--brand-300); }
.ge-rec.urgent { border-left: 3px solid var(--neg); }
.ge-rec.high { border-left: 3px solid var(--warn, #d97706); }
.ge-rec.medium { border-left: 3px solid var(--brand-400); }
.ge-rec.low { border-left: 3px solid var(--line-2); }
.ge-rec-icon { width: 36px; height: 36px; border-radius: var(--radius); display: flex; align-items: center; justify-content: center; flex: none; }
.ge-rec.urgent .ge-rec-icon { background: var(--neg-bg, #fef2f2); color: var(--neg); }
.ge-rec.high .ge-rec-icon { background: var(--warn-bg, #fffbeb); color: var(--warn, #d97706); }
.ge-rec.medium .ge-rec-icon { background: var(--brand-50); color: var(--brand-600); }
.ge-rec.low .ge-rec-icon { background: var(--surface-2); color: var(--muted); }
.ge-rec-body { flex: 1; min-width: 0; }
.ge-rec-cat { font-size: .69rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); margin-bottom: 3px; }
.ge-rec-title { font-size: .9rem; font-weight: 700; color: var(--ink); margin-bottom: 3px; }
.ge-rec-sub { font-size: .8rem; color: var(--ink-2); line-height: 1.45; }
.ge-rec-actions { display: flex; align-items: center; gap: 6px; margin-top: 10px; }
.ge-dismiss { font-size: .73rem; color: var(--muted); background: none; border: none; cursor: pointer; padding: 2px 0; }
.ge-dismiss:hover { color: var(--neg); }

/* Stats grid in Command Center */
.ge-stats-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 10px; margin-bottom: 20px; }
.ge-stat-card { background: var(--surface-1); border: 1px solid var(--line); border-radius: var(--radius); padding: 14px; }
.ge-stat-card h4 { font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); margin: 0 0 5px; }
.ge-stat-num { font-size: 1.6rem; font-weight: 900; color: var(--ink); line-height: 1; margin-bottom: 3px; }
.ge-stat-sub { font-size: .73rem; color: var(--muted); }
.ge-stat-card.pos .ge-stat-num { color: var(--pos, #16a34a); }
.ge-stat-card.warn .ge-stat-num { color: var(--warn, #d97706); }
.ge-stat-card.neg .ge-stat-num { color: var(--neg); }

/* Source performance table */
.ge-source-table { width: 100%; border-collapse: collapse; font-size: .82rem; }
.ge-source-table th { text-align: left; font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); padding: 6px 10px; border-bottom: 1px solid var(--line); }
.ge-source-table td { padding: 8px 10px; border-bottom: 1px solid var(--line); color: var(--ink-2); }
.ge-source-table td:last-child { color: var(--ink); font-weight: 600; text-align: right; }
.ge-source-table tr:last-child td { border-bottom: none; }
.ge-perf-bar { height: 5px; background: var(--brand-200); border-radius: 9px; overflow: hidden; margin-top: 3px; }
.ge-perf-fill { height: 100%; background: var(--brand-500); border-radius: 9px; }

/* Goal Engine */
.ge-goal-hero { background: linear-gradient(135deg, var(--brand-600) 0%, var(--brand-700) 100%); border-radius: var(--radius); padding: 24px; color: #fff; margin-bottom: 20px; display: flex; gap: 20px; align-items: center; }
.ge-goal-hero-left { flex: 1; }
.ge-goal-hero-left h2 { font-size: 1.1rem; font-weight: 800; margin: 0 0 4px; }
.ge-goal-hero-left p { font-size: .84rem; opacity: .8; margin: 0 0 14px; }
.ge-goal-input-row { display: flex; gap: 8px; align-items: center; }
.ge-goal-input-row input { background: rgba(255,255,255,.15); border: 1px solid rgba(255,255,255,.25); border-radius: var(--radius); color: #fff; font-size: 1.1rem; font-weight: 700; padding: 8px 12px; width: 150px; }
.ge-goal-input-row input::placeholder { color: rgba(255,255,255,.55); }
.ge-goal-input-row button { background: rgba(255,255,255,.15); border: 1px solid rgba(255,255,255,.25); border-radius: var(--radius); color: #fff; font-size: .82rem; font-weight: 700; padding: 8px 16px; cursor: pointer; }
.ge-goal-input-row button:hover { background: rgba(255,255,255,.25); }
.ge-goal-hero-right { text-align: right; flex: none; }
.ge-goal-hero-right .ge-goal-pct { font-size: 2.4rem; font-weight: 900; line-height: 1; }
.ge-goal-hero-right .ge-goal-pct-label { font-size: .75rem; opacity: .7; }
.ge-goal-progress-bar { height: 6px; background: rgba(255,255,255,.2); border-radius: 9px; overflow: hidden; margin-top: 10px; }
.ge-goal-progress-fill { height: 100%; background: rgba(255,255,255,.8); border-radius: 9px; }

.ge-breakdown-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 10px; margin-bottom: 20px; }
.ge-bd-card { background: var(--surface-1); border: 1px solid var(--line); border-radius: var(--radius); padding: 14px 16px; display: flex; flex-direction: column; gap: 4px; }
.ge-bd-num { font-size: 1.6rem; font-weight: 900; color: var(--brand-600); line-height: 1; }
.ge-bd-label { font-size: .73rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); }
.ge-bd-hint { font-size: .76rem; color: var(--ink-2); }
.ge-pkg-recs { display: flex; flex-wrap: wrap; gap: 8px; }
.ge-pkg-rec { display: flex; align-items: center; gap: 8px; background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--radius); padding: 10px 14px; }
.ge-pkg-rec .ge-pkg-name { font-size: .85rem; font-weight: 700; color: var(--ink); }
.ge-pkg-rec .ge-pkg-why { font-size: .77rem; color: var(--muted); }

/* Slow Mode recovery plan */
.ge-slow-header { display: flex; align-items: center; gap: 14px; padding: 20px; background: linear-gradient(135deg, #92400e 0%, #b45309 100%); border-radius: var(--radius); color: #fff; margin-bottom: 20px; }
.ge-slow-header.off { background: var(--surface-2); color: var(--ink); }
.ge-slow-header h2 { font-size: 1rem; font-weight: 800; margin: 0 0 3px; }
.ge-slow-header p { font-size: .82rem; opacity: .8; margin: 0; }
.ge-slow-header.off h2, .ge-slow-header.off p { opacity: .7; }
.ge-recovery-plan { display: flex; flex-direction: column; gap: 8px; margin-bottom: 20px; }
.ge-recovery-step { display: flex; align-items: flex-start; gap: 12px; background: var(--surface-1); border: 1px solid var(--line); border-radius: var(--radius); padding: 14px 16px; }
.ge-recovery-step.done { opacity: .55; }
.ge-step-num { width: 26px; height: 26px; border-radius: 50%; background: var(--brand-100); color: var(--brand-700); font-size: .78rem; font-weight: 800; display: flex; align-items: center; justify-content: center; flex: none; }
.ge-recovery-step.done .ge-step-num { background: var(--pos-bg, #f0fdf4); color: var(--pos, #16a34a); }
.ge-step-body { flex: 1; }
.ge-step-body h4 { font-size: .88rem; font-weight: 700; color: var(--ink); margin: 0 0 3px; }
.ge-step-body p { font-size: .8rem; color: var(--muted); margin: 0; line-height: 1.4; }

/* Workflows */
.ge-workflow-list { display: flex; flex-direction: column; gap: 8px; }
.ge-workflow-row { display: flex; align-items: flex-start; gap: 12px; background: var(--surface-1); border: 1px solid var(--line); border-radius: var(--radius); padding: 14px 16px; }
.ge-wf-body { flex: 1; }
.ge-wf-name { font-size: .88rem; font-weight: 700; color: var(--ink); margin-bottom: 3px; display: flex; align-items: center; gap: 8px; }
.ge-wf-desc { font-size: .79rem; color: var(--muted); line-height: 1.4; }
.ge-wf-meta { font-size: .72rem; color: var(--muted); margin-top: 5px; }
.ge-wf-badge { font-size: .67rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; padding: 2px 7px; border-radius: var(--pill); }
.ge-wf-badge.approval { background: var(--warn-bg, #fffbeb); color: var(--warn, #d97706); border: 1px solid var(--warn, #d97706); }
.ge-wf-badge.auto { background: var(--brand-50); color: var(--brand-700); border: 1px solid var(--brand-200); }
.ge-wf-badge.locked { background: var(--surface-2); color: var(--muted); border: 1px solid var(--line); }
.ge-approval-note { background: var(--brand-50); border: 1px solid var(--brand-200); border-radius: var(--radius); padding: 12px 16px; margin-top: 16px; font-size: .82rem; color: var(--brand-700); line-height: 1.5; }

/* Pipeline gauge strip */
.ge-pipeline-gauge { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }
.ge-gauge-label { font-size: .78rem; color: var(--muted); white-space: nowrap; }
.ge-gauge-track { flex: 1; height: 8px; background: var(--line); border-radius: 9px; overflow: hidden; }
.ge-gauge-fill { height: 100%; border-radius: 9px; transition: width .4s; }
.ge-gauge-fill.good { background: var(--pos, #16a34a); }
.ge-gauge-fill.warn { background: var(--warn, #d97706); }
.ge-gauge-fill.neg { background: var(--neg); }
.ge-gauge-val { font-size: .82rem; font-weight: 700; color: var(--ink); white-space: nowrap; }

/* Alert items */
.ge-alert-list { display: flex; flex-direction: column; gap: 6px; margin-bottom: 16px; }
.ge-alert-item { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-radius: var(--radius); font-size: .82rem; }
.ge-alert-item.pipeline { background: var(--neg-bg, #fef2f2); color: var(--neg); border: 1px solid var(--neg); }
.ge-alert-item.info { background: var(--brand-50); color: var(--brand-700); border: 1px solid var(--brand-200); }
.ge-alert-item.ok { background: var(--pos-bg, #f0fdf4); color: var(--pos, #16a34a); border: 1px solid var(--pos, #16a34a); }

@media (max-width: 900px) {
  .ge-health-banner { grid-template-columns: auto 1fr; }
  .ge-health-stat { display: none; }
  .ge-breakdown-grid { grid-template-columns: repeat(2, 1fr); }
  .ge-stats-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ============================================================
   Finance Console — fc-* class family (console layout)
   ============================================================ */

.fc-console { display: grid; grid-template-columns: 200px 1fr; gap: 0; min-height: 600px; background: var(--surface-1); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; margin-top: 4px; }
.fc-side { background: var(--surface-2); border-right: 1px solid var(--line); padding: 12px 0; }
.fc-nav { display: flex; flex-direction: column; gap: 0; }
.fc-nav-sect { font-size: .67rem; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); padding: 12px 14px 4px; }
.fc-nav-item { display: flex; align-items: center; gap: 9px; padding: 8px 14px; font-size: .84rem; font-weight: 500; color: var(--muted); background: none; border: none; cursor: pointer; text-align: left; width: 100%; transition: background .1s, color .1s; }
.fc-nav-item:hover { background: var(--surface-1); color: var(--ink); }
.fc-nav-item.on { background: var(--brand-50); color: var(--brand-700); font-weight: 700; }
.fc-nav-ico { flex: none; }
.fc-nav-lbl { flex: 1; }
.fc-nav-badge { background: var(--warn, #d97706); color: #fff; font-size: .65rem; font-weight: 800; padding: 2px 6px; border-radius: var(--pill); }
.fc-main { padding: 24px; overflow-x: auto; }
.fc-sec-head { margin-bottom: 18px; }
.fc-sec-head h2 { font-size: 1.1rem; font-weight: 800; margin: 0 0 4px; color: var(--ink); display: flex; align-items: center; gap: 8px; }
.fc-sec-head p { margin: 0; font-size: .84rem; }
.fc-stat-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 10px; margin-bottom: 18px; }
.fc-panel { background: var(--surface-1); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; margin-bottom: 14px; }
.fc-panel-head { display: flex; align-items: center; gap: 8px; padding: 10px 16px; font-weight: 700; font-size: .88rem; border-bottom: 1px solid var(--line); background: var(--surface-2); color: var(--ink); }
.fc-panel-body { padding: 14px 16px; }
.fc-panel-foot { padding: 10px 16px; border-top: 1px solid var(--line); background: var(--surface-2); }
.fc-two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 14px; }
.fc-two-col .fc-panel { margin-bottom: 0; }
.fc-alert-list { display: flex; flex-direction: column; gap: 0; }
.fc-alert-row { display: flex; align-items: center; gap: 10px; padding: 9px 14px; border-bottom: 1px solid var(--line); font-size: .84rem; }
.fc-alert-row:last-child { border-bottom: none; }
.fc-alert-warn { background: var(--surface-1); }
.fc-alert-neg { background: color-mix(in srgb, var(--neg, #dc2626) 5%, transparent); }
.fc-alert-info { background: color-mix(in srgb, var(--brand-400) 4%, transparent); }
.fc-alert-ico { flex: none; }
.fc-alert-warn .fc-alert-ico { color: var(--warn, #d97706); }
.fc-alert-neg .fc-alert-ico { color: var(--neg, #dc2626); }
.fc-alert-body { flex: 1; display: flex; flex-direction: column; gap: 1px; }
.fc-alert-body b { font-weight: 700; }
.fc-alert-body span { font-size: .78rem; color: var(--muted); }
.fc-ai-insight { display: flex; align-items: flex-start; gap: 9px; padding: 8px 0; border-bottom: 1px dashed var(--line); font-size: .83rem; }
.fc-ai-insight:last-child { border-bottom: none; }
.fc-ai-pos { color: var(--pos, #16a34a); }
.fc-ai-warn { color: var(--warn, #d97706); }
.fc-ai-neg { color: var(--neg, #dc2626); }
.fc-ai-info { color: var(--brand-600); }
.fc-proj-health-row { padding: 8px 0; border-bottom: 1px solid var(--line); display: flex; flex-direction: column; gap: 4px; }
.fc-proj-health-row:last-child { border-bottom: none; }
.fc-ph-name { font-weight: 700; font-size: .87rem; }
.fc-ph-bar-wrap { display: flex; align-items: center; gap: 8px; }
.fc-ph-bar { flex: 1; height: 8px; background: var(--line); border-radius: 4px; position: relative; overflow: hidden; }
.fc-ph-spent { display: block; position: absolute; top: 0; left: 0; height: 100%; background: var(--brand-600); }
.fc-ph-committed { display: block; position: absolute; top: 0; height: 100%; background: var(--warn, #d97706); opacity: .75; }
.fc-ph-pct { font-size: .75rem; font-weight: 700; flex: none; }
.fc-ph-pct.risk { color: var(--neg, #dc2626); }
.fc-ph-detail { font-size: .76rem; color: var(--muted); }
.fc-ph-action { font-size: .76rem; color: var(--brand-600); font-weight: 600; }
.fc-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; flex-wrap: wrap; }
.fc-filter-bar { display: flex; gap: 4px; flex-wrap: wrap; }
.fc-exp-total { font-size: .82rem; color: var(--muted); margin-bottom: 8px; }
.fc-exp-tbl { min-width: 700px; }
.fc-exp-row:hover { background: var(--surface-2); cursor: pointer; }
.fc-exp-row.fin-dup { background: color-mix(in srgb, var(--neg, #dc2626) 4%, transparent); }
.fc-er-name { font-weight: 700; font-size: .87rem; }
.fc-er-sub { font-size: .74rem; color: var(--muted); display: flex; align-items: center; gap: 3px; margin-top: 2px; }
.fc-ca-badge { font-size: .72rem; color: var(--warn, #d97706); margin-top: 2px; }
.fc-inbox-list { display: flex; flex-direction: column; gap: 0; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.fc-inbox-item { display: flex; align-items: center; gap: 12px; padding: 11px 14px; border-bottom: 1px solid var(--line); cursor: pointer; background: var(--surface-1); transition: background .1s; }
.fc-inbox-item:last-child { border-bottom: none; }
.fc-inbox-item:hover { background: var(--surface-2); }
.fc-inbox-item.has-dup { border-left: 3px solid var(--neg, #dc2626); }
.fc-ii-ico { flex: none; width: 36px; height: 36px; border-radius: 50%; background: var(--surface-2); border: 1px solid var(--line); display: flex; align-items: center; justify-content: center; color: var(--muted); }
.fc-ii-body { flex: 1; min-width: 0; }
.fc-ii-title { font-weight: 700; font-size: .87rem; color: var(--ink); display: flex; align-items: center; flex-wrap: wrap; gap: 4px; }
.fc-ii-meta { font-size: .78rem; color: var(--muted); margin-top: 2px; }
.fc-ii-date { font-size: .73rem; color: var(--muted); margin-top: 2px; }
.fc-ii-acts { display: flex; gap: 6px; flex: none; }
.fc-inbox-detail { background: var(--surface-2); border-radius: var(--radius); padding: 12px 14px; margin-bottom: 12px; }
.fc-id-title { font-weight: 700; font-size: .95rem; margin-bottom: 6px; }
.fc-id-meta { font-size: .83rem; color: var(--muted); display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-bottom: 6px; }
.fc-id-notes { font-size: .82rem; margin-top: 4px; }
.fc-sup-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; margin-bottom: 18px; }
.fc-sup-section-label { font-size: .74rem; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); margin-bottom: 8px; display: flex; align-items: center; gap: 6px; }
.fc-sup-card { background: var(--surface-1); border: 1px solid var(--line); border-radius: var(--radius); padding: 14px; cursor: pointer; transition: border-color .12s; }
.fc-sup-card:hover { border-color: var(--brand-300); }
.fc-sup-card-head { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.fc-sup-av { width: 36px; height: 36px; border-radius: 50%; background: var(--brand-100); color: var(--brand-700); display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: .78rem; flex: none; }
.fc-sup-id { flex: 1; min-width: 0; }
.fc-sup-name { font-weight: 700; font-size: .9rem; color: var(--ink); display: flex; align-items: center; gap: 5px; }
.fc-sup-type { font-size: .76rem; color: var(--muted); }
.fc-pref-star { color: var(--warn, #d97706); }
.fc-sup-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin-bottom: 8px; }
.fc-sup-stat { display: flex; flex-direction: column; }
.fc-sup-stat span { font-size: .7rem; color: var(--muted); }
.fc-sup-stat b { font-size: .85rem; font-weight: 700; }
.fc-sup-contact { font-size: .78rem; color: var(--muted); display: flex; align-items: center; gap: 4px; }
.fc-w9-badge { font-size: .73rem; font-weight: 600; display: flex; align-items: center; gap: 4px; margin-top: 4px; }
.fc-w9-badge.warn { color: var(--warn, #d97706); }
.fc-sup-modal-stats { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; background: var(--surface-2); border-radius: var(--radius); padding: 12px; margin-bottom: 12px; }
.fc-sms-item { display: flex; flex-direction: column; }
.fc-sms-item span { font-size: .72rem; color: var(--muted); }
.fc-sms-item b { font-size: .9rem; font-weight: 700; }
.fc-sup-proj-list { display: flex; flex-wrap: wrap; gap: 6px; padding-top: 4px; }
.fc-sup-spend { display: flex; flex-direction: column; gap: 6px; }
.fc-sup-row { display: flex; justify-content: space-between; font-size: .84rem; padding: 4px 0; border-bottom: 1px dashed var(--line); }
.fc-sup-row:last-child { border-bottom: none; }
.fc-po-row:hover { background: var(--surface-2); cursor: pointer; }
.fc-po-num b { font-size: .87rem; }
.fc-po-hint { font-size: .82rem; color: var(--warn, #d97706); display: flex; align-items: center; gap: 6px; background: var(--surface-2); border-radius: var(--radius); padding: 8px 12px; margin-top: 8px; }
.fc-reimb-board { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.fc-reimb-col { display: flex; flex-direction: column; gap: 8px; }
.fc-rc-head { font-size: .74rem; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); padding: 4px 0 8px; border-bottom: 2px solid var(--line); display: flex; align-items: center; gap: 6px; }
.fc-reimb-card { background: var(--surface-1); border: 1px solid var(--line); border-radius: var(--radius); padding: 11px 13px; display: flex; flex-direction: column; gap: 4px; cursor: pointer; transition: border-color .12s; }
.fc-reimb-card:hover { border-color: var(--brand-300); }
.fc-rc-who { font-weight: 700; font-size: .87rem; color: var(--ink); display: flex; align-items: center; gap: 6px; }
.fc-rc-role { font-size: .7rem; font-weight: 600; padding: 1px 6px; background: var(--surface-2); border-radius: var(--pill); color: var(--muted); border: 1px solid var(--line); }
.fc-rc-desc { font-size: .8rem; color: var(--muted); }
.fc-rc-meta { font-size: .75rem; color: var(--muted); }
.fc-rc-receipt { font-size: .74rem; color: var(--muted); display: flex; align-items: center; gap: 3px; }
.fc-rc-amt { font-weight: 800; font-size: 1rem; color: var(--ink); margin-top: 2px; }
.fc-rc-empty { font-size: .82rem; color: var(--muted); text-align: center; padding: 16px 0; }
.fc-reimb-summary { display: flex; gap: 20px; margin-bottom: 14px; font-size: .85rem; }
.fc-reimb-summary span { display: flex; align-items: center; gap: 6px; }
.fc-cogs-row { display: flex; justify-content: space-between; font-size: .85rem; }
.fc-cogs-bar { height: 8px; background: var(--line); border-radius: 4px; overflow: hidden; margin: 4px 0; }
.fc-cogs-bar i { display: block; height: 100%; background: var(--brand-600); border-radius: 4px; }
.fc-cogs-sub { font-size: .78rem; }
.fc-missing-count { font-weight: 700; font-size: .9rem; color: var(--neg, #dc2626); }
.fc-missing-row { font-size: .8rem; color: var(--muted); padding: 3px 0; border-bottom: 1px dashed var(--line); }
.fc-cat-row { display: flex; align-items: center; gap: 10px; padding: 5px 0; border-bottom: 1px solid var(--line); font-size: .84rem; }
.fc-cat-row:last-child { border-bottom: none; }
.fc-cat-bar-wrap { flex: 1; }
.fc-cat-bar { height: 6px; background: var(--line); border-radius: 3px; overflow: hidden; }
.fc-cat-bar i { display: block; height: 100%; background: var(--brand-500); border-radius: 3px; }
.fc-pkg-panel .fc-panel-body { gap: 12px; display: flex; flex-direction: column; }
.fc-pkg-acts { display: flex; gap: 8px; }
.fc-int-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; margin-bottom: 14px; }
.fc-int-card { background: var(--surface-1); border: 1px solid var(--line); border-radius: var(--radius); padding: 14px; }
.fc-int-head { display: flex; align-items: flex-start; gap: 10px; margin-bottom: 10px; }
.fc-int-ico { flex: none; color: var(--muted); }
.fc-int-head p { margin: 2px 0 0; font-size: .8rem; }
.fc-int-foot { display: flex; align-items: center; justify-content: space-between; }
.fc-cat-list { display: flex; flex-direction: column; gap: 4px; }
.fc-cat-item { display: flex; align-items: center; justify-content: space-between; padding: 6px 0; border-bottom: 1px solid var(--line); font-size: .84rem; }
.fc-cat-item:last-child { border-bottom: none; }
.fc-auto-row { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--line); font-size: .83rem; }
.fc-auto-row:last-child { border-bottom: none; }
.fc-auto-label { flex: 1; }
.fc-audit-trail { background: var(--surface-2); border-radius: var(--radius); padding: 10px 12px; margin-top: 8px; }
.fc-at-title { font-size: .73rem; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); margin-bottom: 6px; display: flex; align-items: center; gap: 5px; }
.fc-at-row { font-size: .78rem; color: var(--muted); padding: 3px 0; border-bottom: 1px dashed var(--line); }
.fc-at-row:last-child { border-bottom: none; }
.fc-at-row b { color: var(--ink); text-transform: capitalize; }
.pf-health { margin: 8px 0; }
.pf-bar-wrap { display: flex; align-items: center; gap: 8px; margin-top: 4px; }
.pf-bar { flex: 1; height: 8px; background: var(--line); border-radius: 4px; position: relative; overflow: hidden; }
.pf-flag { font-size: .78rem; display: flex; align-items: center; gap: 5px; color: var(--brand-600); padding: 4px 0; }
.pf-flag.warn { color: var(--warn, #d97706); }
.pf-actions { display: flex; gap: 6px; padding-top: 8px; border-top: 1px solid var(--line); margin-top: 8px; }
warn-text { color: var(--warn, #d97706); }

@media (max-width: 900px) {
  .fc-console { grid-template-columns: 1fr; }
  .fc-side { border-right: none; border-bottom: 1px solid var(--line); }
  .fc-nav { flex-direction: row; overflow-x: auto; padding: 4px; gap: 4px; }
  .fc-nav-sect { display: none; }
  .fc-nav-item { padding: 6px 10px; border-radius: var(--radius); white-space: nowrap; }
  .fc-stat-grid { grid-template-columns: repeat(3, 1fr); }
  .fc-two-col { grid-template-columns: 1fr; }
  .fc-sup-grid { grid-template-columns: 1fr; }
  .fc-reimb-board { grid-template-columns: 1fr; }
  .fc-int-grid { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
  .fc-stat-grid { grid-template-columns: repeat(2, 1fr); }
  .fc-sup-stats { grid-template-columns: repeat(2, 1fr); }
  .fc-sup-modal-stats { grid-template-columns: repeat(3, 1fr); }
}

/* ============================================================
   Premium polish helpers + action-oriented empty state
   ============================================================ */
.empty-cta { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 48px 24px; gap: 12px; }
.empty-cta .ec-ico { width: 56px; height: 56px; border-radius: 16px; background: var(--brand-50); color: var(--brand-500); display: flex; align-items: center; justify-content: center; }
.empty-cta h3 { font-size: 1.02rem; font-weight: 700; color: var(--ink); margin: 0; letter-spacing: -.01em; }
.empty-cta p { font-size: .86rem; color: var(--muted); margin: 0; max-width: 380px; line-height: 1.5; }
.empty-cta .ec-actions { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; margin-top: 4px; }

/* ============================================================
   Outbound Console — ob-* class family
   ============================================================ */
.ob-shell { display: flex; flex-direction: column; height: 100%; min-height: 0; }
.ob-header { padding: 22px 24px 0; flex: none; }
.ob-title-row { display: flex; align-items: center; gap: 12px; margin-bottom: 4px; }
.ob-title-row h1 { font-size: 1.3rem; font-weight: 800; letter-spacing: -.02em; color: var(--ink); flex: none; }
.ob-sub { font-size: .85rem; color: var(--muted); margin: 0 0 14px; }
.ob-tabs { display: flex; gap: 2px; border-bottom: 1px solid var(--line); padding: 0 24px; flex: none; overflow-x: auto; }
.ob-tab { padding: 10px 15px; font-size: .85rem; font-weight: 600; color: var(--muted); background: none; border: none; border-bottom: 2px solid transparent; cursor: pointer; display: flex; align-items: center; gap: 6px; white-space: nowrap; transition: color .15s; }
.ob-tab:hover { color: var(--ink); }
.ob-tab.active { color: var(--brand-700); border-bottom-color: var(--brand-500); }
.ob-tab .ob-tab-count { font-size: .68rem; font-weight: 700; background: var(--surface-2); color: var(--muted); border-radius: var(--pill); padding: 1px 7px; }
.ob-tab.active .ob-tab-count { background: var(--brand-100); color: var(--brand-700); }
.ob-body { flex: 1; min-height: 0; overflow-y: auto; padding: 20px 24px 28px; }

/* Stat strip (premium) */
.ob-stat-strip { display: grid; grid-template-columns: repeat(auto-fit, minmax(135px, 1fr)); gap: 12px; margin-bottom: 22px; }
.ob-stat { background: var(--surface-1); border: 1px solid var(--line); border-radius: 16px; padding: 15px 16px; box-shadow: 0 1px 2px rgba(15,23,42,.04); }
.ob-stat h4 { font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); margin: 0 0 6px; }
.ob-stat .ob-stat-num { font-size: 1.55rem; font-weight: 800; color: var(--ink); line-height: 1; margin-bottom: 3px; letter-spacing: -.01em; }
.ob-stat .ob-stat-sub { font-size: .74rem; color: var(--muted); }
.ob-stat.pos .ob-stat-num { color: var(--pos, #16a34a); }
.ob-stat.warn .ob-stat-num { color: var(--warn, #d97706); }

.ob-section-head { display: flex; align-items: center; gap: 10px; margin: 0 0 14px; }
.ob-section-head h3 { font-size: 1rem; font-weight: 700; color: var(--ink); margin: 0; letter-spacing: -.01em; flex: 1; }

/* Cards grid */
.ob-card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 14px; }
.ob-card { background: var(--surface-1); border: 1px solid var(--line); border-radius: 16px; padding: 18px; box-shadow: 0 1px 3px rgba(15,23,42,.05); transition: transform .14s ease, box-shadow .18s ease, border-color .18s ease; cursor: pointer; }
.ob-card:hover { transform: translateY(-2px); box-shadow: 0 6px 18px rgba(15,23,42,.09); border-color: var(--brand-200); }
.ob-card-top { display: flex; align-items: flex-start; gap: 10px; margin-bottom: 12px; }
.ob-card-name { font-size: .95rem; font-weight: 700; color: var(--ink); flex: 1; letter-spacing: -.01em; }
.ob-card-meta { font-size: .78rem; color: var(--muted); margin-top: 2px; }
.ob-card-figs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; padding: 12px 0; border-top: 1px solid var(--line); }
.ob-card-figs > div { text-align: center; }
.ob-card-figs b { display: block; font-size: 1.05rem; font-weight: 800; color: var(--ink); }
.ob-card-figs span { font-size: .68rem; color: var(--muted); text-transform: uppercase; letter-spacing: .03em; }
.ob-card-foot { display: flex; align-items: center; gap: 8px; margin-top: 12px; }

/* Mini engagement bars */
.ob-eng { display: flex; flex-direction: column; gap: 6px; margin-top: 10px; }
.ob-eng-row { display: flex; align-items: center; gap: 8px; font-size: .74rem; }
.ob-eng-l { width: 42px; color: var(--muted); font-weight: 600; }
.ob-eng-track { flex: 1; height: 6px; background: var(--line); border-radius: 9px; overflow: hidden; }
.ob-eng-track i { display: block; height: 100%; background: var(--brand-500); border-radius: 9px; }
.ob-eng-track.reply i { background: var(--gold, #E0A52E); }
.ob-eng-v { width: 34px; text-align: right; font-weight: 700; color: var(--ink-2); }

/* Filter chips */
.ob-filters { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 16px; align-items: center; }
.ob-chip { font-size: .78rem; font-weight: 600; padding: 5px 12px; border-radius: 12px; background: var(--surface-1); border: 1px solid var(--line); color: var(--ink-2); cursor: pointer; transition: all .14s; }
.ob-chip:hover { border-color: var(--brand-300); }
.ob-chip.on { background: var(--brand-600); color: #fff; border-color: var(--brand-600); }

/* Table (premium) */
.ob-table { width: 100%; border-collapse: collapse; background: var(--surface-1); border: 1px solid var(--line); border-radius: 16px; overflow: hidden; }
.ob-table th { text-align: left; font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); padding: 11px 14px; background: var(--surface-2); border-bottom: 1px solid var(--line); }
.ob-table td { padding: 12px 14px; border-bottom: 1px solid var(--line); font-size: .85rem; color: var(--ink-2); vertical-align: middle; }
.ob-table tr:last-child td { border-bottom: none; }
.ob-table tbody tr { cursor: pointer; transition: background .12s; }
.ob-table tbody tr:hover { background: var(--surface-2); }
.ob-table .ob-cell-name b { color: var(--ink); font-weight: 700; }

/* Reply inbox */
.ob-reply-list { display: flex; flex-direction: column; gap: 8px; }
.ob-reply { display: flex; gap: 12px; align-items: flex-start; background: var(--surface-1); border: 1px solid var(--line); border-radius: 14px; padding: 14px 16px; transition: border-color .14s; }
.ob-reply:hover { border-color: var(--brand-200); }
.ob-reply.unhandled { border-left: 3px solid var(--gold, #E0A52E); }
.ob-reply-av { width: 38px; height: 38px; border-radius: 50%; background: var(--brand-100); color: var(--brand-700); display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: .82rem; flex: none; }
.ob-reply-body { flex: 1; min-width: 0; }
.ob-reply-top { display: flex; align-items: center; gap: 8px; margin-bottom: 3px; }
.ob-reply-name { font-size: .88rem; font-weight: 700; color: var(--ink); }
.ob-reply-snip { font-size: .83rem; color: var(--ink-2); line-height: 1.45; font-style: italic; }
.ob-reply-actions { display: flex; gap: 6px; margin-top: 9px; flex-wrap: wrap; }
.ob-reply-time { font-size: .73rem; color: var(--muted); white-space: nowrap; flex: none; }

/* Deliverability */
.ob-deliv-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; margin-bottom: 20px; }
.ob-deliv-card { background: var(--surface-1); border: 1px solid var(--line); border-radius: 16px; padding: 18px; }
.ob-deliv-card h4 { font-size: .76rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); margin: 0 0 12px; }
.ob-deliv-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 7px 0; font-size: .85rem; border-bottom: 1px solid var(--line); }
.ob-deliv-row:last-child { border-bottom: none; }
.ob-deliv-row .ob-deliv-k { color: var(--ink-2); }
.ob-auth-dot { display: inline-flex; align-items: center; gap: 5px; font-weight: 600; }
.ob-auth-dot.ok { color: var(--pos, #16a34a); }
.ob-auth-dot.bad { color: var(--neg); }

/* Launch checklist modal */
.ob-launch-list { display: flex; flex-direction: column; gap: 4px; margin: 4px 0 12px; }
.ob-launch-item { display: flex; align-items: flex-start; gap: 11px; padding: 11px 13px; border-radius: 12px; background: var(--surface-2); }
.ob-launch-item.ok { background: var(--pos-bg, #f0fdf4); }
.ob-launch-item.bad { background: var(--neg-bg, #fef2f2); }
.ob-launch-icon { flex: none; margin-top: 1px; }
.ob-launch-item.ok .ob-launch-icon { color: var(--pos, #16a34a); }
.ob-launch-item.bad .ob-launch-icon { color: var(--neg); }
.ob-launch-label { font-size: .86rem; font-weight: 700; color: var(--ink); }
.ob-launch-detail { font-size: .77rem; color: var(--muted); margin-top: 1px; }
.ob-launch-summary { padding: 12px 14px; border-radius: 12px; font-size: .85rem; font-weight: 600; margin-bottom: 12px; display: flex; align-items: center; gap: 8px; }
.ob-launch-summary.ready { background: var(--pos-bg, #f0fdf4); color: var(--pos, #16a34a); }
.ob-launch-summary.blocked { background: var(--warn-bg, #fffbeb); color: var(--warn, #d97706); }

/* Flow diagram (GF → Outbound) */
.ob-flow { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; background: var(--brand-50); border: 1px solid var(--brand-100); border-radius: 14px; padding: 12px 16px; margin-bottom: 18px; font-size: .8rem; }
.ob-flow-step { display: inline-flex; align-items: center; gap: 5px; font-weight: 600; color: var(--brand-700); }
.ob-flow-arrow { color: var(--brand-300); }

/* Audience score pills */
.ob-score-pill { display: inline-flex; align-items: center; gap: 4px; font-size: .74rem; font-weight: 700; padding: 2px 8px; border-radius: var(--pill); }
.ob-score-pill.fit { background: var(--pos-bg, #f0fdf4); color: var(--pos, #16a34a); }
.ob-score-pill.opp { background: var(--brand-50); color: var(--brand-700); }
.ob-consent-bar { height: 5px; background: var(--line); border-radius: 9px; overflow: hidden; margin-top: 8px; }
.ob-consent-fill { height: 100%; background: var(--pos, #16a34a); border-radius: 9px; }

@media (max-width: 900px) {
  .ob-card-grid { grid-template-columns: 1fr; }
  .ob-stat-strip { grid-template-columns: repeat(2, 1fr); }
}

/* Growth Score — diagnosis + next best action (Step 5) */
.ge-diag-row { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 8px; }
.ge-diag-chip { display: inline-flex; align-items: center; gap: 5px; font-size: .74rem; font-weight: 600; padding: 3px 9px; border-radius: var(--pill); background: var(--surface-2); color: var(--muted); }
.ge-diag-chip.issue { background: var(--warn-bg, #fffbeb); color: var(--warn, #d97706); }
.ge-diag-chip.ok { background: var(--pos-bg, #f0fdf4); color: var(--pos, #16a34a); }
.ge-nba { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 12px; padding: 11px 14px; background: var(--brand-50); border: 1px solid var(--brand-100); border-radius: 14px; }
.ge-nba-label { font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--brand-700); }
.ge-nba-text { font-size: .84rem; color: var(--ink-2); flex: 1; min-width: 180px; }
.ge-health-banner { border-radius: 20px; }

/* Growth Setup (Step 4) */
.ge-setup-banner { display: flex; align-items: center; gap: 14px; background: linear-gradient(135deg, var(--brand-50), var(--surface-1)); border: 1px solid var(--brand-200); border-radius: 16px; padding: 14px 18px; margin-bottom: 18px; }
.ge-setup-ico { width: 40px; height: 40px; border-radius: 12px; background: var(--brand-100); color: var(--brand-600); display: flex; align-items: center; justify-content: center; flex: none; }
.ge-setup-title { font-size: .9rem; font-weight: 700; color: var(--ink); }
.ge-setup-sub { font-size: .78rem; color: var(--muted); margin: 2px 0 7px; }
.ge-setup-track { height: 6px; background: var(--line); border-radius: 9px; overflow: hidden; max-width: 320px; }
.ge-setup-fill { height: 100%; background: var(--brand-500); border-radius: 9px; transition: width .3s; }
.ge-setup-steps { display: flex; flex-direction: column; gap: 8px; }
.ge-setup-step { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface-1); }
.ge-setup-step.done { background: var(--pos-bg, #f0fdf4); border-color: var(--pos, #16a34a); }
.ge-setup-step-ico { width: 34px; height: 34px; border-radius: 50%; background: var(--surface-2); color: var(--brand-600); display: flex; align-items: center; justify-content: center; flex: none; }
.ge-setup-step.done .ge-setup-step-ico { background: var(--pos, #16a34a); color: #fff; }
.ge-setup-step-name { font-size: .86rem; font-weight: 700; color: var(--ink); }
.ge-setup-step-desc { font-size: .77rem; color: var(--muted); }

/* ============================================================
   Finance Console — UI/UX refinement (v2)
   Premium surface system, contrast, hierarchy. Overrides the
   base fc-* rules above (equal specificity, later wins).
   No logic/markup classes removed — purely visual.
   ============================================================ */

/* Console shell: three clear tiers — warm sidebar · soft main · white cards */
.fc-console {
  grid-template-columns: 216px 1fr;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-1);
  overflow: hidden;
}
.fc-side { background: var(--surface-2); border-right: 1px solid var(--line); padding: 14px 10px; }
.fc-main { background: color-mix(in srgb, var(--canvas) 55%, var(--surface)); padding: 26px 26px 32px; }

/* Sidebar nav — stronger labels, lime active pill with rail */
.fc-nav { gap: 2px; }
.fc-nav-sect { color: var(--ink-faint); padding: 14px 10px 5px; }
.fc-nav-item {
  position: relative; gap: 10px; padding: 9px 12px; border-radius: var(--r-sm);
  font-size: .86rem; font-weight: 600; color: var(--ink-soft);
}
.fc-nav-item .fc-nav-ico { color: var(--ink-mute); transition: color .12s; }
.fc-nav-item:hover { background: color-mix(in srgb, var(--accent) 9%, transparent); color: var(--ink); }
.fc-nav-item:hover .fc-nav-ico { color: var(--ink); }
.fc-nav-item.on { background: var(--brand-100); color: var(--brand-ink); font-weight: 700; }
.fc-nav-item.on .fc-nav-ico { color: var(--brand-ink); }
.fc-nav-item.on::before { content: ""; position: absolute; left: 0; top: 6px; bottom: 6px; width: 3px; border-radius: 0 3px 3px 0; background: var(--accent); }
.fc-nav-badge { background: var(--warn); color: #fff; }
.fc-nav-item.on .fc-nav-badge { background: var(--brand-ink); color: var(--accent); }

/* Section header — stronger title hierarchy */
.fc-sec-head { margin-bottom: 20px; }
.fc-sec-head h2 { font-family: var(--font-display); font-size: 1.32rem; font-weight: 700; letter-spacing: -.02em; color: var(--ink); }
.fc-sec-head h2 .count-pill { font-family: var(--font-sans); }
.fc-sec-head p { color: var(--ink-mute); font-size: .86rem; }

/* Stat cards — fix clipped numbers, premium card treatment */
.fc-stat-grid { gap: 12px; margin-bottom: 22px; }
.fc-stat-grid .statc {
  padding: 16px 16px 14px; border-radius: var(--r-lg); min-height: 118px;
  background: var(--surface); border: 1px solid var(--line); box-shadow: var(--sh-1);
}
.fc-stat-grid .statc:hover { box-shadow: var(--sh-2); transform: translateY(-2px); }
.fc-stat-grid .sc-label { color: var(--ink-mute); font-size: .64rem; letter-spacing: .03em; line-height: 1.25; align-items: flex-start; gap: 6px; }
.fc-stat-grid .sc-ico { opacity: .8; color: var(--ink-mute); flex: none; margin-top: -1px; }
.fc-stat-grid .sc-num { font-size: clamp(1.3rem, 1.65vw, 1.72rem); margin-top: 8px; letter-spacing: -.02em; color: var(--ink); }
.fc-stat-grid .statc.spot .sc-num { font-size: clamp(1.42rem, 1.85vw, 1.9rem); color: var(--brand-ink); }
.fc-stat-grid .sc-meta { font-size: .76rem; padding-top: 9px; color: var(--ink-mute); }
.fc-stat-grid .sc-meta.up { color: var(--pos); }
.fc-stat-grid .sc-meta.down { color: var(--neg); }

/* Panels — crisp white cards with subtle lift */
.fc-panel { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); box-shadow: var(--sh-1); }
.fc-panel-head { padding: 13px 16px; font-size: .92rem; font-weight: 700; color: var(--ink); background: var(--surface); border-bottom: 1px solid var(--line); }
.fc-panel-head .count-pill { margin-left: 4px; }
.fc-panel-head .count-pill.neg { background: var(--neg-bg); color: var(--neg); }
.fc-panel-body { padding: 16px; }
.fc-panel-foot { background: color-mix(in srgb, var(--canvas) 50%, var(--surface)); }

/* Finance Alerts — severity rails, tinted rows, colored icons */
.fc-alert-list { gap: 0; }
.fc-alert-row { padding: 12px 16px; gap: 12px; border-bottom: 1px solid var(--line-2); position: relative; }
.fc-alert-row::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; }
.fc-alert-row .fc-alert-ico { width: 30px; height: 30px; border-radius: 8px; display: flex; align-items: center; justify-content: center; flex: none; }
.fc-alert-body b { font-size: .87rem; color: var(--ink); font-weight: 700; }
.fc-alert-body span { font-size: .8rem; color: var(--ink-mute); }
.fc-alert-row .fc-alert-go { flex: none; }
.fc-alert-neg { background: color-mix(in srgb, var(--neg) 5%, var(--surface)); }
.fc-alert-neg::before { background: var(--neg); }
.fc-alert-neg .fc-alert-ico { background: var(--neg-bg); color: var(--neg); }
.fc-alert-warn { background: color-mix(in srgb, var(--warn) 6%, var(--surface)); }
.fc-alert-warn::before { background: var(--warn); }
.fc-alert-warn .fc-alert-ico { background: var(--warn-bg); color: var(--warn); }
.fc-alert-info { background: color-mix(in srgb, var(--accent) 5%, var(--surface)); }
.fc-alert-info::before { background: var(--brand-500); }
.fc-alert-info .fc-alert-ico { background: var(--brand-50); color: var(--brand-ink); }

/* AI insights — clearer severity tint chips */
.fc-ai-insight { padding: 9px 0; gap: 10px; font-size: .84rem; color: var(--ink-soft); }
.fc-ai-insight svg { flex: none; margin-top: 1px; }
.fc-ai-pos { color: var(--pos); }
.fc-ai-warn { color: var(--warn); }
.fc-ai-neg { color: var(--neg); }
.fc-ai-info { color: var(--brand-ink); }

/* Tables inside the finance console — stronger headers + readable rows */
.fc-main .tbl th { color: var(--ink-mute); font-size: .7rem; background: color-mix(in srgb, var(--canvas) 60%, var(--surface)); border-bottom: 1px solid var(--line); padding: 11px 14px; }
.fc-main .tbl td { color: var(--ink-soft); font-size: .88rem; }
.fc-main .tbl td b, .fc-main .tbl td .fc-er-name { color: var(--ink); }
.fc-main .panel { box-shadow: var(--sh-1); border-radius: var(--r); overflow-x: auto; }
.fc-main .tbl tbody tr:hover { background: color-mix(in srgb, var(--accent) 6%, var(--surface)); }
.fc-exp-row.fin-dup { background: color-mix(in srgb, var(--neg) 6%, var(--surface)); }
.fc-exp-row.fin-dup:hover { background: color-mix(in srgb, var(--neg) 10%, var(--surface)); }
.fc-exp-total { font-size: .82rem; color: var(--ink-mute); font-weight: 600; }
.fc-er-sub { color: var(--ink-mute); }
.fc-ca-badge { color: var(--warn); font-weight: 600; }

/* Filter chips — clearer rest/active */
.fin-ef { background: var(--surface); border: 1px solid var(--line); color: var(--ink-soft); font-weight: 600; padding: 6px 13px; }
.fin-ef:hover { border-color: var(--brand-300, var(--brand-200)); color: var(--ink); background: var(--brand-50); }
.fin-ef.on { background: var(--accent); border-color: var(--accent); color: var(--on-accent); font-weight: 700; }

/* Inbox queue — premium rows, clear primary/secondary actions */
.fc-inbox-list { border: 1px solid var(--line); border-radius: var(--r); box-shadow: var(--sh-1); }
.fc-inbox-item { padding: 13px 16px; gap: 13px; background: var(--surface); border-bottom: 1px solid var(--line-2); }
.fc-inbox-item:hover { background: color-mix(in srgb, var(--accent) 5%, var(--surface)); }
.fc-inbox-item.has-dup { border-left: 3px solid var(--neg); background: color-mix(in srgb, var(--neg) 4%, var(--surface)); }
.fc-ii-ico { width: 40px; height: 40px; border-radius: 11px; background: var(--brand-50); color: var(--brand-ink); border: none; }
.fc-inbox-item.has-dup .fc-ii-ico { background: var(--neg-bg); color: var(--neg); }
.fc-ii-title { font-size: .9rem; color: var(--ink); }
.fc-ii-meta { color: var(--ink-mute); font-size: .79rem; }
.fc-ii-meta b { color: var(--ink-soft); }
.fc-ii-acts .fin-ii-process, .fc-ii-acts .btn[data-iid].btn-soft { font-weight: 700; }

/* Supplier cards — premium */
.fc-sup-card { background: var(--surface); box-shadow: var(--sh-1); border-radius: var(--r); padding: 16px; transition: transform .14s ease, box-shadow .18s ease, border-color .18s ease; }
.fc-sup-card:hover { transform: translateY(-2px); box-shadow: var(--sh-2); border-color: var(--brand-200); }
.fc-sup-name { font-size: .94rem; color: var(--ink); }
.fc-sup-type { color: var(--ink-mute); }
.fc-sup-stats { background: color-mix(in srgb, var(--canvas) 55%, var(--surface)); border: 1px solid var(--line-2); border-radius: var(--r-sm); padding: 10px; gap: 8px; }
.fc-sup-stat span { color: var(--ink-mute); }
.fc-sup-stat b { color: var(--ink); }
.fc-sup-contact { color: var(--ink-mute); }
.fc-w9-badge { color: var(--pos); }
.fc-w9-badge.warn { color: var(--warn); }
.fc-sup-section-label { color: var(--ink-mute); margin: 4px 0 10px; }

/* PO + reimbursement cards */
.fc-reimb-card { background: var(--surface); box-shadow: var(--sh-1); border-radius: var(--r); }
.fc-reimb-card:hover { box-shadow: var(--sh-2); border-color: var(--brand-200); }
.fc-rc-amt { color: var(--ink); }
.fc-rc-head { color: var(--ink-mute); border-bottom: 2px solid var(--line); }
.fc-po-hint { background: var(--warn-bg); color: var(--warn); border: 1px solid color-mix(in srgb, var(--warn) 28%, transparent); font-weight: 500; }
.fc-reserved { color: var(--warn); font-weight: 700; }

/* Reports — premium panels + accountant package highlight */
.fc-cogs-row { font-size: .87rem; color: var(--ink-soft); }
.fc-cogs-row b { color: var(--ink); }
.fc-cat-row { font-size: .85rem; color: var(--ink-soft); }
.fc-sup-row { color: var(--ink-soft); }
.fc-sup-row b { color: var(--ink); }
.fc-pkg-panel { border: 1px solid var(--brand-200); box-shadow: var(--sh-2); }
.fc-pkg-panel .fc-panel-head { background: var(--brand-50); color: var(--brand-ink); border-bottom-color: var(--brand-200); }

/* Integration cards */
.fc-int-card { background: var(--surface); box-shadow: var(--sh-1); border-radius: var(--r); padding: 16px; }
.fc-int-ico { width: 38px; height: 38px; border-radius: 10px; background: var(--brand-50); color: var(--brand-ink); display: flex; align-items: center; justify-content: center; }
.fc-int-head b { font-size: .94rem; color: var(--ink); }
.fc-int-head p { color: var(--ink-mute); }

/* Disclaimers — cleaner, balanced */
.fin-pkg-disclaimer { color: var(--ink-mute); background: color-mix(in srgb, var(--canvas) 55%, var(--surface)); border: 1px solid var(--line); border-radius: var(--r-sm); padding: 10px 12px; line-height: 1.45; }

/* ---- Modal form sections (Add Supplier / Edit Expense / New PO / Inbox) ---- */
.fc-form-sec { margin-bottom: 18px; }
.fc-form-sec:last-child { margin-bottom: 0; }
.fc-form-sec-head { display: flex; align-items: center; gap: 7px; font-size: .73rem; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; color: var(--ink-mute); padding-bottom: 9px; margin-bottom: 13px; border-bottom: 1px solid var(--line-2); }
.fc-form-sec-head svg { color: var(--brand-ink); }
.fc-form-sec.secure .fc-form-sec-head { color: var(--ink-soft); }
.fc-form-sec.secure .fc-form-sec-head svg { color: var(--warn); }

/* Expense-type selectable chips (was small checkboxes) */
.fin-type-checks { gap: 8px; padding: 2px 0 0; }
.fin-type-check {
  gap: 7px; padding: 7px 12px; border: 1px solid var(--line); border-radius: var(--pill);
  background: var(--surface); font-size: .82rem; font-weight: 600; color: var(--ink-soft);
  transition: all .12s ease; user-select: none;
}
.fin-type-check:hover { border-color: var(--brand-200); background: var(--brand-50); }
.fin-type-check:has(input:checked) { background: var(--accent); border-color: var(--accent); color: var(--on-accent); font-weight: 700; }
.fin-type-check input { position: absolute; opacity: 0; width: 0; height: 0; }
.fin-type-check::before { content: ""; width: 14px; height: 14px; border-radius: 4px; border: 1.5px solid var(--ink-faint); flex: none; transition: all .12s; }
.fin-type-check:has(input:checked)::before { border-color: var(--on-accent); background: var(--on-accent); box-shadow: inset 0 0 0 2px var(--accent); }

/* Switch labels in modals — stronger text */
.fin-sw-label { font-size: .86rem; color: var(--ink-soft); font-weight: 500; }
.fin-ef-switches { gap: 14px 18px; padding: 6px 0; }

/* Audit trail block — distinct but compact */
.fc-audit-trail { background: color-mix(in srgb, var(--canvas) 55%, var(--surface)); border: 1px solid var(--line-2); border-radius: var(--r-sm); }
.fc-at-title { color: var(--ink-mute); }
.fc-at-row { color: var(--ink-mute); }
.fc-at-row b { color: var(--ink); }

/* Dropzone (Add Finance Inbox Item) */
.fc-dropzone {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px;
  padding: 26px 18px; border: 2px dashed var(--line); border-radius: var(--r);
  background: color-mix(in srgb, var(--canvas) 55%, var(--surface)); text-align: center; cursor: pointer;
  transition: border-color .14s, background .14s;
}
.fc-dropzone:hover { border-color: var(--brand-300, var(--brand-200)); background: var(--brand-50); }
.fc-dropzone.has-file { border-style: solid; border-color: var(--pos); background: var(--pos-bg); }
.fc-dz-ico { width: 42px; height: 42px; border-radius: 12px; background: var(--brand-50); color: var(--brand-ink); display: flex; align-items: center; justify-content: center; }
.fc-dropzone.has-file .fc-dz-ico { background: var(--pos); color: #fff; }
.fc-dz-title { font-size: .9rem; font-weight: 700; color: var(--ink); }
.fc-dz-sub { font-size: .78rem; color: var(--ink-mute); }
.fc-dz-file { font-size: .84rem; font-weight: 700; color: var(--pos); display: flex; align-items: center; gap: 6px; }

/* Project Finance panel (project detail) — slightly stronger */
.pf-flag { color: var(--brand-ink); font-weight: 600; }
.pf-flag.warn { color: var(--warn); }

/* Responsive — keep three tiers tidy on small screens */
@media (max-width: 980px) {
  .fc-console { grid-template-columns: 184px 1fr; }
  .fc-main { padding: 20px; }
}
@media (max-width: 760px) {
  .fc-console { grid-template-columns: 1fr; border-radius: var(--r); }
  .fc-side { border-right: none; border-bottom: 1px solid var(--line); padding: 8px; }
  .fc-nav { flex-direction: row; }
  .fc-nav-item.on::before { display: none; }
  .fc-main { padding: 18px 16px 24px; }
  .fc-stat-grid { grid-template-columns: repeat(2, 1fr); }
}

/* Required-field marker + dropzone drag state (finance modals) */
.fc-req { color: var(--neg); margin-left: 1px; font-weight: 700; }
.fc-dropzone.drag { border-color: var(--accent); background: var(--brand-50); }
.fc-form-sec .field:last-child { margin-bottom: 0; }

/* Integrations — field mapping clarity (less repetitive status) */
.fc-map-banner { display: flex; align-items: flex-start; gap: 8px; font-size: .82rem; color: var(--warn); background: var(--warn-bg); border: 1px solid color-mix(in srgb, var(--warn) 26%, transparent); border-radius: var(--r-sm); padding: 9px 12px; margin-bottom: 14px; line-height: 1.4; }
.fc-map-banner b { color: var(--ink); }
.fc-map-ready { display: inline-flex; align-items: center; gap: 4px; font-size: .76rem; font-weight: 600; color: var(--ink-mute); }
.fc-map-ready svg { color: var(--pos); }

/* ============================================================
   Access control — locked modules + gated buttons (enforcement)
   ============================================================ */
.access-lock { max-width: 520px; margin: 56px auto; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 14px; padding: 40px 28px; background: var(--surface-1); border: 1px solid var(--line); border-radius: 20px; box-shadow: 0 4px 20px rgba(15,23,42,.06); }
.access-lock-ico { width: 64px; height: 64px; border-radius: 20px; background: var(--brand-50); color: var(--brand-600); display: flex; align-items: center; justify-content: center; }
.access-lock h2 { font-size: 1.15rem; font-weight: 800; letter-spacing: -.02em; color: var(--ink); margin: 0; }
.access-lock p { font-size: .9rem; color: var(--muted); line-height: 1.55; margin: 0; max-width: 420px; }
.access-lock-actions { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; margin-top: 6px; }
.access-lock-note { display: inline-flex; align-items: center; gap: 6px; font-size: .78rem; color: var(--muted); background: var(--surface-2); border-radius: var(--pill); padding: 6px 14px; margin-top: 4px; }

/* Gated buttons: dimmed, not-allowed cursor, lock affordance. */
.btn.is-locked, .icon-btn.is-locked, .gf-list-card.is-locked, .switch.is-locked { opacity: .45; cursor: not-allowed; position: relative; }
.btn.is-locked:hover { transform: none; box-shadow: none; }
.is-locked::after { content: "🔒"; display: none; }

/* GF credit-exhausted banner */
.gf-credit-warn { display: flex; align-items: center; gap: 10px; background: var(--warn-bg, #fffbeb); border: 1px solid var(--warn, #d97706); border-radius: 14px; padding: 11px 16px; margin-bottom: 14px; font-size: .84rem; color: var(--warn, #d97706); }
.gf-credit-warn b { color: var(--ink); }

/* Acting-user "view as" chip */
.view-as { display: inline-flex; align-items: center; gap: 7px; font-size: .8rem; font-weight: 600; color: var(--ink-2); background: var(--surface-2); border: 1px solid var(--line); border-radius: 12px; padding: 6px 12px; }
.view-as select { border: none; background: none; font: inherit; font-weight: 700; color: var(--brand-700); cursor: pointer; padding: 0 2px; }
.view-as .va-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--pos, #16a34a); }

/* Roles "view as" banner inside Settings */
.set-viewas { display: flex; align-items: center; gap: 12px; background: var(--brand-50); border: 1px solid var(--brand-200); border-radius: 16px; padding: 14px 18px; margin-bottom: 16px; }
.set-viewas .sv-ico { width: 38px; height: 38px; border-radius: 12px; background: var(--brand-100); color: var(--brand-600); display: flex; align-items: center; justify-content: center; flex: none; }
.set-viewas-body { flex: 1; }
.set-viewas-body b { font-size: .88rem; color: var(--ink); }
.set-viewas-body p { font-size: .78rem; color: var(--muted); margin: 2px 0 0; }

/* ============================================================
   Growth UI refinement (v2) — premium cockpit pass
   Overrides earlier gf-/ge- rules at equal specificity (later wins).
   Logic, IDs, and markup classes unchanged — presentation only.
   Design system: 12px chips · 16px cards · 20px hero · soft shadows ·
   lime reserved for primary actions + score highlights.
   ============================================================ */

/* ---- Page headers + tabs: consistent across Engine/Finder/Outbound ---- */
.gf-title-row h1, .ge-title-row h1 { font-size: 1.3rem; font-weight: 800; letter-spacing: -.022em; }
.gf-header, .ge-header { padding: 24px 26px 0; }
.gf-body, .ge-body, .ob-body { padding: 22px 26px 30px; }
.gf-tabs, .ge-tabs, .ob-tabs { padding: 0 26px; gap: 4px; }
.gf-tab, .ge-tab, .ob-tab { padding: 11px 15px; font-size: .85rem; border-radius: 10px 10px 0 0; }
.gf-tab.active, .ge-tab.active, .ob-tab.active { color: var(--brand-700); border-bottom-color: var(--brand-500); }
.gf-badge-chip { background: color-mix(in srgb, var(--accent) 14%, var(--surface)); border-color: var(--brand-200); color: var(--brand-700); border-radius: var(--pill); font-weight: 700; }

/* A reusable section heading inside Growth bodies */
.gf-section-head { display: flex; align-items: baseline; gap: 10px; margin: 0 0 14px; }
.gf-section-head h3 { font-size: 1.02rem; font-weight: 750; letter-spacing: -.01em; color: var(--ink); margin: 0; }
.gf-section-head h3 + span, .gf-section-head .muted { margin-left: auto; }

/* ---- Credit meter: slimmer, calmer ---- */
.gf-credits-bar { border-radius: var(--r-chip); background: var(--surface-1); border-color: var(--line); box-shadow: var(--sh-soft); padding: 8px 14px; gap: 12px; }
.gf-cred-track { height: 6px; width: 110px; background: var(--surface-3); border-radius: var(--pill); }
.gf-cred-fill { border-radius: var(--pill); background: var(--brand-500); }
.gf-cred-fill.warn { background: var(--warn); } .gf-cred-fill.full { background: var(--neg); }
.gf-cred-label { color: var(--ink-2); font-weight: 600; }

/* ---- ICP — smart profile selector ---- */
.gf-icp-panel { border-radius: var(--r-card); border-color: var(--line); background: var(--surface-1); box-shadow: var(--sh-soft); }
.gf-icp-panel.open { box-shadow: var(--sh-soft-2); }
.gf-icp-head { padding: 14px 18px; gap: 14px; align-items: center; }
.gf-icp-head:hover { background: color-mix(in srgb, var(--accent) 5%, var(--surface)); }
.gf-icp-badge { width: 36px; height: 36px; border-radius: var(--r-chip); background: var(--brand-100); color: var(--brand-700); display: inline-flex; align-items: center; justify-content: center; flex: none; }
.gf-icp-headmain { flex: none; }
.gf-icp-eyebrow { font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--ink-faint); }
.gf-icp-name { font-size: .95rem; font-weight: 750; color: var(--ink); }
.gf-icp-chiprow { display: flex; gap: 6px; flex-wrap: wrap; flex: 1; }
.gf-icp-tag { font-size: .73rem; font-weight: 600; padding: 4px 11px; border-radius: var(--pill); background: var(--surface-3); border: 1px solid var(--line); color: var(--ink-2); }
.gf-icp-tag.more { color: var(--ink-faint); }
.gf-icp-toggle { display: inline-flex; align-items: center; gap: 4px; font-size: .8rem; font-weight: 700; color: var(--brand-700); background: var(--brand-50); border-radius: var(--pill); padding: 6px 12px; flex: none; }
.gf-icp-body { border-top-color: var(--line); padding-top: 16px; }

/* ---- Provider chips — intentional locked state ---- */
.gf-providers-row { gap: 8px; margin-bottom: 18px; }
.gf-provider-chip { border-radius: var(--pill); padding: 6px 13px; font-size: .77rem; font-weight: 600; border: 1px solid var(--line); background: var(--surface-1); height: 30px; }
.gf-provider-chip.active { background: color-mix(in srgb, var(--pos) 9%, var(--surface)); border-color: color-mix(in srgb, var(--pos) 35%, var(--surface)); color: color-mix(in srgb, var(--pos) 75%, var(--ink)); }
.gf-provider-chip.active .gf-prov-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--pos); box-shadow: 0 0 0 3px color-mix(in srgb, var(--pos) 18%, transparent); }
.gf-provider-chip.future { background: var(--surface-2); border-color: var(--line); color: var(--ink-faint); opacity: 1; }
.gf-prov-soon { font-size: .62rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; background: var(--surface-3); color: var(--ink-mute); border-radius: var(--pill); padding: 1px 7px; margin-left: 2px; }

/* ---- Filter bar — feels like a tool, not a form ---- */
.gf-search-bar { background: var(--surface-1); border: 1px solid var(--line); border-radius: var(--r-card); box-shadow: var(--sh-soft); padding: 10px; gap: 8px; align-items: center; margin-bottom: 16px; flex-wrap: wrap; }
.gf-search-bar .input, .gf-search-bar .select { height: 42px; padding: 0 13px; border-radius: var(--r-chip); border-color: var(--line); background: var(--surface); font-size: .86rem; width: auto; }
.gf-search-bar .input:focus, .gf-search-bar .select:focus { border-color: var(--brand-400); box-shadow: var(--ring); }
.gf-search-bar #gfQ { flex: 2 1 220px; min-width: 200px; }
.gf-search-bar #gfCity { flex: 1 1 130px; min-width: 120px; }
.gf-search-bar .select { flex: 1 1 150px; min-width: 138px; }
.gf-view-toggle { border-radius: var(--r-chip); border-color: var(--line); overflow: hidden; height: 42px; flex: none; }
.gf-view-btn { height: 100%; font-size: .82rem; }
.gf-view-btn.active { background: var(--brand-600); color: var(--on-accent); }
.gf-search-bar #gfRunSearch { height: 42px; border-radius: var(--r-chip); flex: none; }

/* ---- Prospect cards — scannable + premium ---- */
.gf-list { gap: 10px; }
.gf-prospect-card { border-radius: var(--r-card); border-color: var(--line); box-shadow: var(--sh-soft); padding: 16px 18px; display: block; transition: transform .14s ease, box-shadow .18s ease, border-color .18s ease; }
.gf-prospect-card:hover { transform: translateY(-2px); box-shadow: var(--sh-soft-2); border-color: var(--brand-200); }
.gf-prospect-card.selected { border-color: var(--brand-400); box-shadow: 0 0 0 2px var(--brand-100), var(--sh-soft); }
.gf-pc-head { display: flex; align-items: flex-start; gap: 12px; }
.gf-pc-headmain { flex: 1; min-width: 0; }
.gf-card-icon { width: 40px; height: 40px; border-radius: var(--r-chip); background: var(--surface-2); color: var(--ink-soft); }
.gf-card-icon.cat-restaurant, .gf-card-icon.cat-catering { background: color-mix(in srgb, #e05050 16%, var(--surface)); color: #c0392b; }
.gf-card-icon.cat-ministry, .gf-card-icon.cat-nonprofit { background: color-mix(in srgb, #8b5cf6 16%, var(--surface)); color: #7c3aed; }
.gf-card-icon.cat-salon { background: color-mix(in srgb, #ec4899 16%, var(--surface)); color: #db2777; }
.gf-card-icon.cat-wellness { background: color-mix(in srgb, #10b981 16%, var(--surface)); color: #059669; }
.gf-card-icon.cat-contractor { background: color-mix(in srgb, #f59e0b 16%, var(--surface)); color: #d97706; }
.gf-card-icon.cat-photography { background: color-mix(in srgb, #0ea5e9 16%, var(--surface)); color: #0284c7; }
.gf-card-icon.cat-law { background: color-mix(in srgb, #6366f1 16%, var(--surface)); color: #4f46e5; }
.gf-card-name { font-size: .96rem; font-weight: 750; letter-spacing: -.01em; color: var(--ink); }
.gf-card-cat { font-size: .8rem; color: var(--ink-mute); margin-top: 2px; }
.gf-pc-status { flex: none; }
.gf-pc-scores { display: flex; flex-wrap: wrap; gap: 7px; align-items: center; margin-top: 12px; }
.gf-score-badge { display: inline-flex; align-items: center; gap: 5px; font-size: .76rem; font-weight: 600; padding: 4px 10px; border-radius: var(--r-chip); border: 1px solid var(--line); background: var(--surface-1); color: var(--ink-2); }
.gf-score-badge b { font-weight: 800; }
.gf-score-badge .gf-sb-ico { display: inline-flex; opacity: .7; }
.gf-score-badge.opp { background: var(--brand-50); border-color: var(--brand-200); color: var(--brand-700); }
.gf-score-badge.fit { background: color-mix(in srgb, var(--pos) 10%, var(--surface)); border-color: color-mix(in srgb, var(--pos) 28%, var(--surface)); color: color-mix(in srgb, var(--pos) 72%, var(--ink)); }
.gf-score-badge.conf { background: var(--surface-2); border-color: var(--line); color: var(--ink-mute); }
.gf-score-badge.conf.c-high { background: color-mix(in srgb, var(--pos) 9%, var(--surface)); color: color-mix(in srgb, var(--pos) 70%, var(--ink)); border-color: color-mix(in srgb, var(--pos) 24%, var(--surface)); }
.gf-score-badge.conf.c-needs_verify { background: color-mix(in srgb, var(--warn) 10%, var(--surface)); color: color-mix(in srgb, var(--warn) 76%, var(--ink)); border-color: color-mix(in srgb, var(--warn) 26%, var(--surface)); }
.gf-pc-rating { display: inline-flex; align-items: center; gap: 4px; font-size: .78rem; font-weight: 700; color: var(--ink-2); }
.gf-pc-rating .gf-star { color: var(--warn); display: inline-flex; }
.gf-pc-web { display: inline-flex; align-items: center; gap: 4px; font-size: .75rem; font-weight: 600; }
.gf-pc-web.ok { color: var(--ink-mute); } .gf-pc-web.none { color: var(--warn); }
.gf-signals-row { gap: 6px; margin-top: 10px; }
.gf-sig-chip { font-size: .72rem; font-weight: 600; padding: 4px 10px; border-radius: var(--pill); background: var(--surface-3); border: 1px solid var(--line); color: var(--ink-mute); }
.gf-sig-chip.more { background: transparent; border-style: dashed; }
.gf-pc-foot { display: flex; align-items: center; justify-content: space-between; margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line-2); }
.gf-pc-view { display: inline-flex; align-items: center; gap: 5px; font-size: .82rem; font-weight: 700; color: var(--brand-700); }
.gf-pc-actions { display: flex; gap: 6px; }
.gf-pc-act { width: 32px; height: 32px; border-radius: 10px; border: 1px solid var(--line); background: var(--surface-1); color: var(--ink-mute); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; transition: all .14s; }
.gf-pc-act:hover { background: var(--brand-50); border-color: var(--brand-200); color: var(--brand-700); }

/* ---- Detail panel ---- */
.gf-detail { border-radius: var(--r-card); border-color: var(--line); box-shadow: var(--sh-soft-2); }
.gf-detail-head { background: var(--surface-2); border-bottom-color: var(--line); }
.gf-score-card { border-radius: var(--r-chip); border-color: var(--line); background: var(--surface-1); }
.gf-analysis-summary, .gf-action-box { border-radius: var(--r-chip); }
.gf-obs, .gf-comp-item, .gf-readiness { border-radius: var(--r-chip); }
.gf-pkg-chip { border-radius: var(--pill); background: var(--surface-3); border-color: var(--line); }

/* ---- ROI metric cards ---- */
.gf-roi-grid { gap: 12px; }
.gf-roi-card { border-radius: var(--r-card); border-color: var(--line); box-shadow: var(--sh-soft); padding: 16px 18px; position: relative; transition: transform .14s, box-shadow .18s; }
.gf-roi-card:hover { transform: translateY(-2px); box-shadow: var(--sh-soft-2); }
.gf-roi-ico { width: 32px; height: 32px; border-radius: 10px; background: var(--surface-2); color: var(--ink-soft); display: inline-flex; align-items: center; justify-content: center; margin-bottom: 12px; }
.gf-roi-card.accent .gf-roi-ico { background: var(--brand-100); color: var(--brand-700); }
.gf-roi-card.pos .gf-roi-ico { background: color-mix(in srgb, var(--pos) 14%, var(--surface)); color: var(--pos); }
.gf-roi-num { font-size: 1.7rem; font-weight: 850; letter-spacing: -.02em; color: var(--ink); line-height: 1; }
.gf-roi-label { font-size: .82rem; font-weight: 700; color: var(--ink-2); margin-top: 6px; }
.gf-roi-sub { font-size: .74rem; color: var(--ink-faint); margin-top: 2px; }

/* ---- Signal-based intelligence layer (truthful labels + ICP match) ---- */
.gf-method-tag { display: inline-flex; align-items: center; gap: 4px; font-size: .66rem; font-weight: 700; text-transform: none; letter-spacing: 0; padding: 2px 8px; border-radius: var(--pill); background: var(--surface-2); border: 1px solid var(--line); color: var(--ink-faint); vertical-align: middle; margin-left: 8px; }
.gf-icp-match { display: inline-flex; align-items: center; font-size: .66rem; font-weight: 700; padding: 2px 8px; border-radius: var(--pill); margin-left: 6px; }
.gf-icp-match.high { background: color-mix(in srgb, var(--pos) 12%, var(--surface)); color: color-mix(in srgb, var(--pos) 74%, var(--ink)); }
.gf-icp-match.med { background: color-mix(in srgb, var(--accent) 14%, var(--surface)); color: color-mix(in srgb, var(--accent) 72%, var(--ink)); }
.gf-icp-match.low, .gf-icp-match.none { background: var(--surface-2); color: var(--ink-faint); }
.gf-score-fill.conf { background: var(--accent); }
.gf-score-num.conf { color: var(--accent); }
.gf-score-badge.lowicp { background: color-mix(in srgb, var(--warn) 12%, var(--surface)); border-color: color-mix(in srgb, var(--warn) 26%, var(--surface)); color: color-mix(in srgb, var(--warn) 76%, var(--ink)); }
.gf-prospect-card.best-match { border-color: color-mix(in srgb, var(--pos) 42%, var(--line)); box-shadow: 0 0 0 1px color-mix(in srgb, var(--pos) 22%, transparent); }
.gf-best-ribbon { position: absolute; top: 0; right: 0; display: inline-flex; align-items: center; gap: 4px; font-size: .64rem; font-weight: 800; color: #fff; background: var(--pos); padding: 3px 9px; border-radius: 0 var(--r-card) 0 10px; letter-spacing: .02em; }
.gf-prospect-card { position: relative; }

/* ---- Provider chips → buttons + locked state ---- */
.gf-provider-chip { cursor: pointer; font-family: inherit; }
.gf-provider-chip.future { cursor: pointer; }
.gf-provider-chip.future:hover { border-color: color-mix(in srgb, var(--ink) 18%, var(--line)); opacity: 1; }
.gf-provider-chip.selected { box-shadow: 0 0 0 2px color-mix(in srgb, var(--pos) 26%, transparent); }
.gf-prov-modal { text-align: center; }
.gf-prov-lockbadge { width: 48px; height: 48px; border-radius: 50%; margin: 0 auto; display: flex; align-items: center; justify-content: center; background: var(--surface-2); color: var(--ink-faint); }
.gf-prov-caps { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; text-align: left; }
.gf-prov-cap { display: inline-flex; align-items: center; gap: 6px; font-size: .8rem; font-weight: 600; padding: 8px 10px; border-radius: var(--r-chip); border: 1px solid var(--line); background: var(--surface-1); }
.gf-prov-cap.on { color: color-mix(in srgb, var(--pos) 70%, var(--ink)); }
.gf-prov-cap.off { color: var(--ink-faint); }

/* ---- Truthful ROI note + warm demo tags ---- */
.gf-roi-note, .gf-method-note { display: flex; gap: 9px; align-items: flex-start; font-size: .82rem; color: var(--ink-2); background: color-mix(in srgb, var(--accent) 8%, var(--surface)); border: 1px solid color-mix(in srgb, var(--accent) 24%, var(--surface)); border-radius: var(--r-card); padding: 11px 14px; margin-bottom: 14px; }
.gf-roi-note svg { color: var(--accent); flex: none; margin-top: 1px; }
.gf-roi-card.warn { border-color: color-mix(in srgb, var(--warn) 30%, var(--line)); background: color-mix(in srgb, var(--warn) 5%, var(--surface)); }
.gf-roi-card.warn .gf-roi-ico { background: color-mix(in srgb, var(--warn) 16%, var(--surface)); color: var(--warn); }
.gf-warm-item.demo { border-style: dashed; opacity: .92; }
.gf-warm-demo { font-size: .64rem; font-weight: 700; padding: 2px 7px; border-radius: var(--pill); background: var(--surface-2); border: 1px dashed var(--line); color: var(--ink-faint); }
.gf-warm-demotag { display: inline-flex; align-items: center; gap: 4px; font-size: .72rem; font-weight: 600; color: var(--ink-faint); }

/* ---- Sequence builder template picker ---- */
.sb2-tplpick { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 8px 0 2px; }
.sb2-tplpick .select { min-width: 180px; max-width: 280px; }
.sb2-tplpick .sb2-varpick-l { display: inline-flex; align-items: center; gap: 4px; }

/* ---- Sequence card actions + archived ---- */
.ob-card-acts { display: inline-flex; gap: 4px; }
.ob-card.archived { opacity: .72; }
.ob-card.archived .ob-card-name { text-decoration: none; color: var(--ink-2); }

/* ---- Funnel v2 — horizontal with conversion ---- */
.gf-funnel2 { background: var(--surface-1); border: 1px solid var(--line); border-radius: var(--r-card); box-shadow: var(--sh-soft); padding: 8px 18px; }
.gf-fn-row { display: grid; grid-template-columns: 120px 1fr 130px; align-items: center; gap: 14px; padding: 11px 0; border-bottom: 1px solid var(--line-2); }
.gf-fn-row:last-child { border-bottom: none; }
.gf-fn-label { display: inline-flex; align-items: center; gap: 7px; font-size: .85rem; font-weight: 700; color: var(--ink); }
.gf-fn-label svg { color: var(--ink-faint); }
.gf-fn-track { position: relative; height: 30px; background: var(--surface-2); border-radius: 9px; overflow: hidden; display: flex; align-items: center; }
.gf-fn-fill { height: 100%; border-radius: 9px; transition: width .5s ease; }
.gf-fn-fill.s0 { background: color-mix(in srgb, var(--accent) 78%, #fff); }
.gf-fn-fill.s1 { background: color-mix(in srgb, var(--accent) 70%, #5b9); }
.gf-fn-fill.s2 { background: color-mix(in srgb, var(--accent) 60%, #4a8); }
.gf-fn-fill.s3 { background: color-mix(in srgb, var(--pos) 70%, var(--accent)); }
.gf-fn-fill.s4 { background: color-mix(in srgb, var(--pos) 85%, #fff); }
.gf-fn-fill.s5 { background: var(--pos); }
.gf-fn-count { position: absolute; left: 12px; font-size: .82rem; font-weight: 800; color: var(--ink); mix-blend-mode: luminosity; }
.gf-fn-conv { text-align: right; font-size: .76rem; }
.gf-fn-pct { font-weight: 800; font-size: .9rem; }
.gf-fn-pct.good { color: var(--pos); } .gf-fn-pct.mid { color: var(--warn); } .gf-fn-pct.low { color: var(--ink-mute); }
.gf-fn-from { color: var(--ink-faint); margin-left: 5px; }
.gf-fn-top { color: var(--ink-faint); font-weight: 600; }

/* ---- Warm opportunities — smart revenue list ---- */
.gf-warm-list { gap: 8px; }
.gf-warm-item { border-radius: var(--r-card); border-color: var(--line); box-shadow: var(--sh-soft); padding: 14px 16px; gap: 14px; align-items: center; }
.gf-warm-item:hover { border-color: var(--brand-200); box-shadow: var(--sh-soft-2); }
.gf-warm-icon { width: 40px; height: 40px; border-radius: var(--r-chip); }
.gf-warm-icon.dormant_client { background: color-mix(in srgb, var(--warn) 14%, var(--surface)); color: var(--warn); }
.gf-warm-icon.lost_deal { background: color-mix(in srgb, var(--neg) 12%, var(--surface)); color: var(--neg); }
.gf-warm-main { flex: 1; min-width: 0; }
.gf-warm-top { display: flex; align-items: center; gap: 8px; }
.gf-warm-name { font-size: .9rem; font-weight: 750; color: var(--ink); }
.gf-warm-kind { font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; padding: 2px 9px; border-radius: var(--pill); }
.gf-warm-kind.dormant_client { background: color-mix(in srgb, var(--warn) 12%, var(--surface)); color: var(--warn); }
.gf-warm-kind.lost_deal { background: color-mix(in srgb, var(--neg) 10%, var(--surface)); color: var(--neg); }
.gf-warm-sub { font-size: .8rem; color: var(--ink-mute); margin-top: 2px; }
.gf-warm-next { display: inline-flex; align-items: center; gap: 5px; font-size: .77rem; font-weight: 600; color: var(--brand-700); margin-top: 6px; }
.gf-warm-cta { flex: none; }

/* ---- List + territory cards ---- */
.gf-list-card, .gf-territory-card, .gf-saved-search-row { border-radius: var(--r-card); border-color: var(--line); box-shadow: var(--sh-soft); }
.gf-list-card:hover, .gf-territory-card:hover { box-shadow: var(--sh-soft-2); border-color: var(--brand-200); }

/* ============================================================
   Growth ENGINE refinement
   ============================================================ */
/* Setup banner — calm, not competing */
.ge-setup-banner { border-radius: var(--r-card); background: var(--surface-1); border-color: var(--line); box-shadow: var(--sh-soft); }
.ge-setup-ico { border-radius: var(--r-chip); background: var(--brand-100); color: var(--brand-700); }
.ge-setup-fill { background: var(--brand-500); }

/* Alerts — softer warning, smaller */
.ge-alert-item { border-radius: var(--r-chip); padding: 10px 14px; font-size: .83rem; font-weight: 500; border-width: 1px; }
.ge-alert-item.pipeline { background: color-mix(in srgb, var(--warn) 9%, var(--surface)); color: color-mix(in srgb, var(--warn) 80%, var(--ink)); border-color: color-mix(in srgb, var(--warn) 30%, var(--surface)); }
.ge-alert-item.pipeline svg { color: var(--warn); }

/* Score hero — the brain, 20px radius, premium */
.ge-health-banner { border-radius: var(--r-hero); border-color: var(--line); box-shadow: var(--sh-soft-2); padding: 22px 26px; gap: 22px; background: var(--surface-1); }
.ge-health-banner.slow { background: color-mix(in srgb, var(--warn) 6%, var(--surface)); border-color: color-mix(in srgb, var(--warn) 28%, var(--surface)); }
.ge-health-info h2 { font-size: 1.18rem; font-weight: 800; letter-spacing: -.02em; }
.ge-diag-chip { background: var(--surface-2); color: var(--ink-mute); border-radius: var(--pill); }
.ge-diag-chip.issue { background: color-mix(in srgb, var(--warn) 11%, var(--surface)); color: color-mix(in srgb, var(--warn) 80%, var(--ink)); }
.ge-diag-chip.ok { background: color-mix(in srgb, var(--pos) 11%, var(--surface)); color: color-mix(in srgb, var(--pos) 76%, var(--ink)); }
.ge-nba { border-radius: var(--r-chip); background: var(--brand-50); border-color: var(--brand-200); padding: 13px 16px; }
.ge-nba-label { color: var(--brand-700); }
.ge-health-stat { padding-left: 22px; border-left: 1px solid var(--line); }
.ge-health-stat .ge-hs-num { font-size: 1.5rem; font-weight: 850; letter-spacing: -.02em; }
.ge-health-stat .ge-hs-label { color: var(--ink-faint); }

/* Pipeline gauge — thinner, cleaner */
.ge-pipeline-gauge { margin: 16px 0 20px; gap: 14px; }
.ge-gauge-track { height: 8px; background: var(--surface-2); border-radius: var(--pill); }
.ge-gauge-fill { border-radius: var(--pill); }
.ge-gauge-fill.good { background: var(--pos); } .ge-gauge-fill.warn { background: var(--warn); } .ge-gauge-fill.neg { background: var(--neg); }
.ge-gauge-label { font-weight: 600; color: var(--ink-mute); }

/* Metric cards — premium + consistent */
.ge-stats-grid { gap: 12px; }
.ge-stat-card { border-radius: var(--r-card); border-color: var(--line); box-shadow: var(--sh-soft); padding: 16px 18px; transition: transform .14s, box-shadow .18s; }
.ge-stat-card:hover { transform: translateY(-2px); box-shadow: var(--sh-soft-2); }
.ge-stat-card h4 { color: var(--ink-faint); }
.ge-stat-num { font-size: 1.7rem; font-weight: 850; letter-spacing: -.02em; }
.ge-stat-card.pos .ge-stat-num { color: var(--pos); } .ge-stat-card.warn .ge-stat-num { color: var(--warn); }
.ge-stat-sub { color: var(--ink-faint); }

/* Recommendation cards — smart actions */
.ge-rec-list { gap: 10px; }
.ge-rec { border-radius: var(--r-card); border-color: var(--line); box-shadow: var(--sh-soft); padding: 16px 18px; }
.ge-rec:hover { box-shadow: var(--sh-soft-2); border-color: var(--brand-200); }
.ge-rec.urgent { border-left: 3px solid var(--neg); }
.ge-rec.high { border-left: 3px solid var(--warn); }
.ge-rec.medium { border-left: 3px solid var(--brand-400); }
.ge-rec.low { border-left: 3px solid var(--line-2); }
.ge-rec-icon { border-radius: var(--r-chip); }
.ge-rec-cat { color: var(--ink-faint); }
.ge-rec-title { font-size: .92rem; font-weight: 750; }

/* Lead source table */
.ge-source-table { border-radius: var(--r-card); overflow: hidden; box-shadow: var(--sh-soft); }
.ge-source-table th { background: var(--surface-2); color: var(--ink-faint); }
.ge-perf-fill { background: var(--brand-500); }

/* Goal engine hero */
.ge-goal-hero { border-radius: var(--r-hero); box-shadow: var(--sh-soft-2); }
.ge-bd-card { border-radius: var(--r-card); box-shadow: var(--sh-soft); }
.ge-bd-num { color: var(--brand-700); }

/* Slow mode + workflows */
.ge-slow-header { border-radius: var(--r-hero); box-shadow: var(--sh-soft-2); }
.ge-recovery-step, .ge-workflow-row { border-radius: var(--r-card); border-color: var(--line); box-shadow: var(--sh-soft); }
.ge-recovery-step:hover, .ge-workflow-row:hover { box-shadow: var(--sh-soft-2); }
.ge-approval-note { border-radius: var(--r-card); }

/* ---- Empty states — calm + premium ---- */
.gf-empty { padding: 56px 24px; }
.gf-empty svg { opacity: .3; }
.gf-empty h3 { font-size: 1.05rem; font-weight: 750; }
.empty-cta .ec-ico { border-radius: var(--r-card); }

@media (max-width: 760px) {
  .gf-fn-row { grid-template-columns: 92px 1fr; }
  .gf-fn-conv { grid-column: 2; text-align: left; padding-left: 0; }
  .gf-search-bar { flex-direction: column; align-items: stretch; }
  .gf-search-bar .input, .gf-search-bar .select, .gf-view-toggle { width: 100%; }
}

/* ============================================================
   Finance Inbox — email-connected intake (fc-intake / fc-rv / fc-email)
   ============================================================ */

/* Intake-channels status strip */
.fc-intake { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 16px; }
.fc-intake-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); box-shadow: var(--sh-1); padding: 13px 15px; }
.fc-intake-head { display: flex; align-items: center; gap: 8px; font-weight: 700; font-size: .88rem; color: var(--ink); margin-bottom: 8px; }
.fc-intake-head .badge { margin-left: auto; }
.fc-intake-addr { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.fc-intake-addr code { flex: 1; background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r-sm); padding: 7px 10px; font-size: .82rem; color: var(--ink); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fc-intake-sub { font-size: .78rem; color: var(--ink-mute); line-height: 1.4; }
.fc-intake-actions { display: flex; gap: 8px; margin-top: 10px; flex-wrap: wrap; }

/* Source / confidence / demo chips on inbox rows */
.fc-ii-chips { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin: 3px 0 1px; }
.fc-src-chip { display: inline-flex; align-items: center; gap: 4px; font-size: .68rem; font-weight: 700; padding: 2px 8px; border-radius: var(--pill); background: var(--surface-2); color: var(--ink-soft); border: 1px solid var(--line); }
.fc-src-chip.lg { font-size: .76rem; padding: 4px 10px; }
.fc-conf-chip { font-size: .68rem; font-weight: 700; padding: 2px 8px; border-radius: var(--pill); }
.fc-conf-chip.hi { background: var(--pos-bg); color: var(--pos); }
.fc-conf-chip.mid { background: var(--warn-bg); color: var(--warn); }
.fc-conf-chip.lo { background: var(--neg-bg); color: var(--neg); }
.fc-demo-tag { font-size: .64rem; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; padding: 2px 7px; border-radius: var(--pill); background: color-mix(in srgb, var(--brand-400) 22%, var(--surface)); color: var(--brand-ink); border: 1px dashed var(--brand-300); }
.fc-ii-subject { font-size: .78rem; color: var(--ink-mute); display: flex; align-items: center; gap: 5px; margin-top: 2px; }
.fc-ef-n { font-size: .66rem; font-weight: 700; opacity: .7; margin-left: 2px; }
.fin-ef.on .fc-ef-n { opacity: .9; }

/* Source-tinted inbox icons */
.fc-ii-src-email-forward { background: var(--brand-50); color: var(--brand-ink); }
.fc-ii-src-mailbox { background: color-mix(in srgb, var(--brand-400) 16%, var(--surface)); color: var(--brand-ink); }
.fc-ii-src-upload { background: var(--surface-2); color: var(--ink-soft); }
.fc-ii-src-accounting-import { background: var(--warn-bg); color: var(--warn); }
.fc-ii-src-manual { background: var(--surface-2); color: var(--ink-mute); }

/* Email review drawer */
.fc-review .fc-rv-email { background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r); padding: 13px 15px; margin-bottom: 14px; }
.fc-rv-email-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 10px; }
.fc-rv-email-rows { display: flex; flex-direction: column; gap: 5px; }
.fc-rv-email-rows > div { display: grid; grid-template-columns: 80px 1fr; gap: 8px; font-size: .85rem; align-items: baseline; }
.fc-rv-email-rows span { color: var(--ink-mute); font-size: .76rem; }
.fc-rv-email-rows b { color: var(--ink); font-weight: 600; }
.fc-rv-snippet { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--line); font-size: .82rem; color: var(--ink-soft); line-height: 1.5; }
.fc-rv-att { display: flex; align-items: center; gap: 11px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-sm); padding: 10px 13px; margin-bottom: 14px; }
.fc-rv-att-ico { width: 34px; height: 34px; border-radius: 9px; background: var(--brand-50); color: var(--brand-ink); display: flex; align-items: center; justify-content: center; flex: none; }
.fc-rv-att-body { flex: 1; min-width: 0; }
.fc-rv-att-body b { display: block; font-size: .85rem; color: var(--ink); }
.fc-rv-att-body span { font-size: .74rem; color: var(--ink-mute); }
.fc-proc-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.fc-proc { font-size: .82rem; }

/* Finance Settings — email integration */
.fc-email-settings { display: flex; flex-direction: column; gap: 16px; }
.fc-email-block { border-bottom: 1px solid var(--line-2); padding-bottom: 16px; }
.fc-email-block:last-child { border-bottom: none; padding-bottom: 0; }
.fc-eb-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; margin-bottom: 10px; }
.fc-eb-top b { font-size: .92rem; color: var(--ink); }
.fc-eb-top p { font-size: .8rem; margin: 2px 0 0; line-height: 1.45; }
.fc-eb-top .fin-sw-label { flex: none; white-space: nowrap; }
.fc-email-addr-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.fc-email-addr { flex: 1; min-width: 200px; background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r-sm); padding: 9px 12px; font-size: .85rem; color: var(--ink); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
.fc-mb-connected { display: grid; grid-template-columns: repeat(2, 1fr); gap: 6px 18px; background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r-sm); padding: 11px 13px; margin-bottom: 12px; }
.fc-mb-row { display: flex; justify-content: space-between; font-size: .82rem; }
.fc-mb-row span { color: var(--ink-mute); }
.fc-mb-row b { color: var(--ink); }
.fc-mb-actions { margin-top: 10px; }
.fc-connect-row { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; }
.fc-scan-pref { max-width: 420px; }
.fc-perm-note { display: flex; align-items: flex-start; gap: 7px; font-size: .8rem; color: var(--ink-mute); background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r-sm); padding: 9px 12px; line-height: 1.45; }
.fc-locked { align-items: center; }
.fc-lock-pill { display: inline-flex; align-items: center; gap: 4px; font-size: .68rem; font-weight: 700; color: var(--brand-ink); background: var(--brand-50); border: 1px solid var(--brand-200); border-radius: var(--pill); padding: 2px 8px; }
.fc-oauth-card { display: flex; align-items: flex-start; gap: 12px; background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r); padding: 14px; margin-bottom: 14px; }
.fc-oauth-ico { width: 42px; height: 42px; border-radius: 11px; background: var(--brand-50); color: var(--brand-ink); display: flex; align-items: center; justify-content: center; flex: none; }
.fc-oauth-card b { font-size: .92rem; color: var(--ink); }
.fc-oauth-card p { font-size: .8rem; margin: 3px 0 0; line-height: 1.45; }

@media (max-width: 760px) {
  .fc-intake { grid-template-columns: 1fr; }
  .fc-mb-connected { grid-template-columns: 1fr; }
  .fc-eb-top { flex-direction: column; }
  .fc-proc-actions .fc-proc { flex: 1 1 100%; }
}

/* ============================================================
   Outbound Sequence Builder (sb2-*) — full slide-over builder
   Matches Growth UI v2 system: 12 small · 16 panel · 20 hero · soft shadows
   ============================================================ */
.sb2-overlay { position: fixed; inset: 0; z-index: 1; display: flex; flex-direction: column; background: var(--canvas); animation: fadeIn .16s ease; }

/* Header */
.sb2-header { display: flex; align-items: center; gap: 14px; padding: 14px 20px; background: var(--surface-1); border-bottom: 1px solid var(--line); box-shadow: var(--sh-soft); flex: none; z-index: 2; }
.sb2-close { width: 38px; height: 38px; border-radius: var(--r-chip); border: 1px solid var(--line); background: var(--surface-1); color: var(--ink-2); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; flex: none; transition: all .14s; }
.sb2-close:hover { background: var(--surface-2); color: var(--ink); }
.sb2-htitle { flex: 1; min-width: 0; }
.sb2-name { font-size: 1.12rem; font-weight: 800; letter-spacing: -.02em; color: var(--ink); border: none; background: none; width: 100%; padding: 2px 0; outline: none; }
.sb2-name:focus { border-bottom: 2px solid var(--brand-400); }
.sb2-name::placeholder { color: var(--ink-faint); }
.sb2-hbadges { display: flex; align-items: center; gap: 8px; margin-top: 3px; }
.sb2-hsteps { font-size: .76rem; }
.sb2-hactions { display: flex; align-items: center; gap: 8px; flex: none; }

/* Active-edit warning */
.sb2-activewarn { display: flex; align-items: center; gap: 8px; padding: 9px 20px; background: color-mix(in srgb, var(--warn) 10%, var(--surface)); color: color-mix(in srgb, var(--warn) 82%, var(--ink)); font-size: .82rem; border-bottom: 1px solid color-mix(in srgb, var(--warn) 26%, var(--surface)); flex: none; }
.sb2-activewarn svg { color: var(--warn); flex: none; }

/* Body: 3 panes */
.sb2-body { flex: 1; min-height: 0; display: flex; }

/* Left rail */
.sb2-rail { width: 290px; flex: none; border-right: 1px solid var(--line); background: var(--surface-1); display: flex; flex-direction: column; min-height: 0; }
.sb2-rail-tabs { display: flex; gap: 4px; padding: 12px 14px 0; flex: none; }
.sb2-railtab { flex: 1; padding: 8px 10px; font-size: .82rem; font-weight: 700; color: var(--ink-mute); background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r-chip); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 5px; }
.sb2-railtab.on { background: var(--brand-50); border-color: var(--brand-200); color: var(--brand-700); }
.sb2-steplist { flex: 1; overflow-y: auto; padding: 12px 14px; display: flex; flex-direction: column; gap: 7px; }
.sb2-stepitem { display: flex; align-items: center; gap: 10px; padding: 10px 11px; border-radius: var(--r-chip); border: 1px solid var(--line); background: var(--surface-1); cursor: pointer; transition: all .13s; position: relative; }
.sb2-stepitem:hover { border-color: var(--brand-200); box-shadow: var(--sh-soft); }
.sb2-stepitem.sel { border-color: var(--brand-400); box-shadow: 0 0 0 2px var(--brand-100); background: var(--brand-50); }
.sb2-step-ico { width: 30px; height: 30px; border-radius: 9px; background: var(--surface-2); color: var(--ink-soft); display: inline-flex; align-items: center; justify-content: center; flex: none; }
.sb2-stepitem.t-email .sb2-step-ico { background: var(--brand-100); color: var(--brand-700); }
.sb2-stepitem.t-sms .sb2-step-ico { background: color-mix(in srgb, var(--warn) 16%, var(--surface)); color: var(--warn); }
.sb2-stepitem.t-call .sb2-step-ico, .sb2-stepitem.t-linkedin .sb2-step-ico { background: color-mix(in srgb, var(--ch-comm) 16%, var(--surface)); color: var(--ch-comm); }
.sb2-stepitem.t-wait .sb2-step-ico { background: var(--surface-2); color: var(--ink-mute); }
.sb2-stepitem.t-approval .sb2-step-ico, .sb2-stepitem.t-branch .sb2-step-ico { background: color-mix(in srgb, var(--ch-flow) 16%, var(--surface)); color: var(--ch-flow); }
.sb2-step-main { flex: 1; min-width: 0; }
.sb2-step-title { font-size: .85rem; font-weight: 700; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sb2-step-sub { font-size: .72rem; color: var(--ink-faint); }
.sb2-step-flag { width: 18px; height: 18px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: var(--surface-2); color: var(--ink-mute); flex: none; }
.sb2-step-flag.warn { background: color-mix(in srgb, var(--warn) 16%, var(--surface)); color: var(--warn); }
.sb2-step-ctrls { display: flex; flex-direction: column; gap: 1px; flex: none; opacity: 0; transition: opacity .12s; }
.sb2-stepitem:hover .sb2-step-ctrls { opacity: 1; }
.sb2-step-ctrls button { width: 22px; height: 16px; border: none; background: none; color: var(--ink-faint); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; border-radius: 4px; }
.sb2-step-ctrls button:hover { background: var(--surface-2); color: var(--ink); }
.sb2-rail-empty { padding: 20px; text-align: center; color: var(--ink-faint); font-size: .82rem; }
.sb2-addstep { position: relative; padding: 10px 14px; border-top: 1px solid var(--line); flex: none; }
.sb2-addstep > .btn { width: 100%; }
.sb2-addmenu { position: absolute; bottom: calc(100% - 2px); left: 14px; right: 14px; background: var(--surface-1); border: 1px solid var(--line); border-radius: var(--r-card); box-shadow: var(--sh-soft-2); padding: 6px; display: none; flex-direction: column; gap: 2px; z-index: 5; }
.sb2-addmenu.open { display: flex; }
.sb2-addmenu button { display: flex; align-items: center; gap: 9px; padding: 8px 10px; border: none; background: none; border-radius: 8px; font-size: .84rem; font-weight: 600; color: var(--ink-2); cursor: pointer; text-align: left; }
.sb2-addmenu button:hover { background: var(--brand-50); color: var(--brand-700); }
.sb2-stepactions { display: flex; gap: 6px; padding: 0 14px 12px; flex: none; }
.sb2-stepactions .btn { flex: 1; }

/* Center editor */
.sb2-main { flex: 1; min-width: 0; overflow-y: auto; padding: 22px 26px; }
.sb2-editor, .sb2-settings { max-width: 680px; margin: 0 auto; display: flex; flex-direction: column; gap: 14px; }
.sb2-editor-head { margin-bottom: 2px; }
.sb2-step-typepick { display: flex; flex-wrap: wrap; gap: 6px; }
.sb2-typebtn { display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; font-size: .8rem; font-weight: 600; border-radius: var(--r-chip); border: 1px solid var(--line); background: var(--surface-1); color: var(--ink-mute); cursor: pointer; transition: all .13s; }
.sb2-typebtn:hover { border-color: var(--brand-200); color: var(--ink); }
.sb2-typebtn.on { background: var(--brand-600); border-color: var(--brand-600); color: var(--on-accent); }
.sb2-field { display: flex; flex-direction: column; gap: 6px; }
.sb2-field > label { font-size: .76rem; font-weight: 700; color: var(--ink-mute); text-transform: uppercase; letter-spacing: .04em; display: flex; align-items: center; gap: 8px; }
.sb2-field-row { display: flex; gap: 12px; }
.sb2-field-row .sb2-field { flex: 0 0 140px; }
.sb2-field-row .sb2-field.grow { flex: 1; }
.sb2-in { height: 42px; border-radius: var(--r-chip) !important; border-color: var(--line) !important; }
.sb2-ta { border-radius: var(--r-chip) !important; border-color: var(--line) !important; font-size: .9rem; line-height: 1.5; resize: vertical; width: 100%; }
.sb2-in:focus, .sb2-ta:focus { border-color: var(--brand-400) !important; box-shadow: var(--ring); }
.sb2-charcount { font-size: .72rem; font-weight: 700; color: var(--ink-faint); margin-left: auto; }
.sb2-charcount.over { color: var(--warn); }
.sb2-ab-toggle, .sb2-manual { display: inline-flex; align-items: center; gap: 8px; font-size: .8rem; font-weight: 600; color: var(--ink-mute); cursor: pointer; }
.sb2-manual { color: var(--ink-faint); font-weight: 500; }
.sb2-ab-metric { font-size: .68rem; font-weight: 600; color: var(--ink-faint); margin-left: auto; }
.sb2-consent { display: flex; gap: 8px; align-items: flex-start; padding: 11px 14px; background: color-mix(in srgb, var(--warn) 9%, var(--surface)); border: 1px solid color-mix(in srgb, var(--warn) 28%, var(--surface)); border-radius: var(--r-chip); font-size: .82rem; color: color-mix(in srgb, var(--warn) 82%, var(--ink)); }
.sb2-consent svg { color: var(--warn); flex: none; margin-top: 1px; }
.sb2-wait-note { display: flex; gap: 8px; align-items: center; padding: 11px 14px; background: var(--surface-2); border-radius: var(--r-chip); font-size: .82rem; color: var(--ink-2); }
.sb2-wait-note svg { color: var(--ink-mute); flex: none; }

/* Variable picker */
.sb2-varpick { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; padding: 12px 0 2px; border-top: 1px solid var(--line-2); }
.sb2-varpick-l { font-size: .74rem; font-weight: 700; color: var(--ink-faint); text-transform: uppercase; letter-spacing: .04em; margin-right: 4px; }
.sb2-varchip { font-size: .74rem; font-weight: 600; padding: 4px 10px; border-radius: var(--pill); border: 1px solid var(--line); background: var(--surface-2); color: var(--ink-2); cursor: pointer; font-family: var(--mono, ui-monospace, monospace); transition: all .12s; }
.sb2-varchip:hover { background: var(--brand-50); border-color: var(--brand-200); color: var(--brand-700); }

/* Step metrics */
.sb2-metrics { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; padding: 14px 16px; background: var(--surface-2); border-radius: var(--r-card); margin-top: 4px; }
.sb2-metrics-l { font-size: .74rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--ink-faint); }
.sb2-metric { text-align: center; }
.sb2-metric b { display: block; font-size: 1.1rem; font-weight: 800; color: var(--ink); }
.sb2-metric span { font-size: .68rem; color: var(--ink-faint); text-transform: uppercase; letter-spacing: .03em; }
.sb2-metrics-note { font-size: .74rem; color: var(--ink-faint); margin-left: auto; }
.sb2-empty { text-align: center; padding: 60px 24px; color: var(--ink-faint); display: flex; flex-direction: column; align-items: center; gap: 10px; }

/* Right side */
.sb2-side { width: 340px; flex: none; border-left: 1px solid var(--line); background: var(--surface-1); display: flex; flex-direction: column; min-height: 0; }
.sb2-rtabs { display: flex; gap: 2px; padding: 12px 14px 0; flex: none; border-bottom: 1px solid var(--line); }
.sb2-rtab { flex: 1; padding: 9px 8px; font-size: .79rem; font-weight: 700; color: var(--ink-mute); background: none; border: none; border-bottom: 2px solid transparent; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 5px; }
.sb2-rtab.on { color: var(--brand-700); border-bottom-color: var(--brand-500); }
.sb2-rbody { flex: 1; overflow-y: auto; padding: 16px; }

/* Preview */
.sb2-preview { border: 1px solid var(--line); border-radius: var(--r-card); overflow: hidden; box-shadow: var(--sh-soft); background: var(--surface); margin-top: 12px; }
.sb2-preview-head { display: flex; align-items: center; gap: 10px; padding: 12px 14px; background: var(--surface-2); border-bottom: 1px solid var(--line); }
.sb2-preview-av { width: 34px; height: 34px; border-radius: 50%; background: var(--brand-100); color: var(--brand-700); display: inline-flex; align-items: center; justify-content: center; font-weight: 700; font-size: .78rem; flex: none; }
.sb2-preview-head b { font-size: .82rem; color: var(--ink); display: block; }
.sb2-preview-head span { font-size: .74rem; color: var(--ink-faint); }
.sb2-preview-subj { padding: 12px 14px 4px; font-size: .92rem; font-weight: 700; color: var(--ink); }
.sb2-preview-body { padding: 10px 14px 16px; font-size: .85rem; line-height: 1.55; color: var(--ink-2); }
.sb2-preview.sms .sb2-preview-body, .sb2-preview.linkedin .sb2-preview-body { padding-top: 14px; }
.sb2-var-ok { background: color-mix(in srgb, var(--pos) 16%, var(--surface)); color: color-mix(in srgb, var(--pos) 80%, var(--ink)); border-radius: 4px; padding: 0 3px; font-weight: 600; }
.sb2-var-bad { background: color-mix(in srgb, var(--warn) 18%, var(--surface)); color: color-mix(in srgb, var(--warn) 84%, var(--ink)); border-radius: 4px; padding: 0 3px; font-weight: 600; }
.sb2-preview-generic { text-align: center; padding: 30px 16px; color: var(--ink-mute); display: flex; flex-direction: column; align-items: center; gap: 8px; margin-top: 12px; background: var(--surface-2); border-radius: var(--r-card); }
.sb2-preview-generic b { color: var(--ink); font-size: .9rem; }
.sb2-preview-generic p { font-size: .82rem; line-height: 1.5; margin: 0; }
.sb2-miss { display: flex; align-items: flex-start; gap: 7px; flex-wrap: wrap; padding: 10px 12px; background: color-mix(in srgb, var(--warn) 9%, var(--surface)); border-radius: var(--r-chip); font-size: .78rem; color: color-mix(in srgb, var(--warn) 82%, var(--ink)); margin-top: 12px; }
.sb2-miss code { background: var(--surface); border-radius: 4px; padding: 0 4px; }
.sb2-pers { display: flex; align-items: center; gap: 7px; padding: 10px 12px; background: color-mix(in srgb, var(--pos) 8%, var(--surface)); border-radius: var(--r-chip); font-size: .78rem; color: color-mix(in srgb, var(--pos) 76%, var(--ink)); margin-top: 12px; }

/* AI assist */
.sb2-ai-intro { display: flex; align-items: flex-start; gap: 8px; font-size: .82rem; color: var(--ink-2); line-height: 1.5; margin: 0 0 14px; }
.sb2-ai-intro svg { color: var(--brand-600); flex: none; margin-top: 1px; }
.sb2-ai-acts { display: flex; flex-direction: column; gap: 7px; }
.sb2-ai-btn { justify-content: flex-start; }
.sb2-ai-note { font-size: .76rem; margin-top: 12px; }

/* Compliance */
.sb2-comp-list { display: flex; flex-direction: column; gap: 8px; }
.sb2-comp { display: flex; align-items: flex-start; gap: 8px; padding: 10px 12px; border-radius: var(--r-chip); font-size: .81rem; line-height: 1.4; }
.sb2-comp.ok { background: color-mix(in srgb, var(--pos) 8%, var(--surface)); color: color-mix(in srgb, var(--pos) 76%, var(--ink)); }
.sb2-comp.warn { background: color-mix(in srgb, var(--warn) 9%, var(--surface)); color: color-mix(in srgb, var(--warn) 82%, var(--ink)); }
.sb2-comp svg { flex: none; margin-top: 1px; }

/* Validate bar */
.sb2-validate { display: flex; align-items: center; gap: 8px; padding: 10px 20px; font-size: .82rem; font-weight: 600; flex: none; border-top: 1px solid var(--line); }
.sb2-validate.err { background: color-mix(in srgb, var(--neg) 8%, var(--surface)); color: color-mix(in srgb, var(--neg) 80%, var(--ink)); }
.sb2-validate.warn { background: color-mix(in srgb, var(--warn) 9%, var(--surface)); color: color-mix(in srgb, var(--warn) 82%, var(--ink)); }

@media (max-width: 1080px) {
  .sb2-side { width: 300px; }
  .sb2-rail { width: 250px; }
}
@media (max-width: 860px) {
  .sb2-body { flex-direction: column; overflow-y: auto; }
  .sb2-rail, .sb2-side { width: auto; border-right: none; border-left: none; border-bottom: 1px solid var(--line); }
  .sb2-rail { max-height: 280px; }
  .sb2-steplist { max-height: 200px; }
  .sb2-header { flex-wrap: wrap; padding: 12px 16px; gap: 10px; }
  .sb2-htitle { order: 1; flex: 1 1 calc(100% - 52px); }
  .sb2-close { order: 0; }
  .sb2-name { font-size: 1rem; }
  .sb2-hactions { order: 2; flex: 1 1 100%; justify-content: flex-end; flex-wrap: wrap; }
  .sb2-hactions .btn { padding: 7px 11px; font-size: .8rem; }
  .sb2-hactions #sb2Dup { display: none; }
  .sb2-main { padding: 18px 16px; }
}

/* ============================================================
   Suppliers & Vendors — vendor identity (logo/icon) +
   permission-protected tax/compliance documents (additive;
   pairs with the fc-* finance console styles above)
   ============================================================ */
/* Card avatar shows the uploaded square icon when present, else initials */
.fc-sup-av.has-img { background: var(--surface); padding: 0; overflow: hidden; }
.fc-sup-av.has-img img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }

/* Compliance indicators on vendor cards */
.fc-comp-badges { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.fc-comp-badge { display: inline-flex; align-items: center; gap: 4px; font-size: .7rem; font-weight: 700; line-height: 1; padding: 4px 8px; border-radius: 999px; border: 1px solid var(--line); background: var(--surface-2); color: var(--ink-soft); cursor: pointer; transition: filter .12s ease, transform .12s ease; }
.fc-comp-badge:hover { filter: brightness(.97); transform: translateY(-1px); }
.fc-comp-badge.pos { color: var(--pos); background: color-mix(in srgb, var(--pos) 12%, var(--surface)); border-color: color-mix(in srgb, var(--pos) 30%, var(--line)); }
.fc-comp-badge.warn { color: var(--warn); background: color-mix(in srgb, var(--warn) 13%, var(--surface)); border-color: color-mix(in srgb, var(--warn) 30%, var(--line)); }
.fc-comp-badge.neg { color: var(--neg); background: color-mix(in srgb, var(--neg) 12%, var(--surface)); border-color: color-mix(in srgb, var(--neg) 30%, var(--line)); }

/* Vendor identity (logo + icon) edit area in the profile modal */
.fc-vendor-identity { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.fc-vid-block { display: flex; flex-direction: column; gap: 10px; background: color-mix(in srgb, var(--canvas) 55%, var(--surface)); border: 1px solid var(--line-2); border-radius: var(--r-sm); padding: 12px; }
.fc-vid-prev { position: relative; display: flex; align-items: center; justify-content: center; background: repeating-conic-gradient(#0000000d 0% 25%, transparent 0% 50%) 0 / 16px 16px, var(--surface); border: 1px solid var(--line); border-radius: var(--r-sm); overflow: hidden; }
.fc-vid-prev.logo { height: 90px; }
.fc-vid-prev.icon { width: 90px; height: 90px; align-self: center; border-radius: 18px; }
.fc-vid-prev img { max-width: 100%; max-height: 100%; object-fit: contain; }
.fc-vid-prev.icon img { width: 100%; height: 100%; object-fit: cover; }
.fc-vid-prev.empty { color: var(--ink-mute); }
.fc-vid-ph { display: flex; flex-direction: column; align-items: center; gap: 4px; font-size: .72rem; }
.fc-vid-ph-init { font-size: 1.7rem; font-weight: 800; color: var(--brand-700, var(--ink)); }
.fc-vid-meta { display: flex; flex-direction: column; gap: 2px; }
.fc-vid-name { font-weight: 700; font-size: .85rem; }
.fc-vid-hint { font-size: .73rem; color: var(--ink-mute); line-height: 1.35; }
.fc-vid-acts { display: flex; align-items: center; gap: 8px; margin-top: 6px; }

/* Secure tag + masked / revealable Tax ID */
.fc-secure-tag { display: inline-flex; align-items: center; gap: 3px; font-size: .62rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--warn); margin-left: 6px; vertical-align: middle; }
.fc-taxid-row { display: flex; align-items: center; gap: 8px; }
.fc-taxid-row .input { flex: 1; }
.fc-taxid-masked { flex: 1; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .08em; padding: 9px 12px; border: 1px dashed var(--line); border-radius: var(--r-sm); background: var(--surface-2); color: var(--ink); }
.fc-taxid-restrict { display: inline-flex; align-items: center; gap: 4px; font-size: .73rem; color: var(--ink-mute); white-space: nowrap; }

/* W-9 status / file mismatch warning */
.fc-w9-warn { display: flex; align-items: flex-start; gap: 7px; font-size: .8rem; color: var(--warn); background: color-mix(in srgb, var(--warn) 12%, var(--surface)); border: 1px solid color-mix(in srgb, var(--warn) 28%, var(--line)); border-radius: var(--r-sm); padding: 9px 11px; margin: 4px 0 14px; }

/* Tax Documents header + list */
.fc-taxdoc-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 16px 0 10px; }
.fc-taxdoc-head-l { display: flex; align-items: center; gap: 7px; font-weight: 700; font-size: .9rem; }
.fc-taxdoc-list { display: flex; flex-direction: column; gap: 8px; }
.fc-taxdoc { display: flex; align-items: flex-start; gap: 10px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-sm); padding: 10px 12px; }
.fc-taxdoc-ico { flex: none; width: 30px; height: 30px; border-radius: 8px; display: flex; align-items: center; justify-content: center; background: var(--brand-100); color: var(--brand-700, var(--brand-ink)); }
.fc-taxdoc-main { flex: 1; min-width: 0; }
.fc-taxdoc-top { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.fc-taxdoc-name { font-size: .86rem; word-break: break-word; }
.fc-taxdoc-meta { font-size: .73rem; color: var(--ink-mute); margin-top: 2px; }
.fc-taxdoc-note { font-size: .76rem; color: var(--ink-soft); margin-top: 4px; }
.fc-taxdoc-acts { display: flex; align-items: center; gap: 4px; flex: none; flex-wrap: wrap; justify-content: flex-end; max-width: 190px; }
.fc-taxdoc-status { height: 30px; padding: 0 6px; font-size: .72rem; min-width: 104px; }
.fc-taxdoc .fc-doc-del { color: var(--neg); }
.fc-taxdoc-empty, .fc-taxdoc-savefirst { display: flex; align-items: center; gap: 8px; font-size: .82rem; color: var(--ink-mute); background: color-mix(in srgb, var(--canvas) 55%, var(--surface)); border: 1px dashed var(--line); border-radius: var(--r-sm); padding: 14px; }

/* Inline add-document panel */
.fc-taxdoc-add { background: color-mix(in srgb, var(--canvas) 55%, var(--surface)); border: 1px solid var(--line-2); border-radius: var(--r-sm); padding: 12px; margin-bottom: 12px; }
.fc-taxdoc-add-foot { display: flex; justify-content: flex-end; gap: 8px; margin-top: 10px; }
.fc-dropzone.sm { padding: 14px; margin: 4px 0 10px; }
.fc-dropzone.sm .fc-dz-title { font-size: .82rem; }
.btn.is-disabled, .btn:disabled { opacity: .5; pointer-events: none; }

/* Restricted (non-finance) state */
.fc-tax-locked { display: flex; align-items: flex-start; gap: 12px; background: color-mix(in srgb, var(--canvas) 55%, var(--surface)); border: 1px solid var(--line); border-radius: var(--r-sm); padding: 14px; }
.fc-tax-locked-ico { flex: none; width: 40px; height: 40px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: var(--surface-2); color: var(--ink-soft); }
.fc-tax-locked-main { display: flex; flex-direction: column; gap: 3px; }
.fc-tax-locked-main b { font-size: .9rem; }
.fc-tax-locked-main span { font-size: .8rem; color: var(--ink-mute); line-height: 1.4; }

/* In-modal document preview overlay (lightbox) */
.fc-doc-preview-overlay { position: absolute; inset: 0; z-index: 5; background: rgba(20,18,12,.74); backdrop-filter: blur(2px); display: flex; flex-direction: column; border-radius: var(--r-lg); animation: fadeIn .14s ease; }
.fc-doc-pv-bar { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 14px; background: var(--surface); border-bottom: 1px solid var(--line-2); border-radius: var(--r-lg) var(--r-lg) 0 0; }
.fc-doc-pv-title { display: flex; align-items: center; gap: 7px; font-size: .82rem; font-weight: 700; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fc-doc-pv-body { flex: 1; overflow: auto; display: flex; align-items: center; justify-content: center; padding: 16px; }
.fc-doc-pv-body img { max-width: 100%; max-height: 100%; object-fit: contain; box-shadow: var(--sh-2); border-radius: 4px; background: #fff; }
.fc-doc-pv-body iframe { width: 100%; height: 100%; border: 0; background: #fff; border-radius: 4px; }
.fc-doc-pv-fallback { display: flex; flex-direction: column; align-items: center; gap: 8px; color: #fff; text-align: center; }
.fc-doc-pv-fallback .muted { color: rgba(255,255,255,.72); }

/* Responsive — stack identity + document controls on small screens */
@media (max-width: 640px) {
  .fc-vendor-identity { grid-template-columns: 1fr; }
  .fc-taxid-row { flex-wrap: wrap; }
  .fc-taxdoc { flex-wrap: wrap; }
  .fc-taxdoc-acts { max-width: none; width: 100%; justify-content: flex-start; margin-top: 6px; }
  .fc-taxdoc-head { flex-wrap: wrap; }
}

/* ============================================================
   Sequence Builder v2 — step analytics · A/B metrics · drag-reorder
   ============================================================ */

/* Drag-and-drop reorder */
.sb2-step-grip { width: 16px; flex: none; display: inline-flex; align-items: center; justify-content: center; color: var(--ink-faint); cursor: grab; opacity: 0; transition: opacity .12s; margin-left: -4px; }
.sb2-stepitem:hover .sb2-step-grip { opacity: .7; }
.sb2-stepitem[draggable] { cursor: default; }
.sb2-stepitem.dragging { opacity: .4; box-shadow: var(--sh-soft-2); }
.sb2-stepitem.drag-over { border-color: var(--brand-400); box-shadow: 0 -2px 0 var(--brand-500) inset; }
.sb2-stepitem.drag-over::before { content: ""; position: absolute; left: 8px; right: 8px; top: -4px; height: 2px; background: var(--brand-500); border-radius: 2px; }

/* Step analytics dashboard */
.sb2-analytics { background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r-card); padding: 14px 16px; margin-top: 4px; }
.sb2-an-head { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; }
.sb2-an-title { display: inline-flex; align-items: center; gap: 6px; font-size: .76rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--ink-mute); }
.sb2-an-title svg { color: var(--brand-600); }
.sb2-an-note { margin-left: auto; font-size: .74rem; color: var(--ink-faint); }
.sb2-an-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(72px, 1fr)); gap: 10px; }
.sb2-an-grid.two { grid-template-columns: 1fr 1fr; max-width: 260px; }
.sb2-an-cell { background: var(--surface-1); border: 1px solid var(--line); border-radius: var(--r-chip); padding: 10px 12px; text-align: center; }
.sb2-an-cell b { display: block; font-size: 1.25rem; font-weight: 850; letter-spacing: -.02em; color: var(--ink); line-height: 1; }
.sb2-an-cell span { font-size: .68rem; font-weight: 600; text-transform: uppercase; letter-spacing: .03em; color: var(--ink-faint); }
.sb2-an-cell .sb2-an-rate { display: block; font-size: .72rem; font-weight: 700; font-style: normal; color: var(--ink-mute); margin-top: 3px; }
.sb2-an-cell.pos b { color: var(--pos); } .sb2-an-cell.pos .sb2-an-rate { color: var(--pos); }
.sb2-an-cell.neg b { color: var(--neg); }
.sb2-an-funnel { display: flex; flex-direction: column; gap: 5px; margin-top: 12px; }
.sb2-an-bar { height: 7px; border-radius: var(--pill); min-width: 4px; transition: width .4s; }
.sb2-an-bar.open { background: var(--brand-500); }
.sb2-an-bar.reply { background: var(--pos); }

/* A/B subject metrics */
.sb2-ab-metric { font-size: .68rem; font-weight: 700; color: var(--ink-faint); margin-left: auto; display: inline-flex; align-items: center; gap: 3px; background: var(--surface-2); border-radius: var(--pill); padding: 2px 8px; }
.sb2-ab-metric.win { background: color-mix(in srgb, var(--pos) 14%, var(--surface)); color: var(--pos); }
.sb2-ab-metric.win svg { color: var(--warn); }
.sb2-ab-result { display: flex; align-items: center; gap: 8px; padding: 10px 13px; background: color-mix(in srgb, var(--pos) 8%, var(--surface)); border: 1px solid color-mix(in srgb, var(--pos) 26%, var(--surface)); border-radius: var(--r-chip); font-size: .8rem; color: color-mix(in srgb, var(--pos) 78%, var(--ink)); line-height: 1.45; }
.sb2-ab-result svg { color: var(--warn); flex: none; }
.sb2-ab-pending { display: flex; align-items: center; gap: 7px; padding: 9px 13px; background: var(--surface-2); border-radius: var(--r-chip); font-size: .78rem; color: var(--ink-mute); }
.sb2-ab-pending svg { flex: none; }

/* ============================================================
   Theme & appearance (Settings → Theme Engine) — STEP 5/8
   ============================================================ */
.ap-grid { display: grid; grid-template-columns: minmax(0,1fr) 360px; gap: 22px; align-items: start; }
.ap-controls { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.ap-controls .set-panel { margin: 0; }

/* presets */
.ap-presets { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.ap-preset { display: flex; flex-direction: column; gap: 6px; padding: 10px; text-align: left; border: 1px solid var(--border-soft); border-radius: var(--r-card); background: var(--surface-elevated); cursor: pointer; transition: border-color .14s ease, box-shadow .14s ease, transform .08s ease; }
.ap-preset:hover { border-color: var(--border-strong); box-shadow: var(--sh-soft); transform: translateY(-1px); }
.ap-preset.on { border-color: var(--primary-accent); box-shadow: 0 0 0 2px color-mix(in srgb, var(--primary-accent) 40%, transparent); }
.ap-preset-sw { display: flex; height: 26px; border-radius: 7px; overflow: hidden; border: 1px solid var(--border-soft); }
.ap-preset-sw i { flex: 1; }
.ap-preset-sw.sm { height: 18px; width: 56px; flex: none; }
.ap-preset-name { font-weight: 700; font-size: .86rem; color: var(--text-primary); display: flex; align-items: center; gap: 4px; }
.ap-preset-name svg { color: var(--primary-accent); }
.ap-preset-desc { font-size: .74rem; color: var(--text-muted); }

/* field rows + segmented controls */
.ap-field { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 7px 0; }
.ap-field + .ap-field { border-top: 1px solid var(--border-soft); }
.ap-field-l { font-size: .85rem; font-weight: 600; color: var(--text-secondary); }
.ap-seg { display: inline-flex; flex-wrap: wrap; justify-content: flex-end; background: var(--surface-muted); border: 1px solid var(--border-soft); border-radius: var(--r); padding: 3px; gap: 2px; }
.ap-seg-b { padding: 5px 12px; border-radius: var(--pill); font-size: .8rem; font-weight: 600; color: var(--text-muted); transition: background .12s ease, color .12s ease; }
.ap-seg-b:hover { color: var(--text-primary); }
.ap-seg-b.on { background: var(--surface-elevated); color: var(--text-primary); box-shadow: var(--sh-soft); }

/* color rows */
.ap-sub { font-size: .74rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--text-muted); margin: 14px 0 8px; }
.ap-note { font-size: .82rem; margin: 8px 0 2px; }
.ap-colors { display: flex; flex-direction: column; gap: 4px; }
.ap-color { display: flex; align-items: center; gap: 11px; padding: 6px 0; }
.ap-swatch { position: relative; width: 34px; height: 34px; flex: none; border-radius: 9px; overflow: hidden; border: 1px solid var(--border-strong); cursor: pointer; box-shadow: var(--sh-soft); }
.ap-swatch input[type=color] { position: absolute; inset: -4px; width: calc(100% + 8px); height: calc(100% + 8px); border: none; padding: 0; background: none; cursor: pointer; }
.ap-color-meta { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.ap-color-l { font-size: .86rem; font-weight: 600; color: var(--text-primary); }
.ap-color-h { font-size: .74rem; color: var(--text-muted); }
.ap-hex { font-size: .76rem; color: var(--text-secondary); background: var(--surface-muted); border: 1px solid var(--border-soft); border-radius: 6px; padding: 2px 7px; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }

/* assets */
.ap-assets { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 12px; }
.ap-asset { display: flex; flex-direction: column; gap: 8px; }
.ap-asset-box { height: 64px; border: 1px dashed var(--border-strong); border-radius: var(--r-card); display: grid; place-items: center; background: var(--surface-muted); overflow: hidden; }
.ap-asset-box.sm { height: 48px; width: 48px; }
.ap-asset-box img { max-height: 100%; max-width: 100%; object-fit: contain; }

/* saved themes */
.ap-saved { display: flex; flex-direction: column; gap: 8px; }
.ap-saved-row { display: flex; align-items: center; gap: 10px; padding: 8px; border: 1px solid var(--border-soft); border-radius: var(--r-card); background: var(--surface-elevated); }
.ap-saved-name { flex: 1; font-weight: 600; font-size: .86rem; color: var(--text-primary); }

/* preview column */
.ap-preview-col { min-width: 0; }
.ap-preview-wrap { position: sticky; top: 16px; background: var(--surface-elevated); border: 1px solid var(--border-soft); border-radius: var(--r-hero); padding: 14px; box-shadow: var(--sh-soft); }
.ap-preview-head { font-size: .78rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--text-muted); display: flex; align-items: center; gap: 6px; margin-bottom: 10px; }

/* the scoped mock — every color comes from the draft's tokens via styleString */
.tp-frame { display: grid; grid-template-columns: 92px 1fr; height: 250px; border-radius: var(--r-card); overflow: hidden; border: 1px solid var(--border-strong); background: var(--app-bg); }
.tp-side { background: var(--sidebar-bg); color: var(--sidebar-text); padding: 12px 9px; display: flex; flex-direction: column; gap: 5px; }
.tp-brand { display: flex; align-items: center; gap: 6px; font-size: .72rem; font-weight: 700; margin-bottom: 6px; }
.tp-brand img { width: 18px; height: 18px; border-radius: 5px; object-fit: contain; }
.tp-mark { width: 18px; height: 18px; border-radius: 5px; background: var(--primary-accent); color: var(--on-accent); display: grid; place-items: center; font-size: .7rem; font-weight: 800; }
.tp-nav { display: flex; align-items: center; gap: 6px; font-size: .68rem; padding: 5px 7px; border-radius: 7px; color: color-mix(in srgb, var(--sidebar-text) 70%, transparent); }
.tp-nav.on { background: var(--primary-accent); color: var(--on-accent); font-weight: 700; }
.tp-body { padding: 11px; display: flex; flex-direction: column; gap: 9px; min-width: 0; }
.tp-top { display: flex; align-items: center; justify-content: space-between; font-size: .72rem; font-weight: 600; color: var(--text-secondary); }
.tp-avatar { width: 22px; height: 22px; border-radius: 50%; background: var(--secondary-accent); color: var(--on-accent-2); display: grid; place-items: center; font-size: .62rem; font-weight: 700; }
.tp-card { background: var(--surface-elevated); border: 1px solid var(--border-soft); border-radius: 11px; padding: 11px; box-shadow: var(--sh-soft); display: flex; flex-direction: column; gap: 8px; }
.tp-h { font-size: .85rem; font-weight: 800; color: var(--text-primary); }
.tp-p { font-size: .7rem; color: var(--text-secondary); line-height: 1.4; }
.tp-tabs { display: flex; gap: 12px; border-bottom: 1px solid var(--border-soft); }
.tp-tabs span { font-size: .68rem; font-weight: 600; color: var(--inactive-tab); padding-bottom: 5px; border-bottom: 2px solid transparent; margin-bottom: -1px; }
.tp-tabs span.on { color: var(--active-tab); border-bottom-color: var(--active-tab); }
.tp-chips { display: flex; gap: 6px; flex-wrap: wrap; }
.tp-chips span { font-size: .66rem; font-weight: 600; padding: 3px 9px; border-radius: var(--pill); background: var(--chip-bg); color: var(--chip-text); border: 1px solid var(--chip-border); }
.tp-btns { display: flex; gap: 7px; }
.tp-btn { font-size: .7rem; font-weight: 700; padding: 6px 11px; border-radius: 8px; background: var(--primary-button); color: var(--primary-button-text); }
.tp-btn2 { font-size: .7rem; font-weight: 600; padding: 6px 11px; border-radius: 8px; background: transparent; border: 1px solid var(--border-strong); color: var(--text-primary); }
.tp-tags { display: flex; gap: 6px; flex-wrap: wrap; }
.tp-tags span { font-size: .64rem; font-weight: 700; padding: 3px 8px; border-radius: var(--pill); }
.tp-tags .ok { background: color-mix(in srgb, var(--success) 16%, var(--surface)); color: var(--success); }
.tp-tags .warn { background: color-mix(in srgb, var(--warning) 18%, var(--surface)); color: var(--warning); }
.tp-tags .bad { background: color-mix(in srgb, var(--danger) 16%, var(--surface)); color: var(--danger); }

/* audit / guardrails */
.ap-audit { margin-top: 12px; }
.ap-warn { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 9px 11px; border-radius: var(--r-card); background: var(--warn-bg); border: 1px solid color-mix(in srgb, var(--warn) 34%, var(--surface)); margin-bottom: 10px; }
.ap-warn-t { font-size: .78rem; color: color-mix(in srgb, var(--warn) 72%, var(--ink)); display: flex; align-items: center; gap: 6px; }
.ap-warn-t svg { color: var(--warn); flex: none; }
.ap-ok-line { display: flex; align-items: center; gap: 7px; font-size: .78rem; color: var(--success); margin-bottom: 10px; }
.ap-chks { display: flex; flex-direction: column; gap: 4px; }
.ap-chk { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 6px 9px; border-radius: 9px; background: var(--surface-muted); font-size: .76rem; }
.ap-chk-l { display: flex; align-items: center; gap: 6px; color: var(--text-secondary); min-width: 0; }
.ap-chk.ok .ap-chk-l svg { color: var(--success); }
.ap-chk.warn .ap-chk-l svg { color: var(--warning); }
.ap-chk.bad { background: color-mix(in srgb, var(--danger) 9%, var(--surface)); }
.ap-chk.bad .ap-chk-l svg { color: var(--danger); }
.ap-chk-r { display: flex; align-items: center; gap: 7px; flex: none; }
.ap-chk-r b { font-size: .72rem; color: var(--text-secondary); font-variant-numeric: tabular-nums; }
.ap-sw { width: 22px; height: 18px; border-radius: 4px; display: grid; place-items: center; font-size: .62rem; font-weight: 800; border: 1px solid var(--border-soft); }

@media (max-width: 980px) {
  .ap-grid { grid-template-columns: 1fr; }
  .ap-preview-wrap { position: static; }
}

/* Portal appearance editor (STEP 4) */
.pt-grid { display: grid; grid-template-columns: minmax(0,1fr) 300px; gap: 20px; align-items: start; }
.pt-controls { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.pt-preview { position: sticky; top: 0; }
.pp-prev { border-radius: var(--r-card); overflow: hidden; border: 1px solid var(--pv-border); background: var(--pv-bg); color: var(--pv-text); box-shadow: var(--sh-soft); }
.pp-banner { height: 64px; background-size: cover; background-position: center; background-color: color-mix(in srgb, var(--pv-accent) 30%, var(--pv-surface)); }
.pp-bar { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 10px 13px; background: var(--pv-accent); color: var(--pv-accent-text); }
.pp-brand { display: inline-flex; align-items: center; gap: 8px; min-width: 0; font-weight: 700; font-size: .85rem; }
.pp-brand img { width: 22px; height: 22px; border-radius: 6px; object-fit: cover; background: rgba(255,255,255,.2); }
.pp-mono { width: 22px; height: 22px; border-radius: 6px; display: grid; place-items: center; font-size: .66rem; font-weight: 800; background: rgba(255,255,255,.22); }
.pp-tag { font-size: .58rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; background: rgba(255,255,255,.2); padding: 2px 8px; border-radius: var(--pill); }
.pp-hero { padding: 14px 14px 10px; }
.pp-hero h4 { font-size: .95rem; font-weight: 800; color: var(--pv-text); }
.pp-hero p { font-size: .72rem; color: var(--pv-muted); margin-top: 3px; }
.pp-cards { display: grid; grid-template-columns: repeat(3,1fr); gap: 8px; padding: 0 14px 12px; }
.pp-card { background: var(--pv-surface); border: 1px solid var(--pv-border); border-radius: 9px; padding: 9px; display: flex; flex-direction: column; gap: 2px; }
.pp-card span { font-size: .58rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--pv-muted); }
.pp-card b { font-size: .95rem; font-weight: 800; color: var(--pv-text); }
.pp-btns { display: flex; gap: 8px; padding: 0 14px 14px; }
.pp-btn { font-size: .72rem; font-weight: 700; padding: 7px 12px; border-radius: 8px; background: var(--pv-btn); color: var(--pv-btn-text); }
.pp-btn2 { font-size: .72rem; font-weight: 600; padding: 7px 12px; border-radius: 8px; background: transparent; border: 1px solid var(--pv-border); color: var(--pv-text); }
@media (max-width: 720px) { .pt-grid { grid-template-columns: 1fr; } .pt-preview { position: static; } }

/* ============================================================
   Theme-system polish (STEP 7) — make chips, filters, tabs & status
   tags visually distinct so important features don't get lost. The
   key move: secondary chips read as a COOL neutral (--chip-bg), not
   the warm beige of cards, so filters/tags stop blending in.
   ============================================================ */
.gf-sig-chip, .gf-icp-tag, .sb2-varchip {
  background: var(--chip-bg); border-color: var(--chip-border); color: var(--chip-text);
}
.gf-icp-tag.more, .gf-sig-chip.more { background: transparent; color: var(--text-muted); }
.sb2-varchip:hover { background: var(--brand-50); border-color: var(--brand-200); color: var(--brand-700); }
/* Source / provider tabs: clearer active vs. coming-soon distinction. */
.gf-prov-soon { background: var(--chip-bg); color: var(--text-muted); border: 1px solid var(--chip-border); }
/* Filter bar reads as a defined control surface, not a blur on the canvas. */
.gf-filterbar, .gf-filters, .sb2-railtabs { border-color: var(--border-strong); }
/* Inactive tabs lean on the dedicated token; active stays on the accent. */
.gf-tab:not(.active), .ge-tab:not(.active), .sb2-rtab:not(.on) { color: var(--inactive-tab); }
/* Status tags keep semantic, distinct hues everywhere they appear. */
.badge.pos, .gf-pc-status.pos { background: var(--success-bg); color: var(--success); }
.badge.warn, .gf-pc-status.warn { background: var(--warning-bg); color: var(--warning); }
.badge.neg, .gf-pc-status.neg { background: var(--danger-bg); color: var(--danger); }

/* ============================================================
   CLIENT SPACE — premium client-facing portal experience
   Rounded, soft, spacious, accent-driven, light/dark aware.
   --cs-accent is set inline per client (their resolved brand).
   ============================================================ */
.cs-root { --cs-r: 16px; --cs-r-lg: 22px; max-width: 1180px; margin: 0 auto; padding: 0 4px 40px; }
.cs-root .cs-tone-blue { color: #4b73e8; } .cs-root .cs-tone-gold { color: #d79a2b; } .cs-root .cs-tone-green { color: #2fa46a; }

/* preview / impersonation bar */
.cs-prevbar { display: flex; align-items: center; gap: 12px; padding: 9px 14px; margin: 0 0 14px; border-radius: 0 0 14px 14px;
  background: color-mix(in srgb, var(--ink) 92%, #000); color: #fff; font-size: .82rem; position: sticky; top: 0; z-index: 6; }
.cs-prev-back { display: inline-flex; align-items: center; gap: 6px; background: rgba(255,255,255,.12); color: #fff; border: 0; border-radius: 9px; padding: 6px 11px; font: inherit; font-weight: 600; cursor: pointer; }
.cs-prev-back:hover { background: rgba(255,255,255,.2); }
.cs-prev-mid { display: inline-flex; align-items: center; gap: 6px; opacity: .9; }
.cs-prev-mid b { font-weight: 700; }
.cs-prev-acts { margin-left: auto; }
.cs-prev-cfg { display: inline-flex; align-items: center; gap: 6px; background: var(--cs-accent); color: #fff; border: 0; border-radius: 9px; padding: 6px 11px; font: inherit; font-weight: 700; cursor: pointer; }
.cs-prev-cfg:hover { filter: brightness(1.08); }

/* top bar (provider branding) */
.cs-top { display: flex; align-items: center; justify-content: space-between; padding: 4px 6px 14px; }
.cs-provider { display: inline-flex; align-items: center; height: 34px; }
.cs-provider img { max-height: 30px; max-width: 160px; object-fit: contain; }
.cs-provider-mono { display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; background: var(--ink); color: var(--canvas); font-weight: 800; font-size: .8rem; }
.cs-top-right { display: inline-flex; align-items: center; gap: 14px; }
.cs-top-ico { position: relative; background: var(--surface-2, var(--surface)); border: 1px solid var(--line); color: var(--ink); width: 38px; height: 38px; border-radius: 11px; display: grid; place-items: center; cursor: pointer; }
.cs-top-ico:hover { border-color: var(--cs-accent); color: var(--cs-accent); }
.cs-top-dot { position: absolute; top: -5px; right: -5px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: var(--neg, #e0533d); color: #fff; font-size: .66rem; font-weight: 800; font-style: normal; display: grid; place-items: center; }
.cs-user { display: inline-flex; align-items: center; gap: 8px; }
.cs-user-av { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; color: #fff; font-weight: 700; font-size: .72rem; }
.cs-user-name { font-weight: 600; font-size: .9rem; }

/* hero */
.cs-hero { position: relative; border-radius: var(--cs-r-lg); overflow: hidden; padding: 30px 30px 26px; margin-bottom: 18px;
  background: linear-gradient(135deg, color-mix(in srgb, var(--cs-accent) 22%, var(--surface)) 0%, var(--surface) 65%);
  border: 1px solid var(--line); box-shadow: var(--sh-soft, 0 10px 30px -18px rgba(0,0,0,.25)); }
.cs-hero.has-cover { background-size: cover; background-position: center; min-height: 230px; color: #fff; }
.cs-hero-veil { display: none; }
.cs-hero.has-cover .cs-hero-veil { display: block; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(10,10,12,.15), rgba(10,10,12,.82)); }
.cs-hero-in { position: relative; }
.cs-hero.has-cover .cs-hero-in { position: relative; z-index: 1; padding-top: 70px; }
.cs-hero-brand { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.cs-hero-logo { width: 50px; height: 50px; border-radius: 14px; overflow: hidden; background: var(--canvas); display: grid; place-items: center; box-shadow: 0 4px 14px -6px rgba(0,0,0,.3); flex: 0 0 auto; }
.cs-hero-logo img { width: 100%; height: 100%; object-fit: cover; }
.cs-hero-mono { font-weight: 800; color: var(--cs-accent); font-size: 1.1rem; }
.cs-hero-meta { display: flex; flex-direction: column; gap: 4px; }
.cs-hero-with { font-size: .82rem; opacity: .8; font-weight: 600; }
.cs-hero.has-cover .cs-hero-with { color: rgba(255,255,255,.9); }
.cs-hero-h { font-size: 1.7rem; line-height: 1.18; font-weight: 800; letter-spacing: -.01em; margin: 0 0 18px; max-width: 30ch; }
.cs-hero-row { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 16px; }
.cs-hero-clear { display: inline-flex; align-items: center; gap: 9px; background: color-mix(in srgb, #2fa46a 14%, var(--surface)); color: #2fa46a; border-radius: 13px; padding: 13px 18px; font-weight: 600; }
.cs-hero-nba { display: flex; align-items: center; gap: 18px; background: var(--cs-accent); color: #fff; border: 0; border-radius: 15px; padding: 14px 18px; cursor: pointer; text-align: left; box-shadow: 0 12px 26px -14px var(--cs-accent); }
.cs-hero-nba:hover { filter: brightness(1.06); transform: translateY(-1px); }
.cs-nba-l { display: flex; flex-direction: column; gap: 2px; }
.cs-nba-l b { font-size: 1rem; font-weight: 800; }
.cs-nba-l span { font-size: .82rem; opacity: .92; }
.cs-nba-go { display: inline-flex; align-items: center; gap: 5px; font-weight: 700; font-size: .84rem; white-space: nowrap; background: rgba(255,255,255,.2); padding: 7px 12px; border-radius: 10px; }
.cs-hero-book { display: inline-flex; align-items: center; gap: 11px; background: var(--canvas); border: 1px solid var(--line); border-radius: 15px; padding: 12px 16px; cursor: pointer; text-align: left; color: var(--ink); }
.cs-hero-book:hover { border-color: var(--cs-accent); }
.cs-hero-book span { display: flex; flex-direction: column; }
.cs-hero-book b { font-size: .9rem; font-weight: 700; }
.cs-hero-book small { font-size: .76rem; color: var(--ink-soft); }
.cs-hero.has-cover .cs-hero-book { background: rgba(255,255,255,.16); border-color: rgba(255,255,255,.25); color: #fff; backdrop-filter: blur(6px); }
.cs-hero.has-cover .cs-hero-book small { color: rgba(255,255,255,.85); }
.cs-qa-row { display: flex; flex-wrap: wrap; gap: 9px; }
.cs-qa { display: inline-flex; align-items: center; gap: 8px; background: var(--canvas); border: 1px solid var(--line); border-radius: 12px; padding: 10px 14px; font: inherit; font-weight: 600; font-size: .86rem; color: var(--ink); cursor: pointer; }
.cs-qa:hover { border-color: var(--cs-accent); color: var(--cs-accent); transform: translateY(-1px); }
.cs-qa .ic { color: var(--cs-accent); }
.cs-hero.has-cover .cs-qa { background: rgba(255,255,255,.16); border-color: rgba(255,255,255,.28); color: #fff; backdrop-filter: blur(6px); }
.cs-hero.has-cover .cs-qa .ic { color: #fff; }

/* nav pills */
.cs-nav { position: sticky; top: 0; z-index: 5; margin: 0 0 18px; }
.cs-nav-in { display: flex; gap: 7px; overflow-x: auto; padding: 8px; background: color-mix(in srgb, var(--canvas) 75%, var(--surface)); border: 1px solid var(--line); border-radius: 15px; scrollbar-width: none; backdrop-filter: blur(8px); }
.cs-nav-in::-webkit-scrollbar { display: none; }
.cs-pill { display: inline-flex; align-items: center; gap: 7px; padding: 9px 14px; border-radius: 11px; border: 0; background: transparent; color: var(--ink-soft); font: inherit; font-weight: 600; font-size: .87rem; cursor: pointer; white-space: nowrap; }
.cs-pill:hover { background: var(--surface-2, var(--surface)); color: var(--ink); }
.cs-pill.on { background: var(--cs-accent); color: #fff; box-shadow: 0 6px 16px -8px var(--cs-accent); }
.cs-pill-badge { background: var(--neg, #e0533d); color: #fff; font-size: .66rem; font-weight: 800; min-width: 17px; height: 17px; padding: 0 5px; border-radius: 9px; display: grid; place-items: center; }
.cs-pill.on .cs-pill-badge { background: rgba(255,255,255,.3); }

/* sections + panels */
.cs-body { min-height: 300px; }
.cs-sec { display: flex; flex-direction: column; gap: 18px; }
.cs-sec-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; }
.cs-sec-h-l { display: flex; align-items: center; gap: 12px; }
.cs-sec-h-l.mini { gap: 9px; }
.cs-sec-ico { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; background: color-mix(in srgb, var(--cs-accent) 14%, var(--surface)); color: var(--cs-accent); flex: 0 0 auto; }
.cs-sec-head h2 { font-size: 1.22rem; font-weight: 800; letter-spacing: -.01em; margin: 0; }
.cs-sec-head p { margin: 2px 0 0; font-size: .85rem; color: var(--ink-soft); }
.cs-sec-h-l.mini h3 { font-size: 1rem; font-weight: 700; margin: 0; display: flex; align-items: center; gap: 8px; }
.cs-panel { background: var(--surface); border: 1px solid var(--line); border-radius: var(--cs-r); padding: 18px; box-shadow: var(--sh-soft, 0 8px 24px -18px rgba(0,0,0,.2)); display: flex; flex-direction: column; gap: 14px; }
.cs-cnt { background: var(--surface-2, var(--surface)); color: var(--ink-soft); border: 1px solid var(--line); font-size: .72rem; font-weight: 800; padding: 1px 8px; border-radius: 9px; }
.cs-cnt.urgent { background: color-mix(in srgb, var(--neg) 16%, var(--surface)); color: var(--neg); border-color: transparent; }
.cs-link { background: 0; border: 0; color: var(--cs-accent); font: inherit; font-weight: 700; font-size: .82rem; cursor: pointer; display: inline-flex; align-items: center; gap: 4px; margin-left: auto; }
.cs-link.danger { color: var(--neg, #e0533d); }
.cs-link.on { color: #2fa46a; }
.cs-note { display: flex; align-items: center; gap: 7px; font-size: .78rem; color: var(--ink-soft); padding: 4px 2px; }

/* Home: action summary */
.cs-home-actions { background: var(--surface); border: 1px solid var(--line); border-radius: var(--cs-r); padding: 16px 18px; box-shadow: var(--sh-soft, 0 8px 24px -18px rgba(0,0,0,.2)); }
.cs-home-actions .cs-sec-h-l { margin-bottom: 12px; }
.cs-act-list { display: flex; flex-direction: column; gap: 8px; }
.cs-act { display: flex; align-items: center; gap: 13px; width: 100%; text-align: left; background: var(--canvas); border: 1px solid var(--line); border-radius: 13px; padding: 13px 15px; cursor: pointer; font: inherit; color: var(--ink); transition: transform .12s, border-color .12s; }
.cs-act:hover { transform: translateX(2px); border-color: var(--cs-accent); }
.cs-act.urgent { border-left: 3px solid var(--neg, #e0533d); }
.cs-act-ico { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; background: color-mix(in srgb, var(--cs-accent) 13%, var(--surface)); color: var(--cs-accent); flex: 0 0 auto; }
.cs-act.urgent .cs-act-ico { background: color-mix(in srgb, var(--neg) 14%, var(--surface)); color: var(--neg); }
.cs-act-body { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
.cs-act-body b { font-weight: 700; font-size: .92rem; }
.cs-act-body span { font-size: .8rem; color: var(--ink-soft); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cs-act-go { display: inline-flex; align-items: center; gap: 8px; color: var(--ink-soft); margin-left: auto; }
.cs-act-pri { background: color-mix(in srgb, var(--neg) 14%, var(--surface)); color: var(--neg); font-size: .68rem; font-weight: 800; padding: 2px 8px; border-radius: 8px; }
.cs-allclear { display: flex; align-items: center; gap: 13px; background: color-mix(in srgb, #2fa46a 9%, var(--surface)); border: 1px solid color-mix(in srgb, #2fa46a 22%, var(--line)); border-radius: var(--cs-r); padding: 18px; color: var(--ink); }
.cs-allclear .ic { color: #2fa46a; }
.cs-allclear div { display: flex; flex-direction: column; gap: 2px; }
.cs-allclear b { font-weight: 800; }
.cs-allclear span { font-size: .85rem; color: var(--ink-soft); }
.cs-allclear.big { padding: 30px; }

/* Home: widget grid */
.cs-w-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.cs-w { display: flex; flex-direction: column; gap: 3px; align-items: flex-start; text-align: left; background: var(--surface); border: 1px solid var(--line); border-radius: var(--cs-r); padding: 16px; cursor: pointer; font: inherit; color: var(--ink); box-shadow: var(--sh-soft, 0 8px 22px -18px rgba(0,0,0,.18)); transition: transform .12s, box-shadow .12s; }
.cs-w:hover { transform: translateY(-3px); box-shadow: 0 16px 30px -18px rgba(0,0,0,.3); border-color: var(--cs-accent); }
.cs-w-ico { width: 38px; height: 38px; border-radius: 11px; display: grid; place-items: center; background: color-mix(in srgb, var(--cs-accent) 13%, var(--surface)); color: var(--cs-accent); margin-bottom: 6px; }
.cs-w-t { font-size: .78rem; color: var(--ink-soft); font-weight: 600; }
.cs-w-big { font-size: 1.5rem; font-weight: 800; letter-spacing: -.02em; line-height: 1.1; }
.cs-w-s { font-size: .77rem; color: var(--ink-soft); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.cs-w.warn .cs-w-ico { background: color-mix(in srgb, #e0a52e 16%, var(--surface)); color: #c98a16; }
.cs-w.warn .cs-w-big { color: #c98a16; }
.cs-w.good .cs-w-ico { background: color-mix(in srgb, #2fa46a 14%, var(--surface)); color: #2fa46a; }

/* timeline */
.cs-timeline { display: flex; flex-direction: column; }
.cs-tl-row { display: flex; gap: 14px; padding: 13px 0; border-top: 1px solid var(--line); }
.cs-tl-row:first-child { border-top: 0; }
.cs-tl-dot { width: 12px; height: 12px; border-radius: 50%; margin-top: 5px; flex: 0 0 auto; background: #9b9b9b; box-shadow: 0 0 0 4px color-mix(in srgb, #9b9b9b 16%, transparent); }
.cs-tl-dot.t-blue { background: #4b73e8; box-shadow: 0 0 0 4px color-mix(in srgb, #4b73e8 16%, transparent); }
.cs-tl-dot.t-gold { background: #e0a52e; box-shadow: 0 0 0 4px color-mix(in srgb, #e0a52e 18%, transparent); }
.cs-tl-dot.t-green { background: #2fa46a; box-shadow: 0 0 0 4px color-mix(in srgb, #2fa46a 16%, transparent); }
.cs-tl-main { flex: 1; min-width: 0; }
.cs-tl-top { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }
.cs-tl-top b { font-weight: 700; font-size: .92rem; }
.cs-tl-main p { margin: 4px 0 0; font-size: .83rem; color: var(--ink-soft); }
.cs-tl-meta { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 7px; }
.cs-tl-due { display: inline-flex; align-items: center; gap: 4px; font-size: .76rem; color: var(--ink-soft); }
.cs-tl-proj { font-size: .73rem; color: var(--ink-soft); background: var(--surface-2, var(--surface)); border: 1px solid var(--line); padding: 1px 8px; border-radius: 8px; }
.cs-phase { font-size: .7rem; font-weight: 700; padding: 2px 9px; border-radius: 8px; }
.cs-phase.t-gray { background: color-mix(in srgb, #9b9b9b 16%, var(--surface)); color: #6b6b6b; }
.cs-phase.t-blue { background: color-mix(in srgb, #4b73e8 14%, var(--surface)); color: #4b73e8; }
.cs-phase.t-gold { background: color-mix(in srgb, #e0a52e 18%, var(--surface)); color: #b9831a; }
.cs-phase.t-green { background: color-mix(in srgb, #2fa46a 15%, var(--surface)); color: #2fa46a; }
.cs-owner { display: inline-flex; align-items: center; gap: 5px; font-size: .74rem; font-weight: 700; padding: 3px 9px; border-radius: 8px; }
.cs-owner.you { background: color-mix(in srgb, #e0a52e 18%, var(--surface)); color: #b9831a; }
.cs-owner.team { background: color-mix(in srgb, #4b73e8 13%, var(--surface)); color: #4b73e8; }
.cs-owner.done { background: color-mix(in srgb, #2fa46a 14%, var(--surface)); color: #2fa46a; }

/* recommendations / offers */
.cs-rec-row, .cs-testi-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.cs-offer { position: relative; display: flex; flex-direction: column; gap: 7px; background: var(--canvas); border: 1px solid var(--line); border-radius: 14px; padding: 16px; }
.cs-offer.rec { border-color: color-mix(in srgb, var(--cs-accent) 45%, var(--line)); background: color-mix(in srgb, var(--cs-accent) 6%, var(--surface)); }
.cs-offer-flag { position: absolute; top: -10px; left: 14px; display: inline-flex; align-items: center; gap: 4px; background: var(--cs-accent); color: #fff; font-size: .68rem; font-weight: 800; padding: 3px 9px; border-radius: 8px; }
.cs-offer-kind { font-size: .7rem; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; color: var(--cs-accent); }
.cs-offer-t { font-size: 1rem; font-weight: 800; }
.cs-offer-blurb { font-size: .82rem; color: var(--ink-soft); margin: 0; flex: 1; }
.cs-offer-why { display: flex; gap: 6px; font-size: .76rem; color: var(--ink-soft); background: var(--surface-2, var(--surface)); border-radius: 9px; padding: 7px 9px; }
.cs-offer-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 4px; }
.cs-offer-price { font-weight: 800; }

/* projects */
.cs-proj-list { display: flex; flex-direction: column; gap: 14px; }
.cs-proj { background: var(--surface); border: 1px solid var(--line); border-radius: var(--cs-r); padding: 18px; box-shadow: var(--sh-soft, 0 8px 22px -18px rgba(0,0,0,.18)); }
.cs-proj-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.cs-proj-top b { font-size: 1.02rem; font-weight: 800; }
.cs-proj-tags { display: flex; align-items: center; gap: 8px; margin-top: 6px; flex-wrap: wrap; }
.cs-proj-due { display: inline-flex; align-items: center; gap: 4px; font-size: .76rem; color: var(--ink-soft); }
.cs-proj-val { font-size: .76rem; font-weight: 700; color: var(--ink); }
.cs-proj-pct { font-size: 1.1rem; font-weight: 800; color: var(--cs-accent); }
.cs-bar { height: 8px; border-radius: 6px; background: var(--surface-2, color-mix(in srgb, var(--ink) 8%, var(--surface))); overflow: hidden; }
.cs-bar i { display: block; height: 100%; border-radius: 6px; background: linear-gradient(90deg, var(--cs-accent), color-mix(in srgb, var(--cs-accent) 60%, #fff)); }
.cs-bar.slim { height: 6px; max-width: 160px; }
.cs-proj-wait { display: flex; align-items: center; gap: 8px; margin-top: 13px; background: color-mix(in srgb, #e0a52e 11%, var(--surface)); color: #a9760f; border-radius: 11px; padding: 10px 13px; font-size: .85rem; }
.cs-proj-wait .ic { color: #c98a16; }
.cs-proj-okmsg { display: flex; align-items: center; gap: 8px; margin-top: 13px; color: var(--ink-soft); font-size: .84rem; }
.cs-proj-okmsg .ic { color: #2fa46a; }
.cs-phase-rail { display: flex; gap: 8px; margin-top: 15px; overflow-x: auto; padding-bottom: 4px; scrollbar-width: none; }
.cs-phase-rail::-webkit-scrollbar { display: none; }
.cs-phase-step { display: flex; flex-direction: column; gap: 6px; min-width: 130px; background: var(--canvas); border: 1px solid var(--line); border-radius: 11px; padding: 10px 12px; }
.cs-phase-step.owner-client { border-color: color-mix(in srgb, #e0a52e 40%, var(--line)); }
.cs-phase-dot { width: 9px; height: 9px; border-radius: 50%; background: #9b9b9b; }
.cs-phase-dot.t-blue { background: #4b73e8; } .cs-phase-dot.t-gold { background: #e0a52e; } .cs-phase-dot.t-green { background: #2fa46a; }
.cs-phase-lbl { font-size: .8rem; font-weight: 600; }

/* action center groups + history */
.cs-act-group { display: flex; flex-direction: column; gap: 8px; }
.cs-act-g-h { display: flex; align-items: center; gap: 8px; font-size: .82rem; font-weight: 800; text-transform: uppercase; letter-spacing: .03em; color: var(--ink-soft); padding: 4px 2px; }
.cs-act-group.urgent .cs-act-g-h { color: var(--neg, #e0533d); }
.cs-history .cs-hist-row { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-top: 1px solid var(--line); font-size: .84rem; }
.cs-history .cs-hist-row:first-of-type { border-top: 0; }
.cs-hist-ico { color: #2fa46a; display: inline-flex; }
.cs-hist-ts { margin-left: auto; font-size: .76rem; color: var(--ink-soft); }

/* galleries */
.cs-gal-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.cs-gal-card { display: flex; flex-direction: column; text-align: left; background: var(--surface); border: 1px solid var(--line); border-radius: var(--cs-r); overflow: hidden; cursor: pointer; font: inherit; color: var(--ink); box-shadow: var(--sh-soft, 0 8px 24px -18px rgba(0,0,0,.2)); transition: transform .14s, box-shadow .14s; }
.cs-gal-card:hover { transform: translateY(-4px); box-shadow: 0 22px 38px -20px rgba(0,0,0,.4); }
.cs-gal-card.dark { background: #14151a; border-color: #23252e; color: #fff; }
.cs-gc-cover { position: relative; aspect-ratio: 16/10; background-size: cover; background-position: center; background-color: #1a1b20; }
.cs-gc-count { position: absolute; bottom: 10px; right: 10px; background: rgba(0,0,0,.6); color: #fff; font-size: .72rem; font-weight: 700; padding: 3px 9px; border-radius: 9px; backdrop-filter: blur(4px); }
.cs-gc-body { padding: 14px 16px; display: flex; flex-direction: column; gap: 8px; }
.cs-gc-body b { font-weight: 800; font-size: .96rem; }
.cs-gc-meta { display: flex; align-items: center; gap: 8px; }
.cs-gc-layout { font-size: .72rem; color: var(--ink-soft); }
.cs-gal-card.dark .cs-gc-layout { color: #9aa0ad; }

/* gallery viewer modal */
.cs-gal-modal.dark .modal-head { background: #101116; border-color: #23252e; }
.cs-gal-modal.dark .modal-head h3 { color: #fff; }
.cs-gal-modal.dark .modal-head .x-btn { color: #cfd2da; }
.cs-gal-modal.dark .modal-body { background: #101116; }
.cs-gal.dark { color: #e9eaee; }
.cs-gal-bar { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; margin-bottom: 14px; }
.cs-gal-bar-l b { font-weight: 800; font-size: 1.05rem; }
.cs-gal-bar-l span { display: block; font-size: .78rem; color: var(--ink-soft); margin-top: 3px; display: inline-flex; align-items: center; gap: 5px; }
.cs-gal.dark .cs-gal-bar-l span { color: #9aa0ad; }
.cs-gal-bar-r { display: flex; gap: 8px; }
.cs-gal-approved { display: inline-flex; align-items: center; gap: 6px; color: #2fa46a; font-weight: 700; font-size: .85rem; }
.cs-gal-desc { font-size: .86rem; color: var(--ink-soft); margin: 0 0 14px; max-width: 70ch; }
.cs-gal.dark .cs-gal-desc { color: #9aa0ad; }
.cs-gal-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.cs-gal-grid.layout-masonry { grid-template-columns: repeat(3, 1fr); grid-auto-rows: 10px; }
.cs-gi { position: relative; margin: 0; border-radius: 13px; overflow: hidden; cursor: pointer; border: 1px solid var(--line); background: #1a1b20; }
.cs-gal.dark .cs-gi { border-color: #2a2c36; }
.cs-gi.approved { outline: 2px solid #2fa46a; outline-offset: -2px; }
.cs-gi.selected { outline: 2px solid var(--cs-accent); outline-offset: -2px; }
.cs-gi-img { display: block; aspect-ratio: 4/3; background-size: cover; background-position: center; transition: transform .25s; }
.cs-gi:hover .cs-gi-img { transform: scale(1.05); }
.cs-gi-cap { position: absolute; left: 0; right: 0; bottom: 0; padding: 18px 12px 9px; font-size: .76rem; font-weight: 600; color: #fff; background: linear-gradient(transparent, rgba(0,0,0,.72)); }
.cs-gi-marks { position: absolute; top: 8px; right: 8px; display: flex; gap: 5px; }
.cs-gi-fav, .cs-gi-cc { background: rgba(0,0,0,.55); color: #fff; border-radius: 8px; padding: 3px 6px; font-size: .68rem; display: inline-flex; align-items: center; gap: 3px; backdrop-filter: blur(3px); }
.cs-gi-fav { color: #ff7a90; }
/* lightbox */
.cs-lb { display: grid; grid-template-columns: 1fr 290px; gap: 16px; min-height: 360px; }
.cs-lb-stage { position: relative; border-radius: 14px; overflow: hidden; background: #08090c; display: grid; place-items: center; }
.cs-lb-img { width: 100%; height: 100%; min-height: 380px; background-size: contain; background-repeat: no-repeat; background-position: center; }
.cs-lb-arrow { position: absolute; top: 50%; transform: translateY(-50%); background: rgba(0,0,0,.5); color: #fff; border: 0; width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; cursor: pointer; backdrop-filter: blur(4px); }
.cs-lb-arrow:hover { background: rgba(0,0,0,.75); }
.cs-lb-arrow.prev { left: 10px; transform: translateY(-50%) rotate(180deg); }
.cs-lb-arrow.next { right: 10px; }
.cs-lb-side { display: flex; flex-direction: column; gap: 12px; }
.cs-lb-back { align-self: flex-start; background: 0; border: 0; color: var(--cs-accent); font: inherit; font-weight: 700; cursor: pointer; display: inline-flex; align-items: center; gap: 5px; }
.cs-gal.dark .cs-lb-back { color: #9bb0ff; }
.cs-lb-name { font-size: 1.05rem; font-weight: 800; }
.cs-lb-acts { display: flex; flex-wrap: wrap; gap: 7px; }
.cs-lb-btn { display: inline-flex; align-items: center; gap: 6px; background: var(--surface-2, var(--surface)); border: 1px solid var(--line); color: var(--ink); border-radius: 10px; padding: 8px 11px; font: inherit; font-size: .8rem; font-weight: 600; cursor: pointer; }
.cs-gal.dark .cs-lb-btn { background: #1c1e26; border-color: #2a2c36; color: #e9eaee; }
.cs-lb-btn.on { border-color: var(--cs-accent); color: var(--cs-accent); }
.cs-lb-btn:hover { border-color: var(--cs-accent); }
.cs-lb-comments { flex: 1; display: flex; flex-direction: column; gap: 9px; overflow-y: auto; max-height: 300px; }
.cs-lb-cm { background: var(--surface-2, var(--surface)); border-radius: 11px; padding: 9px 11px; }
.cs-gal.dark .cs-lb-cm { background: #1c1e26; }
.cs-lb-cm.client { background: color-mix(in srgb, var(--cs-accent) 12%, var(--surface)); }
.cs-lb-cm b { font-size: .78rem; font-weight: 700; }
.cs-lb-cm p { margin: 3px 0 2px; font-size: .84rem; }
.cs-lb-cm small { font-size: .7rem; color: var(--ink-soft); }
.cs-lb-empty { font-size: .82rem; color: var(--ink-soft); padding: 8px 2px; }
.cs-lb-add { display: flex; gap: 7px; }
.cs-lb-add .input { flex: 1; }

/* files */
.cs-fgroup { background: var(--surface); border: 1px solid var(--line); border-radius: var(--cs-r); padding: 8px 16px 12px; box-shadow: var(--sh-soft, 0 8px 22px -18px rgba(0,0,0,.16)); }
.cs-fgroup-h { display: flex; align-items: center; gap: 8px; font-size: .82rem; font-weight: 800; text-transform: uppercase; letter-spacing: .03em; color: var(--ink-soft); padding: 12px 2px 8px; }
.cs-file { display: flex; align-items: center; gap: 12px; padding: 11px 0; border-top: 1px solid var(--line); }
.cs-file:first-of-type { border-top: 0; }
.cs-file-ico { width: 34px; height: 34px; border-radius: 9px; display: grid; place-items: center; background: var(--surface-2, var(--surface)); color: var(--cs-accent); flex: 0 0 auto; }
.cs-file-main { flex: 1; min-width: 0; }
.cs-file-main b { font-size: .88rem; font-weight: 600; display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cs-file-main small { font-size: .74rem; color: var(--ink-soft); }
.cs-brand-assets { display: flex; flex-wrap: wrap; gap: 8px; padding: 8px 0 12px; }
.cs-swatch { display: inline-flex; align-items: center; gap: 7px; background: var(--canvas); border: 1px solid var(--line); border-radius: 9px; padding: 6px 11px 6px 6px; font-size: .78rem; font-weight: 600; }
.cs-swatch i { width: 20px; height: 20px; border-radius: 6px; border: 1px solid rgba(0,0,0,.1); }

/* messages */
.cs-thread-list { display: flex; flex-direction: column; gap: 9px; }
.cs-thread { display: flex; align-items: center; gap: 12px; text-align: left; background: var(--surface); border: 1px solid var(--line); border-radius: var(--cs-r); padding: 14px 16px; cursor: pointer; font: inherit; color: var(--ink); box-shadow: var(--sh-soft, 0 8px 22px -18px rgba(0,0,0,.14)); }
.cs-thread:hover { border-color: var(--cs-accent); }
.cs-thread.unread { border-left: 3px solid var(--cs-accent); }
.cs-thread-ico { width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; background: color-mix(in srgb, var(--cs-accent) 12%, var(--surface)); color: var(--cs-accent); flex: 0 0 auto; }
.cs-thread-main { flex: 1; min-width: 0; }
.cs-thread-main b { font-size: .92rem; font-weight: 700; display: block; }
.cs-thread-prev { font-size: .8rem; color: var(--ink-soft); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; }
.cs-thread-meta { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
.cs-thread-meta small { font-size: .73rem; color: var(--ink-soft); }
.cs-thread-dot { background: var(--cs-accent); color: #fff; font-size: .68rem; font-weight: 800; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; display: grid; place-items: center; }
.cs-upd-row { display: flex; align-items: center; gap: 9px; padding: 9px 0; border-top: 1px solid var(--line); font-size: .85rem; }
.cs-upd-row:first-of-type { border-top: 0; }
.cs-upd-ico { color: var(--cs-accent); }
.cs-upd-row small { margin-left: auto; font-size: .74rem; color: var(--ink-soft); white-space: nowrap; }
/* chat (thread + ticket + post) */
.cs-chat { display: flex; flex-direction: column; gap: 12px; max-height: 52vh; overflow-y: auto; padding: 4px; }
.cs-msg { display: flex; gap: 10px; max-width: 86%; }
.cs-msg.client { flex-direction: row-reverse; margin-left: auto; }
.cs-msg-av { width: 32px; height: 32px; border-radius: 50%; background: var(--surface-2, var(--surface)); display: grid; place-items: center; font-size: .7rem; font-weight: 700; flex: 0 0 auto; }
.cs-msg-b { background: var(--surface-2, var(--surface)); border-radius: 13px; padding: 9px 13px; }
.cs-msg.client .cs-msg-b { background: var(--cs-accent); color: #fff; }
.cs-msg-h { display: flex; align-items: center; gap: 8px; margin-bottom: 2px; }
.cs-msg-h b { font-size: .78rem; font-weight: 700; }
.cs-msg-h small { font-size: .68rem; opacity: .7; }
.cs-msg-b p { margin: 0; font-size: .86rem; line-height: 1.4; }
.cs-chat-input { display: flex; gap: 8px; margin-top: 14px; }
.cs-chat-input .input { flex: 1; }

/* bookings */
.cs-bk-group { background: var(--surface); border: 1px solid var(--line); border-radius: var(--cs-r); padding: 8px 16px 14px; box-shadow: var(--sh-soft, 0 8px 22px -18px rgba(0,0,0,.14)); }
.cs-bk { display: flex; align-items: center; gap: 13px; padding: 12px 0; border-top: 1px solid var(--line); }
.cs-bk:first-of-type { border-top: 0; }
.cs-bk.cancelled { opacity: .55; }
.cs-bk-ico { width: 38px; height: 38px; border-radius: 11px; display: grid; place-items: center; background: color-mix(in srgb, var(--cs-accent) 12%, var(--surface)); color: var(--cs-accent); flex: 0 0 auto; }
.cs-bk-main { flex: 1; min-width: 0; }
.cs-bk-main b { font-size: .92rem; font-weight: 700; }
.cs-bk-main small { display: block; font-size: .78rem; color: var(--ink-soft); }
.cs-bk-right { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
.cs-bk-acts { display: flex; gap: 10px; }

/* billing */
.cs-bill-hero { display: flex; align-items: center; justify-content: space-between; gap: 14px; border-radius: var(--cs-r); padding: 20px 24px; background: linear-gradient(135deg, color-mix(in srgb, var(--cs-accent) 14%, var(--surface)), var(--surface)); border: 1px solid var(--line); }
.cs-bill-hero.due { background: linear-gradient(135deg, color-mix(in srgb, #e0a52e 16%, var(--surface)), var(--surface)); }
.cs-bill-hero span { font-size: .8rem; color: var(--ink-soft); font-weight: 600; }
.cs-bill-hero b { display: block; font-size: 1.9rem; font-weight: 800; letter-spacing: -.02em; margin-top: 2px; }
.cs-bill-clear { display: inline-flex; align-items: center; gap: 7px; color: #2fa46a; font-weight: 700; font-size: .9rem; }
.cs-inv { display: flex; align-items: center; gap: 12px; padding: 12px 0; border-top: 1px solid var(--line); }
.cs-inv:first-of-type { border-top: 0; }
.cs-inv-main { flex: 1; min-width: 0; }
.cs-inv-main b { font-size: .9rem; font-weight: 700; }
.cs-inv-main small { display: block; font-size: .76rem; color: var(--ink-soft); }
.cs-inv-amt { font-weight: 800; font-size: .95rem; }
.cs-overdue { color: var(--neg, #e0533d); font-weight: 700; }

/* requests */
.cs-req-list { display: flex; flex-direction: column; gap: 9px; }
.cs-req { display: flex; align-items: center; gap: 12px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--cs-r); padding: 14px 16px; box-shadow: var(--sh-soft, 0 8px 22px -18px rgba(0,0,0,.14)); }
.cs-req-ico { width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; background: color-mix(in srgb, var(--cs-accent) 12%, var(--surface)); color: var(--cs-accent); flex: 0 0 auto; }
.cs-req-main { flex: 1; min-width: 0; }
.cs-req-main b { font-size: .9rem; font-weight: 700; }
.cs-req-main small { display: block; font-size: .76rem; color: var(--ink-soft); }

/* support */
.cs-tk { display: flex; align-items: center; gap: 12px; width: 100%; text-align: left; background: var(--surface); border: 1px solid var(--line); border-radius: var(--cs-r); padding: 14px 16px; cursor: pointer; font: inherit; color: var(--ink); box-shadow: var(--sh-soft, 0 8px 22px -18px rgba(0,0,0,.14)); }
.cs-tk:hover { border-color: var(--cs-accent); }
.cs-tk-ico { width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; background: color-mix(in srgb, var(--cs-accent) 12%, var(--surface)); color: var(--cs-accent); flex: 0 0 auto; }
.cs-tk-main { flex: 1; min-width: 0; }
.cs-tk-main b { font-size: .9rem; font-weight: 700; }
.cs-tk-main small { display: block; font-size: .76rem; color: var(--ink-soft); }
.cs-tk-badges { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.cs-tkd-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding-bottom: 12px; border-bottom: 1px solid var(--line); margin-bottom: 12px; }
.cs-tkd-head small { color: var(--ink-soft); font-size: .78rem; }
.cs-tkd-desc { background: var(--surface-2, var(--surface)); border-radius: 11px; padding: 12px 14px; font-size: .86rem; margin: 0 0 12px; }
.cs-tkd-body { display: flex; flex-direction: column; gap: 12px; }

/* resources + KB */
.cs-res-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.cs-res { display: flex; flex-direction: column; gap: 5px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--cs-r); padding: 16px; box-shadow: var(--sh-soft, 0 8px 22px -18px rgba(0,0,0,.14)); }
.cs-res.done { border-color: color-mix(in srgb, #2fa46a 40%, var(--line)); }
.cs-res-type { font-size: .7rem; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; color: var(--cs-accent); }
.cs-res b { font-size: .96rem; font-weight: 700; }
.cs-res p { margin: 0; font-size: .82rem; color: var(--ink-soft); flex: 1; }
.cs-res-foot { display: flex; gap: 14px; margin-top: 6px; }
.cs-res-foot .cs-link { margin-left: 0; }
.cs-kb-list { display: flex; flex-direction: column; }
.cs-kb { display: flex; align-items: center; justify-content: space-between; gap: 10px; text-align: left; background: 0; border: 0; border-top: 1px solid var(--line); padding: 13px 2px; cursor: pointer; font: inherit; color: var(--ink); }
.cs-kb:first-child { border-top: 0; }
.cs-kb:hover { color: var(--cs-accent); }
.cs-kb-main b { font-size: .9rem; font-weight: 600; display: flex; align-items: center; gap: 6px; }
.cs-kb-main small { font-size: .74rem; color: var(--ink-soft); }
.cs-kb-art { padding: 4px 2px 8px; }
.cs-kb-cat { font-size: .72rem; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; color: var(--cs-accent); }
.cs-kb-art p { margin: 8px 0 0; font-size: .9rem; line-height: 1.55; }
.cs-kb-help { display: flex; align-items: center; gap: 9px; margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--line); font-size: .85rem; }

/* community */
.cs-forum { display: flex; flex-direction: column; gap: 10px; }
.cs-post { display: flex; gap: 12px; text-align: left; background: var(--surface); border: 1px solid var(--line); border-radius: var(--cs-r); padding: 15px 16px; cursor: pointer; font: inherit; color: var(--ink); box-shadow: var(--sh-soft, 0 8px 22px -18px rgba(0,0,0,.14)); }
.cs-post:hover { border-color: var(--cs-accent); }
.cs-post-av { width: 38px; height: 38px; border-radius: 50%; background: var(--surface-2, var(--surface)); display: grid; place-items: center; font-weight: 700; font-size: .8rem; flex: 0 0 auto; }
.cs-post-main { flex: 1; min-width: 0; }
.cs-post-top { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.cs-post-top b { font-weight: 700; font-size: .94rem; }
.cs-pin { display: inline-flex; align-items: center; gap: 4px; background: color-mix(in srgb, #e0a52e 16%, var(--surface)); color: #b9831a; font-size: .68rem; font-weight: 800; padding: 2px 7px; border-radius: 7px; }
.cs-post-cat { font-size: .72rem; color: var(--ink-soft); background: var(--surface-2, var(--surface)); padding: 1px 8px; border-radius: 7px; }
.cs-post-main p { margin: 5px 0; font-size: .83rem; color: var(--ink-soft); }
.cs-post-main small { font-size: .74rem; color: var(--ink-soft); }
.cs-postd p { font-size: .9rem; line-height: 1.55; }
.cs-post-replies { display: flex; flex-direction: column; gap: 10px; margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line); }

/* reviews */
.cs-review-ask { display: flex; align-items: center; gap: 14px; background: linear-gradient(135deg, color-mix(in srgb, var(--cs-accent) 12%, var(--surface)), var(--surface)); border: 1px solid var(--line); border-radius: var(--cs-r); padding: 20px; }
.cs-review-ask .ic { color: var(--cs-accent); }
.cs-review-ask div { flex: 1; }
.cs-review-ask b { font-weight: 800; display: block; }
.cs-review-ask span { font-size: .84rem; color: var(--ink-soft); }
.cs-stars { display: inline-flex; gap: 1px; }
.cs-star { color: #d9d9d9; } .cs-star.on { color: #e0a52e; }
.cs-rv { background: var(--surface); border-top: 1px solid var(--line); padding: 14px 0; }
.cs-rv-top { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; }
.cs-rv-type { font-size: .76rem; color: var(--ink-soft); }
.cs-rv b { font-weight: 700; }
.cs-rv p { margin: 4px 0 0; font-size: .87rem; }
.cs-testi { background: var(--canvas); border: 1px solid var(--line); border-radius: 14px; padding: 16px; }
.cs-testi p { font-size: .86rem; font-style: italic; margin: 8px 0; }
.cs-testi small { font-size: .76rem; color: var(--ink-soft); font-weight: 600; }
.cs-rate { display: flex; gap: 4px; }
.cs-rate-star { background: 0; border: 0; cursor: pointer; color: #d9d9d9; padding: 2px; }
.cs-rate-star.on { color: #e0a52e; }
.cs-chk { display: flex; align-items: center; gap: 8px; font-size: .84rem; margin-top: 8px; cursor: pointer; }

/* footer */
.cs-foot { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-top: 30px; padding-top: 18px; border-top: 1px solid var(--line); font-size: .78rem; color: var(--ink-soft); }
.cs-foot span { display: inline-flex; align-items: center; gap: 6px; }
.cs-foot-link { font-family: var(--mono, monospace); opacity: .7; }

/* premium empty state */
.cs-empty { text-align: center; padding: 44px 24px; background: var(--surface); border: 1px dashed var(--line); border-radius: var(--cs-r); }
.cs-empty-ico { width: 56px; height: 56px; border-radius: 16px; display: grid; place-items: center; margin: 0 auto 14px; background: color-mix(in srgb, var(--cs-accent) 12%, var(--surface)); color: var(--cs-accent); }
.cs-empty h3 { font-size: 1.05rem; font-weight: 800; margin: 0 0 6px; }
.cs-empty p { font-size: .87rem; color: var(--ink-soft); max-width: 44ch; margin: 0 auto 14px; }

/* ===== admin control center ===== */
.cs-admin { max-width: 1180px; margin: 0 auto; display: flex; flex-direction: column; gap: 20px; }
.cs-ah-hero { display: grid; grid-template-columns: 1.5fr 1fr; gap: 24px; align-items: center; background: linear-gradient(135deg, color-mix(in srgb, var(--brand) 12%, var(--surface)), var(--surface)); border: 1px solid var(--line); border-radius: var(--cs-r-lg); padding: 28px 30px; }
.cs-ah-hero .eyebrow { display: inline-flex; align-items: center; gap: 6px; font-size: .76rem; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; color: var(--ink-soft); }
.cs-ah-hero h2 { font-size: 1.55rem; font-weight: 800; letter-spacing: -.01em; margin: 10px 0 8px; }
.cs-ah-hero p { font-size: .88rem; color: var(--ink-soft); max-width: 60ch; margin: 0; }
.cs-ah-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.cs-ah-stat { display: flex; align-items: center; gap: 11px; background: var(--canvas); border: 1px solid var(--line); border-radius: 14px; padding: 14px; }
.cs-ah-ico { width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; background: var(--surface-2, var(--surface)); color: var(--ink); }
.cs-ah-stat.good .cs-ah-ico { background: color-mix(in srgb, #2fa46a 14%, var(--surface)); color: #2fa46a; }
.cs-ah-stat.warn .cs-ah-ico { background: color-mix(in srgb, #e0a52e 16%, var(--surface)); color: #c98a16; }
.cs-ah-stat b { font-size: 1.3rem; font-weight: 800; display: block; }
.cs-ah-stat span { font-size: .76rem; color: var(--ink-soft); }
.cs-ah-bar { display: flex; align-items: center; justify-content: space-between; }
.cs-ah-bar h3 { font-size: 1.05rem; font-weight: 800; margin: 0; }
.cs-ah-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
.cs-ah-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--cs-r); padding: 18px; box-shadow: var(--sh-soft, 0 8px 24px -18px rgba(0,0,0,.18)); display: flex; flex-direction: column; gap: 14px; }
.cs-ah-card.is-off { opacity: .62; }
.cs-ah-head { display: flex; align-items: center; gap: 12px; }
.cs-ah-logo { width: 44px; height: 44px; border-radius: 12px; overflow: hidden; background: var(--surface-2, var(--surface)); display: grid; place-items: center; font-weight: 800; font-size: .85rem; flex: 0 0 auto; }
.cs-ah-logo img { width: 100%; height: 100%; object-fit: cover; }
.cs-ah-id { flex: 1; min-width: 0; }
.cs-ah-id b { font-size: 1rem; font-weight: 800; display: block; }
.cs-ah-id span { display: inline-flex; align-items: center; gap: 7px; font-size: .76rem; margin-top: 2px; }
.cs-dot-live { color: #2fa46a; font-weight: 700; font-size: .74rem; }
.cs-ah-health { display: inline-flex; align-items: center; gap: 6px; font-size: .76rem; font-weight: 600; color: var(--ink-soft); }
.hdot { width: 8px; height: 8px; border-radius: 50%; background: #9b9b9b; display: inline-block; }
.hdot.good { background: #2fa46a; } .hdot.warm { background: #e0a52e; } .hdot.cold { background: #e0533d; }
.cs-ah-metrics { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 14px; font-size: .8rem; color: var(--ink-soft); }
.cs-ah-metrics span { display: inline-flex; align-items: center; gap: 6px; }
.cs-ah-acts { display: flex; gap: 8px; flex-wrap: wrap; }

/* config modal */
.cs-cfg { display: flex; flex-direction: column; gap: 16px; }
.cs-cfg-sec { display: flex; flex-direction: column; gap: 12px; }
.cs-cfg-h { display: flex; align-items: center; gap: 8px; font-size: .82rem; font-weight: 800; text-transform: uppercase; letter-spacing: .03em; color: var(--ink-soft); }
.cs-cfg-list { display: flex; flex-direction: column; gap: 6px; }
.cs-cfg-mod { display: flex; align-items: center; gap: 11px; background: var(--canvas); border: 1px solid var(--line); border-radius: 12px; padding: 10px 13px; }
.cs-cfg-grab { color: var(--ink-soft); cursor: grab; display: inline-flex; }
.cs-cfg-ico { width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; background: var(--surface-2, var(--surface)); color: var(--cs-accent, var(--brand)); flex: 0 0 auto; }
.cs-cfg-id { flex: 1; min-width: 0; }
.cs-cfg-id b { font-size: .9rem; font-weight: 700; display: block; }
.cs-cfg-id small { font-size: .76rem; color: var(--ink-soft); }
.cs-cfg-move { display: flex; gap: 3px; }
.cs-mini { width: 26px; height: 26px; border-radius: 7px; border: 1px solid var(--line); background: var(--surface); color: var(--ink); display: grid; place-items: center; cursor: pointer; }
.cs-mini:disabled { opacity: .35; cursor: default; }
.cs-cfg-core { font-size: .72rem; font-weight: 700; color: var(--ink-soft); background: var(--surface-2, var(--surface)); padding: 4px 9px; border-radius: 8px; }
.cs-cfg-note { display: flex; align-items: flex-start; gap: 7px; font-size: .78rem; color: var(--ink-soft); }

/* small button size used across the space */
.btn.sm { padding: 7px 12px; font-size: .82rem; border-radius: 10px; }

/* ===== responsive ===== */
@media (max-width: 1000px) {
  .cs-w-grid { grid-template-columns: repeat(2, 1fr); }
  .cs-rec-row, .cs-testi-row, .cs-gal-cards, .cs-gal-grid { grid-template-columns: repeat(2, 1fr); }
  .cs-ah-hero { grid-template-columns: 1fr; gap: 18px; }
  .cs-ah-grid { grid-template-columns: 1fr; }
  .cs-lb { grid-template-columns: 1fr; }
  .cs-lb-img { min-height: 280px; }
}
@media (max-width: 680px) {
  .cs-root { padding: 0 2px 30px; }
  .cs-hero { padding: 22px 18px; }
  .cs-hero-h { font-size: 1.35rem; }
  .cs-hero-nba { width: 100%; }
  .cs-hero-row { flex-direction: column; }
  .cs-hero-book { width: 100%; }
  .cs-qa { flex: 1; min-width: calc(50% - 5px); justify-content: center; padding: 12px; }
  .cs-w-grid { grid-template-columns: 1fr 1fr; }
  .cs-rec-row, .cs-testi-row, .cs-res-grid, .cs-gal-cards, .cs-gal-grid { grid-template-columns: 1fr; }
  .cs-sec-head { flex-direction: column; }
  .cs-sec-head .btn { align-self: flex-start; }
  .cs-prev-mid { display: none; }
  .cs-foot { flex-direction: column; align-items: flex-start; gap: 6px; }
  .cs-msg { max-width: 94%; }
  .btn.sm { padding: 9px 14px; }
}

/* Client Space — preview bar stays dark in both light & dark mode (was --ink-based, low-contrast in dark) */
.cs-prevbar { background: #15161a; }

/* ============================================================
   THEME TREATMENTS (Theme Engine STEP 8) — glass & gradient.
   These rules ONLY engage when the engine sets data-theme-style on
   <html> (Crystal Command → "glass", Midnight Signal → "gradient").
   Flat themes (every other preset + custom) never match, so the rest
   of the app is byte-for-byte unchanged. Everything is driven by the
   tokens the engine writes (--card-bg, --blur, --bg-gradient, etc.),
   so a custom theme can switch on the same treatment with its own hues.
   ============================================================ */

/* ---------- GLASS — frosted, translucent, soft glows ---------- */
/* Soft accent glows behind the main content area. The gradient is fixed
   so panels frost over a steady backdrop while the view scrolls. */
html[data-theme-style^="glass"] .main { background: var(--bg-gradient), var(--app-bg); background-attachment: fixed; }
html[data-theme-style^="glass"] .topbar {
  background: var(--card-bg);
  -webkit-backdrop-filter: blur(var(--blur)) saturate(140%); backdrop-filter: blur(var(--blur)) saturate(140%);
  border-bottom-color: var(--glass-border);
}
/* Cards / panels / dashboard bento → frosted translucent surfaces. */
html[data-theme-style^="glass"] .panel,
html[data-theme-style^="glass"] .card {
  background: var(--card-bg);
  -webkit-backdrop-filter: blur(var(--blur)) saturate(140%); backdrop-filter: blur(var(--blur)) saturate(140%);
  border-color: var(--glass-border); box-shadow: var(--shadow);
}
/* Dialogs, drawers & side panels → slightly more opaque so content reads. */
html[data-theme-style^="glass"] .modal,
html[data-theme-style^="glass"] .co-modal,
html[data-theme-style^="glass"] .proof-drawer,
html[data-theme-style^="glass"] .hdr-menu-pop,
html[data-theme-style^="glass"] .sb2-addmenu {
  background: var(--modal-bg);
  -webkit-backdrop-filter: blur(var(--blur)) saturate(150%); backdrop-filter: blur(var(--blur)) saturate(150%);
  border-color: var(--glass-border); box-shadow: var(--shadow-lg);
}
/* Inputs, dropdowns & search → lighter frost so they stay legible/usable. */
html[data-theme-style^="glass"] .input,
html[data-theme-style^="glass"] .textarea,
html[data-theme-style^="glass"] .select {
  background: var(--input-bg);
  -webkit-backdrop-filter: blur(calc(var(--blur) * 0.55)); backdrop-filter: blur(calc(var(--blur) * 0.55));
  border-color: var(--glass-border);
}
/* Buttons stay SOLID (accessibility): the primary button keeps its opaque
   accent fill — only the soft elevation is shared. */
html[data-theme-style^="glass"] .btn-primary { box-shadow: var(--shadow); }
/* Graceful fallback where backdrop-filter is unsupported — make surfaces
   opaque so text never sits on a low-contrast translucent panel. */
@supports not ((-webkit-backdrop-filter: blur(2px)) or (backdrop-filter: blur(2px))) {
  html[data-theme-style^="glass"] .panel,
  html[data-theme-style^="glass"] .card,
  html[data-theme-style^="glass"] .topbar,
  html[data-theme-style^="glass"] .modal,
  html[data-theme-style^="glass"] .co-modal,
  html[data-theme-style^="glass"] .proof-drawer,
  html[data-theme-style^="glass"] .input,
  html[data-theme-style^="glass"] .textarea,
  html[data-theme-style^="glass"] .select { background: var(--surface); }
}

/* ---------- DARK GLASS — "Dark Glassmorphism" experience polish ----------
   glass-dark inherits the full frosted treatment above via [data-theme-style^="glass"];
   these layer the dark-specific premium depth on top: a frosted sidebar with a
   luminous hairline + accent halo, a glowing active-nav pill, neon focus rings, a
   CTA hover glow, and slim frosted scrollbars. All token-driven, so any skin or
   palette recolors them while the dark glass structure (blur, depth, translucency)
   stays locked. */
html[data-theme-style="glass-dark"] .side {
  background:
    radial-gradient(420px 300px at 16% -12%, color-mix(in srgb, var(--primary-accent) 18%, transparent), transparent 72%),
    linear-gradient(195deg, color-mix(in srgb, #FFFFFF 6%, var(--sidebar-bg)) 0%, var(--sidebar-bg) 62%);
  border-right-color: var(--glass-border);
  box-shadow: inset -1px 0 0 rgba(255,255,255,.05);
}
/* Active nav: translucent accent pill, ringed + lit by the accent glow. */
html[data-theme-style="glass-dark"] .nav-i.active {
  box-shadow: var(--accent-glow);
  border: 1px solid color-mix(in srgb, var(--primary-accent) 36%, transparent);
}
/* Neon focus ring on interactive controls (keyboard + pointer). */
html[data-theme-style="glass-dark"] .input:focus,
html[data-theme-style="glass-dark"] .textarea:focus,
html[data-theme-style="glass-dark"] .select:focus,
html[data-theme-style="glass-dark"] .btn-primary:focus-visible {
  outline: none;
  border-color: color-mix(in srgb, var(--primary-accent) 60%, transparent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary-accent) 22%, transparent), var(--accent-glow);
}
/* Primary CTA: brighten the neon glow on hover. */
html[data-theme-style="glass-dark"] .btn-primary:hover { box-shadow: var(--accent-glow); }
/* Slim, frosted scrollbars to match the premium dark experience. */
html[data-theme-style="glass-dark"] ::-webkit-scrollbar { width: 11px; height: 11px; }
html[data-theme-style="glass-dark"] ::-webkit-scrollbar-thumb { background: rgba(255,255,255,.14); border-radius: 8px; border: 3px solid transparent; background-clip: content-box; }
html[data-theme-style="glass-dark"] ::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,.24); background-clip: content-box; }
html[data-theme-style="glass-dark"] ::-webkit-scrollbar-track { background: transparent; }

/* ---------- GRADIENT — premium dark page + hero, sparing glows ---------- */
/* Gradient lives in the page background + the topbar/hero only. Cards are
   solid (--card-bg) with subtle borders so tables, forms, reports & finance
   stay highly readable — the gradient never sits behind dense content. */
html[data-theme-style="gradient"] .main { background: var(--bg-gradient); background-attachment: fixed; }
html[data-theme-style="gradient"] .topbar { background: var(--hero-gradient); border-bottom-color: var(--border-soft); }
html[data-theme-style="gradient"] .panel,
html[data-theme-style="gradient"] .card { background: var(--card-bg); border-color: var(--border-soft); box-shadow: var(--shadow); }
html[data-theme-style="gradient"] .modal,
html[data-theme-style="gradient"] .co-modal,
html[data-theme-style="gradient"] .proof-drawer { background: var(--modal-bg); border: 1px solid var(--border-soft); box-shadow: var(--shadow-lg); }
/* Accent glow reserved for active states & key CTAs (used sparingly). */
html[data-theme-style="gradient"] .nav-i.active { box-shadow: var(--accent-glow); }
html[data-theme-style="gradient"] .btn-primary:hover { box-shadow: var(--accent-glow); }
/* A soft hero wash behind page titles for a premium SaaS header feel. */
html[data-theme-style="gradient"] .page-head { border-radius: var(--r-lg); }

/* ---------- LIGHT GRADIENT — airy, luminous, soft glow (premium light) ----------
   Sibling of the dark "gradient" treatment, but the wash lives EVERYWHERE (page,
   sidebar, topbar, cards, panels, modals, page headers) so the whole app reads as
   one airy luminous surface. Every value is derived from --primary-accent /
   --secondary-accent / --surface (+ the engine's --bg-gradient / --hero-gradient /
   --accent-glow slots), so a skin swap recolors the washes while the LIGHT
   structure holds. Washes stay ≤ ~6% accent so text contrast is never harmed. */
html[data-theme-style="light-gradient"] .main { background: var(--bg-gradient), var(--app-bg); background-attachment: fixed; }
/* Light luminous sidebar: pearl base lifted by a whisper of accent. */
html[data-theme-style="light-gradient"] .side {
  background:
    radial-gradient(440px 320px at 18% -10%, color-mix(in srgb, var(--primary-accent) 14%, transparent), transparent 72%),
    linear-gradient(195deg, color-mix(in srgb, #FFFFFF 72%, var(--sidebar-bg)) 0%, var(--sidebar-bg) 80%);
  border-right-color: var(--glass-border);
}
/* Frosted, gradient-washed topbar with a hairline glass edge. */
html[data-theme-style="light-gradient"] .topbar {
  background: var(--hero-gradient);
  -webkit-backdrop-filter: blur(var(--blur)) saturate(130%); backdrop-filter: blur(var(--blur)) saturate(130%);
  border-bottom-color: var(--glass-border);
}
html[data-theme-style="light-gradient"] .topbar-search .input { background: color-mix(in srgb, #FFFFFF 68%, var(--surface-2)); }
/* Cards & panels: near-white with a soft diagonal accent→secondary wash + airy lift. */
html[data-theme-style="light-gradient"] .panel,
html[data-theme-style="light-gradient"] .card {
  background:
    linear-gradient(155deg, color-mix(in srgb, var(--primary-accent) 5%, var(--card-bg)) 0%, var(--card-bg) 48%, color-mix(in srgb, var(--secondary-accent) 5%, var(--card-bg)) 100%);
  border-color: var(--glass-border);
  box-shadow: var(--shadow);
}
/* Soft hero wash behind page titles → a premium luminous header band. */
html[data-theme-style="light-gradient"] .page-head {
  background: var(--hero-gradient);
  border: 1px solid var(--glass-border);
  border-radius: var(--r-lg);
  padding: 16px 20px;
  box-shadow: var(--shadow-sm);
}
/* Dialogs / drawers / popovers: cleaner wash, deeper soft shadow, light frost. */
html[data-theme-style="light-gradient"] .modal,
html[data-theme-style="light-gradient"] .co-modal,
html[data-theme-style="light-gradient"] .proof-drawer,
html[data-theme-style="light-gradient"] .hdr-menu-pop,
html[data-theme-style="light-gradient"] .sb2-addmenu {
  background:
    linear-gradient(165deg, color-mix(in srgb, var(--primary-accent) 6%, var(--modal-bg)) 0%, var(--modal-bg) 62%);
  -webkit-backdrop-filter: blur(calc(var(--blur) * 0.6)) saturate(125%); backdrop-filter: blur(calc(var(--blur) * 0.6)) saturate(125%);
  border: 1px solid var(--glass-border);
  box-shadow: var(--shadow-lg);
}
/* Inputs / dropdowns / search → faint frost so the wash glows through, stays legible. */
html[data-theme-style="light-gradient"] .input,
html[data-theme-style="light-gradient"] .textarea,
html[data-theme-style="light-gradient"] .select {
  background: var(--input-bg);
  -webkit-backdrop-filter: blur(calc(var(--blur) * 0.5)); backdrop-filter: blur(calc(var(--blur) * 0.5));
  border-color: var(--glass-border);
}
/* Active nav + primary CTA carry the soft diffuse glow (used sparingly). */
html[data-theme-style="light-gradient"] .nav-i.active { box-shadow: var(--accent-glow); }
html[data-theme-style="light-gradient"] .btn-primary { box-shadow: var(--shadow-sm); }
html[data-theme-style="light-gradient"] .btn-primary:hover { box-shadow: var(--accent-glow); }
/* Graceful fallback where backdrop-filter is unsupported → opaque surfaces so
   text never sits on a low-contrast translucent panel. */
@supports not ((-webkit-backdrop-filter: blur(2px)) or (backdrop-filter: blur(2px))) {
  html[data-theme-style="light-gradient"] .topbar,
  html[data-theme-style="light-gradient"] .modal,
  html[data-theme-style="light-gradient"] .co-modal,
  html[data-theme-style="light-gradient"] .proof-drawer,
  html[data-theme-style="light-gradient"] .input,
  html[data-theme-style="light-gradient"] .textarea,
  html[data-theme-style="light-gradient"] .select { background: var(--surface); }
}
/* iOS jank: fixed backgrounds stutter on mobile → scroll with content there. */
@media (max-width: 767px) {
  html[data-theme-style="light-gradient"] .main { background-attachment: scroll; }
}

/* ---------- Live-preview frame mirrors the treatment ---------- */
/* styleString() already sets every token on .tp-frame inline; these rules let
   the scoped preview show the frosted glass / gradient before the user applies. */
.tp-frame[data-theme-style^="glass"] { background: var(--bg-gradient), var(--app-bg); }
.tp-frame[data-theme-style^="glass"] .tp-card {
  background: var(--card-bg);
  -webkit-backdrop-filter: blur(var(--blur)) saturate(140%); backdrop-filter: blur(var(--blur)) saturate(140%);
  border-color: var(--glass-border); box-shadow: var(--shadow);
}
.tp-frame[data-theme-style="gradient"] { background: var(--bg-gradient); }
.tp-frame[data-theme-style="gradient"] .tp-nav.on { box-shadow: var(--accent-glow); }
.tp-frame[data-theme-style="light-gradient"] { background: var(--bg-gradient), var(--app-bg); }
.tp-frame[data-theme-style="light-gradient"] .tp-side { background: linear-gradient(195deg, color-mix(in srgb, #FFFFFF 72%, var(--sidebar-bg)), var(--sidebar-bg)); }
.tp-frame[data-theme-style="light-gradient"] .tp-card {
  background: linear-gradient(155deg, color-mix(in srgb, var(--primary-accent) 6%, var(--surface-elevated)) 0%, var(--surface-elevated) 60%, color-mix(in srgb, var(--secondary-accent) 6%, var(--surface-elevated)) 100%);
  border-color: var(--glass-border); box-shadow: var(--shadow);
}
.tp-frame[data-theme-style="light-gradient"] .tp-nav.on { background: color-mix(in srgb, var(--primary-accent) 16%, var(--surface)); color: var(--primary-accent); box-shadow: var(--accent-glow); }


/* ============================================================
   Theme Engine STEP 8 — appearance controls for the treatment layer
   (style segmented control + glass-blur slider + preview "dirty" flag
   + preset treatment badge). Token-driven so they follow any theme.
   ============================================================ */
.ap-preset-tag { font-size: .56rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: var(--primary-accent); background: color-mix(in srgb, var(--primary-accent) 14%, var(--surface-elevated)); border: 1px solid color-mix(in srgb, var(--primary-accent) 30%, transparent); border-radius: var(--pill); padding: 1px 6px; }
.ap-range-wrap { display: inline-flex; align-items: center; gap: 10px; }
.ap-range-wrap input[type=range] { width: 132px; accent-color: var(--primary-accent); }
.ap-range-wrap b { font-size: .78rem; font-variant-numeric: tabular-nums; color: var(--text-secondary); min-width: 36px; text-align: right; }
.ap-dirty { font-size: .68rem; font-weight: 700; color: var(--warning); margin-left: auto; display: inline-flex; align-items: center; gap: 4px; text-transform: none; letter-spacing: 0; }
.ap-dirty[hidden] { display: none; }

/* ============================================================
   CLIENT SPACE — DESIGN VARIANTS (per-client `portal.space.design`)
   .cs-theme-classic = base styles (no overrides needed).
   Switchable from Configure → "Design style".
   ============================================================ */

/* ===== MODERN — bold, vibrant, gradient, energetic ===== */
.cs-theme-modern .cs-hero { background: linear-gradient(135deg, var(--cs-accent), color-mix(in srgb, var(--cs-accent) 42%, #161226)); border: 0; color: #fff; border-radius: 26px; padding: 34px 32px 28px; box-shadow: 0 26px 52px -24px var(--cs-accent); }
.cs-theme-modern .cs-hero-veil { display: none; }
.cs-theme-modern .cs-hero-with { color: rgba(255,255,255,.85); }
.cs-theme-modern .cs-hero-h { font-size: 2rem; color: #fff; }
.cs-theme-modern .cs-status-pill .badge { background: rgba(255,255,255,.22); color: #fff; }
.cs-theme-modern .cs-hero-logo { box-shadow: 0 8px 20px -6px rgba(0,0,0,.45); }
.cs-theme-modern .cs-hero-nba { background: #fff; color: color-mix(in srgb, var(--cs-accent) 72%, #111); box-shadow: 0 16px 32px -14px rgba(0,0,0,.5); }
.cs-theme-modern .cs-nba-l b, .cs-theme-modern .cs-nba-l span { color: inherit; }
.cs-theme-modern .cs-nba-go { background: var(--cs-accent); color: #fff; }
.cs-theme-modern .cs-hero-book { background: rgba(255,255,255,.16); border-color: rgba(255,255,255,.32); color: #fff; backdrop-filter: blur(6px); }
.cs-theme-modern .cs-hero-book small { color: rgba(255,255,255,.85); }
.cs-theme-modern .cs-qa { background: rgba(255,255,255,.16); border-color: rgba(255,255,255,.3); color: #fff; border-radius: 14px; backdrop-filter: blur(6px); }
.cs-theme-modern .cs-qa .ic { color: #fff; }
.cs-theme-modern .cs-qa:hover { background: rgba(255,255,255,.26); color: #fff; transform: translateY(-1px); }
.cs-theme-modern .cs-nav-in { border-radius: 18px; box-shadow: 0 16px 34px -22px rgba(0,0,0,.35); }
.cs-theme-modern .cs-pill.on { background: linear-gradient(135deg, var(--cs-accent), color-mix(in srgb, var(--cs-accent) 52%, #6b3df5)); }
.cs-theme-modern .cs-w { border-radius: 20px; background: linear-gradient(160deg, color-mix(in srgb, var(--cs-accent) 9%, var(--surface)), var(--surface)); border-color: color-mix(in srgb, var(--cs-accent) 18%, var(--line)); }
.cs-theme-modern .cs-w:hover { transform: translateY(-4px); box-shadow: 0 20px 38px -20px color-mix(in srgb, var(--cs-accent) 55%, #000); }
.cs-theme-modern .cs-w-ico { background: linear-gradient(135deg, var(--cs-accent), color-mix(in srgb, var(--cs-accent) 52%, #6b3df5)); color: #fff; border-radius: 14px; width: 42px; height: 42px; }
.cs-theme-modern .cs-w-big { font-size: 1.7rem; color: color-mix(in srgb, var(--cs-accent) 78%, var(--ink)); }
.cs-theme-modern .cs-home-actions, .cs-theme-modern .cs-panel { border-radius: 20px; box-shadow: 0 16px 38px -24px color-mix(in srgb, var(--cs-accent) 45%, #000); }
.cs-theme-modern .cs-act { border-radius: 16px; }
.cs-theme-modern .cs-act-ico { border-radius: 12px; }
.cs-theme-modern .cs-sec-ico { border-radius: 14px; background: linear-gradient(135deg, color-mix(in srgb, var(--cs-accent) 16%, var(--surface)), var(--surface)); }

/* ===== SLEEK — minimal, editorial, hairlines, whitespace ===== */
.cs-theme-sleek .cs-hero { background: var(--surface); border: 1px solid var(--line); border-radius: 10px; box-shadow: none; padding: 42px 40px; }
.cs-theme-sleek .cs-hero-veil { display: none; }
.cs-theme-sleek .cs-hero-brand { margin-bottom: 24px; }
.cs-theme-sleek .cs-hero-logo { border-radius: 8px; box-shadow: none; border: 1px solid var(--line); }
.cs-theme-sleek .cs-hero-h { font-family: Georgia, 'Times New Roman', serif; font-weight: 500; font-size: 2.05rem; letter-spacing: -.01em; line-height: 1.25; max-width: 24ch; }
.cs-theme-sleek .cs-hero-with { text-transform: uppercase; letter-spacing: .14em; font-size: .68rem; }
.cs-theme-sleek .cs-status-pill .badge { background: transparent; border: 1px solid var(--line); color: var(--ink-soft); text-transform: uppercase; letter-spacing: .08em; font-size: .64rem; }
.cs-theme-sleek .cs-hero-nba { background: var(--ink); color: var(--canvas); border-radius: 8px; box-shadow: none; }
.cs-theme-sleek .cs-nba-go { background: transparent; opacity: .85; }
.cs-theme-sleek .cs-hero-book { border-radius: 8px; box-shadow: none; }
.cs-theme-sleek .cs-qa { border-radius: 8px; background: var(--surface); font-weight: 500; }
.cs-theme-sleek .cs-qa:hover { background: var(--surface); border-color: var(--ink); color: var(--ink); transform: none; }
.cs-theme-sleek .cs-qa .ic { color: var(--ink-soft); }
.cs-theme-sleek .cs-nav-in { background: transparent; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; padding: 0 2px; gap: 2px; backdrop-filter: none; }
.cs-theme-sleek .cs-pill { border-radius: 0; background: transparent; padding: 13px 15px; border-bottom: 2px solid transparent; color: var(--ink-soft); font-weight: 500; }
.cs-theme-sleek .cs-pill:hover { background: transparent; color: var(--ink); }
.cs-theme-sleek .cs-pill.on { background: transparent; color: var(--ink); border-bottom-color: var(--cs-accent); box-shadow: none; }
.cs-theme-sleek .cs-pill.on .cs-pill-badge { background: var(--cs-accent); }
.cs-theme-sleek .cs-w { background: var(--surface); border-radius: 10px; box-shadow: none; border: 1px solid var(--line); padding: 22px; }
.cs-theme-sleek .cs-w:hover { transform: none; box-shadow: none; border-color: var(--ink); }
.cs-theme-sleek .cs-w-ico { background: transparent; color: var(--ink); width: auto; height: auto; margin-bottom: 16px; }
.cs-theme-sleek .cs-w-t { text-transform: uppercase; letter-spacing: .1em; font-size: .66rem; }
.cs-theme-sleek .cs-w-big { font-weight: 500; font-size: 1.6rem; letter-spacing: -.02em; }
.cs-theme-sleek .cs-home-actions, .cs-theme-sleek .cs-panel, .cs-theme-sleek .cs-act, .cs-theme-sleek .cs-thread, .cs-theme-sleek .cs-tk, .cs-theme-sleek .cs-req, .cs-theme-sleek .cs-proj, .cs-theme-sleek .cs-fgroup, .cs-theme-sleek .cs-bk-group, .cs-theme-sleek .cs-res, .cs-theme-sleek .cs-gal-card { box-shadow: none; border-radius: 10px; }
.cs-theme-sleek .cs-sec-ico { background: transparent; border: 1px solid var(--line); color: var(--ink); border-radius: 8px; }
.cs-theme-sleek .cs-sec-head h2, .cs-theme-sleek .cs-sec-h-l.mini h3 { font-family: Georgia, 'Times New Roman', serif; font-weight: 500; }

/* ===== DASHBOARD — data-dense, compact, control-panel ===== */
.cs-theme-dashboard .cs-hero { padding: 18px 22px; border-radius: 12px; background: var(--surface); border: 1px solid var(--line); box-shadow: none; margin-bottom: 12px; }
.cs-theme-dashboard .cs-hero-veil { display: none; }
.cs-theme-dashboard .cs-hero-brand { margin-bottom: 8px; }
.cs-theme-dashboard .cs-hero-logo { width: 40px; height: 40px; border-radius: 9px; }
.cs-theme-dashboard .cs-hero-h { font-size: 1.3rem; margin-bottom: 12px; max-width: none; line-height: 1.2; }
.cs-theme-dashboard .cs-hero-row { gap: 8px; margin-bottom: 10px; }
.cs-theme-dashboard .cs-hero-nba { padding: 10px 14px; border-radius: 10px; box-shadow: none; }
.cs-theme-dashboard .cs-hero-book { padding: 9px 12px; border-radius: 10px; }
.cs-theme-dashboard .cs-qa { padding: 8px 11px; border-radius: 9px; font-size: .8rem; }
.cs-theme-dashboard .cs-nav { margin-bottom: 12px; }
.cs-theme-dashboard .cs-nav-in { border-radius: 10px; padding: 5px; gap: 3px; }
.cs-theme-dashboard .cs-pill { padding: 7px 11px; border-radius: 8px; font-size: .83rem; }
.cs-theme-dashboard .cs-sec { gap: 12px; }
.cs-theme-dashboard .cs-w-grid { gap: 8px; }
.cs-theme-dashboard .cs-w { padding: 13px; border-radius: 10px; box-shadow: none; border: 1px solid var(--line); border-top: 2px solid color-mix(in srgb, var(--cs-accent) 60%, var(--line)); gap: 1px; }
.cs-theme-dashboard .cs-w:hover { transform: none; box-shadow: none; border-top-color: var(--cs-accent); }
.cs-theme-dashboard .cs-w-ico { width: 28px; height: 28px; border-radius: 7px; margin-bottom: 4px; }
.cs-theme-dashboard .cs-w-t { font-size: .7rem; text-transform: uppercase; letter-spacing: .04em; }
.cs-theme-dashboard .cs-w-big { font-size: 1.45rem; font-variant-numeric: tabular-nums; }
.cs-theme-dashboard .cs-w-s { font-size: .72rem; }
.cs-theme-dashboard .cs-home-actions, .cs-theme-dashboard .cs-panel { border-radius: 10px; box-shadow: none; padding: 14px 16px; }
.cs-theme-dashboard .cs-act { padding: 10px 13px; border-radius: 9px; }
.cs-theme-dashboard .cs-act-ico { width: 30px; height: 30px; border-radius: 8px; }
.cs-theme-dashboard .cs-sec-head h2 { font-size: 1.1rem; }
.cs-theme-dashboard .cs-sec-ico { width: 34px; height: 34px; border-radius: 9px; }
.cs-theme-dashboard .cs-timeline .cs-tl-row { padding: 10px 0; }
.cs-theme-dashboard .cs-proj, .cs-theme-dashboard .cs-thread, .cs-theme-dashboard .cs-tk, .cs-theme-dashboard .cs-req, .cs-theme-dashboard .cs-fgroup, .cs-theme-dashboard .cs-bk-group, .cs-theme-dashboard .cs-res { box-shadow: none; border-radius: 10px; }


/* ============================================================
   GRADIENT BACKGROUND ENGINE (Yesh.gradient) — customizable gradient skin.
   Independent of data-theme-style: data-grad-on="1" is the master switch and
   data-grad-scope lists the surfaces that opt in. Every rule is gated by its
   scope token, so a surface only changes when the user enables that scope — the
   gradient never fights the active treatment, and OFF (data-grad-on="0") matches
   nothing, so the app is byte-for-byte unchanged. Only background paint + a
   sparing glow are touched — never layout, spacing, structure or type scale.
   Surfaces keep a SOLID base colour under translucent washes so text, tables,
   forms, charts & modals stay readable (contrast is auto-audited + auto-fixable).
   ============================================================ */

/* PAGE + subtle OVERLAY → the main canvas (overlay layered over the page wash). */
html[data-grad-on="1"][data-grad-scope~="page"] .main,
html[data-grad-on="1"][data-grad-scope~="overlay"] .main {
  background-color: var(--app-bg);
  background-image: var(--grad-overlay), var(--grad-page);
  background-attachment: fixed;
}
/* HERO / HEADER → top bar + page-title header band. */
html[data-grad-on="1"][data-grad-scope~="hero"] .topbar { background-image: var(--grad-hero); }
html[data-grad-on="1"][data-grad-scope~="hero"] .page-head { background-image: var(--grad-hero); border-radius: var(--r-lg); }
/* SECTION panels — faint diagonal wash over the solid card surface. */
html[data-grad-on="1"][data-grad-scope~="section"] .panel {
  background-color: var(--card-bg); background-image: var(--grad-section);
}
/* CARDS. */
html[data-grad-on="1"][data-grad-scope~="card"] .card {
  background-color: var(--card-bg); background-image: var(--grad-card);
}
/* DASHBOARD WIDGETS (bento tiles) — higher specificity wins over section panels. */
html[data-grad-on="1"][data-grad-scope~="widget"] .bento .panel {
  background-color: var(--card-bg); background-image: var(--grad-widget);
}
/* MODALS / drawers / menus. */
html[data-grad-on="1"][data-grad-scope~="modal"] .modal,
html[data-grad-on="1"][data-grad-scope~="modal"] .co-modal,
html[data-grad-on="1"][data-grad-scope~="modal"] .proof-drawer,
html[data-grad-on="1"][data-grad-scope~="modal"] .hdr-menu-pop,
html[data-grad-on="1"][data-grad-scope~="modal"] .sb2-addmenu {
  background-color: var(--modal-bg); background-image: var(--grad-modal);
}
/* CLIENT PORTAL (Client Space) surfaces. */
html[data-grad-on="1"][data-grad-scope~="portal"] .cs-root { background-image: var(--grad-portal); }

/* Consistency across desktop / tablet / mobile: fixed page backgrounds stutter on
   iOS, so scroll with content on small screens (matches the treatment layer). */
@media (max-width: 767px) {
  html[data-grad-on="1"][data-grad-scope~="page"] .main,
  html[data-grad-on="1"][data-grad-scope~="overlay"] .main { background-attachment: scroll; }
}

/* ---------- Live-preview frame mirrors the gradient before Apply ---------- */
/* styleString() already sets every --grad-* token inline on .tp-frame; these
   rules let the scoped preview show the gradient with the same scope gating. */
.tp-frame[data-grad-on="1"][data-grad-scope~="page"],
.tp-frame[data-grad-on="1"][data-grad-scope~="overlay"] {
  background-color: var(--app-bg);
  background-image: var(--grad-overlay), var(--grad-page);
}
.tp-frame[data-grad-on="1"][data-grad-scope~="hero"] .tp-top { background-image: var(--grad-hero); }
.tp-frame[data-grad-on="1"][data-grad-scope~="card"] .tp-card { background-color: var(--surface-elevated); background-image: var(--grad-card); }
.tp-frame[data-grad-on="1"][data-grad-scope~="section"] .tp-card { background-color: var(--surface-elevated); background-image: var(--grad-section); }

/* ============================================================
   Gradient builder UI (Theme & appearance → Gradient background).
   Token-driven, so the controls follow whatever theme is active.
   ============================================================ */
.gb-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
.gb-off-note { font-size: .8rem; color: var(--text-muted); margin: 2px 0 0; line-height: 1.5; }
.gb-off-note svg { color: var(--primary-accent); vertical-align: -1px; }

/* big live gradient preview bar with a legibility sample baked in */
.gb-bigprev { position: relative; height: 92px; border-radius: var(--r-card); border: 1px solid var(--border-soft); margin: 2px 0 6px; overflow: hidden; }
.gb-bigprev::after {
  content: 'Aa  Heading  ·  Body stays readable';
  position: absolute; left: 14px; top: 50%; transform: translateY(-50%);
  font-weight: 700; font-size: .92rem; color: var(--text-primary);
  text-shadow: 0 1px 0 color-mix(in srgb, var(--surface) 55%, transparent);
}

/* preset gradient skin cards */
.gb-presets { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.gb-preset { display: flex; flex-direction: column; gap: 7px; padding: 8px; text-align: left; border: 1px solid var(--border-soft); border-radius: var(--r-card); background: var(--surface-elevated); cursor: pointer; transition: border-color .14s ease, box-shadow .14s ease, transform .08s ease; }
.gb-preset:hover { border-color: var(--border-strong); box-shadow: var(--sh-soft); transform: translateY(-1px); }
.gb-preset.on { border-color: var(--primary-accent); box-shadow: 0 0 0 2px color-mix(in srgb, var(--primary-accent) 40%, transparent); }
.gb-swatch { height: 38px; border-radius: 9px; border: 1px solid var(--border-soft); background-size: cover; background-position: center; }
.gb-swatch.sm { height: 18px; width: 54px; flex: none; border-radius: 6px; }
.gb-preset-name { font-weight: 700; font-size: .82rem; color: var(--text-primary); display: flex; align-items: center; gap: 5px; }
.gb-preset-name svg { color: var(--primary-accent); }
.gb-preset-desc { font-size: .72rem; color: var(--text-muted); }

/* slider rows (reuse .ap-range-wrap for the control itself) */
.gb-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 7px 0; }
.gb-row + .gb-row { border-top: 1px solid var(--border-soft); }
.gb-row-l { font-size: .83rem; font-weight: 600; color: var(--text-secondary); }

/* "apply to areas" scope chips */
.gb-scopes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
.gb-scope { display: flex; align-items: flex-start; gap: 8px; padding: 8px 10px; text-align: left; border: 1px solid var(--border-soft); border-radius: var(--r-chip); background: var(--surface-elevated); cursor: pointer; transition: border-color .12s ease, background .12s ease; }
.gb-scope:hover { border-color: var(--border-strong); }
.gb-scope.on { border-color: var(--primary-accent); background: color-mix(in srgb, var(--primary-accent) 8%, var(--surface-elevated)); }
.gb-scope-chk { width: 16px; height: 16px; border-radius: 5px; border: 1.5px solid var(--border-strong); flex: none; margin-top: 1px; display: grid; place-items: center; color: #fff; }
.gb-scope.on .gb-scope-chk { background: var(--primary-accent); border-color: var(--primary-accent); }
.gb-scope-l { display: flex; flex-direction: column; min-width: 0; }
.gb-scope-t { font-size: .8rem; font-weight: 650; color: var(--text-primary); }
.gb-scope-h { font-size: .68rem; color: var(--text-muted); }

.gb-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; }

@media (max-width: 560px) {
  .gb-presets, .gb-scopes { grid-template-columns: 1fr; }
}

/* ============================================================
   EXPERIENCE LAYER (STEP 11) — the FIXED structure of each
   experience, keyed on html[data-experience]. This is the half
   of the theme a SKIN can never touch: radius / shadow depth /
   spacing / typography / nav. Colour comes from the skin+treatment
   (tokens); these rules set ONLY structure, all through the same
   radius + shadow tokens every component already consumes, so one
   attribute restructures the whole app without per-component edits.
   data-experience="" (legacy themes) matches nothing → unchanged.
   ============================================================ */

/* ---- Radius profiles (cascade to every card/button/input/modal via --r-*) ---- */
/* Sharp — Bold Creative */
html[data-experience="bold-creative"] {
  --r-xs: 3px; --r-sm: 5px; --r: 7px; --r-lg: 9px; --r-xl: 12px;
  --radius: 8px; --r-chip: 6px; --r-card: 9px; --r-hero: 11px; --sheet-radius: 12px;
}
/* Rounded — Glass UI & Soft Neutral */
html[data-experience="glass-ui"], html[data-experience="soft-neutral"] {
  --r-xs: 9px; --r-sm: 12px; --r: 16px; --r-lg: 22px; --r-xl: 28px;
  --radius: 16px; --r-chip: 13px; --r-card: 20px; --r-hero: 26px; --sheet-radius: 26px;
}
/* Soft/clean — Light Editorial, Luxury Minimal, Corporate Clean, Dark Gradient */
html[data-experience="light-editorial"], html[data-experience="luxury-minimal"],
html[data-experience="corporate-clean"], html[data-experience="dark-gradient"] {
  --r-xs: 5px; --r-sm: 8px; --r: 11px; --r-lg: 13px; --r-xl: 16px;
  --radius: 11px; --r-chip: 9px; --r-card: 13px; --r-hero: 16px;
}

/* ---- Shadow depth (flat experiences; glass/gradient set their own via the engine) ---- */
html[data-experience="luxury-minimal"] {
  --sh-1: 0 1px 2px rgba(20,18,12,.04); --sh-2: 0 2px 8px rgba(20,18,12,.05); --sh-3: 0 12px 32px rgba(20,18,12,.10);
}
html[data-experience="light-editorial"] {
  --sh-1: 0 1px 2px rgba(20,18,12,.05); --sh-2: 0 3px 10px rgba(20,18,12,.06); --sh-3: 0 14px 36px rgba(20,18,12,.12);
}
html[data-experience="soft-neutral"] {
  --sh-1: 0 1px 3px rgba(30,35,60,.06); --sh-2: 0 6px 18px rgba(30,35,60,.09); --sh-3: 0 18px 44px rgba(30,35,60,.16);
}
html[data-experience="corporate-clean"] {
  --sh-1: 0 1px 2px rgba(20,28,45,.06); --sh-2: 0 4px 12px rgba(20,28,45,.08); --sh-3: 0 16px 40px rgba(20,28,45,.14);
}
html[data-experience="bold-creative"] {
  --sh-1: 0 2px 0 rgba(20,18,12,.12); --sh-2: 0 4px 0 rgba(20,18,12,.14); --sh-3: 0 10px 28px rgba(20,18,12,.22);
}

/* ---- Density (focused — never touches the responsive control tokens) ---- */
html[data-experience="luxury-minimal"] .panel-body,
html[data-experience="light-editorial"] .panel-body { padding: 22px 24px; }
html[data-experience="luxury-minimal"] .card,
html[data-experience="light-editorial"] .card { padding: 26px; }
html[data-experience="corporate-clean"] .panel-body { padding: 14px 16px; }
html[data-experience="corporate-clean"] .card { padding: 18px; }

/* ---- Typography — Editorial = serif display; Bold = heavy/tight; Luxury = refined ---- */
html[data-experience="light-editorial"] { --font-display: 'Newsreader', Georgia, 'Times New Roman', serif; }
html[data-experience="light-editorial"] .page-title { font-weight: 500; letter-spacing: -.005em; font-size: 1.85rem; }
html[data-experience="light-editorial"] .panel-title { font-weight: 600; }
html[data-experience="bold-creative"] .page-title { font-weight: 800; letter-spacing: -.03em; }
html[data-experience="bold-creative"] .panel-title { font-weight: 800; letter-spacing: -.01em; }
html[data-experience="luxury-minimal"] .page-title { font-weight: 600; letter-spacing: -.012em; }

/* ---- Component hierarchy — Bold = heavier card edges (structure, not colour) ---- */
html[data-experience="bold-creative"] .card,
html[data-experience="bold-creative"] .panel { border-width: 2px; }

/* ---- Navigation style ---- */
html[data-experience="light-editorial"] .nav-i { font-weight: 500; }
html[data-experience="light-editorial"] .nav-sect { letter-spacing: .16em; }
html[data-experience="bold-creative"] .nav-i { font-weight: 700; }

/* ============================================================
   STEP 11 — Two-layer appearance UI (Experience + Skin selectors).
   Token-driven so the panel itself follows whatever theme is active.
   ============================================================ */
.ap-layer-lead { font-size: .82rem; color: var(--text-muted); margin: 0 0 12px; line-height: 1.5; }

/* Experience cards */
.ap-exps { display: grid; grid-template-columns: repeat(auto-fill, minmax(195px, 1fr)); gap: 10px; }
.ap-exp { display: flex; gap: 10px; align-items: center; padding: 10px; text-align: left; border: 1px solid var(--border-soft); border-radius: var(--r-card); background: var(--surface-elevated); cursor: pointer; transition: border-color .14s ease, box-shadow .14s ease, transform .08s ease; }
.ap-exp:hover { border-color: var(--border-strong); box-shadow: var(--sh-soft); transform: translateY(-1px); }
.ap-exp.on { border-color: var(--primary-accent); box-shadow: 0 0 0 2px color-mix(in srgb, var(--primary-accent) 40%, transparent); }
.ap-exp-sw { display: grid; grid-template-columns: 1fr 1fr; width: 38px; height: 38px; border-radius: 9px; overflow: hidden; border: 1px solid var(--border-soft); flex: none; }
.ap-exp-sw i { display: block; }
.ap-exp-main { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ap-exp-name { font-weight: 700; font-size: .86rem; color: var(--text-primary); display: flex; align-items: center; gap: 4px; }
.ap-exp-name svg { color: var(--primary-accent); }
.ap-exp-struct { font-size: .72rem; color: var(--text-muted); line-height: 1.3; }

/* Skin source tabs + swatches */
.ap-skin-tabs { display: inline-flex; flex-wrap: wrap; gap: 2px; background: var(--surface-muted); border: 1px solid var(--border-soft); border-radius: var(--r); padding: 3px; margin-bottom: 12px; }
.ap-skin-tab { padding: 5px 13px; border-radius: var(--r-sm); font-size: .8rem; font-weight: 600; color: var(--text-muted); transition: background .12s ease, color .12s ease; }
.ap-skin-tab:hover { color: var(--text-primary); }
.ap-skin-tab.on { background: var(--surface-elevated); color: var(--text-primary); box-shadow: var(--sh-soft); }
.ap-skins { display: grid; grid-template-columns: repeat(auto-fill, minmax(134px, 1fr)); gap: 8px; }
.ap-skin { display: flex; flex-direction: column; gap: 6px; padding: 8px; text-align: left; border: 1px solid var(--border-soft); border-radius: var(--r); background: var(--surface-elevated); cursor: pointer; transition: border-color .14s ease, box-shadow .14s ease, transform .08s ease; }
.ap-skin:hover { border-color: var(--border-strong); transform: translateY(-1px); box-shadow: var(--sh-soft); }
.ap-skin.on { border-color: var(--primary-accent); box-shadow: 0 0 0 2px color-mix(in srgb, var(--primary-accent) 40%, transparent); }
.ap-skin-sw { display: flex; height: 22px; border-radius: 6px; overflow: hidden; border: 1px solid var(--border-soft); }
.ap-skin-sw i { flex: 1; }
.ap-skin-name { font-size: .74rem; font-weight: 600; color: var(--text-secondary); display: flex; align-items: center; gap: 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ap-skin-name svg { color: var(--primary-accent); flex: none; }
.ap-skins-list { display: flex; flex-direction: column; gap: 8px; }
.ap-skin-row { display: flex; align-items: center; gap: 8px; }
.ap-skin.grow { flex: 1; flex-direction: row; align-items: center; gap: 10px; }
.ap-skin.grow .ap-skin-sw { width: 60px; height: 24px; flex: none; }
.ap-skin-empty { font-size: .82rem; color: var(--text-muted); padding: 8px 0; }

/* Layer action rows + status labels */
.ap-layer-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 12px; }
.ap-locked { font-size: .76rem; color: var(--text-secondary); display: inline-flex; align-items: center; gap: 5px; }
.ap-locked svg { color: var(--success); }
.ap-locked.muted svg { color: var(--warning); }
.ap-skin-status { font-size: .74rem; font-weight: 700; display: inline-flex; align-items: center; gap: 5px; margin-left: auto; }
.ap-skin-status.scan { color: var(--primary-accent); }
.ap-skin-status.warn { color: var(--warning); }

/* Brand scan */
.ap-scan-note { font-size: .8rem; color: var(--text-muted); margin: 0 0 10px; line-height: 1.5; }
.ap-scan-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.ap-scan-input { flex: 1; min-width: 140px; }
.ap-scan-result { display: flex; align-items: center; gap: 10px; margin-top: 10px; padding: 8px 10px; border: 1px solid var(--border-soft); border-radius: var(--r); background: var(--surface-muted); font-size: .82rem; }
.ap-scan-result .ap-skin-sw { width: 64px; height: 22px; flex: none; }


/* ============================================================
   APPLE LIQUID GLASS experiences (the Apple-style glass ask).
   Build on the shared [data-theme-style^="glass"] frost treatment;
   add the Apple identity: generous radius, capsule controls, extra
   vibrancy (saturate) and a specular top sheen. Structure only —
   colour still flows from the active skin's tokens.
   ============================================================ */
html[data-experience="liquid-glass"], html[data-experience="liquid-glass-dark"] {
  --r-xs: 10px; --r-sm: 13px; --r: 18px; --r-lg: 24px; --r-xl: 30px;
  --radius: 18px; --r-chip: 999px; --r-card: 22px; --r-hero: 30px; --sheet-radius: 28px;
}
/* capsule buttons */
html[data-experience="liquid-glass"] .btn,
html[data-experience="liquid-glass-dark"] .btn { border-radius: 999px; }
/* extra vibrancy + luminous specular sheen on frosted surfaces */
html[data-experience="liquid-glass"] .panel,
html[data-experience="liquid-glass"] .card,
html[data-experience="liquid-glass"] .modal,
html[data-experience="liquid-glass"] .co-modal {
  -webkit-backdrop-filter: blur(var(--blur)) saturate(180%);
  backdrop-filter: blur(var(--blur)) saturate(180%);
  box-shadow: var(--shadow), inset 0 1px 0 rgba(255,255,255,.55);
}
html[data-experience="liquid-glass-dark"] .panel,
html[data-experience="liquid-glass-dark"] .card,
html[data-experience="liquid-glass-dark"] .modal,
html[data-experience="liquid-glass-dark"] .co-modal {
  -webkit-backdrop-filter: blur(var(--blur)) saturate(170%);
  backdrop-filter: blur(var(--blur)) saturate(170%);
  box-shadow: var(--shadow), inset 0 1px 0 rgba(255,255,255,.14);
}
/* airy frosted topbar */
html[data-experience="liquid-glass"] .topbar,
html[data-experience="liquid-glass-dark"] .topbar {
  -webkit-backdrop-filter: blur(var(--blur)) saturate(180%);
  backdrop-filter: blur(var(--blur)) saturate(180%);
}
/* spacious density — desktop only, never touches the responsive control tokens */
@media (min-width: 1025px) {
  html[data-experience="liquid-glass"] .panel-body,
  html[data-experience="liquid-glass-dark"] .panel-body { padding: 22px 24px; }
  html[data-experience="liquid-glass"] .card,
  html[data-experience="liquid-glass-dark"] .card { padding: 24px; }
}


/* Curated skin collection — group section labels (trendy/main skins) */
.ap-skin-group { font-size: .7rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--text-muted); margin: 14px 0 7px; }
.ap-skin-group:first-child { margin-top: 2px; }
.ap-skins + .ap-skin-group { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--border-soft); }

/* ===== Custom skins / gradients — workspace-scoped cards, badges, empty states,
   apply-scope chips & the live-preview legend (activate custom layers) ===== */
.ap-cards { display: flex; flex-direction: column; gap: 10px; }
.ap-skin-card { border: 1px solid var(--border-soft); border-radius: var(--r-card); background: var(--surface-elevated); padding: 11px 12px; display: flex; flex-direction: column; gap: 10px; transition: border-color .14s ease, box-shadow .14s ease; }
.ap-skin-card.active { border-color: var(--primary-accent); box-shadow: 0 0 0 2px color-mix(in srgb, var(--primary-accent) 32%, transparent); }
.ap-skin-card.previewing { border-color: color-mix(in srgb, var(--primary-accent) 60%, var(--border-strong)); }
.ap-skin-card-top { display: flex; align-items: center; gap: 12px; }
.ap-skin-card-meta { min-width: 0; flex: 1; display: flex; flex-direction: column; gap: 2px; }
.ap-skin-card-name { font-weight: 700; font-size: .9rem; color: var(--text-primary); display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.ap-skin-card-sub { font-size: .74rem; color: var(--text-muted); }
.ap-skin-card-desc { font-size: .78rem; color: var(--text-secondary); margin-top: 2px; }
.ap-skin-card-actions { display: flex; flex-wrap: wrap; gap: 6px; }
.ap-skin-sw.lg { width: 64px; height: 30px; flex: none; border-radius: 8px; }
.ap-badge { display: inline-flex; align-items: center; gap: 3px; font-size: .64rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; padding: 2px 7px; border-radius: 999px; }
.ap-badge.on { background: color-mix(in srgb, var(--primary-accent) 18%, transparent); color: var(--primary-accent); }
.ap-badge.prev { background: var(--surface-muted); color: var(--text-muted); }

/* duplicate-into-custom corner button on built-in skin/gradient tiles. The wrap is
   the grid item (stretches to fill its cell); make the inner button fill the wrap so
   every tile is uniform width (a bare <button> otherwise shrinks to its content). */
.ap-skin-wrap, .gb-preset-wrap { position: relative; display: flex; }
.ap-skin-wrap > .ap-skin, .gb-preset-wrap > .gb-preset { flex: 1 1 auto; min-width: 0; }
.ap-skin-dup { position: absolute; top: 5px; right: 5px; width: 24px; height: 24px; display: inline-flex; align-items: center; justify-content: center; border-radius: 7px; background: color-mix(in srgb, var(--surface) 86%, transparent); border: 1px solid var(--border-soft); color: var(--text-muted); opacity: 0; transition: opacity .12s ease, color .12s ease, border-color .12s ease; }
.ap-skin-wrap:hover .ap-skin-dup, .gb-preset-wrap:hover .ap-skin-dup, .ap-skin-dup:focus-visible { opacity: 1; }
.ap-skin-dup:hover { color: var(--primary-accent); border-color: var(--primary-accent); }

/* useful empty states */
.ap-empty { text-align: center; padding: 22px 16px; border: 1px dashed var(--border-strong); border-radius: var(--r-card); background: color-mix(in srgb, var(--surface-muted) 60%, transparent); display: flex; flex-direction: column; align-items: center; gap: 6px; }
.ap-empty-ic { color: var(--text-muted); opacity: .7; }
.ap-empty-t { font-weight: 700; color: var(--text-primary); margin: 0; }
.ap-empty-s { font-size: .82rem; color: var(--text-muted); max-width: 360px; margin: 0 0 6px; }

/* save-modal preview row */
.ap-save-prev { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }

/* sub-header hint + apply-scope (location) section chips */
.ap-sub-h { font-weight: 500; font-size: .72rem; color: var(--text-muted); text-transform: none; letter-spacing: 0; margin-left: 6px; }
.gb-sections { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.gb-sec { display: inline-flex; align-items: center; gap: 4px; font-size: .76rem; font-weight: 600; padding: 5px 11px; border-radius: 999px; border: 1px solid var(--border-soft); background: var(--surface-elevated); color: var(--text-secondary); }
.gb-sec.on { border-color: var(--primary-accent); background: color-mix(in srgb, var(--primary-accent) 14%, transparent); color: var(--primary-accent); }
.gb-sec svg { flex: none; }

/* live-preview legend — Experience = structure · Skin = color · Background = mood */
.ap-legend { margin-top: 10px; border: 1px solid var(--border-soft); border-radius: var(--r-card); background: var(--surface-elevated); padding: 8px 11px; display: flex; flex-direction: column; gap: 5px; }
.apl-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: .78rem; }
.apl-k { display: inline-flex; align-items: center; gap: 5px; color: var(--text-muted); font-weight: 600; white-space: nowrap; }
.apl-k svg { color: var(--primary-accent); }
.apl-v { color: var(--text-primary); font-weight: 600; text-align: right; min-width: 0; }
.apl-v i { font-style: normal; color: var(--text-muted); font-weight: 500; font-size: .7rem; margin-left: 4px; }
.apl-v i.apl-star { color: var(--warning); }
.apl-ok { color: var(--success); display: inline-flex; align-items: center; gap: 3px; }
.apl-warn { color: var(--warning); display: inline-flex; align-items: center; gap: 3px; }
.apl-bad { color: var(--danger); display: inline-flex; align-items: center; gap: 3px; }
.apl-unsaved { color: var(--primary-accent); }

/* danger button (delete confirmations) */
.btn-danger { background: var(--danger); color: #fff; border: 1px solid var(--danger); }
.btn-danger:hover { background: color-mix(in srgb, var(--danger) 86%, #000); border-color: color-mix(in srgb, var(--danger) 86%, #000); }

/* ============================================================
   Typography system  (Settings → Theme & appearance → Typography)
   Production type engine UI: font pairings, searchable role pickers
   with in-typeface previews, scale presets, weights, custom uploads,
   scan suggestions, a real-component preview, warnings & history.
   Built on the existing design tokens; responsive down to phones.
   ============================================================ */
.typ-wrap { display: flex; flex-direction: column; gap: 18px; }
.typ-sub { font-size: .82rem; color: var(--ink-mute); margin: -4px 0 2px; }
.typ-block-h { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 8px; }
.typ-block-h .typ-block-t { font-weight: 650; font-size: .92rem; color: var(--ink); display: flex; align-items: center; gap: 7px; }
.typ-block-h .typ-block-t svg { color: var(--ink-mute); }

/* ---- Font pairing presets ---- */
.typ-pairs { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 10px; }
.typ-pair { text-align: left; padding: 13px 14px; border: 1px solid var(--line); border-radius: var(--r-card); background: var(--surface); cursor: pointer; transition: border-color .15s, box-shadow .15s, transform .12s; display: flex; flex-direction: column; gap: 7px; }
.typ-pair:hover { border-color: color-mix(in srgb, var(--accent) 55%, var(--line)); transform: translateY(-1px); box-shadow: var(--sh-soft); }
.typ-pair.sel { border-color: var(--accent); box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 45%, transparent); }
.typ-pair-prev { font-size: 1.35rem; line-height: 1.05; color: var(--ink); letter-spacing: -.01em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.typ-pair-name { font-weight: 650; font-size: .86rem; color: var(--ink); }
.typ-pair-meta { font-size: .73rem; color: var(--ink-mute); display: flex; flex-direction: column; gap: 1px; }
.typ-pair-fonts { font-size: .73rem; color: var(--ink-soft); }
.typ-pair-use { font-size: .72rem; color: var(--ink-faint); }

/* ---- Role pickers (display / body / accent) ---- */
.typ-roles { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.typ-roles > .typ-role:nth-child(3) { grid-column: 1 / -1; }
.typ-role { border: 1px solid var(--line); border-radius: var(--r-card); background: var(--surface); padding: 13px; display: flex; flex-direction: column; gap: 9px; min-width: 0; }
.typ-role-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.typ-role-label { font-weight: 650; font-size: .85rem; color: var(--ink); }
.typ-role-desc { font-size: .73rem; color: var(--ink-mute); line-height: 1.35; }
.typ-role-prev { font-size: 1.35rem; line-height: 1.15; color: var(--ink); letter-spacing: -.01em; padding: 7px 2px 4px; border-top: 1px dashed var(--line-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* searchable picker (custom popover) */
.typ-picker { position: relative; min-width: 0; }
.typ-picker-btn { width: 100%; display: flex; flex-direction: column; align-items: stretch; gap: 3px; padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--surface-2); cursor: pointer; text-align: left; min-width: 0; }
.typ-pb-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-width: 0; }
.typ-picker-btn:hover { border-color: color-mix(in srgb, var(--accent) 45%, var(--line)); }
.typ-picker-btn .typ-pb-name { font-size: 1rem; font-weight: 600; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.typ-picker-btn .typ-pb-use { font-size: .72rem; color: var(--ink-faint); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.typ-picker-btn svg { color: var(--ink-mute); flex: none; }
.typ-pop { position: absolute; z-index: 60; top: calc(100% + 6px); left: 0; right: 0; min-width: 300px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-card); box-shadow: var(--sh-3); padding: 8px; max-height: 340px; display: flex; flex-direction: column; gap: 8px; }
.typ-pop[hidden] { display: none; }
.typ-pop-search { display: flex; align-items: center; gap: 7px; padding: 7px 9px; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--surface-2); }
.typ-pop-search svg { color: var(--ink-mute); flex: none; }
.typ-pop-search input { border: none; background: none; outline: none; width: 100%; font-size: .88rem; color: var(--ink); }
.typ-cats { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 2px; scrollbar-width: thin; }
.typ-cat { flex: none; padding: 4px 10px; border-radius: var(--pill); border: 1px solid var(--line); background: var(--surface-2); font-size: .73rem; color: var(--ink-soft); cursor: pointer; white-space: nowrap; }
.typ-cat:hover { border-color: color-mix(in srgb, var(--accent) 45%, var(--line)); }
.typ-cat.sel { background: var(--accent); color: var(--on-accent); border-color: var(--accent); font-weight: 600; }
.typ-list { overflow-y: auto; display: flex; flex-direction: column; gap: 2px; padding-right: 2px; }
.typ-group { font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--ink-faint); padding: 8px 8px 3px; position: sticky; top: 0; background: var(--surface); }
.typ-opt { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 9px; border-radius: var(--r-sm); cursor: pointer; border: 1px solid transparent; }
.typ-opt:hover { background: var(--surface-2); }
.typ-opt.sel { background: color-mix(in srgb, var(--accent) 16%, var(--surface)); border-color: color-mix(in srgb, var(--accent) 45%, transparent); }
.typ-opt-main { min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.typ-opt-name { font-size: 1.05rem; line-height: 1.15; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.typ-opt-use { font-size: .7rem; color: var(--ink-mute); }
.typ-opt-tags { display: flex; gap: 5px; flex: none; align-items: center; }
.typ-tag { font-size: .62rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; padding: 2px 6px; border-radius: var(--pill); background: var(--surface-2); color: var(--ink-mute); border: 1px solid var(--line-2); }
.typ-tag.role-display { background: color-mix(in srgb, #2D52E0 14%, var(--surface)); color: #2D52E0; border-color: transparent; }
.typ-tag.role-body { background: color-mix(in srgb, var(--pos) 16%, var(--surface)); color: color-mix(in srgb, var(--pos) 70%, var(--ink)); border-color: transparent; }
.typ-tag.role-accent { background: color-mix(in srgb, #E0A52E 18%, var(--surface)); color: color-mix(in srgb, #E0A52E 72%, var(--ink)); border-color: transparent; }
.typ-tag.role-mono { background: color-mix(in srgb, var(--ink) 8%, var(--surface)); color: var(--ink-soft); }
.typ-tag.deco { background: color-mix(in srgb, var(--warn) 20%, var(--surface)); color: color-mix(in srgb, var(--warn) 72%, var(--ink)); border-color: transparent; }
.typ-list-empty { padding: 14px; text-align: center; color: var(--ink-faint); font-size: .82rem; }

/* ---- weights + style ---- */
.typ-weights { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.typ-wt { padding: 4px 9px; border-radius: var(--pill); border: 1px solid var(--line); background: var(--surface-2); font-size: .72rem; color: var(--ink-soft); cursor: pointer; }
.typ-wt:hover:not(:disabled) { border-color: color-mix(in srgb, var(--accent) 45%, var(--line)); }
.typ-wt.sel { background: var(--accent); color: var(--on-accent); border-color: var(--accent); font-weight: 650; }
.typ-wt:disabled { opacity: .38; cursor: not-allowed; text-decoration: line-through; }
.typ-wt-note { font-size: .72rem; color: var(--ink-faint); }

/* ---- scale presets ---- */
.typ-scales { display: flex; flex-wrap: wrap; gap: 8px; }
.typ-scale { text-align: left; padding: 9px 12px; border: 1px solid var(--line); border-radius: var(--r-card); background: var(--surface); cursor: pointer; display: flex; flex-direction: column; gap: 2px; min-width: 132px; flex: 1 1 132px; }
.typ-scale:hover { border-color: color-mix(in srgb, var(--accent) 45%, var(--line)); }
.typ-scale.sel { border-color: var(--accent); box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 40%, transparent); }
.typ-scale-name { font-weight: 650; font-size: .84rem; color: var(--ink); }
.typ-scale-hint { font-size: .71rem; color: var(--ink-mute); }

/* ---- custom font upload + cards ---- */
.typ-upload { display: flex; align-items: center; gap: 12px; padding: 14px; border: 1.5px dashed var(--line); border-radius: var(--r-card); background: var(--surface-2); }
.typ-upload .typ-up-ic { width: 36px; height: 36px; border-radius: 10px; background: var(--surface); display: grid; place-items: center; color: var(--ink-mute); flex: none; }
.typ-up-main { min-width: 0; }
.typ-up-main b { font-size: .88rem; color: var(--ink); }
.typ-up-main span { display: block; font-size: .74rem; color: var(--ink-mute); }
.typ-cf-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px; }
.typ-cf { border: 1px solid var(--line); border-radius: var(--r-card); background: var(--surface); padding: 14px; display: flex; flex-direction: column; gap: 8px; }
.typ-cf-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
.typ-cf-name { font-weight: 650; font-size: .9rem; color: var(--ink); }
.typ-cf-fam { font-size: .73rem; color: var(--ink-mute); }
.typ-cf-prev { font-size: 1.5rem; line-height: 1.1; color: var(--ink); padding: 6px 0; border-top: 1px dashed var(--line-2); overflow-wrap: anywhere; }
.typ-cf-meta { display: flex; flex-wrap: wrap; gap: 5px; }
.typ-cf-acts { display: flex; gap: 6px; flex-wrap: wrap; }

/* ---- scan suggestion ---- */
.typ-scan { border: 1px solid color-mix(in srgb, var(--accent) 30%, var(--line)); border-radius: var(--r-card); background: color-mix(in srgb, var(--accent) 7%, var(--surface)); padding: 14px; display: flex; flex-direction: column; gap: 12px; }
.typ-scan-rows { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.typ-scan-cell { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-sm); padding: 10px 11px; display: flex; flex-direction: column; gap: 3px; }
.typ-scan-k { font-size: .68rem; text-transform: uppercase; letter-spacing: .05em; color: var(--ink-faint); font-weight: 700; }
.typ-scan-detected { font-size: .82rem; color: var(--ink-soft); }
.typ-scan-match { font-size: 1.15rem; color: var(--ink); line-height: 1.1; }
.typ-conf { display: inline-flex; align-items: center; gap: 6px; font-size: .73rem; color: var(--ink-mute); }
.typ-conf-bar { width: 64px; height: 6px; border-radius: var(--pill); background: var(--surface-2); overflow: hidden; }
.typ-conf-bar i { display: block; height: 100%; background: var(--accent); }
.typ-conf-band { font-weight: 650; }
.typ-conf-band.High { color: color-mix(in srgb, var(--pos) 72%, var(--ink)); }
.typ-conf-band.Medium { color: color-mix(in srgb, #E0A52E 78%, var(--ink)); }
.typ-conf-band.Low { color: var(--ink-mute); }
.typ-scan-acts { display: flex; flex-wrap: wrap; gap: 8px; }

/* ---- warnings (decorative-for-body etc.) ---- */
.typ-warn { display: flex; align-items: flex-start; gap: 9px; padding: 10px 12px; border-radius: var(--r-card); background: var(--warn-bg); border: 1px solid color-mix(in srgb, var(--warn) 34%, var(--surface)); font-size: .8rem; color: color-mix(in srgb, var(--warn) 74%, var(--ink)); }
.typ-warn svg { color: var(--warn); flex: none; margin-top: 1px; }
.typ-warn b { font-weight: 650; }

/* ---- real-component preview gallery ---- */
.typ-preview { border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--canvas); padding: 16px; }
.typ-pv-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.typ-pv { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-card); padding: 14px; min-width: 0; }
.typ-pv.span2 { grid-column: 1 / -1; }
.typ-pv-tag { font-size: .64rem; font-weight: 700; text-transform: uppercase; letter-spacing: .07em; color: var(--ink-faint); margin-bottom: 9px; }
.typ-pv h4 { font-family: var(--font-display); font-weight: var(--font-weight-display); letter-spacing: var(--letter-spacing-tight); line-height: var(--line-height-tight); color: var(--ink); margin: 0; }
.typ-pv .typ-pv-eyebrow { font-family: var(--font-accent); font-size: var(--text-sm); color: var(--ink-mute); letter-spacing: var(--letter-spacing-wide); text-transform: uppercase; }
.typ-pv-card-num { font-family: var(--font-display); font-weight: 700; font-size: var(--text-3xl); letter-spacing: -.02em; color: var(--ink); line-height: 1; }
.typ-pv-card-lbl { font-size: var(--text-sm); color: var(--ink-mute); margin-top: 4px; }
.typ-pv-invoice-h { font-family: var(--font-display); font-weight: 700; font-size: var(--text-2xl); color: var(--ink); }
.typ-pv-invoice-sub { font-size: var(--text-sm); color: var(--ink-mute); }
.typ-pv-amount { font-family: var(--font-display); font-weight: 700; font-size: var(--text-xl); color: var(--ink); font-variant-numeric: tabular-nums; }
.typ-pv-para { font-family: var(--font-body); font-size: var(--text-base); line-height: var(--line-height-relaxed); color: var(--ink-soft); }
.typ-pv-quote { font-family: var(--font-accent); font-size: var(--text-lg); line-height: var(--line-height-normal); color: var(--ink); font-style: italic; }
.typ-pv-welcome { font-family: var(--font-display); font-weight: 700; font-size: var(--text-2xl); color: var(--ink); }
.typ-pv-field { display: flex; flex-direction: column; gap: 5px; }
.typ-pv-field label { font-size: var(--text-sm); font-weight: 600; color: var(--ink-soft); }
.typ-pv-field .typ-pv-input { border: 1px solid var(--line); border-radius: var(--r-sm); padding: 8px 10px; font-family: var(--font-body); font-size: var(--text-base); color: var(--ink-mute); background: var(--surface-2); }
.typ-pv-btn { display: inline-flex; align-items: center; gap: 7px; background: var(--accent); color: var(--on-accent); font-family: var(--font-body); font-weight: 600; font-size: var(--text-base); padding: 9px 16px; border-radius: var(--r-sm); }
.typ-pv-badges { display: flex; gap: 6px; flex-wrap: wrap; }
.typ-pv-badge { font-family: var(--font-accent); font-size: var(--text-xs); font-weight: 600; padding: 3px 10px; border-radius: var(--pill); background: var(--surface-2); color: var(--ink-soft); border: 1px solid var(--line); }
.typ-pv-table { width: 100%; border-collapse: collapse; font-family: var(--font-body); font-size: var(--text-sm); }
.typ-pv-table th { text-align: left; font-weight: 700; color: var(--ink-mute); font-size: var(--text-xs); text-transform: uppercase; letter-spacing: .05em; padding: 6px 8px; border-bottom: 1px solid var(--line); }
.typ-pv-table td { padding: 8px; border-bottom: 1px solid var(--line-2); color: var(--ink-soft); }
.typ-pv-table td b { color: var(--ink); font-weight: 600; }

/* ---- change history ---- */
.typ-hist { display: flex; flex-direction: column; gap: 0; }
.typ-hist-row { display: flex; align-items: center; gap: 10px; padding: 9px 2px; border-bottom: 1px solid var(--line-2); font-size: .82rem; }
.typ-hist-row:last-child { border-bottom: none; }
.typ-hist-kind { font-size: .64rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; padding: 2px 8px; border-radius: var(--pill); flex: none; }
.typ-hist-kind.manual { background: color-mix(in srgb, #2D52E0 14%, var(--surface)); color: #2D52E0; }
.typ-hist-kind.scan { background: color-mix(in srgb, var(--accent) 28%, var(--surface)); color: var(--on-accent); }
.typ-hist-kind.reset { background: color-mix(in srgb, var(--ink) 9%, var(--surface)); color: var(--ink-soft); }
.typ-hist-kind.upload, .typ-hist-kind.remove { background: color-mix(in srgb, #E0A52E 20%, var(--surface)); color: color-mix(in srgb, #E0A52E 74%, var(--ink)); }
.typ-hist-main { min-width: 0; flex: 1; }
.typ-hist-sum { color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.typ-hist-prev { color: var(--ink-faint); font-size: .74rem; }
.typ-hist-meta { font-size: .72rem; color: var(--ink-mute); flex: none; text-align: right; }

/* ============ Responsive — never overflow on tablet / phone ============ */
@media (max-width: 1024px) {
  .typ-pv-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 767px) {
  .typ-pairs { grid-template-columns: 1fr 1fr; }
  .typ-scan-rows { grid-template-columns: 1fr; }
  .typ-pv-grid { grid-template-columns: 1fr; }
  .typ-roles { grid-template-columns: 1fr; }
  .typ-role-prev { font-size: 1.35rem; }
  .typ-pop { position: fixed; left: 12px; right: 12px; top: auto; min-width: 0; max-height: 60vh; }
  .typ-hist-row { flex-wrap: wrap; }
  .typ-hist-meta { width: 100%; text-align: left; }
}
@media (max-width: 420px) {
  .typ-pairs { grid-template-columns: 1fr; }
  .typ-scale { min-width: 100%; }
}

/* ============================================================
   PROPOSAL ENGINE — type picker, editor, package cards, preview
   ============================================================ */

/* Type picker grid (inside modal) */
.prop-type-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.prop-type-card {
  display: flex; flex-direction: column; align-items: flex-start; gap: 3px;
  padding: 12px; border-radius: var(--r); cursor: pointer;
  background: var(--surface-2); border: 1.5px solid var(--line);
  text-align: left; transition: border-color .12s, background .12s;
}
.prop-type-card:hover { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 5%, var(--surface-2)); }
.prop-type-card.on { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 10%, var(--surface-2)); }
.prop-type-card .ptc-ico { color: var(--accent); margin-bottom: 4px; }
.prop-type-card b { font-size: .82rem; font-weight: 700; color: var(--ink); line-height: 1.2; }
.prop-type-card .ptc-desc { font-size: .7rem; color: var(--muted); line-height: 1.3; }

/* Package cards */
.pkg-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; }
.pkg-card {
  position: relative; border-radius: var(--r); padding: 20px;
  background: var(--surface-2); border: 1.5px solid var(--line);
  display: flex; flex-direction: column; gap: 8px;
  transition: border-color .12s, box-shadow .12s;
}
.pkg-card:hover { border-color: var(--accent); }
.pkg-card.recommended { border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 12%, transparent); }
.pkg-card.selected { border-color: var(--success); box-shadow: 0 0 0 3px color-mix(in srgb, var(--success) 14%, transparent); }
.pkg-rec-badge {
  position: absolute; top: -1px; right: 16px;
  background: var(--accent); color: #fff; font-size: .68rem; font-weight: 700;
  padding: 2px 10px; border-radius: 0 0 var(--pill) var(--pill); letter-spacing: .04em;
}
.pkg-tier-badge { align-self: flex-start; margin-bottom: 2px; }
.pkg-name { font-size: 1rem; font-weight: 750; color: var(--ink); }
.pkg-desc { font-size: .82rem; color: var(--muted); line-height: 1.45; }
.pkg-price { font-size: 1.5rem; font-weight: 800; color: var(--ink); margin: 4px 0 0; }
.pkg-period { font-size: .8rem; font-weight: 400; color: var(--muted); }
.pkg-deposit { font-size: .78rem; }
.pkg-delivs { list-style: none; padding: 0; margin: 6px 0 0; display: flex; flex-direction: column; gap: 4px; }
.pkg-delivs li { font-size: .8rem; color: var(--ink-soft); padding-left: 16px; position: relative; }
.pkg-delivs li::before { content: '✓'; position: absolute; left: 0; color: var(--success); font-weight: 700; font-size: .72rem; top: 1px; }
.pkg-addons { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.pkg-addon { font-size: .74rem; background: var(--surface); border: 1px solid var(--line); border-radius: var(--pill); padding: 2px 8px; color: var(--muted); }
.pkg-addon b { color: var(--ink); }
.pkg-select-btn { margin-top: 10px; width: 100%; }
.pkg-select-btn.selected { background: var(--success-bg); color: var(--success); border-color: var(--success); }
.pkg-edit-actions { display: flex; gap: 6px; margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--line); }

/* Proposal editor layout */
.pe-header {
  display: flex; align-items: flex-start; gap: 16px; justify-content: space-between;
  margin-bottom: 16px; padding-bottom: 16px; border-bottom: 1px solid var(--line);
}
.pe-header-left { min-width: 0; flex: 1; }
.pe-title { font-size: 1.4rem; font-weight: 750; margin: 0 0 6px; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pe-header-meta { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.pe-client-link { color: var(--muted); text-decoration: none; }
.pe-client-link:hover { color: var(--accent); }
.pe-header-actions { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.pe-overview { }
.pe-2col { display: grid; grid-template-columns: 1fr 320px; gap: 20px; align-items: start; }
.pe-fields { display: flex; flex-direction: column; gap: 14px; }
.pe-save-row { display: flex; align-items: center; gap: 12px; margin-top: 4px; }
.pe-summary-panel { position: sticky; top: 16px; }
.pe-section-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }

/* Section list in content tab */
.psec-list { display: flex; flex-direction: column; gap: 6px; }
.psec-row { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: var(--r); background: var(--surface-2); border: 1px solid var(--line); }
.psec-row.hidden { opacity: .55; }
.psec-main { flex: 1; min-width: 0; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.psec-main b { font-size: .85rem; }

/* Small stat card variant */
.statc.sm .sc-num.sm { font-size: 1.2rem; font-weight: 700; }
.statc.sm .sc-label { font-size: .68rem; }

/* Tab count badge */
.tab-count { display: inline-flex; align-items: center; justify-content: center; background: var(--line-2); color: var(--muted); font-size: .68rem; font-weight: 700; min-width: 18px; height: 18px; border-radius: var(--pill); padding: 0 5px; margin-left: 4px; }
.seg-chip.on .tab-count { background: color-mix(in srgb, var(--accent) 15%, transparent); color: var(--accent); }

/* btn-pos: accept/success action button */
.btn-pos { background: var(--success-bg); color: var(--success); border: 1.5px solid var(--success); }
.btn-pos:hover { background: var(--success); color: #fff; }
.btn-block { width: 100%; }

/* ============================================================
   PROPOSAL PREVIEW — premium client-facing view
   ============================================================ */
.pv-root { max-width: 900px; margin: 0 auto; }
.pv-admin-bar {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 10px 0 14px; border-bottom: 1px solid var(--line); margin-bottom: 28px;
}
.pv-admin-actions { display: flex; align-items: center; gap: 10px; }

/* Cover */
.pv-cover {
  border-radius: var(--r-lg, 14px); overflow: hidden; margin-bottom: 32px;
  background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 18%, var(--surface-2)), color-mix(in srgb, var(--accent) 6%, var(--surface)));
  border: 1px solid color-mix(in srgb, var(--accent) 20%, var(--line));
  padding: 48px 44px 44px;
}
.pv-cover-inner { max-width: 680px; }
.pv-cover-type { font-size: .78rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--accent); display: flex; align-items: center; gap: 6px; margin-bottom: 14px; }
.pv-title { font-size: 2rem; font-weight: 800; color: var(--ink); margin: 0 0 10px; line-height: 1.2; }
.pv-subtitle { font-size: 1.05rem; color: var(--ink-soft); margin: 0 0 16px; }
.pv-cover-meta { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; font-size: .82rem; color: var(--muted); margin-bottom: 18px; }
.pv-cover-meta span { display: flex; align-items: center; gap: 4px; }
.pv-cover-body { font-size: .92rem; color: var(--ink-soft); line-height: 1.65; margin: 0 0 22px; max-width: 580px; }
.pv-cover-cta { margin-top: 4px; }
.pv-cta-btn { font-size: .95rem; padding: 12px 28px; border-radius: var(--pill); }

/* Content sections */
.pv-content { display: flex; flex-direction: column; gap: 0; }
.pv-section { padding: 32px 0; border-bottom: 1px solid var(--line); }
.pv-section:last-child { border-bottom: none; }
.pv-packages-sec { padding-top: 28px; }
.pv-sec-title { font-size: 1.2rem; font-weight: 750; color: var(--ink); margin: 0 0 14px; }
.pv-sec-body { font-size: .92rem; color: var(--ink-soft); line-height: 1.65; margin: 0; }

/* Package cards in preview — slightly larger */
.pv-pkg-grid { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }

/* Process steps */
.pv-process-steps { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.pv-step { display: flex; align-items: center; gap: 8px; background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--pill); padding: 6px 14px; font-size: .84rem; font-weight: 600; }
.pv-step-num { width: 22px; height: 22px; border-radius: 50%; background: var(--accent); color: #fff; font-size: .72rem; font-weight: 800; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.pv-step-arrow { color: var(--muted); font-size: .9rem; }

/* FAQ */
.pv-faq { display: flex; flex-direction: column; gap: 8px; }
.pv-faq-item { border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; }
.pv-faq-item summary { padding: 12px 16px; cursor: pointer; font-weight: 600; font-size: .88rem; list-style: none; display: flex; justify-content: space-between; }
.pv-faq-item summary::after { content: '+'; color: var(--muted); transition: transform .15s; }
.pv-faq-item[open] summary::after { content: '−'; }
.pv-faq-item p { padding: 0 16px 14px; margin: 0; font-size: .84rem; color: var(--ink-soft); line-height: 1.6; }

/* Accept bar */
.pv-accept-bar {
  position: sticky; bottom: 0; left: 0; right: 0;
  background: color-mix(in srgb, var(--surface) 92%, transparent);
  backdrop-filter: blur(16px) saturate(1.4);
  border-top: 1px solid var(--line); padding: 16px 0;
  margin-top: 32px;
}
.pv-accepted-bar { background: color-mix(in srgb, var(--success-bg) 80%, transparent); }
.pv-accept-inner { max-width: 900px; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.pv-accept-title { font-size: 1rem; font-weight: 700; margin: 0 0 2px; }
.pv-accept-btns { display: flex; align-items: center; gap: 10px; }

/* Proposal list row — clickable */
.prop-list-row { cursor: pointer; }
.prop-list-row:hover { background: var(--surface-2); }

/* Responsive */
@media (max-width: 700px) {
  .prop-type-grid { grid-template-columns: repeat(3, 1fr); }
  .pe-2col { grid-template-columns: 1fr; }
  .pe-summary-panel { position: static; }
  .pv-cover { padding: 28px 20px; }
  .pv-title { font-size: 1.4rem; }
  .pv-accept-inner { flex-direction: column; align-items: flex-start; gap: 10px; }
  .pkg-grid { grid-template-columns: 1fr; }
  .pe-header { flex-direction: column; align-items: flex-start; }
  .pe-header-actions { flex-wrap: wrap; }
}
@media (max-width: 440px) {
  .prop-type-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ============================================================
   POST-ACCEPT WIZARD  (.pa-*)
   ============================================================ */
.pa-wizard { display: flex; flex-direction: column; gap: 18px; }
.pa-auto-section { background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r); padding: 14px 16px; }
.pa-auto-section h4 { font-size: .78rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); margin: 0 0 10px; }
.pa-checks { display: flex; flex-direction: column; gap: 6px; }
.pa-check { display: flex; align-items: center; gap: 8px; font-size: .85rem; font-weight: 600; color: var(--success); }
.pa-check-dim { color: var(--muted); font-weight: 500; }
.pa-tmpl-chip { display: inline-flex; align-items: center; gap: 6px; background: color-mix(in srgb, var(--accent) 10%, transparent); color: var(--accent); border: 1px solid color-mix(in srgb, var(--accent) 25%, transparent); border-radius: var(--pill); padding: 4px 12px; font-size: .8rem; font-weight: 700; }
.pa-divider { height: 1px; background: var(--line); }
.pa-tabs { display: flex; gap: 8px; border-bottom: 1px solid var(--line); padding-bottom: 2px; margin-bottom: 14px; }
.pa-tab-btn { background: none; border: none; border-bottom: 2px solid transparent; padding: 6px 2px; font-size: .86rem; font-weight: 600; color: var(--muted); cursor: pointer; margin-bottom: -3px; transition: color .15s, border-color .15s; }
.pa-tab-btn.on { color: var(--accent); border-bottom-color: var(--accent); }
.pa-tab-pane { display: none; flex-direction: column; gap: 12px; }
.pa-tab-pane.on { display: flex; }
.pa-already-project { text-align: center; padding: 20px 0; color: var(--muted); font-size: .88rem; }
.pa-already-project a { color: var(--accent); }

/* ============================================================
   GROWTH FINDER — Real Map, Split View, Territory Modal, Enrichment
   ============================================================ */

/* Real Google Maps canvas slot */
.gf-map-slot { position: relative; width: 100%; height: 480px; border-radius: var(--r-card); overflow: hidden; background: var(--surface-2); border: 1px solid var(--line); }
.gf-map-slot.split-map { height: 100%; min-height: 420px; border-radius: 0 var(--r-card) var(--r-card) 0; }
.gf-real-map-canvas { width: 100%; height: 100%; }

/* Split view layout */
.gf-split-layout { display: flex; gap: 0; min-height: 520px; border: 1px solid var(--line); border-radius: var(--r-card); overflow: hidden; }
.gf-split-list { width: 380px; min-width: 280px; flex-shrink: 0; overflow-y: auto; padding: 12px; border-right: 1px solid var(--line); background: var(--canvas); }
.gf-split-map-col { flex: 1; min-width: 0; position: relative; }

/* Connect Google Maps CTA inside the fake map */
.gf-map-connect-cta { position: absolute; bottom: 12px; left: 50%; transform: translateX(-50%); background: var(--modal-bg, white); border: 1px solid var(--line); border-radius: var(--pill); padding: 6px 14px; font-size: .75rem; color: var(--muted); white-space: nowrap; pointer-events: all; }
.gf-map-connect-cta a { color: var(--accent); }

/* Split view button */
.gf-view-btn { display: inline-flex; align-items: center; gap: 5px; padding: 5px 10px; border: 1px solid var(--line); border-radius: var(--r-chip); background: var(--surface-2); font-size: .77rem; font-weight: 600; cursor: pointer; color: var(--ink-2); transition: background .15s, color .15s; }
.gf-view-btn.active { background: var(--accent); color: #fff; border-color: var(--accent); }
.gf-view-btn:hover:not(.active) { background: var(--surface-3, var(--surface-2)); }

/* Urgency score colors */
.gf-urgency-band { font-size: .67rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; border-radius: var(--pill); padding: 2px 7px; margin-left: 6px; }
.gf-urgency-band.high { background: color-mix(in srgb, var(--neg) 12%, transparent); color: var(--neg); }
.gf-urgency-band.medium { background: color-mix(in srgb, var(--warn) 12%, transparent); color: var(--warn-text, #b45309); }
.gf-urgency-band.low { background: var(--surface-2); color: var(--muted); }
.gf-score-fill.urgency { background: var(--warn); }
.gf-score-fill.urgency.high { background: var(--neg); }
.gf-score-fill.urgency.low { background: var(--muted); }
.gf-score-num.urgency { color: var(--warn-text, #b45309); }
.gf-score-num.rev { color: var(--pos); }
.gf-score-fill.rev { background: var(--pos); }
.gf-rev-label { font-size: .67rem; font-weight: 700; border-radius: var(--pill); padding: 2px 7px; margin-left: 6px; }
.gf-rev-label.high { background: color-mix(in srgb, var(--pos) 12%, transparent); color: var(--pos); }
.gf-rev-label.med { background: color-mix(in srgb, var(--accent) 10%, transparent); color: var(--accent); }
.gf-rev-label.low { background: var(--surface-2); color: var(--muted); }

/* Enrichment banner */
.gf-enrich-banner { background: color-mix(in srgb, var(--accent) 8%, transparent); border: 1px solid color-mix(in srgb, var(--accent) 25%, transparent); border-radius: 8px; padding: 8px 12px; font-size: .79rem; color: var(--ink-2); display: flex; align-items: center; gap: 8px; margin: 8px 0 0; }
.gf-enrich-banner .btn-link { background: none; border: none; color: var(--accent); font-size: .79rem; font-weight: 600; cursor: pointer; padding: 0; text-decoration: underline; }

/* Google attribution */
.gf-attribution { font-size: .68rem; color: var(--muted); padding: 2px 0 4px; display: flex; align-items: center; gap: 4px; }

/* Territory modal color swatches */
.gft-color-swatch { transition: border .15s, transform .1s; }
.gft-color-swatch:hover { transform: scale(1.15); }
.gft-color-swatch.active { transform: scale(1.1); }

/* Territory card shield badge */
.gf-terr-shield { display: inline-flex; align-items: center; color: var(--accent); margin-left: 4px; }

/* Radius input in search bar */
.gf-radius-input { width: 80px; }

/* Searching spinner state */
.gf-run-search-loading { opacity: .7; pointer-events: none; }

@media (max-width: 768px) {
  .gf-split-layout { flex-direction: column; }
  .gf-split-list { width: 100%; border-right: none; border-bottom: 1px solid var(--line); max-height: 280px; }
  .gf-split-map-col .gf-map-slot { height: 260px; border-radius: 0 0 var(--r-card) var(--r-card); }
}