/* ============================================================
   OPEN DOORWAY, PREMIUM ("AURUM") DESIGN LAYER
   Identity: the Instagram brand system, light lavender-white,
   Poppins display with two-tone gradient headlines, icon-tile
   cards, purple reserved for accents and actions.
   Light-first; loads after nocturne.css and overrides it.
   ============================================================ */
/* Display face, self-hosted (latin subset, OFL). The previous @import pulled
   Poppins from fonts.googleapis.com, which broke the offline promise and added a
   render-blocking third-party request. Only the weights this layer uses ship. */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../fonts/poppins-600.woff2') format('woff2');
}
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../fonts/poppins-700.woff2') format('woff2');
}
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url('../fonts/poppins-800.woff2') format('woff2');
}

/* (legacy note: Bloomberg × Apple × Stripe direction superseded
   by the Instagram brand system, which is now the identity) */

/* ------------------------------------------------------------
   1. TOKEN RE-POINT, premium light identity.
   The same --c-* triplets the whole app consumes, re-pointed.
   ------------------------------------------------------------ */
:root,
html.light {
  /* surfaces: lavender-white canvas, pure white cards */
  --c-background: 248 247 253;      /* #F8F7FD, illuminated lavender-white canvas */
  --c-surface: 255 255 255;         /* pure white */
  --c-surface-container: 246 244 251;   /* lavender wash (post icon tiles) */
  --c-surface-dim: 238 236 246;
  /* brand: premium purple gradient anchors, signature palette (2026-09):
     primary #5522DB · secondary #7443E8 · light #C3B2F5 · bg #F0EBFD */
  --c-primary: 85 34 219;          /* #5522DB */
  --c-primary-ink: 85 34 219;      /* purple text/borders on light surfaces */
  --c-primary-dark: 67 23 176;     /* #4317B0 */
  --c-primary-light: 195 178 245;   /* #C3B2F5 */
  --c-on-primary: 255 255 255;
  /* ink + lines */
  --c-on-surface: 24 24 27;         /* zinc-900 */
  --c-on-surface-variant: 82 82 91; /* zinc-600 */
  --c-text-muted: 161 161 170;      /* zinc-400 */
  --c-outline: 212 212 216;
  --c-outline-variant: 228 228 231;
  /* semantics: green bullish · red risk · blue insight.
     *-bg tokens are soft surface TINTS (50-scale), never the solid
     foreground, a previous edit pointed them at the accent colors,
     which painted red-600-on-red-600 on any unmodified bg usage. */
  --c-success: 5 150 105;           /* emerald-600 */
  --c-error: 220 38 38;             /* red-600 */
  --c-amber: 217 119 6;             /* amber-600 */
  --c-info: 37 99 235;              /* blue-600 */
  --c-success-bg: 236 253 245;      /* emerald-50 */
  --c-error-bg: 254 242 242;        /* red-50 */
  --c-amber-bg: 255 251 235;        /* amber-50 */
  --c-info-bg: 239 246 255;         /* blue-50 */
  /* brand gradient handles, signature purple ramp */
  --grad-a: #5522DB;
  --grad-b: #7443E8;
  --grad: linear-gradient(135deg, var(--grad-a), var(--grad-b));
  /* ambient wash + glow system: the page should feel illuminated */
  --ambient: radial-gradient(circle at top right, rgb(85 34 219 / .08), transparent 40%);
  --glow-soft: 0 0 50px rgb(85 34 219 / .15);
  --glow-lift: 0 20px 50px rgb(85 34 219 / .08), 0 5px 15px rgb(0 0 0 / .04);
  /* elevation: soft, wide, low-opacity (Stripe-soft) */
  --shadow-premium: 0 1px 2px rgb(24 24 27 / 0.04), 0 8px 24px -8px rgb(24 24 27 / 0.10);
  --shadow-premium-lg: 0 2px 4px rgb(24 24 27 / 0.05), 0 16px 48px -12px rgb(76 29 149 / 0.16);
  --radius-premium: 20px;
}

/* The nocturne class no longer means "near-black" - under Aurum the
   product is light-first. Keep dark mode working by re-pointing there. */
html.nocturne {
  --c-background: 0 0 0;             /* #000000 canvas */
  --c-surface: 13 13 15;
  --c-surface-container: 21 21 25;
  --c-surface-dim: 28 28 33;
  --c-primary: 85 34 219;          /* #5522DB, the brand purple, same as light */
  --c-primary-ink: 156 123 240;     /* #9C7BF0, purple as ink on near-black */
  --c-primary-dark: 67 23 176;     /* #4317B0 */
  --c-primary-light: 38 28 61;
  --c-on-surface: 244 244 245;
  --c-on-surface-variant: 176 176 190;
  --c-text-muted: 136 136 150;
  --c-outline: 60 58 74;
  --c-outline-variant: 44 42 56;
  /* dark tints for the *-bg family (950-scale): washes must stay
     consumable under bright text in nocturne too. */
  --c-success-bg: 2 44 34;          /* emerald-950 */
  --c-error-bg: 69 10 10;           /* red-950 */
  --c-amber-bg: 69 26 3;            /* amber-950 */
  --c-info-bg: 23 37 84;            /* blue-950 */
  --shadow-premium: 0 1px 2px rgb(0 0 0 / 0.5), 0 8px 24px -8px rgb(0 0 0 / 0.55);
  --shadow-premium-lg: 0 2px 4px rgb(0 0 0 / 0.5), 0 16px 48px -12px rgb(0 0 0 / 0.6);
}

/* Legacy token bridge, components.css/design-tokens.css still point
   --brand-* at the pre-signature deep indigo (#5522DB). Re-point so the
   whole component layer speaks the signature ramp. Loads last: wins. */
