/* ═══════════════════════════════════════════════════════════════════════
   PROPERTY WORKSPACE — GLASS THEME
   Token overrides — every page that uses the workspace --surface / --ink /
   --coral / --chrome variables auto-switches to glass.
   ═══════════════════════════════════════════════════════════════════════ */

/* ─── LAYER 0 — Atmospheric backdrop behind the tablet ─── */
html, body { background: #1f1a14; }
.app-shell { position: relative; background-color: #2a2520; }
.app-shell::before {
  content: '';
  position: fixed; inset: 0; z-index: 0;
  background:
    linear-gradient(135deg, rgba(35,28,22,0.62), rgba(50,42,35,0.42) 50%, rgba(40,32,25,0.62)),
    url('https://images.unsplash.com/photo-1600596542815-ffad4c1539a9?w=1920&q=80&auto=format') center/cover no-repeat;
  filter: blur(2px) saturate(0.85);
  pointer-events: none;
}
.app-shell > * { position: relative; z-index: 1; }

/* ─── PALETTE TOKEN OVERRIDES ─── */
:root {
  --page: transparent;
  --surface: rgba(255,255,255,0.13);
  --surface-2: rgba(255,255,255,0.10);
  --surface-3: rgba(255,255,255,0.16);
  --surface-warm: rgba(255,255,255,0.08);

  --ink: #f5f3eb;
  --ink-2: rgba(245,243,235,0.85);
  --ink-3: rgba(245,243,235,0.65);
  --ink-4: rgba(245,243,235,0.45);

  --line: rgba(255,255,255,0.14);
  --line-soft: rgba(255,255,255,0.08);
  --line-strong: rgba(255,255,255,0.22);

  --coral: #c1d5e6;
  --coral-hot: #95acc4;
  --coral-warm: #5f7a96;
  --coral-soft: rgba(193,213,230,0.14);
  --coral-line: rgba(193,213,230,0.32);
  --coral-glow: rgba(193,213,230,0.40);

  --chrome: rgba(74,94,120,0.20);
  --chrome-soft: rgba(74,94,120,0.14);
  --chrome-line: rgba(255,255,255,0.12);
  --chrome-line-hi: rgba(255,255,255,0.22);
  --chrome-ink: #ffffff;
  --chrome-ink-2: rgba(255,255,255,0.85);
  --chrome-ink-3: rgba(255,255,255,0.65);

  --ok: #7adfa0;
  --warn: #f4c878;
  --danger: #ff9a8c;
  --info: #c1d5e6;
  --violet: #b8a8e8;
}

/* ─── TABLET BODY — transparent glass + silver-blue glow (replaces hardcoded coral halo) ─── */
.app {
  background: rgba(20,16,12,0.18) !important;
  backdrop-filter: blur(40px) saturate(1.4);
  -webkit-backdrop-filter: blur(40px) saturate(1.4);
  box-shadow:
    0 0 0 1px rgba(255,255,255,0.08),
    0 0 24px rgba(193,213,230,0.30),
    0 0 64px rgba(149,172,196,0.20),
    0 20px 48px -16px rgba(74,94,120,0.35) !important;
}

/* ─── KILL HARDCODED CORAL accents that sneak past the token overrides ─── */

/* Chrome backdrop radial that's hardcoded coral in cream files */
.app-chrome::before,
.sidebar::before,
.main::before {
  background: none !important;
}

/* Brand mark — Property Workspace PNG logo (silver-blue) */
.brand-mark, .brand-icon, .logo-mark {
  background: url('brand-assets/PW_Icon_blue.png') center/contain no-repeat !important;
  box-shadow: none !important;
}
.brand-mark::before, .brand-mark::after,
.brand-icon::before, .brand-icon::after { display: none !important; }

/* Login button conic ring + avatar */
.login-btn::before, .ch-avatar::before {
  background: conic-gradient(from 0deg,
    rgba(193,213,230,0.30) 0deg, rgba(193,213,230,1) 70deg,
    rgba(149,172,196,0.95) 110deg, rgba(95,122,150,0.50) 170deg,
    rgba(193,213,230,0.30) 230deg, rgba(193,213,230,0.30) 360deg) !important;
}
.login-btn .av, .ch-avatar::after {
  background: linear-gradient(135deg, #c1d5e6, #95acc4) !important;
}

/* Any element using hardcoded coral background — common patterns */
[style*="rgba(255,92,92"], [style*="rgba(255, 92, 92"],
[style*="#FF5C5C"], [style*="#ff5c5c"] {
  background: linear-gradient(135deg, #c1d5e6, #95acc4) !important;
}

/* ─── CHROME bars ─── */
.app-chrome {
  background: rgba(74,94,120,0.20) !important;
  backdrop-filter: blur(14px) saturate(1.3);
  -webkit-backdrop-filter: blur(14px) saturate(1.3);
  border-bottom: 1px solid rgba(255,255,255,0.10) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.18) !important;
}
.app-chrome::before { display: none !important; }

.sidebar {
  background: rgba(74,94,120,0.16) !important;
  backdrop-filter: blur(14px) saturate(1.3);
  -webkit-backdrop-filter: blur(14px) saturate(1.3);
  border-right: 1px solid rgba(255,255,255,0.08) !important;
  box-shadow: inset 1px 0 0 rgba(255,255,255,0.14) !important;
}
.sidebar::before { display: none !important; }

.main { background: transparent !important; }

/* ─── CARDS — frosted glass on every common surface ─── */
.dc, .pia-card, .prop-card, .doc-card, .team-card, .notes-card,
.client-header, .pipeline-card, .pipe-progress, .data-card, .wf-card,
.tc, .card, .surface, .panel, .pl-card, .section-body,
.section-header, .tile, .row-card, .add-prop-card, .scroll-add,
.client-card, .client-row, .empty-state, .stat-card,
.suburb-card, .layout-card, .signup-card {
  background: var(--surface) !important;
  backdrop-filter: blur(20px) saturate(1.3);
  -webkit-backdrop-filter: blur(20px) saturate(1.3);
  border: 1px solid rgba(255,255,255,0.16) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.30),
    inset 0 -1px 0 rgba(74,94,120,0.06),
    0 12px 30px -14px rgba(74,94,120,0.35),
    0 2px 5px -2px rgba(74,94,120,0.15) !important;
}

/* ─── TEXT VISIBILITY ─── */
body, .main { color: var(--ink); }

h1, h2, h3, h4, .h, .name, .title, .pia-h, .prop-h, .doc-h, .team-h,
.dc-h, .ph-name, .pia-value, .prop-price, .ch-name, .dc-value,
.section-title, .stat-value, .card-h, .pp-v, .card-title, .pl-current em,
.client-name, .row-title { color: #ffffff !important; }

.dim, .meta, .sub, .label, .field-l, .pp-l, .pp-link, .dc-edit,
.pf-meta, .doc-meta, .pt-l, .prop-meta, .team-meta, .pia-name,
.pia-sub, .pia-foot, .ch-meta, .crumb, .col-aside, .helper, .small,
.form-help, .field-help, .row-meta, .client-meta, .s-ct, .sa-s {
  color: rgba(245,243,235,0.68) !important;
}

.ch-meta strong, .meta strong, .sub strong { color: #ffffff !important; font-weight: 600 !important; }
input::placeholder, textarea::placeholder { color: rgba(245,243,235,0.42) !important; }

/* ─── BRAND / NAV / CRUMB ─── */
.brand-name { color: #ffffff !important; }
.brand-name .ac { color: #c1d5e6 !important; }
.page-crumb, .page-crumb a { color: #ffffff !important; }
.page-crumb .dim, .page-crumb .sep { color: rgba(255,255,255,0.55) !important; }
.nav-item { color: rgba(255,255,255,0.70) !important; }
.nav-item:hover { color: #ffffff !important; background: rgba(255,255,255,0.06) !important; }
.nav-item.is-active {
  color: #ffffff !important;
  background: linear-gradient(180deg, rgba(193,213,230,0.20) 0%, rgba(193,213,230,0.08) 100%) !important;
  border-color: rgba(193,213,230,0.30) !important;
  box-shadow: inset 0 0 0 1px rgba(193,213,230,0.32) !important;
}
.nav-item.is-active svg, .nav-item.is-active .nav-ic { color: #c1d5e6 !important; }
.cmd-k { background: rgba(255,255,255,0.08) !important; border: 1px solid rgba(255,255,255,0.16) !important; color: rgba(255,255,255,0.70) !important; }

/* ─── PIPELINE TRACK ─── */
.pl-label { color: rgba(245,243,235,0.62) !important; }
.pl-step.done .pl-label { color: rgba(245,243,235,0.88) !important; }
.pl-step.current .pl-label { color: #ffffff !important; font-weight: 600 !important; }
.pl-sub { color: rgba(245,243,235,0.62) !important; }
.pl-step.done .pl-node, .pl-step.current .pl-node {
  background: #5f7a96 !important;
  border-color: #5f7a96 !important;
  color: #ffffff !important;
}
.pl-step.upcoming .pl-node {
  background: #95acc4 !important;
  border: 1.5px solid rgba(255,255,255,0.30) !important;
  box-shadow: 0 2px 6px rgba(74,94,120,0.30) !important;
}
.pl-step.upcoming .pl-node .num { color: rgba(255,255,255,0.85) !important; }
.pl-step::after { background: rgba(255,255,255,0.18) !important; }
.pl-step.done::after { background: rgba(193,213,230,0.55) !important; }
/* Connector line should sit BEHIND the nodes (already does via z-index) — extra safety */
.pl-step .pl-node { position: relative; z-index: 2; }

/* ─── METRIC TILES ─── */
.pia-metric, .stat-tile {
  background: rgba(255,255,255,0.08) !important;
  border-color: rgba(255,255,255,0.16) !important;
}
.pia-metric .pm-l, .stat-tile .label { color: rgba(245,243,235,0.68) !important; }
.pia-metric .pm-v, .stat-tile .value { color: #ffffff !important; }
.pia-metric .pm-v.pos, .stat-tile .value.pos { color: #7adfa0 !important; }
.pia-metric .pm-v.neg, .stat-tile .value.neg { color: #ff9a8c !important; }

/* ─── TAGS / BADGES / PILLS — uniform white-translucent ─── */
.tag, .dc-value .tag, .pp-tag, .badge, .pill, .chip, .ch-badge,
.s-ct, .pia-status, .pia-badge, .doc-tag, .row-tag {
  color: #ffffff !important;
  background: rgba(255,255,255,0.16) !important;
  border: 1px solid rgba(255,255,255,0.28) !important;
  font-weight: 600 !important;
}
.pia-status.go, .pill.is-on, .badge.is-on, .pia-badge.is-pursuing,
.pill.green, .badge.green {
  color: #7adfa0 !important;
  background: rgba(122,223,160,0.12) !important;
  border-color: rgba(122,223,160,0.30) !important;
}
.pill.amber, .badge.amber, .row-tag.amber {
  color: #f4c878 !important;
  background: rgba(244,200,120,0.14) !important;
  border-color: rgba(244,200,120,0.32) !important;
}
.pill.blue, .badge.blue { color: #c1d5e6 !important; background: rgba(193,213,230,0.14) !important; border-color: rgba(193,213,230,0.32) !important; }

/* ─── BUTTONS ─── */
.btn-primary, .add-btn.coral, .primary-btn {
  background: #c1d5e6 !important;
  color: #1a2030 !important;
  border: 1px solid rgba(193,213,230,0.50) !important;
  box-shadow: 0 6px 18px -4px rgba(193,213,230,0.30) !important;
}
.btn-primary:hover, .add-btn.coral:hover, .primary-btn:hover {
  background: #95acc4 !important; color: #ffffff !important;
}
.add-btn, .btn, .btn-ghost, .act-btn, .ghost-btn {
  background: rgba(255,255,255,0.12) !important;
  color: #ffffff !important;
  border: 1px solid rgba(255,255,255,0.22) !important;
}
/* Dark-fill action buttons (Advance to ___) — match the "+ New PIA" glass style for uniformity */
.pl-advance, .primary-action {
  background: rgba(255,255,255,0.12) !important;
  color: #ffffff !important;
  border: 1px solid rgba(255,255,255,0.22) !important;
  box-shadow: 0 6px 16px -6px rgba(74,94,120,0.30) !important;
}
.pl-advance:hover, .primary-action:hover {
  background: rgba(255,255,255,0.20) !important;
  border-color: rgba(255,255,255,0.40) !important;
}
.pl-advance .ico {
  background: rgba(255,255,255,0.20) !important;
  color: #ffffff !important;
}
.add-btn:hover, .btn:hover, .btn-ghost:hover, .act-btn:hover, .ghost-btn:hover {
  background: rgba(255,255,255,0.20) !important;
  border-color: rgba(255,255,255,0.40) !important;
}

/* ─── ICONS — silver-blue accent for utility icons ─── */
.pia-ic, .doc-ic, .dc-ic, .pp-ic, .prop-ic, .nav-ic, .stat-ic {
  background: linear-gradient(135deg, rgba(193,213,230,0.22), rgba(149,172,196,0.16)) !important;
  border: 1px solid rgba(193,213,230,0.30) !important;
  color: #c1d5e6 !important;
}
.pia-ic svg, .doc-ic svg, .dc-ic svg, .pp-ic svg, .prop-ic svg,
.nav-ic svg, .stat-ic svg { color: #c1d5e6 !important; stroke: #c1d5e6 !important; }
.act-btn svg, .btn svg { color: currentColor !important; }
.tc-detail svg { color: rgba(193,213,230,0.80) !important; stroke: rgba(193,213,230,0.80) !important; }

/* ─── INPUTS ─── */
input[type="text"], input[type="search"], input[type="email"], input[type="tel"],
input[type="number"], textarea, select, .input, .field input, .search-input,
.notes-box {
  background: rgba(255,255,255,0.08) !important;
  border: 1px solid rgba(255,255,255,0.18) !important;
  color: #f5f3eb !important;
  caret-color: #c1d5e6 !important;
}
input:focus, textarea:focus, select:focus {
  background: rgba(255,255,255,0.14) !important;
  border-color: rgba(193,213,230,0.50) !important;
  box-shadow: 0 0 0 4px rgba(193,213,230,0.12) !important;
}

/* ─── TABLES ─── */
table { color: var(--ink); }
th { color: rgba(245,243,235,0.65) !important; background: transparent !important; }
td, tr { border-color: rgba(255,255,255,0.08) !important; }
tbody tr:hover { background: rgba(255,255,255,0.04) !important; }

/* ─── DIVIDERS ─── */
.dc-row, .doc-row, .pp-row, .team-member, hr, .divider {
  border-color: rgba(255,255,255,0.08) !important;
}

/* ─── PIPE SECTION HEADER BANDS — clients-list (Prospective / Pipeline / Rebook / Settled / Cancelled) ─── */
.pipe-section > summary {
  background: rgba(255,255,255,0.06) !important;
  color: #ffffff !important;
  border-bottom: 1px solid rgba(255,255,255,0.08) !important;
}
.pipe-section > summary:hover { background: rgba(255,255,255,0.12) !important; }
.pipe-section[data-stage="prospective"] > summary { background: rgba(106,143,213,0.22) !important; }
.pipe-section[data-stage="prospective"] > summary:hover { background: rgba(106,143,213,0.32) !important; }
.pipe-section[data-stage="pipeline"] > summary { background: rgba(76,177,85,0.22) !important; }
.pipe-section[data-stage="pipeline"] > summary:hover { background: rgba(76,177,85,0.32) !important; }
.pipe-section[data-stage="rebook"] > summary { background: rgba(217,165,59,0.22) !important; }
.pipe-section[data-stage="rebook"] > summary:hover { background: rgba(217,165,59,0.32) !important; }
.pipe-section[data-stage="settled"] > summary { background: rgba(76,177,85,0.22) !important; }
.pipe-section[data-stage="settled"] > summary:hover { background: rgba(76,177,85,0.32) !important; }
.pipe-section[data-stage="cancelled"] > summary { background: rgba(255,255,255,0.05) !important; }
.pipe-section[data-stage="cancelled"] > summary:hover { background: rgba(255,255,255,0.12) !important; }
/* Stage title + count + sub copy all readable white-cream */
.pipe-section > summary,
.pipe-section > summary *,
.pipe-section .stage-name,
.pipe-section .stage-count,
.pipe-section .stage-sub { color: #ffffff !important; }
.pipe-section .stage-sub { color: rgba(255,255,255,0.78) !important; }
.pipe-section .stage-count {
  background: rgba(255,255,255,0.22) !important;
  color: #ffffff !important;
  border: 1px solid rgba(255,255,255,0.30) !important;
}

/* Sidebar active item label + count visibility */
.nav-item .label, .nav-item .count, .nav-item span { color: inherit !important; }
.nav-item.is-active .label, .nav-item.is-active .count, .nav-item.is-active span { color: #ffffff !important; }
.nav-item .count {
  background: rgba(255,255,255,0.12) !important;
  color: rgba(255,255,255,0.85) !important;
  border: 1px solid rgba(255,255,255,0.18) !important;
}
.nav-item.is-active .count {
  background: rgba(193,213,230,0.30) !important;
  color: #ffffff !important;
  border-color: rgba(193,213,230,0.55) !important;
}

/* ─── BANNERS / SUGGESTIONS ─── */
.suggested, .alert, .banner, .info-banner {
  background: rgba(193,213,230,0.10) !important;
  border-color: rgba(193,213,230,0.28) !important;
  color: #f5f3eb !important;
}
.suggested strong, .alert strong, .banner strong { color: #c1d5e6 !important; }

/* ─── SUBURB PROFILE cover cards — hardcoded theme gradients → glass ─── */
.pf-cover, .pf-cover.theme-1, .pf-cover.theme-2, .pf-cover.theme-3,
.pf-cover.theme-4, .pf-cover.theme-5, .pf-cover.theme-6 {
  background: linear-gradient(135deg, rgba(193,213,230,0.35), rgba(95,122,150,0.55)) !important;
  color: #ffffff !important;
}
.pf-cover::before, .pf-cover::after { display: none !important; }

/* ─── PROPERTIES page — photo fallback (no image) reads as silver-blue glass ─── */
.prop-photo {
  background: linear-gradient(135deg, rgba(193,213,230,0.18), rgba(95,122,150,0.35)) !important;
}
.prop-photo .invest-tag.smsf { background: rgba(193,213,230,0.92) !important; color: #1a2030 !important; }
.prop-photo .invest-tag.personal { background: rgba(255,255,255,0.85) !important; color: #1a2030 !important; }
.prop-photo .price-tag { background: rgba(74,94,120,0.65) !important; color: #ffffff !important; }

/* ─── Kill ALL pseudo-element coral radial glows on chrome/sidebar/aside ─── */
.sidebar::before, .app-chrome::before, .main::before,
.rs-feature::before, .serv-results::before { background: none !important; }

/* ─── BANNERS using hardcoded coral gradients ─── */
.banner {
  background: linear-gradient(135deg, rgba(193,213,230,0.10), rgba(149,172,196,0.06)) !important;
  border-color: rgba(193,213,230,0.30) !important;
}
.banner-ic {
  background: linear-gradient(135deg, #c1d5e6, #95acc4) !important;
  color: #1a2030 !important;
}

/* ─── SIGNUP page — left preview pane ─── */
.preview-pane, .left-preview, .signup-preview, .pitch-card, .signup-side {
  background: rgba(255,255,255,0.06) !important;
  backdrop-filter: blur(18px) saturate(1.3);
  border: 1px solid rgba(255,255,255,0.14) !important;
}
.preview-bar, .pia-walkthrough-bar, [class*="walkthrough"] {
  background: linear-gradient(90deg, rgba(193,213,230,0.40), rgba(149,172,196,0.30)) !important;
  color: #ffffff !important;
}

/* ─── PROPERTIES PAGE — 3 targeted fixes ─── */
/* 1. Search input transparent inside the search pill */
.search-inline input { background: transparent !important; border: none !important; outline: none !important; box-shadow: none !important; color: #ffffff !important; }
.search-inline input::placeholder { color: rgba(255,255,255,0.50) !important; }
/* 2. Property card type-tag (HOUSE/LAND/UNIT) — dark glass pill with white text */
.prop-photo .type-tag, .type-tag { background: rgba(255,255,255,0.12) !important; color: #ffffff !important; border: 1px solid rgba(255,255,255,0.20) !important; }
/* 3. Property card investor tags — silver-blue family (no orange) */
.prop-photo .invest-tag.smsf, .invest-tag.smsf,
.prop-photo .invest-tag.personal, .invest-tag.personal,
.prop-photo .invest-tag.both, .invest-tag.both {
  background: rgba(255,255,255,0.12) !important;
  color: #ffffff !important;
  border: 1px solid rgba(255,255,255,0.20) !important;
}

/* Suburb Profiles state filter pill — active "All/QLD/NSW…" was var(--ink) = cream in glass = invisible */
.state-pill.is-on, .mode-btn.is-on {
  background: #4a5e78 !important;
  color: #ffffff !important;
  border-color: #4a5e78 !important;
}

/* Loan Serviceability primary actions (Save to Client / Save scenario) — were var(--ink) cream bg = invisible.
   Use the established .act-btn glass pill pattern Mitch approved. */
.cta-btn, .modal-btn.is-primary {
  background: rgba(255,255,255,0.12) !important;
  color: #ffffff !important;
  border: 1px solid rgba(255,255,255,0.22) !important;
}
.cta-btn:hover, .modal-btn.is-primary:hover {
  background: rgba(255,255,255,0.20) !important;
  border-color: rgba(255,255,255,0.40) !important;
}

/* ─── FLOW WIZARD pages (add-client-flow, add-property) — primary CTA + coral halo ─── */
.cta {
  background: #4a5e78 !important;
  color: #ffffff !important;
  border-color: #4a5e78 !important;
}
.cta:hover {
  background: #5f7a96 !important;
}
.flow-app, .live-card {
  box-shadow:
    0 0 0 1px rgba(255,255,255,0.06),
    0 0 24px rgba(193,213,230,0.30),
    0 0 64px rgba(149,172,196,0.20),
    0 20px 48px -16px rgba(0,0,0,0.45) !important;
}
.flow-top::before, .flow-aside::before, .flow-aside::after { background: none !important; display: none !important; }

/* ─── SIGNUP / ONBOARDING flows — make primary CTA + placeholder pills visible ─── */
.btn-continue {
  background: #4a5e78 !important;
  color: #ffffff !important;
  border-color: #4a5e78 !important;
}
.btn-continue:hover {
  background: #5f7a96 !important;
  border-color: #5f7a96 !important;
  box-shadow: 0 12px 32px rgba(193,213,230,0.30) !important;
}
.slide-media .placeholder-note {
  background: rgba(255,255,255,0.10) !important;
  color: rgba(245,243,235,0.85) !important;
  border: 1px dashed rgba(255,255,255,0.22) !important;
}

/* ─── DASHBOARD pipeline snapshot ─── */
/* Line centered through node middles */
.pipeline-track::before { top: 46px !important; background: rgba(255,255,255,0.18) !important; }
/* Solid (non-transparent) circles using palette silver-blue */
.p-node {
  background: #5f7a96 !important;
  border: 2px solid #c1d5e6 !important;
}
.p-node::after { background: #c1d5e6 !important; }

/* ─── DASHBOARD nudge cards — remove orange/red borders, keep silver-blue + green only ─── */
.nudge-card { border-left-color: #c1d5e6 !important; }       /* default (was coral) → light silver-blue */
.nudge-card.warn { border-left-color: #95acc4 !important; }  /* was amber → mid silver-blue */
.nudge-card.info { border-left-color: #5f7a96 !important; }  /* was blue → deeper silver-blue */
.nudge-card.ok { border-left-color: #7adfa0 !important; }    /* keep green (in palette) */
.nudge-cta { color: #c1d5e6 !important; }                    /* CTA link was coral */

/* ─── DASHBOARD action icons — remove orange/red, keep silver-blue + green ─── */
.action-ic.coral { background: rgba(193,213,230,0.18) !important; }
.action-ic.coral svg { color: #c1d5e6 !important; }
.action-ic.warn { background: rgba(149,172,196,0.18) !important; }
.action-ic.warn svg { color: #95acc4 !important; }
.action-ic.ok { background: rgba(122,223,160,0.14) !important; }
.action-ic.ok svg { color: #7adfa0 !important; }

/* ─── DASHBOARD KPI delta — negative was coral red ─── */
.kpi-delta.neg { color: #c1d5e6 !important; }

/* ─── PROPERTY PRESENTATION toggle pills (Extra repayments + year horizon) ─── */
.extra-toggle button.is-on, .yr-pill.is-on {
  background: #4a5e78 !important;
  color: #ffffff !important;
  box-shadow: 0 3px 8px -2px rgba(0,0,0,0.30) !important;
}

/* ─── AUDIT SWEEP: catch-all overrides for classes that use background: var(--ink) and become cream-on-cream invisible in glass ─── */
/* Pills, chips, action counts, toggles — uniform glass-pill style */
.action-count, .add-btn, .btn-primary, .build-cta, .check-row, .drawer-pill,
.f-chip, .filter-chip, .legend-row, .linked-avs, .pill, .s-kpi, .slide-item,
.slider-cell, .state-pill, .sw, .tile-points, .tile-start, .toast,
.wf-btn, .wf-toast, .btn-secondary {
  background: rgba(255,255,255,0.12) !important;
  color: #ffffff !important;
  border: 1px solid rgba(255,255,255,0.22) !important;
}
.action-count:hover, .add-btn:hover, .btn-primary:hover, .build-cta:hover,
.f-chip:hover, .filter-chip:hover, .pill:hover, .state-pill:hover, .wf-btn:hover {
  background: rgba(255,255,255,0.20) !important;
  border-color: rgba(255,255,255,0.40) !important;
}
/* Walk section container (PIA section) — glass surface, not solid cream */
.walk-section {
  background: transparent !important;
  border: none !important;
}

/* ─── TEAM page — Read-only role pill was hardcoded amber/orange ─── */
.role-pill.viewer {
  background: rgba(255,255,255,0.10) !important;
  color: rgba(245,243,235,0.85) !important;
  border: 1px solid rgba(255,255,255,0.30) !important;
}
.role-pill.senior {
  background: rgba(193,213,230,0.14) !important;
  color: #c1d5e6 !important;
  border: 1px solid rgba(193,213,230,0.40) !important;
}
.role-pill.manager {
  background: rgba(122,223,160,0.14) !important;
  color: #7adfa0 !important;
  border: 1px solid rgba(122,223,160,0.40) !important;
}
.role-pill.agent {
  background: rgba(255,255,255,0.08) !important;
  color: rgba(245,243,235,0.85) !important;
  border: 1px solid rgba(255,255,255,0.22) !important;
}

/* ─── PROPERTY PRESENTATION step circles — make all SOLID (correct class is .m-node) ─── */
.m-node {
  background: #5f7a96 !important;
  border: 2px solid rgba(255,255,255,0.40) !important;
  box-shadow: 0 2px 8px rgba(0,0,0,0.35) !important;
  color: #ffffff !important;
}
.m-step .num { color: #ffffff !important; }
.m-step.is-done .m-node {
  background: #c1d5e6 !important;
  border-color: #c1d5e6 !important;
  color: #1a2030 !important;
}
.m-step.is-active .m-node {
  background: #c1d5e6 !important;
  border-color: #c1d5e6 !important;
  box-shadow: 0 0 0 5px rgba(193,213,230,0.18), 0 4px 14px rgba(193,213,230,0.45) !important;
}
.m-step.is-active .m-node .dot { background: #1a2030 !important; }
.m-step::after { background: rgba(255,255,255,0.20) !important; }
.m-step.is-done::after { background: #c1d5e6 !important; }
.m-label { color: rgba(245,243,235,0.65) !important; }
.m-step.is-active .m-label { color: #ffffff !important; font-weight: 600; }
.m-step.is-done .m-label { color: rgba(245,243,235,0.85) !important; }

/* ─── PROPERTY PRESENTATION — brighter greens for readability (cf-mv.pos + .pos class) ─── */
.cf-mv.pos, .pos, .ps-v.pos, [class*="pos"] {
  color: #7adfa0 !important;
}
.cf-mv.neg, .neg, .ps-v.neg {
  color: #ff9a8c !important;
}

/* ─── PROPERTY PRESENTATION sidebar collapse in meeting mode (icon-only) ─── */
.app-shell.is-meeting .sidebar .nav-item .label,
.app-shell.is-meeting .sidebar .brand-name,
.app-shell.is-meeting .sidebar .nav-item .count,
.app-shell.is-meeting .sidebar .nav-item .ct {
  display: none !important;
}
.app-shell.is-meeting .sidebar { padding: 22px 10px 18px !important; }
.app-shell.is-meeting .app-body { grid-template-columns: 64px 1fr !important; }
.app-shell.is-meeting .sidebar .nav-item { justify-content: center !important; padding: 9px 10px !important; }

/* ─── PROPERTY MEETING comprehensive fixes ─── */
/* Cream-bg buttons (Run PIA now, + Run a new PIA, Open meeting, build-cta, review-cta, empty-cta) */
.run-pia, .check-row .run-pia,
.open-meeting, button.open-meeting,
.build-cta, .review-cta, .empty-cta,
.add-btn, button.add-btn,
.eoi-send-btn,
.modal-btn.is-primary,
.cta-btn, .drawer-apply, .pl-advance, .prop-open {
  background: rgba(255,255,255,0.12) !important;
  color: #ffffff !important;
  border: 1px solid rgba(255,255,255,0.22) !important;
  box-shadow: 0 6px 16px -6px rgba(0,0,0,0.30) !important;
}
.run-pia:hover, .open-meeting:hover, .build-cta:hover, .review-cta:hover,
.empty-cta:hover, .add-btn:hover, .eoi-send-btn:hover,
.modal-btn.is-primary:hover, .cta-btn:hover, .drawer-apply:hover,
.pl-advance:hover, .prop-open:hover {
  background: rgba(255,255,255,0.20) !important;
  border-color: rgba(255,255,255,0.40) !important;
}

/* Step segment red glow on the active number ".seg.is-current .dot" — was rgba(255,92,92,0.15) coral ring */
.seg .dot, .seg.is-current .dot {
  box-shadow: 0 0 0 4px rgba(193,213,230,0.18) !important;
}

/* Avatar circles using hardcoded peach/cream/coral backgrounds — unify to silver-blue gradient */
.av, .av-1, .av-2, .av-3, .av-4, .av-5,
.client-card .av, .meeting-card .av {
  background: linear-gradient(135deg, #c1d5e6 0%, #95acc4 60%, #5f7a96 100%) !important;
  color: #ffffff !important;
}

/* ─── PROPERTY MEETING .picker-search — inner <input> background+border was leaking through the parent pill ─── */
.picker-search input, .picker-search input[type="text"], .picker-search input[type="search"] {
  background: transparent !important;
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
  color: #ffffff !important;
}
.picker-search input::placeholder { color: rgba(255,255,255,0.50) !important; }

/* ─── LOAN SERVICEABILITY .rs-feature card (SMSF mode "$745k Max purchase price") ─── */
.rs-feature {
  background: rgba(255,255,255,0.13) !important;
  background-image: none !important;
  border: 1px solid rgba(255,255,255,0.16) !important;
  color: #ffffff !important;
  backdrop-filter: blur(20px) saturate(1.3);
  -webkit-backdrop-filter: blur(20px) saturate(1.3);
}
.rs-feature * { color: inherit !important; }
.rs-feature .rs-label, .rs-feature .rs-sub, .rs-feature .rs-meta,
.rs-feature [class*="label"], .rs-feature [class*="sub"], .rs-feature [class*="meta"] {
  color: rgba(245,243,235,0.75) !important;
}

/* ─── SCROLLBARS ─── */
* { scrollbar-color: rgba(255,255,255,0.20) transparent; }
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.20); border-radius: 100px; }
::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,0.32); }
::-webkit-scrollbar-track { background: transparent; }

/* ─── SIGNUP STEP 1 batch fixes — atmospheric bg + pill inputs + glass continue btn + real previews + match brand font size ─── */

/* Signup pages have NO .app-shell wrapper — the body is the layout root.
   Force body to use the same atmospheric backdrop as workspace pages,
   and KILL the coral red radial that body::before was emitting. */
html:has(.carousel), html:has(.btn-continue), html:has(.flow-app), html:has(.flow-stage),
body[data-pwsignup], html:has(body[data-pwsignup]) { background: #1f1a14 !important; }

body:has(.carousel), body:has(.btn-continue), body:has(.flow-app), body:has(.flow-stage),
body[data-pwsignup] {
  background: #1f1a14 !important;
  position: relative !important;
  isolation: isolate;
}

body:has(.carousel)::before, body:has(.btn-continue)::before,
body:has(.flow-app)::before, body:has(.flow-stage)::before,
body[data-pwsignup]::before {
  content: '' !important;
  position: fixed !important; inset: 0 !important; z-index: -1 !important;
  background:
    linear-gradient(135deg, rgba(35,28,22,0.62), rgba(50,42,35,0.42) 50%, rgba(40,32,25,0.62)),
    url('https://images.unsplash.com/photo-1600596542815-ffad4c1539a9?w=1920&q=80&auto=format') center/cover no-repeat !important;
  filter: blur(2px) saturate(0.85) !important;
  pointer-events: none !important;
}

body:has(.carousel)::after, body:has(.btn-continue)::after,
body:has(.flow-app)::after, body:has(.flow-stage)::after,
body[data-pwsignup]::after { display: none !important; background: none !important; }

/* Belt-and-braces: ALSO kill any coral pseudo on the signup form/side panels */
.signup-side::before, .signup-side::after,
.signup-form::before, .signup-form::after,
.layout::before, .layout::after,
.app::before, .app::after { background: none !important; display: none !important; }

/* Match the brand wordmark font size to canonical 15px (was 17px on signup) */
.brand-name, .sb-brand { font-size: 15px !important; }

/* (brand-name size override moved above) */

/* ─── SIGNUP carousel arrows — were cream-on-white invisible ─── */
.carousel-arrow {
  background: rgba(255,255,255,0.12) !important;
  border: 1px solid rgba(255,255,255,0.28) !important;
  color: #ffffff !important;
  font-size: 18px !important;
  font-weight: 600 !important;
}
.carousel-arrow:hover {
  background: rgba(255,255,255,0.22) !important;
  border-color: rgba(255,255,255,0.50) !important;
  color: #ffffff !important;
}

/* ─── SIGNUP step 5 — email chip remove (✕) was hardcoded coral red ─── */
.chip-x {
  background: rgba(255,255,255,0.14) !important;
  color: rgba(245,243,235,0.85) !important;
}
.chip-x:hover {
  background: rgba(255,255,255,0.30) !important;
  color: #ffffff !important;
}

/* ─── SIGNUP step 6 — consent toggle had hardcoded coral red glow when checked ─── */
.toggle input:checked ~ .toggle-track {
  background: linear-gradient(135deg, #c1d5e6 0%, #95acc4 100%) !important;
  box-shadow: 0 0 12px rgba(193,213,230,0.40) !important;
}

/* ─── ADD CLIENT FLOW — remaining coral elements ─── */
/* Progress fill bar at top */
.fill, .progress-fill { background: linear-gradient(90deg, #c1d5e6, #95acc4) !important; }
/* Circular icon next to "BUILDING LIVE" */
.cc-icon { background: linear-gradient(135deg, #c1d5e6, #95acc4) !important; color: #1f2937 !important; }

/* ─── ADD CLIENT FLOW — match workspace theme exactly (white-translucent glass over atmospheric photo) ─── */
.flow-app {
  background: rgba(255,255,255,0.13) !important;
  border: 1px solid rgba(255,255,255,0.16) !important;
  backdrop-filter: blur(20px) saturate(1.3) !important;
  -webkit-backdrop-filter: blur(20px) saturate(1.3) !important;
}
.flow-stage {
  background: transparent !important;
  border: none !important;
}
.flow-top {
  background: rgba(255,255,255,0.08) !important;
  border-color: rgba(255,255,255,0.12) !important;
}
/* Right preview column — visibly darker than the left form area */
.flow-aside {
  background: rgba(0,0,0,0.28) !important;
  border-color: rgba(255,255,255,0.10) !important;
}
.flow-app, .flow-stage, .flow-top, .flow-aside {
  color: #f5f3eb !important;
}

/* KILL the glowing peach orb on the New client live-card avatar (.lc-avatar::before had a coral conic-gradient) */
.lc-avatar::before, .lc-avatar.is-empty::before {
  background: conic-gradient(rgba(193,213,230,0.30) 0deg, rgb(193,213,230) 70deg, rgba(149,172,196,0.95) 110deg, rgba(95,122,150,0.50) 170deg, rgba(193,213,230,0.30) 230deg, rgba(193,213,230,0.30) 360deg) !important;
}

/* ─── PROPERTY PRESENTATION — Edit button (.walk-edit) active state was cream-on-cream invisible ─── */
.walk-h .walk-edit {
  border: 1px solid rgba(255,255,255,0.22) !important;
  color: rgba(245,243,235,0.85) !important;
}
.walk-h .walk-edit:hover {
  background: rgba(255,255,255,0.12) !important;
  border-color: rgba(255,255,255,0.40) !important;
  color: #ffffff !important;
}
.walk-section.is-editing .walk-h .walk-edit {
  background: #c1d5e6 !important;
  color: #1f2937 !important;
  border-color: #c1d5e6 !important;
}
.walk-section.is-editing .walk-h .walk-edit:hover {
  background: #ffffff !important;
  border-color: #ffffff !important;
}

/* ─── PROPERTY PRESENTATION — chart-tooltip was cream-on-cream invisible ─── */
.chart-tooltip {
  background: rgba(15,19,28,0.95) !important;
  color: #ffffff !important;
  border: 1px solid rgba(255,255,255,0.18) !important;
  box-shadow: 0 12px 28px -6px rgba(0,0,0,0.55) !important;
}
.chart-tooltip .tt-yr { color: rgba(255,255,255,0.60) !important; }
.chart-tooltip .tt-l { color: rgba(255,255,255,0.70) !important; }
.chart-tooltip .tt-v { color: #ffffff !important; font-weight: 600; }

/* ─── ADD PROPERTY — final step .pia-card buttons ("Save property & PIA later" / "Save & start PIA now") were black-on-glass ─── */
.pia-card {
  background: rgba(255,255,255,0.08) !important;
  border: 1.5px solid rgba(255,255,255,0.22) !important;
  color: #f5f3eb !important;
}
.pia-card:hover {
  background: rgba(255,255,255,0.16) !important;
  border-color: rgba(255,255,255,0.40) !important;
}
.pia-card .pc-t { color: #ffffff !important; }
.pia-card .pc-s { color: rgba(245,243,235,0.70) !important; }
.pia-card .pc-ic {
  background: rgba(193,213,230,0.18) !important;
  color: #c1d5e6 !important;
}
.pia-card .pc-arrow { color: #c1d5e6 !important; }
/* Primary "Save & start PIA now" card — filled silver-blue pill */
.pia-card.is-primary {
  background: #c1d5e6 !important;
  border-color: #c1d5e6 !important;
  color: #1f2937 !important;
  box-shadow: 0 6px 18px rgba(193,213,230,0.30) !important;
}
.pia-card.is-primary:hover {
  background: #ffffff !important;
  border-color: #ffffff !important;
}
.pia-card.is-primary .pc-t { color: #1f2937 !important; }
.pia-card.is-primary .pc-s { color: rgba(31,41,55,0.70) !important; }
.pia-card.is-primary .pc-ic {
  background: linear-gradient(135deg, #5f7a96, #4a5e78) !important;
  color: #ffffff !important;
}
.pia-card.is-primary .pc-arrow { color: #1f2937 !important; }

/* ─── ADD PROPERTY — "Create draft" / .ai-btn on Area step was cream-on-cream invisible ─── */
.ai-btn {
  background: #c1d5e6 !important;
  color: #1f2937 !important;
  border: 1px solid rgba(255,255,255,0.30) !important;
  box-shadow: 0 4px 12px rgba(193,213,230,0.25) !important;
}
.ai-btn:hover { background: #ffffff !important; transform: translateY(-1px); }
.ai-btn svg { color: #1f2937 !important; }

/* ─── ADD CLIENT FLOW — final step "review CTAs" were unreadable + non-obvious ─── */
.review-cta {
  background: rgba(255,255,255,0.08) !important;
  border: 1.5px solid rgba(255,255,255,0.20) !important;
  cursor: pointer !important;
}
.review-cta:hover {
  background: rgba(255,255,255,0.16) !important;
  border-color: rgba(255,255,255,0.40) !important;
  transform: translateY(-2px) !important;
}
.review-cta .rc-title { color: #ffffff !important; }
.review-cta .rc-sub { color: rgba(245,243,235,0.70) !important; }
.review-cta .rc-icon {
  background: rgba(193,213,230,0.18) !important;
  color: #c1d5e6 !important;
}
.review-cta .rc-arrow {
  background: rgba(193,213,230,0.20) !important;
  color: #c1d5e6 !important;
  border: 1px solid rgba(193,213,230,0.40) !important;
}
/* Primary CTA — silver-blue filled pill */
.review-cta.is-primary {
  background: #c1d5e6 !important;
  border-color: #c1d5e6 !important;
  box-shadow: 0 6px 18px rgba(193,213,230,0.30) !important;
}
.review-cta.is-primary:hover {
  background: #ffffff !important;
  border-color: #ffffff !important;
}
.review-cta.is-primary .rc-title { color: #1f2937 !important; }
.review-cta.is-primary .rc-sub { color: rgba(31,41,55,0.70) !important; }
.review-cta.is-primary .rc-icon {
  background: linear-gradient(135deg, #5f7a96, #4a5e78) !important;
  color: #ffffff !important;
}
.review-cta.is-primary .rc-arrow {
  background: rgba(31,41,55,0.18) !important;
  color: #1f2937 !important;
  border: 1px solid rgba(31,41,55,0.20) !important;
}

/* Continue button on flow page (.cta) — match the signup light silver-blue pill */
.cta {
  background: #c1d5e6 !important;
  color: #1f2937 !important;
  border: 1px solid rgba(255,255,255,0.30) !important;
  border-radius: 100px !important;
  box-shadow: 0 4px 12px rgba(193,213,230,0.25) !important;
}
.cta:hover { background: #ffffff !important; }
.cta svg, .cta .arrow { color: #1f2937 !important; }

/* Peach/coral avatars (.av, .av-1..5) — silver-blue gradient everywhere */
.av, .av-1, .av-2, .av-3, .av-4, .av-5,
.live-card .av, .preview-av, .new-client-av, [class*="av-"][class*="placeholder"] {
  background: linear-gradient(135deg, #c1d5e6 0%, #95acc4 60%, #5f7a96 100%) !important;
  color: #ffffff !important;
}

/* Pill-shape form inputs (was rounded square 12px → now 100px pill) */
.form-input {
  background: rgba(255,255,255,0.10) !important;
  border: 1px solid rgba(255,255,255,0.22) !important;
  color: #ffffff !important;
  border-radius: 100px !important;
  padding: 13px 20px !important;
}
.form-input:focus { border-color: rgba(255,255,255,0.40) !important; box-shadow: 0 0 0 3px rgba(193,213,230,0.15) !important; outline: none !important; }
.form-input::placeholder { color: rgba(255,255,255,0.40) !important; }
.form-label { color: rgba(245,243,235,0.85) !important; }
.or-divider { color: rgba(245,243,235,0.55) !important; }
.or-divider::before, .or-divider::after { background: rgba(255,255,255,0.16) !important; }

/* Google button — glass pill */
.btn-google {
  background: rgba(255,255,255,0.10) !important;
  border: 1px solid rgba(255,255,255,0.22) !important;
  color: #ffffff !important;
  border-radius: 100px !important;
}
.btn-google:hover { background: rgba(255,255,255,0.16) !important; }

/* Continue button — light silver-blue pill (NOT dark navy) */
.btn-continue {
  background: #c1d5e6 !important;
  color: #1f2937 !important;
  border: 1px solid rgba(255,255,255,0.30) !important;
  border-radius: 100px !important;
  box-shadow: 0 4px 12px rgba(193,213,230,0.25) !important;
}
.btn-continue:hover {
  background: #ffffff !important;
  box-shadow: 0 6px 16px rgba(193,213,230,0.40) !important;
}
.btn-continue .arrow { color: #1f2937 !important; }

/* Back arrow pill — small glass circle to the LEFT of Continue */
.btn-back {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px; height: 44px;
  border-radius: 100px;
  background: rgba(255,255,255,0.10);
  border: 1px solid rgba(255,255,255,0.22);
  color: #ffffff;
  cursor: pointer;
  font-family: inherit;
  transition: all 160ms;
  margin-right: 10px;
  vertical-align: middle;
}
.btn-back:hover { background: rgba(255,255,255,0.18); border-color: rgba(255,255,255,0.40); transform: translateX(-2px); }
.btn-back svg { width: 14px; height: 14px; }
/* Container that holds back + continue side by side */
.actions-row { display: inline-flex; align-items: center; gap: 0; }

/* Legal microtext readable */
.legal-micro, .form-sub { color: rgba(245,243,235,0.65) !important; }
.legal-micro a { color: #c1d5e6 !important; }

/* Step indicator dots */
.dot { background: rgba(255,255,255,0.25) !important; }
.dot.active { background: #c1d5e6 !important; }

/* Hide the noisy "PLACEHOLDER" banner — we now have real previews */
.placeholder-badge { display: none !important; }

/* REAL PAGE PREVIEWS — fits the slide area, full screenshot shown, no fake chrome */
.slide-media {
  position: relative !important;
  overflow: hidden !important;
  border-radius: 12px !important;
  flex: 1 1 auto !important;
  min-height: 0 !important;
  height: auto !important;
  align-self: stretch !important;
  border: 1px solid rgba(255,255,255,0.16) !important;
  box-shadow:
    0 28px 64px -20px rgba(0,0,0,0.60),
    0 12px 28px -8px rgba(0,0,0,0.35),
    inset 0 1px 0 rgba(255,255,255,0.10) !important;
  background-size: contain !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
  background-color: #0e1116 !important;
  margin-top: 8px !important;
}
.slide-media .placeholder-note { display: none !important; }
.slide-media::before, .slide-media::after { display: none !important; content: none !important; }
.slide-media.dash { background-image: url('brand-assets/previews/preview-dashboard.png') !important; }
.slide-media.pia  { background-image: url('brand-assets/previews/preview-pia.png') !important; }
.slide-media.lib  { background-image: url('brand-assets/previews/preview-properties.png') !important; }
.slide-media.aml  { background-image: url('brand-assets/previews/preview-dashboard.png') !important; }
/* Make sure the .slide column gives slide-media room */
.slide { padding-bottom: 20px !important; }

/* ─── SIGNUP STEP 4 — Theme toggle (Light / Dark cards) + carousel preview swap ─── */
.theme-toggle {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-top: 8px;
}
.theme-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.18);
  border-radius: 14px;
  cursor: pointer;
  text-align: left;
  font-family: inherit;
  color: #ffffff;
  transition: all 200ms;
  position: relative;
}
.theme-card:hover { background: rgba(255,255,255,0.12); border-color: rgba(255,255,255,0.32); }
.theme-card.is-active {
  background: rgba(193,213,230,0.16) !important;
  border-color: #c1d5e6 !important;
  box-shadow: 0 0 0 3px rgba(193,213,230,0.15);
}
.theme-card-preview {
  position: relative;
  width: 80px; height: 56px;
  border-radius: 8px;
  overflow: hidden;
  flex-shrink: 0;
  border: 1px solid rgba(255,255,255,0.14);
}
.theme-card-preview-dark { background: linear-gradient(140deg, #1a232f 0%, #2a3548 100%); }
.theme-card-preview-light { background: linear-gradient(140deg, #faf7ee 0%, #e9e2cf 100%); }
.theme-mini { position: absolute; border-radius: 2px; }
.theme-mini-chrome { top: 0; left: 0; right: 0; height: 10px; background: rgba(0,0,0,0.30); }
.theme-card-preview-light .theme-mini-chrome { background: rgba(0,0,0,0.85); }
.theme-mini-side { top: 10px; left: 0; bottom: 0; width: 16px; background: rgba(0,0,0,0.30); }
.theme-card-preview-light .theme-mini-side { background: rgba(0,0,0,0.85); }
.theme-mini-tile { top: 20px; left: 25%; width: 14px; height: 22px; background: rgba(255,255,255,0.16); }
.theme-card-preview-light .theme-mini-tile { background: rgba(255,255,255,0.95); border: 1px solid rgba(0,0,0,0.05); }
.theme-card-meta { display: flex; flex-direction: column; gap: 3px; flex: 1; min-width: 0; }
.theme-card-title { font-size: 13.5px; font-weight: 600; letter-spacing: -0.005em; color: #ffffff; }
.theme-card-sub { font-size: 11.5px; color: rgba(245,243,235,0.65); }
.theme-card-check {
  width: 22px; height: 22px; border-radius: 50%;
  background: transparent; border: 1.5px solid rgba(255,255,255,0.28);
  display: inline-flex; align-items: center; justify-content: center;
  color: transparent;
  flex-shrink: 0;
  transition: all 200ms;
}
.theme-card.is-active .theme-card-check {
  background: #c1d5e6; border-color: #c1d5e6; color: #1f2937;
}
.theme-card-check svg { width: 12px; height: 12px; }
.form-helper { font-size: 12px; color: rgba(245,243,235,0.65); margin: -2px 0 6px; }

/* CAROUSEL PREVIEW SWAP — when body[data-theme] toggles, the slide-media bg image swaps */
body[data-theme="light"] .slide-media.dash { background-image: url('brand-assets/previews/preview-dashboard-light.png') !important; }
body[data-theme="light"] .slide-media.pia  { background-image: url('brand-assets/previews/preview-pia-light.png') !important; }
body[data-theme="light"] .slide-media.lib  { background-image: url('brand-assets/previews/preview-properties-light.png') !important; }
/* (default — dark — picks up the cream rules above) */

/* Tighten signup form / side panel so the glass bg shows through nicely */
.signup-side, .signup-form { background: transparent !important; }
.signup-side-inner, .signup-form-inner {
  background: rgba(255,255,255,0.06) !important;
  backdrop-filter: blur(16px) saturate(1.2) !important;
  -webkit-backdrop-filter: blur(16px) saturate(1.2) !important;
  border: 1px solid rgba(255,255,255,0.14) !important;
}

/* ─── STICKY SHELL — only .main scrolls ─── */
.app {
  height: calc(100vh - 48px) !important;
  max-height: calc(100vh - 48px) !important;
}
.app-body { height: 100% !important; min-height: 0 !important; overflow: hidden !important; }
.sidebar { overflow-y: auto !important; }
.main { overflow-y: auto !important; min-height: 0 !important; height: 100% !important; }