/* MyPocketProp app.css — extracted from index.html <style> blocks (zero-build modularisation Step 1).
   Source: main design-token/utility sheet (formerly <head> <style>, lines 53-574) followed by the
   print-only statement/AST-contract sheet (formerly a body-level <style>, lines 10249-10291). Content
   is unchanged from the original inline blocks — only the location moved. */

:root{--lime:#A3E635;--lime-ink:#A3E635;--amber-ink:#fcd34d;--rose-ink:#fb7185;--bg:#090a0c;--ink:#f8fafc;--muted:#94a3b8;--line:#22262d;--line-soft:#181b20;--card:#13161c;--surface-elevated:#1a1e26;--field-border:#22262d;
--card-bg:rgba(19,22,28,.62);--card-border:rgba(255,255,255,.08);--hover-bg:rgba(255,255,255,.04);--hover-border:rgba(255,255,255,.35);--hover-border-soft:rgba(255,255,255,.16);
--disp:'Trebuchet MS','Segoe UI',sans-serif;--mono:'Consolas','SFMono-Regular',monospace;--sans:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Arial,sans-serif;color-scheme:dark}
/* LIGHT THEME — opt-in via the header theme toggle (toggleTheme()), persisted to
   localStorage['mpp_theme']. The lime accent and typography stay identical; only the
   background/surface/text tokens flip so every existing component re-themes for free.
   --card-bg/--card-border back .card specifically (a translucent "glass" tile over the page
   background in dark mode via backdrop-filter; a plain solid white bordered surface in light
   mode, per the daylight palette spec) — kept separate from --card (used by solid, non-glass
   surfaces: .dropdown/.drawer/.input/.select) so fixing one doesn't wash out the other.
   --lime-ink is raw lime (#A3E635) text repainted a WCAG-AA-safe dark green in daylight mode —
   raw lime text fails contrast on white/pale surfaces, so any :hover/.active text colour (not a
   background-tinted badge, which keeps --lime) uses this instead. --hover-* replace the dark-mode
   white-tint hover/border overlays, which "white out" (become invisible) on white daylight
   surfaces — light mode darkens on hover instead (slate-100/slate-300), matching dark mode's
   lighten-on-hover intent. */