:root {
  --brand-primary: #5522DB;
  --brand-primary-hover: #4317B0;
  --brand-primary-ink: #5522DB;
  --brand-primary-light: #F0EBFD;
  --brand-primary-10: rgb(85 34 219 / .10);
  --brand-primary-20: rgb(85 34 219 / .20);
  --brand-gradient: linear-gradient(135deg, #5522DB 0%, #7443E8 100%);
  --border-focus: #5522DB;
  --shadow-brand: 0 4px 20px rgb(85 34 219 / .25);
  --shadow-brand-lg: 0 8px 40px rgb(85 34 219 / .35);
}
html.dark {
  --brand-primary: #5522DB;
  --brand-primary-hover: #4317B0;
  --brand-primary-ink: #9C7BF0;
  --brand-primary-light: rgba(167, 139, 250, 0.10);
  --brand-primary-10: rgba(167, 139, 250, 0.10);
  --brand-primary-20: rgba(167, 139, 250, 0.20);
  --brand-gradient: linear-gradient(135deg, #5522DB 0%, #7443E8 100%);
  --border-focus: #9C7BF0;
}

body {
  font-feature-settings: "ss01" on, "cv11" on, "tnum" off; /* Inter display defaults */
}

/* ------------------------------------------------------------
   2. KPI CARDS, premium command-center stat cards.
   Preserves .kpi-card class (live KPI wiring targets these).
   ------------------------------------------------------------ */
.kpi-card {
  border-radius: var(--r-card);
  border: none;
  background: rgb(var(--c-surface));
  box-shadow: var(--shadow-premium);
  transition: transform .25s cubic-bezier(.16,1,.3,1), box-shadow .25s;
}
.kpi-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-premium-lg);
}
/* brand hairline on top */
.kpi-card::before {
  background: var(--grad);
  height: 3px;
  border-radius: 3px 3px 0 0;
  opacity: 1;
}
/* Numbers stay solid ink (Stripe rule) - gradient-clip on text rendered
   placeholders as broken dashes in dark mode. Purple lives in accents. */
.kpi-card [id^="kpi-"],
.kpi-card [id^="hero-"] {
  color: rgb(var(--c-on-surface));
  background: none;
  -webkit-background-clip: initial;
  background-clip: initial;
}
/* icon chips get gradient washes */
.kpi-card .w-8.h-8 {
  background: linear-gradient(135deg, rgb(var(--c-primary) / .12), rgb(var(--c-primary) / .04));
  border-radius: 12px;
}

/* number count-up reveal */
@keyframes num-reveal {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}
.num-reveal { animation: num-reveal .5s cubic-bezier(.16,1,.3,1) both; }

/* ------------------------------------------------------------
   3. SURFACES, cards, panels, sections.
   ------------------------------------------------------------ */
.bg-surface.border,
[class*="bg-surface"][class*="border-outline"] {
  border-radius: 18px;
}
.bg-surface.border {
  box-shadow: var(--shadow-premium);
  border-color: rgb(var(--c-outline-variant) / .7);
}

/* glassmorphism where appropriate: topbars and floating panels */
.glass,
.topbar.glass {
  background: rgb(255 255 255 / .72);
  -webkit-backdrop-filter: blur(20px) saturate(160%);
  backdrop-filter: blur(20px) saturate(160%);
  border-bottom: 1px solid rgb(var(--c-outline-variant) / .6);
}
html.nocturne .glass,
html.nocturne .topbar.glass {
  background: rgb(19 18 26 / .72);
}
.sidebar {
  box-shadow: none;
  border-right: 1px solid rgb(var(--c-outline-variant) / .6);
}

/* Instagram-system typography: Poppins display + two-tone headlines.
   h1/hero headings go Poppins; the last word picks up the gradient. */
