/* ============================================
   ShiokNest.com - Stylesheet
   ============================================ */

/* TK-96: CSS Cascade Layer Order — controls override priority.
   Later layers beat earlier layers regardless of specificity.
   @font-face declarations intentionally stay outside all layers. */
@layer reset, base, themes, components, utilities, admin;

/* SE-06: Self-hosted Inter font (eliminates render-blocking Google Fonts request) */
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 300; font-display: swap; src: url('../fonts/inter/inter-v18-latin-300.woff2') format('woff2'); }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 400; font-display: swap; src: url('../fonts/inter/inter-v18-latin-400.woff2') format('woff2'); }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 500; font-display: swap; src: url('../fonts/inter/inter-v18-latin-500.woff2') format('woff2'); }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 600; font-display: swap; src: url('../fonts/inter/inter-v18-latin-600.woff2') format('woff2'); }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 700; font-display: swap; src: url('../fonts/inter/inter-v18-latin-700.woff2') format('woff2'); }

@layer base {
:root {
    --primary: #1E3A5F;
    --primary-light: #2a5080;
    --secondary: #2E86AB;
    --accent: #F18F01;
    --success: #28A745;
    --danger: #DC3545;
    --warning: #FFC107;
    --warning-dark: #d35400;
    --neutral: #6C757D;
    --bg: #F0F2F5;
    --bg-card: #FFFFFF;
    --bg-card-rgb: 255, 255, 255;
    --bg-secondary: #E9ECEF;
    --bg-sidebar: #1E3A5F;
    --text: #1a1a2e;
    --text-primary: #1a1a2e;
    --text-secondary: #595959;
    --text-inverse: #FFFFFF;
    --border: #DEE2E6;
    --border-light: #E9ECEF;
    --shadow: 0 1px 3px rgba(0,0,0,0.08), 0 1px 2px rgba(0,0,0,0.06);
    --shadow-md: 0 4px 6px rgba(0,0,0,0.07), 0 2px 4px rgba(0,0,0,0.06);
    --shadow-lg: 0 10px 15px rgba(0,0,0,0.1), 0 4px 6px rgba(0,0,0,0.05);
    --shadow-sm: 0 1px 2px rgba(0,0,0,0.05);
    --radius: 10px;
    --radius-sm: 6px;
    --radius-md: 12px;
    --radius-lg: 16px;
    --radius-xl: 24px;
    --sidebar-width: 310px;
    --header-height: 60px;
    --filter-height: 52px;
    --chart-highlight: #FFD700;
    --bg-hover: rgba(30, 58, 95, 0.06);
    --surface: #FFFFFF;
    --primary-hover: #257a9a;
    --text-muted: #595959;
    --font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    /* A4-01: Font size scale */
    --font-2xs: 0.7rem;
    --font-xs: 0.75rem;
    --font-sm: 0.85rem;
    --font-md: 0.9rem;
    --font-base: 1rem;
    --font-lg: 1.1rem;
    --font-xl: 1.25rem;
    --font-2xl: 1.5rem;
    /* AU-CSS-11: Shared magic-number tokens */
    --chart-min-height: 320px;
    --input-width-sm: 80px;
    /* AU-CSS-03: Z-index scale */
    --z-base: 1;            /* local stacking context elevation (sticky cells, overlays within a parent) */
    --z-sticky: 5;           /* minor sticky elements, overlay buttons */
    --z-elevated: 10;        /* floating UI elements inside a parent (FABs, close buttons) */
    --z-sticky-bar: 40;      /* page-level sticky bars (filter-bar-sticky) */
    --z-bottom-nav: 90;      /* mobile bottom nav + calc-result-bar */
    --z-dropdown: 100;
    --z-sidebar-overlay: 50;
    --z-sidebar: 150;        /* bumped above --z-dropdown to avoid collision */
    --z-popover: 800;
    --z-overlay: 900;
    --z-modal: 1000;
    --z-toast: 1200;
    --z-maintenance: 10000;
    --z-lightbox: 10001;
    --z-lead-sticky: 10002;
    --z-modal-overlay: 10003;
    --z-shepherd: 10100;
    --z-skip-link: 99999;
    /* Color tokens for reuse */
    --invest-color: #1B998B;
    --invest-bg: rgba(27,153,139,0.12);
    /* Hero gradient stops — theme-overridable */
    --hero-grad-start: var(--primary);
    --hero-grad-mid: var(--secondary);
    --hero-grad-end: var(--invest-color);
    /* Status badge tokens */
    --status-success: #22c55e;
    --status-danger: #ef4444;
    --status-warning: #f59e0b;
    --status-info: #6366f1;
    /* Status background tints */
    --success-bg: #f0fdf4;
    --danger-bg: #fee2e2;
    --warning-bg: #fef3c7;
    /* AU-CSS-02: Previously undefined variables (referenced with fallbacks) */
    --primary-dark: #1E6B8B;
    --primary-rgb: 30, 58, 95;
    --secondary-rgb: 46, 134, 171;
    --accent-hover: #257a9e;
    --border-color: var(--border);
    --info: #17a2b8;
    /* S6.4: Design tokens — spacing scale */
    --space-2xs: 2px;
    --space-xs: 4px;
    --space-sm: 8px;
    --space-md: 12px;
    --space-lg: 16px;
    --space-xl: 24px;
    --space-2xl: 32px;
    --space-3xl: 48px;
    /* S6.4: Design tokens — button sizes */
    --btn-height-sm: 32px;
    --btn-height-md: 40px;
    --btn-height-lg: 48px;
    --btn-font-sm: 0.75rem;
    --btn-font-md: 0.88rem;
    --btn-font-lg: 1rem;
    /* S6.4: Design tokens — animation timing */
    --duration-fast: 0.15s;
    --duration-normal: 0.25s;
    --duration-slow: 0.4s;
    /* S6.4: Design tokens — icon sizes */
    --icon-sm: 16px;
    --icon-md: 20px;
    --icon-lg: 24px;
    /* A4-04/10: Focus rings & shadows */
    --focus-ring: 0 0 0 2px rgba(var(--secondary-rgb), 0.25);
    --focus-ring-light: 0 0 0 2px rgba(var(--secondary-rgb), 0.15);
    --focus-ring-subtle: 0 0 0 2px rgba(var(--secondary-rgb), 0.12);
    --shadow-card-hover: 0 6px 20px rgba(0,0,0,0.08);
    --shadow-elevation: 0 16px 48px rgba(0,0,0,0.25);
    --shadow-sticky: 0 -2px 12px rgba(0,0,0,0.1);
    --shadow-float: 0 4px 12px rgba(0,0,0,0.15);
    --shadow-overlay: 0 0 0 9999px rgba(0,0,0,0.5);
    /* Badge colors */
    --badge-orange: #f97316;
    --badge-purple: #8b5cf6;
    --badge-teal: #2dd4bf;
    --badge-gold: #c9a84c;
    --badge-pink: #e85d7f;
    --badge-gray: #6b7280;
    --badge-green: #059669;
    /* Score sentiment */
    --sentiment-positive-bg: #dcfce7;
    --sentiment-negative-bg: #fef2f2;
}
} /* end @layer base */

@layer themes {
[data-theme="dark"] {
    /* UX-48: Refined dark palette — desaturated accents, layered elevation, no pure black */
    --primary: #5DB8D4;
    --secondary: #5DB8D4;
    --accent: #5DB8D4;
    --success: #3EBD5E;
    --warning: #FFD54F;
    --warning-dark: #C48A00;
    --danger: #E57373;
    --bg: #121318;
    --bg-card: #1C1F2E;
    --bg-card-rgb: 28, 31, 46;
    --bg-secondary: #171A28;
    --bg-sidebar: #141624;
    --text: #E4E6EB;
    --text-primary: #E4E6EB;
    --text-secondary: #9BA1AB;
    --text-inverse: #FFFFFF;
    --border: #2d3148;
    --border-light: #252840;
    --shadow: 0 1px 3px rgba(0,0,0,0.3);
    --shadow-md: 0 4px 6px rgba(0,0,0,0.3);
    --shadow-lg: 0 10px 15px rgba(0,0,0,0.4);
    --shadow-sm: 0 1px 2px rgba(0,0,0,0.2);
    --bg-hover: rgba(93,184,212,0.10);
    --surface: #1C1F2E;
    --primary-hover: #4aabb8;
    --primary-light: #4a9eb8;
    --text-muted: #9BA1AB;
    /* AU-CSS-02: Theme-specific overrides for previously undefined variables */
    --primary-dark: #3E9BB8;
    --primary-rgb: 93, 184, 212;
    --secondary-rgb: 93, 184, 212;
    --accent-hover: #4aabb8;
    --border-color: var(--border);
    --info: #29b6f6;
    /* A4-04/10: Dark theme shadow/focus overrides */
    --shadow-card-hover: 0 6px 20px rgba(0,0,0,0.2);
    --shadow-elevation: 0 16px 48px rgba(0,0,0,0.4);
    --shadow-sticky: 0 -2px 12px rgba(0,0,0,0.25);
    --shadow-float: 0 4px 12px rgba(0,0,0,0.3);
    --shadow-overlay: 0 0 0 9999px rgba(0,0,0,0.7);
    --sentiment-positive-bg: #052e16;
    --sentiment-negative-bg: #450a0a;
}

[data-theme="singapore"] {
    --primary: #ED2939;
    --secondary: #D42E4A;
    --accent: #ED2939;
    /* UX-48: Desaturated status colors for dark Singapore theme */
    --success: #4CAF50;
    --warning: #FFB74D;
    --warning-dark: #E08900;
    --danger: #EF5350;
    --bg: #0a0a0a;
    --bg-card: #161616;
    --bg-card-rgb: 22, 22, 22;
    --bg-secondary: #111111;
    --bg-sidebar: #111111;
    --text: #F0F0F0;
    --text-primary: #F0F0F0;
    --text-secondary: #A0A0A0;
    --text-inverse: #FFFFFF;
    --border: #2a2a2a;
    --border-light: #222222;
    --bg-hover: rgba(237, 41, 57, 0.10);
    --surface: #161616;
    --primary-hover: #d62333;
    --primary-light: #b81e2e;
    --text-muted: #A0A0A0;
    --shadow: 0 1px 3px rgba(0,0,0,0.4);
    --shadow-md: 0 4px 6px rgba(0,0,0,0.4);
    --shadow-lg: 0 10px 15px rgba(0,0,0,0.5);
    --shadow-sm: 0 1px 2px rgba(0,0,0,0.3);
    /* AU-CSS-02: Theme-specific overrides for previously undefined variables */
    --primary-dark: #B81E2E;
    --primary-rgb: 237, 41, 57;
    --secondary-rgb: 196, 30, 58;
    --accent-hover: #d62333;
    --border-color: var(--border);
    --info: #42a5f5;
    --chart-highlight: #FFD740;
    /* A4-04/10: Singapore theme shadow/focus overrides */
    --shadow-card-hover: 0 6px 20px rgba(0,0,0,0.2);
    --shadow-elevation: 0 16px 48px rgba(0,0,0,0.4);
    --shadow-sticky: 0 -2px 12px rgba(0,0,0,0.25);
    --shadow-float: 0 4px 12px rgba(0,0,0,0.3);
    --shadow-overlay: 0 0 0 9999px rgba(0,0,0,0.7);
    --sentiment-positive-bg: #052e16;
    --sentiment-negative-bg: #450a0a;
}
/* Singapore theme — nav + page chrome overrides (sidebar rules removed with
   mega-nav migration). */
[data-theme="singapore"] .logo {
    color: var(--text-inverse);
}
[data-theme="singapore"] .nav-item {
    color: rgba(255,255,255,0.7);
}
[data-theme="singapore"] .nav-item:hover {
    background: rgba(237,41,57,0.12);
    color: var(--text-inverse);
}
[data-theme="singapore"] .nav-item.active {
    background: rgba(237,41,57,0.18);
    color: var(--text-inverse);
    border-left-color: var(--primary);
}
[data-theme="singapore"] .nav-divider {
    border-top-color: rgba(255,255,255,0.08);
    color: rgba(237,41,57,0.7);
}
[data-theme="singapore"] .theme-switch-3way {
    background: rgba(255,255,255,0.08);
}
[data-theme="singapore"] .theme-3way-btn.active {
    background: var(--primary);
    color: var(--text-inverse);
}
/* Singapore theme — dark main page overrides */
[data-theme="singapore"] .top-header {
    background: var(--bg-card);
    border-bottom-color: var(--border);
}
[data-theme="singapore"] .header-title h2 {
    color: var(--primary);
}
[data-theme="singapore"] .filter-bar {
    background: var(--bg-card);
    border-bottom-color: var(--border);
}
[data-theme="singapore"] .header-badge {
    background: var(--primary);
}
[data-theme="singapore"] select,
[data-theme="singapore"] input[type="text"],
[data-theme="singapore"] input[type="number"],
[data-theme="singapore"] input[type="date"],
[data-theme="singapore"] input[type="month"],
[data-theme="singapore"] input[type="email"],
[data-theme="singapore"] input[type="tel"],
[data-theme="singapore"] input[type="url"],
[data-theme="singapore"] input[type="password"],
[data-theme="singapore"] input[type="search"],
[data-theme="singapore"] textarea {
    background: var(--bg-card);
    color: var(--text);
    border-color: var(--border);
}
[data-theme="singapore"] .insights-card {
    border-left-color: var(--primary);
}
/* ApexCharts dark-theme overrides (shared between dark + singapore themes).
   !important flags are required because ApexCharts ships unlayered CSS that
   would otherwise win the cascade against our @layer themes rules. */
:is([data-theme="dark"], [data-theme="singapore"]) .apexcharts-text,
:is([data-theme="dark"], [data-theme="singapore"]) .apexcharts-title-text {
    fill: var(--text) !important;
}
:is([data-theme="dark"], [data-theme="singapore"]) .apexcharts-legend-text {
    color: var(--text) !important;
}
:is([data-theme="dark"], [data-theme="singapore"]) .apexcharts-gridline {
    stroke: var(--border) !important;
}
:is([data-theme="dark"], [data-theme="singapore"]) .apexcharts-xaxistooltip,
:is([data-theme="dark"], [data-theme="singapore"]) .apexcharts-yaxistooltip,
:is([data-theme="dark"], [data-theme="singapore"]) .apexcharts-tooltip {
    background: var(--bg-card) !important;
    border-color: var(--border) !important;
    color: var(--text) !important;
}
:is([data-theme="dark"], [data-theme="singapore"]) .apexcharts-tooltip .apexcharts-tooltip-title {
    background: var(--bg) !important;
    border-bottom-color: var(--border) !important;
}
} /* end @layer themes */

@layer reset {
/* ── Z-Index Scale ──────────────────────────────
   1-9     : content overlaps (compare checkbox, fav-btn, map containers)
   10-49   : sticky headers, floating elements (first-visit-tooltip, filter-bar)
   50-99   : header, bottom-nav (top-header 50, bottom-nav 90)
   100-199 : sidebar, lang-selector, typeahead-dropdown, pms-aggregate-banner
   1000    : dropdowns (pms-dropdown)
   1001-1002: command palette (overlay 1001, palette 1002)
   9998    : tooltip-popup
   1200    : cookie-banner (var(--z-toast))
   10001   : toast-container (above cookie banner)
   10003   : login-modal-overlay
   10050+  : guided tour (shepherd overlay 10050, shepherd element 10100)
   99999   : skip-to-content (always on top for accessibility)
   ─────────────────────────────────────────────── */

/* ── Color Contrast Notes ──────────────────────
   Target: WCAG 2.1 AA (4.5:1 for normal text, 3:1 for large text)
   Light theme:  --text-secondary (#595959) on --bg-card (#FFFFFF) = 7.0:1 (AA pass)
   Dark theme:   --text-secondary (#9BA1AB) on --bg-card (#1a1d2e) = 6.7:1 (AA pass)
   SG theme:     --text-secondary (#A0A0A0) on --bg-card (#161616) = 6.4:1 (AA pass)
   Accent on bg: --accent (#F18F01) on --bg (#F0F2F5) = 2.6:1 (decorative only, not body text)
   Primary:      --primary (#1E3A5F) on --bg-card (#FFFFFF) = 9.5:1 (AA pass)
   Dark primary: --text (#E4E6EB) on --bg (#121318) = 14.3:1 (AA pass)
   SG primary:   --primary (#ED2939) on --bg-card (#161616) = 4.5:1 (AA pass, large text)
   --text-inverse (#FFFFFF) on --primary (#1E3A5F) = 9.5:1 (AA pass)
   --secondary (#2E86AB) on --bg-card (#FFFFFF) = 4.6:1 (AA pass)
   If adding new text colors, verify contrast at https://webaim.org/resources/contrastchecker/
   ─────────────────────────────────────────────── */

/* ---- Reset & Base ---- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 14px; scroll-behavior: smooth; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
img { max-width: 100%; height: auto; }
/* Responsive-1E: kill the 300ms tap delay on interactive elements. Safe on desktop. */
button, .btn, a[data-action], .property-card { touch-action: manipulation; }
} /* end @layer reset */

@layer components {
body {
    font-family: var(--font);
    background: var(--bg);
    color: var(--text);
    display: flex;
    min-height: 100vh;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Sidebar rules removed — replaced by mega-nav. `.logo` retained (still used
   in the mega-nav brand slot). */
.logo {
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: 700;
    font-size: 1.15rem;
    letter-spacing: 1px;
    white-space: nowrap;
}

.nav-links {
    list-style: none;
    flex: 1;
    padding: 8px 0;
    overflow-y: auto;
}

.nav-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 11px 20px;
    cursor: pointer;
    transition: color 0.2s, background-color 0.2s, border-color 0.2s;
    white-space: nowrap;
    font-size: 0.92rem;
    font-weight: 400;
    color: rgba(255,255,255,0.65);
    border-left: 3px solid transparent;
}

.nav-item:hover {
    background: rgba(255,255,255,0.08);
    color: rgba(255,255,255,0.9);
}

.nav-item.active {
    background: rgba(255,255,255,0.12);
    color: var(--text-inverse);
    font-weight: 500;
    border-left-color: var(--accent);
    position: relative;
}

/* UX-23: Active nav pulse animation on border */
.nav-item.active::after {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 3px;
    background: var(--accent);
    transform-origin: left center;
    animation: navPulse 0.3s ease-out;
}
@keyframes navPulse {
    0% { transform: scaleY(0); }
    100% { transform: scaleY(1); }
}

.nav-item svg { flex-shrink: 0; opacity: 0.8; }
.nav-item.active svg { opacity: 1; }
.nav-item.admin-nav-sub { padding-left: 36px; font-size: 0.85em; }

/* Multi-color status badge group in admin nav */
.admin-badge-group {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    margin-left: auto;
    flex-shrink: 0;
}
.admin-badge-dot {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    padding: 0 4px;
    font-size: 0.65rem;
    font-weight: 700;
    color: var(--text-inverse);
    border-radius: 10px;
    line-height: 1;
}
.admin-badge-dot[data-count="0"] {
    opacity: 0.35;
}

/* ---- 3-Way Theme Switch ---- */
.theme-switch-3way {
    display: flex;
    gap: 2px;
    background: rgba(255,255,255,0.1);
    border-radius: 20px;
    padding: 2px;
}


/* ---- Main Content ---- */
.main-content {
    margin-left: var(--sidebar-width);
    flex: 1;
    min-height: 100vh;
    transition: margin-left 0.3s ease;
    overflow-x: hidden;
}

/* ---- Header ---- */
.top-header {
    position: sticky;
    top: 0;
    z-index: var(--z-sidebar-overlay);
    background: var(--bg-card);
    border-bottom: 1px solid var(--border);
    padding: 0 24px;
    padding-left: calc(24px + env(safe-area-inset-left));
    padding-right: calc(24px + env(safe-area-inset-right));
    height: var(--header-height);
    display: flex;
    align-items: center;
    justify-content: space-between;
    box-shadow: var(--shadow);
}

.header-left {
    display: flex;
    align-items: center;
    gap: 16px;
}

.menu-toggle {
    display: none;
    background: none;
    border: none;
    color: var(--text);
    cursor: pointer;
    padding: 4px;
    transition: color 0.2s;
}

.header-title h2 {
    font-size: 1.3rem;
    font-weight: 700;
    color: var(--primary);
    letter-spacing: 0.5px;
}

[data-theme="dark"] .header-title h2 { color: var(--secondary); }

.header-subtitle {
    font-size: 0.78rem;
    color: var(--text-secondary);
    font-weight: 400;
}

.header-right {
    display: flex;
    align-items: center;
    gap: 10px;
}

/* ====== Custom Language Selector ====== */
.lang-selector {
    position: relative;
    z-index: var(--z-dropdown);
}
.lang-selector-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border);
    background: var(--bg-card);
    color: var(--text-primary, var(--text));
    cursor: pointer;
    font-size: 0.8rem;
    font-family: var(--font);
    transition: border-color 0.2s;
}
.lang-selector-btn:hover,
.lang-selector-btn:focus-visible {
    border-color: var(--primary);
}
.lang-selector-btn .fi {
    width: 20px;
    height: 15px;
    border-radius: 2px;
}
.lang-chevron {
    transition: transform 0.2s;
}
.lang-selector.open .lang-chevron {
    transform: rotate(180deg);
}
.lang-current-text {
    font-weight: 600;
    font-size: 0.8rem;
    white-space: nowrap;
}
.lang-dropdown {
    position: absolute;
    top: calc(100% + 4px);
    right: 0;
    min-width: 180px;
    max-height: 320px;
    overflow-y: auto;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-lg, 0 4px 12px rgba(0,0,0,0.15));
    z-index: calc(var(--z-dropdown) + 1);
}
.lang-option {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 8px 14px;
    border: none;
    background: none;
    color: var(--text-primary, var(--text));
    cursor: pointer;
    font-size: 0.85rem;
    font-family: var(--font);
    text-align: left;
    transition: background 0.15s;
}
.lang-option:hover {
    background: var(--bg-hover, rgba(0,0,0,0.05));
}
.lang-option .fi {
    width: 22px;
    height: 16px;
    border-radius: 2px;
    flex-shrink: 0;
}
.lang-option.active {
    background: var(--primary-light, rgba(46, 134, 171, 0.1));
    font-weight: 600;
}

/* Range Filter (range-input still used; older filter-bar / range-bar / toggle-btn classes removed) */
.range-input {
    width: var(--input-width-sm);
    padding: 4px 6px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    font-size: 0.75rem;
    font-family: var(--font);
    background: var(--bg-card);
    color: var(--text);
    text-align: right;
}

.range-input:focus {
    outline: none;
    border-color: var(--secondary);
    box-shadow: var(--focus-ring);
}
.range-input:focus-visible {
    outline: 2px solid var(--secondary);
    outline-offset: 2px;
}

.range-input::placeholder {
    color: var(--text-secondary);
    opacity: 0.5;
}

.range-clear-btn {
    padding: 4px 10px;
    background: none;
    color: var(--text-secondary);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    font-size: 0.72rem;
    cursor: pointer;
    transition: color 0.2s, border-color 0.2s;
}

.range-clear-btn:hover {
    color: var(--primary);
    border-color: var(--primary);
}

/* Hide number input spinners */
.range-input::-webkit-outer-spin-button,
.range-input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    appearance: none;
    margin: 0;
}
.range-input[type=number] {
    -moz-appearance: textfield;
    appearance: textfield;
}

.filter-group {
    display: flex;
    align-items: center;
    gap: 8px;
}

.filter-group > label,
.filter-group > span {
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-secondary);
    white-space: nowrap;
}

.quick-filters {
    display: flex;
    gap: 4px;
}

.filter-btn {
    padding: 4px 12px;
    border: 1px solid var(--border);
    background: var(--bg);
    color: var(--text);
    font-size: 0.78rem;
    font-weight: 500;
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: color 0.15s, background-color 0.15s, border-color 0.15s;
    font-family: var(--font);
}

.filter-btn:hover { border-color: var(--secondary); color: var(--secondary); }
.filter-btn.active {
    background: var(--secondary);
    color: var(--text-inverse);
    border-color: var(--secondary);
}

.checkbox-group {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}

.checkbox-label {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 0.78rem;
    color: var(--text);
    cursor: pointer;
    white-space: nowrap;
}

.checkbox-label input[type="checkbox"] {
    width: 14px;
    height: 14px;
    accent-color: var(--secondary);
    cursor: pointer;
}

/* ---- Tab Content ---- */
/* UX-23: Tab content with crossfade animation */
.tab-content {
    display: none;
    padding: 5px 24px 20px;
    animation: tabFadeIn 0.2s ease-out;
}

.tab-content.active { display: block; }

@keyframes tabFadeIn {
    from { opacity: 0; transform: translateY(4px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Legacy fadeIn (kept for other usages) */
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(6px); }
    to { opacity: 1; transform: translateY(0); }
}

/* TK-97: View Transitions API — progressive enhancement */
@keyframes vt-fade-out { from { opacity: 1; } to { opacity: 0; } }
@keyframes vt-fade-in  { from { opacity: 0; } to { opacity: 1; } }
::view-transition-old(root) { animation: vt-fade-out 120ms ease-out; }
::view-transition-new(root) { animation: vt-fade-in 120ms ease-in; }

/* ---- KPI Grid ---- */
.kpi-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 14px;
    margin-bottom: 20px;
}

/* Nested kpi-row inside kpi-grid (overview tab) spans full width */
.kpi-grid > .kpi-row {
    grid-column: 1 / -1;
}

.kpi-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 14px;
}

.kpi-row-yearly {
    grid-template-columns: repeat(4, 1fr);
}

@media (max-width: 1024px) {
    .kpi-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

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

@media (max-width: 768px) {
    .kpi-grid { grid-template-columns: 1fr; }
    .kpi-row-yearly {
        grid-template-columns: repeat(2, 1fr);
    }
}

.kpi-card {
    background: var(--bg-card);
    border: 1px solid var(--border-light);
    border-radius: var(--radius);
    padding: 16px 18px;
    box-shadow: var(--shadow);
    transition: box-shadow 0.2s, transform 0.2s;
}

.kpi-card:hover {
    box-shadow: var(--shadow-md);
    transform: translateY(-1px);
}

/* UX-24: Tactile click feedback for KPI cards */
.kpi-card:active {
    transform: scale(0.97);
    transition: transform 0.1s;
}

/* ---- UX-10: Skeleton Loader ---- */
.skeleton-card {
    background: var(--bg-card);
    border-radius: var(--radius);
    padding: 1.25rem;
    min-height: 120px;
    position: relative;
    overflow: hidden;
}
.skeleton-card::after {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background: linear-gradient(90deg, transparent 25%, rgba(255,255,255,0.08) 50%, transparent 75%);
    animation: skeleton-shimmer 1.5s infinite;
}
@keyframes skeleton-shimmer {
    0% { transform: translateX(-100%); }
    100% { transform: translateX(100%); }
}
.skeleton-line {
    height: 14px;
    background: var(--border-light);
    border-radius: 4px;
    margin-bottom: 0.75rem;
}
.skeleton-line.w-75 { width: 75%; }
.skeleton-line.w-50 { width: 50%; }
.skeleton-line.w-100 { width: 100%; }
.kpi-label {
    font-size: 0.72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-secondary);
    margin-bottom: 6px;
}

.kpi-value {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--text);
    line-height: 1.2;
}

.kpi-change {
    font-size: 0.78rem;
    font-weight: 500;
    margin-top: 4px;
}

.kpi-change.positive { color: var(--success); }
.kpi-change.negative { color: var(--danger); }

/* ---- Chart Layout ---- */
.chart-row {
    display: grid;
    gap: 16px;
    margin-bottom: 16px;
    overflow: hidden;
}

.chart-row.two-col { grid-template-columns: 1fr 1fr; }
.chart-row.three-col { grid-template-columns: 1fr 1fr 1fr; }

.chart-card {
    background: var(--bg-card);
    border: 1px solid var(--border-light);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    overflow: visible;
}

.chart-card.full-width { grid-column: 1 / -1; }

.chart-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 18px 0;
}

.chart-header h3 {
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--text);
}

.calc-description {
    padding: 8px 18px 4px;
    font-size: 0.82rem;
    color: var(--text-secondary);
    line-height: 1.5;
    margin: 0;
}
/* Hide chart-subtitle in calculator cards — calc-description already provides the info */
.chart-card:has(.calculator-body) .chart-subtitle,
.tab-content[id^="tab-calc-"] .chart-card .chart-subtitle { display: none; }

.chart-controls {
    display: flex;
    gap: 8px;
}

.chart-select {
    padding: 3px 8px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    font-size: 0.75rem;
    font-family: var(--font);
    background: var(--bg-card);
    color: var(--text);
    cursor: pointer;
}

.chart-body {
    padding: 10px 14px 14px;
    min-height: var(--chart-min-height);
    width: 100%;
    overflow: hidden;
    position: relative;
}

.chart-body-tall { min-height: 420px; }
.chart-body-auto { min-height: auto; }

.table-body {
    padding: 10px 14px 14px;
    min-height: 200px;
}

.table-body-tall { min-height: 450px; }

/* ---- UX-13: Chart/Table Toggle ---- */
.chart-table-toggle {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 10px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    font-size: 0.72rem;
    font-family: var(--font);
    background: var(--bg);
    color: var(--text-secondary);
    cursor: pointer;
    transition: background-color 0.2s, color 0.2s;
    white-space: nowrap;
}
.chart-table-toggle:hover {
    background: var(--bg-card);
    color: var(--text);
    border-color: var(--secondary);
}
.chart-table-toggle.active {
    background: var(--secondary);
    color: var(--text-inverse);
    border-color: var(--secondary);
}
.chart-table-toggle svg {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
}
.chart-data-table {
    display: none;
    width: 100%;
    border-collapse: collapse;
    font-size: 0.78rem;
    margin-top: 8px;
}
.chart-data-table.visible { display: table; }
.chart-data-table th {
    text-align: left;
    padding: 6px 10px;
    border-bottom: 2px solid var(--border);
    color: var(--text-secondary);
    font-weight: 600;
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    position: sticky;
    top: 0;
    background: var(--bg-card);
}
.chart-data-table td {
    padding: 5px 10px;
    border-bottom: 1px solid var(--border-light);
    color: var(--text);
}
.chart-data-table tr:hover td { background: rgba(46,134,171,0.04); }
.chart-data-table-wrap {
    display: none;
    max-height: 400px;
    overflow-y: auto;
    overflow-x: auto;

    padding: 0 14px 14px;
}
.chart-data-table-wrap.visible { display: block; }

/* UX-50: Touch-friendly table scroll wrapper with fade indicator */
.table-scroll-wrapper { position: relative; overflow-x: auto; }
.table-scroll-wrapper::after {
    content: ''; position: absolute; right: 0; top: 0; bottom: 0; width: 30px;
    background: linear-gradient(to right, transparent, var(--bg-card));
    pointer-events: none; opacity: 1; transition: opacity 0.3s;
}
.table-scroll-wrapper.scrolled-end::after { opacity: 0; }
.table-scroll-wrapper.no-overflow::after { opacity: 0; }
/* ---- Collapsible (collapse-btn removed; collapsible-header still used) ---- */
.collapsible-header { cursor: pointer; }

/* ---- Calculator ---- */
.calculator-body {
    padding: 18px;
}

.calc-grid {
    display: grid;
    grid-template-columns: 1fr 2fr;
    gap: 24px;
}

.calc-inputs {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.calc-field label {
    display: block;
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--text-secondary);
    margin-bottom: 4px;
}

.calc-field input {
    width: 100%;
    padding: 8px 12px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    font-size: 0.88rem;
    font-family: var(--font);
    background: var(--bg-card);
    color: var(--text);
    transition: border-color 0.2s;
}

.calc-field input:focus {
    outline: none;
    border-color: var(--secondary);
    box-shadow: var(--focus-ring);
}
.calc-field input:focus-visible {
    outline: 2px solid var(--secondary);
    outline-offset: 2px;
}
.calc-field select {
    width: 100%;
    padding: 8px 12px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    font-size: 0.88rem;
    font-family: var(--font);
    background: var(--bg-card);
    color: var(--text);
    cursor: pointer;
    transition: border-color 0.2s;
    appearance: auto;
}
.calc-field select:focus {
    outline: none;
    border-color: var(--secondary);
    box-shadow: var(--focus-ring);
}
.calc-field select:focus-visible {
    outline: 2px solid var(--secondary);
    outline-offset: 2px;
}

/* CSS-04: duplicate .calc-section-label removed — kept 0.82rem version below */

.calc-section-label:first-child {
    margin-top: 0;
}

.calc-btn {
    padding: 10px 20px;
    background: var(--secondary);
    color: var(--text-inverse);
    border: none;
    border-radius: var(--radius-sm);
    font-size: 0.88rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s;
    font-family: var(--font);
    margin-top: 4px;
}

.calc-btn:hover { background: var(--primary-light); }
.calc-btn:disabled { opacity: 0.4; cursor: not-allowed; pointer-events: none; }
.calc-btn-outline { background: transparent; border: 1px solid currentColor; }
.calc-btn-outline:hover { opacity: 0.85; background: transparent; }

/* ── Click-to-Calculate: Unified Calculate Button ── */
.calc-submit-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 8px;
    width: 100%;
    padding: 12px 24px;
    background: var(--secondary);
    color: var(--text-inverse);
    border: none;
    border-radius: var(--radius-sm);
    font-size: 0.95rem;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.2s, transform 0.2s;
    font-family: var(--font);
    margin-top: 8px;
}
.calc-submit-btn:hover { background: var(--primary-light); transform: translateY(-1px); }
.calc-submit-btn:active { transform: translateY(0); }
.calc-submit-btn:focus-visible { outline: 2px solid var(--secondary); outline-offset: 2px; }
.calc-submit-btn svg { flex-shrink: 0; }

/* Dirty state: button turns orange with pulse */
.calc-submit-btn.calc-dirty {
    background: var(--warning, #e67e22);
    animation: calcDirtyPulse 2s ease-in-out infinite;
}
.calc-submit-btn.calc-dirty:hover { background: var(--warning-dark, #d35400); }
@keyframes calcDirtyPulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(230, 126, 34, 0.4); }
    50% { box-shadow: 0 0 0 8px rgba(230, 126, 34, 0); }
}

.dirty-badge {
    display: block;
    width: 100%;
    font-size: 0.75rem;
    font-weight: 400;
    opacity: 0.9;
}

/* ── Results Wrapper — hidden by default ── */
.calc-results-wrapper {
    display: none;
}
.calc-results-wrapper.visible {
    display: block;
    animation: calcFadeIn 0.3s ease-out;
}
@keyframes calcFadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

/* ── Stale Results Banner ── */
.calc-stale-banner {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 16px;
    margin-bottom: 12px;
    background: rgba(230, 126, 34, 0.12);
    border: 1px solid rgba(230, 126, 34, 0.3);
    border-radius: var(--radius-sm);
    font-size: 0.85rem;
    color: var(--text);
}
.calc-stale-banner svg { flex-shrink: 0; stroke: var(--warning, #e67e22); }
.calc-stale-banner span { flex: 1; }
.calc-stale-banner button {
    padding: 6px 16px;
    background: var(--secondary);
    color: var(--text-inverse);
    border: none;
    border-radius: var(--radius-sm);
    cursor: pointer;
    font-weight: 600;
    font-size: 0.8rem;
    white-space: nowrap;
    transition: background 0.2s;
}
.calc-stale-banner button:hover { background: var(--primary-light); }

/* ── UX-43: Persistent Results Bar (mobile only) ── */
.calc-result-bar {
    position: fixed;
    bottom: 60px; /* above mobile bottom-nav */
    left: 0;
    right: 0;
    z-index: var(--z-bottom-nav);
    background: rgba(var(--bg-card-rgb), 0.92);
    backdrop-filter: blur(12px);
       border-top: 2px solid var(--accent);
    padding: 8px 16px;
    display: none;
    box-shadow: 0 -2px 12px rgba(0,0,0,0.1);
    animation: slideUp 0.2s ease-out;
}
.calc-result-bar.visible { display: flex; gap: 12px; align-items: center; justify-content: space-around; }
.calc-result-bar-item { text-align: center; flex: 1; min-width: 0; }
.calc-result-bar-label { font-size: 0.65rem; color: var(--text-secondary); text-transform: uppercase; letter-spacing: 0.3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.calc-result-bar-value { font-size: 1rem; font-weight: 700; color: var(--accent); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (min-width: 769px) { .calc-result-bar { display: none !important; } }

/* ── Amortization Table (Tabulator-style) ── */
.calc-amort-table {
    width: 100%;
    border-collapse: collapse;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    overflow: hidden;
    font-size: 0.8rem;
    background: var(--bg-card);
    margin-top: 8px;
}
.calc-amort-table thead {
    background: var(--bg);
    border-bottom: 2px solid var(--border);
}
.calc-amort-table th {
    padding: 8px 12px;
    text-align: right;
    color: var(--text-secondary);
    font-weight: 600;
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    border-right: 1px solid var(--border-light);
}
.calc-amort-table th:first-child { text-align: center; }
.calc-amort-table td {
    padding: 7px 12px;
    text-align: right;
    color: var(--text);
    border-bottom: 1px solid var(--border-light);
    border-right: 1px solid var(--border-light);
    font-variant-numeric: tabular-nums;
}
.calc-amort-table td:first-child {
    text-align: center;
    font-weight: 600;
    color: var(--text-secondary);
}
.calc-amort-table tbody tr:hover {
    background: rgba(46, 134, 171, 0.05);
}
.calc-amort-table tbody tr:last-child td {
    border-bottom: none;
}

.calc-results {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 12px;
    align-content: start;
}

.calc-result-card {
    background: var(--bg);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-sm);
    padding: 14px;
    text-align: center;
}

.calc-label {
    display: block;
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-secondary);
    margin-bottom: 6px;
}

.calc-value {
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--text);
}

/* ---- Calculator Form Layout (S45) ---- */
.tab-content[id^="tab-calc-"] {
    max-width: 860px;
    margin-left: auto;
    margin-right: auto;
}

.calc-form-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 14px 18px;
    margin-top: 16px;
    margin-bottom: 18px;
}

.calc-results-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 12px;
    align-content: start;
    margin-top: 16px;
}

.calc-result-card {
    transition: border-color 0.2s, box-shadow 0.2s;
}
.calc-result-card:hover {
    border-color: var(--secondary);
    box-shadow: var(--shadow);
}
.calc-result-card.highlight {
    border-color: var(--accent);
    background: rgba(241, 143, 1, 0.06);
}
.calc-result-card.highlight .calc-result-label {
    color: var(--accent);
}
.calc-result-card .calc-result-label {
    display: block;
    font-size: 0.68rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-secondary);
    margin-bottom: 6px;
}
.calc-result-card .calc-result-value {
    display: block;
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--accent);
    font-variant-numeric: tabular-nums;
}

.calc-form .calc-field label {
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--text-secondary);
    margin-bottom: 6px;
    letter-spacing: 0.2px;
}
.calc-form .calc-field input,
.calc-form .calc-field select {
    padding: 10px 12px;
    font-size: 0.92rem;
}

.calc-input-wrap {
    position: relative;
    display: block;
}
.calc-input-wrap[data-prefix]::before,
.calc-input-wrap[data-suffix]::after {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-secondary);
    font-size: 0.85rem;
    pointer-events: none;
    font-variant-numeric: tabular-nums;
}
.calc-input-wrap[data-prefix]::before {
    content: attr(data-prefix);
    left: 12px;
}
.calc-input-wrap[data-suffix]::after {
    content: attr(data-suffix);
    right: 12px;
}
.calc-input-wrap[data-prefix] input {
    padding-left: 26px;
}
.calc-input-wrap[data-suffix] input {
    padding-right: 42px;
}

.calc-form-section {
    border: 1px solid var(--border-light);
    border-radius: var(--radius);
    padding: 14px 16px 16px;
    margin-top: 14px;
    background: var(--bg-card);
}
.calc-form-section legend,
.calc-form-section .calc-form-section-title {
    padding: 0 6px;
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    color: var(--text-secondary);
}
.calc-form-section .calc-form-grid {
    margin-top: 8px;
    margin-bottom: 0;
}

@media (max-width: 560px) {
    .calc-form-grid {
        grid-template-columns: 1fr;
        gap: 10px;
    }
    .tab-content[id^="tab-calc-"] {
        max-width: none;
    }
}

/* IL-18: Calculator/Advisor related article links */
.calc-related-articles { margin: 18px 0 0; padding: 16px 18px; background: var(--bg); border: 1px solid var(--border-light); border-radius: var(--radius); }
.calc-related-articles h4 { font-size: 0.88rem; font-weight: 700; color: var(--text); margin: 0 0 12px; }
.calc-related-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px; }
.calc-related-card { display: flex; flex-direction: column; padding: 12px 14px; background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-sm); text-decoration: none; transition: border-color 0.15s, box-shadow 0.15s; }
.calc-related-card:hover { border-color: var(--secondary); box-shadow: 0 2px 8px rgba(0,0,0,0.06); }
.calc-related-title { font-size: 0.85rem; font-weight: 600; color: var(--text-primary); line-height: 1.35; margin-bottom: 4px; }
.calc-related-summary { font-size: 0.78rem; color: var(--text-secondary); line-height: 1.45; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
/* ---- Tabulator Overrides ---- */
.tabulator {
    border: 1px solid var(--border) !important;
    border-radius: var(--radius-sm) !important;
    font-family: var(--font) !important;
    font-size: 0.8rem !important;
    background: var(--bg-card) !important;
}

.tabulator .tabulator-header {
    background: var(--bg) !important;
    border-bottom: 2px solid var(--border) !important;
}

.tabulator .tabulator-header .tabulator-col {
    background: var(--bg) !important;
    border-right: 1px solid var(--border-light) !important;
}

.tabulator .tabulator-header .tabulator-col .tabulator-col-content .tabulator-col-title {
    color: var(--text-secondary) !important;
    font-weight: 600 !important;
    font-size: 0.72rem !important;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.tabulator .tabulator-tableholder .tabulator-table .tabulator-row {
    border-bottom: 1px solid var(--border-light) !important;
    background: var(--bg-card) !important;
}

.tabulator .tabulator-tableholder .tabulator-table .tabulator-row:hover {
    background: rgba(46, 134, 171, 0.05) !important;
}

.tabulator .tabulator-tableholder .tabulator-table .tabulator-row .tabulator-cell {
    border-right: 1px solid var(--border-light) !important;
    color: var(--text) !important;
}

.tabulator .tabulator-footer {
    background: var(--bg) !important;
    border-top: 2px solid var(--border) !important;
}

.tabulator .tabulator-footer .tabulator-page {
    color: var(--text) !important;
    border: 1px solid var(--border) !important;
    background: var(--bg-card) !important;
}

.tabulator .tabulator-footer .tabulator-page.active {
    background: var(--secondary) !important;
    color: var(--text-inverse) !important;
    border-color: var(--secondary) !important;
}

/* ---- Scrollbar ---- */
:root {
    scrollbar-width: thin;
    scrollbar-color: var(--border) transparent;
}
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--neutral); }

/* ---- Responsive ---- */
@media (max-width: 1100px) {
    .chart-row.two-col, .chart-row.three-col {
        grid-template-columns: 1fr;
    }
    .calc-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {
    .main-content { margin-left: 0; padding-bottom: 60px; }

    .menu-toggle { display: block; }

    .top-header { padding: 0 16px; }

    .tab-content { padding: 16px; }

    .kpi-row {
        grid-template-columns: repeat(2, 1fr);
    }

    .header-subtitle { display: none; }
    .header-auth-dropdown { min-width: 180px; }

    .bottom-nav { display: flex; }

    /* Collapsible chart sections on mobile */
    .chart-card .chart-header { cursor: pointer; position: relative; padding-right: 90px; }
    .chart-card .chart-header::after {
        content: '\25B2  ' attr(data-label);
        position: absolute;
        right: 12px;
        top: 50%;
        transform: translateY(-50%);
        font-size: 0.65rem;
        color: var(--text-secondary);
        transition: transform 0.3s, opacity 0.2s;
        opacity: 0.7;
        letter-spacing: 0.2px;
    }
    .chart-card.mobile-collapsed .chart-header::after { content: '\25BC  ' attr(data-label); transform: translateY(-50%); }
    .chart-card.mobile-collapsed .chart-body,
    .chart-card.mobile-collapsed > div:not(.chart-header) { max-height: 0; overflow: hidden; padding: 0; margin: 0; }
    .chart-card .chart-body { transition: max-height 0.3s ease, padding 0.3s ease; }
}

/* ---- Typeahead Component ---- */
.typeahead-item { padding: 0.5rem 0.75rem; cursor: pointer; font-size: 0.85rem; display: flex; justify-content: space-between; align-items: center; transition: background 0.15s; }
.typeahead-item:hover, .typeahead-item.highlighted { background: var(--border-light); }
.typeahead-item-name { font-weight: 500; }
.typeahead-item-district { font-size: 0.72rem; color: var(--text-secondary); white-space: nowrap; margin-left: 0.5rem; }

/* ---- Home / Landing Page (HOME v1 — replaced by .hv-* in HOME v2) ---- */

/* Saved Searches Section (still used by app-ui-features.js) */
.home-saved-card {
    background: var(--bg-card);
    border: 1px solid var(--border-light);
    border-radius: var(--radius);
    padding: 14px 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    cursor: pointer;
    transition: border-color 0.2s, box-shadow 0.2s;
    box-shadow: var(--shadow);
}

.home-saved-card:hover {
    border-color: var(--secondary);
    box-shadow: var(--shadow-md);
}

.home-saved-icon {
    flex-shrink: 0;
    color: var(--secondary);
    opacity: 0.7;
}

.home-saved-info {
    flex: 1;
    min-width: 0;
}

.home-saved-title {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.home-saved-detail {
    font-size: 0.7rem;
    color: var(--text-secondary);
    margin-top: 2px;
}

.home-saved-delete {
    flex-shrink: 0;
    background: none;
    border: none;
    color: var(--text-secondary);
    cursor: pointer;
    opacity: 0.4;
    font-size: 1rem;
    padding: 2px 4px;
    transition: opacity 0.2s;
}

.home-saved-delete:hover {
    opacity: 1;
    color: var(--accent);
}

/* ---- My Portfolio ---- */
/* Sub-tabs */
.myport-tabs {
    display: flex; gap: 4px; margin-bottom: 20px;
    background: var(--bg-card); border: 1px solid var(--border-light);
    border-radius: var(--radius); padding: 4px;
    max-width: 100%; box-sizing: border-box; overflow-x: auto;
}
.myport-tab {
    flex: 1; padding: 10px 16px; border: none;
    border-radius: calc(var(--radius) - 2px);
    background: transparent; color: var(--text-secondary);
    font-family: var(--font); font-size: 0.82rem; font-weight: 600;
    cursor: pointer; transition: color 0.15s ease, background-color 0.15s ease, box-shadow 0.15s ease;
    text-transform: uppercase; letter-spacing: 0.4px;
}
.myport-tab:hover { color: var(--text); background: var(--bg-hover, rgba(46,134,171,0.06)); }
.myport-tab.active { background: var(--primary); color: var(--text-inverse); box-shadow: 0 2px 6px rgba(46,134,171,0.3); }
.myport-tab-content { min-height: 200px; }
.myport-section-h2 { font-size: 1.1rem; font-weight: 700; color: var(--text); margin: 0 0 6px; }
.myport-intro { font-size: 0.85rem; color: var(--text-secondary); margin: 0 0 18px; max-width: 72ch; line-height: 1.55; }
.myport-summary { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 14px; margin-bottom: 20px; }
.myport-summary-card {
    background: var(--bg-card); border: 1px solid var(--border-light); border-radius: var(--radius);
    padding: 18px 20px; box-shadow: var(--shadow); text-align: center;
}
.myport-summary-label { font-size: 0.7rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; color: var(--text-secondary); margin-bottom: 6px; }
.myport-summary-value { font-size: 1.4rem; font-weight: 700; color: var(--text); }
.myport-summary-value.positive { color: var(--success); }
.myport-summary-value.negative { color: var(--danger, #DC3545); }
.myport-holdings { display: flex; flex-direction: column; gap: 16px; margin-bottom: 24px; }
.myport-holding-card {
    background: var(--bg-card); border: 1px solid var(--border-light); border-radius: var(--radius);
    box-shadow: var(--shadow); overflow: hidden;
}
.myport-holding-header {
    padding: 16px 20px 12px; border-bottom: 1px solid var(--border-light);
    display: flex; justify-content: space-between; align-items: flex-start;
}
.myport-holding-name { font-size: 1rem; font-weight: 700; color: var(--text); }
.myport-holding-unit { font-size: 0.78rem; color: var(--text-secondary); margin-top: 2px; }
.myport-holding-actions { display: flex; align-items: center; gap: 4px; }
.myport-holding-edit {
    background: none; border: none; color: var(--text-secondary); cursor: pointer;
    opacity: 0.5; transition: opacity 0.2s; padding: 4px; line-height: 1; display: flex; align-items: center;
}
.myport-holding-edit:hover { opacity: 1; color: var(--primary); }
.myport-holding-delete {
    background: none; border: none; color: var(--danger, #DC3545); cursor: pointer;
    font-size: 1.2rem; opacity: 0.5; transition: opacity 0.2s; padding: 4px; line-height: 1;
}
.myport-holding-delete:hover { opacity: 1; }
/* Side-by-side body: metrics left, recent sales right */
.myport-holding-body { display: grid; grid-template-columns: 1fr 1fr; }
.myport-holding-left { border-right: 1px solid var(--border-light); }
.myport-holding-right { overflow: hidden; }
.myport-holding-metrics { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--border-light); }
.myport-metric { background: var(--bg-card); padding: 12px 14px; text-align: center; }
.myport-metric-label { font-size: 0.75rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.4px; color: var(--text-secondary); margin-bottom: 4px; }
.myport-metric-value { font-size: 0.95rem; font-weight: 700; color: var(--text); }
.myport-metric-value.positive { color: var(--success); }
.myport-metric-value.negative { color: var(--danger, #DC3545); }
/* Recent sales panel — right column */
.myport-recent-section { padding: 12px 16px; height: 100%; display: flex; flex-direction: column; }
.myport-recent-hdr { font-size: 0.72rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.3px; color: var(--text-secondary); margin-bottom: 8px; display: flex; align-items: center; gap: 6px; }
.myport-recent-count { margin-left: auto; font-weight: 400; font-size: 0.65rem; color: var(--text-secondary); opacity: 0.7; }
.myport-recent-scroll { flex: 1; max-height: 340px; overflow-y: auto; overflow-x: auto; border: 1px solid var(--border-light); border-radius: 4px; }
.myport-recent-table { width: 100%; border-collapse: collapse; font-size: 0.75rem; }
.myport-recent-table thead { position: sticky; top: 0; z-index: var(--z-base); }
.myport-recent-table th { text-align: left; font-weight: 600; color: var(--text-secondary); padding: 6px 8px; background: var(--bg); border-bottom: 1px solid var(--border-light); font-size: 0.65rem; text-transform: uppercase; letter-spacing: 0.3px; white-space: nowrap; }
.myport-recent-table td { padding: 5px 8px; border-bottom: 1px solid var(--border-light); white-space: nowrap; }
.myport-recent-table tbody tr:hover { background: var(--bg-hover, rgba(46,134,171,0.04)); }

/* ── Shared data table (New Launches top-10, etc.) ──────────────────────── */
.table-responsive { overflow-x: auto; }
.data-table { width: 100%; border-collapse: collapse; font-size: 0.8rem; }
.data-table th { text-align: left; font-weight: 600; color: var(--text-secondary); padding: 7px 10px; background: var(--bg); border-bottom: 1px solid var(--border); font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.3px; white-space: nowrap; }
.data-table td { padding: 7px 10px; border-bottom: 1px solid var(--border-light); white-space: nowrap; vertical-align: middle; }
.data-table tr:last-child td { border-bottom: none; }
.data-table tbody tr:hover { background: var(--bg-hover, rgba(46,134,171,0.04)); }
.data-table td:first-child { white-space: normal; min-width: 120px; }
.data-table a { color: var(--primary); text-decoration: none; font-weight: 500; }
.data-table a:hover { color: var(--secondary); text-decoration: underline; }
.myport-recent-table tbody tr.myport-exact-match { background: rgba(46,134,171,0.10); border-left: 3px solid var(--primary); }
.myport-recent-table tbody tr.myport-exact-match td:first-child { padding-left: 5px; }
.myport-recent-date { color: var(--text-secondary); }
.myport-recent-price { font-weight: 600; }
.myport-recent-psf { font-weight: 600; }
.myport-recent-detail { color: var(--text-secondary); font-size: 0.68rem; }
.myport-add-section { margin-bottom: 24px; }

/* Management Modal */
.myport-manage-overlay { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0,0,0,0.5); z-index: var(--z-overlay); display: flex; align-items: center; justify-content: center; padding: 20px; backdrop-filter: blur(2px); }
.myport-manage-modal {
    background: rgba(var(--bg-card-rgb), 0.85); backdrop-filter: blur(16px);
    border: 1px solid rgba(255,255,255,0.08); border-radius: var(--radius);
    box-shadow: 0 16px 48px rgba(0,0,0,0.25);
    width: 100%; max-width: 580px; max-height: 85vh; overflow-y: auto;
}
.myport-manage-header { padding: 16px 20px; border-bottom: 1px solid var(--border-light); display: flex; justify-content: space-between; align-items: center; position: sticky; top: 0; background: var(--bg-card); z-index: var(--z-base); }
.myport-manage-header h3 { font-size: 0.95rem; font-weight: 700; margin: 0; color: var(--text); }
.myport-manage-close { background: none; border: none; font-size: 1.3rem; color: var(--text-secondary); cursor: pointer; padding: 4px 8px; line-height: 1; opacity: 0.7; }
.myport-manage-close:hover { opacity: 1; }
.myport-manage-body { padding: 0; }
/* Collapsible sections in modal */
.myport-section { border-bottom: 1px solid var(--border-light); }
.myport-section-header { padding: 12px 20px; cursor: pointer; display: flex; align-items: center; justify-content: space-between; user-select: none; }
.myport-section-header:hover { background: var(--bg-hover, rgba(46,134,171,0.04)); }
.myport-section-title { font-size: 0.78rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.4px; color: var(--text-secondary); }
.myport-section-toggle { font-size: 0.75rem; color: var(--text-secondary); transition: transform 0.2s; }
.myport-section.collapsed .myport-section-toggle { transform: rotate(-90deg); }
.myport-section.collapsed .myport-section-body { display: none; }
.myport-section-body { padding: 0 20px 16px; }
/* Form fields inside modal */
.myport-field-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.myport-field-grid--3 { grid-template-columns: 1fr 1fr 1fr; }
.myport-field-full { grid-column: 1 / -1; }
.myport-field { display: flex; flex-direction: column; gap: 3px; }
.myport-field label { font-size: 0.72rem; font-weight: 600; color: var(--text-secondary); text-transform: uppercase; letter-spacing: 0.3px; }
.myport-field input, .myport-field select { padding: 7px 10px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--bg); color: var(--text); font-family: var(--font); font-size: 0.82rem; }
.myport-field input:focus, .myport-field select:focus { border-color: var(--primary); outline: none; box-shadow: var(--focus-ring-light); }
.myport-field input.invalid { border-color: var(--danger); }
/* Loan timeline cards */
.myport-loan-card { background: var(--bg); border: 1px solid var(--border-light); border-radius: var(--radius-sm); padding: 10px 14px; margin-bottom: 8px; }
.myport-loan-card.current { border-left: 3px solid var(--primary); }
.myport-loan-card.past { opacity: 0.75; }
.myport-loan-card.locked { opacity: 0.55; pointer-events: none; }
.myport-loan-card.locked input,
.myport-loan-card.locked select { background: var(--bg-hover, #f5f5f5); cursor: not-allowed; color: var(--text-secondary); }
.myport-loan-summary { display: flex; justify-content: space-between; align-items: center; font-size: 0.82rem; }
.myport-loan-summary strong { color: var(--text); }
.myport-loan-detail { font-size: 0.72rem; color: var(--text-secondary); margin-top: 4px; }
.myport-loan-actions { display: flex; gap: 8px; margin-top: 6px; }
.myport-loan-actions button { background: none; border: none; font-size: 0.72rem; color: var(--primary); cursor: pointer; padding: 2px 0; font-family: var(--font); }
.myport-loan-actions button:hover { text-decoration: underline; }
.myport-loan-actions button.danger { color: var(--danger, #DC3545); }
/* Buyer rows */
.myport-buyer-row { display: grid; grid-template-columns: 1fr 1fr 1fr 80px; gap: 8px; align-items: end; margin-bottom: 8px; padding: 8px 12px; background: var(--bg); border-radius: var(--radius-sm); border: 1px solid var(--border-light); }
.myport-buyer-row .myport-field label { font-size: 0.65rem; }
/* Add/remove buttons */
.myport-btn-add { display: inline-flex; align-items: center; gap: 4px; background: none; border: 1px dashed var(--border); border-radius: var(--radius-sm); padding: 8px 14px; color: var(--text-secondary); font-size: 0.78rem; font-family: var(--font); cursor: pointer; transition: color 0.15s, border-color 0.15s, background-color 0.15s; margin-top: 4px; }
.myport-btn-add:hover { border-color: var(--primary); color: var(--primary); background: rgba(46,134,171,0.04); }
/* Modal footer */
.myport-manage-footer { padding: 14px 20px; padding-bottom: calc(14px + env(safe-area-inset-bottom)); border-top: 1px solid var(--border-light); display: flex; justify-content: flex-end; gap: 10px; position: sticky; bottom: 0; background: var(--bg-card); }
.myport-manage-footer .btn-save { padding: 8px 24px; background: var(--primary); color: var(--text-inverse); border: none; border-radius: var(--radius-sm); font-family: var(--font); font-size: 0.82rem; font-weight: 600; cursor: pointer; transition: background 0.15s; }
.myport-manage-footer .btn-save:hover { background: var(--primary-hover, #257a9a); }
.myport-manage-footer .btn-cancel { padding: 8px 18px; background: transparent; color: var(--text-secondary); border: 1px solid var(--border); border-radius: var(--radius-sm); font-family: var(--font); font-size: 0.82rem; cursor: pointer; }
.myport-manage-footer .btn-cancel:hover { background: var(--bg-hover, rgba(0,0,0,0.04)); }
/* Add form collapsible sections */
.myport-add-collapsible { margin-top: 12px; border: 1px solid var(--border-light); border-radius: var(--radius-sm); }
.myport-add-collapsible + .calc-btn { margin-top: 16px; }
.myport-add-collapsible .myport-section-header { padding: 10px 14px; }
.myport-add-collapsible .myport-section-body { padding: 4px 14px 14px; }
.myport-add-collapsible .myport-field input,
.myport-add-collapsible .myport-field select { font-size: 0.82rem; padding: 6px 8px; border: 1px solid var(--border-light); border-radius: var(--radius-sm); background: var(--bg); color: var(--text); width: 100%; box-sizing: border-box; font-family: var(--font); }
.myport-add-collapsible .myport-field label { display: block; font-size: 0.68rem; font-weight: 600; color: var(--text-secondary); margin-bottom: 3px; text-transform: uppercase; letter-spacing: 0.3px; }
.myport-add-collapsible .myport-field input:focus,
.myport-add-collapsible .myport-field select:focus { outline: none; border-color: var(--primary); box-shadow: var(--focus-ring-subtle); }
.myport-add-collapsible .myport-field input[readonly] { opacity: 0.6; cursor: not-allowed; }

/* Portfolio stat cards (Market Digest) */
.myport-digest-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 10px;
    padding: 10px 16px 14px;
}
.myport-digest-grid--compact { grid-template-columns: repeat(3, 1fr); gap: 8px; padding: 8px 16px 6px; }
.myport-digest-stat {
    padding: 8px 10px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
}
.myport-digest-stat--sm { padding: 6px 8px; }
.myport-digest-stat--sm .myport-digest-stat-value { font-size: 0.85rem; }
.myport-digest-stat--sm .myport-digest-stat-label { font-size: 0.65rem; }
.myport-digest-stat-label { font-size: 0.72rem; color: var(--text-secondary); margin-bottom: 2px; }
.myport-digest-stat-value { font-size: 0.95rem; font-weight: 700; }
.myport-digest-charts { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; padding: 4px 16px 12px; }
.myport-digest-chart-wrap { min-height: 90px; }
@media (max-width: 480px) {
    .myport-digest-grid--compact { grid-template-columns: 1fr 1fr 1fr; gap: 6px; }
    .myport-digest-charts { grid-template-columns: 1fr; }
}

/* Searchable property selector (Add Property form) */
.myport-prop-select { position: relative; }
.myport-prop-trigger {
    width: 100%; padding: 9px 12px; border: 1px solid var(--border);
    border-radius: var(--radius-sm); background: var(--bg-card); color: var(--text);
    font-family: var(--font); font-size: 0.85rem; text-align: left; cursor: pointer;
    display: flex; align-items: center; justify-content: space-between; gap: 8px;
    transition: border-color 0.15s;
}
.myport-prop-trigger:hover { border-color: var(--primary); }
.myport-prop-trigger.active { border-color: var(--primary); box-shadow: 0 0 0 2px rgba(46,134,171,0.15); }
.myport-prop-trigger.invalid { border-color: var(--danger); }
.myport-prop-trigger-text { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text-secondary); }
.myport-prop-trigger-text.has-selection { color: var(--text); font-weight: 500; }
.myport-prop-arrow { flex-shrink: 0; transition: transform 0.2s; }
.myport-prop-trigger.active .myport-prop-arrow { transform: rotate(180deg); }
.myport-prop-dropdown {
    position: absolute; top: calc(100% + 4px); left: 0; right: 0; z-index: var(--z-dropdown);
    background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-sm);
    box-shadow: var(--shadow-lg, 0 8px 24px rgba(0,0,0,0.15)); max-height: 320px; overflow: hidden;
    display: flex; flex-direction: column;
}
.myport-prop-dropdown .pms-search-wrap { padding: 8px; border-bottom: 1px solid var(--border); }
.myport-prop-dropdown .pms-search { width: 100%; padding: 7px 10px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--bg); color: var(--text); font-family: var(--font); font-size: 0.82rem; box-sizing: border-box; }
.myport-prop-list { overflow-y: auto; max-height: 260px; padding: 4px 0; }
.myport-prop-district-hdr {
    padding: 6px 12px; font-size: 0.7rem; font-weight: 600; color: var(--text-secondary);
    text-transform: uppercase; letter-spacing: 0.3px; background: var(--bg);
}
.myport-prop-item {
    padding: 7px 12px; cursor: pointer; display: flex; align-items: center;
    justify-content: space-between; gap: 8px; font-size: 0.82rem; transition: background 0.1s;
}
.myport-prop-item:hover { background: var(--bg-hover, rgba(46,134,171,0.08)); }
.myport-prop-item-name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Add Property form — layout */
.myport-add-section { background: var(--bg-card); border: 1px solid var(--border-light); border-radius: var(--radius); padding: 16px 18px 18px; margin-bottom: 18px; }
.myport-add-section .myport-field-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 10px; }
.myport-add-section > .myport-field { margin-bottom: 12px; }
.myport-add-subhead { font-size: 0.7rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.3px; color: var(--text-secondary); margin: 14px 0 8px; }
.myport-form-actions { margin-top: 16px; display: flex; justify-content: flex-end; gap: 10px; }
.myport-section-header { display: flex; align-items: center; justify-content: space-between; cursor: pointer; user-select: none; }
.myport-section-header:hover { background: var(--bg-hover, rgba(46,134,171,0.04)); }
.myport-section-title { font-size: 0.85rem; font-weight: 600; color: var(--text); }
.myport-section-toggle { font-size: 0.7rem; color: var(--text-secondary); transition: transform 0.2s; }

.myport-empty-state { text-align: center; padding: 40px 20px; color: var(--text-secondary); }
.myport-empty-state p { font-size: 0.92rem; margin-bottom: 8px; }

/* ---- Portfolio Benchmarking (UF-13) ---- */
.myport-benchmark-card { margin-bottom: 20px; }
.myport-benchmark-body { padding: 0 18px 18px; }
.myport-benchmark-kpis { margin-bottom: 14px; }
.myport-benchmark-kpis .kpi-card { text-align: center; }
.myport-benchmark-summary {
    font-size: 0.88rem;
    color: var(--text-secondary);
    text-align: center;
    padding: 10px 16px;
    background: var(--bg-card);
    border: 1px solid var(--border-light);
    border-radius: var(--radius);
}
.myport-benchmark-summary strong { color: var(--text); }
.myport-benchmark-summary .positive { color: var(--success); font-weight: 600; }
.myport-benchmark-summary .negative { color: var(--danger); font-weight: 600; }

/* ---- Favorites Dashboard ---- */
.myport-fav-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 14px; }
.myport-fav-card { background: var(--bg-card); border: 1px solid var(--border-light); border-left: 4px solid var(--accent, #F18F01); border-radius: var(--radius); box-shadow: var(--shadow); overflow: hidden; }
.myport-fav-header { padding: 14px 16px 10px; display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid var(--border-light); }
.myport-fav-name { font-size: 0.95rem; font-weight: 700; color: var(--text); cursor: pointer; }
.myport-fav-name:hover { color: var(--primary); text-decoration: underline; }
.myport-fav-unfav { background: none; border: none; color: var(--accent, #F18F01); cursor: pointer; font-size: 1.2rem; opacity: 0.8; transition: opacity 0.2s, transform 0.2s; padding: 4px; line-height: 1; }
.myport-fav-unfav:hover { opacity: 1; transform: scale(1.15); }
.myport-fav-show-all { text-align: center; padding: 10px; }
.myport-fav-show-all button { background: none; border: 1px solid var(--border); border-radius: var(--radius); padding: 6px 16px; color: var(--text-secondary); font-size: 0.82rem; cursor: pointer; font-family: var(--font); }
.myport-fav-show-all button:hover { background: var(--bg-hover); }

/* ---- Confidence Badge & Value Range ---- */
.myport-confidence { font-size: 0.6rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.3px; padding: 1px 5px; border-radius: 3px; background: var(--bg-hover, rgba(0,0,0,0.05)); margin-left: 4px; vertical-align: middle; cursor: help; }
.myport-metric-sub { font-size: 0.7rem; color: var(--text-secondary); margin-top: 2px; }
.myport-confidence-detail { font-size: 0.62rem; opacity: 0.7; font-style: italic; }
.myport-return-tag { font-size: 0.55rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.3px; padding: 1px 5px; border-radius: 3px; background: rgba(0,0,0,0.06); color: var(--text-secondary); vertical-align: middle; margin-left: 3px; }
.myport-return-tag.net { background: rgba(46,134,171,0.12); color: var(--primary, #2E86AB); }
.myport-returns-row { display: flex; gap: 12px; border-top: 1px solid var(--border-light); padding: 10px 16px; }
.myport-return-cell { flex: 1; min-width: 0; text-align: center; }
.myport-return-cell .myport-metric-label { font-size: 0.68rem; font-weight: 600; color: var(--text-secondary); text-transform: uppercase; letter-spacing: 0.3px; margin-bottom: 2px; }
.myport-return-cell .myport-metric-value { font-size: 1.05rem; font-weight: 700; }
.text-warning { color: var(--warning, #F18F01); }

/* ---- Holdings Market Comparison ---- */
.myport-holding-comparison { border-top: 1px solid var(--border-light); padding: 12px 16px; }
.myport-comparison-title { font-size: 0.72rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; color: var(--text-secondary); margin-bottom: 10px; }
.myport-comparison-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; }
.myport-comparison-item { padding: 8px 10px; background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-sm); }
.myport-comparison-label { font-size: 0.72rem; color: var(--text-secondary); margin-bottom: 2px; }
.myport-comparison-value { font-size: 0.95rem; font-weight: 700; }
.myport-comparison-detail { font-size: 0.72rem; color: var(--text-secondary); margin-top: 2px; }

/* .home-promo-icon--dashboard is defined once above (line ~2105, legacy promo card classes). */

/* CSS-Wave5-04: .home-presale-* rules purged — orphaned since S44 redesign
   removed the pre-sale CTA strip from the home page (0 usages across views + js). */
/* ---- Print ---- */
@page {
    margin: 2cm 1.5cm;
    size: A4;
}
@media print {
    color-scheme: light;
    /* S5.3: Expanded print stylesheet — hide non-essential UI */
    .filter-bar, .menu-toggle, .mobile-toggle-btn,
    .theme-switch-3way, .export-btn, .chart-controls, .bottom-nav,
    .cmd-palette-overlay, .command-palette, .breadcrumb-nav,
    .compare-check, .fav-btn, .chart-export-btn, .ad-container,
    .site-footer, .footer-section, .cookie-banner, .toast-container,
    .skip-to-content, .help-icon, .header-icon-btn,
    .fab-container, .admin-nav, .admin-content,
    .lang-selector, .share-btn, .chart-table-toggle,
    .lead-capture-popup, .user-auth-modal, .pms-dropdown,
    .scroll-indicator, .top-header { display: none !important; }

    /* Layout reset */
    .main-content { margin-left: 0 !important; padding: 8px 12px !important; }
    body { background: #fff !important; color: #000 !important; font-size: 11pt; }
    * { background: transparent !important; box-shadow: none !important; text-shadow: none !important; }

    /* Cards and containers */
    .chart-card { page-break-inside: avoid; break-inside: avoid; box-shadow: none !important; border: 1px solid #ddd; margin-bottom: 16px; max-width: 7.5in; }
    .kpi-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
    .kpi-card { border: 1px solid #ddd; padding: 8px; }

    /* Tables */
    table { font-size: 10pt; border-collapse: collapse; width: 100%; }
    table, th, td { border: 1px solid #999; }
    th { background: #f0f0f0 !important; font-weight: bold; }
    td { padding: 4px 8px; }
    .data-table { page-break-inside: auto; }
    tr { page-break-inside: avoid; }

    /* Calculator results */
    .calc-results-wrapper { page-break-inside: avoid; border: 1px solid #ddd; padding: 12px; }
    .calc-result-bar { display: none !important; }

    /* Form fields */
    input, select, textarea { border: 1px solid #999 !important; padding: 4px; font-size: 10pt; }

    /* Typography */
    h1, h2, h3, h4 { page-break-after: avoid; color: #000 !important; }
    .tab-content { display: block !important; }
    .insights-card { border-left-color: #333; }
    #tab-home { display: none !important; }

    /* Links */
    a { color: #000 !important; text-decoration: underline; }
    a[href]::after { content: " (" attr(href) ")"; font-size: 0.8em; color: #666; }
    a[href^="#"]::after, a[href^="javascript"]::after { content: none; }

    /* Images */
    img { max-width: 100% !important; page-break-inside: avoid; }
}

/* ---- Property Multi-Select ---- */
.pms-search-wrap {
    padding: 8px;
    border-bottom: 1px solid var(--border);
    flex-shrink: 0;
    position: relative;
}

.pms-search {
    width: 100%;
    padding: 6px 10px 6px 30px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    font-size: 0.8rem;
    font-family: var(--font);
    background: var(--bg-card);
    color: var(--text);
    outline: none;
}

.pms-search:focus {
    border-color: var(--secondary);
}

/* ── Condo Search Block (Admin Condos + Portfolio) ────── */
.condo-search-wrapper {
    position: relative;
    margin-bottom: 16px;
    max-width: 400px;
}

.condo-search-icon {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    width: 16px;
    height: 16px;
    opacity: 0.4;
    pointer-events: none;
}

.condo-search-input {
    width: 100%;
    padding: 10px 80px 10px 36px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    font-size: 0.85rem;
    font-family: var(--font);
    background: var(--bg-card);
    color: var(--text);
    outline: none;
    transition: border 0.15s, box-shadow 0.15s;
}

.condo-search-input:focus {
    border-color: var(--secondary);
    box-shadow: var(--focus-ring-subtle);
}

.condo-search-count {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 0.72rem;
    color: var(--text-secondary);
    pointer-events: none;
}

.condo-no-results {
    grid-column: 1 / -1;
    text-align: center;
    padding: 40px 20px;
    color: var(--text-secondary);
    font-size: 0.85rem;
}

.pms-district-group {
    margin: 0;
}

.pms-district-header {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 10px;
    cursor: pointer;
    user-select: none;
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    background: var(--bg);
    border-bottom: 1px solid var(--border);
    position: sticky;
    top: 0;
    z-index: var(--z-base);
}

.pms-district-header:hover {
    background: var(--bg-hover);
}

.pms-district-chevron {
    width: 12px;
    height: 12px;
    transition: transform 0.2s;
    opacity: 0.5;
    flex-shrink: 0;
}

.pms-district-group.collapsed .pms-district-chevron {
    transform: rotate(-90deg);
}

.pms-district-group.collapsed .pms-district-items {
    display: none;
}

.pms-district-count {
    margin-left: auto;
    font-size: 0.68rem;
    font-weight: 500;
    color: var(--text-secondary);
    opacity: 0.7;
}

.pms-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 10px 6px 28px;
    cursor: pointer;
    font-size: 0.8rem;
    color: var(--text);
    transition: background 0.15s;
}

.pms-item:hover {
    background: var(--bg-hover);
}

.pms-item input[type="checkbox"] {
    flex-shrink: 0;
    accent-color: var(--primary);
}

.pms-item-name {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pms-item-district-tag {
    font-size: 0.68rem;
    color: var(--text-secondary);
    opacity: 0.7;
    flex-shrink: 0;
}

.pms-item.hidden {
    display: none;
}

.pms-district-group.hidden {
    display: none;
}

.pms-no-results {
    padding: 20px;
    text-align: center;
    font-size: 0.8rem;
    color: var(--text-secondary);
}

/* Selected pills below header */
.pms-pill {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 2px 8px;
    background: var(--primary);
    color: var(--text-inverse);
    font-size: 0.68rem;
    font-weight: 600;
    border-radius: var(--radius);
    white-space: nowrap;
}

.pms-pill-close {
    cursor: pointer;
    opacity: 0.7;
    font-size: 0.75rem;
    line-height: 1;
    margin-left: 2px;
}

.pms-pill-close:hover {
    opacity: 1;
}


.admin-nav-item[style*="display: none"],
.admin-nav-item[style*="display:none"] {
    display: none !important;
}
.admin-maintenance-toggle {
    cursor: pointer;
    border-left: 3px solid transparent;
    transition: border-color 0.2s, color 0.2s;
}
.admin-maintenance-toggle:hover {
    border-left-color: var(--accent);
}
/* ---- Maintenance Banner ---- */
#maintenanceBanner {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: var(--z-maintenance);
    background: var(--accent);
    color: var(--text-inverse);
    text-align: center;
    padding: 7px 16px;
    font-size: 13px;
    font-weight: 600;
    box-shadow: 0 2px 8px rgba(0,0,0,0.15);
}
#maintenanceBanner button {
    margin-left: 12px;
    background: var(--bg-card);
    color: var(--accent);
    border: none;
    border-radius: 4px;
    padding: 3px 14px;
    cursor: pointer;
    font-weight: 600;
    font-size: 12px;
}
#maintenanceBanner button:hover { background: var(--bg-hover); }
body.maintenance-active .top-header { top: 34px; }

/* ---- Portfolio Grid ---- */
.portfolio-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
    gap: 20px;
}

.property-card {
    position: relative;
    background: var(--bg-card);
    border: 1px solid var(--border-light);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    cursor: pointer;
    transition: box-shadow 0.25s, transform 0.25s, border-color 0.25s;
    overflow: hidden;
}

.property-card:hover {
    box-shadow: var(--shadow-lg);
    transform: translateY(-3px);
    border-color: var(--secondary);
}

/* ---- Property Info Card ---- */
.property-info-card {
    background: var(--bg-card);
    border: 1px solid var(--border-light);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    margin-bottom: 20px;
    overflow: hidden;
}

.property-info-grid {
    display: grid;
    grid-template-columns: 350px 1fr;
}

.property-info-left {
    border-right: 1px solid var(--border-light);
}

.property-info-map {
    height: 100%;
    min-height: 250px;
}

.property-info-map iframe {
    width: 100%;
    height: 100%;
    min-height: 250px;
    border: 0;
}

.property-info-right {
    padding: 20px 24px;
}

.property-info-right h2 {
    font-size: 1.3rem;
    font-weight: 700;
    color: var(--text);
    margin-bottom: 8px;
}

.property-info-description {
    font-size: 0.85rem;
    color: var(--text-secondary);
    line-height: 1.5;
    margin-bottom: 16px;
}

.property-info-details {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
}

.info-detail {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.info-detail-label {
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-secondary);
}

.info-detail-value {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--text);
}
/* UX-46: Data updated trust signal */
.data-updated .info-detail-value { font-size: 0.82rem; font-weight: 400; color: var(--text-secondary); }
.data-updated .info-detail-value a { color: var(--secondary); text-decoration: none; font-weight: 500; }
.data-updated .info-detail-value a:hover { text-decoration: underline; }

@media (max-width: 900px) {
    .property-info-grid { grid-template-columns: 1fr; }
    .property-info-left { border-right: none; border-bottom: 1px solid var(--border-light); }
    .property-info-details { grid-template-columns: repeat(2, 1fr); }
    .myport-holding-body { grid-template-columns: 1fr; }
    .myport-holding-left { border-right: none; border-bottom: 1px solid var(--border-light); }
    .myport-manage-modal { max-width: 100%; max-height: 95vh; margin: 10px; }
    .myport-field-grid { grid-template-columns: 1fr; }
    .myport-field-grid--3 { grid-template-columns: 1fr 1fr; }
    .myport-buyer-row { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 320px) {
    .myport-tab { padding: 6px 8px; font-size: 0.70rem; }
}

/* ---- Singapore theme overrides ---- */
[data-theme="singapore"] {
    --hero-grad-mid: #C41E3A;
    --hero-grad-end: #8B1A2B;
}


[data-theme="singapore"] .pms-trigger-count,
[data-theme="singapore"] .pms-pill {
    background: var(--primary);
}

/* ApexCharts dark-theme overrides live in the themes layer above (single consolidated block). */

/* ---- Advertisement containers ---- */
.ad-container {
    text-align: center;
    margin: 16px auto;
    overflow: hidden;
}
.ad-container::before {
    content: attr(data-label);
    display: block;
    font-size: 0.75rem;
    color: var(--text-secondary);
    margin-bottom: 4px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
/* ---- Sparkline in Portfolio Cards ---- */
.property-card-sparkline {
    padding: 0 20px 4px;
    height: 44px;
}

/* ---- No-Data State ---- */
.no-data-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 200px;
    color: var(--text-secondary);
    gap: 12px;
    padding: 40px 20px;
}

.no-data-state p + p { font-size: 0.8rem; opacity: 0.7; }

.no-data-state p {
    font-size: 0.85rem;
    text-align: center;
    max-width: 300px;
    line-height: 1.5;
}

/* ---- Chart Toggle Labels ---- */
.chart-toggle-label {
    font-size: 0.75rem;
    color: var(--text-secondary);
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 4px;
}
.chart-toggle-label input { margin: 0; cursor: pointer; }

/* ---- Chart Subtitles ---- */
.chart-subtitle {
    font-size: 0.72rem;
    color: var(--text-secondary);
    margin-top: 2px;
    font-weight: 400;
    line-height: 1.3;
}

/* ---- Last Updated ---- */
.last-updated {
    display: block;
    font-size: 0.75rem;
    color: rgba(255,255,255,0.4);
    text-align: center;
    padding: 4px 16px 8px;
}

/* ---- Breadcrumb ---- */
.breadcrumb {
    padding: 6px 24px;
    font-size: 0.75rem;
    color: var(--text-secondary);
    background: var(--bg-card);
    border-bottom: 1px solid var(--border-light);
    min-height: 0;
}
.breadcrumb:empty { display: none; }
.breadcrumb a { color: var(--secondary); cursor: pointer; text-decoration: none; transition: color 0.2s; }
.breadcrumb a:hover { text-decoration: underline; }
.breadcrumb .sep { margin: 0 6px; opacity: 0.5; }

/* ---- Command Palette ---- */
.cmd-palette-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0,0,0,0.5);
    backdrop-filter: blur(4px);
       z-index: var(--z-popover);
    display: flex;
    justify-content: center;
    padding-top: 15vh;
}
.cmd-palette {
    background: rgba(var(--bg-card-rgb), 0.85);
    backdrop-filter: blur(16px);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: var(--radius);
    box-shadow: 0 16px 48px rgba(0,0,0,0.25);
    width: 90%;
    max-width: 520px;
    max-height: 400px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    align-self: flex-start;
    z-index: var(--z-popover);
}
.cmd-input {
    width: 100%;
    padding: 14px 18px;
    border: none;
    border-bottom: 1px solid var(--border);
    font-size: 1rem;
    font-family: var(--font);
    background: transparent;
    color: var(--text);
    outline: none;
}
.cmd-results {
    flex: 1;
    overflow-y: auto;
    padding: 4px 0;
}
.cmd-result-item {
    padding: 10px 18px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 0.88rem;
    color: var(--text);
    transition: background 0.1s;
}
.cmd-result-item:hover, .cmd-result-item.selected {
    background: rgba(46,134,171,0.08);
}
.cmd-result-item .cmd-type {
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    color: var(--text-secondary);
    min-width: 60px;
}
.cmd-hint {
    padding: 8px 18px;
    font-size: 0.72rem;
    color: var(--text-secondary);
    border-top: 1px solid var(--border-light);
    text-align: center;
}
.cmd-hint kbd {
    background: var(--bg);
    padding: 1px 6px;
    border-radius: 3px;
    border: 1px solid var(--border);
    font-size: 0.68rem;
}
.cmd-chip {
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 4px 12px;
    font-size: 0.75rem;
    color: var(--text-secondary);
    cursor: pointer;
    font-family: inherit;
    transition: color 0.15s, background-color 0.15s, border-color 0.15s;
}
.cmd-chip:hover {
    background: var(--primary);
    color: var(--text-inverse);
    border-color: var(--primary);
}

/* ---- Bottom Navigation (Mobile) ---- */
.bottom-nav {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: 64px;
    background: var(--bg-card);
    border-top: 1px solid var(--border);
    display: none;
    justify-content: space-around;
    align-items: center;
    z-index: var(--z-bottom-nav);
    box-shadow: 0 -2px 8px rgba(0,0,0,0.1);
    padding-bottom: env(safe-area-inset-bottom, 0px);
}
/* UX-38: Hide bottom nav and floating elements when virtual keyboard is open */
.keyboard-open .bottom-nav { display: none !important; }
.keyboard-open .calc-result-bar { display: none !important; }
.keyboard-open .fab-container { display: none !important; }

.bottom-nav-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    background: none;
    border: none;
    color: var(--text-secondary);
    font-size: 0.75rem;
    font-weight: 500;
    font-family: var(--font);
    cursor: pointer;
    padding: 8px 14px;
    min-width: 44px;
    min-height: 44px;
    transition: color 0.2s;
}
.bottom-nav-item.active { color: var(--secondary); font-weight: 600; }
.bottom-nav-item svg { width: 22px; height: 22px; }

/* ---- Compare Selected Bar ---- */
.compare-selected-bar {
    margin-top: 16px;
    padding: 12px 20px;
    background: var(--bg-card);
    border: 1px solid var(--secondary);
    border-radius: var(--radius);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}
.compare-selected-bar span {
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--text);
}

/* ---- Quick Compare Checkbox ---- */
.compare-check {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 18px;
    height: 18px;
    accent-color: var(--secondary);
    cursor: pointer;
    z-index: var(--z-sticky);
}

/* ---- Insights Card ---- */
.insights-heatmap-row {
    margin-bottom: 20px;
}
.insights-heatmap-row .insights-card {
    margin-bottom: 0;
}
.heatmap-label {
    font-size: 0.72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-secondary);
    padding: 4px 8px 0;
}
.insights-card {
    background: var(--bg-card);
    border: 1px solid var(--border-light);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: 16px 20px;
    margin-bottom: 20px;
    border-left: 4px solid var(--accent);
}
.insights-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 12px;
    color: var(--text);
}
.insights-header h3 {
    font-size: 0.92rem;
    font-weight: 600;
}
.insights-list {
    list-style: none;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
#insightsCard > .chart-header {
    padding: 14px 18px 8px;
}
#insightsCard .insights-list {
    padding: 0 18px 14px;
}
#insightsCard .insights-list li {
    padding-top: 2px;
    padding-bottom: 2px;
}
.insights-list li {
    font-size: 0.82rem;
    color: var(--text-secondary);
    padding: 4px 0;
    padding-left: 16px;
    position: relative;
    line-height: 1.4;
}
.insights-list li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 10px;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--accent);
}

/* ---- Chart Header Actions Group ---- */
.chart-header-actions {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-left: auto;
    flex-shrink: 0;
}

/* ---- Chart Export Button ---- */
.chart-export-btn {
    background: none;
    border: 1px solid var(--border);
    color: var(--text-secondary);
    width: 28px;
    height: 28px;
    border-radius: var(--radius-sm);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: color 0.15s, border-color 0.15s;
    flex-shrink: 0;
}
.chart-export-btn:hover { border-color: var(--secondary); color: var(--secondary); }
/* .chart-table-toggle — defined at line ~967; removed duplicate here */

/* ---- Stamp Duty Calculator Select ---- */
.calc-field-select {
    width: 100%;
    padding: 8px 12px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    font-size: 0.88rem;
    font-family: var(--font);
    background: var(--bg-card);
    color: var(--text);
    cursor: pointer;
}
.calc-field-select:focus { outline: none; border-color: var(--secondary); box-shadow: var(--focus-ring); }
.calc-field-select:focus-visible { outline: 2px solid var(--secondary); outline-offset: 2px; }

/* ---- Amenity Map & Score (UF-01 / TK-57 / TK-58) ---- */
#amenityMapCard { margin-bottom: 16px; }
#amenityMapCard .chart-header { padding: 16px 20px 8px; }
#amenity-map-container { border-radius: 0 0 var(--radius) var(--radius); z-index: var(--z-base); }
.amenity-score-card { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius); padding: 20px; margin-bottom: 16px; }
.amenity-score-header { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.amenity-score-header h3 { font-size: 1rem; font-weight: 600; margin: 0; flex: 1; }
.amenity-score-header svg { color: var(--text-secondary); }
.amenity-score-badge { display: inline-block; font-size: 0.75rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; }
.amenity-score-gauge-wrapper { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }
.amenity-score-gauge { flex: 1; height: 10px; background: var(--border); border-radius: 5px; overflow: hidden; }
.amenity-score-gauge-fill { height: 100%; border-radius: 5px; transition: width 0.6s ease; }
.amenity-score-value { font-size: 0.85rem; font-weight: 700; color: var(--text-primary); min-width: 50px; text-align: right; }
.amenity-score-details { display: grid; grid-template-columns: 1fr; gap: 6px; margin-bottom: 12px; }
.amenity-score-row { display: grid; grid-template-columns: 120px 1fr 50px; align-items: center; gap: 8px; font-size: 0.78rem; }
.amenity-score-label { font-weight: 600; color: var(--text-primary); }
.amenity-score-info { color: var(--text-secondary); }
.amenity-score-pts { text-align: right; font-weight: 600; color: var(--text-secondary); font-size: 0.72rem; }
.amenity-score-disclaimer { font-size: 0.7rem; color: var(--text-secondary); margin: 0; line-height: 1.4; opacity: 0.7; }
@media (max-width: 480px) {
    .amenity-score-row { grid-template-columns: 90px 1fr 40px; gap: 6px; font-size: 0.72rem; }
}
@media (max-width: 320px) {
    .amenity-score-row { grid-template-columns: 70px 1fr 35px; font-size: 0.68rem; }
}
/* UX-56: Walking Route Info Panel */
.walk-route-info { padding: 12px 16px; font-size: 0.85rem; border-top: 1px solid var(--border); }
.walk-route-info-item { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.walk-route-info-item:last-child { margin-bottom: 0; }
.walk-route-info-badge { display: inline-block; padding: 2px 8px; border-radius: 10px; color: var(--text-inverse); font-size: 0.72rem; font-weight: 600; min-width: 36px; text-align: center; }
.walk-route-mrt-marker { background: none !important; border: none !important; }
/* Shared map page layout */
.map-page { padding: 0 4px; }
.map-page-header { margin-bottom: 16px; }
.map-page-header h2 { color: var(--text-primary); margin: 8px 0 4px; font-size: 1.35rem; }
.map-page-header p { color: var(--text-secondary); font-size: 0.88rem; margin: 0; }
/* UX-55: Heatmap Layer Toggle Panel */
.heatmap-toggle-panel { background: var(--bg-card, #fff); border-radius: 8px; padding: 12px 14px; box-shadow: 0 2px 8px rgba(0,0,0,.15); max-width: 220px; }
.heatmap-toggle-panel .heatmap-toggle-title { font-weight: 600; font-size: 0.85rem; margin-bottom: 8px; color: var(--text-primary); border-bottom: 1px solid var(--border); padding-bottom: 6px; }
.heatmap-toggle-item { display: flex; align-items: center; gap: 8px; padding: 4px 0; font-size: 0.82rem; cursor: pointer; color: var(--text-primary); }
.heatmap-toggle-item input[type="checkbox"] {
    -webkit-appearance: none; appearance: none; width: 18px; height: 18px; border: 2px solid var(--border);
    border-radius: 4px; cursor: pointer; position: relative; flex-shrink: 0; background: var(--bg-card, #fff);
    transition: background .15s, border-color .15s;
}
.heatmap-toggle-item input[type="checkbox"]:checked { background: var(--primary); border-color: var(--primary); }
.heatmap-toggle-item input[type="checkbox"]:checked::after {
    content: ''; position: absolute; left: 4px; top: 1px; width: 6px; height: 10px;
    border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg);
}
.heatmap-toggle-dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; box-shadow: 0 0 0 2px rgba(0,0,0,.08); }
/* UX-57: Building Footprint Styles */
.building-map-controls { display: flex; gap: 8px; align-items: center; margin-bottom: 12px; flex-wrap: wrap; }
.building-map-controls select {
    padding: 8px 12px; border: 1px solid var(--border); border-radius: 6px;
    background: var(--bg-card); color: var(--text-primary); font-size: 0.88rem;
    min-width: 220px; cursor: pointer;
}
.building-height-legend { background: var(--bg-card, #fff); border-radius: 8px; padding: 10px 14px; box-shadow: 0 2px 8px rgba(0,0,0,.15); max-width: 180px; }
.building-height-legend .bhl-title { font-weight: 600; font-size: 0.82rem; margin-bottom: 6px; color: var(--text-primary); border-bottom: 1px solid var(--border); padding-bottom: 4px; }
.building-height-legend .bhl-row { display: flex; align-items: center; gap: 6px; font-size: 0.78rem; margin-bottom: 3px; color: var(--text-primary); }
.building-height-legend .bhl-swatch { width: 18px; height: 14px; border-radius: 3px; border: 1px solid rgba(0,0,0,.1); }
/* UT-1/2/3: Radar chart inside score cards */
.score-card-radar { margin-top: 12px; }
.score-card-radar:empty { display: none; margin: 0; }

/* Leaflet overrides */
.amenity-marker, .amenity-property-marker { background: transparent !important; border: none !important; }
[data-theme="dark"] .leaflet-tile-pane { filter: brightness(0.85) contrast(1.1); }
[data-theme="dark"] .amenity-map-legend { background: var(--bg-card) !important; color: var(--text-primary); }

/* ---- Screen Reader Only ---- */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }

/* Remove outline on mouse click (preserves for keyboard) */
a:focus:not(:focus-visible),
button:focus:not(:focus-visible),
select:focus:not(:focus-visible),
textarea:focus:not(:focus-visible) {
    outline: none;
}
/* AU-CSS-01: Ensure visible focus ring for keyboard navigation */
a:focus-visible,
button:focus-visible,
select:focus-visible,
input:focus-visible,
textarea:focus-visible {
    outline: 2px solid var(--secondary);
    outline-offset: 2px;
}

/* AU-CSS-16: Ensure interactive elements have transitions for smooth feedback */

/* UX-51 + AU-A11Y-17: Touch targets — minimum 44px on mobile (WCAG 2.5.8) */
/* ---- S6.1: Minimum touch targets (WCAG 2.5.8) ---- */
@media (pointer: coarse) {
    button, [role="button"], [role="tab"], .nav-item, .filter-btn,
    .calc-submit-btn, .chart-table-toggle, .kpi-card,
    .blog-search-btn,
    .empty-state-action, .calc-nav-group-header,
    .help-icon, .header-icon-btn, .share-btn,
    .cookie-btn, .login-submit-btn, input[type="checkbox"],
    input[type="radio"], select {
        min-height: 44px;
        min-width: 44px;
    }
}

/* ---- S5.6: Focus-visible rules for keyboard navigation ---- */
.nav-item:focus-visible,
.calc-nav-group-header:focus-visible,
.filter-btn:focus-visible,
.kpi-card:focus-visible,
.chart-table-toggle:focus-visible,
.header-icon-btn:focus-visible,
.help-icon:focus-visible,
.share-btn:focus-visible,
.cookie-btn:focus-visible,
.invest-collapsible-header:focus-visible,
.ac-th-sort:focus-visible,
.wizard-step:focus-visible,
.empty-state-action:focus-visible,
[role="button"]:focus-visible,
[tabindex]:focus-visible,
[data-action]:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
    border-radius: var(--radius-sm);
}

/* ---- Reduced Motion (S5.4: expanded) ---- */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
    .calc-submit-btn.calc-dirty { animation: none !important; }
    .nav-item.active::after { animation: none !important; }
    .skeleton-card::after { animation: none !important; }
    .toast { transition: none !important; }
    .tab-content { animation: none !important; }
    .modal, .modal-overlay { transition: none !important; }
    /* A11y-Wave4-03: belt-and-suspenders for individual keyframe animations
       that may bypass the universal selector (e.g. on elements carrying
       will-change or backface-visibility hints). */
    @keyframes navPulse { to { transform: none; } }
    @keyframes tabFadeIn { to { opacity: 1; transform: none; } }
    @keyframes skeleton-shimmer { to { background-position: 0 0; } }
    @keyframes calcDirtyPulse { to { box-shadow: none; } }
    @keyframes calcFadeIn { to { opacity: 1; transform: none; } }
    @keyframes slideUp { to { transform: none; } }
    /* View transitions — pseudo-elements not matched by wildcard * */
    ::view-transition-old(root),
    ::view-transition-new(root) { animation: none !important; }
    /* Chevron/collapse rotations */
    .collapse-btn,
    .kb-faq-chevron,
    .reports-chevron,
    .lang-chevron,
    .calc-nav-group-chevron { transition: none !important; }
}

/* UX-Wave5-01: Back-to-top button */
.back-to-top-btn {
    position: fixed;
    right: calc(20px + env(safe-area-inset-right));
    bottom: calc(80px + env(safe-area-inset-bottom));
    width: 44px; height: 44px; border-radius: 50%;
    background: var(--primary); color: #fff; border: none;
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2); cursor: pointer;
    opacity: 0; transform: translateY(8px); pointer-events: none;
    transition: opacity 0.2s ease, transform 0.2s ease;
    z-index: var(--z-toast);
}
.back-to-top-btn[hidden] { display: none; }
.back-to-top-btn.visible { opacity: 1; transform: translateY(0); pointer-events: auto; }
.back-to-top-btn:hover { background: var(--secondary); }
.back-to-top-btn:focus-visible { outline: 2px solid var(--secondary); outline-offset: 2px; }

.ad-leaderboard { max-width: 728px; height: 90px; overflow: hidden; }
.ad-leaderboard .adsbygoogle { margin: 0 auto; }
/* CLS: reserve slot heights so AdSense injection doesn't shift layout. */
.ad-sidebar { max-width: 300px; min-height: 250px; margin: 16px auto; padding: 0 8px; }
.ad-incontent { max-width: 728px; min-height: 90px; margin: 24px auto; }
.ad-infeed { max-width: 728px; min-height: 250px; margin: 24px auto; }
.ad-footer { max-width: 728px; min-height: 90px; margin: 24px auto 0; }
.ad-article { max-width: 728px; min-height: 250px; margin: 24px auto; }

/* ============================================
   SKIP TO CONTENT
   ============================================ */
.skip-to-content {
    position: absolute;
    top: -100%;
    left: 50%;
    transform: translateX(-50%);
    background: var(--secondary);
    color: var(--text-inverse);
    padding: 0.75rem 1.5rem;
    border-radius: var(--radius-sm);
    z-index: var(--z-skip-link);
    font-weight: 600;
    font-size: 0.85rem;
    text-decoration: none;
    transition: top 0.2s;
}
.skip-to-content:focus {
    top: 10px;
}

/* ============================================
   SEARCH BUTTON IN HEADER
   ============================================ */
.header-icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--bg);
    color: var(--text-secondary);
    cursor: pointer;
    transition: border-color 0.2s, color 0.2s;
}
.header-icon-btn:hover {
    border-color: var(--secondary);
    color: var(--secondary);
}

/* ============================================
   FOOTER
   ============================================ */
.site-footer {
    background: var(--bg-sidebar);
    color: var(--text-inverse, #fff);
    padding: 1.5rem 1rem;
    margin-top: 2rem;
}
.footer-content {
    max-width: 900px;
    margin: 0 auto;
    text-align: center;
    padding: 2rem 1rem;
}
/* A3: Footer site navigation */
.footer-nav {
    display: flex;
    justify-content: center;
    gap: 3rem;
    margin-bottom: 2rem;
    flex-wrap: wrap;
    text-align: left;
}
.footer-nav-col {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    min-width: 120px;
}
.footer-nav-heading {
    color: rgba(255,255,255,0.9);
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    margin: 0 0 0.4rem;
}
.footer-nav a {
    color: rgba(255,255,255,0.55);
    text-decoration: none;
    font-size: 0.82rem;
    transition: color 0.2s;
}
.footer-nav a:hover {
    color: rgba(255,255,255,0.9);
}
@media (hover: none) {
    .footer-nav a:hover { color: rgba(255,255,255,0.55); }
    /* Responsive-T2: neutralize lift-on-hover on touch devices so the :hover
       state doesn't stick after a tap (iOS Safari persists hover until the
       next tap elsewhere, which leaves cards visually "lifted" indefinitely). */
    .property-card:hover,
    .district-card:hover,
    .report-card:hover {
        transform: none;
        box-shadow: var(--shadow);
    }
}
@media (max-width: 600px) {
    .footer-nav { gap: 1.5rem; justify-content: flex-start; padding: 0 0.5rem; }
    .footer-nav-col { min-width: 100px; }
}
.footer-links {
    display: flex;
    justify-content: center;
    gap: 1.5rem;
    margin-top: 0.75rem;
}
.footer-links a {
    color: rgba(255,255,255,0.7);
    text-decoration: none;
    font-size: 0.82rem;
    transition: color 0.2s;
}
.footer-links a:hover {
    color: var(--text-inverse);
    text-decoration: underline;
}
.footer-link-btn {
    background: none;
    border: none;
    color: rgba(255,255,255,0.55);
    font-size: 0.8rem;
    cursor: pointer;
    padding: 0;
    text-decoration: underline;
    font-family: inherit;
}
.footer-link-btn:hover {
    color: var(--text-inverse);
}
.footer-disclaimer {
    color: rgba(255,255,255,0.5);
    font-size: 0.75rem;
    line-height: 1.6;
    margin-bottom: 1rem;
}

/* ============================================
   LEGAL PAGES (Privacy Policy, Terms of Use)
   ============================================ */
.legal-page {
    max-width: 800px;
    margin: 0 auto;
    padding: 24px;
    color: var(--text);
    line-height: 1.8;
}
.legal-page h2 {
    font-size: 1.5rem;
    font-weight: 700;
    margin-bottom: 8px;
    color: var(--text-primary, var(--text));
}
.legal-page .legal-updated {
    font-size: 0.85rem;
    color: var(--text-muted, var(--text-secondary));
    margin-bottom: 20px;
}
.legal-page h3 {
    font-size: 1.15rem;
    font-weight: 600;
    margin-top: 24px;
    margin-bottom: 8px;
    color: var(--text-primary, var(--text));
}
.legal-page h4 {
    font-size: 1rem;
    font-weight: 600;
    margin-top: 16px;
    margin-bottom: 6px;
    color: var(--text-primary, var(--text));
}
.legal-page p {
    font-size: 0.88rem;
    margin-bottom: 12px;
    color: var(--text-secondary);
}
.legal-page ul {
    margin: 8px 0 16px 24px;
    color: var(--text-secondary);
}
.legal-page li {
    font-size: 0.88rem;
    color: var(--text-secondary);
    margin-bottom: 4px;
}
.legal-page a {
    color: var(--secondary);
    text-decoration: none;
}
.legal-page a:hover {
    text-decoration: underline;
}
/* Buttons inside .legal-page must keep their own colors —
   the generic .legal-page a rule above outranks .btn-primary's color
   (specificity 0,1,1 vs 0,1,0) and otherwise paints the label the same
   red as the button background, making it invisible. */
.legal-page a.btn-primary { color: var(--text-inverse); }
.legal-page a.btn-primary:hover { text-decoration: none; }
.legal-page a.btn-outline,
.legal-page a.btn-secondary { color: var(--secondary); }
.legal-page strong {
    color: var(--text);
}
.legal-table {
    width: 100%;
    border-collapse: collapse;
    margin: 12px 0 16px;
    font-size: 0.85rem;
}
.legal-table th, .legal-table td {
    padding: 8px 12px;
    text-align: left;
    border: 1px solid var(--border);
}
.legal-table th {
    background: var(--bg-sidebar);
    font-weight: 600;
    color: var(--text);
    font-size: 0.82rem;
}
.legal-table td {
    color: var(--text-secondary);
}

/* Vertical form layout shared by contact, partners, advertise-apply, advertising-policy.
   Each <label> is a flex column with the span (field name) above its input. */
.form-stack {
    display: flex;
    flex-direction: column;
    gap: 14px;
    max-width: 560px;
    margin: 8px 0 16px;
}
.form-stack label {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.form-stack label > span {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text-primary, var(--text));
}
.form-stack input[type="text"],
.form-stack input[type="email"],
.form-stack input[type="tel"],
.form-stack input[type="url"],
.form-stack input[type="number"],
.form-stack select,
.form-stack textarea {
    width: 100%;
    padding: 8px 10px;
    border: 1px solid var(--border);
    border-radius: var(--radius, 6px);
    background: var(--bg-card);
    color: var(--text);
    font: inherit;
    box-sizing: border-box;
}
.form-stack textarea {
    min-height: 140px;
    resize: vertical;
    line-height: 1.5;
}
.form-stack input:focus,
.form-stack select:focus,
.form-stack textarea:focus {
    outline: 2px solid var(--primary);
    outline-offset: 1px;
    border-color: var(--primary);
}
.form-stack button[type="submit"] {
    align-self: flex-start;
    margin-top: 4px;
}

.footer-links-secondary {
    margin-top: 4px;
    display: flex;
    justify-content: center;
    gap: 1.25rem;
    flex-wrap: wrap;
}
.footer-links-secondary .footer-link-btn {
    font-size: 0.72rem;
    opacity: 0.7;
}
.footer-links-secondary .footer-link-btn:hover {
    opacity: 1;
}

/* ============================================
   COOKIE CONSENT BANNER
   ============================================ */
.cookie-banner {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: var(--z-toast);
    background: rgba(var(--bg-card-rgb), 0.85);
    backdrop-filter: blur(12px);
       border-top: 2px solid var(--accent);
    box-shadow: 0 -4px 20px rgba(0,0,0,0.15);
    padding: 1rem 2rem;
    animation: slideUp 0.3s ease;
}
@keyframes slideUp {
    from { transform: translateY(100%); }
    to { transform: translateY(0); }
}
.cookie-content {
    max-width: 1000px;
    margin: 0 auto;
}
.cookie-content p {
    font-size: 0.85rem;
    line-height: 1.5;
    color: var(--text);
    margin: 0;
}
.cookie-actions {
    display: flex;
    gap: 0.75rem;
    flex-wrap: wrap;
    margin-top: 0.75rem;
}
.cookie-btn {
    padding: 0.5rem 1.25rem;
    border-radius: var(--radius-sm);
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
    border: none;
    transition: opacity 0.2s, transform 0.1s;
}
.cookie-btn:hover { opacity: 0.9; }
.cookie-btn:active { transform: scale(0.97); }
.cookie-btn-primary {
    background: var(--accent);
    color: var(--text-inverse);
}
.cookie-btn-secondary {
    background: var(--bg);
    border: 1px solid var(--border);
    color: var(--text);
}
.cookie-btn-link {
    background: transparent;
    color: var(--secondary);
    text-decoration: underline;
    padding-left: 0;
}
.cookie-pref-label {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.85rem;
    color: var(--text);
    margin-bottom: 0.5rem;
}
.cookie-pref-desc {
    font-size: 0.75rem;
    color: var(--text-secondary);
    margin-left: 0.5rem;
}

/* ============================================
   TOAST NOTIFICATIONS
   ============================================ */
.toast-container {
    position: fixed;
    bottom: 1.5rem;
    right: 1.5rem;
    z-index: var(--z-toast);
    display: flex;
    flex-direction: column-reverse;
    gap: 0.5rem;
    pointer-events: none;
}
.toast {
    padding: 0.75rem 1rem;
    border-radius: var(--radius-sm);
    color: var(--text-inverse);
    display: flex;
    align-items: center;
    gap: 0.5rem;
    min-width: 280px;
    max-width: 400px;
    font-size: 0.85rem;
    font-weight: 500;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    pointer-events: auto;
    animation: toastSlideIn 0.3s ease;
}
.toast-exit {
    animation: toastSlideOut 0.3s ease forwards;
}
.toast-icon {
    font-weight: 700;
    font-size: 1rem;
    flex-shrink: 0;
}
.toast-message {
    flex: 1;
}
.toast-success { background: var(--success); }
.toast-error { background: var(--danger); }
.toast-warning { background: var(--warning); color: var(--text); }
.toast-info { background: var(--secondary); }
.toast-close {
    margin-left: auto;
    cursor: pointer;
    opacity: 0.7;
    background: none;
    border: none;
    color: inherit;
    font-size: 1.1rem;
    line-height: 1;
    padding: 0 0.25rem;
}
.toast-close:hover { opacity: 1; }

@keyframes toastSlideIn {
    from { opacity: 0; transform: translateX(100%); }
    to { opacity: 1; transform: translateX(0); }
}
@keyframes toastSlideOut {
    from { opacity: 1; transform: translateX(0); }
    to { opacity: 0; transform: translateX(100%); }
}

/* ============================================
   CONTEXTUAL HELP TOOLTIPS
   ============================================ */
.help-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: var(--border);
    color: var(--text-secondary);
    font-size: 0.75rem;
    font-weight: 700;
    cursor: help;
    border: none;
    vertical-align: middle;
    margin-left: 4px;
    transition: background 0.2s;
    line-height: 1;
    padding: 0;
    font-family: inherit;
}
.help-icon:hover, .help-icon:focus-visible {
    background: var(--secondary);
    color: var(--text-inverse);
}
/* UF-18: Glossary auto-detected terms */
.glossary-term {
    border-bottom: 1px dotted var(--text-secondary);
    cursor: help;
    transition: border-color 0.2s;
}
.glossary-term:hover { border-bottom-color: var(--accent); color: var(--accent); }

.tooltip-popup {
    position: absolute;
    z-index: var(--z-popover);
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 0.6rem 0.8rem;
    font-size: 0.8rem;
    max-width: 300px;
    box-shadow: var(--shadow-lg);
    line-height: 1.5;
    pointer-events: auto;
    color: var(--text);
    animation: tooltipFadeIn 0.15s ease;
}
.tooltip-popup a {
    color: var(--secondary);
    text-decoration: underline;
    font-weight: 500;
}
.tooltip-popup a:hover { color: var(--accent); }
@keyframes tooltipFadeIn {
    from { opacity: 0; transform: translateY(4px); }
    to { opacity: 1; transform: translateY(0); }
}

/* ============================================
   INLINE VALIDATION
   ============================================ */
.field-error {
    color: var(--danger);
    font-size: 0.75rem;
    margin-top: 2px;
    display: flex;
    align-items: center;
    gap: 4px;
}
.field-error::before {
    content: "\2717";
    font-weight: bold;
}
input.invalid, select.invalid {
    border-color: var(--danger) !important;
    box-shadow: 0 0 0 2px rgba(220,53,69,0.15); /* A4-04: danger focus ring — unique color, not --focus-ring */
}
input.valid {
    border-color: var(--success) !important;
}

/* ============================================
   COLOR INDEPENDENCE
   ============================================ */
/* KPI change indicators: arrows alongside color */
.kpi-change.positive::before { content: "\25B2 "; }
.kpi-change.negative::before { content: "\25BC "; }

/* ============================================
   EMPTY STATES
   ============================================ */
.empty-state {
    text-align: center;
    padding: 3rem 1.5rem;
    color: var(--text-secondary);
}
.empty-state-icon {
    font-size: 3rem;
    margin-bottom: 1rem;
    opacity: 0.3;
}
.empty-state-title {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--text);
    margin-bottom: 0.5rem;
}
.empty-state-desc {
    font-size: 0.9rem;
    margin-bottom: 1.5rem;
    max-width: 400px;
    margin-left: auto;
    margin-right: auto;
    line-height: 1.5;
}
.empty-state-action {
    display: inline-block;
    background: var(--secondary);
    color: var(--text-inverse);
    border: none;
    padding: 0.6rem 1.5rem;
    border-radius: var(--radius-sm);
    cursor: pointer;
    font-weight: 600;
    font-size: 0.85rem;
    transition: opacity 0.2s;
}
.empty-state-action:hover { opacity: 0.85; }

/* ============================================
   CONDO SELECT PROMPT (Overview empty state)
   ============================================ */
.condo-select-prompt {
    text-align: center;
    max-width: 500px;
    margin: 80px auto;
    padding: 2rem 1.5rem;
}
.condo-select-prompt-icon {
    width: 80px;
    height: 80px;
    margin: 0 auto 1.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-secondary);
    border-radius: 50%;
    color: var(--secondary);
}
.condo-select-prompt-icon svg {
    width: 44px;
    height: 44px;
}
.condo-select-prompt h2 {
    font-size: 1.3rem;
    font-weight: 700;
    color: var(--text);
    margin: 0 0 0.5rem;
}
.condo-select-prompt p {
    font-size: 0.9rem;
    color: var(--text-secondary);
    line-height: 1.6;
    margin: 0 0 1.5rem;
}
.condo-select-prompt-search {
    display: flex;
    gap: 8px;
    align-items: flex-start;
    max-width: 400px;
    margin: 0 auto;
}
.condo-select-prompt-search .condo-prompt-select {
    flex: 1;
    min-width: 0;
    text-align: left;
}
.condo-select-prompt-search .myport-prop-trigger {
    padding: 0.6rem 0.85rem;
    font-size: 0.88rem;
}
.condo-select-prompt-search .myport-prop-dropdown {
    max-height: 300px;
}
.condo-select-prompt-search .myport-prop-list {
    max-height: 250px;
}

/* ============================================
   SKELETON LOADING
   ============================================ */
.skeleton {
    background: linear-gradient(90deg, var(--border-light) 25%, var(--border) 50%, var(--border-light) 75%);
    background-size: 200% 100%;
    animation: shimmer 1.5s infinite;
    border-radius: var(--radius-sm);
}
@keyframes shimmer {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}
.skeleton-chart { height: 300px; margin-bottom: 1rem; }
.skeleton-kpi { height: 80px; border-radius: var(--radius-sm); }

/* AU-UX-01: Chart loading spinner — shown in chart containers before data loads */
.chart-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: var(--chart-min-height, 320px);
    color: var(--text-secondary);
    font-size: 0.85rem;
    gap: 0.5rem;
}
.chart-loading::before {
    content: '';
    display: inline-block;
    width: 22px;
    height: 22px;
    border: 2.5px solid var(--border);
    border-top-color: var(--secondary);
    border-radius: 50%;
    animation: chart-spin 0.7s linear infinite;
}
@keyframes chart-spin {
    to { transform: rotate(360deg); }
}

/* UX-35: Skeleton grid layouts for initial page load */
.skeleton-blog-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 16px; padding: 16px 0; }
.skeleton-blog-grid .skeleton-card { min-height: 180px; padding: 16px; }

/* ============================================
   BREADCRUMB (SEMANTIC)
   ============================================ */
.breadcrumb-nav {
    padding: 0.5rem 1.5rem;
    font-size: 0.82rem;
    color: var(--text-primary);
}
.breadcrumb-list {
    display: flex;
    align-items: center;
    list-style: none;
    margin: 0;
    padding: 0;
    flex-wrap: wrap;
    gap: 0;
}
.breadcrumb-list li {
    display: flex;
    align-items: center;
}
.breadcrumb-list .sep {
    margin: 0 0.4rem;
    color: var(--text-primary);
    opacity: 0.5;
    font-size: 0.75rem;
}
.breadcrumb-list a {
    color: var(--secondary);
    text-decoration: none;
    cursor: pointer;
}
.breadcrumb-list a:hover {
    text-decoration: underline;
}
.breadcrumb-list span:not(.sep) {
    color: var(--text-primary);
    opacity: 0.8;
}

/* ============================================
   FOCUS IMPROVEMENTS
   ============================================ */
*:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
}
.nav-item:focus-visible {
    background: rgba(255,255,255,0.1);
    outline-offset: -2px;
}
button:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
}
/* Restore visible keyboard focus on inputs that use outline:none on :focus.
   The :focus rules provide border-color change for mouse users; these
   :focus-visible rules ensure keyboard users also get a clear outline. */
.range-input:focus-visible,
.calc-field input:focus-visible,
.calc-field select:focus-visible,
.typeahead-input:focus-visible,
.pms-search:focus-visible,
.condo-search-input:focus-visible,
.cmd-input:focus-visible,
.blog-search-input:focus-visible,
.login-field input:focus-visible,
.checklist-feedback-form textarea:focus-visible,
.myport-field input:focus-visible,
.myport-field select:focus-visible,
.ac-filter-select:focus-visible,
.user-auth-tab-content input:focus-visible,
.sc-form input:focus-visible,
.sc-form textarea:focus-visible,
.myport-add-collapsible .myport-field input:focus-visible,
.myport-add-collapsible .myport-field select:focus-visible,
/* A11y-Wave4-02: coverage for the remaining audit-flagged inputs whose
   :focus rules clear the outline without a matching :focus-visible. */
.guides-search-input:focus-visible,
.mv-district-form input:focus-visible,
.mv-district-form select:focus-visible {
    outline: 2px solid var(--secondary);
    outline-offset: -1px;
}
.hdb-town-card:focus-visible,
.landed-district-card:focus-visible,
.hdb-street-card:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
}

/* ============================================
   Borrowing Sensitivity Heatmap
   ============================================ */
.heatmap-controls {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 18px;
    padding: 12px 18px;
    border-bottom: 1px solid var(--border);
}
.heatmap-mode-group {
    display: flex;
    align-items: center;
    gap: 8px;
}
.heatmap-mode-group > span {
    font-size: 13px;
    font-weight: 500;
    color: var(--text-secondary);
}
.heatmap-mode-btn {
    padding: 5px 12px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--bg-card);
    color: var(--text-primary);
    font-size: 12px;
    cursor: pointer;
    transition: color 0.2s, background-color 0.2s, border-color 0.2s;
}
.heatmap-mode-btn.active {
    background: var(--primary);
    color: var(--text-inverse);
    border-color: var(--primary);
}
.step-controls {
    display: flex;
    gap: 16px;
    align-items: center;
}
.step-control {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: var(--text-secondary);
}
.step-control span.step-label {
    font-weight: 500;
    min-width: 60px;
}
.step-btn {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    border: 1px solid var(--border);
    background: var(--bg-card);
    color: var(--text-primary);
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: color 0.15s, background-color 0.15s;
    line-height: 1;
    padding: 0;
}
.step-btn:hover {
    background: var(--primary);
    color: var(--text-inverse);
    border-color: var(--primary);
}
.step-value {
    font-weight: 600;
    min-width: 42px;
    text-align: center;
    color: var(--text-primary);
    font-size: 13px;
}

/* ============================================
   End-to-End Investment Calculator
   ============================================ */
.invest-field-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 10px;
}
.invest-field {
    display: flex;
    flex-direction: column;
    gap: 3px;
}
.invest-field label,
.invest-field > span {
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--text-secondary);
}
.invest-field input,
.invest-field select {
    padding: 6px 10px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--bg-card);
    color: var(--text-primary);
    font-size: 13px;
    width: 100%;
    box-sizing: border-box;
}
.invest-field .auto-computed {
    background: var(--bg-secondary);
    color: var(--text-secondary);
    font-style: italic;
    cursor: not-allowed;
}
.invest-timeline-chart {
    margin-top: 18px;
    min-height: var(--chart-min-height);
}

/* ============================================
   Responsive: New Calculators
   ============================================ */
/* ============================================
   News Section
   ============================================ */
.news-container {
    max-width: 900px;
    margin: 0 auto;
}
.news-article {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 0;
    margin-bottom: 18px;
    box-shadow: var(--shadow);
    overflow: hidden;
}
.news-article-image {
    width: 100%;
    height: 220px;
    object-fit: cover;
    display: block;
}
.news-article-body {
    padding: 24px;
}
.news-article-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 10px;
}
.news-category-badge {
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 3px 8px;
    border-radius: 4px;
    background: var(--primary);
    color: var(--text-inverse);
}
.news-category-badge.update { background: var(--status-success); }
.news-category-badge.market { background: #f97316; }
.news-category-badge.feature { background: #8b5cf6; }
.news-date {
    font-size: 12px;
    color: var(--text-secondary);
}
.news-article h2 {
    font-size: 20px;
    font-weight: 700;
    margin: 0 0 8px;
    color: var(--text-primary);
}
.news-article .news-summary {
    font-size: 14px;
    color: var(--text-secondary);
    line-height: 1.6;
    margin: 0 0 10px;
}
.news-article .news-content {
    font-size: 14px;
    color: var(--text-primary);
    line-height: 1.7;
}
.news-article .news-content p { margin: 0 0 10px; }
.news-read-more {
    font-size: 13px;
    font-weight: 600;
    color: var(--primary);
    cursor: pointer;
    background: none;
    border: none;
    padding: 0;
}
.news-expanded { display: none; }
.news-article.expanded .news-expanded { display: block; }
.news-article.expanded .news-read-more { display: none; }
.news-empty {
    text-align: center;
    padding: 60px 20px;
    color: var(--text-secondary);
}

/* ============================================
   Blog / Content Hub
   ============================================ */
.blog-search-bar {
    display: flex;
    gap: 8px;
    margin-bottom: 16px;
}
.blog-search-input {
    flex: 1;
    padding: 10px 14px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--bg-card);
    color: var(--text-primary);
    font-size: 14px;
}
.blog-search-input:focus {
    outline: none;
    border-color: var(--secondary);
    box-shadow: var(--focus-ring-light);
}
.blog-search-btn,
.blog-search-clear {
    padding: 10px 18px;
    border: none;
    border-radius: var(--radius);
    background: var(--text-secondary);
    color: var(--text-inverse);
    cursor: pointer;
    font-size: 13px;
    font-weight: 600;
    white-space: nowrap;
}
.blog-search-btn:hover { opacity: 0.9; }

.blog-filter-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 10px;
}
.blog-chip {
    padding: 6px 14px;
    border: 1px solid var(--border);
    border-radius: 20px;
    background: var(--bg-card);
    color: var(--text-secondary);
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    transition: color 0.15s, background-color 0.15s, border-color 0.15s;
}
.blog-chip:hover { border-color: var(--secondary); color: var(--secondary); }
.blog-chip.active {
    background: var(--secondary);
    color: var(--text-inverse);
    border-color: var(--secondary);
}

.blog-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 20px;
    margin-bottom: 20px;
}

/* ── Knowledge Base filter chips ── */
.kb-filter-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 24px; }
.kb-chip {
    padding: 6px 16px;
    border-radius: 20px;
    border: 1px solid var(--border);
    background: var(--bg-card);
    color: var(--text-secondary);
    font-size: 0.82rem;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.15s, border-color 0.15s, color 0.15s;
}
.kb-chip:hover { border-color: var(--secondary); color: var(--text); }
.kb-chip:focus-visible { outline: 2px solid var(--secondary); outline-offset: 2px; }
.kb-chip.active { background: var(--secondary); color: #fff; border-color: var(--secondary); }

/* ── Knowledge Base hub sections ── */
.kb-hub-section { margin-bottom: 36px; }
.kb-hub-section:last-child { margin-bottom: 0; }
.kb-hub-section.kb-hidden { display: none; }
.kb-hub-title {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0 0 6px;
    padding-bottom: 8px;
    border-bottom: 2px solid var(--border);
}
.kb-hub-desc {
    font-size: 0.9rem;
    color: var(--text-secondary);
    margin: 0 0 16px;
    line-height: 1.5;
}
.kb-card .blog-card-body { padding: 14px 16px; }
.kb-card .blog-card-title { font-size: 15px; margin-bottom: 6px; }
.kb-card .blog-card-summary { font-size: 12.5px; margin-bottom: 8px; }
.kb-card .blog-card-readtime { font-size: 0.72rem; font-weight: 600; color: var(--secondary); text-transform: uppercase; letter-spacing: 0.03em; }

/* ── Guides Hub ── */
.guides-hub { padding: 0 4px; }
.guides-intro { color: var(--text-secondary); font-size: 0.92rem; margin-bottom: 20px; }
.guides-search-input { width: 100%; padding: 10px 14px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--bg-card); color: var(--text); font-size: 0.88rem; margin-bottom: 12px; box-sizing: border-box; }
.guides-search-input:focus { outline: none; border-color: var(--secondary); }
.guides-filter-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.guides-chip { padding: 6px 16px; border-radius: 20px; border: 1px solid var(--border); background: var(--bg-card); color: var(--text-secondary); font-size: 0.82rem; font-weight: 600; cursor: pointer; transition: background-color 0.15s, border-color 0.15s, color 0.15s; }
.guides-chip:hover { border-color: var(--secondary); color: var(--text); }
.guides-chip:focus-visible { outline: 2px solid var(--secondary); outline-offset: 2px; }
.guides-chip.active { background: var(--secondary); color: #fff; border-color: var(--secondary); }
.guides-hub-banner { padding: 10px 14px; background: var(--bg-card); border: 1px solid var(--secondary); border-radius: var(--radius); margin-bottom: 12px; font-size: 0.88rem; }
.guides-hub-banner a { color: var(--secondary); font-weight: 600; text-decoration: none; }
.guides-hub-banner a:hover { text-decoration: underline; }
.guides-count { font-size: 0.8rem; color: var(--text-secondary); margin-bottom: 8px; }
.guides-table { width: 100%; border-collapse: collapse; font-size: 0.88rem; }
.guides-table th { text-align: left; padding: 10px 12px; border-bottom: 2px solid var(--border); font-weight: 700; color: var(--text-secondary); font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.03em; }
.guides-table td { padding: 10px 12px; border-bottom: 1px solid var(--border); }
.guides-table tbody tr:hover { background: var(--bg-alt, rgba(0,0,0,0.02)); }
.guides-table td a { color: var(--text); font-weight: 600; text-decoration: none; }
.guides-table td a:hover { color: var(--secondary); text-decoration: underline; }
.guides-table-empty td { text-align: center; padding: 24px 12px; color: var(--text-secondary); }
.guides-cat-badge { display: inline-block; font-size: 0.75rem; padding: 2px 10px; border-radius: 10px; background: var(--bg); color: var(--text-secondary); font-weight: 500; }
.blog-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
    cursor: pointer;
    transition: transform 0.15s, box-shadow 0.15s;
    text-decoration: none;
    color: inherit;
    display: block;
}
.blog-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0,0,0,0.08);
}
.blog-card-image {
    width: 100%;
    height: 180px;
    background-size: cover;
    background-position: center;
    background-color: var(--bg);
}
.blog-card-image-placeholder {
    background: linear-gradient(135deg, var(--primary) 0%, var(--secondary) 100%);
    opacity: 0.15;
}
.blog-card-body {
    padding: 16px;
}
.blog-card-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
    margin-bottom: 8px;
    font-size: 0.75rem;
    color: var(--text-secondary);
}
.blog-card-type {
    background: var(--secondary);
    color: var(--text-inverse);
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}
.blog-card-readtime { color: var(--text-secondary); }
/* Legacy: -webkit-box needed for line-clamp compat until Safari 16+ floor */
.blog-card-title {
    font-size: 16px;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0 0 8px;
    line-height: 1.3;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.blog-card-summary {
    font-size: 13px;
    color: var(--text-secondary);
    line-height: 1.5;
    margin: 0 0 10px;
}
.blog-pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 12px;
    margin: 20px 0;
}
.blog-page-btn {
    padding: 8px 16px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--bg-card);
    color: var(--text-primary);
    cursor: pointer;
    font-size: 13px;
}
.blog-page-btn:hover { border-color: var(--secondary); color: var(--secondary); }
.blog-page-info { font-size: 13px; color: var(--text-secondary); }
.blog-results-count {
    text-align: center;
    font-size: 12px;
    color: var(--text-secondary);
    margin-top: 8px;
}

.blog-empty {
    text-align: center;
    padding: 60px 20px;
    color: var(--text-secondary);
}

/* IL-20/21: Blog Hub Header for tag/category pages */
.blog-hub-header { padding: 1.5rem 0 1rem; border-bottom: 1px solid var(--border); margin-bottom: 1rem; }
.blog-hub-header h1 { font-size: 1.75rem; font-weight: 700; margin: 0 0 0.5rem; color: var(--text-primary); }
.blog-hub-header p { color: var(--text-secondary); margin: 0.25rem 0; font-size: 0.95rem; }
.blog-hub-count { font-size: 0.85rem; color: var(--text-muted); }

/* Blog Detail View */
.blog-detail {
    max-width: 800px;
    margin: 0 auto;
}
.blog-detail-image {
    width: 100%;
    aspect-ratio: 16 / 9; /* LH-CLS: reserve box before image bytes arrive */
    max-height: 400px;
    object-fit: cover;
    border-radius: var(--radius);
    margin-bottom: 20px;
    background: var(--bg-subtle, #f5f5f5); /* visible placeholder while loading */
}
.blog-detail-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
    margin-bottom: 12px;
    font-size: 12px;
    color: var(--text-secondary);
}
.blog-detail-views { color: var(--text-secondary); }
.blog-detail-meta-updated {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: var(--text-secondary);
    padding: 2px 8px;
    background: var(--bg-soft, rgba(0,0,0,0.04));
    border-radius: var(--radius);
    font-size: 11px;
}
.blog-detail-meta-byline {
    color: var(--text-secondary);
    font-size: 12px;
}
.blog-detail-meta-byline a {
    color: var(--text-primary);
    text-decoration: none;
    font-weight: 600;
}
.blog-detail-meta-byline a:hover { text-decoration: underline; }
.blog-detail-title {
    font-size: 28px;
    font-weight: 800;
    color: var(--text-primary);
    line-height: 1.2;
    margin: 0 0 12px;
}
.blog-detail-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 20px;
}
.blog-detail-tag {
    font-size: 12px;
    color: var(--accent);
    text-decoration: none;
    padding: 3px 10px;
    border: 1px solid var(--accent);
    border-radius: var(--radius-lg);
}
.blog-detail-tag:hover { background: var(--accent); color: var(--text-inverse); }

/* Related Properties block on blog/guide detail (MPA) */
.blog-detail-condos {
    margin: 24px 0;
    padding: 16px 20px;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: var(--radius);
}
.blog-detail-condos > strong {
    display: block;
    font-size: 14px;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 10px;
}
.blog-detail-condos ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 8px;
}
.blog-detail-condos li {
    padding: 0;
}
.blog-detail-condos li a {
    display: block;
    padding: 8px 12px;
    font-size: 13px;
    color: var(--text-primary);
    text-decoration: none;
    background: var(--surface, var(--bg));
    border: 1px solid var(--border);
    border-radius: var(--radius-sm, 6px);
    transition: border-color 0.15s, color 0.15s, background 0.15s;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.blog-detail-condos li a:hover {
    border-color: var(--accent);
    color: var(--accent);
}

/* Table of Contents */
.blog-toc {
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 16px 20px;
    margin-bottom: 24px;
}
.blog-toc h4 {
    margin: 0 0 10px;
    font-size: 14px;
    font-weight: 700;
    color: var(--text-primary);
}
.blog-toc ul {
    list-style: none;
    padding: 0;
    margin: 0;
}
.blog-toc li {
    padding: 4px 0;
}
.blog-toc li a {
    color: var(--secondary);
    text-decoration: none;
    font-size: 13px;
}
.blog-toc li a:hover { text-decoration: underline; }
.blog-toc .toc-indent { padding-left: 16px; }

/* Article / Guide TOC (generator + MPA blog-detail template) */
.article-toc {
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 16px 20px;
    margin-bottom: 24px;
}
.article-toc > strong {
    display: block;
    margin-bottom: 10px;
    font-size: 14px;
    font-weight: 700;
    color: var(--text-primary);
}
.article-toc ol,
.article-toc ul {
    list-style: none;
    padding: 0;
    margin: 0;
    counter-reset: toc-counter;
}
.article-toc li {
    padding: 4px 0;
    counter-increment: toc-counter;
}
.article-toc li::before {
    content: counter(toc-counter) ". ";
    color: var(--text-secondary);
    font-size: 13px;
    margin-right: 4px;
}
.article-toc a {
    color: var(--secondary);
    text-decoration: none;
    font-size: 13px;
}
.article-toc a:hover { text-decoration: underline; }
.article-toc .toc-indent { padding-left: 16px; }

/* Blog Article Content */
.blog-detail-content {
    font-size: 15px;
    line-height: 1.75;
    color: var(--text-primary);
    margin-bottom: 30px;
}
.blog-detail-content h2 {
    font-size: 22px;
    font-weight: 700;
    margin: 28px 0 12px;
    padding-top: 16px;
}
.blog-detail-content h3 {
    font-size: 18px;
    font-weight: 600;
    margin: 22px 0 10px;
}
.blog-detail-content p { margin: 0 0 14px; }

/* Justified prose for long-form content (articles, editorials, calculators, legal) */
.blog-detail-content p,
.condo-review p,
.editorial-prose-body p,
.editorial-faq-answer p,
.legal-page p,
.about-page p {
    text-align: justify;
    text-justify: inter-word;
    hyphens: auto;
    -webkit-hyphens: auto;
    overflow-wrap: break-word;
}

@media (max-width: 600px) {
    .blog-detail-content p,
    .condo-review p,
    .editorial-prose-body p,
    .editorial-faq-answer p,
    .legal-page p,
    .about-page p {
        text-align: left;
        hyphens: manual;
    }
}
.blog-detail-content ul, .blog-detail-content ol {
    margin: 0 0 14px;
    padding-left: 24px;
}
.blog-detail-content li { margin-bottom: 6px; }
.blog-detail-content blockquote {
    border-left: 4px solid var(--accent);
    padding: 12px 20px;
    margin: 16px 0;
    background: var(--bg);
    border-radius: 0 var(--radius) var(--radius) 0;
    color: var(--text-secondary);
    font-style: italic;
}
.blog-detail-content img {
    max-width: 100%;
    border-radius: var(--radius);
    margin: 12px 0;
}
.blog-detail-content a { color: var(--secondary); }
.blog-detail-content table {
    width: 100%;
    border-collapse: collapse;
    margin: 14px 0;
    font-size: 13px;
    display: block;
    overflow-x: auto;

}
.blog-detail-content th, .blog-detail-content td {
    border: 1px solid var(--border);
    padding: 8px 12px;
    text-align: left;
}
.blog-detail-content th { background: var(--bg); font-weight: 600; }

/* Guide callouts (reuse condo-review callout styles in blog context) */
.blog-detail-content .review-callout { border-radius: var(--radius-sm); padding: 16px 20px; margin: 20px 0; font-size: 0.88rem; line-height: 1.6; }
.blog-detail-content .review-callout.info { background: rgba(46, 134, 171, 0.08); border-left: 3px solid var(--secondary); color: var(--text-primary); }
.blog-detail-content .review-callout.warning { background: rgba(255, 193, 7, 0.1); border-left: 3px solid var(--warning); color: var(--text-primary); }

/* Guide Hub Grid (SE-33 pillar pages) */
.guide-hub-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 16px; margin: 16px 0 28px; }
.guide-hub-card { padding: 16px 18px; background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius); transition: border-color 0.15s, box-shadow 0.15s; }
.guide-hub-card:hover { border-color: var(--secondary); box-shadow: 0 2px 8px rgba(0,0,0,0.06); }
.guide-hub-card h3 { font-size: 0.92rem; font-weight: 600; margin: 0 0 6px; line-height: 1.35; }
.guide-hub-card h3 a { color: var(--text-primary); text-decoration: none; }
.guide-hub-card h3 a:hover { color: var(--secondary); }
.guide-hub-card p { font-size: 0.82rem; color: var(--text-secondary); margin: 0; line-height: 1.5; }

/* Compact variant for large lists (districts) */
.guide-hub-grid--compact { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 8px; margin: 12px 0 24px; }
.guide-hub-card--compact { padding: 10px 14px; background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius-sm); transition: border-color 0.15s; }
.guide-hub-card--compact:hover { border-color: var(--secondary); }
.guide-hub-card--compact a { color: var(--text-primary); text-decoration: none; font-size: 0.85rem; font-weight: 500; }
.guide-hub-card--compact a:hover { color: var(--secondary); }

/* Related Articles */
.blog-related { margin: 30px 0; }
.blog-related h3 {
    font-size: 18px;
    font-weight: 700;
    margin-bottom: 12px;
}
.blog-related-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 12px;
}
.blog-related-card {
    display: flex;
    flex-direction: column;
    padding: 14px;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    text-decoration: none;
    transition: border-color 0.15s;
}
.blog-related-card:hover { border-color: var(--secondary); }
.blog-related-title {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-primary);
    line-height: 1.3;
    margin-bottom: 6px;
}
.blog-related-date { font-size: 0.75rem; color: var(--text-secondary); }

/* Linked Condos */
.blog-linked-condos {
    margin: 20px 0;
    padding: 14px;
    background: var(--bg);
    border-radius: var(--radius);
}
.blog-linked-condos h4 { margin: 0 0 8px; font-size: 14px; }
.blog-condo-link {
    display: inline-block;
    padding: 4px 10px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    font-size: 12px;
    color: var(--secondary);
    text-decoration: none;
    margin: 2px;
}
.blog-condo-link:hover { border-color: var(--secondary); }

/* IL-04/IL-15: Inline condo links in article content (district profiles, spotlights) */
.condo-inline-link {
    color: var(--secondary);
    text-decoration: none;
    font-weight: 600;
    border-bottom: 1px dotted var(--secondary);
    transition: border-color 0.2s;
}
.condo-inline-link:hover {
    text-decoration: none;
    border-bottom-style: solid;
}

/* IL-06: District profile link on property page */
.district-profile-link-wrapper {
    grid-column: 1 / -1;
    margin-top: 4px;
}
.district-profile-link {
    color: var(--secondary);
    text-decoration: none;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
.district-profile-link:hover { text-decoration: underline; }

/* IL-09/IL-11: Glossary term inline links */
.glossary-link {
    color: var(--secondary);
    text-decoration: none;
    border-bottom: 1px dotted var(--secondary);
    cursor: pointer;
}
.glossary-link:hover {
    border-bottom-style: solid;
}

/* IL-27: MRT Station Cross-Links */
.mrt-cross-links {
    margin: 32px 0 20px;
    padding: 24px;
    background: var(--bg-secondary, var(--bg-card));
    border: 1px solid var(--border);
    border-radius: var(--radius);
}
.mrt-cross-links > h3 {
    margin: 0 0 20px;
    font-size: 18px;
    color: var(--text-primary);
}
.mrt-cross-section, .mrt-cross-district {
    margin-bottom: 20px;
}
.mrt-cross-section:last-child, .mrt-cross-district:last-child {
    margin-bottom: 0;
}
.mrt-cross-section h4, .mrt-cross-district h4 {
    margin: 0 0 12px;
    font-size: 15px;
    color: var(--text-secondary);
    font-weight: 600;
}
.mrt-cross-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 10px;
}
.mrt-cross-card {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    color: var(--text-primary);
    text-decoration: none;
    font-size: 13px;
    font-weight: 500;
    transition: border-color 0.2s, box-shadow 0.2s;
}
.mrt-cross-card:hover,
.mrt-cross-card:focus-visible {
    border-color: var(--secondary);
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
    text-decoration: none;
    color: var(--secondary);
    outline: 2px solid var(--secondary);
    outline-offset: 2px;
}
.mrt-cross-icon {
    font-size: 18px;
    flex-shrink: 0;
}

.blog-detail-back {
    margin: 30px 0 10px;
    padding-top: 16px;
    border-top: 1px solid var(--border);
}
.blog-detail-back a {
    color: var(--secondary);
    text-decoration: none;
    font-size: 14px;
    font-weight: 600;
}
.blog-detail-back a:hover { text-decoration: underline; }

/* Blog admin toolbar */
.blog-admin-toolbar {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 16px;
    margin-bottom: 16px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}
.blog-admin-status {
    display: inline-block;
    padding: 3px 10px;
    border-radius: var(--radius);
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--text-inverse);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

@media (max-width: 768px) {
    .blog-grid { grid-template-columns: 1fr; }
    .blog-detail-title { font-size: 22px; }
    .blog-card-image { height: 140px; }
    .blog-related-grid { grid-template-columns: 1fr; }
    .mrt-cross-grid { grid-template-columns: 1fr 1fr; }
    .mrt-cross-links { padding: 16px; }
}
@media (max-width: 480px) {
    .mrt-cross-grid { grid-template-columns: 1fr; }
    .blog-grid { gap: 12px; }
    .blog-chip { padding: 5px 10px; font-size: 11px; }
    .blog-search-input { font-size: 16px; padding: 10px 12px; } /* 16px prevents iOS auto-zoom */
    .blog-card-body { padding: 12px; }
    .blog-detail-content { font-size: 14px; }
    .blog-toc { padding: 12px 14px; }
    .blog-detail-title { font-size: 20px; }
    .blog-pagination { gap: 4px; }
    .blog-page-btn { padding: 6px 10px; font-size: 12px; }
}

/* Blog dark mode overrides */
[data-theme="dark"] .blog-card:hover,
[data-theme="singapore"] .blog-card:hover {
    box-shadow: 0 6px 20px rgba(0,0,0,0.35);
}
[data-theme="dark"] .blog-detail-content blockquote,
[data-theme="singapore"] .blog-detail-content blockquote {
    background: var(--bg-card);
}
[data-theme="dark"] .blog-detail-content th,
[data-theme="singapore"] .blog-detail-content th {
    background: var(--surface);
}
[data-theme="dark"] .blog-card-image-placeholder,
[data-theme="singapore"] .blog-card-image-placeholder {
    opacity: 0.25;
}

/* ============================================
   Admin Section — Collapsible Cards Layout
   ============================================ */
.admin-section-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    margin-bottom: 12px;
    overflow: hidden;
}
/* Content Pipeline sub-tab nav */
.cp-sub-tabs {
    display: flex;
    gap: 0;
    border-bottom: 2px solid var(--border);
    margin-bottom: 20px;
    padding: 0 4px;
}
.cp-sub-tab {
    padding: 10px 20px;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--text-muted);
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    margin-bottom: -2px;
    cursor: pointer;
    transition: color 0.15s, border-color 0.15s;
}
.cp-sub-tab:hover {
    color: var(--text);
}
.cp-sub-tab.active {
    color: var(--primary);
    border-bottom-color: var(--primary);
}

.admin-section-header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 18px;
    cursor: pointer;
    transition: background 0.15s;
    user-select: none;
}
.admin-section-header:hover {
    background: rgba(0,0,0,0.02);
}
[data-theme="dark"] .admin-section-header:hover {
    background: rgba(255,255,255,0.03);
}
.admin-section-header svg:first-child {
    flex-shrink: 0;
    opacity: 0.7;
    color: var(--primary);
}
.admin-section-header h3 {
    flex: 1;
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--text);
    margin: 0;
}
.admin-section-header .admin-add-btn {
    font-size: 0.75rem;
    padding: 4px 10px;
    margin-right: 8px;
}
.admin-chevron {
    flex-shrink: 0;
    opacity: 0.5;
    transition: transform 0.25s ease;
}
.admin-section-header.expanded .admin-chevron {
    transform: rotate(180deg);
}
.admin-section-body {
    border-top: 1px solid var(--border);
    animation: fadeIn 0.2s ease;
}
.admin-error-log-content {
    padding: 18px;
    font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
    font-size: 12px;
    max-height: 400px;
    overflow-y: auto;
}
.admin-error-log-content .log-entry {
    padding: 6px 0;
    border-bottom: 1px solid var(--border-light);
    line-height: 1.5;
}
.admin-error-log-content .log-entry:last-child {
    border-bottom: none;
}
.admin-error-log-content .log-level-error { color: var(--danger); }
.admin-error-log-content .log-level-warn { color: var(--warning); }
.admin-error-log-content .log-level-info { color: var(--secondary); }
.admin-error-log-empty {
    text-align: center;
    padding: 40px 20px;
    color: var(--text-secondary);
    font-family: var(--font);
    font-size: 13px;
}
.admin-toggles-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 12px;
    padding: 18px;
}
.admin-toggle-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    background: var(--bg-secondary);
    border-radius: var(--radius);
    border: 1px solid var(--border);
}
.admin-toggle-card .toggle-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.admin-toggle-card .toggle-name {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary);
}
.admin-toggle-card .toggle-desc {
    font-size: 0.75rem;
    color: var(--text-secondary);
}
/* Toggle switch */
.toggle-switch {
    position: relative;
    display: inline-block;
    width: 44px;
    height: 24px;
    flex-shrink: 0;
    vertical-align: middle;
}
.toggle-switch input {
    opacity: 0;
    width: 0;
    height: 0;
    position: absolute;
}
.toggle-slider {
    position: absolute;
    cursor: pointer;
    top: 0; left: 0; right: 0; bottom: 0;
    background: var(--border);
    border-radius: 24px;
    transition: 0.2s;
}
.toggle-slider:before {
    content: "";
    position: absolute;
    height: 18px;
    width: 18px;
    left: 3px;
    bottom: 3px;
    background: var(--bg-card);
    border-radius: 50%;
    transition: 0.2s;
}
.toggle-switch input:checked + .toggle-slider {
    background: var(--status-success);
}
.toggle-switch input:checked + .toggle-slider:before {
    transform: translateX(20px);
}
/* ---- Admin Condos Table ---- */
.ac-stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
    gap: 8px;
    padding: 0 0 16px;
}
.ac-stat-card {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    transition: box-shadow 0.15s, border-color 0.15s;
}
.ac-stat-card[data-filter]:not([data-filter=""]):hover {
    border-color: var(--secondary);
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}
.ac-stat-icon { flex-shrink: 0; display: flex; }
.ac-stat-body { display: flex; flex-direction: column; }
.ac-stat-val { font-size: 1.15rem; font-weight: 700; line-height: 1.2; }
.ac-stat-label { font-size: 0.7rem; color: var(--text-secondary); }

.ac-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    margin-bottom: 12px;
}
.ac-toolbar .condo-search-wrapper { flex: 1; min-width: 200px; margin-bottom: 0; }
.ac-filter-row { display: flex; gap: 8px; flex-wrap: wrap; }
.ac-filter-select {
    padding: 7px 10px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--bg-card);
    color: var(--text);
    font-size: 0.8rem;
    cursor: pointer;
}
.ac-filter-select:focus { border-color: var(--secondary); outline: none; }

.ac-table-wrap { overflow-x: auto; border: 1px solid var(--border); border-radius: var(--radius); }
.ac-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.78rem;
    white-space: nowrap;
}
.ac-table th {
    position: sticky;
    top: 0;
    background: var(--bg-secondary);
    padding: 8px 8px;
    text-align: left;
    font-weight: 600;
    font-size: 0.72rem;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.03em;
    border-bottom: 2px solid var(--border);
    user-select: none;
}
.ac-th-sort { cursor: pointer; }
.ac-th-sort:hover { color: var(--secondary); }
.ac-table td {
    padding: 7px 8px;
    border-bottom: 1px solid var(--border);
    color: var(--text);
    vertical-align: middle;
}
.ac-table tbody tr:hover { background: rgba(46,134,171,0.04); }
.ac-td-center { text-align: center; }
.ac-td-name { min-width: 180px; white-space: normal; }
.ac-name-text { display: block; font-weight: 600; color: var(--text); line-height: 1.3; }
.ac-street-text { display: block; font-size: 0.7rem; color: var(--text-secondary); }
.ac-missing { color: var(--text-secondary); opacity: 0.5; }
.ac-missing-inline { color: var(--status-danger); opacity: 0.7; font-size: 0.7rem; }
.ac-warn { color: var(--status-warning); font-size: 0.8rem; }
.ac-cell-bad { background: rgba(239,68,68,0.06); }
.ac-issue-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--status-warning);
    color: var(--text-inverse);
    font-size: 0.68rem;
    font-weight: 700;
    cursor: help;
}
.ac-ok-badge { color: var(--status-success); font-weight: 700; font-size: 0.85rem; }
.ac-cross { color: var(--status-danger); font-weight: 700; font-size: 0.85rem; opacity: 0.7; }
.ac-row-warn td:first-child { box-shadow: inset 3px 0 0 var(--status-warning); }
.ac-row-critical td:first-child { box-shadow: inset 3px 0 0 var(--status-danger); }
.ac-row-inactive { opacity: 0.5; }
.ac-row-inactive td:first-child { box-shadow: inset 3px 0 0 #9ca3af; }
.ac-edit-btn {
    background: none;
    border: 1px solid var(--border);
    border-radius: 4px;
    color: var(--text-secondary);
    cursor: pointer;
    font-size: 0.85rem;
    padding: 2px 6px;
    transition: color 0.15s, border-color 0.15s;
}
.ac-edit-btn:hover { color: var(--secondary); border-color: var(--secondary); }
.ac-search-btn {
    background: none; border: 1px solid var(--border); border-radius: 4px;
    color: var(--text-secondary); cursor: pointer; font-size: 0.8rem; padding: 2px 5px;
    transition: color 0.15s, border-color 0.15s; margin-right: 3px;
}
.ac-search-btn:hover { color: var(--status-warning); border-color: var(--status-warning); }
.ac-td-actions { white-space: nowrap; }
.ac-export-card:hover { background: var(--bg-card); border-color: var(--secondary) !important; }
.toggle-switch.toggle-sm { width: 34px; height: 18px; padding: 13px 0; box-sizing: content-box; }
.toggle-switch.toggle-sm .toggle-slider:before { height: 14px; width: 14px; left: 2px; bottom: 2px; }
.toggle-switch.toggle-sm input:checked + .toggle-slider:before { transform: translateX(16px); }

/* Admin news list */
.admin-news-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 18px;
    border-bottom: 1px solid var(--border);
}
.admin-news-item:last-child { border-bottom: none; }
.admin-news-item .news-item-info {
    flex: 1;
}
.admin-news-item .news-item-title {
    font-weight: 600;
    font-size: 14px;
    color: var(--text-primary);
}
.admin-news-item .news-item-meta {
    font-size: 0.75rem;
    color: var(--text-secondary);
}
.admin-news-item .news-item-actions {
    display: flex;
    gap: 6px;
}
.admin-news-item .news-item-actions button {
    padding: 4px 10px;
    font-size: 0.75rem;
    border: 1px solid var(--border);
    border-radius: 4px;
    background: var(--bg-card);
    color: var(--text-primary);
    cursor: pointer;
}
.admin-news-item .news-item-actions button.delete-btn {
    color: var(--text-secondary);
    border-color: var(--border);
    opacity: 0.4;
    pointer-events: none;
    transition: opacity 0.2s, color 0.2s, border-color 0.2s, background 0.2s;
}
.admin-news-item .news-item-actions button.delete-btn.armed {
    color: var(--text-inverse);
    background: var(--status-danger);
    border-color: var(--status-danger);
    opacity: 1;
    pointer-events: auto;
}
/* Delete arm toggle switch */
.delete-arm-switch {
    position: relative;
    display: inline-block;
    width: 28px;
    height: 16px;
    flex-shrink: 0;
    cursor: pointer;
    align-self: center;
}
.delete-arm-switch input {
    opacity: 0;
    width: 0;
    height: 0;
    position: absolute;
}
.delete-arm-slider {
    position: absolute;
    inset: 0;
    background: var(--border);
    border-radius: var(--radius-lg);
    transition: background 0.2s;
}
.delete-arm-slider::before {
    content: '';
    position: absolute;
    width: 12px;
    height: 12px;
    left: 2px;
    top: 2px;
    background: var(--bg-card);
    border-radius: 50%;
    transition: transform 0.2s;
}
.delete-arm-switch input:checked + .delete-arm-slider {
    background: var(--status-danger);
}
.delete-arm-switch input:checked + .delete-arm-slider::before {
    transform: translateX(12px);
}
/* Side-by-side comparison result cards */
.sbs-result-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 16px;
    text-align: center;
}
.sbs-result-card h4 {
    font-size: 14px;
    font-weight: 700;
    margin: 0 0 10px;
    color: var(--text-primary);
}
.sbs-result-card .sbs-metric {
    display: flex;
    justify-content: space-between;
    padding: 4px 0;
    font-size: 12px;
    border-bottom: 1px solid var(--border);
}
.sbs-result-card .sbs-metric:last-child { border-bottom: none; }
.sbs-result-card .sbs-metric-label { color: var(--text-secondary); }
.sbs-result-card .sbs-metric-value { font-weight: 600; color: var(--text-primary); }
.sbs-best { border-color: var(--status-success); border-width: 2px; }

/* News carousel pagination dots (used by app-overview-charts.js news section) */
.news-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--border);
    cursor: pointer;
    transition: background 0.2s, transform 0.2s;
}
.news-dot.active {
    background: var(--secondary);
    transform: scale(1.3);
}

/* News card image / body styles (used by .related-news-card via app-overview-charts.js) */
.home-news-card-image {
    width: 100%;
    height: 140px;
    object-fit: cover;
    display: block;
    background: linear-gradient(135deg, var(--primary) 0%, #2E86AB 100%);
    transition: transform 0.35s ease;
}
.home-news-card-image.placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(255,255,255,0.7);
}
.home-news-card-body {
    padding: 14px 16px;
}
.home-news-card-body .news-category-badge {
    margin-bottom: 6px;
    display: inline-block;
}
.home-news-card-body h4 {
    font-size: 0.92rem;
    font-weight: 600;
    color: var(--text);
    margin: 0 0 6px;
    line-height: 1.3;
}
.home-news-card-body p {
    font-size: 0.78rem;
    color: var(--text-secondary);
    line-height: 1.4;
    margin: 0 0 6px;
}
.home-news-card-body .news-date {
    font-size: 0.75rem;
}

/* Related News compact grid (property detail Overview panel) */
.related-news-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    padding: 4px 0;
}
.related-news-card {
    display: grid;
    grid-template-columns: 96px 1fr;
    gap: 12px;
    align-items: stretch;
    background: var(--bg-card);
    border: 1px solid var(--border-light);
    border-radius: var(--radius);
    overflow: hidden;
    box-shadow: var(--shadow);
    text-decoration: none;
    color: inherit;
    transition: box-shadow 0.2s, transform 0.2s;
}
.related-news-card:hover {
    box-shadow: var(--shadow-md);
    transform: translateY(-2px);
}
.related-news-card .home-news-card-image {
    width: 96px;
    height: 100%;
    min-height: 96px;
    aspect-ratio: auto;
}
.related-news-card .home-news-card-body {
    padding: 10px 12px 10px 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}
.related-news-card .home-news-card-body h4 {
    font-size: 0.88rem;
    line-height: 1.3;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.related-news-card .home-news-card-body p {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
@media (max-width: 768px) {
    .related-news-grid { grid-template-columns: 1fr; }
}
@media (max-width: 480px) {
    .related-news-card { grid-template-columns: 80px 1fr; }
    .related-news-card .home-news-card-image { width: 80px; min-height: 80px; }
}

/* Admin news form image field */
.admin-news-image-preview {
    width: 100%;
    max-width: 300px;
    border-radius: var(--radius-sm);
    margin-top: 6px;
}

@media (max-width: 768px) {
    .admin-toggles-grid {
        grid-template-columns: 1fr;
    }
    .news-carousel > .news-card {
        flex: 0 0 85%;
    }
    .admin-section-header {
        padding: 12px 14px;
    }
    .admin-section-header h3 {
        font-size: 0.85rem;
    }
}

/* ============================================
   Admin Auth Buttons (Header)
   — .header-feedback-btn defined in section below (~line 6479)
   ============================================ */

/* UF-12: Share Button */
.share-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--bg-card);
    color: var(--text-secondary);
    cursor: pointer;
    padding: 0;
    transition: color 0.2s, background-color 0.2s, border-color 0.2s;
}
.share-btn:hover {
    background: var(--primary);
    color: var(--text-inverse);
    border-color: var(--primary);
}
/* ── Unified Header Auth Button + Dropdown ── */
.header-auth-wrap {
    position: relative;
}
.header-auth-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 5px 8px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--bg-card);
    color: var(--text-secondary);
    cursor: pointer;
    transition: color 0.2s, background-color 0.2s, border-color 0.2s;
}
.header-auth-btn:hover {
    background: var(--primary);
    color: var(--text-inverse);
    border-color: var(--primary);
}
.header-auth-btn.logged-in {
    color: var(--primary);
    border-color: var(--primary-light, rgba(46,134,171,0.4));
}
.header-auth-dropdown {
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    min-width: 200px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-lg, 0 4px 12px rgba(0,0,0,0.15));
    z-index: var(--z-dropdown, 1000);
    padding: 4px 0;
}
.auth-dropdown-section {
    padding: 8px 0;
}
.auth-dropdown-section + .auth-dropdown-section {
    border-top: 1px solid var(--border);
}
.auth-dropdown-name {
    padding: 4px 14px 0;
    font-weight: 600;
    font-size: 0.85rem;
    color: var(--text-primary);
}
.auth-dropdown-email {
    padding: 0 14px 6px;
    font-size: 0.75rem;
    color: var(--text-muted);
}
.auth-dropdown-label {
    padding: 4px 14px 6px;
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-muted);
    font-weight: 600;
}
.auth-dropdown-item {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 8px 14px;
    border: none;
    background: none;
    color: var(--text-primary);
    font-size: 0.82rem;
    font-family: var(--font);
    cursor: pointer;
    text-align: left;
    transition: background 0.15s;
}
.auth-dropdown-item:hover {
    background: var(--bg-hover, rgba(0,0,0,0.05));
}
.auth-dropdown-footer {
    border-top: 1px solid var(--border);
    padding: 6px 14px;
    text-align: center;
}
.auth-dropdown-link {
    border: none;
    background: none;
    color: var(--text-muted);
    font-size: 0.72rem;
    font-family: var(--font);
    cursor: pointer;
    opacity: 0.7;
    transition: opacity 0.15s;
}
.auth-dropdown-link:hover {
    opacity: 1;
    color: var(--primary);
}

/* ============================================
   UF-70: District Landing Pages
   ============================================ */
.district-segment-heading {
    font-size: 1.1rem;
    margin: 24px 0 12px;
    color: var(--text-secondary);
    border-bottom: 1px solid var(--border);
    padding-bottom: 6px;
}
.district-card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 12px;
    margin-bottom: 20px;
}
.district-card {
    padding: 14px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    cursor: pointer;
    transition: border-color 0.2s, box-shadow 0.2s;
}
.district-card:hover {
    border-color: var(--primary);
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}
.district-card-num {
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--primary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 4px;
}
.district-card-name {
    font-weight: 600;
    font-size: 0.9rem;
    margin-bottom: 8px;
    color: var(--text-primary);
}
.district-card-stats {
    display: flex;
    gap: 12px;
    font-size: 0.75rem;
    color: var(--text-secondary);
}

/* Neighbourhood hub — district-grouped condo chips */
.nbh-district-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 16px;
    margin-bottom: 24px;
}
.nbh-district-card {
    padding: 14px 16px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
}
.nbh-district-header {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-bottom: 12px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--border);
}
.nbh-district-num {
    flex-shrink: 0;
    display: inline-block;
    min-width: 38px;
    padding: 4px 8px;
    background: rgba(46,134,171,0.12);
    color: var(--secondary);
    border-radius: var(--radius-sm);
    font-size: 0.85rem;
    font-weight: 700;
    text-align: center;
    letter-spacing: 0.03em;
}
.nbh-district-heading { flex: 1; min-width: 0; }
.nbh-district-name {
    font-weight: 600;
    font-size: 0.9rem;
    color: var(--text-primary);
    line-height: 1.3;
    margin-bottom: 2px;
}
.nbh-district-count {
    font-size: 0.72rem;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.nbh-chip-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}
.nbh-chip {
    display: inline-block;
    padding: 4px 10px;
    background: transparent;
    border: 1px solid var(--border);
    border-radius: 14px;
    color: var(--text-primary);
    font-size: 0.78rem;
    line-height: 1.3;
    text-decoration: none;
    transition: border-color 0.15s, color 0.15s, background-color 0.15s;
}
.nbh-chip:hover,
.nbh-chip:focus-visible {
    border-color: var(--primary);
    color: var(--primary);
    background: rgba(255,107,107,0.06);
}
@media (hover: none) {
    .nbh-chip:hover { border-color: var(--border); color: var(--text-primary); background: transparent; }
}

/* Neighbourhood detail page — SSR walkability, MRT, schools, nearby condos */
.nbh-detail-header { margin-bottom: 16px; }
.nbh-detail-addr { color: var(--text-secondary); font-size: 0.9rem; margin: 2px 0 4px; }
.nbh-detail-meta { color: var(--text-secondary); font-size: 0.85rem; margin: 0; }
.nbh-detail-meta a { color: var(--secondary); }
.nbh-detail-summary {
    color: var(--text-secondary);
    font-size: 0.95rem;
    line-height: 1.55;
    margin: 4px 0 20px;
    max-width: 780px;
}
.nbh-score-card {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 16px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    margin-bottom: 20px;
}
.nbh-score-num {
    font-size: 2.2rem;
    font-weight: 700;
    min-width: 64px;
    text-align: center;
    color: var(--text-primary);
}
.nbh-score-good { color: var(--success); }
.nbh-score-mid  { color: var(--warning); }
.nbh-score-low  { color: var(--danger); }
.nbh-score-title { font-weight: 600; font-size: 1rem; }
.nbh-score-desc  { font-size: 0.8rem; color: var(--text-secondary); margin-top: 2px; }

.nbh-cat-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 10px;
    margin-bottom: 24px;
}
.nbh-cat-card {
    padding: 12px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
}
.nbh-cat-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 6px;
}
.nbh-cat-label { font-weight: 600; font-size: 0.85rem; color: var(--text-primary); }
.nbh-cat-score { font-size: 0.75rem; color: var(--text-muted); }
.nbh-cat-bar-track {
    height: 6px;
    background: var(--border);
    border-radius: 3px;
    overflow: hidden;
    margin-bottom: 4px;
}
.nbh-cat-bar { height: 100%; border-radius: 3px; }
.nbh-cat-bar-good { background: var(--success); }
.nbh-cat-bar-mid  { background: var(--warning); }
.nbh-cat-bar-low  { background: var(--danger); }
.nbh-cat-nearest { font-size: 0.75rem; color: var(--text-secondary); }

.nbh-section-title {
    margin-top: 24px;
    margin-bottom: 10px;
    font-size: 1.05rem;
}
.nbh-mrt-codes {
    display: inline-block;
    margin-left: 6px;
    font-size: 0.72rem;
    color: var(--text-muted);
}

.district-hero {
    margin-bottom: 20px;
}
.district-hero-badge {
    display: inline-block;
    padding: 2px 10px;
    border-radius: 12px;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    background: var(--primary);
    color: var(--text-inverse);
    margin-bottom: 8px;
}
.district-hero-title {
    font-size: 1.6rem;
    margin: 0 0 4px;
}
.district-hero-name {
    font-size: 1rem;
    color: var(--text-secondary);
    margin: 0 0 2px;
}
.district-hero-segment {
    font-size: 0.82rem;
    color: var(--text-muted);
    margin: 0;
}
.district-kpi-row {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
    gap: 10px;
    margin-bottom: 20px;
}
.district-kpi {
    padding: 12px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    text-align: center;
}
.district-kpi-val {
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--primary);
    max-width: 200px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.district-kpi-label {
    font-size: 0.7rem;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.03em;
    margin-top: 2px;
}
.district-tabs {
    display: flex;
    gap: 0;
    border-bottom: 2px solid var(--border);
    margin-bottom: 16px;
    overflow-x: auto;
}
.district-tab {
    padding: 8px 16px;
    border: none;
    background: none;
    font-family: var(--font);
    font-size: 0.85rem;
    color: var(--text-secondary);
    cursor: pointer;
    border-bottom: 2px solid transparent;
    margin-bottom: -2px;
    white-space: nowrap;
    transition: color 0.15s, border-color 0.15s;
}
.district-tab:hover { color: var(--text-primary); }
.district-tab.active {
    color: var(--primary);
    border-bottom-color: var(--primary);
    font-weight: 600;
}
/* ============================================
   TAC Results Breakdown
   ============================================ */
.tac-results-breakdown {
    padding: 14px 18px;
}
.tac-section {
    margin-bottom: 14px;
}
.tac-section .calc-results {
    margin-top: 6px;
}
.calc-section-label {
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding-bottom: 4px;
    border-bottom: 1px solid var(--border);
}
.tac-grand-total {
    padding-top: 14px;
    border-top: 2px solid var(--border);
    margin-top: 18px;
}

/* ============================================
   Login Modal
   ============================================ */
.login-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0,0,0,0.5);
    z-index: var(--z-modal-overlay);
    display: flex;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(4px);
   }
.login-modal {
    background: rgba(var(--bg-card-rgb), 0.85);
    backdrop-filter: blur(16px);
       border: 1px solid rgba(255,255,255,0.08);
    border-radius: var(--radius);
    padding: 2rem;
    width: 90%;
    max-width: 380px;
    box-shadow: 0 16px 48px rgba(0,0,0,0.25);
    animation: loginModalIn 0.2s ease-out;
}
@keyframes loginModalIn {
    from { opacity: 0; transform: translateY(-20px) scale(0.95); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}
.login-modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.5rem;
}
.login-modal-header h3 {
    margin: 0;
    font-size: 1.1rem;
    color: var(--text);
}
.login-modal-close {
    background: none;
    border: none;
    font-size: 1.5rem;
    color: var(--text-secondary);
    cursor: pointer;
    padding: 0 4px;
    line-height: 1;
}
.login-modal-close:hover {
    color: var(--text);
}
.login-field {
    margin-bottom: 1rem;
}
.login-field label {
    display: block;
    font-size: 0.8rem;
    font-weight: 500;
    color: var(--text-secondary);
    margin-bottom: 4px;
}
.login-field input {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--bg-card);
    color: var(--text);
    font-size: 0.9rem;
    font-family: var(--font);
    transition: border-color 0.2s;
    box-sizing: border-box;
}
.login-field input:focus {
    outline: none;
    border-color: var(--secondary);
    box-shadow: var(--focus-ring-light);
}
.login-error {
    background: rgba(220,53,69,0.1);
    color: var(--danger);
    font-size: 0.8rem;
    padding: 8px 12px;
    border-radius: var(--radius-sm);
    margin-bottom: 1rem;
}
.login-submit-btn {
    width: 100%;
    padding: 10px;
    background: var(--primary);
    color: var(--text-inverse);
    border: none;
    border-radius: var(--radius-sm);
    font-size: 0.9rem;
    font-weight: 600;
    font-family: var(--font);
    cursor: pointer;
    transition: background 0.2s;
}
.login-submit-btn:hover {
    background: var(--primary-light);
}
.login-submit-btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

/* ============================================
   Lead Capture Banner & Modal
   ============================================ */
.lead-capture-banner {
    margin-top: 16px;
    border: 1px solid var(--border);
    border-left: 3px solid var(--secondary);
    border-radius: var(--radius);
    background: var(--bg-card);
    padding: 16px 20px;
    box-shadow: var(--shadow);
    opacity: 0;
    transform: translateY(10px);
    transition: opacity 0.35s ease, transform 0.35s ease;
}
.lead-capture-banner.visible {
    opacity: 1;
    transform: translateY(0);
}
.lead-banner-teaser {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}
.lead-banner-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.lead-banner-text strong {
    font-size: 0.92rem;
    color: var(--text);
}
.lead-banner-text span {
    font-size: 0.78rem;
    color: var(--text-secondary);
}
.lead-banner-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}
.lead-banner-close {
    background: none;
    border: none;
    font-size: 1.3rem;
    color: var(--text-secondary);
    cursor: pointer;
    padding: 4px;
    line-height: 1;
}
.lead-banner-close:hover { color: var(--text); }

/* Centered form popup (all lead sources) */
.lead-popup-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.5);
    backdrop-filter: blur(4px);
       z-index: var(--z-modal-overlay);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    opacity: 0;
    transition: opacity 0.3s ease;
}
.lead-popup-overlay.visible {
    opacity: 1;
}
.lead-popup-overlay.visible .lead-popup-card {
    transform: scale(1) translateY(0);
    opacity: 1;
}
.lead-popup-card {
    position: relative;
    width: 420px;
    max-width: 100%;
    max-height: calc(100vh - 48px);
    overflow-y: auto;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 32px 28px 24px;
    box-shadow: 0 24px 48px rgba(0,0,0,0.25), 0 8px 16px rgba(0,0,0,0.15);
    transform: scale(0.92) translateY(20px);
    opacity: 0;
    transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.3s ease;
}
.lead-popup-close {
    position: absolute;
    top: 12px;
    right: 14px;
    background: none;
    border: none;
    font-size: 1.5rem;
    color: var(--text-secondary);
    cursor: pointer;
    padding: 4px 8px;
    line-height: 1;
    border-radius: var(--radius);
    transition: background 0.2s, color 0.2s;
}
.lead-popup-close:hover {
    background: var(--bg-hover, rgba(255,255,255,0.05));
    color: var(--text);
}
.lead-popup-header {
    text-align: center;
    margin-bottom: 20px;
}
.lead-popup-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    border-radius: var(--radius-lg);
    background: var(--secondary);
    color: var(--text-inverse);
    margin-bottom: 14px;
}
.lead-popup-title {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--text);
    margin: 0 0 6px;
    line-height: 1.3;
}
.lead-popup-subtitle {
    font-size: 0.82rem;
    color: var(--text-secondary);
    margin: 0;
    line-height: 1.45;
}

/* Shared lead form styling */
.lead-capture-form .form-input-themed {
    font-size: 0.85rem;
    padding: 8px 10px;
}
.lead-capture-form textarea.form-input-themed {
    resize: vertical;
    min-height: 50px;
}

/* Sticky bottom bar (articles & condo detail pages) */
.lead-capture-sticky {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: var(--bg-card);
    border-top: 1px solid var(--border);
    box-shadow: 0 -4px 16px rgba(0,0,0,0.1);
    z-index: var(--z-lead-sticky);
    padding: 12px 24px;
    opacity: 0;
    transform: translateY(100%);
    transition: opacity 0.35s ease, transform 0.35s ease;
}
.lead-capture-sticky.visible {
    opacity: 1;
    transform: translateY(0);
}
.lead-sticky-teaser {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}
.lead-sticky-text {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.lead-sticky-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}
/* ============================================
   Property Advisor Wizard
   ============================================ */
.advisor-wizard, .advisor-wizard-inner { max-width: 720px; margin: 0 auto; padding: 24px 0; }
.advisor-progress { display: flex; align-items: center; justify-content: center; gap: 0; margin-bottom: 32px; }
.advisor-progress-step { display: flex; flex-direction: column; align-items: center; gap: 4px; position: relative; z-index: var(--z-base); }
.advisor-progress-step .step-num { width: 32px; height: 32px; border-radius: 50%; background: var(--border); color: var(--text-secondary); display: flex; align-items: center; justify-content: center; font-weight: 600; font-size: 0.85rem; transition: color 0.3s, background-color 0.3s; }
.advisor-progress-step.active .step-num { background: var(--accent); color: var(--text-inverse); }
.advisor-progress-step.completed .step-num { background: var(--success); color: var(--text-inverse); }
.advisor-progress-step .step-label { font-size: 0.7rem; color: var(--text-secondary); white-space: nowrap; }
.advisor-progress-step.active .step-label { color: var(--accent); font-weight: 600; }
.advisor-progress-line { flex: 1; height: 2px; background: var(--border); min-width: 24px; max-width: 60px; margin: 0 4px 18px; }

.advisor-step { display: none; animation: fadeIn 0.3s ease; }
.advisor-step.active { display: block; }
.advisor-step h2 { font-size: 1.5rem; font-weight: 700; margin-bottom: 4px; }
.advisor-subtitle { color: var(--text-secondary); margin-bottom: 24px; font-size: 0.95rem; }

.advisor-field-group { margin-bottom: 20px; }
.advisor-label { display: block; font-weight: 600; font-size: 0.9rem; margin-bottom: 8px; }
.advisor-optional { font-weight: 400; color: var(--text-secondary); font-size: 0.8rem; }
.advisor-hint { font-size: 0.75rem; color: var(--text-secondary); }

.advisor-btn-group { display: flex; flex-wrap: wrap; gap: 8px; }
.advisor-btn { padding: 10px 18px; border: 2px solid var(--border); border-radius: var(--radius); background: var(--surface); color: var(--text); cursor: pointer; font-size: 0.9rem; font-weight: 500; transition: color 0.2s, border-color 0.2s, background-color 0.2s; }
.advisor-btn:hover { border-color: var(--accent); color: var(--accent); }
.advisor-btn.active { border-color: var(--accent); background: rgba(46,134,171,0.15); color: var(--accent); font-weight: 600; box-shadow: inset 0 0 0 1px var(--accent); }
.advisor-btn-primary { background: var(--accent); color: var(--text-inverse); border-color: var(--accent); }
.advisor-btn-primary:hover { background: var(--accent-hover, #257a9e); border-color: var(--accent-hover, #257a9e); color: var(--text-inverse); }
.advisor-nav-row { display: flex; gap: 0.5rem; margin-top: 1.5rem; }

.advisor-check-group { display: flex; flex-wrap: wrap; gap: 10px; }
.advisor-check { display: flex; align-items: center; gap: 6px; padding: 8px 14px; border: 1px solid var(--border); border-radius: var(--radius-sm); cursor: pointer; font-size: 0.9rem; transition: border-color 0.2s, background-color 0.2s; }
.advisor-check:has(input:checked) { border-color: var(--accent); background: rgba(46,134,171,0.06); }

.advisor-field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.advisor-range-row { display: grid; grid-template-columns: 1fr auto 1fr; gap: 10px; align-items: end; margin-bottom: 10px; }
.advisor-range-sep { padding-bottom: 8px; color: var(--text-secondary); }
.advisor-input-wrap label { display: block; font-size: 0.8rem; color: var(--text-secondary); margin-bottom: 4px; }
.advisor-input-wrap input, .advisor-field-group > input, .advisor-field-row input { width: 100%; padding: 10px 12px; border: 1px solid var(--border); border-radius: var(--radius-sm); font-size: 0.95rem; background: var(--surface); color: var(--text); }

.advisor-presets { display: flex; flex-wrap: wrap; gap: 6px; }
.advisor-preset-btn { padding: 6px 14px; border: 1px solid var(--border); border-radius: 20px; background: var(--bg); font-size: 0.8rem; cursor: pointer; color: var(--text-secondary); transition: color 0.2s, border-color 0.2s, background-color 0.2s; }
.advisor-preset-btn:hover, .advisor-preset-btn.active { border-color: var(--accent); color: var(--accent); background: rgba(46,134,171,0.06); }

.advisor-slider-wrap { display: flex; align-items: center; gap: 12px; }
.advisor-slider-wrap input[type="range"] { flex: 1; accent-color: var(--accent); }
.advisor-slider-value { font-weight: 700; font-size: 1.1rem; color: var(--accent); min-width: 50px; text-align: right; }

.advisor-absd-badge { display: flex; align-items: center; gap: 10px; padding: 12px 16px; border-radius: var(--radius); background: rgba(46,134,171,0.06); border: 1px solid rgba(46,134,171,0.2); margin-top: 8px; }
.absd-icon { font-size: 1.3rem; }
.absd-text { font-size: 0.95rem; }
.absd-detail { font-size: 0.8rem; color: var(--text-secondary); }

.advisor-computed-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 16px; margin-top: 12px; }
.advisor-computed-row { display: flex; justify-content: space-between; padding: 8px 0; border-bottom: 1px solid var(--border); }
.advisor-computed-row:last-child { border-bottom: none; }

.advisor-district-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(80px, 1fr)); gap: 6px; max-height: 200px; overflow-y: auto; padding: 4px; }
.advisor-district-grid label { display: flex; align-items: center; gap: 4px; font-size: 0.8rem; padding: 4px 8px; border: 1px solid var(--border); border-radius: 4px; cursor: pointer; }
.advisor-district-grid label:has(input:checked) { border-color: var(--accent); background: rgba(46,134,171,0.06); }

.advisor-summary-preview { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 16px; margin-top: 16px; }
.advisor-summary-preview h3 { font-size: 1rem; margin-bottom: 8px; }

.advisor-nav { display: flex; justify-content: space-between; align-items: center; margin-top: 32px; padding-top: 20px; border-top: 1px solid var(--border); }
.advisor-nav-btn { padding: 12px 24px; border-radius: var(--radius); font-size: 0.95rem; font-weight: 600; cursor: pointer; transition: opacity 0.2s, background-color 0.2s; border: none; }
.advisor-prev { background: var(--surface); color: var(--text); border: 1px solid var(--border); }
.advisor-next, .advisor-submit { background: var(--accent); color: var(--text-inverse); }
.advisor-next:hover, .advisor-submit:hover { opacity: 0.9; }

/* Results Section */
.advisor-results { max-width: 960px; margin: 0 auto; padding: 24px 0; }
.advisor-results-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 24px; }
.advisor-results-header h2 { font-size: 1.5rem; font-weight: 700; }
.advisor-section { margin-bottom: 32px; }
.advisor-section h3 { font-size: 1.15rem; font-weight: 600; margin-bottom: 16px; display: flex; align-items: center; gap: 8px; }
.advisor-match-count { font-size: 0.85rem; font-weight: 400; color: var(--text-secondary); background: var(--bg); padding: 2px 10px; border-radius: var(--radius); }

.advisor-profile-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; }
.advisor-profile-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 16px; }
.advisor-profile-card .label { font-size: 0.8rem; color: var(--text-secondary); margin-bottom: 4px; }
.advisor-profile-card .value { font-size: 1.2rem; font-weight: 700; color: var(--accent); }

.advisor-match-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 12px; }
.advisor-match-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 16px; cursor: pointer; transition: border-color 0.2s, box-shadow 0.2s; text-decoration: none; color: inherit; display: block; }
.advisor-match-card:hover { border-color: var(--accent); box-shadow: 0 2px 12px rgba(46,134,171,0.12); }
.advisor-match-card h4 { font-size: 0.95rem; margin-bottom: 4px; }
.match-card-header { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.match-card-header h4 { flex: 1; min-width: 0; }
.match-pct-badge { display: inline-flex; align-items: center; justify-content: center; min-width: 40px; height: 24px; border-radius: var(--radius); font-size: 0.75rem; font-weight: 700; color: var(--text-inverse); padding: 0 8px; cursor: help; }

.advisor-numbers-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; }
.advisor-number-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 16px; text-align: center; }

.advisor-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.advisor-action-btn { display: flex; align-items: center; gap: 8px; padding: 12px 20px; border: 2px solid var(--accent); border-radius: var(--radius); background: var(--surface); color: var(--accent); font-weight: 600; font-size: 0.9rem; cursor: pointer; transition: color 0.2s, background-color 0.2s; }
.advisor-action-btn:hover { background: var(--accent); color: var(--text-inverse); }

.advisor-view-all { display: block; margin: 12px auto 0; }

/* Market Velocity Advisor */
.mv-kpi-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; margin: 16px 0; }
.mv-kpi-grid .advisor-profile-card { padding: 20px; }
.mv-kpi-grid .advisor-profile-card-label { font-size: 0.8rem; color: var(--text-secondary); text-transform: uppercase; letter-spacing: 0.03em; margin-bottom: 6px; }
.mv-kpi-grid .advisor-profile-card-value { font-size: 1.6rem; font-weight: 700; margin-bottom: 6px; }
.mv-kpi-grid .advisor-profile-card-sub { font-size: 0.82rem; color: var(--text-secondary); }
@media (max-width: 600px) { .mv-kpi-grid { grid-template-columns: 1fr; } }
.mv-segment-table { width: 100%; border-collapse: collapse; margin: 16px 0; }
.mv-segment-table th, .mv-segment-table td { padding: 8px 12px; text-align: right; border-bottom: 1px solid var(--border); }
.mv-segment-table th:first-child, .mv-segment-table td:first-child { text-align: left; }
.mv-segment-table th { color: var(--text-secondary); font-size: 0.8rem; text-transform: uppercase; }
.mv-velocity-badge { display: inline-block; padding: 2px 8px; border-radius: 4px; font-size: 0.75rem; font-weight: 600; }
.mv-velocity-badge.up { background: rgba(76,175,80,0.15); color: var(--success); }
.mv-velocity-badge.down { background: rgba(244,67,54,0.15); color: var(--danger); }
.mv-velocity-badge.flat { background: rgba(128,128,128,0.15); color: var(--text-secondary); }
.mv-chart { min-height: 300px; margin: 16px 0; }
.mv-district-grid { display: flex; flex-direction: column; gap: 12px; padding: 4px; }
.mv-district-seg { }
.mv-district-seg-label { font-size: 0.75rem; font-weight: 700; text-transform: uppercase; color: var(--text-secondary); letter-spacing: 0.05em; margin-bottom: 6px; padding-left: 2px; }
.mv-district-seg .mv-district-item { display: inline-flex; align-items: center; gap: 6px; font-size: 0.82rem; padding: 5px 10px; margin: 2px 4px 2px 0; border: 1px solid var(--border); border-radius: 6px; cursor: pointer; transition: border-color 0.15s, background 0.15s; }
.mv-district-seg .mv-district-item:hover { border-color: var(--accent); }
.mv-district-seg .mv-district-item:has(input:checked) { border-color: var(--accent); background: rgba(46,134,171,0.08); }
.mv-district-seg .mv-district-item input { margin: 0; }
.mv-district-num { font-weight: 600; white-space: nowrap; }
.mv-district-name { color: var(--text-secondary); font-size: 0.78rem; white-space: nowrap; }
@media (max-width: 600px) { .mv-district-seg .mv-district-item { font-size: 0.75rem; padding: 4px 7px; } .mv-district-name { display: none; } }
.advisor-section { margin: 24px 0; }
.advisor-section h3 { margin: 0 0 12px; font-size: 1.1rem; }
.advisor-match-card-header { font-size: 0.95rem; font-weight: 600; margin-bottom: 4px; }
.advisor-match-card-meta { font-size: 0.8rem; color: var(--text-secondary); margin-bottom: 8px; }
.advisor-match-card-stats { display: flex; gap: 12px; flex-wrap: wrap; font-size: 0.85rem; }
.advisor-match-card-stats span { white-space: nowrap; }

/* ============================================
   Admin: Panel Layout (shared by Reports, News, etc.)
   ============================================ */
.admin-header {
    display: flex; align-items: center; justify-content: space-between;
    margin-bottom: 16px; gap: 12px; flex-wrap: wrap;
}
.admin-header h2 { font-size: 1.1rem; font-weight: 700; margin: 0; }
.admin-list { margin-top: 16px; }

/* Report listing table in admin */
.report-table { width: 100%; border-collapse: collapse; display: block; overflow-x: auto; }
.report-table th, .report-table td { padding: 10px 12px; text-align: left; border-bottom: 1px solid var(--border); font-size: 0.9rem; }
.report-table th { font-weight: 600; font-size: 0.8rem; color: var(--text-secondary); text-transform: uppercase; letter-spacing: 0.5px; }
.report-table .status-badge { display: inline-block; padding: 2px 10px; border-radius: var(--radius); font-size: 0.75rem; font-weight: 600; }

/* Report content styling (inside all article types) */
.market-report { font-size: 0.95rem; line-height: 1.7; }
.market-report h3 { font-size: 1.15rem; font-weight: 700; margin: 24px 0 12px; padding-bottom: 6px; border-bottom: 2px solid var(--accent); }
/* UT-27 fix: KPI grid/row styles apply globally within blog content — not just .market-report */
.blog-detail-content .report-kpi-grid,
.blog-detail-content .report-kpi-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 10px; margin: 12px 0; }
.blog-detail-content .report-kpi { background: var(--bg); border-radius: var(--radius); padding: 12px; text-align: center; }
.blog-detail-content .report-kpi .kpi-value { font-size: 1.5rem; font-weight: 700; }
.blog-detail-content .report-kpi .kpi-label { font-size: 0.75rem; color: var(--text-secondary); margin-top: 2px; }
.blog-detail-content .report-kpi .kpi-change { font-size: 0.8rem; font-weight: 600; }
.blog-detail-content .report-kpi .kpi-change.up { color: var(--success); }
.blog-detail-content .report-kpi .kpi-change.down { color: var(--danger); }
.blog-detail-content .report-table-mini { width: 100%; border-collapse: collapse; margin: 10px 0; font-size: 0.85rem; display: block; overflow-x: auto; }
.blog-detail-content .report-table-mini th, .blog-detail-content .report-table-mini td { padding: 6px 10px; border-bottom: 1px solid var(--border); }
.blog-detail-content .report-table-mini th { font-weight: 600; background: var(--bg); }
.blog-detail-content .report-section-note { font-size: 0.8rem; color: var(--text-secondary); font-style: italic; margin-top: 8px; }
.blog-detail-content .report-intro { font-size: 1.05rem; line-height: 1.7; color: var(--text-secondary); margin-bottom: 1.5rem; }

/* ---- Condo Profile CTA Blocks ---- */
.condo-profile-cta { background: var(--bg); border: 2px solid var(--accent); border-radius: 10px; padding: 16px 20px; margin: 16px 0; }
.condo-profile-cta h3 { margin: 0 0 8px; font-size: 1rem; }
.condo-profile-cta p { margin: 4px 0; font-size: 0.9rem; }
.condo-profile-cta-btn, .blog-detail-content .condo-profile-cta-btn { display: inline-block; padding: 8px 20px; background: var(--accent); color: #fff !important; border-radius: var(--radius-sm); text-decoration: none; font-weight: 600; font-size: 0.9rem; transition: opacity 0.2s; }
.condo-profile-cta-btn:hover { opacity: 0.85; }
/* Embed block placeholder styling */
.condo-embed { min-height: 60px; margin: 16px 0; border-radius: var(--radius); background: var(--bg); border: 1px dashed var(--border); padding: 20px; text-align: center; color: var(--text-secondary); font-size: 0.85rem; }
.condo-embed.loaded { border: none; background: none; padding: 0; text-align: left; color: inherit; min-height: auto; }

/* ---- News Category Badges (expanded) ---- */
.news-category-badge.condo-fresh { background: var(--status-info); }
.news-category-badge.monthly-report { background: var(--secondary); }
.news-category-badge.monthly-condo-report { background: var(--badge-green); }

/* ---- Translation Badge ---- */
.news-translation-badge { display: inline-flex; align-items: center; gap: 3px; font-size: 0.75rem; padding: 1px 6px; border-radius: var(--radius); margin-left: 6px; }
.news-translation-badge.translated { background: #dcfce7; color: #166534; }
.news-translation-badge.pending { background: #fef9c3; color: #854d0e; }

/* ---- Admin Submission Cards ---- */
.submission-card { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius); padding: 14px; margin-bottom: 10px; }
.submission-card .sc-header { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 8px; }
.submission-card .sc-title { font-weight: 600; font-size: 0.88rem; }
.submission-card .sc-meta { font-size: 0.72rem; color: var(--text-secondary); margin-bottom: 6px; }
.submission-card .sc-content { font-size: 0.8rem; color: var(--text); max-height: 120px; overflow: hidden; position: relative; }
.submission-card .sc-actions { display: flex; gap: 6px; margin-top: 10px; }
.submission-card .sc-actions button { font-size: 0.75rem; padding: 4px 12px; border-radius: var(--radius-sm); border: 1px solid var(--border); background: var(--bg-card); color: var(--text); cursor: pointer; }
.submission-card .sc-actions .approve-btn { background: var(--success); color: var(--text-inverse); border-color: var(--success); }
.submission-card .sc-actions .reject-btn { background: var(--danger); color: var(--text-inverse); border-color: var(--danger); }

/* ---- Evaluation Results ---- */
.eval-result-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 16px; }
.eval-result-card { background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 12px; }
.eval-result-card .erc-label { font-size: 0.72rem; color: var(--text-secondary); margin-bottom: 4px; }
.eval-result-card .erc-values { display: flex; justify-content: space-between; align-items: baseline; }
.eval-result-card .erc-listing { font-size: 1rem; font-weight: 700; }
.eval-result-card .erc-market { font-size: 0.82rem; color: var(--text-secondary); }
.eval-result-card .erc-diff { font-size: 0.72rem; font-weight: 600; margin-top: 4px; }
.eval-result-card .erc-diff.above { color: var(--danger); }
.eval-result-card .erc-diff.below { color: var(--success); }
.eval-result-card .erc-diff.at { color: var(--text-secondary); }
.eval-verdict { text-align: center; padding: 12px; border-radius: var(--radius); margin-bottom: 16px; font-weight: 700; font-size: 1rem; }
.eval-verdict.below-market { background: #dcfce7; color: #166534; }
.eval-verdict.at-market { background: #fef9c3; color: #854d0e; }
.eval-verdict.above-market { background: var(--danger-bg); color: #991b1b; }
.eval-quick-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; justify-content: center; }
.eval-quick-actions a,
.eval-quick-actions button { font-size: 0.78rem; padding: 6px 14px; border-radius: var(--radius-sm); border: 1px solid var(--border); background: var(--bg-card); color: var(--text); cursor: pointer; transition: background 0.15s; text-decoration: none; display: inline-block; }
.eval-quick-actions a:hover,
.eval-quick-actions button:hover { background: var(--bg); text-decoration: none; }

/* ---- News Submission Section ---- */
.news-submission-section { border-top: 1px solid var(--border); padding-top: 16px; margin-top: 20px; }
.required-field::after { content: ' *'; color: var(--danger, #dc3545); font-weight: 700; }

/* ============================================
   MAPS (UF-28/29/39/58)
   ============================================ */
.map-container { width: 100%; height: 600px; border-radius: var(--radius); border: 1px solid var(--border); margin-top: 12px; }
.map-subtitle { color: var(--text-secondary); font-size: 0.92rem; margin: 0 0 12px; }
.map-back-link { display: inline-block; color: var(--secondary); cursor: pointer; font-size: 0.9rem; margin-bottom: 12px; text-decoration: none; }
.map-back-link:hover { text-decoration: underline; }

/* Controls */
.map-controls { display: flex; gap: 20px; flex-wrap: wrap; margin: 12px 0; }
.map-control-group { display: flex; align-items: center; gap: 8px; }
.map-control-group label { font-size: 0.82rem; color: var(--text-secondary); white-space: nowrap; }
.map-control-btns { display: flex; gap: 4px; }
.map-control-btn {
    padding: 5px 14px; border-radius: 6px; font-size: 0.82rem; cursor: pointer;
    background: var(--bg-hover); color: var(--text); border: 1px solid var(--border);
    transition: color 0.15s, background-color 0.15s, border-color 0.15s;
}
.map-control-btn:hover { background: var(--secondary); color: var(--text-inverse); border-color: var(--secondary); }
.map-control-btn.active { background: var(--secondary); color: var(--text-inverse); border-color: var(--secondary); }

/* Layer toggles (master plan) */
.map-layer-toggles { display: flex; gap: 16px; flex-wrap: wrap; margin: 12px 0; font-size: 0.88rem; }
.map-layer-toggles label { display: flex; align-items: center; gap: 6px; cursor: pointer; color: var(--text); }
.map-layer-toggles input[type="checkbox"] { accent-color: var(--secondary); }

/* Benchmarks (yield map) */
.map-benchmarks { display: flex; gap: 20px; flex-wrap: wrap; margin: 8px 0 4px; font-size: 0.82rem; color: var(--text-secondary); }
.map-benchmark { display: flex; align-items: center; gap: 6px; }
.map-benchmark-dot { width: 10px; height: 10px; border-radius: 50%; display: inline-block; }

/* Legend (Leaflet control) */
.map-legend {
    background: var(--bg-card); border: 1px solid var(--border); border-radius: 6px;
    padding: 10px 14px; font-size: 0.78rem; color: var(--text); line-height: 1.6;
    box-shadow: var(--shadow-sm); max-width: 200px;
}
.map-legend strong { display: block; margin-bottom: 4px; font-size: 0.82rem; }
.map-legend-item { display: flex; align-items: center; gap: 6px; }
.map-legend-swatch { display: inline-block; width: 16px; height: 12px; border-radius: 2px; flex-shrink: 0; }
.map-legend hr { margin: 6px 0; border: none; border-top: 1px solid var(--border); }

/* Popup */
.map-popup .leaflet-popup-content-wrapper {
    background: var(--bg-card); color: var(--text); border-radius: 8px;
    box-shadow: var(--shadow-md); border: 1px solid var(--border);
}
.map-popup .leaflet-popup-tip { background: var(--bg-card); }
.map-popup-content h4 { margin: 0 0 4px; font-size: 0.95rem; }
.map-popup-segment {
    display: inline-block; font-size: 0.72rem; padding: 1px 8px;
    border-radius: 4px; background: var(--bg-hover); color: var(--text-secondary); margin-bottom: 8px;
}
.map-popup-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 16px; }
.map-popup-label { font-size: 0.75rem; color: var(--text-muted); display: block; }
.map-popup-value { font-size: 0.88rem; font-weight: 600; }
.map-popup-title { font-weight: 600; font-size: 0.95rem; margin-bottom: 6px; }
.map-popup-content > div { display: flex; justify-content: space-between; gap: 8px; padding: 2px 0; }
.map-town-label { background: none !important; border: none !important; box-shadow: none !important; font-size: 0.65rem; font-weight: 700; color: var(--text); text-shadow: 1px 1px 2px rgba(255,255,255,0.8), -1px -1px 2px rgba(255,255,255,0.8); }
.map-legend { font-size: 0.82rem; color: var(--text-secondary); }
.map-yield-high { color: var(--success); }
.map-yield-mid { color: var(--warning); }
.map-yield-low { color: var(--danger); }

/* Score bubble markers (map-scores) */
.score-bubble {
    border-radius: 50%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: var(--text-inverse);
    font-weight: 700;
    border: 2px solid rgba(255,255,255,0.3);
    cursor: pointer;
    transition: transform 0.15s, box-shadow 0.15s;
    box-shadow: 0 2px 8px rgba(0,0,0,0.35);
    line-height: 1;
    text-align: center;
    user-select: none;
    gap: 1px;
}
.score-bubble:hover { transform: scale(1.12); box-shadow: 0 4px 14px rgba(0,0,0,0.5); }
.score-bubble--high { background: #2dd4bf; }
.score-bubble--mid  { background: #c9a84c; }
.score-bubble--low  { background: #e85d7f; }
.score-bubble--none { background: #6b7280; }
.score-bubble__score { font-size: 1rem; font-weight: 800; line-height: 1; }
.score-bubble__count { font-size: 0.6rem; font-weight: 400; opacity: 0.85; line-height: 1; }

/* Individual condo dots — shown when clusters fully expand at high zoom */
.score-condo-dot {
    width: 30px; height: 30px;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    color: var(--text-inverse); font-size: 0.62rem; font-weight: 700;
    border: 1.5px solid rgba(255,255,255,0.5);
    cursor: pointer;
    box-shadow: 0 1px 5px rgba(0,0,0,0.35);
    transition: transform 0.12s;
}
.score-condo-dot:hover { transform: scale(1.2); }
.score-condo-dot--high { background: #2dd4bf; }
.score-condo-dot--mid  { background: #c9a84c; }
.score-condo-dot--low  { background: #e85d7f; }
.score-condo-dot--none { background: #6b7280; }

/* Mobile */
/* ============================================
   KNOWLEDGE BASE (UT-7 + UF-51)
   ============================================ */
.kb-landing { max-width: 1200px; margin: 0 auto; }
.kb-card {
    background: var(--bg-card); border: 1px solid var(--border);
    border-radius: var(--radius); padding: 20px;
    display: flex; gap: 16px; align-items: flex-start;
    transition: box-shadow 0.2s, transform 0.2s; cursor: pointer;
}
.kb-card:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); }
.kb-card-icon {
    flex-shrink: 0; width: 40px; height: 40px;
    display: flex; align-items: center; justify-content: center;
    background: var(--bg-hover); border-radius: 10px; color: var(--secondary);
}
.kb-card-body { flex: 1; min-width: 0; }
.kb-card-title { font-size: 1rem; font-weight: 600; margin: 0 0 4px; color: var(--text); }
.kb-card-desc { font-size: 0.82rem; color: var(--text-secondary); margin: 0 0 8px; line-height: 1.4; }
.kb-card-count { font-size: 0.75rem; color: var(--text-muted); }

/* Detail view */
.kb-detail { max-width: 800px; margin: 0 auto; }
.kb-back-btn {
    display: inline-flex; align-items: center; gap: 4px;
    background: none; border: none; color: var(--secondary);
    font-size: 0.88rem; font-family: var(--font); cursor: pointer;
    padding: 8px 0; margin-bottom: 16px;
}
.kb-back-btn:hover { text-decoration: underline; }
.kb-detail-header {
    display: flex; gap: 16px; align-items: flex-start; margin-bottom: 24px;
}
.kb-detail-icon {
    flex-shrink: 0; width: 48px; height: 48px;
    display: flex; align-items: center; justify-content: center;
    background: var(--bg-hover); border-radius: var(--radius); color: var(--secondary);
}
.kb-detail-category {
    display: inline-block; font-size: 0.75rem; font-weight: 600;
    color: var(--secondary); text-transform: uppercase; letter-spacing: 0.5px;
    margin-bottom: 4px;
}

/* FAQ Accordion */
.kb-accordion { display: flex; flex-direction: column; gap: 2px; }
.kb-faq-item {
    background: var(--bg-card); border: 1px solid var(--border);
    border-radius: var(--radius); overflow: hidden;
}
.kb-faq-item:first-child { border-radius: var(--radius) var(--radius) 0 0; }
.kb-faq-item:last-child { border-radius: 0 0 var(--radius) var(--radius); }
.kb-faq-item:only-child { border-radius: var(--radius); }
.kb-faq-question {
    display: flex; align-items: center; justify-content: space-between;
    width: 100%; padding: 16px 20px; background: none; border: none;
    font-size: 0.92rem; font-weight: 500; font-family: var(--font);
    color: var(--text); text-align: left; cursor: pointer; gap: 12px;
}
.kb-faq-question:hover { background: var(--bg-hover); }
.kb-faq-chevron { flex-shrink: 0; transition: transform 0.25s; color: var(--text-muted); }
.kb-faq-item.open .kb-faq-chevron { transform: rotate(180deg); }
.kb-faq-answer {
    padding: 0 20px 16px; font-size: 0.88rem; line-height: 1.7;
    color: var(--text-secondary);
}
.kb-faq-answer p { margin: 0; }

/* Related calculator link */
.kb-related-calc {
    margin-top: 24px; padding: 16px 20px;
    background: var(--bg-hover); border-radius: var(--radius);
}
.kb-related-calc a {
    display: inline-flex; align-items: center; gap: 8px;
    color: var(--secondary); font-weight: 500; font-size: 0.88rem;
    text-decoration: none;
}
.kb-related-calc a:hover { text-decoration: underline; }

/* KB Mobile */
/* ============================================
   CHECKLISTS & AUDIT CTAs
   ============================================ */

/* ---- Landing Page ---- */
.checklists-landing { max-width: 1200px; margin: 0 auto; }

.checklist-card {
    background: var(--bg-card); border: 1px solid var(--border);
    border-radius: var(--radius); padding: 20px;
    transition: box-shadow 0.2s, transform 0.2s;
}
.checklist-card:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); }

.checklist-card-header {
    display: flex; justify-content: space-between; align-items: center;
    margin-bottom: 12px;
}
.checklist-icon { font-size: 2rem; }
.checklist-meta-tags { display: flex; gap: 6px; }
.checklist-difficulty-tag,
.checklist-time-tag {
    padding: 3px 8px; background: var(--bg); border-radius: 4px;
    font-size: 0.72rem; color: var(--text-secondary); font-weight: 500;
}
.checklist-card h3 {
    font-size: 1.05rem; font-weight: 700; color: var(--text);
    margin-bottom: 8px;
}
.checklist-desc {
    font-size: 0.82rem; color: var(--text-secondary); line-height: 1.5;
    margin-bottom: 14px;
}
.checklist-card-footer { margin-top: auto; }
.checklist-progress-bar-wrapper {
    height: 6px; background: var(--border-light); border-radius: 3px;
    overflow: hidden; margin-bottom: 10px;
}
.checklist-progress-bar {
    height: 100%; background: var(--secondary); border-radius: 3px;
    transition: width 0.3s ease;
}
.checklist-footer-row {
    display: flex; justify-content: space-between; align-items: center;
}
.checklist-progress-text {
    font-size: 0.75rem; color: var(--text-secondary);
}
.checklist-restart-link {
    display: block; margin-top: 4px; font-size: 0.7rem; color: var(--text-secondary);
    cursor: pointer; text-decoration: underline;
}
.checklist-restart-link:hover { color: var(--danger); }

/* ============================================
   CALCULATOR HUB
   ============================================ */
.calc-hub { max-width: 1200px; margin: 0 auto; padding: 0 16px; }

.calc-hub-header {
    text-align: center; margin-bottom: 32px;
}
.calc-hub-header h1 {
    font-size: 1.6rem; font-weight: 800; color: var(--text); margin-bottom: 6px;
}
.calc-hub-header p {
    font-size: 0.92rem; color: var(--text-secondary); margin: 0;
}

.calc-hub-section { margin-bottom: 36px; }
.calc-hub-section-header {
    display: flex; align-items: center; gap: 12px; margin-bottom: 18px;
}
.calc-hub-section-icon { font-size: 1.6rem; }
.calc-hub-section-icon.kb-section-icon { font-size: inherit; color: var(--secondary); }
.calc-hub-section-header h2 {
    font-size: 1.15rem; font-weight: 700; color: var(--text); margin: 0;
}
.calc-hub-section-header p {
    font-size: 0.82rem; color: var(--text-secondary); margin: 2px 0 0;
}

.calc-hub-grid {
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px;
}

.calc-hub-card {
    background: var(--bg-card); border: 1px solid var(--border);
    border-radius: var(--radius); padding: 20px;
    cursor: pointer; transition: box-shadow 0.2s, transform 0.2s, border-color 0.2s;
    display: flex; flex-direction: column;
    color: inherit; text-decoration: none;
}
.calc-hub-card:hover {
    box-shadow: var(--shadow-md); transform: translateY(-2px);
    border-color: var(--secondary);
}
.calc-hub-card:focus-visible {
    outline: 2px solid var(--secondary); outline-offset: 2px;
}
.calc-hub-card-badge {
    display: inline-block; padding: 2px 10px; border-radius: var(--radius);
    background: var(--bg); font-size: 0.7rem; font-weight: 600;
    color: var(--text-secondary); margin-bottom: 10px; align-self: flex-start;
}
.calc-hub-card h3 {
    font-size: 0.98rem; font-weight: 700; color: var(--text);
    margin: 0 0 8px;
}
.calc-hub-card p {
    font-size: 0.82rem; color: var(--text-secondary); line-height: 1.5;
    margin: 0 0 12px; flex: 1;
}
.calc-hub-card-link {
    font-size: 0.8rem; font-weight: 600; color: var(--secondary);
}
.calc-hub-card:hover .calc-hub-card-link { text-decoration: underline; }
.calc-hub-card-icon {
    margin-bottom: 12px; color: var(--secondary);
}
.calc-hub-card-icon svg { display: block; }

/* Advisor back-to-hub button */
.advisor-back-btn {
    display: inline-flex; align-items: center; gap: 4px;
    margin-bottom: 16px; font-size: 0.82rem;
}
.advisor-back-btn svg { flex-shrink: 0; }

/* ============================================
   ABOUT / E-E-A-T PAGE (SE-10)
   ============================================ */
.about-page { max-width: 960px; margin: 0 auto; padding: 0 16px; }

.about-hero { text-align: center; margin-bottom: 36px; }
.about-hero h1 { font-size: 1.6rem; font-weight: 800; color: var(--text); margin-bottom: 6px; }
.about-hero-sub { font-size: 0.95rem; color: var(--text-secondary); }

.about-section { margin-bottom: 32px; }
.about-section h2 {
    font-size: 1.15rem; font-weight: 700; color: var(--text);
    margin: 0 0 12px; padding-bottom: 8px; border-bottom: 2px solid var(--secondary);
    display: inline-block;
}
.about-section > p { font-size: 0.88rem; color: var(--text-secondary); line-height: 1.65; margin: 0 0 16px; }

.map-editorial { margin-top: 28px; padding: 20px; background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius); }
.map-editorial h3 { font-size: 1.05rem; cursor: pointer; margin: 0 0 12px; }
.map-editorial .about-content { padding: 0; }

.about-source-grid {
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px;
}
.about-source-card {
    background: var(--bg-card); border: 1px solid var(--border);
    border-radius: var(--radius); padding: 16px;
}
.about-source-card h3 { font-size: 0.92rem; font-weight: 700; margin: 0 0 6px; }
.about-source-card h3 a { color: var(--secondary); text-decoration: none; }
.about-source-card h3 a:hover { text-decoration: underline; }
.about-source-card p { font-size: 0.8rem; color: var(--text-secondary); line-height: 1.5; margin: 0; }

.about-method-grid {
    display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px;
}
.about-method-card {
    background: var(--bg-card); border: 1px solid var(--border);
    border-radius: var(--radius); padding: 16px;
}
.about-method-card h4 { font-size: 0.88rem; font-weight: 700; color: var(--text); margin: 0 0 6px; }
.about-method-card p { font-size: 0.8rem; color: var(--text-secondary); line-height: 1.5; margin: 0; }

.about-coverage-grid {
    display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px;
}
.about-coverage-card {
    background: var(--bg-card); border: 1px solid var(--border);
    border-radius: var(--radius); padding: 16px; text-align: center;
    display: flex; flex-direction: column; align-items: center; gap: 4px;
}
.about-coverage-icon { font-size: 1.6rem; }
.about-coverage-card strong { font-size: 0.88rem; color: var(--text); }
.about-coverage-card span { font-size: 0.78rem; color: var(--text-secondary); }

/* S47 — Our Authors team grid on /about page */
.about-team-grid {
    display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; margin-top: 16px;
}
.about-team-card {
    background: var(--bg-card); border: 1px solid var(--border);
    border-radius: var(--radius); padding: 20px;
    text-decoration: none; color: inherit;
    display: flex; flex-direction: column; gap: 8px;
    transition: border-color 0.15s, transform 0.15s;
}
.about-team-card:hover { border-color: var(--accent); transform: translateY(-2px); }
.about-team-card h3 { margin: 0; color: var(--text); font-size: 1.1rem; }
.about-team-role { font-size: 0.82rem; color: var(--accent); margin: 0; font-weight: 600; text-transform: uppercase; letter-spacing: 0.02em; }
.about-team-desc { font-size: 0.88rem; color: var(--text-secondary); margin: 0; line-height: 1.5; }
.about-team-cta { font-size: 0.85rem; color: var(--accent); margin-top: 4px; font-weight: 600; }

@media (max-width: 768px) {
    .about-team-grid { grid-template-columns: 1fr; }
}

.about-contact { text-align: center; padding: 28px 0; }
.about-contact .btn { margin-top: 12px; }

/* ---- Author Profile (E-E-A-T byline page) ---- */
.author-profile {
    max-width: 820px;
    margin: 0 auto;
    padding: 8px 16px 48px;
}
.author-profile-header {
    border-bottom: 1px solid var(--border);
    padding-bottom: 18px;
    margin-bottom: 28px;
}
.author-profile-role {
    font-size: 0.82rem;
    color: var(--accent);
    margin: 0 0 4px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.author-profile-affiliation {
    font-size: 0.9rem;
    color: var(--text-secondary);
    margin: 0;
}
.author-profile-bio,
.author-profile-methodology,
.author-profile-contact {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 22px 24px;
    margin-bottom: 20px;
}
.author-profile-bio h2,
.author-profile-methodology h2,
.author-profile-contact h2 {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--text);
    margin: 0 0 12px;
}
.author-profile-bio p,
.author-profile-contact p {
    font-size: 0.92rem;
    color: var(--text-secondary);
    line-height: 1.65;
    margin: 0 0 12px;
}
.author-profile-bio p:last-child,
.author-profile-contact p:last-child {
    margin-bottom: 0;
}
.author-profile-methodology ul {
    list-style: disc;
    padding-left: 22px;
    margin: 0;
}
.author-profile-methodology li {
    font-size: 0.92rem;
    color: var(--text-secondary);
    line-height: 1.65;
    margin-bottom: 12px;
}
.author-profile-methodology li:last-child { margin-bottom: 0; }
.author-profile-methodology li strong {
    color: var(--text);
    font-weight: 600;
}
.author-profile-contact .btn { margin-top: 4px; }

@media (max-width: 600px) {
    .author-profile { padding: 4px 12px 36px; }
    .author-profile-bio,
    .author-profile-methodology,
    .author-profile-contact { padding: 18px 16px; }
}

/* ---- Base Button Styles ---- */
.btn {
    display: inline-flex; align-items: center; justify-content: center;
    padding: 8px 18px; font-size: 0.85rem; font-weight: 500;
    font-family: var(--font); border-radius: var(--radius-sm);
    cursor: pointer; border: 1px solid transparent;
    transition: color 0.2s, background-color 0.2s, border-color 0.2s, opacity 0.2s; text-decoration: none; line-height: 1.4;
}
.btn-primary {
    background: var(--secondary); color: var(--text-inverse); border-color: var(--secondary);
}
.btn-primary:hover { opacity: 0.88; }
.btn:disabled, .btn-primary:disabled { opacity: 0.4; cursor: not-allowed; pointer-events: none; }
.btn-sm { padding: 6px 14px; font-size: 0.78rem; }
.btn-outline {
    background: transparent; border: 1px solid var(--secondary);
    color: var(--secondary); border-radius: var(--radius-sm);
    cursor: pointer; font-family: var(--font); font-weight: 500;
    transition: color 0.2s, background-color 0.2s;
}
.btn-outline:hover { background: var(--secondary); color: var(--text-inverse); }

/* ---- Detail View ---- */
.cl-detail-header { margin-bottom: 20px; }
.btn-back {
    background: none; border: none; color: var(--secondary);
    font-size: 0.85rem; cursor: pointer; padding: 0; margin-bottom: 10px;
    font-family: var(--font);
}
.btn-back:hover { text-decoration: underline; }

.cl-progress-card {
    background: var(--bg-card); border: 1px solid var(--border);
    border-radius: var(--radius); padding: 20px;
    display: flex; align-items: center; gap: 20px; margin-bottom: 20px;
}
.cl-progress-ring { position: relative; flex-shrink: 0; }
.cl-progress-pct {
    position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
    font-size: 1.1rem; font-weight: 700; color: var(--secondary);
}

/* ---- Audit CTA Card ---- */
.audit-cta-card {
    background: linear-gradient(135deg, var(--primary) 0%, var(--secondary) 100%);
    color: var(--text-inverse); border-radius: var(--radius); padding: 24px;
    margin-bottom: 20px; display: flex; justify-content: space-between;
    align-items: center; gap: 20px;
}
.audit-cta-content h3 { color: var(--text-inverse); margin-bottom: 6px; font-size: 1.1rem; }
.audit-cta-content p { color: rgba(255,255,255,0.9); font-size: 0.85rem; line-height: 1.5; }
.audit-cta-pricing { margin-top: 10px; }
.audit-price { font-size: 1.8rem; font-weight: 700; }
.audit-cta-card .btn-primary {
    background: white; color: var(--primary); border: none;
    padding: 12px 24px; border-radius: var(--radius-sm); font-weight: 600;
    cursor: pointer; font-family: var(--font); white-space: nowrap;
    transition: opacity 0.2s;
}
.audit-cta-card .btn-primary:hover { opacity: 0.9; }
.btn-lg { padding: 12px 28px; font-size: 0.95rem; }

/* ---- Checklist Sections ---- */
.cl-section {
    background: var(--bg-card); border: 1px solid var(--border);
    border-radius: var(--radius); margin-bottom: 10px; overflow: hidden;
}
.cl-section-header {
    display: flex; align-items: center; gap: 12px;
    padding: 14px 18px; cursor: pointer; background: var(--bg);
    transition: background 0.2s;
}
.cl-section-header:hover { background: var(--border-light); }
.cl-section-header h4 { flex: 1; font-size: 0.95rem; margin: 0; }
.cl-section-progress {
    font-size: 0.78rem; color: var(--text-secondary); white-space: nowrap;
}
.cl-section-arrow {
    color: var(--text-secondary); transition: transform 0.2s; flex-shrink: 0;
}
.cl-section.collapsed .cl-section-arrow { transform: rotate(-90deg); }
.cl-section.collapsed .cl-section-body { display: none; }
.cl-section-body { padding: 8px 18px 14px; }

/* ---- Checklist Items ---- */
.cl-item {
    display: flex; align-items: flex-start; gap: 12px;
    padding: 10px 0; border-bottom: 1px solid var(--border-light);
    cursor: pointer; transition: background 0.15s;
}
.cl-item:last-child { border-bottom: none; }
.cl-item:hover { background: rgba(46,134,171,0.03); margin: 0 -8px; padding-left: 8px; padding-right: 8px; }

.cl-item input[type="checkbox"] { display: none; }
.cl-checkbox {
    width: 22px; height: 22px; min-width: 22px; border: 2px solid var(--border);
    border-radius: var(--radius-sm); display: inline-flex; align-items: center;
    justify-content: center; transition: background-color 0.2s, border-color 0.2s; margin-top: 1px;
}
.cl-item input:checked + .cl-checkbox {
    background: var(--secondary); border-color: var(--secondary);
}
.cl-item input:checked + .cl-checkbox::after {
    content: '\2713'; color: var(--text-inverse); font-size: 14px; font-weight: 700;
}
.cl-item-done .cl-item-text {
    text-decoration: line-through; opacity: 0.5;
}
.cl-item-text { flex: 1; line-height: 1.55; font-size: 0.9rem; }
.cl-item-link {
    color: var(--secondary); text-decoration: none; font-size: 0.82rem;
    margin-left: 4px;
}
.cl-item-link:hover { text-decoration: underline; }

/* ---- Actions Bar ---- */
.cl-actions {
    display: flex; gap: 10px; margin-top: 20px; justify-content: flex-end;
}

/* ---- Checklist Mobile ---- */
@media (max-width: 768px) {
    .audit-cta-card { flex-direction: column; text-align: center; }
    .audit-cta-card .btn-primary { width: 100%; }
    .cl-actions {
        position: sticky; bottom: 60px; background: var(--bg-card);
        border-top: 1px solid var(--border); padding: 12px;
        margin: 20px -16px 0; justify-content: stretch;
    }
    .cl-actions .btn { flex: 1; }
    .cl-progress-card { flex-direction: column; text-align: center; }
}

/* ============================================
   LOAN COMPARISON
   ============================================ */
.loan-results-table {
    width: 100%; border-collapse: collapse; font-size: 0.85rem;
}
.loan-results-table th {
    text-align: left; padding: 10px 12px; font-weight: 600;
    font-size: 0.78rem; text-transform: uppercase; color: var(--text-secondary);
    border-bottom: 2px solid var(--border);
}
.loan-results-table td {
    padding: 10px 12px; border-bottom: 1px solid var(--border-light);
    vertical-align: top;
}
.loan-results-table tr:hover { background: rgba(46,134,171,0.04); }
.loan-rate { color: var(--secondary); font-weight: 700; }
.loan-result-card {
    border: 1px solid var(--border); border-radius: var(--radius);
    padding: 16px; margin-bottom: 12px; background: var(--bg-card);
}
.loan-result-card.best {
    border-color: var(--secondary);
    box-shadow: 0 0 8px rgba(46,134,171,0.15);
}
.sora-rates-grid {
    display: flex; gap: 24px; flex-wrap: wrap;
}
.sora-rate-item { text-align: center; }
.sora-rate-value {
    font-size: 1.6rem; font-weight: 700; color: var(--secondary);
}
.sora-rate-label {
    font-size: 0.75rem; color: var(--text-secondary);
}
.sora-rate-date {
    font-size: 0.7rem; color: var(--text-secondary);
}
.sora-source {
    margin-left: auto; text-align: right;
    font-size: 0.78rem; color: var(--text-secondary);
}
/* ============================================
   COMPREHENSIVE MOBILE FIXES (375px-768px)
   ============================================ */
/* ============================================
   Quill Rich Text Editor Theme Overrides
   ============================================ */
.ql-toolbar { background: var(--bg); border-color: var(--border) !important; border-radius: var(--radius) var(--radius) 0 0; }
.ql-container { border-color: var(--border) !important; border-radius: 0 0 var(--radius) var(--radius); background: var(--bg-card); color: var(--text); font-size: 13px; }
.ql-editor { min-height: 200px; }
.ql-editor.ql-blank::before { color: var(--text-secondary); }
.ql-snow .ql-stroke { stroke: var(--text); }
.ql-snow .ql-fill { fill: var(--text); }
.ql-snow .ql-picker-label { color: var(--text); }
.ql-snow .ql-picker-options { background: var(--bg-card); border-color: var(--border); }
.ql-snow .ql-picker-item { color: var(--text); }
.ql-snow .ql-active .ql-stroke { stroke: var(--primary); }
.ql-snow .ql-active .ql-fill { fill: var(--primary); }
.ql-snow a { color: var(--secondary); }

/* ============================================
   Analytics Dashboard
   ============================================ */
.analytics-kpi-grid {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 12px;
}
.analytics-kpi-card {
    background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius);
    padding: 16px; text-align: center;
}
.analytics-kpi-label { font-size: 0.75rem; color: var(--text-secondary); text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 4px; }
.analytics-kpi-value { font-size: 1.6rem; font-weight: 700; color: var(--text); }
.analytics-table { width: 100%; border-collapse: collapse; font-size: 0.82rem; display: block; overflow-x: auto; }
.analytics-table th { text-align: left; padding: 8px 10px; border-bottom: 2px solid var(--border); color: var(--text-secondary); font-weight: 600; font-size: 0.72rem; text-transform: uppercase; }
.analytics-table td { padding: 8px 10px; border-bottom: 1px solid var(--border-light); color: var(--text); }
.analytics-table tr:hover td { background: rgba(46,134,171,0.04); }
.analytics-bar { height: 6px; border-radius: 3px; background: var(--secondary); display: inline-block; vertical-align: middle; }
.analytics-period-btn.active, .analytics-period-btn.btn-primary { background: var(--primary); color: var(--text-inverse); }

/* Analytics Sub-Tab Pills */
.analytics-sub-tabs { display: flex; gap: 6px; margin-bottom: 18px; flex-wrap: wrap; }
.analytics-pill {
    padding: 6px 18px; border-radius: 20px; font-size: 0.78rem; font-weight: 600;
    border: 1px solid var(--border); background: var(--bg-card); color: var(--text-secondary);
    cursor: pointer; transition: color 0.15s, background-color 0.15s, border-color 0.15s;
}
.analytics-pill:hover { border-color: var(--primary); color: var(--primary); }
.analytics-pill.active { background: var(--primary); color: var(--text-inverse); border-color: var(--primary); }

/* Clickable table rows for drill-down */
.analytics-table tr.clickable { cursor: pointer; }
.analytics-table tr.clickable:hover td { background: rgba(46,134,171,0.08); }

/* Two-column grid for distribution charts */
.analytics-two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
/* Funnel bar chart (used for advisor steps + checklist sections) */
.analytics-funnel-chart { display: flex; flex-direction: column; gap: 10px; padding: 8px 0; }
.analytics-funnel-row { display: flex; align-items: center; gap: 12px; }
.analytics-funnel-label { width: 180px; font-size: 0.78rem; color: var(--text-secondary); text-align: right; flex-shrink: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.analytics-funnel-track { flex: 1; height: 26px; background: var(--border-light); border-radius: 4px; overflow: hidden; }
.analytics-funnel-fill { height: 100%; background: linear-gradient(90deg, var(--secondary), var(--primary)); border-radius: 4px; transition: width 0.5s ease; min-width: 2px; }
.analytics-funnel-count { width: 80px; font-size: 0.78rem; font-weight: 600; color: var(--text); text-align: left; white-space: nowrap; flex-shrink: 0; }
/* Calculator input analysis grid */
.analytics-input-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; }
.analytics-input-card {
    background: var(--bg-card); border: 1px solid var(--border-light); border-radius: var(--radius);
    padding: 12px; font-size: 0.78rem;
}
.analytics-input-field { font-weight: 700; color: var(--primary); margin-bottom: 8px; font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.3px; }
.analytics-input-stats { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 0.75rem; color: var(--text-secondary); }
.analytics-input-stats strong { color: var(--text); }
.analytics-input-freq { display: flex; flex-direction: column; gap: 4px; }
.analytics-freq-row { display: flex; align-items: center; gap: 8px; }
.analytics-freq-label { width: 80px; font-size: 0.72rem; color: var(--text-secondary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex-shrink: 0; }
.analytics-freq-bar { height: 14px; background: var(--secondary); border-radius: 3px; min-width: 2px; opacity: 0.7; }
.analytics-freq-count { font-size: 0.72rem; font-weight: 600; color: var(--text); flex-shrink: 0; }

/* Persistent header search bar (UX-16) */
.header-search-bar {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 14px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--bg);
    color: var(--text-secondary);
    font-size: 0.82rem;
    font-family: var(--font);
    cursor: pointer;
    transition: border-color 0.2s, box-shadow 0.2s;
    min-width: 200px;
}
.header-search-bar:hover {
    border-color: var(--secondary);
    box-shadow: var(--focus-ring-subtle);
}
.header-search-text {
    flex: 1;
    text-align: left;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.header-search-kbd {
    font-size: 0.75rem;
    padding: 1px 5px;
    border: 1px solid var(--border);
    border-radius: 3px;
    background: var(--bg-card);
    color: var(--text-secondary);
    font-family: var(--font);
    line-height: 1.4;
}
/* First-visit hint pulse (UX-07) */
.first-visit-pulse {
    animation: firstVisitPulse 2s ease-in-out infinite;
    box-shadow: 0 0 0 0 rgba(46,134,171,0.4);
    border-radius: var(--radius-sm);
}
@keyframes firstVisitPulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(46,134,171,0.4); }
    50% { box-shadow: 0 0 0 6px rgba(46,134,171,0); }
}
.first-visit-tooltip {
    position: absolute;
    left: 50%;
    bottom: -32px;
    transform: translateX(-50%);
    background: var(--primary);
    color: var(--text-inverse);
    font-size: 0.72rem;
    font-weight: 500;
    padding: 4px 12px;
    border-radius: var(--radius-sm);
    white-space: nowrap;
    z-index: var(--z-elevated);
    pointer-events: none;
    animation: firstVisitTooltipIn 0.3s ease-out;
}
.first-visit-tooltip::before {
    content: '';
    position: absolute;
    top: -4px;
    left: 50%;
    transform: translateX(-50%);
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-bottom: 5px solid var(--primary);
}
@keyframes firstVisitTooltipIn {
    from { opacity: 0; transform: translateX(-50%) translateY(4px); }
    to { opacity: 1; transform: translateX(-50%) translateY(0); }
}

/* Disabled tabs requiring condo selection (UX-02) */
.nav-item.tab-disabled {
    opacity: 0.4;
    pointer-events: none;
    cursor: default;
}

/* Collapsible calculator nav groups (UX-01) */
.calc-nav-group { list-style: none; }
.calc-nav-group-header {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 16px;
    margin-left: 30px;
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: rgba(255,255,255,0.5);
    cursor: pointer;
    user-select: none;
    transition: color 0.2s;
}
.calc-nav-group-header:hover { color: rgba(255,255,255,0.8); }
.calc-nav-group-chevron {
    transition: transform 0.25s ease;
    flex-shrink: 0;
}
.calc-nav-group.collapsed .calc-nav-group-chevron {
    transform: rotate(-90deg);
}
.calc-nav-group-items {
    list-style: none;
    margin-left: 50px;
    overflow: hidden;
    max-height: 1000px;
    transition: max-height 0.3s ease, opacity 0.25s ease;
    opacity: 1;
}
.calc-nav-group.collapsed .calc-nav-group-items {
    max-height: 0;
    opacity: 0;
}

/* Retry mechanism for failed loads (UX-26) */
.load-retry-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 24px 16px;
    text-align: center;
}
.load-retry-msg {
    color: var(--danger);
    font-size: 0.88rem;
    font-weight: 500;
}
.load-retry-btn {
    padding: 8px 20px;
    background: var(--primary);
    color: var(--text-inverse);
    border: none;
    border-radius: var(--radius-sm);
    font-size: 0.82rem;
    font-weight: 600;
    font-family: var(--font);
    cursor: pointer;
    transition: opacity 0.2s;
}
.load-retry-btn:hover {
    opacity: 0.85;
}

/* Admin inline spinner (UX-11) */
.admin-spinner {
    display: inline-block;
    width: 14px;
    height: 14px;
    border: 2px solid var(--border);
    border-top-color: var(--secondary);
    border-radius: 50%;
    animation: admin-spin 0.7s linear infinite;
    vertical-align: middle;
    margin-right: 4px;
}
@keyframes admin-spin {
    to { transform: rotate(360deg); }
}

/* Image fallback placeholder (UX-27) */
.img-fallback-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--border-light);
    border-radius: var(--radius-sm);
    color: var(--text-secondary);
}

/* ── Shepherd.js Tour Theming (UF-20) ── */
.shepherd-element {
    z-index: var(--z-shepherd) !important;
}
.shepherd-modal-overlay-container {
    z-index: calc(var(--z-shepherd) - 1) !important;
}
.shioknest-tour-step .shepherd-content {
    border-radius: var(--radius);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15);
    font-family: 'Inter', sans-serif;
}
.shioknest-tour-step .shepherd-header {
    background: var(--bg-sidebar, #1E3A5F) !important;
    border-radius: var(--radius) var(--radius) 0 0 !important;
    padding: 14px 18px !important;
}
.shioknest-tour-step .shepherd-title {
    color: #fff !important;
    font-size: 0.95rem;
    font-weight: 600;
}
.shioknest-tour-step .shepherd-cancel-icon span {
    color: rgba(255,255,255,0.7) !important;
}
.shioknest-tour-step .shepherd-cancel-icon:hover span {
    color: #fff !important;
}
.shioknest-tour-step .shepherd-text {
    padding: 16px 18px;
    font-size: 0.85rem;
    line-height: 1.5;
    color: var(--text) !important;
}
.shioknest-tour-step .shepherd-footer {
    padding: 10px 18px 14px;
    border-top: 1px solid var(--border, #e5e5e5);
}
.shioknest-tour-step .shepherd-button {
    border-radius: var(--radius-sm);
    font-size: 0.82rem;
    font-weight: 600;
    padding: 6px 18px;
    font-family: 'Inter', sans-serif;
    cursor: pointer;
    transition: color 0.15s, background-color 0.15s;
}
.shioknest-tour-step .shepherd-button:not(.shepherd-button-secondary) {
    background: var(--primary, #2E86AB);
    color: var(--text-inverse);
    border: none;
}
.shioknest-tour-step .shepherd-button:not(.shepherd-button-secondary):hover {
    background: var(--primary-dark, #1E6B8B);
}
.shioknest-tour-step .shepherd-button-secondary {
    background: transparent;
    color: var(--text-secondary, #6c757d);
    border: 1px solid var(--border, #e5e5e5);
}
.shioknest-tour-step .shepherd-button-secondary:hover {
    background: var(--bg-hover, #f5f5f5);
}

/* Dark/Singapore theme overrides for Shepherd — force white card bg so text stays readable */
[data-theme="dark"] .shioknest-tour-step .shepherd-content,
[data-theme="singapore"] .shioknest-tour-step .shepherd-content {
    background: var(--bg-card) !important;
    border: 1px solid rgba(255,255,255,0.15);
}
[data-theme="dark"] .shioknest-tour-step .shepherd-footer,
[data-theme="singapore"] .shioknest-tour-step .shepherd-footer {
    border-top-color: var(--border) !important;
}

/* ============================================
   Side-by-Side Comparison Grid
   ============================================ */
.sbs-comparison-grid {
    display: grid;
    gap: 1rem;
}
.sbs-comparison-grid[data-cols="2"] { grid-template-columns: repeat(2, 1fr); }
.sbs-comparison-grid[data-cols="3"] { grid-template-columns: repeat(3, 1fr); }
.sbs-comparison-grid[data-cols="4"] { grid-template-columns: repeat(4, 1fr); }
.sbs-comparison-panel {
    border: 1px solid var(--border-color, var(--border));
    border-radius: var(--radius);
    padding: 1rem;
    overflow: hidden;
    background: var(--bg-card);
}
.sbs-comparison-panel .panel-header {
    font-weight: 600;
    font-size: 0.95rem;
    padding-bottom: 0.5rem;
    margin-bottom: 0.75rem;
    border-bottom: 2px solid var(--primary);
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
.sbs-comparison-panel .panel-header .panel-color-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex-shrink: 0;
}
.sbs-comparison-panel .panel-header .panel-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--accent);
    text-decoration: none;
    font-weight: 600;
}
.sbs-comparison-panel .panel-header .panel-name:hover {
    text-decoration: underline;
}
.sbs-comparison-panel .panel-header .panel-district {
    font-size: 0.75rem;
    font-weight: 400;
    color: var(--text-secondary);
    margin-left: auto;
    white-space: nowrap;
}

/* Inside SBS panels, make charts smaller to fit side-by-side */
.sbs-comparison-panel .chart-body {
    min-height: 180px;
}
.sbs-comparison-panel .chart-card {
    margin-bottom: 0.5rem;
}
.sbs-comparison-panel .chart-header h3 {
    font-size: 0.8rem;
}
.sbs-comparison-panel .chart-header .chart-subtitle {
    display: none; /* hide subtitles in SBS to save space */
}
.sbs-comparison-panel .chart-row {
    gap: 0.5rem;
    margin-bottom: 0.5rem;
}
.sbs-comparison-panel .chart-row.two-col,
.sbs-comparison-panel .chart-row.three-col {
    grid-template-columns: 1fr; /* stack within each panel */
}
.sbs-comparison-panel .kpi-grid {
    gap: 0.4rem;
}
.sbs-comparison-panel .kpi-card {
    padding: 0.4rem 0.6rem;
}
.sbs-comparison-panel .kpi-label {
    font-size: 0.75rem;
}
.sbs-comparison-panel .kpi-value {
    font-size: 0.85rem;
}
.sbs-comparison-panel .kpi-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
    gap: 0.4rem;
}
/* Hide tables in SBS mode to reduce clutter */
.sbs-comparison-panel .table-body,
.sbs-comparison-panel .collapsible,
.sbs-comparison-panel .ad-container,
.sbs-comparison-panel .property-info-card,
.sbs-comparison-panel .insights-card,
.sbs-comparison-panel #insightsHeatmapCard,
.sbs-comparison-panel .related-news-panel,
.sbs-comparison-panel #enblocIndicator,
.sbs-comparison-panel .chart-controls {
    display: none !important;
}
/* Constrain radar charts & score cards within narrower SBS panels */
.sbs-comparison-panel .amenity-score-card { overflow: hidden; }
.sbs-comparison-panel .score-card-radar { overflow: hidden; }
.sbs-comparison-panel .amenity-score-row { grid-template-columns: 80px 1fr 40px; font-size: 0.72rem; }
.sbs-comparison-panel .amenity-score-header h3 { font-size: 0.85rem; }
.sbs-comparison-panel .shioknest-score-row { flex-direction: column; text-align: center; gap: 12px; padding: 12px; }
.sbs-comparison-panel .shioknest-radar-chart { width: 100%; overflow: hidden; }

/* Comparison Summaries (below SBS grid) */
.sbs-summaries-container {
    margin-top: 1rem;
}
.sbs-comparison-summary {
    background: var(--bg-card);
    border: 1px solid var(--border-color, var(--border));
    border-radius: var(--radius);
    padding: 16px 20px;
    margin-bottom: 12px;
    font-size: 0.9rem;
    line-height: 1.65;
    color: var(--text);
}
.sbs-comparison-summary h4 {
    margin: 0 0 6px;
    font-size: 0.95rem;
    color: var(--text);
    font-weight: 600;
}
.sbs-comparison-summary p { margin: 0; }
.sbs-comparison-summary strong { color: var(--accent); }
.sbs-comparison-summary .compare-up { color: var(--success, #16a34a); font-weight: 600; }
.sbs-comparison-summary .compare-down { color: var(--danger, #dc3545); font-weight: 600; }

@media (min-width: 769px) and (max-width: 1024px) {
    .sbs-comparison-grid[data-cols="3"],
    .sbs-comparison-grid[data-cols="4"] {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* =======================================
   Checklist Feedback Button & Form
   ======================================= */
.cl-feedback-row {
    padding: 8px 0 4px;
    border-top: 1px dashed var(--border);
    margin-top: 8px;
}
.checklist-feedback-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: none;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    color: var(--text-secondary);
    font-size: 0.75rem;
    padding: 5px 10px;
    cursor: pointer;
    transition: color 0.2s, border-color 0.2s, background-color 0.2s;
}
.checklist-feedback-btn:hover {
    color: var(--secondary);
    border-color: var(--secondary);
    background: rgba(var(--secondary-rgb, 46,134,171), 0.05);
}
.checklist-feedback-form {
    margin-top: 8px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.checklist-feedback-form textarea {
    width: 100%;
    min-height: 60px;
    padding: 8px 10px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--bg-card);
    color: var(--text);
    font-size: 0.82rem;
    font-family: var(--font);
    resize: vertical;
}
.checklist-feedback-form textarea:focus {
    outline: none;
    border-color: var(--secondary);
}
.checklist-feedback-actions {
    display: flex;
    gap: 8px;
}

/* =======================================
   Calculator Preset Bar
   ======================================= */
.calc-preset-bar {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-left: auto;
    flex-shrink: 0;
}
.calc-preset-select {
    flex: 1;
    min-width: 120px;
    max-width: 280px;
    padding: 5px 8px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--bg-card);
    color: var(--text);
    font-size: 0.8rem;
    font-family: var(--font);
}
.calc-preset-save-btn,
.calc-preset-delete-btn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: none;
    color: var(--text-secondary);
    font-size: 0.75rem;
    cursor: pointer;
    transition: color 0.2s, border-color 0.2s;
    white-space: nowrap;
    height: 28px;
}
.calc-preset-save-btn:hover {
    color: var(--secondary);
    border-color: var(--secondary);
}
.calc-preset-delete-btn:hover {
    color: var(--accent);
    border-color: var(--accent);
}

/* =======================================
   Header Feedback Button
   ======================================= */
.header-feedback-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    color: var(--text-secondary);
    padding: 6px 8px;
    cursor: pointer;
    transition: color 0.2s, border-color 0.2s, background-color 0.2s;
}
.header-feedback-btn:hover {
    color: var(--secondary);
    border-color: var(--secondary);
    background: rgba(var(--secondary-rgb, 46,134,171), 0.05);
}
/* ============================================
   I1. ADDITIONAL RESPONSIVE BREAKPOINTS
   ============================================ */

/* ====== Extra Small Devices (320px) ====== */
@media (max-width: 320px) {
    /* Reduce padding/margins for very small screens */
    .tab-content { padding: 8px; }
    .calc-field label { font-size: 0.72rem; }
    .calc-field input,
    .calc-field select { font-size: 0.85rem; padding: 6px 8px; }
    .kpi-card { padding: 8px; }
    .kpi-value { font-size: 1.1rem; }
    .kpi-label { font-size: 0.65rem; }
    .tabulator { font-size: 0.72rem; }
    .header-title h2 { font-size: 0.9rem; }
    .header-subtitle { display: none; }
    .chart-body { min-height: 200px; }
    .chart-header h3 { font-size: 0.78rem; }
    .calculator-body { padding: 10px; }
    .calc-result-card { padding: 8px; }
    .calc-value { font-size: 0.85rem; }
    .calc-label { font-size: 0.62rem; }
    .admin-section-header { padding: 10px 12px; }
    .admin-section-header h3 { font-size: 0.8rem; }
    .breadcrumb-nav { font-size: 0.68rem; }
}

/* ====== Small Phones (480px) ====== */
@media (max-width: 480px) {
    .calc-results { grid-template-columns: 1fr !important; }
    .sbs-comparison-grid[data-cols="2"],
    .sbs-comparison-grid[data-cols="3"],
    .sbs-comparison-grid[data-cols="4"] {
        grid-template-columns: 1fr !important;
    }
    .filter-bar { flex-direction: column; gap: 8px; }
    .filter-bar select,
    .filter-group select { width: 100%; }
    .kpi-grid { grid-template-columns: repeat(2, 1fr); }
    .kpi-row { grid-template-columns: repeat(2, 1fr); }
    .admin-section-header { padding: 10px 12px; gap: 8px; }
    .admin-section-header h3 { font-size: 0.82rem; }
    .breadcrumb-nav { font-size: 0.72rem; }
    .chart-export-btn { padding: 4px 8px; font-size: 0.7rem; }
    .calc-preset-bar { gap: 4px; }
    .calc-preset-select { max-width: 100%; }
    .chart-header { padding: 10px 12px 0; flex-wrap: wrap; gap: 8px; }
    .chart-controls { flex-wrap: wrap; }
    .blog-grid { grid-template-columns: 1fr; }
    /* Responsive-1A: iOS Safari auto-zooms on focus when input font-size < 16px.
       Force 16px on all form controls at mobile to suppress the pinch-zoom dance.
       Scoped to ≤480px so desktop form density is preserved. */
    input, select, textarea { font-size: 16px; }
}

/* ====== Tablets (1024px) ====== */
@media (max-width: 1024px) {
    .kpi-grid { grid-template-columns: repeat(3, 1fr); }
    .kpi-row-yearly { grid-template-columns: repeat(3, 1fr); }
    .calc-results { grid-template-columns: repeat(2, 1fr); }
    .myport-holdings { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
    /* AU-CSS-07: Additional 1024px rules for components that only had 768px */
    .amenity-score-row { grid-template-columns: 110px 1fr 50px; }
    .hdb-town-grid { grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); }
}

/* ====== Small Tablets / Large Phones (481px–767px) ====== */
@media (min-width: 481px) and (max-width: 767px) {
    .kpi-grid { grid-template-columns: repeat(2, 1fr); }
    .kpi-row { grid-template-columns: repeat(2, 1fr); }
    .blog-grid { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
    .hdb-town-grid { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); }
    .calc-results { grid-template-columns: repeat(2, 1fr); }
    .myport-fav-grid { grid-template-columns: 1fr; }
    .reports-grid { grid-template-columns: 1fr; }
    .district-hub-grid { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
}
/* ============================================
   IL-24: District Hub Page
   ============================================ */
.district-hub { max-width: 1100px; margin: 0 auto; }
.district-hub-header { text-align: center; margin-bottom: 2rem; }
.district-hub-header h1 { font-size: 1.6rem; margin-bottom: 0.5rem; color: var(--text-primary); }
.district-hub-header p { color: var(--text-secondary); font-size: 0.9rem; max-width: 600px; margin: 0 auto; }
.district-segment { margin-bottom: 2rem; }
.district-segment h2 { font-size: 1.1rem; margin-bottom: 1rem; display: flex; align-items: center; gap: 8px; }
.segment-badge { display: inline-block; padding: 2px 10px; border-radius: 4px; font-size: 0.7rem; font-weight: 700; color: var(--text-inverse); }
.segment-ccr { background: #E63946; }
.segment-rcr { background: #457B9D; }
.segment-ocr { background: #2A9D8F; }
.district-hub-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 12px; }
.district-card { display: flex; gap: 12px; padding: 14px; background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-sm); text-decoration: none; color: var(--text-primary); transition: border-color 0.15s, box-shadow 0.15s; }
.district-card:hover { border-color: var(--primary); box-shadow: var(--shadow-md); }
.district-card-empty { opacity: 0.5; cursor: default; }
.district-card-number { font-size: 1.4rem; font-weight: 700; color: var(--primary); min-width: 44px; text-align: center; line-height: 1.2; }
.district-card-body h3 { font-size: 0.85rem; margin-bottom: 4px; }
.district-card-body p { font-size: 0.78rem; color: var(--text-secondary); line-height: 1.4; }
/* ============================================
   IL-26: Market Reports Hub Page
   ============================================ */
.reports-hub { max-width: 1100px; margin: 0 auto; }
.reports-hub-header { text-align: center; margin-bottom: 2rem; }
.reports-hub-header h1 { font-size: 1.6rem; margin-bottom: 0.5rem; color: var(--text-primary); }
.reports-hub-header p { color: var(--text-secondary); font-size: 0.9rem; max-width: 600px; margin: 0 auto; }
.reports-year-section { margin-bottom: 1.5rem; }
.reports-year-heading { font-size: 1.1rem; cursor: pointer; user-select: none; display: flex; align-items: center; gap: 8px; padding: 8px 0; border-bottom: 1px solid var(--border); margin-bottom: 12px; }
.reports-count { font-size: 0.8rem; color: var(--text-secondary); font-weight: 400; }
.reports-chevron { font-size: 0.8rem; margin-left: auto; transition: transform 0.2s; }
.reports-collapsed .reports-chevron { transform: rotate(-90deg); }
.reports-collapsed .reports-grid { display: none; }
.reports-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 12px; }
.report-card { display: block; padding: 16px; background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-sm); text-decoration: none; color: var(--text-primary); transition: border-color 0.15s, box-shadow 0.15s; }
.report-card:hover { border-color: var(--primary); box-shadow: var(--shadow-md); }
.report-card-type { font-size: 0.7rem; font-weight: 600; color: var(--secondary); text-transform: uppercase; letter-spacing: 0.3px; margin-bottom: 6px; }
.report-card h3 { font-size: 0.88rem; margin-bottom: 6px; line-height: 1.3; }
.report-card-meta { display: flex; gap: 12px; font-size: 0.72rem; color: var(--text-secondary); margin-bottom: 8px; }
.report-card p { font-size: 0.78rem; color: var(--text-secondary); line-height: 1.4; }

/* ═══════════════════════════════════════════════════════════════
   MOBILE RESPONSIVE OVERRIDES (consolidated)
   ═══════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
    .range-input {
        width: 60px;
    }
    .table-scroll-wrapper td, .table-scroll-wrapper th { min-height: 44px; padding: 0.75rem 0.5rem; }
    .calc-related-grid { grid-template-columns: 1fr; }
    .myport-recent-table { font-size: 0.70rem; }
    .myport-recent-table th, .myport-recent-table td { padding: 4px 6px; }
    .filter-btn, .blog-chip, .blog-tag-chip, .blog-page-btn,
    .empty-state-action, .calc-submit-btn, .blog-search-btn { min-height: 44px; min-width: 44px; }
    .ad-sidebar { display: none; }
    .ad-leaderboard { max-width: 320px; height: 50px; }
    .ad-leaderboard .adsbygoogle { width: 320px !important; height: 50px !important; }
    .ad-footer { max-width: 320px; min-height: 50px; }
    .site-footer { padding: 1.5rem 1rem 5rem; }
    .cookie-banner { padding: 0.75rem 1rem 5rem; }
    .toast-container { left: 1rem; right: 1rem; bottom: 5rem; }
    .toast { min-width: auto; max-width: none; }
    .heatmap-controls {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }
    .step-controls {
        flex-direction: column;
        gap: 8px;
        align-items: flex-start;
    }
    .reno-category-grid {
        grid-template-columns: 1fr;
    }
    .invest-field-grid {
        grid-template-columns: 1fr;
    }
    .invest-summary-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .reno-property-input {
        flex-direction: column;
        align-items: flex-start;
    }
    .reno-property-input input {
        max-width: 100%;
        width: 100%;
    }
    .guides-table td:nth-child(3), .guides-table th:nth-child(3) { display: none; }
    .guide-hub-grid { grid-template-columns: 1fr; }
    .guide-hub-grid--compact { grid-template-columns: repeat(2, 1fr); }
    .ac-stats-grid { grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 6px; }
    .ac-stat-card { padding: 8px 10px; }
    .ac-stat-val { font-size: 1rem; }
    .ac-toolbar { flex-direction: column; align-items: stretch; }
    .ac-filter-row { flex-direction: column; }
    .ac-table { font-size: 0.72rem; }
    .ac-table th, .ac-table td { padding: 6px 6px; }
    .share-btn {
        width: 28px;
        height: 28px;
    }
    .share-btn svg {
        width: 14px;
        height: 14px;
    }
    .lead-banner-teaser {
        flex-direction: column;
        align-items: flex-start;
    }
    .lead-banner-actions {
        width: 100%;
        justify-content: flex-end;
    }
    .lead-popup-overlay { padding: 16px; }
    .lead-popup-card { padding: 24px 20px 20px; border-radius: var(--radius-lg); }
    .lead-popup-icon { width: 48px; height: 48px; border-radius: var(--radius); }
    .lead-popup-icon svg { width: 26px; height: 26px; }
    .lead-popup-title { font-size: 1rem; }
    .lead-capture-sticky { padding: 10px 16px; }
    .lead-sticky-teaser { flex-wrap: wrap; }
    .lead-sticky-text { white-space: normal; font-size: 0.84rem; }
    .advisor-field-row { grid-template-columns: 1fr; }
    .advisor-range-row { grid-template-columns: 1fr; }
    .advisor-range-sep { display: none; }
    .advisor-progress-step .step-label { display: none; }
    .advisor-progress-line { min-width: 16px; }
    .advisor-match-grid { grid-template-columns: 1fr; }
    .advisor-numbers-grid { grid-template-columns: 1fr 1fr; }
    .admin-report-gen { flex-direction: column; }
    .eval-result-grid { grid-template-columns: 1fr; }
    .map-container { height: 400px; }
    .map-controls { flex-direction: column; gap: 10px; }
    .map-layer-toggles { flex-direction: column; gap: 8px; }
    .map-benchmarks { flex-direction: column; gap: 6px; }
    .kb-detail-header { flex-direction: column; gap: 8px; }
    .kb-faq-question { padding: 14px 16px; font-size: 0.88rem; }
    .kb-faq-answer { padding: 0 16px 14px; }
    .calc-hub-grid { grid-template-columns: repeat(2, 1fr); }
    .calc-hub-header h1 { font-size: 1.35rem; }
    .about-source-grid { grid-template-columns: repeat(2, 1fr); }
    .about-coverage-grid { grid-template-columns: repeat(2, 1fr); }
    .about-hero h1 { font-size: 1.35rem; }
    .loan-results-table { display: none; }
    .sora-rates-grid { gap: 16px; }
    .sora-rate-value { font-size: 1.3rem; }
    .sora-source { margin-left: 0; margin-top: 12px; text-align: left; }

    /* ---- iOS zoom prevention + touch targets ---- */
    input[type="number"],
    input[type="text"],
    input[type="email"],
    input[type="tel"],
    input[type="url"],
    input[type="date"],
    textarea,
    select {
        font-size: 16px !important;
        min-height: 44px;
    }

    /* ---- Filter bar: vertical stack on mobile (UX-05) ---- */
    .filter-bar {
        flex-direction: column;
        align-items: stretch;
        gap: 8px;
        padding: 10px 12px;
    }
    .filter-group {
        flex: 1 1 100%;
        min-width: 0;
        flex-direction: column;
        align-items: flex-start;
        gap: 4px;
    }
    .filter-group > label,
    .filter-group > span {
        font-size: 0.75rem;
    }
    .filter-group select {
        width: 100%;
    }
    .quick-filters {
        flex-wrap: wrap;
        width: 100%;
    }
    .filter-btn {
        padding: 6px 10px;
        min-height: 36px;
        flex: 1;
    }
    .checkbox-group {
        gap: 4px;
    }
    .checkbox-label {
        font-size: 0.72rem;
    }
    .checkbox-label input[type="checkbox"] {
        width: 18px;
        height: 18px;
        min-height: unset;
    }
    .reset-btn {
        min-height: 36px;
    }

    /* ---- Property info card stacking ---- */
    .property-info-grid {
        grid-template-columns: 1fr;
    }
    .property-info-left {
        border-right: none;
        border-bottom: 1px solid var(--border-light);
    }
    .property-info-map {
        min-height: 200px;
    }
    .property-info-details {
        grid-template-columns: repeat(2, 1fr);
    }

    /* ---- Calculator inputs: stack vertically ---- */
    .calc-inputs {
        gap: 10px;
    }
    .calc-input-row,
    .calc-inputs-grid,
    .calc-mortgage-inputs {
        display: flex !important;
        flex-direction: column !important;
        gap: 10px !important;
    }
    .calc-input-row > *,
    .calc-inputs-grid > *,
    .calc-mortgage-inputs > * {
        width: 100% !important;
        max-width: 100% !important;
    }

    /* ---- Calculator results: 2-col on mobile ---- */
    .calc-results {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 8px;
    }

    /* ---- TAC results ---- */
    .tac-results-breakdown {
        padding: 10px 12px;
    }

    /* ---- Portfolio holdings ---- */
    .myport-holdings {
        grid-template-columns: 1fr;
    }
    .myport-summary {
        grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    }
    .myport-fav-grid {
        grid-template-columns: 1fr;
    }
    .myport-comparison-grid {
        grid-template-columns: 1fr 1fr;
    }

    /* ---- Tabulator mobile improvements ---- */
    .tabulator {
        font-size: 0.78rem;
    }
    .tabulator .tabulator-header .tabulator-col {
        padding: 6px 8px;
    }
    .tabulator .tabulator-row .tabulator-cell {
        padding: 6px 8px;
    }
    .tabulator .tabulator-header .tabulator-col .tabulator-col-content .tabulator-col-title {
        font-size: 0.72rem;
    }

    /* ---- Login modal ---- */
    .login-modal {
        width: 92vw;
        max-width: 380px;
        max-height: 90vh;
        overflow-y: auto;
    }

    /* ---- Breadcrumb truncation ---- */
    .breadcrumb-nav {
        font-size: 0.72rem;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .header-icon-btn {
        width: 32px;
        height: 32px;
    }

    /* ---- Chart export button ---- */
    .chart-export-btn {
        min-width: 32px;
        min-height: 32px;
    }

    /* ---- Eval quick actions ---- */
    .eval-quick-actions {
        flex-direction: column;
    }
    .eval-quick-actions button {
        width: 100%;
    }
    .analytics-two-col { grid-template-columns: 1fr; }
    .header-search-bar {
        min-width: unset;
        padding: 6px 10px;
    }
    .header-search-text,
    .header-search-kbd {
        display: none;
    }
    .sbs-comparison-grid[data-cols="2"],
    .sbs-comparison-grid[data-cols="3"],
    .sbs-comparison-grid[data-cols="4"] {
        grid-template-columns: 1fr;
    }
    .header-feedback-btn {
        padding: 4px 6px;
    }
    .header-feedback-btn svg {
        width: 16px;
        height: 16px;
    }
}

@media (max-width: 480px) {
    .myport-returns-row { flex-direction: column; gap: 8px; padding: 8px 12px; }
    .myport-tabs { gap: 2px; padding: 2px; overflow-x: auto; }
    .myport-tab { padding: 8px 10px; font-size: 0.75rem; letter-spacing: 0.2px; min-width: 0; white-space: nowrap; }
    .myport-field-grid--3 { grid-template-columns: 1fr; }
    .myport-summary { grid-template-columns: 1fr !important; }
    .myport-summary-value { font-size: 1.2rem; }
    .condo-select-prompt { margin: 40px auto; padding: 1.5rem 1rem; }
    .condo-select-prompt-icon { width: 64px; height: 64px; }
    .condo-select-prompt-icon svg { width: 36px; height: 36px; }
    .condo-select-prompt h2 { font-size: 1.1rem; }
    .condo-select-prompt p { font-size: 0.82rem; }
    .condo-select-prompt-search { flex-direction: column; }
    .guide-hub-grid--compact { grid-template-columns: 1fr; }
    .district-card-grid { grid-template-columns: 1fr; }
    .district-kpi-row { flex-wrap: wrap; }
    .district-kpi { min-width: 45%; }
    .lead-capture-banner { padding: 12px 14px; }
    .lead-popup-overlay { padding: 10px; }
    .lead-popup-card { padding: 20px 16px 16px; }
    .lead-popup-header { margin-bottom: 14px; }
    .lead-capture-sticky { padding: 8px 12px; }
    .calc-hub-grid { grid-template-columns: 1fr; }
    .calc-hub { padding: 0 10px; }
    .calc-hub-section { margin-bottom: 28px; }
    .about-source-grid { grid-template-columns: 1fr; }
    .about-method-grid { grid-template-columns: 1fr; }
    .about-coverage-grid { grid-template-columns: repeat(2, 1fr); }
    .about-page { padding: 0 10px; }
    .analytics-funnel-label { width: 100px; font-size: 0.7rem; }
    .analytics-funnel-count { width: 60px; font-size: 0.7rem; }
    .district-hub-grid { grid-template-columns: 1fr; }
    .district-hub-header h1 { font-size: 1.3rem; }
    .reports-grid { grid-template-columns: 1fr; }
    .reports-hub-header h1 { font-size: 1.3rem; }
}
} /* end @layer components */

@layer utilities {
/* ============================================
   I2. REUSABLE LAYOUT UTILITY CLASSES
   ============================================ */
/* Responsive-friendly grid helpers (used by JS-rendered calc outputs) */
.grid-3-col { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.grid-4-col { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }

@media (max-width: 480px) {
    .grid-3-col, .grid-4-col { grid-template-columns: 1fr; }
}
/* UX-41: Glassmorphism utility */
.glass {
    background: rgba(var(--bg-card-rgb), 0.75);
    backdrop-filter: blur(12px);
       border: 1px solid rgba(255,255,255,0.08);
    box-shadow: 0 4px 16px rgba(0,0,0,0.12);
}
} /* end @layer utilities */

@layer components {
/* ============================================
   I3. TOUCH-FRIENDLY INPUT SIZING (GLOBAL)
   ============================================ */
/* Base touch-friendly sizing for all form elements.
   The existing 768px rule already handles mobile font-size: 16px
   and min-height: 44px. This ensures desktop inputs also have
   a reasonable minimum touch target for hybrid/touch devices. */
input[type="text"],
input[type="number"],
input[type="email"],
input[type="tel"],
input[type="url"],
input[type="password"],
input[type="date"],
input[type="month"],
select,
textarea {
    min-height: 38px;
}


/* ============================================
   I4. CALCULATOR-SPECIFIC RESPONSIVE FIXES
   ============================================ */
/* Override any inline grid styles on calc result containers at mobile */

/* ============================================
   I5. CHART CONTAINER RESPONSIVE BEHAVIOR
   ============================================ */
/* S5.8: Merged responsive overrides into base .chart-body / .chart-row (above, lines ~1003/1062) */
/* ApexCharts auto-resize: ensure SVG doesn't overflow */
.chart-body .apexcharts-canvas {
    max-width: 100%;
}
.chart-body svg {
    max-width: 100%;
    height: auto;
}

@media (max-width: 320px) {
    .chart-body { min-height: 180px; }
    .chart-body-tall { min-height: 220px; }
}

/* ═══════════════════════════════════════════════════════════════
   MOBILE RESPONSIVE OVERRIDES (consolidated)
   ═══════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
    /* Ensure calculator fields also get proper touch targets */
    .calc-field input,
    .calc-field select {
        min-height: 44px;
        font-size: 16px;
    }

    button,
    .btn,
    .calc-btn,
    .calc-submit-btn,
    .filter-btn,
    .reset-btn {
        min-height: 44px;
    }

    /* Ensure help icons are touch-friendly */
    .help-icon {
        min-width: 28px;
        min-height: 28px;
    }
    /* Responsive grid column overrides */
    .grid-3-col,
    .grid-4-col {
        grid-template-columns: repeat(2, 1fr) !important;
    }

    /* Make calculator preset bar wrap properly */
    .calc-preset-bar {
        flex-wrap: wrap;
    }
    .calc-preset-select {
        min-width: 100%;
    }

    /* Mortgage amortization table scroll */
    #mortAmortTable {
        overflow-x: auto;
    
    }
    #mortAmortTable table {
        min-width: 500px;
    }

    /* Ensure calc-grid children don't overflow */
    .calc-grid {
        overflow: hidden;
    }

    /* Reduce chart min-heights + padding on mobile for better viewport fit */
    .chart-body { min-height: 250px; padding: 8px 10px 10px; }
    .chart-body-tall { min-height: 300px; }
    .chart-header { padding: 10px 12px 0; }
}

@media (max-width: 480px) {
    /* Single-column calc results on very small screens */
    .grid-2-col,
    .grid-3-col,
    .grid-4-col {
        grid-template-columns: 1fr !important;
    }

    /* Calculator body reduced padding */
    .calculator-body {
        padding: 12px;
    }

    /* Calc buttons full width */
    .calc-btn {
        width: 100%;
    }
    .chart-body { min-height: 200px; }
    .chart-body-tall { min-height: 250px; }
}
} /* end @layer components */

@layer components {
/* ============================================
   UF-46: Floor Premium Analysis
   ============================================ */
.floor-premium-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 16px 20px;
    margin-bottom: 16px;
}
.floor-premium-header {
    font-size: 0.95rem;
    font-weight: 600;
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    gap: 8px;
}
.floor-premium-header h4 {
    margin: 0;
    font-size: 0.95rem;
}
.floor-band-row {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 6px;
    font-size: 0.8rem;
}
.floor-band-label {
    min-width: 100px;
    font-weight: 500;
    color: var(--text-secondary);
}
.floor-band-bar-wrap {
    flex: 1;
    height: 22px;
    background: var(--border-light);
    border-radius: 4px;
    overflow: hidden;
    position: relative;
}
.floor-band-bar {
    height: 100%;
    border-radius: 4px;
    background: var(--primary);
    transition: width 0.3s ease;
}
.floor-band-value {
    min-width: 65px;
    text-align: right;
    font-size: 0.8rem;
    font-weight: 600;
}
.floor-band-count {
    min-width: 40px;
    text-align: right;
    font-size: 0.75rem;
    color: var(--text-secondary);
}

/* ============================================
   UF-59: ShiokNest Unified Score (Radar Chart)
   ============================================ */
.shioknest-score-row {
    display: flex;
    align-items: center;
    gap: 24px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 20px;
    margin-bottom: 16px;
}
.shioknest-score-badge {
    flex: 0 0 auto;
    min-width: 140px;
    text-align: center;
}
.shioknest-badge-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
}
.shioknest-badge-score {
    font-size: 2.8rem;
    font-weight: 800;
    line-height: 1.1;
}
.shioknest-badge-label {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text-secondary);
    margin-top: 2px;
}
.shioknest-radar-chart {
    flex: 1;
    min-width: 0;
}
@media (max-width: 768px) {
    .shioknest-score-row {
        flex-direction: column;
        text-align: center;
    }
    .shioknest-radar-chart {
        width: 100%;
    }
}

/* Wizard step indicator (used in calc-wizard via .calc-wizard-progress wrapper) */
.wizard-step {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.85rem;
    color: var(--text-secondary);
    font-weight: 500;
    opacity: 0.5;
    transition: opacity 0.2s;
}
.wizard-step.active {
    opacity: 1;
    color: var(--primary);
    font-weight: 600;
}
.wizard-step span:first-child {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--border);
    color: var(--text-secondary);
    font-weight: 700;
    font-size: 0.8rem;
}
.wizard-step.active span:first-child {
    background: var(--primary);
    color: var(--text-inverse);
}
.summary-positive { background: var(--success-bg); border-left: 4px solid var(--status-success); padding: 12px 16px; border-radius: var(--radius); }
.summary-negative { background: var(--danger-bg); border-left: 4px solid var(--status-danger); padding: 12px 16px; border-radius: var(--radius); }
[data-theme="dark"] .summary-positive { background: #052e16; }
[data-theme="dark"] .summary-negative { background: #450a0a; }

/* ── Feedback Modal ── */
.feedback-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.5);
    z-index: var(--z-modal);
    display: flex;
    align-items: center;
    justify-content: center;
}
.feedback-modal {
    position: relative;
    background: var(--bg-card);
    border-radius: var(--radius-lg);
    width: 90%;
    max-width: 520px;
    box-shadow: 0 20px 60px rgba(0,0,0,0.2);
    overflow: hidden;
    max-height: 90vh;
    overflow-y: auto;
}
.feedback-modal-close {
    position: absolute;
    top: 8px;
    right: 12px;
    background: none;
    border: none;
    font-size: 1.5rem;
    color: var(--text-secondary);
    cursor: pointer;
    z-index: var(--z-base);
    line-height: 1;
    padding: 4px 8px;
}
.feedback-modal-close:hover { color: var(--text); }

/* ============================================
   UF-38: User Login/Register Modal + Dashboard
   ============================================ */
.user-auth-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.5);
    z-index: var(--z-overlay);
    display: flex;
    align-items: center;
    justify-content: center;
}
.user-auth-modal {
    position: relative;
    background: var(--bg-card);
    border-radius: var(--radius-lg);
    width: 90%;
    max-width: 400px;
    box-shadow: 0 20px 60px rgba(0,0,0,0.2);
    overflow: hidden;
}
.user-auth-tabs {
    display: flex;
    border-bottom: 1px solid var(--border);
}
.user-auth-tab-btn {
    flex: 1;
    padding: 12px;
    text-align: center;
    font-weight: 600;
    font-size: 0.9rem;
    cursor: pointer;
    background: none;
    border: none;
    color: var(--text-secondary);
    border-bottom: 2px solid transparent;
    transition: color 0.2s, border-bottom-color 0.2s;
}
.user-auth-tab-btn.active {
    color: var(--primary);
    border-bottom-color: var(--primary);
}
.user-auth-tab-content {
    padding: 24px;
    display: none;
}
.user-auth-tab-content.active {
    display: block;
}
.user-auth-tab-content input {
    width: 100%;
    padding: 10px 14px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    font-size: 0.9rem;
    margin-bottom: 12px;
    background: var(--bg-card);
    color: var(--text);
}
.user-auth-tab-content input:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(var(--primary-rgb, 59, 130, 246), 0.15);
}
.user-auth-tab-content .btn {
    width: 100%;
    margin-top: 4px;
}
.user-auth-close {
    position: absolute;
    top: 12px;
    right: 12px;
    background: none;
    border: none;
    font-size: 1.2rem;
    color: var(--text-secondary);
    cursor: pointer;
}
.user-auth-error {
    color: var(--danger);
    font-size: 0.8rem;
    margin-bottom: 8px;
}

/* Watchlist heart icon */
.watchlist-btn {
    background: none;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 6px 12px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.8rem;
    color: var(--text-secondary);
    transition: color 0.2s, border-color 0.2s;
}
.watchlist-btn:hover {
    border-color: var(--status-danger);
    color: var(--status-danger);
}
.watchlist-btn.active {
    color: var(--status-danger);
    border-color: var(--status-danger);
}
.watchlist-btn.active svg { fill: var(--status-danger); }

/* User dashboard */
.user-dashboard-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin-bottom: 24px;
}
.watchlist-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}
.watchlist-card {
    background: var(--bg);
    border: 1px solid var(--border-light);
    border-radius: var(--radius);
    padding: 10px;
    font-size: 0.8rem;
    cursor: pointer;
    transition: border-color 0.2s;
    text-decoration: none;
    color: inherit;
    display: block;
}
.watchlist-card:hover {
    border-color: var(--primary);
}
.watchlist-card-name {
    font-weight: 600;
    margin-bottom: 2px;
}
.watchlist-card-district {
    color: var(--text-secondary);
    font-size: 0.72rem;
}
.recent-view-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 6px 0;
    border-bottom: 1px solid var(--border-light);
    font-size: 0.8rem;
}
.recent-view-item a {
    color: var(--primary);
    text-decoration: none;
}
.recent-view-item a:hover { text-decoration: underline; }
.recent-view-count {
    color: var(--text-secondary);
    font-size: 0.72rem;
}

@media (max-width: 768px) {
    .score-breakdown { grid-template-columns: 1fr; }
    .user-dashboard-grid { grid-template-columns: 1fr; }
    .watchlist-grid { grid-template-columns: 1fr; }
}
} /* end @layer components — floor-premium, shioknest-score, wizard-progress, user-auth-modal */

/* Admin layer extracted to admin.css — loaded conditionally for admin users */

@layer components {
/* ═══════════════════════════════════════════════════════════════
   Article Shortcode Widget Components
   Auto-generated from ShortcodeParser handlers.
   ═══════════════════════════════════════════════════════════════ */

/* ── Content Components ─────────────────────────────────────── */

/* [blockquote] */
.sc-blockquote {
    border-left: 4px solid var(--accent);
    padding: 16px 20px;
    margin: 24px 0;
    background: var(--bg-card);
    border-radius: var(--radius);
    font-style: italic;
    color: var(--text-primary);
}
.sc-blockquote cite { display: block; font-style: normal; font-size: 0.85em; color: var(--text-secondary); }

/* [highlightbox] — variants built dynamically via HighlightboxHandler */
.sc-highlightbox {
    padding: 16px 20px;
    margin: 24px 0;
    border-radius: var(--radius);
    border-left: 4px solid;
    line-height: 1.6;
}
.sc-highlightbox-info    { border-color: var(--info, #3b82f6);    background: rgba(59,130,246,0.08); }
.sc-highlightbox-warning { border-color: var(--warning, #f59e0b); background: rgba(245,158,11,0.08); }
.sc-highlightbox-tip     { border-color: var(--success, #16a34a); background: rgba(22,163,74,0.08); }
.sc-highlightbox-note    { border-color: var(--text-secondary);   background: var(--bg-hover); }
.sc-highlightbox-success { border-color: var(--success, #16a34a); background: rgba(22,163,74,0.08); }

/* [footnote] */
.sc-footnote-ref { cursor: pointer; color: var(--accent); font-size: 0.75em; vertical-align: super; text-decoration: none; }
.sc-footnote-ref:hover { text-decoration: underline; }
.sc-footnote-content { background: var(--bg-hover); padding: 8px 12px; border-radius: var(--radius-sm); margin-top: 4px; font-size: 0.85em; color: var(--text-secondary); display: none; }

/* [caption] */
.sc-caption { text-align: center; font-size: 0.85em; color: var(--text-secondary); margin: 8px 0 24px; font-style: italic; }

/* ── Media Components ───────────────────────────────────────── */

/* [image] */
.sc-image { margin: 24px 0; }
.sc-image figure { margin: 0; }
.sc-image img { max-width: 100%; height: auto; border-radius: var(--radius); display: block; }
.sc-image figcaption { text-align: center; font-size: 0.85em; color: var(--text-secondary); margin-top: 8px; }
.sc-image.float-left { float: left; margin: 0 20px 12px 0; max-width: 40%; }
.sc-image.float-right { float: right; margin: 0 0 12px 20px; max-width: 40%; }

/* [gallery] — grid mode */
.sc-gallery { margin: 24px 0; }
.sc-gallery-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 8px; }
.sc-gallery-grid figure { margin: 0; }
.sc-gallery-grid img { width: 100%; height: 180px; object-fit: cover; border-radius: var(--radius-sm); cursor: pointer; transition: transform 0.15s; }
.sc-gallery-grid img:hover { transform: scale(1.03); }
.sc-gallery-grid figcaption { font-size: 0.8em; color: var(--text-secondary); text-align: center; padding: 4px 0; }

/* [gallery] — slideshow mode */
.sc-gallery-slideshow { position: relative; overflow: hidden; border-radius: var(--radius); }
.sc-gallery-slideshow img { width: 100%; display: none; border-radius: var(--radius); }
.sc-gallery-slideshow img.active { display: block; }
.sc-gallery-nav { position: absolute; top: 50%; transform: translateY(-50%); background: rgba(0,0,0,0.5);
    color: var(--text-inverse); border: 0; padding: 8px 12px; cursor: pointer; border-radius: var(--radius-sm); font-size: 18px; z-index: var(--z-base); }
.sc-gallery-nav:hover { background: rgba(0,0,0,0.7); }
.sc-gallery-nav.prev { left: 8px; }
.sc-gallery-nav.next { right: 8px; }
.sc-gallery-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%;
    background: var(--text-secondary); margin: 0 4px; cursor: pointer; transition: background 0.15s; }
.sc-gallery-dot.active { background: var(--accent); }

/* [video] */
.sc-video { margin: 24px 0; position: relative; border-radius: var(--radius); overflow: hidden; }
.sc-video video { width: 100%; display: block; }
.sc-video .sc-video-poster { position: relative; cursor: pointer; }
.sc-video .sc-video-poster img { width: 100%; display: block; }
.sc-video .sc-video-play { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%);
    width: 64px; height: 64px; background: rgba(0,0,0,0.6); border-radius: 50%; display: flex; align-items: center;
    justify-content: center; color: var(--text-inverse); font-size: 24px; transition: background 0.15s; }
.sc-video .sc-video-play:hover { background: rgba(0,0,0,0.8); }

/* [gif] */
.sc-gif { margin: 24px 0; text-align: center; }
.sc-gif img { max-width: 100%; border-radius: var(--radius); }
.sc-gif .sc-gif-caption { font-size: 0.85em; color: var(--text-secondary); margin-top: 4px; }

/* ── Data Components ────────────────────────────────────────── */

/* [chart] */
.sc-chart { margin: 24px 0; min-height: 300px; background: var(--bg-card); border-radius: var(--radius);
    padding: 16px; border: 1px solid var(--border); }
.sc-chart .chart-fallback { font-size: 0.9em; color: var(--text-secondary); }
.sc-chart .chart-fallback table { width: 100%; border-collapse: collapse; }
.sc-chart .chart-fallback th { background: var(--bg-hover); padding: 8px; text-align: left; font-weight: 600; border-bottom: 2px solid var(--border); }
.sc-chart .chart-fallback td { padding: 6px 8px; border-bottom: 1px solid var(--border); }
.sc-chart .apexcharts-canvas { margin: 0 auto; }

/* [table] */
.sc-table { margin: 24px 0; overflow-x: auto; }
.sc-table table { width: 100%; border-collapse: collapse; }
.sc-table th { background: var(--bg-hover); cursor: pointer; user-select: none;
    padding: 10px 12px; text-align: left; font-weight: 600; border-bottom: 2px solid var(--border); white-space: nowrap; }
.sc-table th:hover { background: var(--bg-card); }
.sc-table th .sort-arrow { margin-left: 4px; opacity: 0.4; font-size: 0.85em; }
.sc-table th.sorted .sort-arrow { opacity: 1; }
.sc-table td { padding: 8px 12px; border-bottom: 1px solid var(--border); }
.sc-table tr:hover { background: var(--bg-hover); }
.sc-table caption { caption-side: bottom; text-align: left; font-size: 0.85em; color: var(--text-secondary); padding: 8px 0; }

/* [map] */
.sc-map { margin: 24px 0; border-radius: var(--radius); overflow: hidden; border: 1px solid var(--border); }
.sc-map-container { height: 350px; background: var(--bg-card); }
.sc-map-fallback { padding: 16px; }
.sc-map-fallback ul { list-style: none; padding: 0; margin: 0; }
.sc-map-fallback li { padding: 6px 0; border-bottom: 1px solid var(--border); font-size: 0.9em; }
.sc-map-fallback li:last-child { border-bottom: 0; }

/* ── Interactive Components ─────────────────────────────────── */

/* [quiz] */
.sc-quiz { margin: 24px 0; background: var(--bg-card); border-radius: var(--radius); padding: 20px;
    border: 1px solid var(--border); }
.sc-quiz-title { font-weight: 700; font-size: 1.1em; margin-bottom: 16px; }
.sc-quiz-progress { display: flex; gap: 4px; margin-bottom: 16px; }
.sc-quiz-progress-dot { width: 24px; height: 4px; border-radius: 2px; background: var(--border); flex-shrink: 0; }
.sc-quiz-progress-dot.completed { background: var(--success, #16a34a); }
.sc-quiz-progress-dot.current { background: var(--accent); }
.sc-quiz-question { font-weight: 600; margin-bottom: 12px; line-height: 1.5; }
.sc-quiz-options { display: flex; flex-direction: column; gap: 8px; }
.sc-quiz-option { padding: 12px 16px; border: 2px solid var(--border); border-radius: var(--radius-sm);
    cursor: pointer; transition: border-color 0.15s, background-color 0.15s; user-select: none; }
.sc-quiz-option:hover { border-color: var(--accent); background: var(--bg-hover); }
.sc-quiz-option.correct { border-color: var(--success, #16a34a); background: rgba(22,163,74,0.08); cursor: default; }
.sc-quiz-option.incorrect { border-color: var(--danger, #dc3545); background: rgba(220,53,69,0.08); cursor: default; }
.sc-quiz-explanation { margin-top: 12px; padding: 12px; background: var(--bg-hover); border-radius: var(--radius-sm); font-size: 0.9em; line-height: 1.5; }
.sc-quiz-score { text-align: center; padding: 24px; }
.sc-quiz-score .score-value { font-size: 2em; font-weight: 700; color: var(--accent); margin: 8px 0; }

/* [poll] */
.sc-poll { margin: 24px 0; background: var(--bg-card); border-radius: var(--radius); padding: 20px;
    border: 1px solid var(--border); }
.sc-poll-question { font-weight: 600; margin-bottom: 12px; }
.sc-poll-options label { display: block; padding: 10px 12px; margin: 4px 0; border: 1px solid var(--border);
    border-radius: var(--radius-sm); cursor: pointer; transition: background 0.15s; }
.sc-poll-options label:hover { background: var(--bg-hover); }
.sc-poll-options input[type="radio"] { margin-right: 8px; }
.sc-poll-vote-btn { margin-top: 12px; background: var(--accent); color: var(--text-inverse); border: 0; padding: 10px 24px;
    border-radius: var(--radius-sm); cursor: pointer; font-weight: 600; font-size: 0.95em; }
.sc-poll-vote-btn:hover { opacity: 0.9; }

/* [calculator] */
.sc-calculator { margin: 24px 0; background: var(--bg-card); border-radius: var(--radius); padding: 20px;
    border: 2px solid var(--accent); }
.sc-calculator-header { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; }
.sc-calculator-icon { font-size: 1.4em; }
.sc-calculator-title { font-weight: 700; }
.sc-calculator-link { display: block; text-align: center; margin-top: 12px; color: var(--accent); font-weight: 600;
    text-decoration: none; padding: 10px; border: 1px solid var(--accent); border-radius: var(--radius-sm); transition: color 0.15s, background-color 0.15s; }
.sc-calculator-link:hover { background: var(--accent); color: var(--text-inverse); }

/* [form] */
.sc-form { margin: 24px 0; background: var(--bg-card); border-radius: var(--radius); padding: 20px;
    border: 1px solid var(--border); }
.sc-form label { display: block; font-weight: 600; font-size: 0.9em; margin-bottom: 4px; color: var(--text-primary); }
.sc-form input, .sc-form textarea { width: 100%; padding: 10px 12px; border: 1px solid var(--border);
    border-radius: var(--radius-sm); margin: 0 0 12px; font-size: 1rem; background: var(--bg-primary);
    color: var(--text-primary); box-sizing: border-box; }
.sc-form input:focus, .sc-form textarea:focus { border-color: var(--accent); outline: none; box-shadow: var(--focus-ring-light); }
.sc-form textarea { resize: vertical; min-height: 80px; }
.sc-form button[type="submit"] { background: var(--accent); color: var(--text-inverse); border: 0; padding: 10px 24px;
    border-radius: var(--radius-sm); cursor: pointer; font-weight: 600; font-size: 0.95em; }
.sc-form button[type="submit"]:hover { opacity: 0.9; }
.sc-form button[type="submit"]:disabled { opacity: 0.6; cursor: not-allowed; }

/* [reactions] */
.sc-reactions { margin: 24px 0; display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; }
.sc-reaction-btn { padding: 8px 16px; border: 1px solid var(--border); border-radius: 20px; cursor: pointer;
    background: var(--bg-card); display: flex; align-items: center; gap: 6px; transition: border-color 0.15s, background-color 0.15s; font-size: 0.9em; }
.sc-reaction-btn:hover { border-color: var(--accent); background: var(--bg-hover); }
.sc-reaction-btn.voted { border-color: var(--accent); background: rgba(26,107,196,0.1); }
.sc-reaction-btn .reaction-icon { font-size: 1.2em; }
.sc-reaction-btn .reaction-count { font-size: 0.85em; color: var(--text-secondary); min-width: 12px; text-align: center; }

/* ── Navigation Components ──────────────────────────────────── */

/* [related-articles] */
.sc-related { margin: 24px 0; }
.sc-related-title { font-weight: 700; margin-bottom: 12px; font-size: 1.1em; }
.sc-related-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px; }
.sc-related-card { background: var(--bg-card); border-radius: var(--radius); padding: 16px;
    border: 1px solid var(--border); transition: box-shadow 0.15s; text-decoration: none; color: inherit; display: block; }
.sc-related-card:hover { box-shadow: var(--shadow); }
.sc-related-card .card-type { font-size: 0.75em; color: var(--accent); text-transform: uppercase; font-weight: 600; letter-spacing: 0.5px; }
.sc-related-card .card-title { font-weight: 600; margin: 4px 0; line-height: 1.4; }
.sc-related-card .card-date { font-size: 0.8em; color: var(--text-secondary); }
.sc-related-list { list-style: none; padding: 0; margin: 0; }
.sc-related-list li { padding: 8px 0; border-bottom: 1px solid var(--border); }
.sc-related-list li:last-child { border-bottom: 0; }
.sc-related-list a { color: var(--text-primary); text-decoration: none; }
.sc-related-list a:hover { color: var(--accent); }

/* [cta] — use `a.sc-cta` selectors so color rules beat lower-specificity
   anchor styles inside .blog-detail-content (which would otherwise paint the
   label in link-blue over the tinted background, making it unreadable). */
a.sc-cta { margin: 24px 0; padding: 18px 22px; border-radius: var(--radius);
    display: flex; align-items: center; gap: 14px; text-decoration: none;
    transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
    cursor: pointer; border: 1px solid transparent; }
a.sc-cta:hover { transform: translateY(-1px); box-shadow: var(--shadow); text-decoration: none; }
a.sc-cta-calculator {
    background: var(--bg-card);
    border-color: var(--accent);
    color: var(--text-primary);
    border-left: 4px solid var(--accent);
}
a.sc-cta-calculator:hover { background: var(--bg-hover); }
a.sc-cta-condo { background: var(--bg-card); border: 2px solid var(--accent); color: var(--text-primary); }
a.sc-cta-condo:hover { background: var(--bg-hover); }
a.sc-cta-dashboard {
    background: linear-gradient(135deg, var(--primary), var(--secondary));
    color: var(--text-inverse);
    border-color: transparent;
}
a.sc-cta-dashboard:hover { filter: brightness(1.05); }
a.sc-cta-comparison { background: var(--bg-hover); border: 1px solid var(--border); color: var(--text-primary); }
a.sc-cta-comparison:hover { box-shadow: var(--shadow); }
a.sc-cta .sc-cta-icon { font-size: 1.6em; flex-shrink: 0; line-height: 1; }
a.sc-cta .sc-cta-text { font-weight: 600; font-size: 1em; color: inherit; }
a.sc-cta .sc-cta-arrow { margin-left: auto; font-size: 1.2em; flex-shrink: 0; color: var(--accent); }
a.sc-cta-dashboard .sc-cta-arrow { color: var(--text-inverse); }

/* [freshness-badge] */
.sc-freshness { display: inline-flex; align-items: center; gap: 6px; padding: 4px 12px;
    background: var(--bg-hover); border-radius: 12px; font-size: 0.8em; color: var(--text-secondary); margin: 8px 0; }
.sc-freshness .freshness-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--success, #16a34a); flex-shrink: 0; }
.sc-freshness.stale .freshness-dot { background: var(--warning, #f59e0b); }

/* ── S46 Wave 2b: TLDR / Byline / Intent / Data-context / Confidence / Next-step / Verdict ── */
.sc-tldr { margin: 18px 0 24px; padding: 16px 20px; border-left: 4px solid var(--primary, #2563eb);
    background: linear-gradient(135deg, rgba(37,99,235,0.06), rgba(37,99,235,0.02));
    border-radius: 4px; }
.sc-tldr-label { font-size: 0.7em; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase;
    color: var(--primary, #2563eb); margin-bottom: 6px; }
.sc-tldr-body { color: var(--text-primary); font-size: 1.05em; line-height: 1.55; }
.sc-tldr-body p:first-child { margin-top: 0; }
.sc-tldr-body p:last-child { margin-bottom: 0; }

.sc-byline { display: flex; flex-wrap: wrap; gap: 6px 18px; align-items: center;
    margin: 6px 0 18px; padding: 8px 0; border-bottom: 1px solid var(--border, rgba(255,255,255,0.08));
    font-size: 0.85em; color: var(--text-secondary); }
.sc-byline-author strong, .sc-byline-reviewer strong { color: var(--text-primary); font-weight: 600; }
.sc-byline-author::before { content: ''; }
.sc-byline-reviewer::before, .sc-byline-sources::before, .sc-byline-updated::before {
    content: '·'; margin-right: 6px; opacity: 0.45; }
.sc-byline-updated time { color: var(--text-primary); }

.sc-intent-tag { display: flex; flex-wrap: wrap; gap: 6px; align-items: center;
    margin: 4px 0 14px; font-size: 0.85em; }
.sc-intent-tag-label { color: var(--text-secondary); font-weight: 500; margin-right: 2px; }
.sc-intent-tag-chip { display: inline-block; padding: 3px 10px; border-radius: 999px;
    background: var(--bg-hover); color: var(--text-primary); font-weight: 500; border: 1px solid var(--border, rgba(255,255,255,0.08)); }

.sc-data-context { margin: 0 0 18px; padding: 6px 10px; background: var(--bg-hover);
    border-radius: 6px; font-size: 0.78em; color: var(--text-secondary); line-height: 1.6; }
.sc-data-context strong { color: var(--text-primary); }
.sc-data-context time { font-weight: 500; }

.sc-confidence { display: inline-flex; flex-direction: column; align-items: flex-start; vertical-align: baseline; }
.sc-confidence-value { line-height: 1; }
.sc-confidence-badge { display: inline-block; margin-top: 1px; padding: 1px 6px; border-radius: 4px;
    font-size: 0.65em; font-weight: 600; letter-spacing: 0.02em; background: rgba(22,163,74,0.12);
    color: var(--success, #16a34a); }
.sc-confidence-sparse .sc-confidence-badge { background: rgba(245,158,11,0.12); color: var(--warning, #f59e0b); }

.sc-next-step { margin: 28px 0 18px; padding: 18px 20px; border-radius: 8px;
    background: linear-gradient(135deg, rgba(37,99,235,0.08), rgba(37,99,235,0.02));
    border: 1px solid rgba(37,99,235,0.18); }
.sc-next-step-title { font-size: 1em; font-weight: 700; color: var(--text-primary); margin-bottom: 12px; }
.sc-next-step-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.sc-next-step-action { display: inline-flex; align-items: center; padding: 9px 16px;
    background: var(--primary, #2563eb); color: #fff !important; border-radius: 6px;
    font-weight: 600; font-size: 0.9em; text-decoration: none; transition: filter 0.15s; }
.sc-next-step-action:hover { filter: brightness(1.1); }
.sc-next-step-action + .sc-next-step-action { background: var(--bg-hover); color: var(--text-primary) !important;
    border: 1px solid var(--border, rgba(255,255,255,0.08)); }

.sc-verdict { margin: 16px 0 24px; padding: 16px 20px; border-left: 4px solid var(--success, #16a34a);
    background: linear-gradient(135deg, rgba(22,163,74,0.08), rgba(22,163,74,0.02));
    border-radius: 4px; }
.sc-verdict-label { font-size: 0.7em; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase;
    color: var(--success, #16a34a); margin-bottom: 4px; }
.sc-verdict-winner { font-size: 1.1em; font-weight: 600; color: var(--text-primary); margin-bottom: 8px; }
.sc-verdict-body { color: var(--text-primary); line-height: 1.55; }
.sc-verdict-body p:first-child { margin-top: 0; }
.sc-verdict-body p:last-child { margin-bottom: 0; }

@media (max-width: 600px) {
    .sc-byline { gap: 4px 10px; font-size: 0.78em; }
    .sc-byline-reviewer::before, .sc-byline-sources::before, .sc-byline-updated::before { display: none; }
    .sc-next-step-actions { flex-direction: column; align-items: stretch; }
    .sc-next-step-action { justify-content: center; }
}

/* ── S46 Wave 3: Sticky scrollbar-toc + scroll-progress + decision-tree + reader-filter ── */
.sc-scrollbar-toc { position: sticky; top: 80px; max-height: calc(100vh - 100px); overflow-y: auto;
    padding: 14px 16px; margin: 0 0 16px; border-radius: 8px;
    background: var(--bg-card, #1f2937); border: 1px solid var(--border, rgba(255,255,255,0.08));
    font-size: 0.88em; }
.sc-scrollbar-toc-progress { position: absolute; top: 0; left: 0; height: 3px; background: var(--primary, #2563eb);
    width: 0; transition: width 0.1s linear; border-radius: 8px 0 0 0; }
.sc-scrollbar-toc-list { display: flex; flex-direction: column; gap: 4px; padding-top: 6px; }
.sc-toc-link { display: block; padding: 4px 8px; color: var(--text-secondary); text-decoration: none;
    border-left: 2px solid transparent; border-radius: 0 4px 4px 0; transition: all 0.15s; }
.sc-toc-link:hover { color: var(--text-primary); background: var(--bg-hover); }
.sc-toc-link.active { color: var(--primary, #2563eb); border-left-color: var(--primary, #2563eb);
    background: rgba(37,99,235,0.08); font-weight: 600; }
.sc-toc-link-h3 { padding-left: 20px; font-size: 0.95em; }

@media (max-width: 900px) {
    .sc-scrollbar-toc { position: static; max-height: none; }
}

/* Universal floating reading-progress bar (no shortcode — JS-injected) */
.reading-progress-bar { position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: var(--z-toast, 1200);
    background: linear-gradient(90deg, var(--primary, #2563eb) 0%, var(--accent, #f59e0b) 100%);
    width: 0%; pointer-events: none; transition: width 0.08s linear; }

/* Hover-card for pipeline-link anchors */
.pipeline-link-preview { position: absolute; max-width: 320px; padding: 12px 14px; border-radius: 8px;
    background: var(--bg-card, #1f2937); border: 1px solid var(--border, rgba(255,255,255,0.12));
    box-shadow: 0 8px 24px rgba(0,0,0,0.3); font-size: 0.88em; line-height: 1.45;
    z-index: var(--z-modal, 1000); opacity: 0; transform: translateY(4px); transition: opacity 0.15s, transform 0.15s;
    pointer-events: none; }
.pipeline-link-preview.visible { opacity: 1; transform: translateY(0); pointer-events: auto; }
.pipeline-link-preview-title { font-weight: 600; color: var(--text-primary); margin-bottom: 4px; }
.pipeline-link-preview-body { color: var(--text-secondary); font-size: 0.9em; }

/* Section-level "Was this helpful?" prompts */
.section-helpful-prompt { display: flex; gap: 8px; align-items: center; margin: 8px 0 24px;
    font-size: 0.78em; color: var(--text-secondary); opacity: 0; transform: translateY(4px);
    transition: opacity 0.25s, transform 0.25s; }
.section-helpful-prompt.visible { opacity: 1; transform: translateY(0); }
.section-helpful-prompt button { padding: 3px 10px; border-radius: 999px; border: 1px solid var(--border, rgba(255,255,255,0.12));
    background: var(--bg-hover); color: var(--text-secondary); cursor: pointer; font-size: 0.9em;
    transition: all 0.15s; }
.section-helpful-prompt button:hover { background: rgba(37,99,235,0.12); color: var(--primary, #2563eb); }
.section-helpful-prompt button.acked { background: rgba(22,163,74,0.12); color: var(--success, #16a34a); cursor: default; }

/* Decision-tree widget */
.sc-decision-tree { margin: 24px 0; padding: 18px 20px; border-radius: 8px;
    background: var(--bg-card, #1f2937); border: 1px solid var(--border, rgba(255,255,255,0.08)); }
.sc-decision-tree-trail { font-size: 0.78em; color: var(--text-secondary); margin-bottom: 10px; }
.sc-decision-trail-step { padding: 2px 8px; background: var(--bg-hover); border-radius: 4px; margin-right: 4px; }
.sc-decision-tree-question { font-size: 1.05em; font-weight: 600; color: var(--text-primary);
    margin-bottom: 14px; line-height: 1.4; }
.sc-decision-tree-choices { display: flex; flex-wrap: wrap; gap: 10px; }
.sc-decision-tree-choice { padding: 10px 18px; border-radius: 6px; border: 1px solid var(--primary, #2563eb);
    background: transparent; color: var(--primary, #2563eb); font-weight: 600; cursor: pointer; font-size: 0.92em;
    transition: all 0.15s; }
.sc-decision-tree-choice:hover { background: var(--primary, #2563eb); color: #fff; }
.sc-decision-tree-outcome { padding: 12px 16px; margin-bottom: 12px;
    background: linear-gradient(135deg, rgba(22,163,74,0.10), rgba(22,163,74,0.04));
    border-left: 4px solid var(--success, #16a34a); border-radius: 4px; color: var(--text-primary); }
.sc-decision-tree-restart { padding: 6px 14px; border-radius: 6px; border: 1px solid var(--border, rgba(255,255,255,0.12));
    background: var(--bg-hover); color: var(--text-secondary); cursor: pointer; font-size: 0.85em; }
.sc-decision-tree-error { padding: 12px 16px; background: rgba(245,158,11,0.08); color: var(--warning, #f59e0b);
    border-radius: 4px; }

/* Reader-filter sidebar */
.sc-reader-filter { padding: 14px 16px; margin: 0 0 18px; border-radius: 8px;
    background: linear-gradient(135deg, rgba(37,99,235,0.06), rgba(37,99,235,0.02));
    border: 1px solid rgba(37,99,235,0.18); }
.sc-reader-filter-title { font-size: 0.8em; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase;
    color: var(--primary, #2563eb); margin-bottom: 10px; }
.sc-reader-filter-controls { display: flex; flex-wrap: wrap; gap: 12px; align-items: end; }
.sc-reader-filter-field { display: flex; flex-direction: column; gap: 4px; min-width: 160px; flex: 1; }
.sc-reader-filter-label { font-size: 0.78em; color: var(--text-secondary); text-transform: uppercase; letter-spacing: 0.06em; }
.sc-reader-filter-field input[type="range"] { width: 100%; }
.sc-reader-filter-field select, .sc-reader-filter-field input[type="text"] {
    padding: 6px 10px; border-radius: 4px; background: var(--bg-card, #1f2937); color: var(--text-primary);
    border: 1px solid var(--border, rgba(255,255,255,0.12)); }
.sc-reader-filter-output { font-size: 0.9em; font-weight: 600; color: var(--text-primary); }

/* ── Responsive: Shortcode Widgets ──────────────────────────── */
/* ── Hover states for dynamically generated items (replaces inline onmouseover/onmouseout) ── */
.ti-gen-item:hover { background: var(--bg-hover); }
.cg-version-dots { display: inline-flex; gap: 3px; margin-left: 6px; vertical-align: middle; }
.cg-version-dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }
.cg-version-dot--filled { background: var(--accent); }
.cg-version-dot--empty { background: rgba(255,255,255,0.12); border: 1px solid rgba(255,255,255,0.25); box-sizing: border-box; }

/* ── CSS Separation Cleanup (extracted from JS inline styles) ── */
.modal-overlay {
    position: fixed; top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0,0,0,0.5); z-index: var(--z-modal);
    display: flex; align-items: center; justify-content: center;
}
.lightbox-overlay {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0,0,0,0.85); z-index: var(--z-lightbox);
    display: flex; align-items: center; justify-content: center; cursor: pointer;
}
.lightbox-img { max-width: 90%; max-height: 90%; border-radius: 8px; box-shadow: 0 4px 24px rgba(0,0,0,0.5); }

.blog-link-internal { display: block; margin-bottom: 1rem; color: var(--secondary); font-size: 0.85rem; text-decoration: none; cursor: pointer; }
.poll-thanks { text-align: center; color: var(--text-secondary); font-size: 0.9em; margin-top: 8px; }
.video-block { width: 100%; display: block; }

/* ── Admin View Utility Classes (extracted from admin-tabs.php inline styles) ── */
.section-vpad  { padding: 20px 0; }
.field-full    { grid-column: 1 / -1; }
.mb-16         { margin-bottom: 16px; }
.mb-12         { margin-bottom: 12px; }
.p-12          { padding: 12px; }
.px-card       { padding: 14px 18px; }
.flex-gap-8    { display: flex; gap: 8px; }
.flex-row-wrap { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }


/* ── Admin Sync Card Grid ── */
.sync-card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
    gap: 10px;
}
.sync-card {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 14px 10px 12px;
    background: var(--bg-card, var(--surface));
    border: 1px solid var(--border);
    border-radius: var(--radius, 8px);
    text-align: center;
    transition: border-color 0.15s, box-shadow 0.15s;
}
.sync-card:hover { border-color: var(--primary); }
.sync-card.active { border-color: var(--primary); box-shadow: 0 0 0 2px color-mix(in srgb, var(--primary) 25%, transparent); }
.sync-card.syncing { opacity: 0.7; pointer-events: none; }
.sync-card-badge {
    font-size: 0.6rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 1px 6px;
    border-radius: 3px;
    line-height: 1.4;
}
.sync-card-badge.ura { background: #6366f120; color: #6366f1; }
.sync-card-badge.hdb { background: #f59e0b20; color: #b45309; }
.sync-card-title { font-weight: 600; font-size: 0.85rem; line-height: 1.2; }
.sync-card-status {
    font-size: 0.68rem;
    color: var(--text-secondary);
    line-height: 1.3;
    min-height: 2.6em;
    display: flex;
    align-items: center;
    text-align: center;
}
.sync-card-btn { margin-top: auto; width: 100%; }

/* ── Nightly Refresh card (bulk orchestrator) ── */
.refresh-all-card { margin-bottom: 16px; }
.refresh-all-header {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 8px;
}
.refresh-all-title { margin: 0; font-size: 1.05rem; }
.refresh-all-desc { flex: 1 1 280px; }
.refresh-all-actions {
    display: flex;
    gap: 8px;
    align-items: center;
    margin-left: auto;
    flex-wrap: wrap;
}
.refresh-all-status { margin-bottom: 8px; }
.refresh-all-progress-wrap {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
}
.refresh-all-progress {
    flex: 1 1 auto;
    height: 6px;
    appearance: none;
    -webkit-appearance: none;
    border: none;
    border-radius: 3px;
    background: var(--border, #e5e7eb);
    overflow: hidden;
}
.refresh-all-progress::-webkit-progress-bar { background: var(--border, #e5e7eb); border-radius: 3px; }
.refresh-all-progress::-webkit-progress-value { background: var(--primary, #6366f1); border-radius: 3px; transition: width 0.3s ease; }
.refresh-all-progress::-moz-progress-bar { background: var(--primary, #6366f1); border-radius: 3px; }
.refresh-all-progress-label {
    font-size: 0.75rem;
    color: var(--text-secondary, #6b7280);
    white-space: nowrap;
    min-width: 18ch;
    text-align: right;
}

.refresh-step-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 8px;
    font-size: 0.78rem;
}
.refresh-step {
    position: relative;
    padding: 8px 10px;
    border: 1px solid var(--border, #e5e7eb);
    border-left-width: 3px;
    border-radius: 6px;
    background: var(--bg-card, var(--surface, #fff));
    transition: opacity 0.2s, border-color 0.2s;
}
.refresh-step-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 6px;
}
.refresh-step-label {
    font-weight: 600;
    color: var(--text, inherit);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.refresh-step-meta {
    color: var(--text-secondary, #6b7280);
    margin-top: 3px;
    font-variant-numeric: tabular-nums;
}
.refresh-step-badge {
    display: inline-block;
    padding: 1px 7px;
    border-radius: 10px;
    color: #fff;
    font-size: 0.66rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    background: #9ca3af;
    flex-shrink: 0;
}
/* State-specific styling — left-border accent + badge tint. All vars resolve
   per-theme so dark mode "just works". */
.refresh-step.is-pending {
    opacity: 0.55;
    border-style: dashed;
    border-left-style: solid;
    border-left-color: var(--border, #e5e7eb);
}
.refresh-step.is-pending .refresh-step-badge { background: #9ca3af; }
.refresh-step.is-running {
    border-left-color: var(--primary, #6366f1);
}
.refresh-step.is-running .refresh-step-badge {
    background: var(--primary, #6366f1);
    animation: refreshStepPulse 1.4s ease-in-out infinite;
}
.refresh-step.is-completed {
    border-left-color: var(--success, #16a34a);
}
.refresh-step.is-completed .refresh-step-badge { background: var(--success, #16a34a); }
.refresh-step.is-failed {
    border-left-color: var(--danger, #dc2626);
    background: color-mix(in srgb, var(--danger, #dc2626) 7%, var(--bg-card, var(--surface, #fff)));
}
.refresh-step.is-failed .refresh-step-badge { background: var(--danger, #dc2626); }
.refresh-step.is-skipped {
    opacity: 0.6;
    border-left-color: var(--warning, #d97706);
    border-style: dashed;
    border-left-style: solid;
}
.refresh-step.is-skipped .refresh-step-badge { background: var(--warning, #d97706); }
.refresh-step-error {
    margin-top: 6px;
    padding: 5px 8px;
    background: color-mix(in srgb, var(--danger, #dc2626) 10%, transparent);
    border: 1px solid color-mix(in srgb, var(--danger, #dc2626) 30%, transparent);
    border-radius: 4px;
    color: var(--text, inherit);
    font-size: 0.68rem;
    line-height: 1.35;
    word-break: break-word;
}

@keyframes refreshStepPulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50%      { opacity: 0.55; transform: scale(0.92); }
}
@media (prefers-reduced-motion: reduce) {
    .refresh-step.is-running .refresh-step-badge { animation: none; }
}
@media (max-width: 768px) {
    .refresh-step-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
}
@media (max-width: 480px) {
    .refresh-step-grid { grid-template-columns: 1fr; }
    .refresh-all-progress-label { min-width: auto; }
}

/* ── HDB Analytics ── */
.hdb-town-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px; margin-bottom: 24px; }
.hdb-town-card { display: block; background: var(--bg-card, var(--bg-surface)); border: 1px solid var(--border); border-radius: var(--radius, 8px); padding: 14px 16px; cursor: pointer; text-decoration: none; color: inherit; transition: box-shadow 0.15s, border-color 0.15s; }
.hdb-town-card:hover, .hdb-town-card:focus { box-shadow: 0 4px 16px rgba(0,0,0,0.12); border-color: var(--primary); outline: none; }
.hdb-town-name { font-weight: 700; font-size: 0.9rem; margin-bottom: 8px; color: var(--primary); }
.hdb-town-stats { display: flex; justify-content: space-between; font-size: 0.8rem; color: var(--text-secondary); margin-bottom: 4px; }
.hdb-stat-val { font-weight: 600; color: var(--text); }
.hdb-yield { color: var(--success, #16a34a); }
.hdb-txn-count { font-size: 0.72rem; color: var(--text-secondary); margin-top: 6px; }
.hdb-sparkline { display: block; width: 100%; height: 22px; margin: 2px 0 4px; opacity: 0.85; }
.hdb-sparkline--price { color: var(--primary); }
.hdb-sparkline--rent { color: var(--success, #16a34a); }
.hdb-town-card:hover .hdb-sparkline { opacity: 1; }

/* HDB title row — "All 26 HDB Towns" + "Browse all towns" CTA */
.hdb-section-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-top: 8px; margin-bottom: 4px; }
.hdb-section-head h2 { margin: 0; }

/* ── Condos hub (mirrors HDB layout) ── */
/* Embed wrapper: scopes home-v2 styles for the explore/compare module without
   inheriting the home page's full-bleed margin/background. */
.hv-condo-embed { margin: 16px 0 24px; }
.hv-condo-embed .home-v2 { margin: 0 !important; padding: 0 !important; min-height: 0 !important; background: transparent !important; }
.hv-condo-embed .hv-explore-grid { margin: 0; }

.condos-chart-card { margin: 12px 0 20px; padding: 18px 20px; background: var(--bg-card, var(--bg-surface)); border: 1px solid var(--border); border-radius: var(--radius, 8px); }
.condos-chart-title { margin: 0 0 4px; font-size: 1.05rem; font-weight: 700; color: var(--text); }
.condos-chart-sub { margin: 0 0 12px; font-size: 0.82rem; color: var(--text-secondary); }
.condos-price-chart { width: 100%; }

.condos-section-h { margin: 24px 0 6px; font-size: 1.15rem; font-weight: 600; color: var(--text); }
.condos-hint { margin-bottom: 16px; }
.condos-district-grid { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
.condos-district-card { display: flex; flex-direction: column; gap: 10px; }
.condos-district-head { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.condos-district-head .hdb-town-name { margin: 0; font-size: 1.05rem; }
.condos-district-name { font-size: 0.82rem; color: var(--text-secondary); line-height: 1.35; min-height: 2.7em; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.condos-segment-badge { font-family: var(--hv-mono, ui-monospace, SFMono-Regular, Menlo, monospace); font-size: 0.62rem; font-weight: 600; letter-spacing: 0.08em; padding: 2px 6px; border-radius: 4px; border: 1px solid var(--border); background: rgba(255,255,255,0.04); }
.condos-segment-ccr { color: #c9a227; border-color: rgba(201,162,39,0.4); background: rgba(201,162,39,0.08); }
.condos-segment-rcr { color: #4f9aff; border-color: rgba(79,154,255,0.4); background: rgba(79,154,255,0.08); }
.condos-segment-ocr { color: #4ec07a; border-color: rgba(78,192,122,0.4); background: rgba(78,192,122,0.08); }

.condos-directory { margin-top: 12px; }
.condos-dir-section { background: var(--bg-card, var(--bg-surface)); border: 1px solid var(--border); border-radius: var(--radius, 8px); padding: 14px 16px; margin-bottom: 14px; }
.condos-dir-head { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; margin-bottom: 10px; padding-bottom: 8px; border-bottom: 1px solid var(--border); }
.condos-dir-title { margin: 0; font-size: 1rem; font-weight: 700; }
.condos-dir-title a { color: var(--primary); text-decoration: none; }
.condos-dir-title a:hover { text-decoration: underline; }
.condos-dir-count { margin-left: auto; font-size: 0.75rem; color: var(--text-secondary); font-family: var(--hv-mono, ui-monospace, SFMono-Regular, Menlo, monospace); letter-spacing: 0.04em; text-transform: uppercase; }
.condos-dir-list { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 6px 16px; }
.condos-dir-item { font-size: 0.85rem; line-height: 1.4; }
.condos-dir-link { color: var(--text); text-decoration: none; display: inline-block; padding: 3px 0; transition: color 0.15s; }
.condos-dir-link:hover { color: var(--primary); text-decoration: underline; }
.condos-no-results { padding: 32px 16px; text-align: center; color: var(--text-secondary); font-size: 0.9rem; }

@media (max-width: 768px) {
    .condos-district-grid { grid-template-columns: repeat(2, 1fr); }
    .condos-dir-list { grid-template-columns: 1fr; }
}
@media (max-width: 480px) {
    .condos-district-grid { grid-template-columns: 1fr; }
}

/* ── Landed Property Cards (UF-65) ── */
.landed-type-grid { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 24px; }
.landed-type-card { background: var(--bg-card, var(--bg-surface)); border: 1px solid var(--border); border-radius: var(--radius, 8px); padding: 14px 16px; flex: 1 1 220px; min-width: 200px; }
.landed-type-name { font-weight: 700; font-size: 0.95rem; margin-bottom: 6px; }
.landed-type-stats { display: flex; gap: 16px; font-size: 0.82rem; color: var(--text-secondary); }
.landed-type-stats span { white-space: nowrap; }

.landed-district-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px; margin-bottom: 24px; }
.landed-district-card { background: var(--bg-card, var(--bg-surface)); border: 1px solid var(--border); border-radius: var(--radius, 8px); padding: 14px 16px; cursor: pointer; transition: box-shadow 0.15s, border-color 0.15s; }
.landed-district-card:hover, .landed-district-card:focus { box-shadow: 0 4px 16px rgba(0,0,0,0.12); border-color: var(--primary); outline: none; }
.landed-district-header { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.landed-district-num { font-weight: 700; font-size: 0.85rem; color: var(--primary); background: var(--bg-surface); padding: 2px 6px; border-radius: 4px; border: 1px solid var(--border); }
.landed-district-name { font-weight: 600; font-size: 0.88rem; }
.landed-district-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; }
.landed-district-stats div { text-align: center; }
.landed-district-stats .stat-value { display: block; font-weight: 600; font-size: 0.85rem; color: var(--text); }
.landed-district-stats .stat-label { display: block; font-size: 0.7rem; color: var(--text-secondary); }
/* ── New Launch District Cards ── */
.nl-district-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 14px; margin-bottom: 24px; }
.nl-district-card { background: var(--bg-card, var(--bg-surface)); border: 1px solid var(--border); border-radius: var(--radius, 8px); padding: 0; cursor: pointer; transition: box-shadow 0.2s, border-color 0.2s, transform 0.2s; overflow: hidden; display: flex; flex-direction: column; }
.nl-district-card:hover { box-shadow: 0 6px 24px rgba(0,0,0,0.15); border-color: var(--primary); transform: translateY(-2px); }
.nl-district-card-header { display: flex; align-items: center; gap: 12px; padding: 14px 16px 10px; }
.nl-district-badge { min-width: 44px; height: 44px; border-radius: 10px; background: var(--primary); color: var(--text-inverse); font-weight: 800; font-size: 0.95rem; display: flex; align-items: center; justify-content: center; flex-shrink: 0; letter-spacing: -0.02em; }
.nl-district-card-header h3 { font-size: 0.82rem; font-weight: 600; color: var(--text-primary, var(--text)); margin: 0; line-height: 1.35; }
.nl-district-card-body { padding: 0 16px 14px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.nl-district-stat { text-align: center; }
.nl-district-stat-val { font-size: 1rem; font-weight: 700; color: var(--text-primary, var(--text)); line-height: 1.3; }
.nl-district-stat-label { font-size: 0.68rem; color: var(--text-secondary); text-transform: uppercase; letter-spacing: 0.04em; margin-top: 1px; }
.nl-district-card-empty .nl-district-badge { background: var(--text-secondary); opacity: 0.5; }
.nl-district-card-empty { opacity: 0.55; }
.nl-district-card-empty:hover { transform: none; box-shadow: none; border-color: var(--border); }
/* ── New Launch Pipeline Card Enhancements ── */
.nl-pipeline-card { min-height: 120px; }
.nl-card-meta { font-size: 0.78rem; color: var(--text-secondary); margin-bottom: 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nl-card-psf { font-weight: 700; font-size: 0.95rem; color: var(--text); margin: 6px 0 4px; }
.nl-card-types { font-size: 0.7rem; color: var(--text-secondary); margin-top: 4px; }
.nl-seg-badge { font-size: 0.65rem; font-weight: 700; padding: 2px 7px; border-radius: 10px; text-transform: uppercase; letter-spacing: 0.5px; white-space: nowrap; flex-shrink: 0; }
.nl-seg-ccr { background: rgba(220, 38, 38, 0.15); color: var(--status-danger); }
.nl-seg-rcr { background: rgba(234, 179, 8, 0.15); color: #eab308; }
.nl-seg-ocr { background: rgba(34, 197, 94, 0.15); color: var(--status-success); }
.nl-abs-row { margin-top: 6px; }
.nl-abs-bar { height: 6px; background: var(--border); border-radius: 3px; overflow: hidden; margin-bottom: 3px; }
.nl-abs-fill { height: 100%; border-radius: 3px; transition: width 0.3s; }
.nl-abs-fill.abs-high { background: var(--status-success); }
.nl-abs-fill.abs-mid { background: #eab308; }
.nl-abs-fill.abs-low { background: #3b82f6; }
.nl-abs-label { font-size: 0.7rem; color: var(--text-secondary); }

/* ── Premium New Launch Styles ── */
.nl-premium-hero { position: relative; height: 400px; background-size: cover; background-position: center; border-radius: var(--radius-lg, 12px); overflow: hidden; margin-bottom: 24px; }
.nl-premium-hero-overlay { position: absolute; inset: 0; background: linear-gradient(to top, rgba(0,0,0,0.7), rgba(0,0,0,0.2)); display: flex; flex-direction: column; justify-content: flex-end; padding: 32px; color: #fff; }
.nl-premium-tagline { font-size: 1.2rem; opacity: 0.9; margin: 8px 0 16px; }
.nl-premium-badge { display: inline-block; background: var(--accent, #6366f1); color: #fff; padding: 4px 12px; border-radius: var(--radius-sm, 4px); font-size: 0.75rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; }
.nl-premium-hero-cta { display: flex; gap: 12px; margin-top: 16px; }

/* Featured grid */
.nl-featured-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 16px; }
.nl-featured-card { background: var(--bg-card, var(--bg-surface)); border: 1px solid var(--border); border-radius: var(--radius, 8px); overflow: hidden; transition: box-shadow 0.2s, transform 0.2s; }
.nl-featured-card:hover { box-shadow: 0 6px 24px rgba(0,0,0,0.15); transform: translateY(-2px); }

/* Gallery */
.nl-gallery-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px; }
.nl-gallery-thumb { cursor: pointer; border-radius: var(--radius-sm, 4px); overflow: hidden; aspect-ratio: 4/3; }
.nl-gallery-thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.2s; }
.nl-gallery-thumb:hover img { transform: scale(1.05); }

/* Lightbox (overlay/content classes built by new-launch-premium.js) */
.nl-lightbox-overlay { position: fixed; inset: 0; z-index: var(--z-lightbox, 10001); background: rgba(0,0,0,0.9); display: flex; align-items: center; justify-content: center; }
.nl-lightbox-overlay img { max-width: 90vw; max-height: 85vh; object-fit: contain; border-radius: 4px; }
.nl-lightbox-close { position: absolute; top: 16px; right: 20px; color: #fff; font-size: 2rem; cursor: pointer; background: none; border: none; line-height: 1; z-index: var(--z-elevated); }
.nl-lightbox-prev, .nl-lightbox-next { position: absolute; top: 50%; transform: translateY(-50%); color: #fff; font-size: 2.5rem; cursor: pointer; background: rgba(0,0,0,0.4); border: none; border-radius: 50%; width: 48px; height: 48px; display: flex; align-items: center; justify-content: center; }
.nl-lightbox-prev { left: 16px; }
.nl-lightbox-next { right: 16px; }
.nl-lightbox-caption { position: absolute; bottom: 16px; left: 50%; transform: translateX(-50%); color: #fff; font-size: 0.9rem; text-align: center; padding: 8px 16px; background: rgba(0,0,0,0.5); border-radius: 6px; max-width: 80vw; }

/* Lead form */
.nl-lead-form { background: var(--bg-card, var(--bg-surface)); border: 1px solid var(--border); border-radius: var(--radius, 8px); padding: 24px; margin-top: 24px; }
.nl-lead-form h3 { margin: 0 0 16px; }
.nl-lead-form .form-group { margin-bottom: 14px; }
.nl-lead-form label { display: block; font-size: 0.85rem; font-weight: 500; margin-bottom: 4px; color: var(--text); }
.nl-lead-form input, .nl-lead-form select, .nl-lead-form textarea { width: 100%; padding: 8px 12px; border: 1px solid var(--border); border-radius: var(--radius-sm, 4px); font-size: 0.9rem; background: var(--bg-surface); color: var(--text); box-sizing: border-box; }
.nl-lead-form textarea { resize: vertical; min-height: 60px; }
.nl-lead-form .form-check { display: flex; align-items: flex-start; gap: 8px; margin: 12px 0; }
.nl-lead-form .form-check input[type="checkbox"] { margin-top: 3px; width: auto; flex-shrink: 0; }
.nl-lead-form .form-check label { font-size: 0.8rem; color: var(--text-secondary); margin: 0; }
/* Checkbox + radio overrides — the generic .nl-lead-form input rule above sets
   width:100% which would stretch a checkbox to a full-row block element.  */
.nl-lead-form input[type="checkbox"],
.nl-lead-form input[type="radio"] { width: auto; margin: 0; vertical-align: middle; flex-shrink: 0; accent-color: var(--primary); }
/* PDPA consent row — checkbox on the left of the sentence, small notice below. */
.nl-lead-form .nl-checkbox-label { display: flex; align-items: flex-start; gap: 8px; font-size: 0.85rem; font-weight: 400; line-height: 1.4; color: var(--text); cursor: pointer; margin-bottom: 6px; }
.nl-lead-form .nl-checkbox-label input[type="checkbox"] { margin-top: 2px; }
.nl-lead-form .nl-pdpa-notice { display: block; font-size: 0.72rem; color: var(--text-secondary); line-height: 1.5; margin-top: 4px; }
/* Select dropdown options — native browser widgets inherit from OS on dark
   themes, so the unselected/unfocused options were rendering nearly invisible.
   Force a legible fg/bg so every option reads clearly in both themes.  */
.nl-lead-form select option { background: var(--bg-surface); color: var(--text); padding: 6px 10px; }
.nl-lead-form select option:disabled { color: var(--text-secondary); }
.nl-lead-type-pills { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 16px; }
.nl-lead-type-pill { padding: 6px 14px; border-radius: 20px; border: 1px solid var(--border); background: var(--bg-surface); color: var(--text); cursor: pointer; font-size: 0.82rem; transition: background-color 0.15s, border-color 0.15s, color 0.15s; }
.nl-lead-type-pill.active { background: var(--primary); color: var(--text-inverse); border-color: var(--primary); }
.nl-lead-success { padding: 20px; text-align: center; color: var(--status-success); font-weight: 600; }

/* Countdown */
.nl-countdown { display: flex; gap: 16px; margin: 12px 0; }
.nl-countdown-unit { text-align: center; }
.nl-countdown-num { font-size: 1.8rem; font-weight: 700; color: #fff; line-height: 1; }
.nl-countdown-label { font-size: 0.7rem; text-transform: uppercase; opacity: 0.8; letter-spacing: 0.5px; }
.nl-countdown-launched { font-size: 1.1rem; font-weight: 700; color: var(--status-success); }

/* Data tables (unit mix, payment scheme) */
.nl-data-table { width: 100%; border-collapse: collapse; font-size: 0.85rem; }
.nl-data-table th { background: var(--bg-secondary); font-weight: 600; text-align: left; padding: 8px 12px; border-bottom: 2px solid var(--border); font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.3px; }
.nl-data-table td { padding: 8px 12px; border-bottom: 1px solid var(--border); }
.nl-data-table tr:hover { background: var(--bg-hover, var(--bg-secondary)); }

/* Showflat card */
.nl-showflat-card { background: var(--bg-card, var(--bg-surface)); border: 1px solid var(--border); border-radius: var(--radius, 8px); padding: 20px; margin-bottom: 20px; }
.nl-showflat-card h4 { margin: 0 0 12px; }

/* Premium project detail — 2-col layout (S45 Phase A)
   Left column: tab content (flexible). Right column: sticky lead-form sidebar
   that persists across all 7 premium tabs. Stacks to a single column below
   1024px so the form appears after content on tablet/mobile. */
.nl-premium-layout { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 28px; align-items: start; }
.nl-premium-main { min-width: 0; }
.nl-premium-sidebar { position: sticky; top: 80px; }
.nl-premium-sidebar .nl-lead-form { margin-top: 0; padding: 20px; }
.nl-premium-sidebar .nl-lead-form h3 { font-size: 1rem; }
.nl-premium-sidebar .nl-form-grid { grid-template-columns: 1fr; gap: 10px; }
.nl-premium-sidebar .nl-lead-type-pills { flex-wrap: wrap; gap: 6px; }
.nl-premium-sidebar .nl-lead-type-pills .analytics-pill { font-size: 0.75rem; padding: 5px 10px; }
@media (max-width: 1024px) {
    .nl-premium-layout { grid-template-columns: 1fr; gap: 24px; }
    .nl-premium-sidebar { position: static; }
}

/* Media tab — sponsor upsell (S45 Phase A): empty-state pitch card + placeholder slot tiles */
.nl-media-heading { font-size: 1.05rem; font-weight: 600; margin: 0 0 12px; }
.nl-media-pitch { background: linear-gradient(135deg, rgba(99,102,241,0.10), rgba(99,102,241,0.02)); border: 1px solid rgba(99,102,241,0.25); border-radius: var(--radius, 8px); padding: 20px 24px; margin-bottom: 28px; }
.nl-media-pitch-body h3,
.nl-media-pitch-body h4 { margin: 8px 0 6px; font-size: 1.1rem; font-weight: 600; }
.nl-media-pitch-body p { margin: 0 0 14px; color: var(--text-secondary); font-size: 0.9rem; line-height: 1.5; max-width: 60ch; }
.nl-media-pitch-cta { display: inline-flex; align-items: center; }
/* Sidebar variant — sits inside .nl-lead-form card, tighter padding, no bottom-only margin */
.nl-lead-form .nl-contact-pitch { margin: 0 0 16px; padding: 14px 16px; }
.nl-lead-form .nl-contact-pitch h4 { margin-top: 6px; font-size: 0.98rem; }
.nl-lead-form .nl-contact-pitch p { font-size: 0.82rem; margin-bottom: 10px; }
.nl-lead-form .nl-contact-pitch .nl-media-pitch-cta { font-size: 0.82rem; padding: 6px 12px; }
.nl-media-empty-block { margin-bottom: 8px; }
.nl-media-empty-desc { color: var(--text-secondary); font-size: 0.85rem; margin: 0 0 14px; }
.nl-media-slot-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 12px; }
.nl-media-slot { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; aspect-ratio: 4 / 3; background: var(--bg-secondary, rgba(148,163,184,0.06)); border: 1.5px dashed var(--border, rgba(148,163,184,0.4)); border-radius: var(--radius, 8px); color: var(--text-secondary); transition: border-color 0.15s ease, color 0.15s ease; }
.nl-media-slot:hover { border-color: rgba(99,102,241,0.5); color: var(--text); }
.nl-media-slot-icon { opacity: 0.55; }
.nl-media-slot-label { font-size: 0.8rem; font-weight: 500; letter-spacing: 0.02em; text-transform: uppercase; }
@media (max-width: 768px) {
    .nl-media-slot-grid { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
    .nl-media-pitch { padding: 16px 18px; }
}

/* Promo banner */
.nl-promo-banner { background: linear-gradient(135deg, rgba(99,102,241,0.08), rgba(99,102,241,0.02)); border: 1px solid rgba(99,102,241,0.2); border-radius: var(--radius, 8px); padding: 16px 20px; margin-bottom: 20px; }

/* Developer profile */
.nl-developer-header { display: flex; align-items: center; gap: 16px; margin-bottom: 20px; }
.nl-developer-logo { width: 80px; height: 80px; object-fit: contain; border-radius: var(--radius-sm, 4px); border: 1px solid var(--border); background: #fff; }

/* Event cards */
.nl-event-card { background: var(--bg-card, var(--bg-surface)); border: 1px solid var(--border); border-radius: var(--radius, 8px); padding: 20px; cursor: pointer; transition: box-shadow 0.2s, border-color 0.2s; }
.nl-event-card:hover { box-shadow: 0 4px 16px rgba(0,0,0,0.12); border-color: var(--primary); }
/* Note: JS uses .nl-event-type-{type} (not .type-{type}); per-type colour rules
   were never wired up correctly and have been removed. Re-add via .nl-event-type-*
   selectors if per-type theming is needed. */
.nl-event-type-badge { display: inline-block; padding: 3px 10px; border-radius: 12px; font-size: 0.72rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.3px; margin-bottom: 8px; }
.nl-event-card h4 { margin: 0 0 8px; font-size: 1rem; }
.nl-event-meta { font-size: 0.82rem; color: var(--text-secondary); margin-bottom: 4px; }

/* Admin premium editor */
.admin-premium-pills { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 16px; }
.admin-media-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 12px; margin-top: 12px; }
.admin-media-card { background: var(--bg-surface); border: 1px solid var(--border); border-radius: var(--radius-sm, 4px); overflow: hidden; position: relative; }
.admin-media-card img { width: 100%; height: 120px; object-fit: cover; }

/* ── Schools Proximity ── */
.nl-moe-note { background: linear-gradient(135deg, rgba(34,197,94,0.08), rgba(34,197,94,0.02)); border: 1px solid rgba(34,197,94,0.25); border-radius: var(--radius, 8px); padding: 16px 20px; margin-bottom: 24px; }
.nl-moe-note strong { color: var(--primary); }
.nl-moe-note p { margin: 6px 0 0; font-size: 0.88rem; color: var(--text-secondary); }
.nl-school-group { margin-bottom: 24px; }
.nl-school-group h3 { font-size: 1rem; margin-bottom: 8px; }
.nl-dist-pill { display: inline-block; padding: 2px 10px; border-radius: 12px; font-size: 0.78rem; font-weight: 600; }
.nl-dist-near { background: rgba(34,197,94,0.12); color: #16a34a; }
.nl-dist-mid { background: rgba(245,158,11,0.12); color: #d97706; }
.nl-dist-far { background: var(--bg-secondary); color: var(--text-secondary); }
.nl-moe-badge { display: inline-block; background: #16a34a; color: #fff; font-size: 0.65rem; padding: 1px 6px; border-radius: 8px; margin-left: 6px; font-weight: 700; vertical-align: middle; }
.nl-kpi-good { border-color: rgba(34,197,94,0.35) !important; }

/* ── Premium KPI Cards ── */
.nl-kpi-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 20px; }
.nl-kpi-card { background: var(--bg-surface, var(--bg)); border: 1px solid var(--border); border-radius: var(--radius-sm, 6px); padding: 14px 16px; text-align: center; }
.nl-kpi-card:hover { border-color: var(--primary); }
.nl-kpi-value { font-size: 1.2rem; font-weight: 700; color: var(--text); margin-bottom: 4px; white-space: nowrap; }
.nl-kpi-label { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.4px; color: var(--text-secondary); }

/* ── Construction Timeline ── */
.nl-timeline { position: relative; padding-left: 36px; margin: 24px 0; }
.nl-timeline::before { content: ''; position: absolute; left: 14px; top: 0; bottom: 0; width: 2px; background: var(--border); }
.nl-tl-item { position: relative; padding-bottom: 28px; }
.nl-tl-item:last-child { padding-bottom: 0; }
.nl-tl-marker { position: absolute; left: -36px; top: 2px; width: 28px; height: 28px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 0.85rem; border: 2px solid var(--border); background: var(--bg-surface); z-index: var(--z-base); }
.nl-tl-done .nl-tl-marker { background: #16a34a; color: #fff; border-color: #16a34a; }
.nl-tl-active .nl-tl-marker { background: var(--primary); color: #fff; border-color: var(--primary); animation: nl-pulse 2s infinite; }
.nl-tl-pending .nl-tl-marker { background: var(--bg-secondary); color: var(--text-secondary); }
@keyframes nl-pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(99,102,241,0.4); } 50% { box-shadow: 0 0 0 8px rgba(99,102,241,0); } }
.nl-tl-content h4 { margin: 0 0 4px; font-size: 0.95rem; }
.nl-tl-date { font-size: 0.8rem; color: var(--text-secondary); }
.nl-tl-content p { margin: 6px 0 0; font-size: 0.85rem; color: var(--text-secondary); }
.nl-tl-photos { display: flex; gap: 8px; margin-top: 10px; flex-wrap: wrap; }
.nl-tl-thumb { width: 80px; height: 60px; object-fit: cover; border-radius: var(--radius-sm, 4px); cursor: pointer; border: 1px solid var(--border); }

/* ── Investment Comparison ── */
.nl-comparison-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin: 20px 0; }
.nl-compare-card { background: var(--bg-surface); border: 1px solid var(--border); border-radius: var(--radius, 8px); padding: 20px; }
.nl-compare-card h3 { margin: 0 0 12px; font-size: 1rem; color: var(--primary); }
.nl-compare-list { list-style: none; padding: 0; margin: 0; }
.nl-compare-list li { padding: 8px 0; border-bottom: 1px solid var(--border); font-size: 0.88rem; }
.nl-compare-list li:last-child { border-bottom: none; }
.nl-payment-schedule, .nl-projection { margin-top: 24px; }
.nl-payment-schedule h3, .nl-projection h3 { font-size: 1rem; margin-bottom: 12px; }

/* ── Market Intelligence ── */
.nl-highlight-row { background: rgba(99,102,241,0.06) !important; font-weight: 600; }

/* ── Availability Chart ── */
.nl-avail-bar-track { width: 100%; height: 20px; background: rgba(34,197,94,0.15); border-radius: 10px; overflow: hidden; position: relative; }
.nl-avail-bar-fill { height: 100%; background: var(--primary); border-radius: 10px; transition: width 0.3s; }
.nl-avail-badge { display: inline-block; padding: 4px 12px; border-radius: 12px; font-size: 0.8rem; font-weight: 700; }
.nl-avail-urgent { background: rgba(239,68,68,0.12); color: #dc2626; }
.nl-avail-ring { position: relative; width: 80px; height: 80px; margin: 0 auto; }
.nl-avail-ring svg { transform: rotate(-90deg); }
.nl-avail-ring-text { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 1.1rem; font-weight: 700; color: var(--primary); }

/* ── Premium responsive ── */
/* ── HDB Score Badges on Town Cards ── */
.hdb-score-badges { display: flex; gap: 4px; margin-bottom: 6px; }
.hdb-score-badge {
    display: inline-flex; align-items: center; gap: 2px;
    padding: 2px 6px; border-radius: 10px;
    font-size: 0.68rem; font-weight: 700; line-height: 1;
    color: var(--text-inverse);
}
.hdb-score-badge.score-strong { background: var(--status-success); }
.hdb-score-badge.score-moderate { background: #2563eb; }
.hdb-score-badge.score-cautious { background: #b45309; }
.hdb-score-badge.score-weak { background: var(--status-danger); }

/* ── HDB Street Cards ── */
.hdb-street-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; margin-bottom: 24px; }
.hdb-street-card {
    background: var(--bg-card, var(--bg-surface)); border: 1px solid var(--border); border-radius: var(--radius, 8px);
    padding: 16px; cursor: pointer; transition: box-shadow 0.15s, border-color 0.15s;
}
.hdb-street-card:hover, .hdb-street-card:focus { box-shadow: 0 4px 16px rgba(0,0,0,0.12); border-color: var(--primary); outline: none; }
.hdb-street-card-name { font-weight: 700; font-size: 0.88rem; color: var(--primary); margin-bottom: 10px; line-height: 1.3; }
.hdb-street-card-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 12px; margin-bottom: 6px; }
.hdb-street-stat { display: flex; flex-direction: column; }
.hdb-street-stat-val { font-weight: 600; font-size: 0.85rem; color: var(--text); }
.hdb-street-stat-label { font-size: 0.68rem; color: var(--text-secondary); text-transform: uppercase; letter-spacing: 0.3px; }
.hdb-street-card-range { font-size: 0.72rem; color: var(--text-secondary); margin-top: 4px; padding-top: 6px; border-top: 1px solid var(--border); }

/* ── HDB Block Selector ── */
.hdb-block-selector { display: flex; align-items: center; gap: 8px; margin-bottom: 16px; padding: 10px 14px; background: var(--bg-card, var(--bg-surface)); border: 1px solid var(--border); border-radius: var(--radius, 8px); }
.hdb-block-selector label { font-size: 0.8rem; font-weight: 600; color: var(--text-secondary); white-space: nowrap; }
.hdb-block-selector select { min-width: 200px; }

/* ── HDB Block Info Cards (on street overview) ── */
.hdb-block-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 10px; padding: 12px; }
.hdb-block-info-card {
    background: var(--bg); border: 1px solid var(--border); border-radius: 6px; padding: 10px 12px;
}
.hdb-block-info-blk { font-weight: 700; font-size: 0.85rem; color: var(--primary); margin-bottom: 6px; }
.hdb-block-info-row { display: flex; justify-content: space-between; font-size: 0.72rem; color: var(--text-secondary); margin-bottom: 2px; }
.hdb-block-info-row span:last-child { font-weight: 600; color: var(--text); }

/* ── HDB Score Cards (Town Detail Overview Tab) ── */
.hdb-score-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 16px; margin-bottom: 20px; }
.hdb-score-card { padding: 20px !important; }
.score-card-header { display: flex; align-items: center; gap: 16px; margin-bottom: 16px; }
.score-circle {
    width: 56px; height: 56px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.2rem; font-weight: 800; color: var(--text-inverse); flex-shrink: 0;
}
.score-circle.score-strong { background: var(--status-success); }
.score-circle.score-moderate { background: #2563eb; }
.score-circle.score-cautious { background: #b45309; }
.score-circle.score-weak { background: var(--status-danger); }
.score-card-header h3 { margin: 0 0 4px; font-size: 0.95rem; }
.score-verdict { font-size: 0.82rem; font-weight: 600; }
.score-verdict.score-strong { color: var(--status-success); }
.score-verdict.score-moderate { color: #2563eb; }
.score-verdict.score-cautious { color: #b45309; }
.score-verdict.score-weak { color: var(--status-danger); }
.score-factors { display: flex; flex-direction: column; gap: 8px; }
.score-factor-row { display: flex; align-items: center; gap: 8px; font-size: 0.8rem; }
.score-factor-name { flex: 0 0 130px; color: var(--text-secondary); }
.score-factor-name small { opacity: 0.7; }
.score-bar-wrap { flex: 1; height: 6px; background: var(--border); border-radius: 3px; overflow: hidden; }
.score-bar { height: 100%; border-radius: 3px; transition: width 0.3s ease; }
.score-bar.score-strong { background: var(--status-success); }
.score-bar.score-moderate { background: #2563eb; }
.score-bar.score-cautious { background: #b45309; }
.score-bar.score-weak { background: var(--status-danger); }
.score-factor-val { flex: 0 0 80px; text-align: right; font-weight: 600; color: var(--text); }
.score-factor-val small { font-weight: 400; color: var(--text-secondary); }
/* ── HDB analytics-card (shared with New Launches) ── */
.analytics-card {
    background: var(--bg-card);
    border: 1px solid var(--border-light);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: 16px 18px;
    margin-bottom: 20px;
}
.analytics-card h3 {
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--text);
    margin: 0 0 12px;
}

/* ── HDB Town Detail — Tab Navigation ── */
.hdb-detail-tabs {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    margin-bottom: 20px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--border-light);
    position: sticky;
    top: 0;
    background: var(--bg);
    z-index: var(--z-elevated);
    padding-top: 8px;
}

/* ── HDB Town Detail — Filter Bar ── */
.hdb-filter-bar {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 16px;
    padding: 8px 0;
}
/* ── HDB Town Detail — Tab Content Panels ── */
.hdb-detail-panel { display: none; }
.hdb-detail-panel.active { display: block; animation: tabFadeIn 0.2s ease-out; }

/* ── HDB Town Overview — KPI Row ── */
.hdb-kpi-row {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 12px;
    margin-bottom: 20px;
}
.hdb-kpi-row .kpi-card { padding: 12px 14px; text-align: center; }
.hdb-kpi-label { font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.4px; color: var(--text-secondary); margin-bottom: 4px; }
.hdb-kpi-value { font-size: 1.15rem; font-weight: 700; color: var(--text); white-space: nowrap; }
.hdb-kpi-positive { color: var(--success, #16a34a); }
.hdb-kpi-negative { color: var(--danger, #dc2626); }

/* ── HDB Town Detail — Insight Banner ── */
.hdb-insight-strip {
    background: var(--bg);
    border: 1px solid var(--border-light);
    border-left: 3px solid var(--primary);
    border-radius: var(--radius);
    padding: 10px 14px;
    font-size: 0.82rem;
    color: var(--text-secondary);
    line-height: 1.5;
    margin-bottom: 16px;
}
.hdb-insight-strip strong { color: var(--text); }

/* ── HDB Town Detail — Block Map ── */
.hdb-block-map-wrap {
    border: 1px solid var(--border-light);
    border-radius: var(--radius);
    overflow: hidden;
    height: 380px;
    background: var(--bg);
    position: relative;
}
.hdb-block-map-wrap .map-placeholder-text {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-secondary);
    font-size: 0.85rem;
}

/* ── HDB Town Detail — Transaction Filters ── */
.hdb-txn-filters {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    align-items: center;
    margin-bottom: 14px;
}
.hdb-txn-filters label { font-size: 0.75rem; color: var(--text-secondary); white-space: nowrap; }

.hdb-txn-pagination {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: 12px;
    font-size: 0.78rem;
    color: var(--text-secondary);
    flex-wrap: wrap;
}
.hdb-txn-pagination .btn { padding: 4px 12px; font-size: 0.78rem; }

/* ── HDB Responsive ── */
@media (max-width: 1024px) {
    .hdb-kpi-row { grid-template-columns: repeat(3, 1fr); }
}
/* ═══════════════════════════════════════════════════════════════
   CONDO REVIEW — editorial review pages (.condo-review namespace)
   ═══════════════════════════════════════════════════════════════ */

/* ── Layout ── */
.condo-review { line-height: 1.75; font-size: 15px; color: var(--text-primary); }
.condo-review a { color: var(--accent); text-decoration: none; }
.condo-review a:hover { text-decoration: underline; }
.condo-review p { margin-bottom: 14px; line-height: 1.75; }
.condo-review p:last-child { margin-bottom: 0; }
.condo-review h2 { font-size: 1.35rem; font-weight: 600; color: var(--text-primary); margin: 0 0 12px; padding-top: 8px; }
.condo-review h3 { font-size: 0.7rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-secondary); margin-bottom: 10px; }

/* ── Section spacing ── */
.condo-review .review-section { margin-bottom: 36px; }

/* ── Masthead ── */
.condo-review .review-masthead { padding: 24px 0 0; border-bottom: 1px solid var(--border); margin-bottom: 32px; }
.condo-review .review-masthead-meta { font-size: 0.68rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-secondary); margin-bottom: 16px; }
.condo-review .review-masthead-meta span { margin: 0 8px; }
.condo-review .review-masthead h1 { font-size: clamp(1.5rem, 4vw, 2.2rem); font-weight: 700; line-height: 1.2; color: var(--text-primary); margin-bottom: 12px; }

/* ── Scorecard (3-cell grid) ── */
.condo-review .review-scorecard { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--border); border: 1px solid var(--border); border-radius: var(--radius-sm); overflow: hidden; margin-bottom: 32px; }
.condo-review .review-score-cell { background: var(--bg-card); padding: 16px 18px; text-align: center; }
.condo-review .review-score-cell:first-child { text-align: left; }
.condo-review .review-score-cell:last-child { text-align: right; }
.condo-review .review-score-val { font-size: 1.5rem; font-weight: 700; color: var(--text-primary); display: block; line-height: 1; margin-bottom: 4px; }
.condo-review .review-score-label { font-size: 0.68rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-secondary); }

/* ── Rating bars ── */
.condo-review .review-ratings { background: var(--bg-secondary); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 20px 24px; margin: 28px 0; }
.condo-review .review-ratings-title { font-size: 0.68rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-secondary); margin-bottom: 16px; }
.condo-review .review-bar-row { display: flex; align-items: center; gap: 12px; margin-bottom: 8px; }
.condo-review .review-bar-row:last-child { margin-bottom: 0; }
.condo-review .review-bar-label { font-size: 0.8rem; color: var(--text-secondary); width: 150px; flex-shrink: 0; }
.condo-review .review-bar-track { flex: 1; height: 5px; background: var(--border); border-radius: 3px; overflow: hidden; }
.condo-review .review-bar-fill { height: 100%; border-radius: 3px; background: var(--accent); }
.condo-review .review-bar-fill.amber { background: var(--warning); }
.condo-review .review-bar-fill.muted { background: var(--text-secondary); }
.condo-review .review-bar-num { font-size: 0.8rem; font-weight: 500; color: var(--text-primary); width: 26px; text-align: right; flex-shrink: 0; }

/* ── Table of contents ── */
.condo-review .review-toc { background: var(--bg-secondary); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 18px 24px; margin: 0 0 32px; }
.condo-review .review-toc-title { font-size: 0.68rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-secondary); margin-bottom: 10px; }
.condo-review .review-toc-list { list-style: none; display: grid; grid-template-columns: 1fr 1fr; gap: 2px 20px; padding: 0; margin: 0; }
.condo-review .review-toc-list li { font-size: 0.82rem; line-height: 1.4; }
.condo-review .review-toc-list li a { color: var(--accent); text-decoration: none; padding: 4px 0; display: flex; align-items: baseline; gap: 6px; }
.condo-review .review-toc-list li a:hover { color: var(--text-primary); }
.condo-review .review-toc-num { font-size: 0.68rem; font-weight: 500; color: var(--text-secondary); min-width: 16px; }

/* ── Key facts grid ── */
.condo-review .review-key-facts { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--border); border: 1px solid var(--border); border-radius: var(--radius-sm); overflow: hidden; margin: 20px 0; }
.condo-review .review-kf-cell { background: var(--bg-card); padding: 12px 16px; }
.condo-review .review-kf-label { font-size: 0.68rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-secondary); margin-bottom: 2px; }
.condo-review .review-kf-value { font-size: 0.88rem; font-weight: 400; color: var(--text-primary); line-height: 1.35; }

/* ── Data tables ── */
.condo-review .review-data-table-wrap { margin: 20px 0; border: 1px solid var(--border); border-radius: var(--radius-sm); overflow: hidden; }
.condo-review .review-data-table-label { font-size: 0.68rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-secondary); padding: 12px 16px 8px; background: var(--bg-secondary); border-bottom: 1px solid var(--border); }
.condo-review .review-data-table { width: 100%; border-collapse: collapse; font-size: 0.82rem; }
.condo-review .review-data-table thead th { text-align: left; font-size: 0.68rem; font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-secondary); padding: 10px 14px; background: var(--bg-secondary); border-bottom: 1px solid var(--border); }
.condo-review .review-data-table tbody td { padding: 10px 14px; border-bottom: 1px solid var(--border); color: var(--text-primary); line-height: 1.45; vertical-align: top; }
.condo-review .review-data-table tbody tr:last-child td { border-bottom: none; }
.condo-review .review-data-table .highlight-row td { background: rgba(var(--bg-card-rgb), 0.5); font-weight: 500; }
.condo-review .review-data-table .muted { color: var(--text-secondary); }
.condo-review .review-data-table .num { font-variant-numeric: tabular-nums; }
.condo-review .review-data-table .green-text { color: var(--success); font-weight: 500; }
.condo-review .review-data-table .amber-text { color: var(--warning); font-weight: 500; }

/* ── Appreciation cards ── */
.condo-review .review-appreciation-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin: 20px 0; }
.condo-review .review-appreciation-card { border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 16px; text-align: center; background: var(--bg-card); }
.condo-review .review-appreciation-card .type-label { font-size: 0.68rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-secondary); margin-bottom: 6px; }
.condo-review .review-appreciation-card .pct { font-size: 1.6rem; font-weight: 700; color: var(--success); line-height: 1; margin-bottom: 4px; }
.condo-review .review-appreciation-card .period { font-size: 0.68rem; color: var(--text-secondary); }

/* ── Callout boxes ── */
.condo-review .review-callout { border-radius: var(--radius-sm); padding: 16px 20px; margin: 20px 0; font-size: 0.88rem; line-height: 1.6; }
.condo-review .review-callout.info { background: rgba(46, 134, 171, 0.08); border-left: 3px solid var(--secondary); color: var(--text-primary); }
.condo-review .review-callout.warning { background: rgba(255, 193, 7, 0.1); border-left: 3px solid var(--warning); color: var(--text-primary); }
.condo-review .review-callout-title { font-size: 0.72rem; font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase; margin-bottom: 6px; }
.condo-review .review-callout.info .review-callout-title { color: var(--secondary); }
.condo-review .review-callout.warning .review-callout-title { color: var(--warning); }

/* ── Pros & Cons ── */
.condo-review .review-pros-cons { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin: 24px 0; }
.condo-review .review-pc-box { border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 18px 20px; background: var(--bg-card); }
.condo-review .review-pc-box.pros { border-top: 3px solid var(--success); }
.condo-review .review-pc-box.cons { border-top: 3px solid var(--danger); }
.condo-review .review-pc-title { font-size: 0.68rem; letter-spacing: 0.12em; text-transform: uppercase; margin-bottom: 10px; }
.condo-review .review-pc-box.pros .review-pc-title { color: var(--success); }
.condo-review .review-pc-box.cons .review-pc-title { color: var(--danger); }
.condo-review .review-pc-list { list-style: none; padding: 0; margin: 0; }
/* Pros/cons bullets — position-based instead of flex, so that inline links
   (calc-article-link, glossary-link, condo-inline-link, …) stay in the text
   flow. Under the previous `display: flex` layout, every <a> inside the
   bullet became its own flex item and rendered on a separate line,
   shattering reading flow ("total cost" stacked between "lowers" and "vs").
   See 2026-05-23 fix for the visible bug on /property/{slug}/review. */
.condo-review .review-pc-list li { position: relative; font-size: 0.82rem; color: var(--text-secondary); padding: 5px 0 5px 14px; border-bottom: 1px solid var(--border-light); line-height: 1.45; }
.condo-review .review-pc-list li:last-child { border-bottom: none; }
.condo-review .review-pc-dot { position: absolute; left: 0; top: 11px; width: 6px; height: 6px; border-radius: 50%; }
.condo-review .review-pc-box.pros .review-pc-dot { background: var(--success); }
.condo-review .review-pc-box.cons .review-pc-dot { background: var(--danger); }

/* ── Tags ── */
.condo-review .review-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 24px; padding-top: 18px; border-top: 1px solid var(--border); }
.condo-review .review-tag-label { font-size: 0.75rem; color: var(--text-secondary); display: flex; align-items: center; }
.condo-review .review-tag { font-size: 0.75rem; padding: 4px 12px; border-radius: 20px; font-weight: 400; }
.condo-review .review-tag.green { background: rgba(40, 167, 69, 0.1); color: var(--success); }
.condo-review .review-tag.amber { background: rgba(255, 193, 7, 0.12); color: #7a5500; }
.condo-review .review-tag.red { background: rgba(220, 53, 69, 0.08); color: var(--danger); }

/* ── Sources ── */
.condo-review .review-sources { background: var(--bg-secondary); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 18px 22px; margin-top: 32px; }
.condo-review .review-source-links { display: flex; flex-wrap: wrap; gap: 8px; }
.condo-review .review-source-link { font-size: 0.78rem; color: var(--accent); border: 1px solid var(--border-light); background: var(--bg-card); border-radius: 4px; padding: 4px 10px; text-decoration: none; transition: background 0.15s; }
.condo-review .review-source-link:hover { background: var(--bg-secondary); }

/* ── Next Steps CTA ── */
.condo-review .review-next-steps { margin-top: 40px; padding: 28px 24px; background: var(--bg-secondary); border: 1px solid var(--accent); border-radius: var(--radius-sm); }
.condo-review .review-next-steps h2 { font-size: 1.25rem; margin: 0 0 6px; color: var(--text-primary); }
.condo-review .review-next-steps > p { font-size: 0.88rem; color: var(--text-secondary); margin: 0 0 18px; }
.condo-review .review-cta-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px; }
.condo-review .review-cta-card { display: flex; flex-direction: column; gap: 4px; padding: 16px; background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-sm); text-decoration: none; transition: border-color 0.15s, box-shadow 0.15s; }
.condo-review .review-cta-card:hover { border-color: var(--accent); box-shadow: 0 2px 8px rgba(0,0,0,0.08); }
.condo-review .review-cta-card strong { font-size: 0.88rem; color: var(--accent); }
.condo-review .review-cta-card span { font-size: 0.78rem; color: var(--text-secondary); line-height: 1.4; }

/* ── [schema-review] badge — composite editorial rating ──────────────────
   Rendered by App\Services\Shortcodes\SchemaReviewHandler::render(). Without
   styling, the badge collapses to plain inline text (no card chrome, no
   visual hierarchy). This styles it as a card with the same border/padding
   language as .review-score-card so it sits naturally next to the §3a
   Category Ratings panel above it. */
.sc-schema-review { display: grid; grid-template-columns: auto 1fr; gap: 18px; align-items: center; margin: 24px 0; padding: 20px 22px; background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-sm); }
.sc-schema-review-score { display: flex; align-items: baseline; gap: 2px; min-width: 84px; }
.sc-schema-review-score-value { font-size: 2.2rem; font-weight: 800; color: var(--accent); line-height: 1; }
.sc-schema-review-score-max { font-size: 1rem; font-weight: 500; color: var(--text-secondary); }
.sc-schema-review-meta { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.sc-schema-review-item { font-size: 0.95rem; color: var(--text-primary); }
.sc-schema-review-item strong { font-weight: 700; }
.sc-schema-review-author { font-size: 0.68rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-secondary); }
.sc-schema-review-body { font-size: 0.82rem; color: var(--text-secondary); line-height: 1.5; margin: 4px 0 6px; }
.sc-schema-review-bar { height: 6px; background: var(--border); border-radius: 3px; overflow: hidden; }
.sc-schema-review-bar-fill { height: 100%; border-radius: 3px; background: var(--accent); transition: width 0.4s ease; }
@media (max-width: 600px) {
    .sc-schema-review { grid-template-columns: 1fr; gap: 12px; padding: 16px 18px; }
    .sc-schema-review-score-value { font-size: 1.8rem; }
}

/* ── ShiokNest Scores grid ── */
.condo-review .review-scores-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; margin: 20px 0; }
.condo-review .review-score-card { border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 18px; background: var(--bg-card); }
.condo-review .review-score-card-title { font-size: 0.68rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-secondary); margin-bottom: 8px; }
.condo-review .review-score-card-value { font-size: 1.5rem; font-weight: 700; color: var(--text-primary); margin-bottom: 6px; }
.condo-review .review-score-bar { height: 6px; background: var(--border); border-radius: 3px; overflow: hidden; margin-bottom: 10px; }
.condo-review .review-score-bar-fill { height: 100%; border-radius: 3px; background: var(--accent); }
.condo-review .review-score-detail { font-size: 0.78rem; color: var(--text-secondary); line-height: 1.5; }

/* ── Blockquote (residents say) ── */
.condo-review blockquote { border-left: 3px solid var(--accent); margin: 24px 0; padding: 4px 0 4px 20px; }
.condo-review blockquote p { font-size: 1rem; font-style: italic; color: var(--text-secondary); line-height: 1.55; margin: 0; }
.condo-review blockquote cite { display: block; font-size: 0.72rem; font-style: normal; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-secondary); margin-top: 8px; }

/* ── Divider ── */
.condo-review hr { border: none; border-top: 1px solid var(--border); margin: 32px 0; }

/* ── Article FAQ accordion (details/summary) ── */
.article-faq { margin-top: 36px; }
.faq-list { display: flex; flex-direction: column; gap: 2px; }
.faq-item {
    background: var(--bg-card); border: 1px solid var(--border);
    overflow: hidden;
}
.faq-item:first-child { border-radius: var(--radius) var(--radius) 0 0; }
.faq-item:last-child { border-radius: 0 0 var(--radius) var(--radius); }
.faq-item:only-child { border-radius: var(--radius); }
.faq-item summary {
    display: flex; align-items: center; justify-content: space-between;
    padding: 16px 20px; font-size: 0.92rem; font-weight: 500;
    color: var(--text); cursor: pointer; list-style: none; gap: 12px;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::marker { display: none; content: ''; }
.faq-item summary::after {
    content: '+'; font-size: 1.2rem; font-weight: 300;
    color: var(--text-muted); flex-shrink: 0;
    transition: transform 0.25s;
}
.faq-item[open] summary::after { content: '\2212'; }
.faq-item summary:hover { background: var(--bg-hover); }
.faq-answer {
    padding: 0 20px 16px; font-size: 0.88rem;
    line-height: 1.7; color: var(--text-secondary);
}
.faq-answer p { margin: 0 0 8px; }
.faq-answer p:last-child { margin-bottom: 0; }

/* ── Condo Review Responsive ── */

/* ═══════════════════════════════════════════════════════════════
   MOBILE RESPONSIVE OVERRIDES (consolidated)
   ═══════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
    .sc-image.float-left, .sc-image.float-right { float: none; max-width: 100%; margin: 24px 0; }
    .sc-gallery-grid { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
    .sc-gallery-grid img { height: 140px; }
    .sc-related-grid { grid-template-columns: 1fr; }
    .sc-cta { flex-direction: column; text-align: center; }
    .sc-cta .sc-cta-arrow { display: none; }
    .sc-reactions { justify-content: flex-start; }
    .sc-map-container { height: 250px; }
    .sc-table { font-size: 0.9em; }
    .sync-card-grid { grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); gap: 8px; }
    .sync-card { padding: 10px 6px 10px; }
    .sync-card-title { font-size: 0.78rem; }
    .landed-district-grid { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }
    .landed-district-stats { grid-template-columns: repeat(2, 1fr); }
    .nl-district-grid { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
    .nl-kpi-row { grid-template-columns: repeat(2, 1fr); gap: 8px; }
    .nl-premium-hero { height: 260px; }
    .nl-premium-hero-overlay { padding: 20px; }
    .nl-premium-tagline { font-size: 1rem; }
    .nl-gallery-grid { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
    .nl-facts-grid { grid-template-columns: repeat(2, 1fr); }
    .nl-countdown { gap: 10px; }
    .nl-countdown-val { font-size: 1.3rem; }
    .nl-event-grid { grid-template-columns: 1fr; }
    .nl-featured-grid { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
    .nl-developer-header { flex-direction: column; text-align: center; }
    .nl-developer-logo { width: 60px; height: 60px; }
    .nl-comparison-grid { grid-template-columns: 1fr; }
    .nl-timeline { padding-left: 30px; }
    .nl-tl-marker { left: -30px; width: 24px; height: 24px; font-size: 0.75rem; }
    .nl-tl-thumb { width: 60px; height: 45px; }
    .hdb-street-grid { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
    .hdb-block-selector { flex-wrap: wrap; }
    .hdb-block-selector select { min-width: 160px; }
    .hdb-block-grid { grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); }
    .hdb-score-row { grid-template-columns: 1fr; }
    .score-factor-name { flex: 0 0 100px; }
    .score-factor-val { flex: 0 0 60px; }
    .hdb-detail-tabs { gap: 4px; padding-top: 6px; padding-bottom: 10px; }
    .hdb-kpi-row { grid-template-columns: repeat(2, 1fr); gap: 8px; }
    .hdb-block-map-wrap { height: 260px; }
    .condo-review .review-scorecard { grid-template-columns: 1fr; }
    .condo-review .review-key-facts { grid-template-columns: 1fr; }
    .condo-review .review-appreciation-grid { grid-template-columns: 1fr; }
    .condo-review .review-pros-cons { grid-template-columns: 1fr; }
    .condo-review .review-scores-grid { grid-template-columns: 1fr; }
    .condo-review .review-toc-list { grid-template-columns: 1fr; }
    .condo-review .review-bar-label { width: 120px; }
    .condo-review .review-data-table { font-size: 0.75rem; }
    .condo-review .review-data-table thead th,
    .condo-review .review-data-table tbody td { padding: 8px 10px; }
    .faq-item summary { padding: 14px 16px; font-size: 0.88rem; }
    .faq-answer { padding: 0 16px 14px; }
}

@media (max-width: 480px) {
    .sc-chart { padding: 8px; min-height: 200px; }
    .sc-quiz, .sc-poll, .sc-calculator, .sc-form { padding: 12px; }
    .sc-gallery-grid { grid-template-columns: repeat(2, 1fr); }
    .sc-gallery-grid img { height: 120px; }
    .sc-highlightbox { padding: 12px 16px; }
    .sc-blockquote { padding: 12px 16px; }
    .sc-cta { padding: 12px 16px; }
    .sc-reaction-btn { padding: 6px 12px; font-size: 0.85em; }
    .sc-video .sc-video-play { width: 48px; height: 48px; font-size: 18px; }
    .hdb-town-grid { grid-template-columns: repeat(2, 1fr); }
    .landed-district-grid { grid-template-columns: repeat(2, 1fr); }
    .landed-type-grid { flex-direction: column; }
  .nl-district-card-header { padding: 10px 12px 8px; gap: 8px; }
  .nl-district-badge { min-width: 36px; height: 36px; font-size: 0.82rem; border-radius: 8px; }
  .nl-district-card-header h3 { font-size: 0.75rem; }
  .nl-district-card-body { padding: 0 12px 10px; gap: 4px; }
  .nl-district-stat-val { font-size: 0.85rem; }
  .nl-district-stat-label { font-size: 0.6rem; }
    .hdb-street-grid { grid-template-columns: 1fr; }
    .hdb-block-grid { grid-template-columns: repeat(2, 1fr); }
    .hdb-block-selector select { width: 100%; min-width: 0; }
    .score-circle { width: 44px; height: 44px; font-size: 1rem; }
    .score-factor-row { font-size: 0.72rem; }
    .hdb-filter-bar { flex-direction: column; align-items: flex-start; }
    .hdb-kpi-row { grid-template-columns: repeat(2, 1fr); }
    .hdb-kpi-value { font-size: 1rem; }
    .condo-review .review-masthead h1 { font-size: 1.3rem; }
    .condo-review .review-score-val { font-size: 1.2rem; }
    .condo-review .review-bar-label { width: 100px; font-size: 0.72rem; }
    .condo-review .review-appreciation-card .pct { font-size: 1.3rem; }
}
} /* end @layer components — shortcode, widget, hdb */


/* ═══════════════════════════════════════════════════════════════
   MPA (Multi-Page Application) Styles
   ═══════════════════════════════════════════════════════════════ */

/* MPA Page H1 — visible semantic heading */
.mpa-page-h1 {
    font-size: 1.4rem;
    font-weight: 600;
    margin: 0 0 0.5rem;
    padding: 0 1.5rem;
    color: var(--text-primary);
}

/* Blog list page */
.blog-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 1rem; margin-bottom: 2rem; }
.blog-card { display: block; padding: 1.25rem; border-radius: 12px; background: var(--card-bg); border: 1px solid var(--border); text-decoration: none; color: inherit; transition: transform 0.15s, box-shadow 0.15s; }
.blog-card:hover { transform: translateY(-2px); box-shadow: 0 4px 12px rgba(0,0,0,0.08); }
.blog-card-meta { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; font-size: 0.8rem; color: var(--text-secondary); }
.blog-card-title { font-size: 1rem; font-weight: 600; margin: 0 0 6px; color: var(--text-primary); }
.blog-card-summary { font-size: 0.85rem; color: var(--text-secondary); margin: 0; line-height: 1.5; }

/* Blog pagination */
.blog-pagination { display: flex; align-items: center; justify-content: center; gap: 4px; margin: 2rem 0; flex-wrap: wrap; }

/* Blog tag cloud */
.blog-tag { display: inline-block; padding: 4px 12px; border-radius: var(--radius-lg); font-size: 0.78rem; background: var(--bg-hover); color: var(--text-primary); text-decoration: none; border: 1px solid var(--border); transition: background 0.15s, border-color 0.15s; }
.blog-tag:hover { background: var(--accent); color: #fff; border-color: var(--accent); }
.blog-tag.active { background: var(--accent); color: #fff; border-color: var(--accent); }

/* Blog detail page */
.blog-detail-page { padding: 0 1rem; max-width: 800px; margin: 0 auto; }
.blog-detail-content { line-height: 1.7; font-size: 1rem; }
.blog-detail-content h2 { font-size: 1.3rem; margin: 2rem 0 0.75rem; }
.blog-detail-content h3 { font-size: 1.1rem; margin: 1.5rem 0 0.5rem; }
.blog-detail-content p { margin: 0 0 1rem; }
.blog-detail-content img { max-width: 100%; height: auto; border-radius: 8px; }
.blog-detail-content table { width: 100%; border-collapse: collapse; margin: 1rem 0; }
.blog-detail-content th, .blog-detail-content td { padding: 8px 12px; border: 1px solid var(--border); text-align: left; font-size: 0.9rem; }
.blog-detail-content th { background: var(--bg-hover); font-weight: 600; }
.blog-related-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 1rem; }
.blog-related-card { display: block; padding: 1rem; border-radius: 8px; background: var(--card-bg); border: 1px solid var(--border); text-decoration: none; color: inherit; transition: transform 0.15s; }
.blog-related-card:hover { transform: translateY(-1px); }
.blog-related-card h4 { margin: 0 0 6px; font-size: 0.9rem; font-weight: 600; color: var(--text-primary); }
.blog-related-card time { font-size: 0.75rem; color: var(--text-secondary); }

/* Not found page */
.not-found-page a.btn { border-radius: 8px; }

@media (max-width: 768px) {
    .blog-grid { grid-template-columns: 1fr; }
    .blog-related-grid { grid-template-columns: 1fr; }
    .mpa-page-h1 { font-size: 1.2rem; padding: 0 1rem; }
    .blog-detail-page { padding: 0 0.5rem; }
    .blog-list-page { padding: 0 0.5rem; }
}

@media (hover: none) {
    .blog-card:hover { transform: none; box-shadow: none; }
    .blog-related-card:hover { transform: none; }
    .calc-hub-card:hover { transform: none; box-shadow: none; }
}

/* ── MPA: Property Detail ─────────────────────────────────────── */
.property-detail-page { max-width: 1100px; margin: 0 auto; }
.property-detail-header { margin-bottom: 1rem; }
.property-header-badges { display: flex; gap: 0.5rem; margin-bottom: 0.5rem; }
.property-header-address { color: var(--text-secondary); margin: 0.25rem 0; }
.property-header-desc { color: var(--text-secondary); font-size: 0.9rem; margin: 0.5rem 0; }

.property-sub-tabs {
    display: flex; gap: 0; overflow-x: auto; border-bottom: 2px solid var(--border);
    margin-bottom: 1.5rem;
    position: sticky; top: 0; z-index: var(--z-sticky, 120);
    background: var(--bg); backdrop-filter: blur(8px);
}
.property-sub-tab {
    padding: 0.6rem 1rem; color: var(--text-secondary); text-decoration: none;
    white-space: nowrap; border-bottom: 2px solid transparent; margin-bottom: -2px;
    font-size: 0.88rem; transition: color 0.2s, border-color 0.2s;
}
.property-sub-tab:hover { color: var(--text); }
.property-sub-tab.active { color: var(--accent); border-bottom-color: var(--accent); font-weight: 600; }

.property-detail-dl { display: grid; grid-template-columns: auto 1fr; gap: 0.4rem 1rem; }
.property-detail-dl dt { color: var(--text-secondary); font-size: 0.85rem; }
.property-detail-dl dd { margin: 0; font-weight: 500; }

.property-scores-grid {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 1rem; margin: 1.5rem 0;
}
.property-score-card {
    background: var(--bg-card); border: 1px solid var(--border); border-radius: 10px;
    padding: 1.2rem; text-align: center;
}
.property-score-value { font-size: 1.8rem; font-weight: 700; color: var(--accent); }
.property-score-label { font-size: 0.8rem; color: var(--text-secondary); margin-top: 0.3rem; }

/* ── Overview Hero Summary (P1.1) ── */
.overview-hero {
    display: flex; align-items: center; gap: 20px; flex-wrap: wrap;
    background: var(--bg-card); border: 1px solid var(--border-light);
    border-radius: var(--radius); padding: 20px 24px; margin-bottom: 20px;
}
.overview-hero-score {
    display: flex; align-items: center; gap: 14px;
    padding-right: 20px; border-right: 1px solid var(--border-light);
}
.overview-hero-score-value {
    font-size: 2.6rem; font-weight: 800; line-height: 1; letter-spacing: -0.02em;
    color: var(--text);
}
.overview-hero-score.tone-good .overview-hero-score-value { color: var(--success, #16a34a); }
.overview-hero-score.tone-warn .overview-hero-score-value { color: #E69F00; }
.overview-hero-score.tone-bad  .overview-hero-score-value { color: var(--danger, #dc3545); }
.overview-hero-score-meta { display: flex; flex-direction: column; gap: 4px; }
.overview-hero-score-label { font-size: 0.78rem; color: var(--text-secondary); letter-spacing: 0.02em; }
.overview-hero-score-verdict {
    font-size: 0.72rem; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase;
    padding: 2px 10px; border-radius: 12px; align-self: flex-start; color: #fff;
    background: var(--text-secondary);
}
.overview-hero-score.tone-good .overview-hero-score-verdict { background: var(--success, #16a34a); }
.overview-hero-score.tone-warn .overview-hero-score-verdict { background: #E69F00; }
.overview-hero-score.tone-bad  .overview-hero-score-verdict { background: var(--danger, #dc3545); }
.overview-hero-stats {
    display: flex; flex-wrap: wrap; align-items: flex-start;
    gap: 18px 28px; flex: 1 1 auto; min-width: 0;
}
.overview-hero-stats > .overview-hero-stat { min-width: 120px; }

/* SPI segment context strip — shared by hdb/landed/property-detail/blog/etc.
   Whole element is a single link; segment colour shows as a small leading
   dot so the pill reads as one cohesive widget instead of a mixed
   blue-link-inside-text paragraph. */
.spi-strip {
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px 10px;
    margin: 8px 0 12px;
    padding: 6px 14px 6px 12px;
    background: var(--surface-2, rgba(127, 127, 127, 0.06));
    border: 1px solid var(--border);
    border-radius: 999px;
    font-size: 0.78rem;
    line-height: 1.4;
    color: var(--text-secondary);
    text-decoration: none;
    transition: background-color 0.15s, border-color 0.15s;
}
.spi-strip:hover {
    background: var(--surface-3, rgba(127, 127, 127, 0.12));
    border-color: var(--text-secondary);
}
.spi-strip::before {
    content: "";
    flex: 0 0 auto;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--spi-dot, var(--accent, #2563eb));
}
.spi-strip-label {
    color: var(--text);
    font-weight: 600;
}
.spi-strip-value {
    color: var(--text);
    font-weight: 700;
}
.spi-strip-delta { color: var(--text-secondary); }
.spi-strip-date {
    color: var(--text-secondary);
    opacity: 0.8;
}
.spi-strip-date::before { content: "· "; margin-right: 2px; }
.overview-hero-stat { display: flex; flex-direction: column; gap: 2px; }
.overview-hero-stat-label {
    font-size: 0.7rem; color: var(--text-secondary);
    letter-spacing: 0.04em; text-transform: uppercase;
}
.overview-hero-stat-value { font-size: 1.15rem; font-weight: 700; color: var(--text); }
@media (max-width: 768px) {
    .overview-hero { padding: 16px; gap: 14px; }
    .overview-hero-score { padding-right: 14px; }
    .overview-hero-score-value { font-size: 2rem; }
}

/* ── Overview: compact 2-col info grid (P3.2) ── */
.property-info-details-grid {
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px 18px; margin-top: 12px;
}
.property-info-details-grid .info-detail {
    display: flex; flex-direction: column; gap: 2px;
}
@media (max-width: 640px) {
    .property-info-details-grid { grid-template-columns: 1fr; }
}

/* ── Score cards: 2×2 grid + tighter internal layout (P1.3) ── */
#scoreCardsRow.score-cards-row {
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px; margin: 16px 0;
}
#scoreCardsRow.score-cards-row .score-card {
    min-width: 0;
}
#scoreCardsRow.score-cards-row .amenity-score-card { margin-bottom: 0; }
#scoreCardsRow.score-cards-row .score-card-radar {
    max-height: 200px; margin-top: 8px;
}
#scoreCardsRow.score-cards-row .score-card-radar .apexcharts-canvas {
    max-height: 200px !important;
}
@media (max-width: 900px) {
    #scoreCardsRow.score-cards-row { grid-template-columns: 1fr; gap: 12px; }
}

/* ── Overview: paired-chart grid (P2.1) ── */
.overview-chart-grid {
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px; margin-bottom: 16px;
}
.overview-chart-grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.overview-chart-grid > .chart-card { margin-bottom: 0; min-width: 0; }

/* Unified 16px vertical rhythm for all direct-child blocks in property detail sub-tabs.
   Overrides per-element margins (20px hero/info-card) inside this scope via higher specificity. */
.property-sub-content > *:not(:last-child) { margin-bottom: 16px; }
@media (max-width: 900px) {
    .overview-chart-grid,
    .overview-chart-grid-3 { grid-template-columns: 1fr; gap: 12px; }
}

/* ── Detailed charts disclosure (P2.2) ── */
.overview-detailed-charts { margin: 16px 0; }
.overview-detailed-charts > summary.overview-detailed-summary {
    cursor: pointer; padding: 12px 16px; margin-bottom: 12px;
    background: var(--bg-card); border: 1px solid var(--border-light);
    border-radius: var(--radius-sm, 8px);
    font-weight: 600; color: var(--text);
    display: flex; align-items: center; gap: 8px;
    transition: background 0.15s, border-color 0.15s;
    list-style: none;
}
.overview-detailed-charts > summary.overview-detailed-summary::-webkit-details-marker { display: none; }
.overview-detailed-charts > summary.overview-detailed-summary::before {
    content: '▸'; font-size: 0.9em; color: var(--text-secondary);
    transition: transform 0.15s;
}
.overview-detailed-charts[open] > summary.overview-detailed-summary::before {
    transform: rotate(90deg);
}
.overview-detailed-charts > summary.overview-detailed-summary:hover {
    border-color: var(--accent);
}
.overview-detailed-charts[open] > summary.overview-detailed-summary {
    background: transparent;
}

/* ── Sparse-data empty-state note (P2.3) ── */
.chart-empty-note {
    text-align: center; color: var(--text-secondary);
    padding: 32px 16px; margin: 0; font-size: 0.85rem;
    min-height: 200px; display: flex; align-items: center; justify-content: center;
}

/* Compare page */
.compare-header { display: flex; gap: 1rem; flex-wrap: wrap; margin-bottom: 1rem; }
.compare-property-link {
    background: var(--bg-card); border: 1px solid var(--border); border-radius: 8px;
    padding: 0.5rem 1rem; color: var(--accent); text-decoration: none; font-weight: 500;
}
.compare-property-link:hover { border-color: var(--accent); }

@media (max-width: 768px) {
    .property-sub-tabs { gap: 0; }
    .property-sub-tab { padding: 0.5rem 0.6rem; font-size: 0.8rem; }
    .property-scores-grid { grid-template-columns: repeat(2, 1fr); }
    .property-detail-page { padding: 0 0.5rem; }
}

/* ── PAGE EDITORIAL (How to Use This) ── */
.page-editorial {
    max-width: 880px;
    margin: 40px auto 24px;
    padding: 0 16px;
    color: var(--text);
    line-height: 1.6;
}
.page-editorial > section { margin-block: 32px; }
.page-editorial-title {
    font-size: 1.6rem;
    margin: 0 0 20px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--border);
}
.page-editorial h3 {
    font-size: 1.25rem;
    margin: 24px 0 12px;
    scroll-margin-top: 80px;
}
.page-editorial h4 {
    font-size: 1rem;
    margin: 16px 0 8px;
}
.page-editorial a {
    color: var(--accent);
    text-decoration: underline;
    text-underline-offset: 2px;
}
.page-editorial a:hover { text-decoration: none; }

/* Key Takeaways */
.editorial-takeaways {
    background: var(--bg-card);
    border-left: 4px solid var(--accent);
    padding: 16px 20px;
    border-radius: 8px;
    margin-block: 24px;
}
.editorial-takeaways h3 {
    margin: 0 0 10px;
    font-size: 1.05rem;
    color: var(--accent);
}
.editorial-takeaways ul {
    margin: 0;
    padding-left: 20px;
}
.editorial-takeaways li { margin-bottom: 6px; }

/* Prose sections (What / Why) */
.editorial-prose p { margin: 0 0 12px; }
.editorial-prose-body { font-size: 0.95rem; }

/* How It Works */
.editorial-how-it-works ul {
    padding-left: 20px;
}
.editorial-how-it-works li { margin-bottom: 8px; }

/* Examples */
.editorial-example {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 16px 20px;
    margin-block: 16px;
}
.editorial-example h4 {
    margin: 0 0 12px;
    color: var(--accent);
}
.editorial-example-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin-bottom: 12px;
}
.editorial-example-col dl {
    margin: 0;
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 4px 12px;
    font-size: 0.88rem;
}
.editorial-example-col dt {
    color: var(--text-muted);
    font-weight: normal;
}
.editorial-example-col dd {
    margin: 0;
    font-weight: 600;
}
.editorial-example-read {
    margin: 12px 0 0;
    padding-top: 12px;
    border-top: 1px dashed var(--border);
    font-size: 0.9rem;
}

/* Tips & Pitfalls */
.editorial-tips-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}
.editorial-tips,
.editorial-pitfalls {
    background: var(--bg-card);
    padding: 14px 18px;
    border-radius: 8px;
}
.editorial-tips { border-left: 3px solid #10b981; }
.editorial-pitfalls { border-left: 3px solid #ef4444; }
.editorial-tips h4,
.editorial-pitfalls h4 {
    margin: 0 0 8px;
    font-size: 0.95rem;
}
.editorial-tips ul,
.editorial-pitfalls ul {
    margin: 0;
    padding-left: 18px;
    font-size: 0.88rem;
}
.editorial-tips li,
.editorial-pitfalls li { margin-bottom: 6px; }

/* FAQ accordion */
.editorial-faq details {
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 12px 16px;
    margin: 8px 0;
    background: var(--bg-card);
}
.editorial-faq summary {
    font-weight: 600;
    cursor: pointer;
    list-style: none;
    position: relative;
    padding-right: 24px;
}
.editorial-faq summary::-webkit-details-marker { display: none; }
.editorial-faq summary::after {
    content: '+';
    position: absolute;
    right: 0;
    top: 0;
    font-size: 1.2rem;
    color: var(--text-muted);
}
.editorial-faq details[open] summary::after { content: '−'; }
.editorial-faq-answer {
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid var(--border);
    font-size: 0.92rem;
}
.editorial-faq-answer p:first-child { margin-top: 0; }
.editorial-faq-answer p:last-child { margin-bottom: 0; }

/* Related Resources */
.editorial-related-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 12px;
}
.editorial-related-card {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 12px 14px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 8px;
    text-decoration: none !important;
    transition: border-color 0.15s, transform 0.15s;
}
.editorial-related-card:hover {
    border-color: var(--accent);
    transform: translateY(-1px);
}
.editorial-related-kind {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--accent);
    font-weight: 600;
}
.editorial-related-label {
    font-size: 0.92rem;
    color: var(--text);
    font-weight: 500;
}

/* Disclaimer */
.editorial-disclaimer {
    margin-top: 32px;
    padding: 12px 16px;
    background: var(--bg-card);
    border-radius: 6px;
    font-size: 0.8rem;
    color: var(--text-muted);
    line-height: 1.5;
}

@media (max-width: 720px) {
    .editorial-tips-grid,
    .editorial-example-grid { grid-template-columns: 1fr; }
    .page-editorial-title { font-size: 1.35rem; }
    .page-editorial h3 { font-size: 1.1rem; }
}
@media (hover: none) {
    .editorial-related-card:hover,
    .nl-featured-card:hover,
    .nl-event-card:hover,
    .nl-gallery-thumb:hover img,
    .calc-related-card:hover {
        border-color: var(--border);
        transform: none;
        box-shadow: none;
    }
}


/* Sponsor: featured launch callout (district pages, yield articles) */
.sponsor-featured-launch {
    border: 1px solid var(--border, #e2e8f0);
    border-left: 4px solid var(--accent, #3b82f6);
    border-radius: 8px;
    padding: 16px 18px;
    margin: 24px 0;
    background: var(--bg-card, #fff);
}
.sponsor-featured-launch .sponsor-label {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 8px;
    color: var(--text-muted, #64748b);
}
.sponsor-featured-launch .sponsor-tag {
    background: var(--bg-muted, #f1f5f9);
    padding: 2px 6px;
    border-radius: 3px;
    font-weight: 600;
    margin-right: 6px;
}
.sponsor-featured-launch-cta {
    display: block;
    text-decoration: none;
    color: inherit;
    margin-top: 4px;
}
.sponsor-featured-launch-logo {
    max-height: 32px;
    width: auto;
    margin-bottom: 8px;
}
.sponsor-featured-launch-tagline {
    margin: 4px 0 8px;
    font-weight: 500;
}
.sponsor-featured-launch-cta-text {
    color: var(--accent, #3b82f6);
    font-weight: 600;
}
.sponsor-disclosure {
    margin: 8px 0 0;
    color: var(--text-muted, #64748b);
}

/* ── District agent card (Phase C: district partnerships) ── */
.sponsor-agent-card {
    border: 1px solid var(--border, #e2e8f0);
    border-left: 4px solid var(--accent, #3b82f6);
    border-radius: 8px;
    padding: 18px 20px;
    margin: 24px 0;
    background: var(--bg-card, #fff);
}
.sponsor-agent-card .sponsor-label {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-muted, #64748b);
}
.sponsor-agent-card .sponsor-tag {
    background: var(--bg-muted, #f1f5f9);
    padding: 2px 6px;
    border-radius: 3px;
    font-weight: 600;
    margin-right: 6px;
}
.sponsor-agent-card .sponsor-divider {
    border: 0;
    border-top: 1px solid var(--border, #e2e8f0);
    margin: 10px 0 14px;
}
.sponsor-agent-card-grid {
    display: grid;
    grid-template-columns: minmax(180px, 1fr) 1.5fr;
    gap: 24px;
    align-items: start;
}
@media (max-width: 768px) {
    .sponsor-agent-card-grid { grid-template-columns: 1fr; gap: 18px; }
}
.sponsor-agent-photo {
    width: 96px;
    height: 96px;
    object-fit: cover;
    border-radius: 50%;
    border: 2px solid var(--border, #e2e8f0);
    display: block;
    margin-bottom: 8px;
}
.sponsor-agent-name { margin: 4px 0 2px; font-size: 1.1rem; }
.sponsor-agent-agency { margin: 0 0 6px; display: flex; align-items: center; gap: 6px; color: var(--text-muted, #64748b); font-size: .9rem; }
.sponsor-agent-agency-logo { max-height: 18px; width: auto; }
.sponsor-agent-cea { margin: 4px 0 8px; font-size: .85rem; color: var(--text-muted, #64748b); }
.sponsor-agent-bio { margin: 6px 0 10px; font-size: .92rem; line-height: 1.45; }
.sponsor-agent-txns { margin: 8px 0; font-size: .88rem; }
.sponsor-agent-txns ul { padding-left: 18px; margin: 6px 0 0; }
.sponsor-agent-whatsapp {
    display: inline-block;
    margin-top: 8px;
    padding: 8px 14px;
    background: #25d366;
    color: #fff;
    border-radius: 6px;
    text-decoration: none;
    font-weight: 600;
    font-size: .9rem;
}
.sponsor-agent-whatsapp:hover { background: #1ea854; }
.sponsor-agent-lead-form { display: flex; flex-direction: column; gap: 8px; }
.sponsor-agent-lead-form h4 { margin: 0 0 4px; font-size: 1rem; }
.sponsor-agent-lead-form label { font-size: .85rem; display: flex; flex-direction: column; gap: 3px; }
.sponsor-agent-lead-form input[type=text],
.sponsor-agent-lead-form input[type=email],
.sponsor-agent-lead-form input[type=tel],
.sponsor-agent-lead-form select,
.sponsor-agent-lead-form textarea {
    padding: 7px 9px;
    border: 1px solid var(--border, #d1d5db);
    border-radius: 5px;
    font-size: .92rem;
    background: var(--bg-input, #fff);
    color: var(--text, #111);
}
.sponsor-form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
@media (max-width: 480px) { .sponsor-form-row { grid-template-columns: 1fr; } }
.sponsor-form-consent { flex-direction: row !important; align-items: flex-start; gap: 8px !important; font-size: .8rem; line-height: 1.35; color: var(--text-muted, #64748b); }
.sponsor-form-consent input { margin-top: 3px; flex-shrink: 0; }
.sponsor-form-status { margin: 4px 0 0; font-size: .85rem; min-height: 1em; }
.sponsor-form-disclosure { margin: 6px 0 0; color: var(--text-muted, #64748b); font-size: .8rem; }

/* ── Sponsored Content (Phase D) — disclosure strip ── */
.sponsored-disclosure-strip {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    margin: 0 0 24px;
    background: var(--bg-elev, #fff8e6);
    border: 1px solid var(--border, #e3c46a);
    border-left: 4px solid #c89200;
    border-radius: 6px;
    font-size: 0.9rem;
}
.sponsored-disclosure-tag {
    display: inline-block;
    padding: 2px 10px;
    background: #c89200;
    color: #fff;
    border-radius: 3px;
    font-weight: 600;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: .04em;
    flex-shrink: 0;
}
.sponsored-disclosure-logo {
    height: 28px;
    width: auto;
    max-width: 120px;
    object-fit: contain;
    flex-shrink: 0;
}
.sponsored-disclosure-text {
    color: var(--text, #222);
    font-weight: 500;
    flex-grow: 1;
    min-width: 200px;
}
.sponsored-disclosure-policy {
    color: var(--accent, #0a8754);
    text-decoration: none;
    font-size: 0.85rem;
    white-space: nowrap;
}
.sponsored-disclosure-policy:hover { text-decoration: underline; }
.blog-detail-page.is-sponsored .blog-type-badge::before { content: "★ "; color: #c89200; }

/* ── Sponsor Calculator Presets (Phase E — mortgage broker affiliates) ── */
.sponsor-preset-bar {
    display: block;
    margin: 0 0 16px;
    padding: 12px 14px;
    background: var(--bg-elev, #fff8e6);
    border: 1px solid var(--border, #e3c46a);
    border-left: 4px solid #c89200;
    border-radius: 6px;
    font-size: 0.9rem;
}
.sponsor-preset-label {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
    font-size: 0.78rem;
    color: var(--text-secondary, #666);
}
.sponsor-preset-tag {
    display: inline-block;
    padding: 2px 8px;
    background: #c89200;
    color: #fff;
    border-radius: 3px;
    font-weight: 600;
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: .04em;
}
.sponsor-preset-by { font-weight: 500; }
.sponsor-preset-body {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
}
.sponsor-preset-logo {
    height: 24px;
    width: auto;
    max-width: 100px;
    object-fit: contain;
    flex-shrink: 0;
}
.sponsor-preset-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 14px;
    background: #fff;
    border: 1px solid #c89200;
    border-radius: 999px;
    color: #5a4200;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.15s, transform 0.05s;
}
.sponsor-preset-pill:hover { background: #fff3cf; }
.sponsor-preset-pill:active { transform: scale(0.98); }
.sponsor-preset-product { font-weight: 600; }
.sponsor-preset-rate {
    color: #8a6a00;
    font-size: 0.85rem;
    padding-left: 8px;
    border-left: 1px solid #e3c46a;
}
.sponsor-preset-cta {
    display: inline-block;
    margin-left: auto;
    padding: 7px 16px;
    background: #c89200;
    color: #fff;
    border-radius: 4px;
    text-decoration: none;
    font-weight: 600;
    font-size: 0.88rem;
    transition: background 0.15s, box-shadow 0.2s;
}
.sponsor-preset-cta:hover { background: #a87800; color: #fff; }
.sponsor-preset-cta-pulse {
    box-shadow: 0 0 0 4px rgba(200, 146, 0, 0.35);
    animation: sponsor-preset-pulse 1.5s ease-out;
}
@keyframes sponsor-preset-pulse {
    0% { box-shadow: 0 0 0 0 rgba(200, 146, 0, 0.55); }
    100% { box-shadow: 0 0 0 12px rgba(200, 146, 0, 0); }
}
.sponsor-preset-disclaimer {
    margin: 8px 0 0;
    color: var(--text-secondary, #666);
    font-size: 0.72rem;
    line-height: 1.4;
}
@media (max-width: 600px) {
    .sponsor-preset-cta { margin-left: 0; width: 100%; text-align: center; }
}

/* ═══════════════════════════════════════════════════════════════════════
   HOME v2 — Dark Editorial Redesign (persona-switched, live widget)
   All selectors scoped under .home-v2 / .hv-* to avoid collision with
   legacy .home-* rules. Uses crimson accent + Fraunces serif + Plex Mono.
   ═══════════════════════════════════════════════════════════════════════ */

:root {
    --hv-crimson:       #DC2450;
    --hv-crimson-deep:  #7A0E28;
    --hv-crimson-glow:  rgba(220, 36, 80, 0.22);
    --hv-positive:      #4ADE80;
    --hv-bg:            #0a0507;
    --hv-bg-card:       #14090c;
    --hv-bg-card-soft:  rgba(255, 255, 255, 0.025);
    --hv-border:        rgba(255, 255, 255, 0.08);
    --hv-border-strong: rgba(255, 255, 255, 0.14);
    --hv-text:          #F5EEEF;
    --hv-text-muted:    #9B8B90;
    --hv-text-dim:      #6B5B60;
    --hv-serif:         'Fraunces', 'Canela', Georgia, 'Times New Roman', serif;
    --hv-mono:          'IBM Plex Mono', 'SF Mono', Menlo, Consolas, monospace;
    /* Hero gradient — theme-overridable (crimson defaults for SG theme). */
    --hv-hero-grad:
        radial-gradient(90% 120% at 18% 0%, var(--hv-crimson-deep) 0%, #2a0510 35%, #0e0408 70%, var(--hv-bg) 100%);
    --hv-hero-glow-grad:
        radial-gradient(ellipse at center, var(--hv-crimson-glow) 0%, transparent 55%);
    --hv-hero-grid-rgb: 255, 255, 255;
}

[data-theme="light"] {
    --hv-bg:            #FDF7F8;
    --hv-bg-card:       #FFFFFF;
    --hv-bg-card-soft:  rgba(30, 58, 95, 0.03);
    --hv-border:        rgba(0, 0, 0, 0.08);
    --hv-border-strong: rgba(0, 0, 0, 0.14);
    --hv-text:          #1A2238;
    --hv-text-muted:    #55627A;
    --hv-text-dim:      #94A0B4;
    /* Light theme — soft primary-blue tint fading into the off-white page. */
    --hv-hero-grad:
        radial-gradient(90% 120% at 18% 0%, rgba(46, 134, 171, 0.32) 0%, rgba(46, 134, 171, 0.14) 35%, rgba(46, 134, 171, 0.04) 70%, var(--hv-bg) 100%);
    --hv-hero-glow-grad:
        radial-gradient(ellipse at center, rgba(46, 134, 171, 0.18) 0%, transparent 55%);
    --hv-hero-grid-rgb: 30, 58, 95;
}

/* Light theme — Hero V surface overrides.
   Base .hv-* rules use hardcoded rgba(0,0,0,*) / rgba(255,255,255,*) tuned for dark
   backdrops; against the light off-white page they read as grey blobs / invisible
   states. Re-skin them with theme-aware values, scoped to [data-theme="light"] so
   dark + Singapore themes are untouched. */
[data-theme="light"] .home-v2 .hv-eyebrow {
    background: var(--hv-bg-card-soft);
}
[data-theme="light"] .home-v2 .hv-persona-btn.is-active {
    background: var(--hv-bg-card-soft);
}
[data-theme="light"] .home-v2 .hv-btn--primary:hover {
    background: #2C3650;
}
[data-theme="light"] .home-v2 .hv-btn--ghost:hover {
    background: rgba(30, 58, 95, 0.06);
}
[data-theme="light"] .home-v2 .hv-statstrip {
    background: var(--hv-bg-card-soft);
    border-color: var(--hv-border-strong);
}
[data-theme="light"] .home-v2 .hv-widget {
    background: var(--hv-bg-card);
    border-color: var(--hv-border-strong);
    box-shadow: 0 12px 40px -18px rgba(30, 58, 95, 0.25);
}
[data-theme="light"] .home-v2 .hv-chip {
    background: var(--hv-bg-card-soft);
}
[data-theme="light"] .home-v2 .hv-chip:hover {
    background: rgba(30, 58, 95, 0.06);
}

[data-theme="dark"] {
    --hv-bg:            #121318;
    --hv-bg-card:       #1C1F2E;
    --hv-bg-card-soft:  rgba(255, 255, 255, 0.025);
    --hv-border:        rgba(255, 255, 255, 0.08);
    --hv-border-strong: rgba(255, 255, 255, 0.14);
    --hv-text:          #E4E6EB;
    --hv-text-muted:    #9BA1AB;
    --hv-text-dim:      #6A7180;
    /* Dark theme — desaturated blue accent on deep navy. */
    --hv-hero-grad:
        radial-gradient(90% 120% at 18% 0%, #1f3a5a 0%, #141b2a 35%, #0a0d14 70%, var(--hv-bg) 100%);
    --hv-hero-glow-grad:
        radial-gradient(ellipse at center, rgba(93, 184, 212, 0.20) 0%, transparent 55%);
    --hv-hero-grid-rgb: 255, 255, 255;
}

.home-v2 {
    background: var(--hv-bg);
    color: var(--hv-text);
    font-family: inherit;
    padding: 0;
    margin: -2rem -1.5rem 0;
    min-height: 100vh;
}
@media (max-width: 1024px) { .home-v2 { margin: -1rem -1rem 0; } }

.home-v2 * { box-sizing: border-box; }

/* ─── HERO ─── */
.home-v2 .hv-hero {
    position: relative;
    padding: 48px 48px 40px;
    margin: 24px;
    border-radius: 24px;
    overflow: hidden;
    background: var(--hv-hero-grad);
    border: 1px solid var(--hv-border);
    isolation: isolate;
}
.home-v2 .hv-hero::before {
    content: '';
    position: absolute; inset: 0;
    background-image:
        linear-gradient(rgba(var(--hv-hero-grid-rgb), 0.04) 1px, transparent 1px),
        linear-gradient(90deg, rgba(var(--hv-hero-grid-rgb), 0.04) 1px, transparent 1px);
    background-size: 56px 56px;
    pointer-events: none;
    z-index: -1;
    mask-image: radial-gradient(ellipse 80% 100% at 50% 0%, #000 0%, transparent 70%);
}
.home-v2 .hv-hero::after {
    content: '';
    position: absolute;
    top: -30%; right: -10%;
    width: 60%; height: 140%;
    background: var(--hv-hero-glow-grad);
    pointer-events: none;
    z-index: -1;
}

.home-v2 .hv-hero-grid {
    display: grid;
    grid-template-columns: 1.1fr 1fr;
    gap: 48px;
    align-items: start;
}

/* Eyebrow caption — mono, dotted accent */
.home-v2 .hv-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 6px 14px 6px 10px;
    font-family: var(--hv-mono);
    font-size: 0.68rem;
    font-weight: 500;
    letter-spacing: 0.08em;
    color: var(--hv-text);
    background: rgba(255, 255, 255, 0.035);
    border: 1px solid var(--hv-border);
    border-radius: 100px;
    text-transform: uppercase;
}
.home-v2 .hv-eyebrow-dot {
    width: 7px; height: 7px; border-radius: 50%;
    background: var(--hv-positive);
    box-shadow: 0 0 10px var(--hv-positive);
    animation: hvPulse 2.2s ease-in-out infinite;
}
@keyframes hvPulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50%      { opacity: 0.5; transform: scale(0.85); }
}

/* Display headline — Fraunces italic */
.home-v2 .hv-h1 {
    font-family: var(--hv-serif);
    font-weight: 400;
    font-size: clamp(2.4rem, 5.4vw, 4.6rem);
    line-height: 0.98;
    letter-spacing: -0.02em;
    margin: 22px 0 18px;
    font-optical-sizing: auto;
}
.home-v2 .hv-h1-lead {
    display: block;
    font-style: normal;
    color: var(--hv-text);
}
.home-v2 .hv-h1-accent {
    display: block;
    font-style: italic;
    color: var(--hv-text);
    opacity: 0.88;
}

.home-v2 .hv-body {
    color: var(--hv-text-muted);
    font-size: 1rem;
    line-height: 1.55;
    max-width: 46ch;
    margin: 0 0 24px;
}

/* Persona picker — I'm a [Buyer] [Seller] [Investor] [Renter] */
.home-v2 .hv-persona-picker {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 6px;
    background: var(--hv-bg-card-soft);
    border: 1px solid var(--hv-border);
    border-radius: 14px;
    margin-bottom: 20px;
    flex-wrap: wrap;
}
.home-v2 .hv-persona-label {
    font-family: var(--hv-mono);
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--hv-text-dim);
    padding: 0 10px 0 6px;
}
.home-v2 .hv-persona-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    font-family: inherit;
    font-size: 0.88rem;
    font-weight: 500;
    color: var(--hv-text-muted);
    background: transparent;
    border: 1px solid transparent;
    border-radius: 9px;
    cursor: pointer;
    transition: color 0.15s, background 0.15s, border-color 0.15s;
}
.home-v2 .hv-persona-btn:hover { color: var(--hv-text); }
.home-v2 .hv-persona-btn.is-active {
    color: var(--hv-text);
    background: rgba(255, 255, 255, 0.055);
    border-color: var(--hv-border-strong);
}

/* CTAs */
.home-v2 .hv-hero-ctas {
    display: flex;
    gap: 12px;
    margin-bottom: 32px;
    flex-wrap: wrap;
}
.home-v2 .hv-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 22px;
    font-family: inherit;
    font-size: 0.92rem;
    font-weight: 500;
    text-decoration: none;
    border-radius: 10px;
    border: 1px solid transparent;
    cursor: pointer;
    transition: transform 0.12s ease, background 0.15s, border-color 0.15s;
    white-space: nowrap;
}
.home-v2 .hv-btn:hover { transform: translateY(-1px); }
.home-v2 .hv-btn--primary {
    background: var(--hv-text);
    color: var(--hv-bg);
}
.home-v2 .hv-btn--primary:hover { background: #FFFFFF; }
.home-v2 .hv-btn--ghost {
    background: transparent;
    color: var(--hv-text);
    border-color: var(--hv-border-strong);
}
.home-v2 .hv-btn--ghost:hover { background: rgba(255, 255, 255, 0.04); }
.home-v2 .hv-btn--sm { padding: 10px 16px; font-size: 0.85rem; }
.home-v2 .hv-btn.is-disabled {
    cursor: default;
    opacity: 0.8;
    pointer-events: none;
}

/* Stat strip */
.home-v2 .hv-statstrip {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
    padding: 20px 24px;
    background: rgba(0, 0, 0, 0.35);
    border: 1px solid var(--hv-border);
    border-radius: 14px;
    backdrop-filter: blur(6px);
}
.home-v2 .hv-stat-val {
    font-family: var(--hv-serif);
    font-weight: 400;
    font-size: 1.7rem;
    line-height: 1;
    color: var(--hv-text);
    letter-spacing: -0.01em;
    margin-bottom: 6px;
}
.home-v2 .hv-stat-label {
    font-family: var(--hv-mono);
    font-size: 0.65rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--hv-text-dim);
}
.home-v2 .hv-stat-delta {
    font-family: var(--hv-mono);
    font-size: 0.7rem;
    color: var(--hv-positive);
    margin-top: 6px;
}

/* Right: live widget card */
.home-v2 .hv-widget {
    position: relative;
    padding: 24px 26px;
    background: rgba(0, 0, 0, 0.4);
    border: 1px solid var(--hv-border);
    border-radius: 18px;
    backdrop-filter: blur(8px);
    overflow: hidden;
}
.home-v2 .hv-widget-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 22px;
}
.home-v2 .hv-widget-title {
    font-family: var(--hv-mono);
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--hv-text);
}
.home-v2 .hv-widget-updated {
    font-family: var(--hv-mono);
    font-size: 0.66rem;
    color: var(--hv-text-dim);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}
.home-v2 .hv-widget-kpi {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 18px;
}
.home-v2 .hv-kpi-val {
    font-family: var(--hv-serif);
    font-size: clamp(2.2rem, 4.2vw, 3rem);
    font-weight: 400;
    letter-spacing: -0.02em;
    line-height: 1;
}
.home-v2 .hv-kpi-sub {
    font-family: var(--hv-mono);
    font-size: 0.75rem;
    color: var(--hv-text-muted);
}
.home-v2 .hv-kpi-delta {
    display: inline-block;
    padding: 4px 10px;
    font-family: var(--hv-mono);
    font-size: 0.72rem;
    font-weight: 500;
    border-radius: 6px;
    margin-left: auto;
}
.home-v2 .hv-kpi-delta.is-pos {
    color: var(--hv-positive);
    background: rgba(74, 222, 128, 0.1);
}
.home-v2 .hv-kpi-delta.is-neg {
    color: #F87171;
    background: rgba(248, 113, 113, 0.1);
}
.home-v2 .hv-widget-spark {
    height: 120px;
    margin-bottom: 20px;
    min-height: 120px;
}
.home-v2 .hv-spark-svg { width: 100%; height: 100%; display: block; }

.home-v2 .hv-widget-districts {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
    padding-top: 16px;
    border-top: 1px solid var(--hv-border);
}
.home-v2 .hv-badge-label {
    font-family: var(--hv-mono);
    font-size: 0.6rem;
    color: var(--hv-text-dim);
    letter-spacing: 0.08em;
    margin-bottom: 4px;
    text-transform: uppercase;
}
.home-v2 .hv-badge-val {
    font-family: var(--hv-mono);
    font-size: 0.88rem;
    font-weight: 500;
    color: var(--hv-text);
}

/* Feature chip strip (bottom of hero) */
.home-v2 .hv-chips {
    display: flex;
    gap: 10px;
    margin-top: 32px;
    flex-wrap: wrap;
}
.home-v2 .hv-chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 18px;
    font-family: inherit;
    font-size: 0.85rem;
    color: var(--hv-text);
    text-decoration: none;
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid var(--hv-border);
    border-radius: 100px;
    transition: transform 0.12s, background 0.15s, border-color 0.15s;
}
.home-v2 .hv-chip::before {
    content: '';
    width: 14px; height: 14px;
    background: var(--hv-crimson);
    mask-image: radial-gradient(circle, #000 30%, transparent 60%);
    flex-shrink: 0;
    border-radius: 3px;
    opacity: 0.8;
}
.home-v2 .hv-chip:hover {
    background: rgba(255, 255, 255, 0.05);
    border-color: var(--hv-border-strong);
}

/* ─── GENERIC SECTION SHELL ─── */
.home-v2 .hv-section {
    padding: 64px 48px 40px;
    max-width: 1440px;
}
@media (max-width: 1024px) { .home-v2 .hv-section { padding: 48px 24px 28px; } }
@media (max-width: 480px)  { .home-v2 .hv-section { padding: 40px 16px 20px; } }

.home-v2 .hv-section-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    margin-bottom: 32px;
    gap: 24px;
    flex-wrap: wrap;
}
.home-v2 .hv-h2 {
    font-family: var(--hv-serif);
    font-weight: 400;
    font-size: clamp(1.8rem, 3.5vw, 2.6rem);
    line-height: 1.05;
    letter-spacing: -0.01em;
    margin: 8px 0 0;
    color: var(--hv-text);
}
.home-v2 .hv-h2 em {
    font-style: italic;
    opacity: 0.85;
}
.home-v2 .hv-section-link {
    font-family: var(--hv-mono);
    font-size: 0.8rem;
    color: var(--hv-text-muted);
    text-decoration: none;
    letter-spacing: 0.04em;
    transition: color 0.15s;
}
.home-v2 .hv-section-link:hover { color: var(--hv-text); }

/* ─── TAILORED CARDS ─── */
.home-v2 .hv-tailored-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
}
.home-v2 .hv-tailored-card {
    display: flex;
    flex-direction: column;
    padding: 24px;
    background: var(--hv-bg-card);
    border: 1px solid var(--hv-border);
    border-radius: 14px;
    text-decoration: none;
    color: var(--hv-text);
    transition: transform 0.15s, border-color 0.15s, background 0.15s;
    min-height: 210px;
}
.home-v2 .hv-tailored-card:hover {
    transform: translateY(-3px);
    border-color: var(--hv-border-strong);
    background: rgba(255, 255, 255, 0.025);
}
.home-v2 .hv-tailored-icon {
    width: 40px; height: 40px;
    border-radius: 9px;
    background: rgba(220, 36, 80, 0.15);
    border: 1px solid rgba(220, 36, 80, 0.3);
    margin-bottom: 16px;
    position: relative;
}
.home-v2 .hv-tailored-icon::after {
    content: '';
    position: absolute;
    inset: 10px;
    background: var(--hv-crimson);
    mask-repeat: no-repeat;
    mask-position: center;
    mask-size: contain;
}
.home-v2 .hv-tailored-icon[data-idx="0"]::after { mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2'><polyline points='22 7 13.5 15.5 8.5 10.5 2 17'/><polyline points='16 7 22 7 22 13'/></svg>"); }
.home-v2 .hv-tailored-icon[data-idx="1"]::after { mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2'><path d='M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z'/><polyline points='9 22 9 12 15 12 15 22'/></svg>"); }
.home-v2 .hv-tailored-icon[data-idx="2"]::after { mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2'><path d='M20.59 13.41 13.42 20.58a2 2 0 0 1-2.83 0L2 12V2h10l8.59 8.59a2 2 0 0 1 0 2.82z'/><line x1='7' y1='7' x2='7.01' y2='7'/></svg>"); }
.home-v2 .hv-tailored-icon[data-idx="3"]::after { mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2'><path d='M2 3h6a4 4 0 0 1 4 4v14a3 3 0 0 0-3-3H2z'/><path d='M22 3h-6a4 4 0 0 0-4 4v14a3 3 0 0 1 3-3h7z'/></svg>"); }
.home-v2 .hv-tailored-icon[data-idx="4"]::after { mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2'><path d='M21 10c0 7-9 13-9 13S3 17 3 10a9 9 0 0 1 18 0z'/><circle cx='12' cy='10' r='3'/></svg>"); }
.home-v2 .hv-tailored-icon[data-idx="5"]::after { mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2'><path d='M4 19.5A2.5 2.5 0 0 1 6.5 17H20'/><path d='M6.5 2H20v20H6.5A2.5 2.5 0 0 1 4 19.5v-15A2.5 2.5 0 0 1 6.5 2z'/></svg>"); }

.home-v2 .hv-tailored-title {
    font-family: inherit;
    font-weight: 600;
    font-size: 1.05rem;
    margin: 0 0 8px;
    color: var(--hv-text);
}
.home-v2 .hv-tailored-desc {
    font-size: 0.85rem;
    line-height: 1.5;
    color: var(--hv-text-muted);
    margin: 0 0 16px;
    flex: 1;
}
.home-v2 .hv-tailored-tags {
    display: flex; flex-wrap: wrap; gap: 6px;
    margin-top: auto;
}
.home-v2 .hv-tag {
    display: inline-block;
    padding: 4px 10px;
    font-family: var(--hv-mono);
    font-size: 0.65rem;
    color: var(--hv-text-muted);
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid var(--hv-border);
    border-radius: 5px;
}

/* ─── HUB GRID (Explore the Platform — persona-agnostic) ─── */
.home-v2 .hv-hubs-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 14px;
}
.home-v2 .hv-hub-card {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 18px 18px 16px;
    background: var(--hv-bg-card);
    border: 1px solid var(--hv-border);
    border-radius: 12px;
    text-decoration: none;
    color: var(--hv-text);
    transition: transform 0.15s, border-color 0.15s, background 0.15s;
    min-height: 96px;
}
.home-v2 .hv-hub-card:hover {
    transform: translateY(-2px);
    border-color: var(--hv-border-strong);
    background: rgba(255, 255, 255, 0.025);
}
.home-v2 .hv-hub-icon {
    flex: 0 0 36px;
    width: 36px; height: 36px;
    border-radius: 8px;
    background: rgba(220, 36, 80, 0.12);
    border: 1px solid rgba(220, 36, 80, 0.28);
    position: relative;
}
.home-v2 .hv-hub-icon::after {
    content: '';
    position: absolute;
    inset: 9px;
    background: var(--hv-crimson);
    mask-repeat: no-repeat;
    mask-position: center;
    mask-size: contain;
}
.home-v2 .hv-hub-icon[data-icon="calc"]::after    { mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2'><rect x='4' y='2' width='16' height='20' rx='2'/><line x1='8' y1='6' x2='16' y2='6'/><line x1='8' y1='10' x2='16' y2='10'/><line x1='8' y1='14' x2='10' y2='14'/><line x1='12' y1='14' x2='16' y2='14'/><line x1='8' y1='18' x2='10' y2='18'/><line x1='12' y1='18' x2='16' y2='18'/></svg>"); }
.home-v2 .hv-hub-icon[data-icon="insight"]::after { mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2'><circle cx='12' cy='12' r='9'/><path d='M12 7v5l3 2'/></svg>"); }
.home-v2 .hv-hub-icon[data-icon="map"]::after     { mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2'><polygon points='3 6 9 3 15 6 21 3 21 18 15 21 9 18 3 21'/><line x1='9' y1='3' x2='9' y2='18'/><line x1='15' y1='6' x2='15' y2='21'/></svg>"); }
.home-v2 .hv-hub-icon[data-icon="book"]::after    { mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2'><path d='M2 3h6a4 4 0 0 1 4 4v14a3 3 0 0 0-3-3H2z'/><path d='M22 3h-6a4 4 0 0 0-4 4v14a3 3 0 0 1 3-3h7z'/></svg>"); }
.home-v2 .hv-hub-icon[data-icon="house"]::after   { mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2'><path d='M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z'/><polyline points='9 22 9 12 15 12 15 22'/></svg>"); }
.home-v2 .hv-hub-icon[data-icon="rocket"]::after  { mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2'><path d='M5 13c-2 0-3 2-3 4 2 0 4-1 4-3'/><path d='M19 5c-3 0-7 2-10 5l-3 3 3 3 3-3c3-3 5-7 5-10z'/><circle cx='15' cy='9' r='1.2'/></svg>"); }
.home-v2 .hv-hub-icon[data-icon="grid"]::after    { mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2'><rect x='3' y='3' width='7' height='7'/><rect x='14' y='3' width='7' height='7'/><rect x='3' y='14' width='7' height='7'/><rect x='14' y='14' width='7' height='7'/></svg>"); }
.home-v2 .hv-hub-icon[data-icon="database"]::after{ mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2'><ellipse cx='12' cy='5' rx='8' ry='3'/><path d='M4 5v6c0 1.7 3.6 3 8 3s8-1.3 8-3V5'/><path d='M4 11v6c0 1.7 3.6 3 8 3s8-1.3 8-3v-6'/></svg>"); }
.home-v2 .hv-hub-icon[data-icon="advisor"]::after { mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2'><circle cx='12' cy='8' r='4'/><path d='M4 21c0-4 4-7 8-7s8 3 8 7'/></svg>"); }
.home-v2 .hv-hub-icon[data-icon="school"]::after  { mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2'><path d='M12 3 2 8l10 5 10-5-10-5z'/><path d='M6 10v5c0 2 3 3 6 3s6-1 6-3v-5'/><line x1='22' y1='8' x2='22' y2='14'/></svg>"); }
.home-v2 .hv-hub-icon[data-icon="mrt"]::after     { mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2'><rect x='5' y='3' width='14' height='16' rx='5'/><circle cx='9' cy='15' r='1.2'/><circle cx='15' cy='15' r='1.2'/><line x1='12' y1='3' x2='12' y2='9'/><line x1='8' y1='19' x2='6' y2='22'/><line x1='16' y1='19' x2='18' y2='22'/></svg>"); }
.home-v2 .hv-hub-icon[data-icon="hood"]::after    { mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2'><path d='M3 11l9-8 9 8v9H3z'/><circle cx='12' cy='14' r='2.5'/></svg>"); }
.home-v2 .hv-hub-icon[data-icon="wallet"]::after  { mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2'><rect x='3' y='6' width='18' height='14' rx='2'/><path d='M16 13h2'/><path d='M3 10h18'/></svg>"); }
.home-v2 .hv-hub-icon[data-icon="check"]::after   { mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2'><rect x='4' y='3' width='16' height='18' rx='2'/><polyline points='8 11 11 14 16 9'/></svg>"); }
.home-v2 .hv-hub-icon[data-icon="file"]::after    { mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2'><path d='M5 3h10l4 4v14H5z'/><polyline points='15 3 15 7 19 7'/><line x1='9' y1='12' x2='15' y2='12'/><line x1='9' y1='16' x2='13' y2='16'/></svg>"); }
.home-v2 .hv-hub-body {
    flex: 1;
    min-width: 0;
}
.home-v2 .hv-hub-title {
    font-family: inherit;
    font-weight: 600;
    font-size: 0.95rem;
    margin: 0 0 4px;
    color: var(--hv-text);
}
.home-v2 .hv-hub-desc {
    font-size: 0.78rem;
    line-height: 1.45;
    color: var(--hv-text-muted);
    margin: 0;
}
.home-v2 .hv-hub-count {
    position: absolute;
    top: 12px;
    right: 12px;
    padding: 2px 7px;
    font-family: var(--hv-mono);
    font-size: 0.62rem;
    font-weight: 600;
    color: var(--hv-crimson);
    background: rgba(220, 36, 80, 0.1);
    border: 1px solid rgba(220, 36, 80, 0.25);
    border-radius: 4px;
    letter-spacing: 0.04em;
}

/* ─── PROPERTY DATA GRID (5 categories, larger cards) ─── */
.home-v2 .hv-properties-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 14px;
}
.home-v2 .hv-prop-card {
    position: relative;
    display: flex;
    flex-direction: column;
    padding: 22px 20px 20px;
    background: var(--hv-bg-card);
    border: 1px solid var(--hv-border);
    border-radius: 14px;
    text-decoration: none;
    color: var(--hv-text);
    transition: transform 0.15s, border-color 0.15s, background 0.15s;
    min-height: 180px;
}
.home-v2 .hv-prop-card:hover {
    transform: translateY(-3px);
    border-color: var(--hv-border-strong);
    background: rgba(255, 255, 255, 0.025);
}
.home-v2 .hv-prop-icon {
    width: 44px; height: 44px;
    border-radius: 10px;
    background: rgba(220, 36, 80, 0.13);
    border: 1px solid rgba(220, 36, 80, 0.3);
    margin-bottom: 14px;
    position: relative;
}
.home-v2 .hv-prop-icon::after {
    content: '';
    position: absolute;
    inset: 11px;
    background: var(--hv-crimson);
    mask-repeat: no-repeat;
    mask-position: center;
    mask-size: contain;
}
.home-v2 .hv-prop-icon[data-icon="house"]::after      { mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2'><path d='M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z'/><polyline points='9 22 9 12 15 12 15 22'/></svg>"); }
.home-v2 .hv-prop-icon[data-icon="building"]::after   { mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2'><rect x='5' y='2' width='14' height='20' rx='1.5'/><line x1='9' y1='6' x2='9' y2='6.01'/><line x1='15' y1='6' x2='15' y2='6.01'/><line x1='9' y1='10' x2='9' y2='10.01'/><line x1='15' y1='10' x2='15' y2='10.01'/><line x1='9' y1='14' x2='9' y2='14.01'/><line x1='15' y1='14' x2='15' y2='14.01'/><path d='M10 22v-4h4v4'/></svg>"); }
.home-v2 .hv-prop-icon[data-icon="rocket"]::after     { mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2'><path d='M5 13c-2 0-3 2-3 4 2 0 4-1 4-3'/><path d='M19 5c-3 0-7 2-10 5l-3 3 3 3 3-3c3-3 5-7 5-10z'/><circle cx='15' cy='9' r='1.2'/></svg>"); }
.home-v2 .hv-prop-icon[data-icon="commercial"]::after { mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2'><rect x='4' y='3' width='16' height='18'/><line x1='8' y1='8' x2='10' y2='8'/><line x1='14' y1='8' x2='16' y2='8'/><line x1='8' y1='12' x2='10' y2='12'/><line x1='14' y1='12' x2='16' y2='12'/><line x1='8' y1='16' x2='10' y2='16'/><line x1='14' y1='16' x2='16' y2='16'/></svg>"); }
.home-v2 .hv-prop-icon[data-icon="landed"]::after     { mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2'><path d='M2 11l10-8 10 8v10H2z'/><path d='M8 21v-7h8v7'/><line x1='10' y1='17' x2='10' y2='17.01'/></svg>"); }
.home-v2 .hv-prop-title {
    font-family: inherit;
    font-weight: 600;
    font-size: 1rem;
    margin: 0 0 6px;
    color: var(--hv-text);
}
.home-v2 .hv-prop-desc {
    font-size: 0.78rem;
    line-height: 1.5;
    color: var(--hv-text-muted);
    margin: 0;
    flex: 1;
}
.home-v2 .hv-prop-count {
    position: absolute;
    top: 14px;
    right: 14px;
    padding: 2px 7px;
    font-family: var(--hv-mono);
    font-size: 0.62rem;
    font-weight: 600;
    color: var(--hv-crimson);
    background: rgba(220, 36, 80, 0.1);
    border: 1px solid rgba(220, 36, 80, 0.25);
    border-radius: 4px;
    letter-spacing: 0.04em;
}

/* ─── EXPLORE + COMPARE ─── */
.home-v2 .hv-explore-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}
.home-v2 .hv-panel {
    padding: 24px 28px 28px;
    background: var(--hv-bg-card);
    border: 1px solid var(--hv-border);
    border-radius: 16px;
}
.home-v2 .hv-panel-head {
    display: flex;
    gap: 14px;
    align-items: flex-start;
    margin-bottom: 20px;
}
.home-v2 .hv-panel-icon {
    width: 40px; height: 40px;
    border-radius: 10px;
    background: rgba(220, 36, 80, 0.12);
    border: 1px solid rgba(220, 36, 80, 0.25);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--hv-crimson);
    flex-shrink: 0;
}
.home-v2 .hv-panel-title {
    font-family: inherit;
    font-weight: 600;
    font-size: 1.05rem;
    margin: 0 0 4px;
    color: var(--hv-text);
}
.home-v2 .hv-panel-desc {
    font-size: 0.85rem;
    color: var(--hv-text-muted);
    margin: 0;
    line-height: 1.5;
}

.home-v2 .hv-search-row {
    display: flex;
    gap: 10px;
    margin-bottom: 14px;
}
.home-v2 .hv-input {
    flex: 1;
    padding: 12px 14px;
    font-family: inherit;
    font-size: 0.92rem;
    color: var(--hv-text);
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid var(--hv-border);
    border-radius: 9px;
    outline: none;
    transition: border-color 0.15s;
}
.home-v2 .hv-input:focus { border-color: var(--hv-crimson); }
.home-v2 .hv-input::placeholder { color: var(--hv-text-dim); }

.home-v2 .hv-popular {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: 20px;
}
.home-v2 .hv-popular-label {
    font-family: var(--hv-mono);
    font-size: 0.65rem;
    color: var(--hv-text-dim);
    letter-spacing: 0.08em;
}
.home-v2 .hv-popular-tags { display: flex; gap: 6px; flex-wrap: wrap; }
.home-v2 .hv-popular-tag {
    padding: 4px 10px;
    font-family: var(--hv-mono);
    font-size: 0.68rem;
    color: var(--hv-text-muted);
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid var(--hv-border);
    border-radius: 4px;
    letter-spacing: 0.04em;
}

.home-v2 .hv-compare-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-bottom: 14px;
}
.home-v2 .hv-select {
    width: 100%;
    padding: 12px 14px;
    font-family: inherit;
    font-size: 0.88rem;
    color: var(--hv-text);
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid var(--hv-border);
    border-radius: 9px;
    outline: none;
    cursor: pointer;
    transition: border-color 0.15s;
    appearance: none;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239B8B90' stroke-width='2'><polyline points='6 9 12 15 18 9'/></svg>");
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 16px;
    padding-right: 36px;
}
.home-v2 .hv-select:focus { border-color: var(--hv-crimson); }

/* ─── SAVED WORKSPACE ─── */
.home-v2 .hv-saved-panel {
    padding: 24px;
    background: var(--hv-bg-card);
    border: 1px dashed var(--hv-border-strong);
    border-radius: 14px;
}
.home-v2 .hv-saved-empty {
    display: flex;
    align-items: center;
    gap: 18px;
}
.home-v2 .hv-saved-empty-icon {
    width: 44px; height: 44px;
    border-radius: 10px;
    background: rgba(220, 36, 80, 0.1);
    border: 1px solid rgba(220, 36, 80, 0.22);
    color: var(--hv-crimson);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.home-v2 .hv-saved-empty-title {
    font-family: inherit;
    font-weight: 600;
    font-size: 1rem;
    margin: 0 0 4px;
    color: var(--hv-text);
}
.home-v2 .hv-saved-empty-desc {
    font-size: 0.85rem;
    color: var(--hv-text-muted);
    margin: 0;
}
.home-v2 .hv-saved-panel .hv-btn { margin-left: auto; }

/* ─── PREMIUM NEW LAUNCHES ─── */
.home-v2 .hv-nl-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
}
.home-v2 .hv-nl-card {
    position: relative;
    background: var(--hv-bg-card);
    border: 1px solid var(--hv-border);
    border-radius: 14px;
    overflow: hidden;
    text-decoration: none;
    color: var(--hv-text);
    transition: transform 0.15s, border-color 0.15s;
    display: flex;
    flex-direction: column;
}
.home-v2 .hv-nl-card:hover {
    transform: translateY(-3px);
    border-color: var(--hv-border-strong);
}
.home-v2 .hv-nl-badge {
    position: absolute;
    top: 16px; left: 16px;
    padding: 5px 10px;
    font-family: var(--hv-mono);
    font-size: 0.62rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    color: #FFF;
    background: var(--hv-crimson);
    border-radius: 4px;
    z-index: calc(var(--z-base) + 1);
    text-transform: uppercase;
}
.home-v2 .hv-nl-img {
    height: 180px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--hv-mono);
    font-size: 0.72rem;
    color: var(--hv-text-dim);
    background:
        repeating-linear-gradient(45deg, transparent 0, transparent 12px, rgba(255,255,255,0.02) 12px, rgba(255,255,255,0.02) 13px);
    border-bottom: 1px solid var(--hv-border);
    letter-spacing: 0.08em;
}
.home-v2 .hv-nl-body { padding: 18px 20px 20px; }
.home-v2 .hv-nl-loc {
    font-family: var(--hv-mono);
    font-size: 0.65rem;
    color: var(--hv-text-dim);
    letter-spacing: 0.1em;
    margin-bottom: 8px;
    text-transform: uppercase;
}
.home-v2 .hv-nl-row {
    display: flex; justify-content: space-between; align-items: baseline;
    gap: 12px; margin-bottom: 18px;
}
.home-v2 .hv-nl-title {
    font-family: var(--hv-serif);
    font-weight: 400;
    font-size: 1.3rem;
    margin: 0;
    color: var(--hv-text);
}
.home-v2 .hv-nl-psf {
    font-family: var(--hv-mono);
    font-size: 0.75rem;
    color: var(--hv-text);
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid var(--hv-border);
    border-radius: 5px;
    padding: 4px 8px;
}
.home-v2 .hv-nl-meta {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    gap: 10px;
    padding-top: 14px;
    border-top: 1px solid var(--hv-border);
    align-items: end;
}
.home-v2 .hv-nl-meta-label {
    font-family: var(--hv-mono);
    font-size: 0.58rem;
    color: var(--hv-text-dim);
    letter-spacing: 0.08em;
    margin-bottom: 3px;
    text-transform: uppercase;
}
.home-v2 .hv-nl-meta-val {
    font-family: inherit;
    font-size: 0.82rem;
    color: var(--hv-text);
}
.home-v2 .hv-nl-view {
    font-family: var(--hv-mono);
    font-size: 0.72rem;
    color: var(--hv-crimson);
    text-align: right;
    align-self: center;
}

/* ─── NEWS EDITORIAL ─── */
.home-v2 .hv-news-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 14px;
}
.home-v2 .hv-news-card {
    background: var(--hv-bg-card);
    border: 1px solid var(--hv-border);
    border-radius: 14px;
    overflow: hidden;
    text-decoration: none;
    color: var(--hv-text);
    transition: transform 0.15s, border-color 0.15s;
    display: flex;
    flex-direction: column;
}
.home-v2 .hv-news-card:hover {
    transform: translateY(-3px);
    border-color: var(--hv-border-strong);
}
.home-v2 .hv-news-hero {
    height: 140px;
    position: relative;
    display: flex;
    align-items: flex-start;
    padding: 16px;
    border-bottom: 1px solid var(--hv-border);
}
.home-v2 .hv-news-grad-1 .hv-news-hero { background: linear-gradient(135deg, #7A0E28 0%, #2a0510 65%, #0e0408 100%); }
.home-v2 .hv-news-grad-2 .hv-news-hero { background: linear-gradient(135deg, #3A0B5A 0%, #10051F 65%, #0a0408 100%); }
.home-v2 .hv-news-grad-3 .hv-news-hero { background: linear-gradient(135deg, #0B3A27 0%, #051F17 65%, #040805 100%); }
.home-v2 .hv-news-badge {
    display: inline-block;
    padding: 5px 10px;
    font-family: var(--hv-mono);
    font-size: 0.62rem;
    font-weight: 500;
    letter-spacing: 0.1em;
    color: var(--hv-text);
    background: rgba(0, 0, 0, 0.4);
    border: 1px solid var(--hv-border);
    border-radius: 4px;
    text-transform: uppercase;
}
.home-v2 .hv-news-body { padding: 14px 16px 16px; }
.home-v2 .hv-news-title {
    font-family: var(--hv-serif);
    font-weight: 400;
    font-size: 1.02rem;
    line-height: 1.2;
    margin: 0 0 10px;
    color: var(--hv-text);
}
.home-v2 .hv-news-summary {
    font-size: 0.78rem;
    line-height: 1.5;
    color: var(--hv-text-muted);
    margin: 0 0 12px;
}
.home-v2 .hv-news-date {
    font-family: var(--hv-mono);
    font-size: 0.68rem;
    color: var(--hv-text-dim);
    letter-spacing: 0.06em;
}

/* ─── RESPONSIVE ─── */
@media (max-width: 1100px) {
    .home-v2 .hv-news-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 1024px) {
    .home-v2 .hv-hero { padding: 40px 32px 32px; margin: 16px; }
    .home-v2 .hv-hero-grid { grid-template-columns: 1fr; gap: 32px; }
    .home-v2 .hv-tailored-grid { grid-template-columns: repeat(2, 1fr); }
    .home-v2 .hv-hubs-grid { grid-template-columns: repeat(3, 1fr); }
    .home-v2 .hv-properties-grid { grid-template-columns: repeat(3, 1fr); }
    .home-v2 .hv-explore-grid { grid-template-columns: 1fr; }
    .home-v2 .hv-nl-grid { grid-template-columns: repeat(2, 1fr); }
    .home-v2 .hv-news-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 768px) {
    .home-v2 .hv-hero { padding: 32px 22px 28px; margin: 12px; border-radius: 18px; }
    .home-v2 .hv-statstrip { padding: 16px; gap: 14px; }
    .home-v2 .hv-stat-val { font-size: 1.35rem; }
    .home-v2 .hv-persona-picker { width: 100%; overflow-x: auto; flex-wrap: nowrap; }
    .home-v2 .hv-chips { overflow-x: auto; flex-wrap: nowrap; padding-bottom: 6px; }
    .home-v2 .hv-chip { flex-shrink: 0; }
    .home-v2 .hv-nl-grid { grid-template-columns: 1fr; }
    .home-v2 .hv-news-grid { grid-template-columns: repeat(2, 1fr); }
    .home-v2 .hv-saved-empty { flex-direction: column; align-items: flex-start; text-align: left; }
    .home-v2 .hv-saved-panel .hv-btn { margin-left: 0; }
}
@media (max-width: 480px) {
    .home-v2 { margin: -1rem -0.5rem 0; }
    .home-v2 .hv-hero { padding: 28px 18px 24px; margin: 8px; border-radius: 16px; }
    .home-v2 .hv-statstrip { grid-template-columns: repeat(2, 1fr); }
    .home-v2 .hv-tailored-grid { grid-template-columns: 1fr; }
    .home-v2 .hv-hubs-grid { grid-template-columns: repeat(2, 1fr); }
    .home-v2 .hv-properties-grid { grid-template-columns: repeat(2, 1fr); }
    .home-v2 .hv-compare-grid { grid-template-columns: 1fr; }
    .home-v2 .hv-widget-districts { grid-template-columns: repeat(2, 1fr); }
    .home-v2 .hv-news-grid { grid-template-columns: 1fr; }
    .home-v2 .hv-btn { flex: 1; justify-content: center; }
}
@media (hover: none) {
    .home-v2 .hv-tailored-card:hover,
    .home-v2 .hv-hub-card:hover,
    .home-v2 .hv-prop-card:hover,
    .home-v2 .hv-nl-card:hover,
    .home-v2 .hv-news-card:hover,
    .home-v2 .hv-btn:hover { transform: none; }
}

/* Ensure MPA layout H1 is hidden when empty */
.home-v2 ~ .mpa-page-h1:empty,
.mpa-page-h1:empty { display: none; }

/* ── MRT Hub page — stations grouped by line with MRT brand colours ── */
.mrt-hub-page .section-vpad { max-width: 1200px; margin: 0 auto; padding: 24px 16px; }

.mrt-hub-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 24px;
    flex-wrap: wrap;
    margin-bottom: 28px;
    padding-bottom: 20px;
    border-bottom: 1px solid var(--border);
}
.mrt-hub-intro {
    font-size: 0.95rem;
    line-height: 1.55;
    color: var(--text-secondary);
    max-width: 620px;
    margin: 0;
}
.mrt-hub-stats {
    display: flex;
    gap: 28px;
    flex-shrink: 0;
}
.mrt-hub-stat { display: flex; flex-direction: column; line-height: 1; }
.mrt-hub-stat-num {
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 4px;
}
.mrt-hub-stat-label {
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--text-secondary);
}

/* One block per line */
.mrt-line-block { margin-bottom: 28px; }
.mrt-line-head {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 12px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--border);
}
.mrt-line-dot {
    width: 12px; height: 12px;
    border-radius: 50%;
    background: var(--mrt-line-color, #888);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--mrt-line-color, #888) 18%, transparent);
    flex-shrink: 0;
}
.mrt-line-name {
    margin: 0;
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-primary);
}
.mrt-line-count {
    margin-left: auto;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-secondary);
}

/* Grid of station cards */
.mrt-station-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 8px;
}

.mrt-station-card {
    position: relative;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-left: 3px solid var(--mrt-line-color, #888);
    border-radius: var(--radius);
    text-decoration: none;
    color: inherit;
    transition: border-color 0.15s, box-shadow 0.15s, transform 0.15s;
    min-height: 46px;
}
.mrt-station-card:hover,
.mrt-station-card:focus {
    border-color: var(--mrt-line-color, var(--primary));
    box-shadow: 0 2px 8px rgba(0,0,0,0.18);
    transform: translateY(-1px);
    outline: none;
}
.mrt-station-code {
    flex-shrink: 0;
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    padding: 3px 7px;
    border-radius: 4px;
    background: var(--mrt-line-color, #888);
    color: #fff;
    line-height: 1.1;
    min-width: 38px;
    text-align: center;
}
.mrt-station-name {
    flex: 1;
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--text-primary);
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.mrt-interchange-tag {
    flex-shrink: 0;
    font-size: 0.65rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 2px 6px;
    border-radius: 3px;
    background: color-mix(in srgb, var(--mrt-line-color, #888) 14%, transparent);
    color: var(--mrt-line-color, var(--text-secondary));
    font-weight: 600;
    border: 1px solid color-mix(in srgb, var(--mrt-line-color, #888) 30%, transparent);
}
.mrt-station-card.is-interchange {
    background: linear-gradient(90deg, var(--bg-card) 0%, color-mix(in srgb, var(--mrt-line-color, #888) 4%, var(--bg-card)) 100%);
}

.mrt-hub-empty {
    padding: 40px 20px;
    text-align: center;
    color: var(--text-secondary);
}

@media (max-width: 640px) {
    .mrt-hub-head { flex-direction: column; }
    .mrt-hub-stats { width: 100%; justify-content: space-between; gap: 12px; }
    .mrt-hub-stat-num { font-size: 1.4rem; }
    .mrt-station-grid { grid-template-columns: 1fr 1fr; }
    .mrt-station-card { padding: 8px 10px; min-height: 40px; }
    .mrt-station-name { font-size: 0.8rem; }
}

/* ═══════════════════════════════════════════════════════════════════════
   HOME v2 — S45 enhancement pass
   (skyline silhouette, stat sparklines, chip scroll affordance, widget
    skeleton, trust row, how-it-works, saved-search cards, auth nudge,
    FAQ accordion, typeahead empty state, smart-compare, scroll flash)
   ═══════════════════════════════════════════════════════════════════════ */

/* D1 — Subtle district skyline silhouette behind hero copy. Pure CSS, no
   external asset, decorative only. Sits behind the grid overlay. */
.home-v2 .hv-skyline {
    position: absolute;
    left: 0; right: 0; bottom: 0;
    height: 38%;
    z-index: 0;
    pointer-events: none;
    opacity: 0.14;
    background:
        linear-gradient(to top, rgba(var(--hv-hero-grid-rgb), 0.55), transparent 80%),
        repeating-linear-gradient(
            90deg,
            transparent 0 12px,
            rgba(var(--hv-hero-grid-rgb), 0.35) 12px 13px,
            transparent 13px 40px
        );
    -webkit-mask-image: linear-gradient(to top,
        rgba(0, 0, 0, 1) 0%,
        rgba(0, 0, 0, 0.85) 25%,
        rgba(0, 0, 0, 0.3) 60%,
        transparent 100%);
            mask-image: linear-gradient(to top,
        rgba(0, 0, 0, 1) 0%,
        rgba(0, 0, 0, 0.85) 25%,
        rgba(0, 0, 0, 0.3) 60%,
        transparent 100%);
}
.home-v2 .hv-skyline::before,
.home-v2 .hv-skyline::after {
    content: '';
    position: absolute;
    bottom: 0;
    background:
        linear-gradient(to right,
            transparent 0, rgba(var(--hv-hero-grid-rgb), 0.18) 8%, rgba(var(--hv-hero-grid-rgb), 0.28) 20%,
            rgba(var(--hv-hero-grid-rgb), 0.12) 42%, rgba(var(--hv-hero-grid-rgb), 0.32) 60%,
            rgba(var(--hv-hero-grid-rgb), 0.1) 78%, rgba(var(--hv-hero-grid-rgb), 0.26) 100%);
    -webkit-mask-image: linear-gradient(to top, black 60%, transparent 100%);
            mask-image: linear-gradient(to top, black 60%, transparent 100%);
}
.home-v2 .hv-skyline::before { left: 0; right: 0; height: 70px; }
.home-v2 .hv-skyline::after  { left: 0; right: 0; height: 120px; opacity: 0.5; }

/* Lift hero content above the skyline layer. */
.home-v2 .hv-hero-grid,
.home-v2 .hv-chips-wrap { position: relative; z-index: var(--z-base); }

/* D2 — Hero stat-strip sparklines */
.home-v2 .hv-stat-spark {
    height: 20px;
    margin-top: 6px;
    color: var(--hv-text-muted);
    opacity: 0.7;
}
.home-v2 .hv-stat-spark svg { width: 100%; height: 100%; display: block; }

/* D3 — Chip strip scroll affordance (fade + chevron on mobile overflow) */
.home-v2 .hv-chips-wrap {
    position: relative;
    margin-top: 32px;
}
.home-v2 .hv-chips-wrap .hv-chips {
    margin-top: 0;
}
.home-v2 .hv-chips-fade {
    position: absolute;
    top: 50%;
    right: 0;
    transform: translateY(-50%);
    width: 44px;
    text-align: right;
    font-family: var(--hv-mono);
    font-size: 1.2rem;
    color: var(--hv-text-muted);
    background: linear-gradient(to right, transparent, var(--hv-bg) 60%);
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.2s;
}
@media (max-width: 900px) {
    .home-v2 .hv-chips-wrap .hv-chips {
        flex-wrap: nowrap;
        overflow-x: auto;
        scrollbar-width: none;
        padding-right: 36px;
    }
    .home-v2 .hv-chips-wrap .hv-chips::-webkit-scrollbar { display: none; }
    .home-v2 .hv-chips-wrap .hv-chip { flex-shrink: 0; }
    .home-v2 .hv-chips-fade { opacity: 1; }
}

/* D4 — Accent discipline: soften chip dot + saved-card hover so crimson is
   reserved for primary CTA, persona-active state, and deltas. */
.home-v2 .hv-chip::before {
    background: var(--hv-text-muted);
    opacity: 0.5;
}
.home-v2 .hv-chip:hover::before {
    background: var(--hv-crimson);
    opacity: 0.85;
}

/* D5 — Widget skeleton loader (shimmer) */
.home-v2 .hv-widget-skeleton {
    position: absolute;
    inset: 16px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    pointer-events: none;
    z-index: 0;
}
.home-v2 .hv-widget[data-state="ready"] .hv-widget-skeleton,
.home-v2 .hv-widget[data-preloaded="1"] .hv-widget-skeleton {
    display: none;
}
.home-v2 .hv-skel {
    border-radius: 6px;
    background: linear-gradient(90deg,
        rgba(var(--hv-hero-grid-rgb), 0.05) 0%,
        rgba(var(--hv-hero-grid-rgb), 0.12) 50%,
        rgba(var(--hv-hero-grid-rgb), 0.05) 100%);
    background-size: 200% 100%;
    animation: hvShimmer 1.6s ease-in-out infinite;
}
.home-v2 .hv-skel--line  { height: 12px; width: 55%; }
.home-v2 .hv-skel--val   { height: 56px; width: 72%; border-radius: 10px; }
.home-v2 .hv-skel--spark { height: 80px; width: 100%; border-radius: 10px; opacity: 0.7; }
.home-v2 .hv-skel-row    { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.home-v2 .hv-skel--badge { height: 42px; border-radius: 8px; }
.home-v2 .hv-widget[data-state="error"] .hv-widget-skeleton::after {
    content: 'Live data unavailable — try again shortly';
    position: absolute; bottom: 8px; left: 0; right: 0;
    text-align: center;
    font-family: var(--hv-mono);
    font-size: 0.75rem;
    color: var(--hv-text-muted);
}
@keyframes hvShimmer {
    0%   { background-position:  100% 0; }
    100% { background-position: -100% 0; }
}
.home-v2 .hv-widget { position: relative; }

/* UX5 — Anon sign-up nudge inside the widget card */
.home-v2 .hv-widget-nudge {
    margin-top: 16px;
    padding: 10px 14px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    border-radius: 10px;
    background: rgba(var(--hv-hero-grid-rgb), 0.04);
    border: 1px dashed var(--hv-border);
}
.home-v2 .hv-widget-nudge-text {
    font-size: 0.82rem;
    color: var(--hv-text-muted);
}
.home-v2 .hv-widget-nudge-link {
    font-family: var(--hv-mono);
    font-size: 0.78rem;
    letter-spacing: 0.02em;
    color: var(--hv-crimson);
    text-decoration: none;
    white-space: nowrap;
    border-bottom: 1px solid transparent;
    transition: border-color 0.15s;
}
.home-v2 .hv-widget-nudge-link:hover { border-color: var(--hv-crimson); }

/* C2 — Trust row (authoritative data sources) */
.home-v2 .hv-trust {
    padding: 20px 48px;
    margin: 0 24px;
    border-bottom: 1px solid var(--hv-border);
}
.home-v2 .hv-trust-inner {
    display: flex;
    align-items: center;
    gap: 20px;
    flex-wrap: wrap;
    max-width: 1440px;
    margin: 0 auto;
}
.home-v2 .hv-trust-label {
    font-family: var(--hv-mono);
    font-size: 0.72rem;
    letter-spacing: 0.08em;
    color: var(--hv-text-dim);
}
.home-v2 .hv-trust-list {
    display: flex;
    gap: 18px;
    list-style: none;
    padding: 0;
    margin: 0;
    flex-wrap: wrap;
}
.home-v2 .hv-trust-item {
    font-family: var(--hv-serif);
    font-size: 1rem;
    font-weight: 500;
    color: var(--hv-text);
    text-decoration: none;
    letter-spacing: 0.01em;
    border-bottom: 1px solid transparent;
    padding-bottom: 2px;
    transition: color 0.15s, border-color 0.15s;
}
.home-v2 .hv-trust-item:hover {
    color: var(--hv-crimson);
    border-color: var(--hv-crimson);
}
.home-v2 .hv-trust-note {
    margin-left: auto;
    font-family: var(--hv-mono);
    font-size: 0.72rem;
    color: var(--hv-text-dim);
}
@media (max-width: 768px) {
    .home-v2 .hv-trust { padding: 16px 16px; margin: 0 16px; }
    .home-v2 .hv-trust-note { margin-left: 0; width: 100%; }
    .home-v2 .hv-trust-list { gap: 12px; }
    .home-v2 .hv-trust-item { font-size: 0.92rem; }
}

/* D6 — News card hero (real image if present, typographic initial otherwise) */
.home-v2 .hv-news-card .hv-news-hero {
    position: relative;
    overflow: hidden;
}
.home-v2 .hv-news-card .hv-news-hero img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    position: absolute; inset: 0;
    display: block;
    filter: saturate(0.9) contrast(1.05);
    transition: transform 0.35s ease-out;
}
.home-v2 .hv-news-card:hover .hv-news-hero img { transform: scale(1.03); }
.home-v2 .hv-news-card.has-img .hv-news-hero::after {
    content: '';
    position: absolute; inset: 0;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.55) 0%, transparent 55%);
    pointer-events: none;
}
.home-v2 .hv-news-initial {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--hv-serif);
    font-weight: 400;
    font-size: 5rem;
    color: rgba(var(--hv-hero-grid-rgb), 0.35);
    letter-spacing: -0.02em;
    pointer-events: none;
}

/* W5 — New-launch typographic initial (replaces [IMG · NAME] placeholder) */
.home-v2 .hv-nl-initial {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--hv-serif);
    font-size: 5rem;
    font-weight: 400;
    color: rgba(var(--hv-hero-grid-rgb), 0.38);
    letter-spacing: -0.02em;
}
.home-v2 .hv-nl-img {
    position: relative;
    overflow: hidden;
}
.home-v2 .hv-nl-grad-1 { background: linear-gradient(135deg, #4b1020, #120508); }
.home-v2 .hv-nl-grad-2 { background: linear-gradient(135deg, #0f2030, #07111a); }
.home-v2 .hv-nl-grad-3 { background: linear-gradient(135deg, #1a2a1f, #05110b); }

/* UX4 — Saved searches card grid (authed state) */
.home-v2 .hv-saved-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 12px;
}
.home-v2 .hv-saved-card {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    background: var(--hv-bg-card);
    border: 1px solid var(--hv-border);
    border-radius: 10px;
    color: var(--hv-text);
    text-decoration: none;
    transition: border-color 0.15s, transform 0.15s;
}
.home-v2 .hv-saved-card:hover {
    border-color: var(--hv-border-strong);
    transform: translateY(-1px);
}
.home-v2 .hv-saved-card-icon {
    color: var(--hv-crimson);
    flex-shrink: 0;
    display: inline-flex;
}
.home-v2 .hv-saved-card-name {
    font-size: 0.92rem;
    font-weight: 500;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* UX2 — Compare smart-prefill feedback */
.home-v2 .hv-compare-actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: 14px;
}
.home-v2 .hv-select.is-prefilled {
    animation: hvPulseSoft 0.9s ease-out;
}
.home-v2 .hv-select.is-missing,
.home-v2 .hv-input.is-missing {
    animation: hvShake 0.4s ease-in-out;
    border-color: var(--hv-crimson) !important;
}
@keyframes hvPulseSoft {
    0%   { box-shadow: 0 0 0 0 rgba(74, 222, 128, 0.4); }
    100% { box-shadow: 0 0 0 8px transparent; }
}
@keyframes hvShake {
    0%, 100% { transform: translateX(0); }
    25%      { transform: translateX(-4px); }
    75%      { transform: translateX(4px); }
}

/* UX3 — Typeahead keyboard active item */
.home-v2 .typeahead-item.is-active {
    background: rgba(var(--hv-hero-grid-rgb), 0.06);
    color: var(--hv-crimson);
}

/* C7 — FAQ accordion */
.home-v2 .hv-faq-list {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px 16px;
    max-width: 1440px;
    align-items: start;
}
@media (max-width: 768px) {
    .home-v2 .hv-faq-list { grid-template-columns: 1fr; }
}
.home-v2 .hv-faq-a a { color: var(--hv-crimson); text-decoration: underline; text-underline-offset: 2px; }
.home-v2 .hv-faq-a a:hover { color: var(--hv-text); }
.home-v2 .hv-faq-item {
    background: var(--hv-bg-card);
    border: 1px solid var(--hv-border);
    border-radius: 12px;
    transition: border-color 0.15s;
}
.home-v2 .hv-faq-item[open] {
    border-color: var(--hv-border-strong);
}
.home-v2 .hv-faq-q {
    padding: 18px 22px;
    font-family: inherit;
    font-weight: 600;
    font-size: 1rem;
    color: var(--hv-text);
    list-style: none;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
}
.home-v2 .hv-faq-q::-webkit-details-marker { display: none; }
.home-v2 .hv-faq-plus {
    font-family: var(--hv-mono);
    font-size: 1.2rem;
    color: var(--hv-crimson);
    transition: transform 0.2s;
    flex-shrink: 0;
}
.home-v2 .hv-faq-item[open] .hv-faq-plus {
    transform: rotate(45deg);
}
.home-v2 .hv-faq-a {
    padding: 0 22px 18px;
    margin: 0;
    font-size: 0.94rem;
    line-height: 1.65;
    color: var(--hv-text-muted);
}

/* UX6 — Scroll-triggered persona-confirmation flash on tailored grid */
.home-v2 .hv-tailored-grid.hv-flash .hv-tailored-card {
    animation: hvBorderPulse 1.6s ease-out;
}
@keyframes hvBorderPulse {
    0%   { border-color: var(--hv-border); }
    35%  { border-color: var(--hv-crimson); box-shadow: 0 0 0 0 var(--hv-crimson-glow); }
    100% { border-color: var(--hv-border); box-shadow: 0 0 0 6px transparent; }
}

/* C5 — Visually promote "All reports & articles →" from quiet link to CTA */
.home-v2 .hv-section-link--cta {
    padding: 8px 16px;
    border: 1px solid var(--hv-border-strong);
    border-radius: 100px;
    color: var(--hv-text);
    transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.home-v2 .hv-section-link--cta:hover {
    background: rgba(var(--hv-hero-grid-rgb), 0.05);
    border-color: var(--hv-crimson);
    color: var(--hv-crimson);
}

/* Popular tags were spans before — now real <a> pills */
.home-v2 .hv-popular-tag {
    display: inline-block;
    padding: 4px 10px;
    border-radius: 100px;
    font-family: var(--hv-mono);
    font-size: 0.72rem;
    letter-spacing: 0.05em;
    color: var(--hv-text-muted);
    background: rgba(var(--hv-hero-grid-rgb), 0.04);
    border: 1px solid var(--hv-border);
    text-decoration: none;
    transition: color 0.15s, border-color 0.15s, background 0.15s;
}
.home-v2 .hv-popular-tag:hover {
    color: var(--hv-text);
    border-color: var(--hv-border-strong);
    background: rgba(var(--hv-hero-grid-rgb), 0.07);
}

/* ============================================================
   Area Sponsor program — agent cards on detail pages, marketing
   page, /agent/apply form, /agent/dashboard editor, admin Agents tab.
   ============================================================ */

.area-sponsor-section {
    margin: 20px 0 24px;
}
.area-sponsor-heading {
    font-size: 14px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text-secondary);
    margin: 0 0 10px;
}
.area-sponsor-card {
    display: grid;
    grid-template-columns: 96px 1fr;
    gap: 16px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 16px 18px;
    transition: transform 0.15s, box-shadow 0.15s, border-color 0.15s;
}
.area-sponsor-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.06);
}
@media (hover: none) {
    .area-sponsor-card:hover { transform: none; box-shadow: none; }
}
.area-sponsor-card .asc-img {
    width: 96px;
    height: 96px;
    border-radius: 50%;
    object-fit: cover;
    background: var(--bg-soft, #f5f5f5);
}
.area-sponsor-card .asc-initials {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 32px;
    font-weight: 600;
    color: var(--text-secondary);
}
.area-sponsor-card .asc-name {
    font-size: 17px;
    font-weight: 600;
    margin: 0 0 4px;
    color: var(--text-primary);
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}
.cea-verified-badge {
    background: #e7f7e9;
    color: #1e7e34;
    border: 1px solid #c3e6cb;
    border-radius: 999px;
    padding: 2px 8px;
    font-size: 11px;
    font-weight: 600;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 3px;
    line-height: 1.4;
}
.cea-verified-badge:hover { background: #d4ecda; }
.area-sponsor-card .asc-tagline {
    font-size: 13px;
    color: var(--text-secondary);
    margin: 0 0 6px;
}
.area-sponsor-card .asc-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    font-size: 12px;
    color: var(--text-secondary);
    margin-bottom: 8px;
}
.area-sponsor-card .asc-bio {
    font-size: 13px;
    color: var(--text-primary);
    line-height: 1.5;
    margin: 6px 0 12px;
}
.area-sponsor-card .asc-cta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.asc-btn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 6px 12px;
    border-radius: var(--radius-sm, 6px);
    font-size: 13px;
    font-weight: 500;
    text-decoration: none;
    border: 1px solid var(--border);
    background: var(--bg-soft, #f8f9fa);
    color: var(--text-primary);
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s;
}
.asc-btn:hover { background: var(--bg-hover, #eef0f3); }
.asc-btn-callback {
    background: var(--primary, #2563eb);
    color: white;
    border-color: var(--primary, #2563eb);
}
.asc-btn-callback:hover { background: var(--primary-hover, #1d4ed8); }

@media (max-width: 600px) {
    .area-sponsor-card {
        grid-template-columns: 64px 1fr;
        padding: 12px 14px;
    }
    .area-sponsor-card .asc-img,
    .area-sponsor-card .asc-initials {
        width: 64px;
        height: 64px;
    }
}

.area-sponsor-marketing .lede {
    font-size: 18px;
    line-height: 1.5;
    color: var(--text-primary);
    max-width: 720px;
}
.area-sponsor-marketing .pricing-table {
    width: 100%;
    border-collapse: collapse;
    margin: 16px 0;
}
.area-sponsor-marketing .pricing-table th,
.area-sponsor-marketing .pricing-table td {
    padding: 12px;
    border-bottom: 1px solid var(--border);
    text-align: left;
}
.area-sponsor-marketing .pricing-table thead th {
    background: var(--bg-secondary, #f1f3f5);
    font-weight: 700;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-primary);
    border-bottom: 2px solid var(--primary);
}
.area-sponsor-marketing .pricing-table tbody th[scope="row"] {
    font-weight: 700;
    color: var(--text-primary);
    background: transparent;
    text-transform: none;
    letter-spacing: 0;
    font-size: 15px;
}
.area-sponsor-marketing .pricing-table tbody td .price {
    font-weight: 600;
    color: var(--text-primary);
}
.area-sponsor-marketing .pricing-table td.is-popular {
    background: rgba(var(--primary-rgb, 37, 99, 235), 0.08);
    border-left: 2px solid var(--primary);
    border-right: 2px solid var(--primary);
}
.area-sponsor-marketing .pricing-table td.is-popular .price {
    color: var(--primary);
    font-weight: 700;
}
.area-sponsor-marketing .pricing-table td.is-popular .badge {
    display: inline-block;
    margin-bottom: 4px;
}
.area-sponsor-marketing .pricing-table .badge {
    display: inline-block;
    background: var(--primary, #2563eb);
    color: #fff;
    font-size: 9px;
    padding: 3px 7px;
    border-radius: 999px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-weight: 700;
    line-height: 1.2;
    white-space: nowrap;
}
/* Dark + Singapore themes: stronger header band + popular-cell tint so labels are legible on dark bg. */
[data-theme="dark"] .area-sponsor-marketing .pricing-table thead th,
[data-theme="singapore"] .area-sponsor-marketing .pricing-table thead th {
    background: rgba(255, 255, 255, 0.06);
    color: var(--text-primary);
}
[data-theme="dark"] .area-sponsor-marketing .pricing-table td.is-popular,
[data-theme="singapore"] .area-sponsor-marketing .pricing-table td.is-popular {
    background: rgba(var(--primary-rgb), 0.14);
}
.area-sponsor-marketing .how-it-works {
    list-style: none;
    padding-left: 0;
}
.area-sponsor-marketing .how-it-works li {
    padding: 10px 0;
    border-bottom: 1px solid var(--border);
    line-height: 1.5;
}
.area-sponsor-marketing .how-it-works li:last-child { border-bottom: none; }

.agent-apply-page .form-section {
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 16px 18px;
    margin: 18px 0;
    background: var(--bg-card);
}
.agent-apply-page .form-section legend {
    font-size: 13px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text-secondary);
    padding: 0 6px;
}
.segment-radio-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 10px;
    margin-top: 8px;
}
.segment-radio {
    display: block;
    padding: 12px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm, 6px);
    cursor: pointer;
}
.segment-radio:has(input:checked) {
    border-color: var(--primary, #2563eb);
    background: rgba(37, 99, 235, 0.04);
}
.segment-radio input { margin-right: 8px; }
.segment-radio .segment-label {
    font-weight: 600;
    display: inline-block;
    margin-bottom: 4px;
}
.segment-radio .segment-desc {
    display: block;
    font-size: 12px;
    color: var(--text-secondary);
}
.scope-status {
    margin-top: 8px;
    font-size: 13px;
    padding: 8px 12px;
    border-radius: var(--radius-sm, 6px);
    background: var(--bg-soft, #f8f9fa);
    min-height: 18px;
}
.scope-status.available  { background: #e7f7e9; color: #1e7e34; }
.scope-status.taken      { background: #fff4d5; color: #856404; }
.scope-status.invalid    { background: #fde2e2; color: #b91c1c; }
.scope-status.waitlisted { background: #e0eafc; color: #1e3a8a; }
.scope-status.checking   { color: var(--text-secondary); }
.agent-apply-page .hint { display: block; color: var(--text-secondary); margin-top: 4px; font-size: 12px; }

.agent-dashboard-page .status-banner {
    border-radius: var(--radius);
    padding: 14px 18px;
    margin: 0 0 18px;
    font-size: 14px;
    line-height: 1.5;
}
.status-banner.status-pending          { background: #fff7d6; border: 1px solid #f0c869; color: #5a3d05; }
.status-banner.status-approvedInactive { background: #e0eafc; border: 1px solid #93b3e0; color: #1e3a8a; }
.status-banner.status-active           { background: #e7f7e9; border: 1px solid #6dc187; color: #1e6f3b; }
.status-banner.status-rejected         { background: #fde2e2; border: 1px solid #d96a6a; color: #8a1818; }
.status-banner.status-suspended        { background: #ececec; border: 1px solid #999; color: #444; }
.status-banner.status-pendingChanges   { background: #fff7d6; border: 1px solid #f0c869; color: #5a3d05; margin-top: 12px; }

.agent-dashboard-page .subscription-status-box {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 16px 18px;
    margin-bottom: 20px;
}
.agent-dashboard-page .subscription-status-box dl.kv {
    display: grid;
    grid-template-columns: max-content 1fr;
    gap: 6px 18px;
    margin: 8px 0 12px;
    font-size: 13px;
}
.agent-dashboard-page .subscription-status-box dt { color: var(--text-secondary); }
.agent-dashboard-page .subscription-status-box dd { margin: 0; }

.agent-dashboard-page .form-row {
    display: grid;
    grid-template-columns: 200px 1fr;
    gap: 12px;
    align-items: center;
    margin: 10px 0;
}
.agent-dashboard-page .form-row label {
    font-weight: 500;
    color: var(--text-primary);
}
.agent-dashboard-page .form-row label .ok    { color: #1e7e34; font-size: 11px; margin-left: 6px; }
.agent-dashboard-page .form-row label .muted { color: var(--text-secondary); font-size: 11px; margin-left: 6px; }
.agent-dashboard-page .form-row input,
.agent-dashboard-page .form-row textarea {
    width: 100%;
    padding: 8px 10px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm, 6px);
    font-size: 14px;
    box-sizing: border-box;
}
.agent-dashboard-page .analytics-tiles {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 10px;
}
.agent-dashboard-page .analytics-tiles .kpi-card {
    text-align: center;
    padding: 14px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
}
.agent-dashboard-page .analytics-tiles .kpi-card strong {
    display: block;
    font-size: 24px;
    font-weight: 600;
    color: var(--primary, #2563eb);
}
.agent-dashboard-page .invoice-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 10px;
}
.agent-dashboard-page .invoice-table th,
.agent-dashboard-page .invoice-table td {
    padding: 10px 12px;
    border-bottom: 1px solid var(--border);
    text-align: left;
}
@media (max-width: 720px) {
    .agent-dashboard-page .form-row {
        grid-template-columns: 1fr;
        gap: 4px;
    }
}

#tab-admin-agents .admin-filter-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}
#tab-admin-agents .admin-pill {
    padding: 6px 12px;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: var(--bg-card);
    cursor: pointer;
    font-size: 13px;
}
#tab-admin-agents .admin-pill.active {
    background: var(--primary, #2563eb);
    color: white;
    border-color: var(--primary, #2563eb);
}
#tab-admin-agents .pill-count {
    margin-left: 4px;
    background: rgba(0,0,0,0.08);
    padding: 1px 6px;
    border-radius: 999px;
    font-size: 11px;
}
#tab-admin-agents .admin-pill.active .pill-count {
    background: rgba(255,255,255,0.25);
}
#tab-admin-agents .pending-tag {
    display: inline-block;
    background: #fff4d5;
    color: #856404;
    border: 1px solid #f0c869;
    padding: 1px 6px;
    font-size: 10px;
    border-radius: 999px;
    margin-left: 6px;
    font-weight: 500;
    text-transform: uppercase;
}

/* ==========================================================================
   CSP HARDENING — utility classes that replace high-frequency inline style=""
   attributes across views. Each class collapses 5–25 duplicate inline-style
   strings into a single rule, reducing the surface CSP `style-src-attr` has
   to allow via `'unsafe-inline'`. Path to fully removing `'unsafe-inline'`
   from `style-src-attr` is tracked in api/index.php near the CSP header.
   ========================================================================== */
.u-text-secondary-body {
    font-size: 0.88rem;
    line-height: 1.7;
    color: var(--text-secondary);
}
.u-text-secondary-list {
    font-size: 0.88rem;
    line-height: 1.9;
    color: var(--text-secondary);
    padding-left: 20px;
}
.u-chip-sm {
    border-radius: 20px;
    font-size: 0.75rem;
    padding: 4px 12px;
}
.u-form-label-sm {
    font-weight: 600;
    font-size: 0.85rem;
    display: block;
    margin-bottom: 4px;
}
.u-text-right { text-align: right; }

/* Admin: SEO type pill (used by admin-tabs/sitemap.php + content-generator.php).
   Was 21 duplicate inline `style="border-radius:20px;font-size:0.75rem;padding:4px 12px;"`
   declarations — consolidated into the existing .seo-type-pill semantic class. */
.seo-type-pill {
    border-radius: 20px;
    font-size: 0.75rem;
    padding: 4px 12px;
}

/* ─────────────────────────────────────────────────────────────────
   Persona Hub (Best For) — phase 2 styling.
   Pill icons (check/tilde/cross) are WCAG 1.4.1 supplements for
   color-blind users alongside the green/amber/red color tokens. */

.sc-best-for-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
    margin: 24px 0;
    padding: 12px 16px;
    background: var(--card-bg, rgba(255,255,255,0.03));
    border: 1px solid var(--border, rgba(255,255,255,0.08));
    border-radius: 8px;
}
.sc-best-for-label { font-weight: 600; margin-right: 4px; color: var(--text-muted, #999); }
.sc-best-for-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border-radius: 16px;
    font-size: 0.82rem;
    text-decoration: none;
    border: 1px solid currentColor;
    transition: transform 0.12s, background 0.12s;
}
.sc-best-for-pill:hover, .sc-best-for-pill:focus { transform: translateY(-1px); text-decoration: none; }
.sc-best-for-pill-icon { font-weight: 700; font-size: 0.9rem; line-height: 1; }
.sc-best-for-pill-green { color: #2e8b3d; background: rgba(46, 139, 61, 0.08); }
.sc-best-for-pill-green:hover { background: rgba(46, 139, 61, 0.18); }
.sc-best-for-pill-amber { color: #b07900; background: rgba(176, 121, 0, 0.08); }
.sc-best-for-pill-amber:hover { background: rgba(176, 121, 0, 0.18); }
.sc-best-for-pill-red { color: #b73a3a; background: rgba(183, 58, 58, 0.08); }
.sc-best-for-pill-red:hover { background: rgba(183, 58, 58, 0.18); }

.sc-best-for-list { margin: 32px 0; padding: 20px; background: var(--card-bg, rgba(255,255,255,0.03)); border-radius: 8px; }
.sc-best-for-list-heading { margin: 0 0 16px; font-size: 1.1rem; }
.sc-best-for-list-grid {
    list-style: none; margin: 0; padding: 0;
    display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px;
}
.sc-best-for-list-item { padding: 12px 14px; border-left: 3px solid #2e8b3d; border-radius: 4px; background: rgba(255,255,255,0.02); }
.sc-best-for-list-item-amber { border-left-color: #b07900; }
.sc-best-for-list-item-red { border-left-color: #b73a3a; }
.sc-best-for-list-item a { text-decoration: none; color: inherit; }
.sc-best-for-list-item a:hover { text-decoration: underline; }
.sc-best-for-list-snippet { margin: 6px 0 0; font-size: 0.85rem; color: var(--text-muted, #999); }
.sc-best-for-list-footer { margin: 16px 0 0; text-align: right; }

.bf-hub-intro { max-width: 720px; margin: 0 auto 32px; text-align: center; color: var(--text-muted, #999); }
.bf-category { margin: 32px 0; }
.bf-category h2 { margin: 0 0 16px; font-size: 1.25rem; padding-bottom: 8px; border-bottom: 2px solid var(--accent, #4a90e2); }
.bf-cat-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 14px; }
.bf-card {
    display: flex; flex-direction: column;
    padding: 14px 16px; border-radius: 8px;
    background: var(--card-bg, rgba(255,255,255,0.04));
    border: 1px solid var(--border, rgba(255,255,255,0.08));
    text-decoration: none;
    transition: transform 0.12s, border-color 0.12s;
}
.bf-card:hover, .bf-card:focus { transform: translateY(-2px); border-color: var(--accent, #4a90e2); text-decoration: none; }
.bf-card-title { margin: 0 0 6px; font-size: 0.95rem; }
.bf-card-def { margin: 0 0 10px; font-size: 0.78rem; color: var(--text-muted, #999); line-height: 1.4; }
.bf-card-link { margin-top: auto; font-size: 0.75rem; color: var(--accent, #4a90e2); font-weight: 500; }
.bf-card.bf-pill-red { border-left: 3px solid #b73a3a; }
.bf-card.bf-pill-amber { border-left: 3px solid #b07900; }
.bf-card.bf-pill-green { border-left: 3px solid #2e8b3d; }

.bf-detail-header { margin: 0 0 20px; }
.bf-detail-meta { margin: 0 0 8px; }
.bf-pill { display: inline-block; padding: 4px 10px; border-radius: 14px; font-size: 0.78rem; font-weight: 500; }
.bf-pill-green { background: rgba(46, 139, 61, 0.15); color: #2e8b3d; }
.bf-pill-amber { background: rgba(176, 121, 0, 0.15); color: #b07900; }
.bf-pill-red { background: rgba(183, 58, 58, 0.15); color: #b73a3a; }
.bf-detail-definition { font-size: 1.05rem; color: var(--text-muted, #aaa); margin: 0; }
.bf-detail-intro { margin: 24px 0; line-height: 1.65; }
.bf-detail-layout { display: grid; grid-template-columns: 1fr 280px; gap: 32px; margin-top: 24px; }
@media (max-width: 900px) { .bf-detail-layout { grid-template-columns: 1fr; } }
.bf-segment-tabs { display: flex; gap: 8px; margin: 0 0 20px; border-bottom: 1px solid var(--border, rgba(255,255,255,0.08)); }
.bf-segment-tab { padding: 8px 16px; text-decoration: none; color: var(--text-muted, #999); border-bottom: 2px solid transparent; margin-bottom: -1px; }
.bf-segment-tab.active { color: var(--text, #fff); border-bottom-color: var(--accent, #4a90e2); font-weight: 600; }
.bf-result-grid { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px; }
.bf-result-card { background: var(--card-bg, rgba(255,255,255,0.03)); border-radius: 8px; border-left: 3px solid #2e8b3d; transition: transform 0.12s; }
.bf-result-card-amber { border-left-color: #b07900; }
.bf-result-card-red { border-left-color: #b73a3a; }
.bf-result-card:hover { transform: translateY(-2px); }
.bf-result-card-link { display: block; padding: 14px 16px; text-decoration: none; color: inherit; }
.bf-result-card h3 { margin: 0 0 6px; font-size: 1rem; }
.bf-result-card-meta { display: flex; flex-wrap: wrap; gap: 8px; font-size: 0.75rem; color: var(--text-muted, #999); margin: 4px 0; }
.bf-result-card-meta span { padding: 2px 8px; background: rgba(255,255,255,0.04); border-radius: 4px; }
.bf-result-card-snippet { margin: 8px 0 0; font-size: 0.85rem; color: var(--text-muted, #aaa); line-height: 1.5; }
.bf-detail-bottom-cta { margin: 40px 0 20px; padding: 20px; background: var(--card-bg, rgba(255,255,255,0.03)); border-radius: 8px; }
.bf-detail-bottom-cta h2 { margin: 0 0 14px; font-size: 1.1rem; }
.bf-cta-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 10px; }
.bf-cta-tile { display: flex; flex-direction: column; padding: 12px; background: rgba(74, 144, 226, 0.08); border: 1px solid rgba(74, 144, 226, 0.3); border-radius: 6px; text-decoration: none; color: inherit; }
.bf-cta-tile:hover { background: rgba(74, 144, 226, 0.18); text-decoration: none; }
.bf-cta-tile-label { font-size: 0.7rem; color: var(--text-muted, #999); text-transform: uppercase; letter-spacing: 0.05em; }
.bf-cta-tile-name { margin-top: 4px; font-size: 0.9rem; font-weight: 500; text-transform: capitalize; }
.bf-detail-sidebar { align-self: start; position: sticky; top: 20px; }
.bf-sidebar-card { padding: 16px; background: var(--card-bg, rgba(255,255,255,0.03)); border-radius: 8px; border: 1px solid var(--border, rgba(255,255,255,0.08)); }
.bf-sidebar-card h3 { margin: 0 0 10px; font-size: 0.95rem; }
.bf-sidebar-list { list-style: none; padding: 0; margin: 0; }
.bf-sidebar-list li { padding: 6px 0; border-bottom: 1px solid var(--border, rgba(255,255,255,0.05)); }
.bf-sidebar-list li:last-child { border-bottom: none; }
.bf-sidebar-list a { color: var(--accent, #4a90e2); text-decoration: none; font-size: 0.88rem; }
.bf-sidebar-list a:hover { text-decoration: underline; }
.bf-detail-empty { padding: 20px; text-align: center; color: var(--text-muted, #999); background: var(--card-bg, rgba(255,255,255,0.02)); border-radius: 6px; }
.bf-detail-disclaimer { margin: 28px 0 0; padding: 10px 14px; font-size: 0.78rem; color: var(--text-muted, #888); border-top: 1px solid var(--border, rgba(255,255,255,0.05)); }
.bf-detail-results-heading { margin: 16px 0; font-size: 1.05rem; }

/* Mega-nav secondary persona-hub link — sits next to the primary hub link
   in the .mega-foot of condo / blog / advisor / insights / newlaunches panels.
   Softer color than the primary so the main hub stays visually dominant. */
.mega-foot-link-secondary {
    color: var(--text-muted, #999) !important;
    margin-right: 12px;
    font-size: 0.85rem;
}
.mega-foot-link-secondary:hover { color: var(--accent, #4a90e2) !important; }

/* Home page Persona Hub callout — single inline strip under the trust row */
.hv-bf-callout {
    max-width: 1200px;
    margin: 24px auto 8px;
    padding: 14px 20px;
    text-align: center;
    background: linear-gradient(to right, rgba(74, 144, 226, 0.05), rgba(74, 144, 226, 0.10), rgba(74, 144, 226, 0.05));
    border-top: 1px solid rgba(74, 144, 226, 0.15);
    border-bottom: 1px solid rgba(74, 144, 226, 0.15);
    font-size: 0.95rem;
}
.hv-bf-callout-text { color: var(--text-muted, #999); margin-right: 8px; }
.hv-bf-callout-link { font-weight: 600; text-decoration: none; }
.hv-bf-callout-link:hover { text-decoration: underline; }