html[data-theme="light"]{--bg:#f4f6f2;--ink:#0c0f0a;--muted:#475569;--line:#d8ded4;--line-soft:#e6ebe1;--card:#ffffff;--field-border:#c9d2c1;
--card-bg:#ffffff;--card-border:#e2e8f0;--lime-ink:#4d7c0f;--amber-ink:#b45309;--rose-ink:#be123c;--surface-elevated:#f8fafc;--hover-bg:#f1f5f9;--hover-border:#cbd5e1;--hover-border-soft:#cbd5e1;color-scheme:light}
*{box-sizing:border-box}html,body{margin:0;padding:0}
html{overflow-x:hidden;width:100%;max-width:100vw}
body{background:var(--bg);color:var(--ink);font-family:var(--sans);overflow-x:hidden;overflow-y:auto;min-height:100dvh;width:100%;max-width:100vw;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}button,input,select{font-family:inherit;color:inherit}
button{cursor:pointer;background:none;border:none;transition:background-color .18s ease,color .18s ease,border-color .18s ease,box-shadow .18s ease,transform .12s ease}
button:active{transform:scale(.96)}
/* WCAG 2.1 AA — visible keyboard focus ring on every interactive element, never suppressed */
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,[tabindex]:focus-visible{outline:2px solid var(--lime);outline-offset:2px;box-shadow:0 0 0 4px rgba(163,255,0,.35);border-radius:4px}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
/* WCAG 2.1 AA (2.3.3) — a user who has asked the OS for reduced motion gets every animation and
   transition collapsed to effectively instant, app-wide: tab/portal switches (.view-enter), card
   and button hover transforms, health-ring/progress-bar sweeps, the splash screen, and any
   decorative pulse/glow keyframe. Nothing is removed structurally — state still changes immediately
   — only the motion between states is removed, per the standard prefers-reduced-motion pattern. */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important}
}
ul{list-style:none;margin:0;padding:0}svg{display:block}
::-webkit-scrollbar{width:8px}::-webkit-scrollbar-thumb{background:#2a2f33;border-radius:8px}
.disp{font-family:var(--disp);letter-spacing:-.01em}.mono{font-family:var(--mono)}.muted{color:var(--muted)}
h1{font-family:var(--disp);font-weight:700;margin:0;font-size:26px}
.glass{background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,.015));backdrop-filter:blur(16px);border:1px solid rgba(255,255,255,.08)}
.glow{box-shadow:0 0 0 1px rgba(163,255,0,.25),0 0 30px -6px rgba(163,255,0,.35)}
.bracket{position:relative}.bracket .bk{position:absolute;width:12px;height:12px;border-color:var(--lime)}
.bk-tr{top:-1px;right:-1px;border-top:2px solid var(--lime);border-right:2px solid var(--lime)}
.bk-bl{bottom:-1px;left:-1px;border-bottom:2px solid var(--lime);border-left:2px solid var(--lime)}
.card{position:relative;border:1px solid var(--card-border);border-radius:18px;padding:16px;background:var(--card-bg);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);box-shadow:0 10px 26px -20px rgba(0,0,0,.7)}
button.card,a.card{transition:transform .2s cubic-bezier(.16,1,.3,1),box-shadow .2s ease,border-color .2s ease}
button.card:hover,a.card:hover{transform:translateY(-2px);border-color:rgba(163,255,0,.4);box-shadow:0 18px 34px -18px rgba(0,0,0,.7),0 0 0 1px rgba(163,255,0,.12)}
button.card:active,a.card:active{transform:scale(.98)}
.rounded{border-radius:10px}
.title-lg{font-family:var(--sans);font-weight:600;letter-spacing:-.01em;color:var(--ink)}
.title-sm{font-family:var(--sans);font-weight:600;letter-spacing:-.01em;font-size:13px;color:var(--ink)}
.urgency-card{border-radius:16px;padding:14px 16px}
.urgency-critical{border-left:4px solid #fb7185}
.urgency-statutory{border-left:4px solid #fcd34d}
.urgency-routine{border-left:4px solid rgba(163,255,0,.55)}
.flex{display:flex}.flex-col{flex-direction:column}.items-center{align-items:center}.items-start{align-items:flex-start}
.justify-between{justify-content:space-between}.justify-center{justify-content:center}.flex-wrap{flex-wrap:wrap}.flex-1{flex:1}
.gap-xs{gap:6px}.gap-sm{gap:10px}.gap-md{gap:16px}.gap-lg{gap:24px}
.relative{position:relative}.min-w-0{min-width:0}.w-full{width:100%}.text-right{text-align:right}.text-center{text-align:center}
.truncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
[x-cloak]{display:none!important}
.icon{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0}
.icon-sm{width:13px;height:13px}.icon-lg{width:20px;height:20px}
.health-ring circle{transition:stroke-dashoffset 1s cubic-bezier(.16,1,.3,1)}

/* MOBILE BOTTOM NAVIGATION DOCK — sticky quick-access bar, phones only */
.mobile-bottom-dock{display:none}
@media(max-width:767px){
  .mobile-bottom-dock{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:56;align-items:flex-end;justify-content:space-around;height:calc(58px + max(0.75rem,env(safe-area-inset-bottom)));padding-bottom:max(0.75rem,env(safe-area-inset-bottom));background:var(--card-bg);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border-top:1px solid var(--line-soft)}
  .dock-item{display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:2px;font-size:9px;color:var(--muted);flex:1;height:58px;min-width:48px;padding-bottom:8px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .dock-item.active{color:var(--lime-ink)}
  .dock-icon{width:20px;height:20px}
  .dock-fab-wrap{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:2px;font-size:9px;font-weight:700;color:var(--lime-ink);height:58px;padding-bottom:8px}
  .dock-fab{width:48px;height:48px;border-radius:999px;background:var(--lime);color:#000;display:flex;align-items:center;justify-content:center;margin-bottom:2px;box-shadow:0 4px 16px -2px rgba(163,255,0,.55);border:4px solid var(--bg)}
  .main{padding-bottom:calc(74px + env(safe-area-inset-bottom))!important}
  /* Authenticated mobile users also have the bottom dock — push the PropPilot FAB up clear of it
     rather than let the two overlap (guests have no dock, so they never get this class). */
  #propPilotFab.fab-above-dock{bottom:calc(74px + env(safe-area-inset-bottom))!important}
}

/* header */
.hdr{position:fixed;top:0;left:0;right:0;height:calc(56px + env(safe-area-inset-top));z-index:40;display:flex;align-items:center;justify-content:space-between;padding:env(safe-area-inset-top) calc(16px + env(safe-area-inset-right)) 0 calc(16px + env(safe-area-inset-left));border-bottom:1px solid var(--line-soft);background:var(--card-bg);backdrop-filter:blur(16px)}
.logo-mark{width:32px;height:32px;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.brand{font-family:var(--disp);font-weight:700;font-size:17px}
.role-pills{display:none;gap:2px;padding:4px;border-radius:999px;border:1px solid var(--line);background:rgba(255,255,255,.04)}
@media(min-width:768px){.role-pills{display:flex}}
.mobile-workspace-bar{display:flex;align-items:center;padding:8px 12px;border-bottom:1px solid var(--line-soft);position:sticky;top:calc(56px + env(safe-area-inset-top));z-index:33;background:var(--bg)}
@media(min-width:768px){.mobile-workspace-bar{display:none}}
@media(max-width:768px){.hide-label-mobile{display:none}}
/* Sub-375px phones (e.g. 320px) still run tight even with the above — trim padding/gaps/type size
   on the header's left cluster so the avatar/notification icons on the right never clip off-edge. */
@media(max-width:380px){
  .hdr{padding-left:calc(10px + env(safe-area-inset-left));padding-right:calc(10px + env(safe-area-inset-right))}
  .hdr .gap-sm{gap:6px}
  /* The wordmark is the first thing to give at this width — the logo mark alone still carries the
     brand, and that frees enough room for the hub dropdown to show its label without clipping. */
  .hdr .brand{display:none}
  .logo-mark{width:28px;height:28px}
  /* select.mobile-hub-select (type+class) intentionally outranks the plain .mobile-hub-select{
     min-width:110px } base rule declared later in the sheet, regardless of source order. */
  select.mobile-hub-select{min-width:76px;max-width:30vw}
  /* Theme toggle has no room in the header past this point — the drawer carries a fallback toggle
     (see #sideNavDrawer) so light/dark switching stays reachable, mirroring how Quick Add already
     falls back to the mobile bottom dock's centre FAB below 768px. */
  .header-theme-toggle{display:none!important}
  .hdr .gap-xs{gap:4px}
}
.hub-bar{display:flex;align-items:center;gap:10px;padding:8px 14px;border-bottom:1px solid var(--line-soft);background:var(--bg);overflow-x:auto;white-space:nowrap;scrollbar-width:none;position:sticky;top:calc(56px + env(safe-area-inset-top));z-index:34}
.hub-bar::-webkit-scrollbar{display:none}
.hub-bar-label{font-size:9px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);flex-shrink:0}
.hub-seg{display:inline-flex;gap:2px;padding:3px;border-radius:999px;border:1px solid var(--line);background:rgba(255,255,255,.04);flex-shrink:0}
.hub-seg-btn{display:inline-flex;align-items:center;gap:6px;padding:8px 13px;border-radius:999px;font-family:var(--mono);font-size:10px;letter-spacing:.04em;text-transform:uppercase;color:var(--muted);white-space:nowrap;min-height:38px}
.hub-seg-btn.active{background:var(--lime);color:#0a0a0a;font-weight:700}
.hub-seg-btn.locked{opacity:.65}
.select-sm{width:auto;padding:7px 10px;font-size:11px;border-radius:999px}
/* On phones the pill-strip hub switcher overflows/clips against the header edge — a compact
   dropdown replaces it so the brand mark and switcher always sit on one uncut row. */
.mobile-hub-select{display:none;min-width:0;max-width:160px}
@media(max-width:768px){.hub-seg{display:none!important}.mobile-hub-select{display:inline-flex}}
.pill{padding:6px 13px;border-radius:999px;font-family:var(--mono);font-size:10px;letter-spacing:.04em;text-transform:uppercase;color:var(--muted)}
.pill:hover{color:var(--ink)}
.pill.active{background:var(--lime);color:#000;font-weight:700}
.pill-dot{width:8px;height:8px;border-radius:999px;background:#5b6169;flex-shrink:0}
.pill.active .pill-dot{background:#000;box-shadow:0 0 0 2px rgba(0,0,0,.15)}
.profile-btn{display:flex;align-items:center;gap:8px;border:1px solid var(--line);border-radius:999px;padding:4px 12px 4px 4px}
.avatar{width:24px;height:24px;border-radius:999px;background:rgba(163,255,0,.2);color:var(--lime-ink);display:flex;align-items:center;justify-content:center;font-family:var(--mono);font-size:10px}
.dropdown{position:absolute;right:0;top:44px;width:280px;max-width:calc(100vw - 32px);max-height:calc(100dvh - 76px);overflow-y:auto;background:var(--card);border:1px solid var(--line);border-radius:10px;padding:8px;z-index:50;box-shadow:0 20px 50px rgba(0,0,0,.5)}
.drop-item{display:flex;align-items:center;justify-content:space-between;width:100%;padding:9px 8px;border-radius:6px;font-size:13px;text-align:left}
.drop-item:hover{background:var(--hover-bg)}
.drop-item:active{background:rgba(255,255,255,.08)}
.drop-item.active{color:var(--lime-ink)}

/* sidebar — .drawer-overlay/.drawer-backdrop are SHARED across ~20 other drawers/modals in this
   file (unitEditDrawer, tenancyDrawer, proProfileDrawer, copilot, etc.) — their definitions must
   stay exactly as-is; only #sideNavDrawer's own markup gets the extra x-transition below. */
.drawer-overlay{position:fixed;inset:0;z-index:50}
.drawer-backdrop{position:absolute;inset:0;background:rgba(0,0,0,.7);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
/* #sideNavDrawer is the ONLY consumer of the plain .drawer panel class (every other drawer uses
   .triage-drawer). It is now a single floating overlay used at every viewport width (mobile,
   tablet, desktop) — decoupled from document flow, so opening/closing it never shifts, shrinks or
   reflows <main> underneath (.main no longer carries an .sb-open margin-left push, see below). The
   slide is a hardware-accelerated `transform` transition driven by Alpine's x-transition classes on
   the aside itself (drawer-slide/drawer-closed/drawer-open), independent from the parent's own
   x-show fade on .drawer-overlay/.drawer-backdrop. */
.drawer{position:relative;width:280px;max-width:300px;height:100%;background:var(--card);border-right:1px solid var(--line);overflow-y:auto;padding:calc(12px + env(safe-area-inset-top)) 12px calc(6.5rem + env(safe-area-inset-bottom,20px)) calc(12px + env(safe-area-inset-left));box-shadow:0 0 60px rgba(0,0,0,.6)}
.drawer-slide{transition:transform .2s ease-out}
.drawer-closed{transform:translateX(-100%)}
.drawer-open{transform:translateX(0)}
.triage-drawer{position:relative;width:420px;max-width:92vw;height:100%;margin-left:auto;background:var(--card);border-left:1px solid rgba(163,255,0,.3);border-radius:24px 0 0 24px;overflow-y:auto;overflow-x:hidden;padding:calc(24px + env(safe-area-inset-top,12px)) 24px calc(24px + env(safe-area-inset-bottom,16px)) 24px;box-shadow:0 0 60px rgba(0,0,0,.6)}
@keyframes spin{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}
@keyframes pulse-lime{0%,100%{box-shadow:0 0 0 1px rgba(163,255,0,.4),0 0 20px -4px rgba(163,255,0,.7)}50%{box-shadow:0 0 0 1px rgba(163,255,0,.6),0 0 34px 2px rgba(163,255,0,.9)}}
.navcat{font-family:var(--mono);font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:#6b7280;padding:14px 10px 6px}
.navlink{display:flex;align-items:center;gap:10px;width:100%;padding:9px 10px;border-radius:8px;color:var(--muted);font-size:13px;text-align:left}
.navlink:hover{color:var(--ink);background:var(--hover-bg)}
.navlink:active{background:rgba(255,255,255,.08)}
.navlink.active{background:rgba(163,255,0,.10);color:var(--lime-ink);font-weight:600}
.main{padding-top:calc(56px + env(safe-area-inset-top));padding-bottom:calc(120px + env(safe-area-inset-bottom));min-height:100dvh;overflow-y:auto}
.app-locked-blur{filter:blur(22px) brightness(.5);pointer-events:none;user-select:none;transition:filter .2s ease}
/* .drawer/.triage-drawer are height:100% panels inside a position:fixed;inset:0 .drawer-overlay —
   they must scroll internally via their own overflow-y:auto; never force height:auto on them or
   they collapse to content height and clip nav items instead of scrolling. */

/* grid backdrop — mask lives on a ::before layer, not the section itself, so it only
   fades the decorative grid and never clips/fades the actual content stacked above it */
.grid-field{position:relative}
.grid-field::before{content:'';position:absolute;inset:0;pointer-events:none;z-index:0;background-image:linear-gradient(rgba(132,204,22,.07) 1px,transparent 1px),linear-gradient(90deg,rgba(132,204,22,.07) 1px,transparent 1px);background-size:40px 40px;-webkit-mask-image:radial-gradient(ellipse 80% 60% at 50% 0%,#000 40%,transparent 100%);mask-image:radial-gradient(ellipse 80% 60% at 50% 0%,#000 40%,transparent 100%)}
.grid-field>*{position:relative;z-index:1}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;padding:12px 20px;border-radius:12px;font-weight:600;font-size:13px;transition:transform .18s cubic-bezier(.16,1,.3,1),box-shadow .18s ease,background-color .18s ease,border-color .18s ease,color .18s ease}
.btn:hover{transform:translateY(-1px)}.btn:active{transform:scale(.98)}
.btn-primary{background:var(--lime);color:#000}.btn-primary:hover{box-shadow:0 8px 25px -4px rgba(163,255,0,.6)}
.btn-outline{border:1px solid var(--card-border);color:var(--ink)}
/* Clean, accessible "← Back to X" sub-view link — replaces the old uppercase-mono bordered
   .btn.btn-outline.btn-sm back button and the raw "/ Hub / Page" breadcrumb string next to it. */
.back-link{display:inline-flex;align-items:center;gap:5px;font-size:12px;font-weight:600;color:var(--muted);padding:8px 2px;min-height:40px}
.back-link:hover{color:var(--lime-ink)}
.back-link:active{opacity:.8}
.btn-outline:hover{border-color:var(--hover-border);background:var(--hover-bg)}
.btn-lime{border:1px solid rgba(163,255,0,.4);color:var(--lime-ink)}.btn-lime:hover{background:var(--lime);color:#000;box-shadow:0 8px 25px -4px rgba(163,255,0,.5)}
.btn-sm{padding:7px 13px;font-size:10px;font-family:var(--mono);text-transform:uppercase;border-radius:6px}
.btn-full{width:100%}
.icon-btn{width:32px;height:32px;border-radius:8px;border:1px solid var(--line);display:flex;align-items:center;justify-content:center}
.icon-btn:hover{border-color:rgba(163,255,0,.5);color:var(--lime-ink)}
.icon-btn:active{background:rgba(163,255,0,.1)}
/* Command-bar search trigger — a plain 48px icon button below 1024px (same footprint as every
   other header icon-btn), widening into a subtle "⌘K Search…" affordance at desktop widths so it
   reads as a command bar rather than an isolated square button next to Notifications/Avatar. */
.cmdbar-trigger{display:flex;align-items:center;justify-content:center;gap:8px;min-width:48px;min-height:48px;border-radius:10px;border:1px solid var(--line);color:var(--muted);background:transparent;flex-shrink:0}
.cmdbar-trigger:hover{border-color:rgba(163,255,0,.5);color:var(--lime-ink)}
.cmdbar-trigger-text{display:none;font-size:12px;white-space:nowrap}
.cmdbar-kbd{display:none;font-family:var(--mono);font-size:10px;padding:2px 6px;border-radius:5px;border:1px solid var(--line);color:var(--muted)}
@media(min-width:1024px){
  .cmdbar-trigger{width:220px;justify-content:flex-start;padding:0 10px}
  .cmdbar-trigger-text{display:inline;flex:1;text-align:left;overflow:hidden;text-overflow:ellipsis}
  .cmdbar-kbd{display:inline-block}
}

/* pill tabs — a bare flex scroll rail (no shared stadium container); each tab is its own
   rounded-rectangle chip that never wraps, so a long list (property switchers, compliance/repairs/
   vault/portfolio sub-tabs, job boards) scrolls horizontally on one line instead of wrapping into a
   distorted stadium blob (see the mobile-only .pill-row radius patch this replaces below). */
.pill-row{display:flex;gap:6px;padding:4px 2px;overflow-x:auto;flex-wrap:nowrap;-webkit-overflow-scrolling:touch;scrollbar-width:none}
.pill-row::-webkit-scrollbar{display:none}
.pill-tab{padding:8px 14px;border-radius:10px;font-family:var(--mono);font-size:10px;letter-spacing:.04em;text-transform:uppercase;color:var(--muted);background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.06);white-space:nowrap;flex-shrink:0;transition:background-color .15s ease,color .15s ease,border-color .15s ease}
.pill-tab:hover{color:var(--ink);border-color:var(--hover-border-soft)}
.pill-tab.active{background:var(--lime);color:#000;font-weight:700;border-color:transparent;box-shadow:0 2px 10px -3px rgba(163,255,0,.6)}

/* badges */
.badge{display:inline-flex;align-items:center;padding:3px 10px;border-radius:999px;font-family:var(--mono);font-size:10px;text-transform:uppercase}
.badge-lime{background:rgba(163,255,0,.15);color:var(--lime-ink)}.badge-amber{background:rgba(251,191,36,.1);color:var(--amber-ink);border:1px solid rgba(251,191,36,.3)}
.badge-rose{background:rgba(244,63,94,.15);color:var(--rose-ink)}.badge-neutral{background:rgba(255,255,255,.1);color:var(--muted)}
.badge-outline{border:1px solid rgba(163,255,0,.3);color:var(--lime-ink);background:rgba(163,255,0,.06)}
/* PropPilot FAQ chip row — flex-shrink:0/white-space:nowrap alone let each chip render its full
   text, but the row still needs its own scroll-snap + overscroll containment so a mobile swipe
   glides between chips instead of feeling like it's fighting the drawer's own vertical scroll. */
.copilot-faq-chip{flex-shrink:0;white-space:nowrap;cursor:pointer;gap:4px;scroll-snap-align:start}
.copilot-faq-scroll{scroll-snap-type:x proximity;overscroll-behavior-x:contain}
button.badge:hover{filter:brightness(1.25)}

/* context bar — for read-only context labels (a selected property's full address, etc.) that used
   to be squeezed into a mono/uppercase .badge capsule; real addresses and sentences read better as
   a plain rounded-rectangle strip than a stadium-shaped tag. */
.context-bar{display:inline-flex;align-items:center;gap:6px;padding:9px 13px;border-radius:12px;background:var(--card-bg);border:1px solid var(--line);font-family:var(--sans);font-size:12px;line-height:1.4;color:var(--ink)}

/* callout card — a short readable note (AI recommendation, ticket/discipline note) that needs more
   room than a .badge tag but less chrome than a full .card; rounded-rectangle, never a capsule. */
.callout-card{border-radius:14px;background:var(--card-bg);border:1px solid var(--card-border);padding:14px;font-size:12px;line-height:1.6;color:var(--muted)}
@media(min-width:640px){.callout-card{font-size:13px}}

/* mobile touch targets: keep visual density on desktop, expand tap area ≥48px on small viewports */
@media(max-width:768px){
  .icon-btn{width:48px;height:48px}
  .btn-sm{padding:15px 16px;min-height:48px}
  .pill{padding:14px 14px;min-height:48px;display:inline-flex;align-items:center;justify-content:center}
  .pill-tab{padding:14px 14px;min-height:48px;display:inline-flex;align-items:center;justify-content:center}
  .navlink{padding:15px 10px;min-height:48px}
  .drop-item{padding:15px 8px;min-height:48px}
  button.badge{min-height:48px;padding:10px 14px}
  /* iOS Safari auto-zooms the page on focusing any text input under 16px — .input/.select are 13px
     on desktop for density, but must be 16px on mobile to stop that zoom-and-scroll-jump. */
  .input,.select{font-size:16px}
  /* A couple of compact inputs set their own smaller inline font-size for desktop density (the SPV
     entity switcher, the omnibar search field) — override those specifically on mobile too, so they
     don't fall through the 16px anti-zoom fix above. */
  .mobile-zoom-safe{font-size:16px!important}
}

/* forms */
.field{margin-bottom:12px}.label{font-family:var(--mono);font-size:10px;text-transform:uppercase;color:var(--muted);display:block;margin-bottom:5px}
.input,.select{width:100%;background:var(--card);color:var(--ink);border:1px solid var(--field-border);border-radius:12px;padding:10px 12px;font-size:13px;outline:none;transition:border-color .18s ease}
/* Disarms Chrome/Safari's blue/yellow autofill tint (e.g. a saved-email suggestion on the property
   search box) — paints the field's own themed surface back over it instead of a fixed white, so
   this holds correctly in both dark and daylight mode. */
input:-webkit-autofill,input:-webkit-autofill:hover,input:-webkit-autofill:focus{-webkit-box-shadow:0 0 0 1000px var(--card) inset!important;box-shadow:0 0 0 1000px var(--card) inset!important;-webkit-text-fill-color:var(--ink)!important;caret-color:var(--ink)}
.btn-glass-lime{width:100%;padding:14px 16px;border-radius:12px;border:1px solid rgba(163,255,0,.3);background:rgba(163,255,0,.05);display:flex;align-items:center;justify-content:center;gap:8px;font-size:13px;font-weight:600;color:var(--ink);box-shadow:0 1px 2px rgba(0,0,0,.2);transition:background-color .2s ease,border-color .2s ease,transform .12s ease}
.btn-glass-lime:hover{background:rgba(163,255,0,.10);border-color:rgba(163,255,0,.6)}
.btn-glass-lime:active{transform:scale(.99)}
.btn-glass-lime:disabled{opacity:.6}
.btn-glass-lime .icon{color:var(--lime-ink)}
.auth-msg{font-size:12px;line-height:1.5;padding:9px 11px;border-radius:7px;border:1px solid transparent}
.auth-msg-error{color:var(--rose-ink);background:rgba(244,63,94,.08);border-color:rgba(244,63,94,.3)}
.auth-msg-success{color:var(--lime-ink);background:rgba(163,255,0,.08);border-color:rgba(163,255,0,.3)}
.input:focus,.select:focus{border-color:var(--lime)}
/* --muted is already themed/contrast-checked for both dark and light (see :root and
   html[data-theme="light"]) — placeholders default to a UA-chosen grey that isn't, so pin them to
   the same token explicitly; opacity:1 overrides Firefox's default <1 placeholder opacity. */
.input::placeholder{color:var(--muted);opacity:1}
/* Auth modal divider — <div class="auth-divider"><span>or continue with</span></div>; the two line
   segments are ::before/::after on the flex row itself so the markup stays a single plain div. */
.auth-divider{display:flex;align-items:center;gap:10px;margin:14px 0;font-family:var(--mono);font-size:9px;text-transform:uppercase;letter-spacing:.06em;color:var(--muted)}
.auth-divider::before,.auth-divider::after{content:'';flex:1;height:1px;background:var(--line)}
.select option,select option{background:var(--card);color:var(--ink)}
.range{-webkit-appearance:none;width:100%;height:3px;background:#2a2f33;border-radius:2px}
.range::-webkit-slider-thumb{-webkit-appearance:none;width:18px;height:18px;border-radius:3px;background:var(--lime);cursor:pointer;transform:rotate(45deg);box-shadow:0 0 10px rgba(163,255,0,.7)}

/* table */
.table-wrap{border:1px solid var(--line);border-radius:10px;overflow:hidden;overflow-x:auto}
table{width:100%;border-collapse:collapse;font-size:12px}thead{background:rgba(255,255,255,.04)}
th{text-align:left;padding:10px 12px;font-family:var(--mono);font-size:10px;text-transform:uppercase;color:var(--muted)}
td{padding:10px 12px;border-top:1px solid var(--line-soft);white-space:nowrap}

/* pipeline */
.pipeline{display:flex;align-items:center}
.pipe-item{display:flex;align-items:center;flex:1}.pipe-item:last-child{flex:0 0 auto}
.pipe-circle{width:28px;height:28px;border-radius:999px;display:flex;align-items:center;justify-content:center;font-family:var(--mono);font-size:11px;border:2px solid var(--line);color:var(--muted);flex-shrink:0}
.pipe-circle.done{background:var(--lime);border-color:var(--lime);color:#000;font-weight:700}
.pipe-label{font-size:9px;font-family:var(--mono);color:var(--muted);text-align:center;width:64px}
.pipe-line{flex:1;height:2px;background:var(--line);margin:0 4px;margin-top:-16px}
.pipe-line.done{background:var(--lime)}

/* grids */
.g2{display:grid;grid-template-columns:1fr;gap:14px}@media(min-width:768px){.g2{grid-template-columns:1fr 1fr}}
.g3{display:grid;grid-template-columns:1fr;gap:14px}@media(min-width:768px){.g3{grid-template-columns:repeat(3,1fr)}}
.g4{display:grid;grid-template-columns:1fr 1fr;gap:14px}@media(min-width:768px){.g4{grid-template-columns:repeat(4,1fr)}}
/* Messages/Unified Inbox two-pane layout — the inline min-width:260/300px on its flex children
   forced horizontal overflow below ~640px (a flex item's min-width still wins even after it wraps
   onto its own row), so the panes drop that floor and go full-width once there's no room for two
   side by side. */
@media(max-width:640px){.messenger-pane{min-width:0!important;max-width:100%!important;flex-basis:100%!important}}

/* universal contextual calendar hub */
.calendar-month-grid{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:4px}
.calendar-dow{min-width:0}
.calendar-cell{min-height:48px;min-width:0;border-radius:10px;border:1px solid var(--card-border);background:var(--card-bg);display:flex;flex-direction:column;align-items:center;justify-content:flex-start;gap:3px;padding:5px 2px;cursor:pointer;transition:border-color .15s ease,background-color .15s ease}
.calendar-cell:hover{border-color:rgba(163,255,0,.4)}
.calendar-cell-muted{opacity:.35}
.calendar-cell-today{border-color:var(--lime);background:rgba(163,255,0,.08);box-shadow:0 0 0 1px var(--lime),0 0 14px -2px rgba(163,255,0,.65)}
.calendar-cell-dots{display:flex;gap:2px;flex-wrap:wrap;justify-content:center}
.calendar-dot{width:5px;height:5px;border-radius:50%;display:inline-block}
.calendar-dot-lime{background:#A3FF00}
.calendar-dot-amber{background:#fbbf24}
.calendar-dot-rose{background:#fb7185}
.calendar-dot-muted{background:#64748b}
.calendar-event-card{border:1px solid var(--card-border);border-radius:14px;padding:12px;background:var(--card-bg)}
.calendar-cell-chip{width:100%;font-size:7.5px;line-height:1.3;padding:1px 3px;border-radius:4px;text-align:left;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;border-left:2px solid;background:rgba(255,255,255,.05)}
.calendar-cell-chip-lime{border-left-color:#A3FF00;color:#A3FF00}
.calendar-cell-chip-amber{border-left-color:#fbbf24;color:var(--amber-ink)}
.calendar-cell-chip-rose{border-left-color:#fb7185;color:var(--rose-ink)}
.calendar-cell-chip-purple{border-left-color:#a78bfa;color:#a78bfa}
.calendar-cell-more{width:100%;font-size:7.5px;color:var(--muted);text-align:left}

/* about / agent network */
.mpp-pill{display:inline-flex;align-items:center;gap:7px;padding:7px 16px;border-radius:999px;border:1px solid rgba(132,204,22,.35);background:rgba(132,204,22,.08);color:#84cc16}
.metric-card{background:var(--card);border:1px solid rgba(132,204,22,.2);border-radius:12px;padding:22px 16px;text-align:center;box-shadow:0 0 30px -14px rgba(132,204,22,.5)}
.agent-card{background:var(--card);border:1px solid rgba(132,204,22,.2);border-radius:12px;padding:18px;transition:border-color .2s ease,transform .2s ease,box-shadow .2s ease}
.agent-card:hover{border-color:#84cc16;transform:translateY(-3px);box-shadow:0 0 34px -12px rgba(132,204,22,.45)}
.agent-icon{width:38px;height:38px;border-radius:10px;background:rgba(132,204,22,.12);border:1px solid rgba(132,204,22,.3);display:flex;align-items:center;justify-content:center;color:#84cc16;box-shadow:0 0 16px -4px rgba(132,204,22,.7)}
.cat-label{color:#84cc16;letter-spacing:.08em;text-transform:uppercase}

/* toast */
.toast{position:fixed;bottom:calc(20px + env(safe-area-inset-bottom));right:calc(20px + env(safe-area-inset-right));z-index:70;width:280px;border-radius:10px;padding:14px}
/* Streak-milestone celebration — a high-contrast variant of the same toast, not a separate
   subsystem, so it inherits positioning/dismissal for free. The pulse is purely decorative and
   respects prefers-reduced-motion (see the reduced-motion rule further down). */
.toast.celebration{border-color:rgba(163,255,0,.7)!important;box-shadow:0 20px 50px -12px rgba(0,0,0,.7),0 0 0 3px rgba(163,255,0,.3),0 0 40px -6px rgba(163,255,0,.55)!important}
@media (prefers-reduced-motion:no-preference){
  .toast.celebration{animation:celebrate-pulse 1.8s ease-in-out 2}
}
@keyframes celebrate-pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.02)}}

/* modal */
.modal-ov{position:fixed;inset:0;z-index:60;display:flex;align-items:center;justify-content:center;padding:16px;padding-top:calc(16px + env(safe-area-inset-top,12px));padding-bottom:calc(16px + env(safe-area-inset-bottom,16px))}
.modal-bd{position:absolute;inset:0;background:rgba(0,0,0,.7);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
/* .modal-box (auth, partner application, Deal Room, and every other centred .modal-ov dialog) is a
   translucent "glass" tile with no solid fill of its own — it reads as a dark card purely because
   .modal-bd dims everything behind it to near-black first, regardless of the app's light/dark
   theme. Its text was still inheriting the THEME'S --ink/--muted, though, so opening any of these
   dialogs while the app was in daylight mode silently flipped their labels/subtext to light mode's
   dark-slate colours — dark-on-dark, unreadable. Re-declaring the token set locally, scoped to
   .modal-box, fixes every descendant that reads var(--ink)/var(--muted)/var(--card)/etc (inputs,
   .pill-tab, .muted labels, nested .card/.hub-card) to a permanently dark-glass-appropriate
   palette, in both themes, with one change. */
.modal-box{position:relative;width:100%;max-width:380px;border-radius:24px;padding:24px;max-height:calc(100dvh - 32px);overflow-y:auto;overflow-x:hidden;scrollbar-width:none;-ms-overflow-style:none;
  --ink:#f8fafc;--muted:#94a3b8;--line:#2a2f38;--line-soft:#1f242c;--card:#1a1e26;--surface-elevated:#232833;--card-bg:rgba(255,255,255,.05);--card-border:rgba(255,255,255,.1);--field-border:#333a44;--hover-bg:rgba(255,255,255,.06);--hover-border:rgba(255,255,255,.35);--hover-border-soft:rgba(255,255,255,.16);--lime-ink:#A3E635;--amber-ink:#fcd34d;
  color:var(--ink)}
.modal-box::-webkit-scrollbar{display:none}
.smart-doc-dropzone{transition:border-color .18s ease,background-color .18s ease}
.smart-doc-dropzone.drag-active,.smart-doc-dropzone:hover{border-color:var(--lime);background:rgba(163,255,0,.09)}
.no-scrollbar{scrollbar-width:none;-ms-overflow-style:none}
.no-scrollbar::-webkit-scrollbar{display:none}

/* preloader splash — solid-body inline SVG gunmetal 'MPP' monogram, no canvas/image assets */
.splash-screen{position:fixed;inset:0;z-index:999;display:flex;flex-direction:column;align-items:center;justify-content:center;background:#0c0d10}
.splash-inner{position:relative;display:flex;flex-direction:column;align-items:center;-webkit-user-select:none;user-select:none}
.splash-halo{position:absolute;top:-24px;width:224px;height:224px;background:#84cc16;opacity:.3;filter:blur(48px);border-radius:999px;animation:splashHaloPulse 2s ease-in-out infinite}
@keyframes splashHaloPulse{0%,100%{opacity:.18}50%{opacity:.38}}
.splash-mark-wrap{position:relative;z-index:1;width:160px;height:160px;display:flex;align-items:center;justify-content:center;animation:scaleIn .7s cubic-bezier(0.16,1,0.3,1) forwards}
@keyframes scaleIn{0%{transform:scale(.95);opacity:0}100%{transform:scale(1);opacity:1}}
.splash-svg{width:100%;height:100%;filter:drop-shadow(0 0 20px rgba(132,204,22,.75)) drop-shadow(0 0 40px rgba(132,204,22,.35))}
.splash-brand2{font-family:var(--disp);font-weight:800;font-size:26px;color:#fff;margin-top:18px;letter-spacing:-.02em;display:flex;align-items:center}
.splash-tagline2{font-family:var(--mono);font-size:11px;font-weight:700;letter-spacing:.35em;color:#84cc16;text-transform:uppercase;margin-top:8px;text-align:center}
.splash-rule2{width:176px;height:1.5px;background:linear-gradient(90deg,transparent,#84cc16,transparent);margin-top:12px}

/* hero — exact brand copy */
.text-lime-400{color:#84cc16}
.badge-hero{display:inline-flex;align-items:center;gap:6px;font-family:var(--mono);font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:#84cc16;background:#0b0f08;border:1px solid rgba(132,204,22,.4);border-radius:999px;padding:7px 14px;width:fit-content}
.pulse-dot{width:7px;height:7px;border-radius:999px;background:#84cc16;display:inline-block;animation:pulse-dot-anim 1.4s ease-in-out infinite}
@keyframes pulse-dot-anim{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.4;transform:scale(1.3)}}
.btn-gradient-lime{background:linear-gradient(135deg,#a3e635,#84cc16 55%,#65a30d);color:#04140a;font-weight:700;box-shadow:0 0 25px -6px rgba(132,204,22,.65)}
.btn-gradient-lime:hover{box-shadow:0 0 36px -4px rgba(132,204,22,.9);transform:translateY(-2px)}

/* hero persona switcher — glassmorphism cards, soft glow on active rather than a flat lime fill */
.persona-switch{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
@media(min-width:1024px){.persona-switch{grid-template-columns:repeat(4,minmax(0,1fr))}}
.persona-card{position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:3px;min-height:48px;padding:14px;border-radius:14px;border:1px solid var(--line);background:var(--card-bg);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);text-align:left;cursor:pointer;transition:border-color .25s ease,box-shadow .25s ease,transform .25s ease,background-color .25s ease}
.persona-card:hover{border-color:rgba(132,204,22,.4);transform:translateY(-2px)}
.persona-card.active{border-color:rgba(132,204,22,.55);background:rgba(132,204,22,.07);box-shadow:0 0 0 1px rgba(132,204,22,.2),0 8px 32px -10px rgba(132,204,22,.55)}
html[data-theme="light"] .persona-card.active{border-color:#0f172a;background:rgba(248,250,252,.5);box-shadow:0 0 0 2px #a3e635,0 8px 20px -12px rgba(15,23,42,.35)}
.persona-card-emoji{font-size:19px;line-height:1}
.persona-card-label{font-size:12px;font-weight:700;color:var(--ink);margin-top:3px}
.persona-card-tag{font-family:var(--mono);font-size:9.5px;color:var(--muted);letter-spacing:.02em}
.persona-card.active .persona-card-tag{color:#84cc16}

/* split-screen hero */
.hero-split{display:grid;grid-template-columns:1fr;gap:32px;align-items:start;margin-top:26px}
@media(min-width:768px){.hero-split{grid-template-columns:1.05fr .95fr;gap:40px}}
.hero-showcase-panel{border:1px solid var(--line);border-radius:18px;padding:22px;background:var(--card-bg);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.equity-bar{width:100%;height:8px;border-radius:999px;background:#1c2027;overflow:hidden;margin-top:10px}
.equity-bar-fill{height:100%;border-radius:999px;background:linear-gradient(90deg,#65a30d,#84cc16);transition:width .3s ease}

/* trust strip — muted/monochrome, deliberately calmer than the persona switcher above the fold */
.trust-strip{border-top:1px solid var(--line-soft);margin-top:52px;padding-top:26px}
.trust-chip{display:inline-flex;align-items:center;gap:6px;font-family:var(--mono);font-size:9px;letter-spacing:.04em;text-transform:uppercase;color:var(--muted);background:rgba(255,255,255,.03);border:1px solid var(--line);border-radius:999px;padding:7px 13px}
.deal-confidence-pill{--dc-color:#84cc16;flex-shrink:0;display:inline-flex;align-items:center;justify-content:center;font-family:var(--mono);font-size:12px;font-weight:700;color:var(--dc-color);background:color-mix(in srgb,var(--dc-color) 12%,transparent);border:1px solid var(--dc-color);border-radius:999px;padding:0 12px;cursor:pointer;box-shadow:0 0 14px -4px var(--dc-color);transition:transform .15s ease}
.deal-confidence-pill:hover{transform:scale(1.05)}

/* interactive micro-demos — Middleman Shredder, Rent Splitter, Smart Safe Simulator */
.shred-track{height:14px;border-radius:8px;background:#1c2027;overflow:hidden}
.shred-fill{height:100%;border-radius:8px;transition:width .45s cubic-bezier(.34,1.56,.64,1)}
.shred-fill-agent{background:repeating-linear-gradient(45deg,#fb7185,#fb7185 6px,#e11d48 6px,#e11d48 12px);animation:shred-jitter 1.6s ease-in-out infinite}
.shred-fill-mpp{background:linear-gradient(90deg,#65a30d,#84cc16)}
@keyframes shred-jitter{0%,100%{filter:brightness(1)}50%{filter:brightness(1.2)}}

.pot-track{height:12px;border-radius:8px;background:#1c2027;overflow:hidden}
.pot-fill{height:100%;border-radius:8px;transition:width .8s cubic-bezier(.34,1.56,.64,1);will-change:width;transform:translateZ(0)}
.pot-fill-mortgage{background:linear-gradient(90deg,#38bdf8,#0ea5e9)}
.pot-fill-tax{background:linear-gradient(90deg,#fbbf24,#f59e0b)}
.pot-fill-yield{background:linear-gradient(90deg,#65a30d,#84cc16)}

.key-safe-box{width:104px;height:104px;margin:0 auto;border-radius:18px;border:2px solid var(--line);background:#14171c;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;transition:border-color .3s ease,box-shadow .3s ease}
.key-safe-box.generating,.key-safe-box.pin_ready{border-color:rgba(251,191,36,.6);box-shadow:0 0 24px -6px rgba(251,191,36,.55)}
.key-safe-box.generating{animation:pulse-84 .8s ease-in-out infinite}
.key-safe-box.unlocked,.key-safe-box.consent{border-color:rgba(132,204,22,.6);box-shadow:0 0 24px -6px rgba(132,204,22,.6)}
.key-safe-dock{display:grid;grid-template-columns:repeat(3,6px);gap:4px}
.key-safe-dot{width:6px;height:6px;border-radius:50%;background:var(--line);transition:background-color .3s ease}
.key-safe-box.unlocked .key-safe-dot,.key-safe-box.consent .key-safe-dot{background:#84cc16}

/* smart drawer FAQ accordion — ~70% shorter than the old always-open cards */
.faq-item{border:1px solid var(--line);border-radius:12px;overflow:hidden;background:var(--card-bg);transition:border-color .2s ease}
.faq-item+.faq-item{margin-top:8px}
.faq-item.open{border-color:rgba(132,204,22,.35)}
.faq-item-q{width:100%;display:flex;align-items:center;justify-content:space-between;gap:10px;padding:14px 16px;min-height:48px;background:none;border:none;color:var(--ink);font-size:13px;font-weight:600;text-align:left;cursor:pointer;font-family:inherit}
.faq-item.open .faq-item-q{color:#84cc16}
.faq-item-chevron{transition:transform .25s ease;flex-shrink:0}
.faq-item.open .faq-item-chevron{transform:rotate(90deg);color:#84cc16}
.faq-item-a{padding:0 16px 16px}

/* tactile press feedback for every primary tap target below the fold */
.btn:active,.persona-card:active,.faq-item-q:active,.pill-tab:active{transform:scale(.97)}

/* calculator */
@keyframes pulse-84 {
  0%, 100% {
    transform: scale(1);
    opacity: 0.95;
    box-shadow: 0 0 0 1px rgba(132, 204, 22, 0.4), 0 0 24px -4px rgba(132, 204, 22, 0.6);
  }
  50% {
    transform: scale(1.02);
    opacity: 1;
    box-shadow: 0 0 0 1px rgba(132, 204, 22, 0.6), 0 0 32px 0px rgba(132, 204, 22, 0.8);
  }
}.calc-card{border:1px solid rgba(132,204,22,.3);border-radius:14px;padding:24px;background:radial-gradient(ellipse 120% 100% at 50% 0%,rgba(132,204,22,.07),transparent 60%),#0f1215}
.calc-range{-webkit-appearance:none;width:100%;height:4px;background:#23262b;border-radius:3px;outline:none}
.calc-range::-webkit-slider-thumb{-webkit-appearance:none;width:20px;height:20px;border-radius:999px;background:#84cc16;cursor:pointer;box-shadow:0 0 12px rgba(132,204,22,.85)}
.calc-range::-moz-range-thumb{width:20px;height:20px;border:none;border-radius:999px;background:#84cc16;cursor:pointer;box-shadow:0 0 12px rgba(132,204,22,.85)}
.saved-counter{border:1px solid rgba(132,204,22,.45);border-radius:12px;padding:20px;text-align:center;background:rgba(132,204,22,.05);animation:pulse-84 2.4s ease-in-out infinite}
.saved-amount{font-family:var(--disp);font-weight:800;font-size:38px;color:#84cc16;text-shadow:0 0 18px rgba(132,204,22,.7),0 0 38px rgba(132,204,22,.35)}

/* feature tabs */
.ftab-row{display:grid;grid-template-columns:1fr 1fr 1fr 1fr;gap:10px}
@media(max-width:900px){.ftab-row{grid-template-columns:1fr 1fr}}
@media(max-width:640px){.ftab-row{grid-template-columns:1fr}}
.ftab{display:flex;flex-direction:column;align-items:flex-start;gap:6px;text-align:left;padding:16px;border-radius:12px;border:1px solid rgba(132,204,22,.2);background:var(--card)}
.ftab:hover{border-color:rgba(132,204,22,.5)}
.ftab.active{border-color:#84cc16;background:var(--card);box-shadow:0 0 0 1px rgba(132,204,22,.35),0 0 28px -6px rgba(132,204,22,.55)}
.ftab-label{font-size:13px;font-weight:700;color:var(--ink)}
.ftab.active .ftab-label{color:var(--lime-ink)}
.ftab-panel{border:1px solid rgba(132,204,22,.2);border-radius:12px;padding:22px;margin-top:14px;background:var(--card)}
.wizard-steps{display:flex;align-items:center;margin-bottom:18px}
.wizard-step-dot{width:26px;height:26px;border-radius:999px;display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:700;border:1px solid var(--line);color:var(--muted);flex-shrink:0;background:var(--card)}
.wizard-step-dot.done{background:var(--lime);color:#000;border-color:var(--lime)}
.wizard-step-dot.current{border-color:var(--lime);color:var(--lime-ink);box-shadow:0 0 0 3px rgba(163,255,0,.15)}
.wizard-step-label{font-size:9px;text-transform:uppercase;letter-spacing:.04em;color:var(--muted);margin:0 8px 0 6px;white-space:nowrap}
.wizard-step-label.active{color:var(--lime-ink)}
.wizard-connector{flex:1;height:1px;background:var(--line);margin:0 2px;min-width:8px}
.wizard-connector.done{background:var(--lime)}

/* view transition micro-animation */
@keyframes viewFadeIn{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:translateY(0)}}
.view-enter{animation:viewFadeIn .18s cubic-bezier(0.16,1,0.3,1) forwards}

/* KYC camera capture */
.kyc-shot{margin-bottom:16px}
.kyc-viewfinder{width:100%;border:1px dashed rgba(163,255,0,.4);border-radius:10px;padding:22px 16px;display:flex;flex-direction:column;align-items:center;gap:8px;font-size:11px;background:rgba(163,255,0,.03);cursor:pointer;color:var(--muted)}
.kyc-viewfinder:hover{border-color:rgba(163,255,0,.7)}
.kyc-preview{position:relative;width:100%;border-radius:10px;overflow:hidden;border:1px solid rgba(163,255,0,.4)}
.kyc-preview img{width:100%;max-height:160px;object-fit:cover;display:block}
.kyc-preview-bar{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:8px 10px;background:rgba(163,255,0,.08)}

/* hub multi-select (Step 3) */
.hub-card{display:flex;align-items:flex-start;gap:10px;width:100%;text-align:left;padding:14px;border-radius:12px;border:1px solid rgba(132,204,22,.2);background:var(--surface-elevated)}
.hub-card.active{border-color:#84cc16;box-shadow:0 0 0 1px rgba(132,204,22,.35),0 0 28px -6px rgba(132,204,22,.55)}
.hub-card.locked{opacity:.85;cursor:default}
.hub-check{width:18px;height:18px;border-radius:5px;border:1px solid var(--line);flex-shrink:0;display:flex;align-items:center;justify-content:center;margin-top:1px}
.hub-card.active .hub-check{background:var(--lime);border-color:var(--lime);color:#000}
.wizard-summary-bar{position:sticky;bottom:0;margin:16px -22px -22px;padding:14px 22px;background:rgba(12,13,15,.96);backdrop-filter:blur(10px);border-top:1px solid rgba(132,204,22,.3);display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}

/* verification status banner */
.verify-banner{position:sticky;top:calc(56px + env(safe-area-inset-top));z-index:35;display:flex;align-items:center;gap:10px;padding:10px 16px;background:rgba(251,191,36,.12);border-bottom:1px solid rgba(251,191,36,.35);color:var(--amber-ink);font-size:12px;line-height:1.5}
.delegate-banner{position:sticky;top:calc(56px + env(safe-area-inset-top));z-index:34;display:flex;align-items:center;justify-content:space-between;gap:10px;padding:9px 16px;background:rgba(163,255,0,.08);border-bottom:1px solid rgba(163,255,0,.3);color:var(--lime-ink);font-size:11px;line-height:1.5;flex-wrap:wrap}

/* mobile nav / PWA streamline utilities */
.hidden{display:none!important}
/* .md\:inline was missing entirely — every "hidden md:inline" span (Add Workspace, Ask PropPilot,
   Professional / Partner Login, Return to Consumer/Landlord Workspace, Ask AI Search) had no rule
   to ever un-hide it again above 768px, so they rendered icon-only at every viewport including
   desktop, not just mobile as intended. */
@media(min-width:768px){.md\:inline{display:inline!important}.md\:inline-flex{display:inline-flex!important}.md\:hidden{display:none!important}}
@media(max-width:639px){.sm\:hidden{display:none!important}}
@media(min-width:640px){.sm\:inline{display:inline!important}}
/* Professional / Partner Login is now also reachable from the public side drawer (#sideNavToggle
   is visible at every viewport for signed-out visitors too), so the header's own copy of it can
   drop out below 768px — freeing the room "Log In"/"Create Account" need to avoid overflowing a
   320-375px header alongside the search icon and hamburger. */
@media(max-width:768px){.header-pro-login{display:none!important}}
.overflow-x-hidden{overflow-x:hidden}.max-w-full{max-width:100%}
.w-9{width:36px}.h-9{height:36px}
.rounded-full{border-radius:9999px}
.border{border-width:1px;border-style:solid}.border-2{border-width:2px;border-style:solid}
.bg-neutral-800{background:#262626}
.border-neutral-700{border-color:#404040}.border-neutral-900{border-color:#171717}
.text-xs{font-size:12px}.font-bold{font-weight:700}.text-white{color:#fff}
.absolute{position:absolute}.top-0{top:0}.right-0{right:0}
.w-2\.5{width:10px}.h-2\.5{height:10px}
.w-8{width:32px}.h-8{height:32px}.rounded-lg{border-radius:8px}
.bg-lime-400{background:#a3ff00}
.hover\:border-lime-400:hover{border-color:#a3ff00}
.focus\:outline-none:focus{outline:none}

/* --- Formerly a second inline <style> block (AUTOMATED AST CONTRACT MODAL / print sheet) --- */
/* --- FORMAL DOCUMENT PRINT SHEET — white-paper branded UK statement, shared by #receiptModal
     and #statementModal. Styled to look identical whether previewed on screen or printed. --- */
.statement-print-sheet{background:#ffffff;color:#0f172a;border-radius:10px;padding:28px;font-family:var(--sans, Arial, sans-serif)}
.statement-print-sheet,.statement-print-sheet *{color:#0f172a}
.sps-header{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;border-bottom:2px solid #0f172a;padding-bottom:16px;margin-bottom:20px;flex-wrap:wrap}
.sps-logo{font-size:19px;font-weight:800;letter-spacing:-.01em}
.sps-logo .lime{color:#4d7c0f}
.sps-tagline{font-size:9.5px;color:#64748b;margin-top:4px;text-transform:uppercase;letter-spacing:.05em;font-weight:600}
.sps-meta{text-align:right;font-size:10.5px;color:#334155;border:1px solid #e2e8f0;border-radius:6px;padding:10px 14px;min-width:220px}
.sps-meta-row{display:flex;justify-content:space-between;gap:16px;margin-bottom:3px}
.sps-meta-row span:first-child{color:#64748b}
.sps-stamp{display:inline-block;margin-top:8px;border:2px solid #16a34a;color:#16a34a;font-weight:800;font-size:9.5px;letter-spacing:.04em;padding:4px 10px;border-radius:4px}
.sps-parties{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-bottom:20px}
.sps-party-label{font-size:9px;text-transform:uppercase;letter-spacing:.06em;color:#64748b;margin-bottom:6px;font-weight:700}
.sps-party p{font-size:11px;line-height:1.65;margin:0}
.sps-table{width:100%;border-collapse:collapse;font-size:10.5px}
.sps-table th{text-align:left;background:#f1f5f9;border:1px solid #e2e8f0;padding:8px 10px;font-size:8.5px;text-transform:uppercase;letter-spacing:.04em;color:#475569;font-weight:700}
.sps-table td{border:1px solid #e2e8f0;padding:8px 10px;vertical-align:top}
.sps-table td.num,.sps-table th.num{text-align:right;white-space:nowrap}
.sps-total-bar{display:flex;justify-content:flex-end;margin-top:0}
.sps-total-bar table{border-collapse:collapse;font-size:11.5px}
.sps-total-bar td{padding:5px 12px}
.sps-total-bar td:first-child{color:#64748b}
.sps-total-bar tr.grand td{font-weight:800;font-size:15px;border-top:2px solid #0f172a;color:#0f172a;padding-top:8px}
.sps-footer{margin-top:26px;border-top:1px solid #e2e8f0;padding-top:12px;font-size:9px;color:#64748b;line-height:1.65}
.sps-footer-meta{display:flex;justify-content:space-between;flex-wrap:wrap;gap:8px;margin-top:10px;font-size:8px;color:#94a3b8;font-family:var(--mono,monospace)}

@page{size:A4 portrait;margin:16mm 14mm 16mm 14mm}
@media print{
  html,body{background:#ffffff!important}
  body>*:not(.ast-print-host){display:none!important}
  .ast-print-host{display:block!important;position:static!important;background:#ffffff!important}
  .ast-print-host .drawer-backdrop,.ast-print-host .modal-bd,.ast-print-host .icon-btn,.ast-print-host .ast-hide-print{display:none!important}
  .ast-print-host .triage-drawer,.ast-print-host .modal-box{position:static!important;max-width:100%!important;max-height:none!important;overflow:visible!important;box-shadow:none!important;border:none!important;color:#0f172a!important;background:#ffffff!important}
  .ast-print-host .modal-box{padding:0!important}
  .ast-print-host .modal-box *{color:#0f172a!important}
  .ast-print-host .ast-print-area{max-height:none!important;overflow:visible!important;color:#0f172a!important;background:#ffffff!important;border:none!important}
  .statement-print-sheet{padding:0!important;border-radius:0!important;box-shadow:none!important}
  .statement-print-sheet .sps-stamp,.statement-print-sheet .sps-stamp *{color:#16a34a!important;border-color:#16a34a!important}
  .statement-print-sheet .sps-logo .lime{color:#4d7c0f!important}
}

html {
  transition: font-size 0.15s ease-out;
}