.font-display {
  font-family: 'Poppins', 'Inter', sans-serif !important;
  letter-spacing: -0.03em;
}
main h1, main h2, .hero-h, .page-title {
  font-family: 'Poppins', 'Inter', sans-serif;
  letter-spacing: -0.03em;
}
.brand-gradient-text {
  background: var(--grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
/* gradient eyebrow caps (post's "WHY INVESTORS LOVE") */
.eyebrow-caps, .kpi-card > div:first-child > span:first-child {
  letter-spacing: .12em;
}
.bg-primary:not(.kpi-card) {
  background: var(--grad);
  box-shadow: 0 4px 14px -4px rgb(85 34 219 / .5);
  transition: transform .2s cubic-bezier(.16,1,.3,1), box-shadow .2s;
}
.bg-primary:not(.kpi-card):hover {
  transform: translateY(-1px);
  box-shadow: 0 8px 20px -6px rgb(85 34 219 / .55);
}

/* brand radius scale, Apple-touchable: nothing below 14px on cards. */
:root {
  --r-card: 20px;
  --r-card-lg: 24px;
  --r-hero: 28px;
}

/* ------------------------------------------------------------
   4. INVESTMENT CARD, property card as mini investment report.
   ------------------------------------------------------------ */
.invest-card {
  background: rgb(var(--c-surface));
  border-radius: var(--r-card);
  overflow: hidden;
  box-shadow: var(--shadow-premium);
  border: 1px solid rgb(var(--c-outline-variant) / .6);
  transition: transform .28s cubic-bezier(.16,1,.3,1), box-shadow .28s;
  display: flex;
  flex-direction: column;
}
.invest-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-premium-lg);
}
.invest-card .invest-img {
  position: relative;
  aspect-ratio: 16 / 10;
  overflow: hidden;
}
.invest-card .invest-img img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform .6s cubic-bezier(.16,1,.3,1);
}
.invest-card:hover .invest-img img { transform: scale(1.05); }
.invest-card .invest-img::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 55%, rgb(24 24 27 / .38));
  pointer-events: none;
}
.invest-chip {
  position: absolute; z-index: 2;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 10px; font-weight: 700;
  letter-spacing: .04em;
  -webkit-backdrop-filter: blur(12px) saturate(160%);
  backdrop-filter: blur(12px) saturate(160%);
  background: rgb(255 255 255 / .82);
  color: rgb(var(--c-on-surface));
  box-shadow: 0 2px 8px rgb(24 24 27 / .12);
}
html.nocturne .invest-chip { background: rgb(19 18 26 / .82); color: rgb(var(--c-on-surface)); }
.invest-chip.score {
  background: var(--grad);
  color: #fff;
  font-variant-numeric: tabular-nums;
}
.invest-body { padding: 16px 18px 18px; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.invest-title { font-size: 15px; font-weight: 800; letter-spacing: -0.01em; color: rgb(var(--c-on-surface)); }
.invest-sub { font-size: 11px; color: rgb(var(--c-on-surface-variant)); display: flex; align-items: center; gap: 4px; }
.invest-metrics {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
  padding: 10px 0;
  border-top: 1px solid rgb(var(--c-outline-variant) / .7);
  border-bottom: 1px solid rgb(var(--c-outline-variant) / .7);
}
.invest-metric .m-label { font-size: 9px; font-weight: 600; text-transform: uppercase; letter-spacing: .08em; color: rgb(var(--c-text-muted)); }
.invest-metric .m-value { font-size: 13px; font-weight: 800; font-variant-numeric: tabular-nums; color: rgb(var(--c-on-surface)); }
.invest-metric .m-value.pos { color: rgb(var(--c-success)); }
.invest-metric .m-value.neg { color: rgb(var(--c-error)); }
.invest-foot {
  display: flex; align-items: center; justify-content: space-between;
  gap: 8px; margin-top: auto;
}
.invest-price { font-size: 18px; font-weight: 900; letter-spacing: -0.02em; color: rgb(var(--c-on-surface)); font-variant-numeric: tabular-nums; }

/* signal dot: green bullish, amber neutral, red risk */
.signal { display: inline-flex; align-items: center; gap: 5px; font-size: 10px; font-weight: 700; padding: 3px 9px; border-radius: 999px; }
.signal .dot { width: 7px; height: 7px; border-radius: 999px; }
.signal.bullish { color: rgb(var(--c-success)); background: rgb(var(--c-success) / .09); }
.signal.bullish .dot { background: rgb(var(--c-success)); }
.signal.neutral { color: rgb(var(--c-amber)); background: rgb(var(--c-amber) / .10); }
.signal.neutral .dot { background: rgb(var(--c-amber)); }
.signal.risk { color: rgb(var(--c-error)); background: rgb(var(--c-error) / .09); }
.signal.risk .dot { background: rgb(var(--c-error)); }
.signal.info { color: rgb(var(--c-info)); background: rgb(var(--c-info) / .09); }
.signal.info .dot { background: rgb(var(--c-info)); }

/* meter bar (demand / risk / scores) */
.meter { height: 5px; border-radius: 999px; background: rgb(var(--c-surface-dim)); overflow: hidden; }
.meter > span { display: block; height: 100%; border-radius: 999px; transition: width .8s cubic-bezier(.16,1,.3,1); }
.meter > span.good { background: linear-gradient(90deg, rgb(var(--c-success) / .75), rgb(var(--c-success))); }
.meter > span.mid { background: linear-gradient(90deg, rgb(var(--c-amber) / .75), rgb(var(--c-amber))); }
.meter > span.bad { background: linear-gradient(90deg, rgb(var(--c-error) / .75), rgb(var(--c-error))); }
.meter > span.brand { background: var(--grad); }

/* ------------------------------------------------------------
   5. AI INSIGHT CARDS.
   ------------------------------------------------------------ */
.insight {
  position: relative;
  border-radius: 18px;
  padding: 16px 18px;
  background: rgb(var(--c-surface));
  border: 1px solid rgb(var(--c-outline-variant) / .6);
  box-shadow: var(--shadow-premium);
  overflow: hidden;
  transition: transform .25s cubic-bezier(.16,1,.3,1), box-shadow .25s;
}
.insight:hover { transform: translateY(-2px); box-shadow: var(--shadow-premium-lg); }
.insight::before {
  content: '';
  position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
  background: var(--grad);
}
.insight.blue::before { background: linear-gradient(180deg, rgb(var(--c-info)), rgb(var(--c-info) / .4)); }
.insight.green::before { background: linear-gradient(180deg, rgb(var(--c-success)), rgb(var(--c-success) / .4)); }
.insight.red::before { background: linear-gradient(180deg, rgb(var(--c-error)), rgb(var(--c-error) / .4)); }
.insight .i-kicker {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 9px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
  color: rgb(var(--c-primary-ink));
  margin-bottom: 6px;
}
.insight.blue .i-kicker { color: rgb(var(--c-info)); }
.insight.green .i-kicker { color: rgb(var(--c-success)); }
.insight.red .i-kicker { color: rgb(var(--c-error)); }
.insight .i-title { font-size: 13.5px; font-weight: 800; color: rgb(var(--c-on-surface)); margin-bottom: 4px; }
.insight .i-body { font-size: 12px; line-height: 1.55; color: rgb(var(--c-on-surface-variant)); }
.insight .i-conf {
  margin-top: 10px; display: flex; align-items: center; gap: 8px;
  font-size: 10px; font-weight: 700; color: rgb(var(--c-text-muted));
}

/* AI insight reveal animation */
@keyframes insight-reveal {
  from { opacity: 0; transform: translateY(10px) scale(.985); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
.insight.reveal { animation: insight-reveal .55s cubic-bezier(.16,1,.3,1) both; }
.insight.reveal:nth-child(2) { animation-delay: .08s; }
.insight.reveal:nth-child(3) { animation-delay: .16s; }
.insight.reveal:nth-child(4) { animation-delay: .24s; }

/* ------------------------------------------------------------
   6. RISK VISUALIZATION.
   ------------------------------------------------------------ */
.risk-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.risk-cell {
  padding: 14px 16px;
  border-radius: 16px;
  background: rgb(var(--c-surface-container) / .6);
  border: 1px solid rgb(var(--c-outline-variant) / .7);
}
.risk-cell .r-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.risk-cell .r-name { font-size: 11.5px; font-weight: 700; color: rgb(var(--c-on-surface)); }
.risk-cell .r-val { font-size: 12px; font-weight: 800; font-variant-numeric: tabular-nums; }
.risk-cell .r-val.low { color: rgb(var(--c-success)); }
.risk-cell .r-val.med { color: rgb(var(--c-amber)); }
.risk-cell .r-val.high { color: rgb(var(--c-error)); }

/* risk gauge ring */
.ring { transform: rotate(-90deg); }
.ring .ring-track { stroke: rgb(var(--c-surface-dim)); }
.ring .ring-fill {
  stroke: var(--grad-a);
  stroke-linecap: round;
  transition: stroke-dashoffset 1s cubic-bezier(.16,1,.3,1);
}

/* ------------------------------------------------------------
   7. SCREENER (intelligence engine filters).
   ------------------------------------------------------------ */
.screener-bar {
  background: rgb(var(--c-surface));
  border-radius: var(--radius-premium);
  box-shadow: var(--shadow-premium);
  padding: 14px 16px;
  display: flex; flex-wrap: wrap; gap: 10px; align-items: center;
}
.screener-field { display: flex; flex-direction: column; gap: 4px; }
.screener-field label { font-size: 9px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: rgb(var(--c-text-muted)); }
.screener-field select,
.screener-field input {
  background: rgb(var(--c-surface-container) / .7);
  border: 1px solid rgb(var(--c-outline-variant));
  border-radius: 12px;
  padding: 8px 12px;
  font-size: 12.5px; font-weight: 600;
  color: rgb(var(--c-on-surface));
  min-width: 118px;
  transition: border-color .2s, box-shadow .2s;
}
.screener-field select:focus,
.screener-field input:focus {
  outline: none;
  border-color: rgb(var(--c-primary-ink));
  box-shadow: 0 0 0 3px rgb(var(--c-primary) / .12);
}
.screener-field select option { font-weight: 500; }

/* ------------------------------------------------------------
   8. PAGE SCAFFOLDING, page hero + section headers.
   ------------------------------------------------------------ */
.page-hero { padding: 44px 40px 8px; }
.page-hero .ph-kicker {
  font-size: 10px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase;
  background: var(--grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  margin-bottom: 8px;
}
.page-hero h2 {
  font-size: 34px; font-weight: 800; letter-spacing: -0.025em; line-height: 1.12;
  color: rgb(var(--c-on-surface));
}
.page-hero .ph-sub { margin-top: 10px; font-size: 14px; line-height: 1.6; color: rgb(var(--c-on-surface-variant)); max-width: 640px; }
.section-head {
  display: flex; align-items: baseline; justify-content: space-between;
  margin-bottom: 14px;
}
.section-head h3 { font-size: 16px; font-weight: 800; letter-spacing: -0.01em; color: rgb(var(--c-on-surface)); }
.section-head a, .section-head .link { font-size: 12px; font-weight: 700; color: rgb(var(--c-primary-ink)); }

/* ------------------------------------------------------------
   8b. TERMINAL STRIP, Bloomberg-style dense white header.
   Small-caps labels, tabular data, hairline rules. No decoration.
   ------------------------------------------------------------ */
.terminal-strip {
  background: rgb(var(--c-surface));
  border-bottom: 1px solid rgb(var(--c-outline-variant));
}
.terminal-strip .ts-label {
  font-size: 9px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase;
  color: rgb(var(--c-text-muted)); white-space: nowrap;
}
.terminal-strip .ts-title {
  font-size: 13.5px; font-weight: 800; letter-spacing: -0.01em;
  color: rgb(var(--c-on-surface)); white-space: nowrap;
}
.terminal-strip .ts-stat {
  font-size: 11px; font-weight: 700; font-variant-numeric: tabular-nums;
  color: rgb(var(--c-on-surface-variant)); white-space: nowrap;
}
.terminal-strip .ts-stat b { color: rgb(var(--c-primary-ink)); font-weight: 800; }
.terminal-strip .ts-sep { width: 1px; height: 18px; background: rgb(var(--c-outline-variant)); flex: none; }
/* dense strip: never wrap, never show a scrollbar */
.terminal-strip > div { flex-wrap: nowrap !important; scrollbar-width: none; }
.terminal-strip > div::-webkit-scrollbar { display: none; }

/* ------------------------------------------------------------
   9. MOBILE BOTTOM NAV, premium glass, 5 destinations.
   ------------------------------------------------------------ */
#mobile-bottom-nav {
  background: rgb(255 255 255 / .85) !important;
  -webkit-backdrop-filter: blur(20px) saturate(160%);
  backdrop-filter: blur(20px) saturate(160%);
  border-top: 1px solid rgb(var(--c-outline-variant) / .6) !important;
  height: 62px !important;
}
/* The bar is !important, so it needs its own dark rule: without it a white
   strip sits under every nocturnal page. Same surface as the topbar glass. */
html.nocturne #mobile-bottom-nav,
html.dark #mobile-bottom-nav {
  background: rgb(var(--c-surface) / .88) !important;
  border-top-color: rgb(var(--c-outline-variant) / .8) !important;
}
#mobile-bottom-nav a { border-radius: 12px; padding: 5px 0 !important; transition: color .2s; }
#mobile-bottom-nav a.active { color: rgb(var(--c-primary-ink)) !important; }
#mobile-bottom-nav a.active .material-symbols-outlined { font-variation-settings: 'FILL' 1; }

/* ------------------------------------------------------------
   11. THE GLOW SYSTEM, every major surface feels slightly
   illuminated. Soft purple aura, never neon.
   ------------------------------------------------------------ */
:root {
  --glow-sm: 0 8px 30px rgb(67 23 176 / .08), 0 0 60px rgb(67 23 176 / .05);
  --glow-lg: 0 16px 44px -8px rgb(67 23 176 / .16), 0 0 80px rgb(67 23 176 / .08);
}
.kpi-card, .invest-card, .insight {
  box-shadow: var(--glow-sm);
}
.kpi-card:hover, .invest-card:hover, .insight:hover {
  box-shadow: var(--glow-lg);
}

/* White-first canvas: an almost-white canvas with a faint violet
   bloom at the top so pure-white cards read as floating. */
html:not(.nocturne):not(.dark) body {
  background:
    radial-gradient(1200px 420px at 50% -140px, rgb(139 92 246 / .07), transparent 70%),
    linear-gradient(180deg, #fdfdff 0%, #faf9fd 100%) !important;
}

/* Gradient CTA, the single primary action color on any page. */
.btn-grad {
  background: linear-gradient(135deg, #4317B0, #7443E8);
  color: #fff;
  border-radius: 14px;
  box-shadow: 0 8px 24px -8px rgb(67 23 176 / .5);
  transition: transform .2s cubic-bezier(.16,1,.3,1), box-shadow .2s;
}
.btn-grad:hover {
  transform: translateY(-1px);
  box-shadow: 0 12px 28px -8px rgb(67 23 176 / .55);
}

/* ------------------------------------------------------------
   12. HUGE HEADLINES, typography does the selling.
   ------------------------------------------------------------ */
.headline-xl {
  font-family: 'Poppins', 'Inter', sans-serif;
  font-weight: 800;
  letter-spacing: -0.035em;
  line-height: 1.05;
  font-size: clamp(28px, 3.2vw, 40px);
}
.stat-hero {
  font-family: 'Poppins', 'Inter', sans-serif;
  font-weight: 800;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
  font-size: clamp(36px, 4vw, 52px);
  line-height: 1;
}

/* ------------------------------------------------------------
   13. FLOATING GLASS CARDS, data feels alive: ROI, cash flow,
   risk and market signals rendered as semi-transparent tiles.
   ------------------------------------------------------------ */
.glass-float {
  background: rgb(255 255 255 / .78);
  -webkit-backdrop-filter: blur(16px) saturate(160%);
  backdrop-filter: blur(16px) saturate(160%);
  border: 1px solid rgb(255 255 255 / .9);
  border-radius: 18px;
  box-shadow: 0 4px 16px rgb(24 24 27 / .06), var(--glow-sm);
  padding: 10px 16px;
  display: inline-flex;
  flex-direction: column;
  gap: 2px;
  min-width: 108px;
}
html.nocturne .glass-float {
  background: rgb(19 18 26 / .78);
  border-color: rgb(var(--c-outline-variant) / .8);
  box-shadow: 0 4px 16px rgb(0 0 0 / .4);
}
.glass-float .gf-label {
  font-size: 9px; font-weight: 800; letter-spacing: .12em;
  text-transform: uppercase; color: rgb(var(--c-text-muted));
  white-space: nowrap;
}
.glass-float .gf-value {
  font-family: 'Poppins', 'Inter', sans-serif;
  font-size: 20px; font-weight: 800; letter-spacing: -0.02em;
  color: rgb(var(--c-on-surface)); font-variant-numeric: tabular-nums;
  line-height: 1.15; white-space: nowrap;
}
.glass-float .gf-sub {
  font-size: 10px; font-weight: 700; white-space: nowrap;
}
.glass-float .gf-sub.pos { color: rgb(var(--c-success)); }
.glass-float .gf-sub.neg { color: rgb(var(--c-error)); }

/* ------------------------------------------------------------
   14. TOP OPPORTUNITY BAND, the one deal the user must see.
   ------------------------------------------------------------ */
.top-opp {
  position: relative;
  margin-top: 16px;
  padding: 12px 18px;
  border-radius: 16px;
  background: linear-gradient(135deg, rgb(85 34 219 / .07), rgb(168 85 247 / .03));
  border: 1px solid rgb(85 34 219 / .14);
  display: flex; align-items: center; gap: 18px; flex-wrap: wrap;
}
.top-opp::before {
  content: '';
  position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
  border-radius: 3px 0 0 3px;
  background: var(--grad);
}
.top-opp .to-kicker {
  font-size: 9px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase;
  color: #5522DB;
}
html.nocturne .top-opp .to-kicker { color: rgb(var(--c-primary-ink)); }
.top-opp .to-name { font-size: 13px; font-weight: 800; color: rgb(var(--c-on-surface)); }
.top-opp .to-name .muted { font-weight: 600; color: rgb(var(--c-on-surface-variant)); }
.top-opp .to-value {
  font-family: 'Poppins', 'Inter', sans-serif;
  font-size: 24px; font-weight: 800; letter-spacing: -0.02em;
  color: #5522DB; font-variant-numeric: tabular-nums; line-height: 1;
}
html.nocturne .top-opp .to-value { color: rgb(var(--c-primary-ink)); }
.top-opp .to-value .unit {
  font-family: 'Inter', sans-serif;
  font-size: 11px; font-weight: 700; letter-spacing: 0;
  color: rgb(var(--c-on-surface-variant));
}

/* ------------------------------------------------------------
   15. AI INSIGHT STRIP, one line of intelligence per card.
   ------------------------------------------------------------ */
.invest-insight {
  display: flex; align-items: center; gap: 6px;
  font-size: 10px; font-weight: 700;
  color: rgb(var(--c-info));
  background: rgb(var(--c-info) / .07);
  border-radius: 10px;
  padding: 5px 9px;
}
.invest-insight .material-symbols-outlined { font-size: 12px; }

/* ------------------------------------------------------------
   16. SOFT 3D ICON TILES, Revolut-style depth for empty
   states, onboarding and hero accents.
   ------------------------------------------------------------ */
.soft-3d {
  background: linear-gradient(145deg, #ffffff 0%, #EAE3FB 55%, #d5c8f4 100%);
  box-shadow:
    0 12px 24px -10px rgb(85 34 219 / .30),
    inset 0 -3px 6px rgb(85 34 219 / .10),
    inset 0 2px 3px rgb(255 255 255 / .95);
}
html.nocturne .soft-3d {
  background: linear-gradient(145deg, rgb(var(--c-surface)) 0%, rgb(var(--c-primary-light)) 100%);
  box-shadow: 0 12px 24px -10px rgb(0 0 0 / .5), inset 0 2px 3px rgb(255 255 255 / .06);
}

/* ------------------------------------------------------------
   17. FACT CHIPS, property details, de-emphasized by design.
   ------------------------------------------------------------ */
.fact-chip {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 5px 12px;
  border-radius: 999px;
  background: rgb(var(--c-surface-container) / .7);
  border: 1px solid rgb(var(--c-outline-variant) / .8);
  font-size: 11px; font-weight: 700;
  color: rgb(var(--c-on-surface-variant));
}

/* ------------------------------------------------------------
   18. PURPLE MAP, white canvas, purple heat zones, purple pins.
   ------------------------------------------------------------ */
.map-purple .leaflet-tile-pane {
  filter: grayscale(1) contrast(1.04) brightness(1.05);
}
.map-purple .leaflet-control-attribution {
  background: rgb(255 255 255 / .75) !important;
  border-radius: 8px 0 0 0;
}
html.nocturne .map-purple .leaflet-control-attribution,
html.dark .map-purple .leaflet-control-attribution {
  background: rgb(var(--c-surface) / .82) !important;
  color: rgb(var(--c-on-surface-variant));
}


/* ------------------------------------------------------------
   19. MOTION, everything subtle, nothing flashy (cont'd).
   ------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  .btn-grad:hover, .glass-float, .top-opp { transition: none; }
}
}

/* ------------------------------------------------------------
   20. SIGNATURE SYSTEM, ambient illumination, floating glass,
   massive display type, photographic overlays. (2026-09 brief:
   "Bloomberg Terminal for real estate investors")
   ------------------------------------------------------------ */

/* 20a. Ambient page illumination, lavender light, not color.
   Light pages only; nocturne keeps its dark canvas. */
html:not(.nocturne):not(.dark) body {
  background:
    radial-gradient(circle at top right, rgb(85 34 219 / .08), transparent 40%),
    radial-gradient(circle at bottom left, rgb(168 85 247 / .05), transparent 45%),
    rgb(var(--c-background));
  background-attachment: fixed;
}

/* 20b. Floating glass cards, detached from the page. */
.glass-card {
  background: rgb(255 255 255 / .85);
  -webkit-backdrop-filter: blur(20px) saturate(150%);
  backdrop-filter: blur(20px) saturate(150%);
  border: 1px solid rgb(255 255 255 / .8);
  border-radius: var(--r-card-lg);
  box-shadow: var(--glow-lift);
  transition: transform .3s cubic-bezier(.16,1,.3,1), box-shadow .3s;
}
.glass-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--glow-lift), var(--glow-soft);
}
html.nocturne .glass-card {
  background: rgb(var(--c-surface) / .85);
  border-color: rgb(255 255 255 / .08);
}

/* 20c. Signature glow ring, cards, metrics, active tabs glow softly. */
.glow-ring { position: relative; }
.glow-ring::after {
  content: '';
  position: absolute; inset: -1px;
  border-radius: inherit;
  box-shadow: var(--glow-soft);
  opacity: 0;
  transition: opacity .3s ease;
  pointer-events: none;
}
.glow-ring:hover::after,
.glow-ring.is-active::after { opacity: 1; }

/* 20d. Massive display type, the headline dominates.
   hero clamp(48→88px) · section clamp(40→56px) · card 20px */
.display-hero {
  font-family: 'Poppins', 'Inter', sans-serif;
  font-weight: 800;
  letter-spacing: -0.035em;
  line-height: 1.02;
  font-size: clamp(3rem, 6vw, 5.5rem);
}
.display-section {
  font-family: 'Poppins', 'Inter', sans-serif;
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.08;
  font-size: clamp(2.5rem, 4vw, 3.5rem);
}
.display-card {
  font-weight: 800;
  letter-spacing: -0.02em;
  font-size: 1.25rem;
}

/* 20e. Photographic overlay, real estate photography + floating
   intelligence cards. Luxury, institutional, never cartoon. */
.photo-overlay {
  position: relative;
  border-radius: var(--r-hero);
  overflow: hidden;
  box-shadow: var(--shadow-premium-lg), var(--glow-soft);
}
.photo-overlay > img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}
.photo-overlay .overlay-veil {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgb(15 23 42 / 0) 30%, rgb(15 23 42 / .55) 100%);
}
.photo-overlay .overlay-card {
  position: absolute;
  left: 20px; right: 20px; bottom: 20px;
  background: rgb(255 255 255 / .9);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  border: 1px solid rgb(255 255 255 / .8);
  border-radius: 16px;
  padding: 14px 18px;
  box-shadow: 0 10px 30px rgb(15 23 42 / .18);
}

/* 20f. Luxury button, gradient, glow, gentle lift. */
.btn-lux {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 14px 28px;
  border-radius: 999px;
  background: var(--grad);
  color: #fff;
  font-weight: 700;
  letter-spacing: -0.01em;
  border: none; cursor: pointer;
  box-shadow: 0 4px 14px -4px rgb(85 34 219 / .5);
  transition: transform .2s cubic-bezier(.16,1,.3,1), box-shadow .2s;
}
.btn-lux:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 28px -6px rgb(85 34 219 / .55), var(--glow-soft);
}
.btn-lux:active { transform: translateY(0); }

/* ------------------------------------------------------------
   22. DASHBOARD COMMAND-CENTER LAYER (2026-10 redesign brief:
   Shopify × Vercel × Revolut × Stripe). Everything here is
   additive on the token system; every rule carries a nocturne
   variant so both themes stay first-class.
   ------------------------------------------------------------ */

/* 22a. Collapsible icon-first sidebar.
   State lives on <html class="sidebar-mini"> + localStorage
   'opendoorway-sidebar'. Labels collapse to icon-only; tooltips
   come from data-tip (bootstrapped from each item's text). */
:root { --sidebar-w: 240px; }
html.sidebar-mini:root { --sidebar-w: 68px; }
.sidebar {
  width: var(--sidebar-w);
  transition: width .35s cubic-bezier(.16,1,.3,1);
  overflow: hidden;
}
html:not(.nocturne):not(.dark) .sidebar {
  background: rgb(255 255 255 / .92);
  -webkit-backdrop-filter: blur(18px) saturate(160%);
  backdrop-filter: blur(18px) saturate(160%);
}
html.sidebar-mini .sidebar .sidebar-item {
  font-size: 0;
  letter-spacing: 0;
  gap: 0 !important;
  justify-content: center;
  padding-left: 0;
  padding-right: 0;
}
html.sidebar-mini .sidebar .sidebar-item .material-symbols-outlined { font-size: 19px; }
html.sidebar-mini .sidebar .sidebar-label {
  font-size: 0;
  height: 14px;
  border-top: 1px solid rgb(var(--c-outline-variant) / .5);
  margin: 6px 18px;
  overflow: hidden;
}
/* Hover tooltip, only while collapsed. Two-stage reveal (Stripe). */
.sidebar [data-tip] { position: relative; }
.sidebar [data-tip]::after {
  content: attr(data-tip);
  position: absolute;
  left: calc(100% + 14px);
  top: 50%;
  transform: translateY(-50%) translateX(-4px);
  background: rgb(var(--c-on-surface));
  color: rgb(var(--c-surface));
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0;
  white-space: nowrap;
  padding: 6px 10px;
  border-radius: 8px;
  box-shadow: 0 8px 24px rgb(0 0 0 / .18);
  opacity: 0;
  pointer-events: none;
  transition: opacity .18s ease .06s, transform .18s ease .06s;
  z-index: 80;
}
html.sidebar-mini .sidebar [data-tip]:hover::after {
  opacity: 1;
  transform: translateY(-50%) translateX(0);
  transition: opacity .18s ease .24s, transform .18s ease .24s;
}
/* Collapse button lives in the sidebar header, bottom-left corner. */
.sidebar-collapse-btn {
  width: 26px; height: 26px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 8px;
  color: rgb(var(--c-text-muted));
  border: 1px solid transparent;
  transition: color .2s, border-color .2s, transform .35s cubic-bezier(.16,1,.3,1);
}
.sidebar-collapse-btn:hover { color: rgb(var(--c-primary-ink)); border-color: rgb(var(--c-outline-variant)); }
html.sidebar-mini .sidebar-collapse-btn .material-symbols-outlined { transform: rotate(180deg); transition: transform .35s cubic-bezier(.16,1,.3,1); }
/* Topbar + main track the collapsed width (Tailwind left-[240px]
   gets overridden by these specific, later rules). */
html.sidebar-mini .topbar { left: calc(var(--sidebar-w) + 0px) !important; }
html.sidebar-mini main { margin-left: var(--sidebar-w) !important; }

/* 22b. Gradient hairline border, the "premium border" from the
   brief (Stripe gradient accent border). Applies only a faint ring
   so it never becomes a paint can (Session 221 taste rule). */
.gborder {
  position: relative;
  background: linear-gradient(rgb(var(--c-surface)), rgb(var(--c-surface))) padding-box,
              linear-gradient(135deg, rgb(67 23 176 / .28), rgb(139 92 246 / .14) 45%, rgb(var(--c-outline-variant)) 100%) border-box;
  border: 1px solid transparent;
}
html.nocturne .gborder {
  background: linear-gradient(rgb(var(--c-surface)), rgb(var(--c-surface))) padding-box,
              linear-gradient(135deg, rgb(139 92 246 / .45), rgb(59 130 246 / .16) 45%, rgb(255 255 255 / .06) 100%) border-box;
  border-color: transparent;
}

/* 22c. Live Market Signals feed, Stripe-style activity feed.
   Alternating row shading, hover highlight, pill badges,
   time on the right, and a "just arrived" slide. */
.feed-row {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 12px 18px;
  border-bottom: 1px solid rgb(var(--c-surface-container));
  transition: background .15s ease;
}
.feed-row:nth-child(odd):not(:first-child) { background: rgb(var(--c-surface-container) / .35); }
.feed-row:last-child { border-bottom: none; }
.feed-row:hover { background: rgb(var(--c-background)); }
html.nocturne .feed-row:hover { background: rgb(var(--c-surface-container) / .6); }
.feed-row .feed-body { flex: 1; min-width: 0; }
.feed-row .feed-msg { font-size: 12px; font-weight: 600; line-height: 1.45; color: rgb(var(--c-on-surface)); }
.feed-row .feed-time { font-size: 10px; font-weight: 600; color: rgb(var(--c-text-muted)); white-space: nowrap; padding-top: 3px; font-variant-numeric: tabular-nums; }
.feed-badge {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 9px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
  padding: 3px 8px; border-radius: 999px;
  flex: none; margin-top: 1px;
}
.feed-badge.bullish { color: rgb(var(--c-success)); background: rgb(var(--c-success) / .10); }
.feed-badge.bearish { color: rgb(var(--c-error)); background: rgb(var(--c-error) / .10); }
.feed-badge.warning { color: rgb(var(--c-amber)); background: rgb(var(--c-amber) / .12); }
.feed-badge.info    { color: rgb(var(--c-info));    background: rgb(var(--c-info) / .10); }
.feed-badge.flash   { color: rgb(var(--c-error));   background: rgb(var(--c-error) / .10); }
@keyframes feed-in {
  from { opacity: 0; transform: translateY(-7px); }
  to   { opacity: 1; transform: translateY(0); }
}
.feed-row.feed-in { animation: feed-in .45s cubic-bezier(.16,1,.3,1) both; }

/* 22d. Momentum chart, Vercel-like: gradient bars with a
   confident hover, alternating row shading, staggered draw. */
.chart-row { position: relative; border-radius: 10px; }
.chart-row:nth-child(odd):not(:hover) { background: rgb(var(--c-surface-container) / .4); }
.chart-row:hover { background: rgb(var(--c-info) / .05); }
.chart-row:hover .chart-bar { filter: brightness(1.06); }
.chart-row .chart-hit { position: absolute; inset: 0; border-radius: 10px; }
.chart-bar {
  background: linear-gradient(90deg, rgb(var(--c-primary)) 0%, rgb(139 92 246 / .82) 100%);
}
.chart-bar.neg { background: linear-gradient(90deg, rgb(var(--c-error) / .65), rgb(var(--c-error) / .35)); }
.chart-bar.mut { background: rgb(var(--c-surface-dim)); }
@keyframes bar-in { from { transform: scaleX(0); opacity: .4; } to { transform: scaleX(1); opacity: 1; } }
.chart-row .chart-bar { transform-origin: left center; animation: bar-in .7s cubic-bezier(.16,1,.3,1) both; }
/* hover tooltip chip, third of a second micro-delay per brief */
.chart-lore {
  position: absolute; right: 62px; top: 50%;
  transform: translateY(-50%) translateX(6px);
  background: rgb(var(--c-on-surface));
  color: rgb(var(--c-surface));
  font-size: 10.5px; font-weight: 700; font-variant-numeric: tabular-nums;
  padding: 5px 9px; border-radius: 8px;
  pointer-events: none; white-space: nowrap;
  opacity: 0;
  transition: opacity .2s ease .3s, transform .2s ease .3s;
}
.chart-row:hover .chart-lore { opacity: 1; transform: translateY(-50%) translateX(0); }

/* 22e. Skeleton-while-loading ink, numbers stay honest: they
   shimmer as a bar until live data (or an explicit unavailable
   state) lands. */
.live-num {
  position: relative;
  transition: color .3s ease;
}
.live-num.is-loading { color: transparent; }
.live-num.is-loading::after {
  content: '';
  position: absolute;
  left: 0; top: 50%;
  width: min(96px, 55%); height: .62em;
  transform: translateY(-50%);
  border-radius: 999px;
  background: linear-gradient(90deg, rgb(var(--c-surface-container)) 25%, rgb(var(--c-surface-dim)) 50%, rgb(var(--c-surface-container)) 75%);
  background-size: 200% 100%;
  animation: shimmer 1.5s ease-in-out infinite;
}

/* 22f. Top-right premium toast (brief: "sliding in from top-right").
   app.js positions bottom/right with Tailwind utilities, this
   later rule relocates it and adds the glass treatment. */
.app-toast {
  top: 72px !important;
  bottom: auto !important;
  background: rgb(255 255 255 / .88) !important;
  -webkit-backdrop-filter: blur(18px) saturate(170%);
  backdrop-filter: blur(18px) saturate(170%);
  border: 1px solid rgb(255 255 255 / .9);
  border-radius: 14px !important;
  box-shadow: 0 12px 32px -8px rgb(15 23 42 / .18), var(--glow-sm) !important;
  animation: toast-in .35s cubic-bezier(.16,1,.3,1) both;
}
@keyframes toast-in {
  from { opacity: 0; transform: translateY(-12px) scale(.97); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
html.nocturne .app-toast {
  background: rgb(19 18 26 / .88) !important;
  border-color: rgb(var(--c-outline-variant) / .8);
}

/* 22g. ⌘K search affordance in the topbar: the input acts as a
   palette trigger, same shell, predictive results live in the
   palette layer instead of a naïve datalist. */
.cmdk-trigger { cursor: pointer; }
.cmdk-trigger:focus-within { border-color: rgb(var(--c-primary-ink)); box-shadow: 0 0 0 3px rgb(var(--c-primary) / .12); }

/* Reduced motion: collapse and reveals become instant. */
@media (prefers-reduced-motion: reduce) {
  .sidebar, .sidebar-collapse-btn .material-symbols-outlined { transition: none; }
  .feed-row.feed-in, .chart-row .chart-bar, .app-toast { animation: none; }
  html.sidebar-mini .sidebar [data-tip]:hover::after { transition: none; }
}