/* RUX UI Cleanup — overrides Folium inline styles with high specificity */

:root {
    --rux-clean-bg: #0f172a;
    --rux-clean-surface: rgba(17, 24, 39, 0.9);
    --rux-clean-surface-2: rgba(30, 41, 59, 0.84);
    --rux-clean-border: rgba(148, 163, 184, 0.28);
    --rux-clean-text: #e5e7eb;
    --rux-clean-muted: #94a3b8;
    --rux-clean-accent: #4f46e5;
    --rux-clean-accent-2: #22c55e;
    --rux-clean-shadow: 0 20px 40px rgba(2, 6, 23, 0.4);
}

html,
body {
    background: radial-gradient(circle at 12% 10%, rgba(30, 41, 59, 0.28), transparent 42%), var(--rux-clean-bg);
    color: var(--rux-clean-text);
}

body.rux-integrated-main #rux-main-shell {
    gap: 8px;
    padding: 8px;
    left: 8px !important;
    top: 8px !important;
    right: 8px !important;
    bottom: 8px !important;
    border-radius: 24px !important;
    /* No outer shell border — it drew a 2nd rounded line just outside each corner card
       (the "double block"). The depth shadow stays for float. */
    border: none !important;
}

/* ── Safety Layers — toolbar button (#rux-safety-btn) opens the POI-style flyout
   (#rux-safety-panel reuses .rux-poi-panel). Only the active-state + popup here. ── */
#rux-safety-btn.rux-maptool-active {
    background: linear-gradient(135deg, rgba(34,197,94,0.22), rgba(16,185,129,0.16)) !important;
    border-color: rgba(52,211,153,0.5) !important;
    color: #d1fae5 !important;
    box-shadow: 0 0 14px rgba(34,197,94,0.28) !important;
}
.rux-safety-popup .leaflet-popup-content { font: 500 11px/1.45 Inter, system-ui, sans-serif; margin: 9px 12px; }

body.rux-integrated-main #rux-left-console {
    border: 1px solid var(--rux-clean-border);
    background: linear-gradient(180deg, var(--rux-clean-surface), rgba(15, 23, 42, 0.88));
    box-shadow: var(--rux-clean-shadow);
    border-radius: 18px;
}

body.rux-integrated-main #rux-right-hero {
    border: 1px solid var(--rux-clean-border);
    border-radius: 18px;
    box-shadow: var(--rux-clean-shadow);
    overflow: hidden;
}

body.rux-integrated-main #rux-left-ai-slot {
    display: flex !important;
    flex-direction: column !important;
    flex: 1 1 auto !important;
    min-height: 0 !important;
    padding: 8px !important;
    overflow: hidden !important;
}

body.rux-integrated-main #rux-left-intel {
    padding: 12px 12px 8px 12px !important;
}

body.rux-integrated-main .rux-left-context-row {
    margin-bottom: 8px !important;
}

body.rux-integrated-main #rux-left-console .rux-left-context-dot {
    display: none !important;
}

body.rux-integrated-main .rux-primary-kpi {
    gap: 6px 10px !important;
    margin-bottom: 8px !important;
}

body.rux-integrated-main .rux-primary-kpi-value {
    line-height: 0.92 !important;
}

body.rux-integrated-main .rux-micro-signals {
    display: none !important;
}

body.rux-integrated-main #rux-ai-panel[data-integrated="1"] {
    border: 1px solid var(--rux-clean-border) !important;
    background: linear-gradient(180deg, rgba(15, 23, 42, 0.92), rgba(17, 24, 39, 0.88)) !important;
    box-shadow: none !important;
    border-radius: 18px !important;
}

body.rux-integrated-main #rux-ai-panel,
body.rux-integrated-main #rux-ai-panel .rux-ai-footer,
body.rux-integrated-main #rux-ai-panel .rux-ai-commandbar,
body.rux-integrated-main #rux-ai-panel .rux-ai-command-input-shell,
body.rux-integrated-main #rux-ai-panel #rux-ai-input,
body.rux-integrated-main #rux-ai-panel #rux-ai-send-btn {
    visibility: visible !important;
    pointer-events: auto !important;
}

body.rux-integrated-main .leaflet-top.leaflet-left,
body.rux-integrated-main .leaflet-bottom.leaflet-left {
    left: 14px !important;
}

body.rux-integrated-main .rux-plot-panel {
    left: calc(var(--rux-right-left) + 18px) !important;
}

body.rux-integrated-main #rux-ai-panel[data-integrated="1"].rux-bottom-console {
    position: absolute !important;
    left: 50% !important;
    bottom: 12px !important;
    transform: translateX(-50%) !important;
    width: min(920px, calc(100% - 74px)) !important;
    height: auto !important;
    max-height: none !important;
    min-height: 0 !important;
    flex: 0 0 auto !important;
    z-index: 9400 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

body.rux-integrated-main #rux-ai-panel[data-integrated="1"].rux-bottom-console .rux-ai-body {
    display: none !important;
}

body.rux-integrated-main #rux-ai-panel[data-integrated="1"].rux-bottom-console .rux-ai-footer {
    border-top: 0 !important;
    padding: 0 !important;
    gap: 0 !important;
    background: transparent !important;
}

body.rux-integrated-main #rux-ai-panel[data-integrated="1"].rux-bottom-console .rux-ai-commandbar {
    min-height: 54px !important;
    padding: 6px 8px !important;
    border-radius: 16px !important;
    border: 1px solid rgba(206, 220, 241, 0.28) !important;
    background: linear-gradient(180deg, rgba(150, 167, 196, 0.24), rgba(116, 130, 156, 0.2)) !important;
    box-shadow: 0 12px 24px rgba(2, 6, 23, 0.34) !important;
    backdrop-filter: blur(14px) saturate(120%) !important;
    -webkit-backdrop-filter: blur(14px) saturate(120%) !important;
}

body.rux-integrated-main #rux-ai-panel[data-integrated="1"].rux-bottom-console .rux-ai-commandbar::before {
    display: none !important;
}

body.rux-integrated-main #rux-ai-panel[data-integrated="1"].rux-bottom-console #rux-ai-send-btn {
    min-height: 40px !important;
    width: 96px !important;
    flex: 0 0 96px !important;
    border-radius: 999px !important;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0) 46%),
        linear-gradient(135deg, rgba(134, 239, 172, 0.22), rgba(34, 197, 94, 0.16)) !important;
    border: 1px solid rgba(187, 247, 208, 0.22) !important;
    color: #eefbf2 !important;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.08),
        0 6px 14px rgba(5, 46, 22, 0.16) !important;
}

body.rux-integrated-main #rux-ai-panel[data-integrated="1"].rux-bottom-console #rux-ai-send-btn .rux-ai-primary-icon {
    color: currentColor !important;
}

body.rux-integrated-main #rux-ai-panel[data-integrated="1"].rux-bottom-console #rux-ai-send-btn .rux-ai-primary-icon svg {
    width: 18px !important;
    height: 18px !important;
    display: block !important;
}

body.rux-integrated-main #rux-ai-panel[data-integrated="1"].rux-bottom-console #rux-ai-send-label {
    font-size: 12px !important;
    font-weight: 600 !important;
    letter-spacing: 0.01em !important;
}

body.rux-integrated-main #rux-ai-panel[data-integrated="1"].rux-bottom-console #rux-ai-input {
    min-height: 24px !important;
    max-height: 40px !important;
}

body.rux-integrated-main #rux-left-stats-card {
    border: 1px solid rgba(148, 163, 184, 0.24);
    background: linear-gradient(180deg, rgba(15, 23, 42, 0.66), rgba(15, 23, 42, 0.44));
    border-radius: 14px;
    padding: 12px;
    color: #dbe6f4;
}

body.rux-integrated-main #rux-left-stats-card .rux-left-stats-title {
    font-size: 11px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #97abc6;
    margin-bottom: 8px;
}

body.rux-integrated-main #rux-left-stats-card .rux-left-stats-grid {
    display: grid;
    grid-template-columns: 1fr auto;
    row-gap: 8px;
    column-gap: 8px;
}

body.rux-integrated-main #rux-left-stats-card .rux-left-stats-key {
    font-size: 12px;
    color: #9fb0c8;
}

body.rux-integrated-main #rux-left-stats-card .rux-left-stats-val {
    font-size: 12px;
    font-weight: 600;
    color: #e8f0fb;
}

body.rux-integrated-main #rux-left-stats-card .rux-left-stats-subtitle {
    margin-top: 10px;
    margin-bottom: 6px;
    font-size: 11px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #91a8c8;
}

body.rux-integrated-main #rux-left-stats-card .rux-left-driver-row {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    column-gap: 8px;
    row-gap: 4px;
    margin-bottom: 6px;
}

body.rux-integrated-main #rux-left-stats-card .rux-left-driver-label {
    font-size: 11px;
    color: #9fb0c8;
}

body.rux-integrated-main #rux-left-stats-card .rux-left-driver-val {
    font-size: 11px;
    font-weight: 600;
    color: #deebff;
}

body.rux-integrated-main #rux-left-stats-card .rux-left-driver-bar {
    grid-column: 1 / span 2;
    height: 5px;
    border-radius: 999px;
    background: rgba(148, 163, 184, 0.22);
    overflow: hidden;
}

body.rux-integrated-main #rux-left-stats-card .rux-left-driver-fill {
    display: block;
    height: 100%;
    border-radius: 999px;
    background: linear-gradient(90deg, #16a34a, #86efac);
}

#rux-ai-panel .rux-ai-header {
    border-bottom: 1px solid rgba(148, 163, 184, 0.22) !important;
}

#rux-ai-panel .rux-ai-title-main {
    letter-spacing: 0.02em;
}

#rux-ai-panel #rux-ai-messages {
    scrollbar-color: rgba(148, 163, 184, 0.4) transparent !important;
}

#rux-ai-panel #rux-ai-messages .rux-ai-message-inner {
    border: 1px solid rgba(148, 163, 184, 0.18);
}

#rux-ai-panel #rux-ai-messages .rux-ai-message-user .rux-ai-message-inner {
    border: none;
    box-shadow: 0 10px 20px rgba(14, 165, 233, 0.16);
}

#rux-ai-input {
    border: 1px solid rgba(148, 163, 184, 0.28) !important;
    background: rgba(15, 23, 42, 0.7) !important;
}

#rux-ai-input:focus {
    border-color: rgba(129, 140, 248, 0.88) !important;
    box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.22) !important;
}

#rux-ai-send-btn {
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0) 46%),
        linear-gradient(135deg, rgba(134, 239, 172, 0.24), rgba(34, 197, 94, 0.18)) !important;
    border: 1px solid rgba(187, 247, 208, 0.22) !important;
    color: #eefbf2 !important;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.08),
        0 8px 18px rgba(5, 46, 22, 0.16) !important;
    backdrop-filter: blur(12px) saturate(118%) !important;
    -webkit-backdrop-filter: blur(12px) saturate(118%) !important;
}

#rux-ai-plus-btn,
#rux-ai-mic-btn,
#rux-ai-speak-btn,
#rux-ai-clear-mini-btn,
#rux-clear-chat-btn,
#rux-export-log-btn,
#rux-realtime-btn {
    border: 1px solid rgba(148, 163, 184, 0.32) !important;
    background: rgba(30, 41, 59, 0.62) !important;
    color: #e2e8f0 !important;
}

#rux-ai-plus-btn:hover,
#rux-ai-mic-btn:hover,
#rux-ai-speak-btn:hover,
#rux-ai-clear-mini-btn:hover,
#rux-clear-chat-btn:hover,
#rux-export-log-btn:hover,
#rux-realtime-btn:hover {
    background: rgba(51, 65, 85, 0.7) !important;
    border-color: rgba(203, 213, 225, 0.44) !important;
}

#rux-district-strip {
    gap: 8px !important;
}

#rux-district-strip .rux-district-chip {
    border: 1px solid rgba(148, 163, 184, 0.34) !important;
    background: rgba(30, 41, 59, 0.62) !important;
    color: #e2e8f0 !important;
}

#rux-district-strip .rux-district-chip[aria-pressed="true"] {
    border-color: rgba(129, 140, 248, 0.8) !important;
    box-shadow: 0 8px 18px rgba(79, 70, 229, 0.22) !important;
}

#rux-plot-panel {
    border: 1px solid rgba(148, 163, 184, 0.28);
    box-shadow: var(--rux-clean-shadow);
}

/* Give the left slot in Room Composition the same dark chart background */
.rux-prop-donut-box {
    background: rgba(8, 14, 24, 0.42) !important;
    border: 1px solid rgba(148, 163, 184, 0.10);
    border-radius: 14px;
}

/* Room Composition: equal columns, stretch to same height, compact right panel */
.rux-prop-layout {
    grid-template-columns: 1fr 1fr !important;
    align-items: stretch !important;
}
.rux-prop-features {
    justify-content: space-between !important;
    height: 100% !important;
    padding: 0 !important;
}
.rux-prop-feat-row {
    padding: 3px 0 !important;
}
.rux-prop-feat-val {
    font-size: 9px !important;
}

/* Amenities: radar dominant (3fr), stats secondary (2fr) */
.rux-amenity-layout {
    display: grid;
    grid-template-columns: 3fr 2fr;
    gap: 12px;
    align-items: stretch;
}
.rux-amenity-radar-box {
    min-height: 280px;
}
.rux-amenity-radar-box canvas {
    width: 100% !important;
    height: 100% !important;
}
.rux-amenity-stats {
    display: flex;
    flex-direction: column;
    gap: 0;
    padding: 4px 2px;
    justify-content: space-between;
    height: 100%;
}
.rux-amenity-stat-row {
    padding: 4px 0;
    border-bottom: 1px solid rgba(148, 163, 184, 0.07);
}
.rux-amenity-stat-row:last-child {
    border-bottom: none;
}
.rux-amenity-stat-head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: 3px;
}
.rux-amenity-stat-cat {
    font-size: 9px;
    font-weight: 700;
    color: rgba(148, 163, 184, 0.82);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}
.rux-amenity-stat-val {
    font-size: 10px;
    font-weight: 700;
    color: rgba(226, 232, 240, 0.90);
    white-space: nowrap;
}
.rux-amenity-stat-track {
    width: 100%;
    height: 3px;
    background: rgba(148, 163, 184, 0.10);
    border-radius: 999px;
    overflow: hidden;
}
.rux-amenity-stat-fill {
    height: 100%;
    border-radius: 999px;
    background: linear-gradient(90deg, rgba(167, 243, 208, 0.70), rgba(134, 239, 172, 0.50));
    transition: width 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

#rux-plot-close {
    border: 1px solid rgba(148, 163, 184, 0.35);
    background: rgba(30, 41, 59, 0.75);
    color: #e2e8f0;
}

#rux-plot-close:hover {
    background: rgba(51, 65, 85, 0.85);
}

#stats-toggle-btn {
    position: fixed;
    bottom: 24px;
    left: 24px;
    width: 54px;
    height: 54px;
    border-radius: 50%;
    background: radial-gradient(circle at 30% 20%, #e5e7eb 0, #e5e7eb 8%, transparent 9%),
                linear-gradient(135deg, #4f46e5 0%, #8b5cf6 35%, #22c55e 100%);
    box-shadow: 0 14px 30px rgba(15, 23, 42, 0.6);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #f9fafb;
    font-size: 22px;
    font-weight: 700;
    border: none;
    appearance: none;
    cursor: pointer;
    z-index: 9600;
    transition: transform 0.15s ease-out;
}

#stats-toggle-btn:hover {
    transform: translateY(-2px) scale(1.03);
}

#stats-panel {
    position: fixed;
    bottom: 88px;
    left: 22px;
    width: 460px;
    max-height: 78vh;
    background: rgba(15, 23, 42, 0.95);
    color: #e5e7eb;
    border-radius: 16px;
    box-shadow: 0 18px 35px rgba(0, 0, 0, 0.45);
    padding: 14px 18px 18px 18px;
    z-index: 9500;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    overflow-y: auto;
    scrollbar-width: thin;
    opacity: 1;
    transform: translateY(0);
    transition: opacity 0.32s cubic-bezier(0.4,0,0.2,1), transform 0.32s cubic-bezier(0.4,0,0.2,1);
}

#stats-panel.hidden {
    opacity: 0;
    transform: translateY(12px);
    pointer-events: none;
}

#stats-panel h3 {
    font-size: 15px;
    margin: 0 0 6px 0;
    color: #a5b4fc;
}

#stats-panel h4 {
    font-size: 13px;
    margin: 10px 0 4px 0;
    color: #c4b5fd;
}

#stats-panel .stat-line {
    display: flex;
    justify-content: space-between;
    font-size: 12px;
    margin-bottom: 2px;
}

#stats-panel .stat-label { color: #9ca3af; }
#stats-panel .stat-value { font-weight: 600; color: #e5e7eb; }

#stats-panel .section-separator {
    height: 1px;
    margin: 8px 0;
    background: linear-gradient(90deg, transparent, rgba(148, 163, 184, 0.6), transparent);
}

#stats-panel .chart-row {
    display: flex;
    align-items: center;
    font-size: 11px;
    margin: 3px 0 4px 0;
}

#stats-panel .chart-label {
    flex: 0 0 47%;
    padding-right: 6px;
    color: #e5e7eb;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

#stats-panel .chart-bar-wrap {
    flex: 0 0 47%;
    display: flex;
    align-items: center;
}

#stats-panel .chart-bar {
    height: 6px;
    border-radius: 999px;
    flex-shrink: 0;
    min-width: 2px;
    max-width: 90%;
}

#stats-panel .chart-bar-housing {
    background: linear-gradient(90deg, #16a34a, #22c55e, #bbf7d0);
}

#stats-panel .chart-bar-poi {
    background: linear-gradient(90deg, #0ea5e9, #22c55e, #eab308);
}

#stats-panel .chart-bar-analytics {
    background: linear-gradient(90deg, #022c22, #059669, #a7f3d0);
}

#stats-panel .chart-value {
    flex: 0 0 18%;
    font-size: 10px;
    color: #9ca3af;
    text-align: right;
    margin-left: 3px;
}

#stats-panel .tag-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 3px 8px;
    border-radius: 999px;
    font-size: 11px;
    margin-right: 4px;
    background: rgba(55, 65, 81, 0.8);
    color: #e5e7eb;
    border: none;
    appearance: none;
    font-family: inherit;
    cursor: pointer;
    transition: background 0.15s;
}

#stats-panel .tag-pill.active {
    background: rgba(79, 70, 229, 1);
    color: #f9fafb;
}

#ppsqm-legend {
    position: fixed !important;
    top: 24px !important;
    right: 24px !important;
    z-index: 9300 !important;
    width: 220px !important;
}

.leaflet-top.leaflet-right {
    top: 120px !important;
    right: 24px !important;
}

/* Integrated mode: hide the native Leaflet layer-control panel while it still
   sits inside .leaflet-control-container. The shell orchestration script moves
   it into #rux-hero-poi-slot (display:none) once the shell is ready; this rule
   prevents the collapsed:false panel from flashing as a visible overlay on the
   map canvas during the load gap before that move happens. */
body.rux-integrated-main .leaflet-control-container .leaflet-control-layers {
    display: none !important;
    pointer-events: none !important;
}

.leaflet-control-layers,
.leaflet-control-layers-expanded {
    background: rgba(15, 23, 42, 0.96) !important;
    border-radius: 14px !important;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5) !important;
    color: #e5e7eb !important;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif !important;
    padding: 10px 12px !important;
    width: 220px !important;
    min-width: 220px !important;
    max-width: 220px !important;
    margin: 0 !important;
}

.leaflet-control-layers-toggle {
    background-color: rgba(15, 23, 42, 0.96) !important;
    border-radius: 10px !important;
    width: 36px !important;
    height: 36px !important;
}

.leaflet-control-layers-list {
    padding: 4px 0 !important;
}

.leaflet-control-layers-list label {
    color: #e5e7eb !important;
    font-size: 11px !important;
    padding: 3px 0 !important;
    display: flex !important;
    align-items: center !important;
}

.leaflet-control-layers-list label span {
    margin-left: 6px !important;
}

.leaflet-control-layers-separator {
    border-top: 1px solid rgba(75, 85, 99, 0.8) !important;
    margin: 6px 0 !important;
}

body.rux-integrated-main #rux-map-hero .leaflet-control-layers-list {
    padding: 0 !important;
}

body.rux-integrated-main #rux-map-hero .leaflet-control-layers-list label {
    color: rgba(241, 245, 249, 0.94) !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    line-height: 1.2 !important;
    padding: 6px 0 !important;
    gap: 10px !important;
    align-items: center !important;
}

body.rux-integrated-main #rux-map-hero .leaflet-control-layers-list label span {
    margin-left: 0 !important;
    color: rgba(241, 245, 249, 0.94) !important;
    text-shadow: 0 2px 10px rgba(3, 7, 18, 0.62) !important;
}

body.rux-integrated-main #rux-map-hero .leaflet-control-layers-separator {
    border-top: 1px solid rgba(148, 163, 184, 0.18) !important;
    margin: 10px 0 !important;
}

body.rux-integrated-main #rux-layer-popup-host .leaflet-control-layers-list input[type="checkbox"] {
    -webkit-appearance: none !important;
    appearance: none !important;
    width: 16px !important;
    height: 16px !important;
    margin: 0 !important;
    flex: 0 0 16px !important;
    border-radius: 5px !important;
    border: 1.5px solid rgba(255,255,255,0.22) !important;
    background: transparent !important;
    box-shadow: none !important;
    cursor: pointer !important;
    transition: border-color 0.18s ease !important;
}
body.rux-integrated-main #rux-layer-popup-host .leaflet-control-layers-list input[type="checkbox"]:checked {
    border-color: rgba(255,255,255,0.45) !important;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.4 8.2l2.6 2.7L12.6 4.8' fill='none' stroke='rgba(248%2C250%2C252%2C0.95)' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/11px 11px no-repeat transparent !important;
}
body.rux-integrated-main #rux-layer-popup-host .leaflet-control-layers-list input[type="checkbox"]:focus-visible {
    outline: 2px solid #60a5fa !important;
    outline-offset: 2px !important;
    border-color: rgba(96,165,250,0.85) !important;
}

/* Scope popup base styles to the map hero so they don't leak to non-map popups */
#rux-right-hero .leaflet-popup-content-wrapper {
    border-radius: 12px !important;
}

#rux-right-hero .leaflet-popup-content {
    color: #e2e8f0 !important;
}

.property-popup-header {
    background: linear-gradient(135deg, #1e293b, #334155) !important;
    color: white !important;
    padding: 12px 16px !important;
    margin: 0 !important;
    border-radius: 12px 12px 0 0 !important;
    font-weight: 600 !important;
}

.rux-rate-row {
    opacity: 0.7;
}

.rux-rate-btn {
    border: 1px solid rgba(148, 163, 184, 0.32);
    background: rgba(30, 41, 59, 0.64);
    color: #e2e8f0;
}

.rux-rate-btn:hover {
    background: rgba(51, 65, 85, 0.76);
}

#rux-left-console .rux-mini-trend {
    display: none !important;
}

#rux-ai-panel .rux-ai-footer-hint {
    display: none !important;
}

#rux-ai-panel .rux-ai-title,
#rux-ai-panel .rux-ai-header-actions,
#rux-backend-status-dot {
    display: none !important;
}

body #rux-main-shell #rux-ai-panel .rux-ai-header {
    display: none !important;
    min-height: 0 !important;
    padding: 0 !important;
    border-bottom: 0 !important;
}

#rux-ai-panel .rux-nav-wrap,
#rux-ai-plus-btn,
#rux-ai-panel .rux-ai-quick-row,
#rux-ai-more-btn,
#rux-context-updated,
#rux-polygon-tools-btn,
#rux-ai-toggle-row {
    display: none !important;
}

#rux-realtime-btn,
#rux-export-log-btn,
#rux-map-aware-chip,
#rux-signal-selection {
    display: none !important;
}

#rux-hero-eyebrow,
#rux-hero-meta,
#rux-hero-trend-band,
#rux-hero-subtitle,
#rux-left-kpi-delta {
    display: none !important;
}

.leaflet-control-attribution,
.leaflet-control-attribution a,
.leaflet-bottom.leaflet-right {
    display: none !important;
}

#rux-hero-trend-band .rux-map-guide-card:last-child {
    display: none !important;
}

#rux-hero-trend-band .rux-map-guide-card:nth-child(2) {
    display: none !important;
}

#rux-signal-backend,
#rux-signal-shortcuts {
    display: none !important;
}

#rux-signal-estimate,
#rux-signal-map {
    display: none !important;
}

#rux-district-strip .rux-district-note {
    display: none !important;
}

#rux-district-strip .rux-district-chip {
    min-height: 32px !important;
    padding: 5px 12px !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: flex-start !important;
    flex: 0 0 auto !important;
}

#rux-ai-more-btn {
    border: 1px solid rgba(148, 163, 184, 0.32);
    background: rgba(30, 41, 59, 0.62);
    color: #e2e8f0;
    min-width: 64px;
    height: 34px;
    padding: 0 12px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 600;
    cursor: pointer;
}

#rux-ai-more-btn:hover {
    background: rgba(51, 65, 85, 0.7);
}

#rux-ai-toggle-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 8px;
}

.rux-ai-utility-row.rux-collapsed {
    display: none !important;
}

.rux-ai-utility-row.rux-expanded {
    display: flex !important;
}

#rux-ai-panel .rux-ai-utility-row.rux-expanded {
    display: flex !important;
}

.rux-ai-poly-btn {
    display: none !important;
}

#rux-polygon-tools-btn {
    border: 1px solid rgba(148, 163, 184, 0.32);
    background: rgba(30, 41, 59, 0.62);
    color: #e2e8f0;
    min-width: 72px;
    height: 34px;
    padding: 0 12px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 600;
    cursor: pointer;
}

#rux-polygon-tools-btn.is-active {
    border-color: rgba(129, 140, 248, 0.82);
    background: rgba(79, 70, 229, 0.34);
}

body:not(.rux-polygon-tools-on) .leaflet-draw {
    display: none !important;
}

body.rux-integrated-main .leaflet-draw {
    display: block !important;
}

body.rux-integrated-main .leaflet-control-zoom,
body.rux-integrated-main .leaflet-draw-toolbar,
body.rux-integrated-main .leaflet-control-zoom a {
    border-radius: 12px !important;
    border: 1px solid rgba(206, 220, 241, 0.24) !important;
    background-color: rgba(17, 24, 39, 0.7) !important;
    color: #dbe7f7 !important;
    box-shadow: 0 8px 20px rgba(2, 6, 23, 0.34) !important;
}

body.rux-integrated-main .leaflet-control-zoom a:hover,
body.rux-integrated-main .leaflet-draw-toolbar a:hover {
    background-color: rgba(30, 41, 59, 0.84) !important;
    border-color: rgba(226, 235, 247, 0.34) !important;
}

body.rux-integrated-main .leaflet-draw-draw-polyline,
body.rux-integrated-main .leaflet-draw-draw-rectangle,
body.rux-integrated-main .leaflet-draw-draw-circle,
body.rux-integrated-main .leaflet-draw-draw-marker,
body.rux-integrated-main .leaflet-draw-draw-circlemarker,
body.rux-integrated-main .leaflet-draw-edit-edit {
    display: none !important;
}

body.rux-integrated-main .leaflet-draw-toolbar a {
    width: 36px !important;
    height: 36px !important;
    line-height: 36px !important;
    background-image: none !important;
    background-color: rgba(17, 24, 39, 0.7) !important;
    text-indent: 0 !important;
    font-size: 0 !important;
}

body.rux-integrated-main .leaflet-draw-toolbar a .rux-tb-ico {
    font-size: 16px !important;
    line-height: 1 !important;
    color: #dbe7f7 !important;
    font-weight: 600 !important;
}

/* ═══════════════════════════════════════════════════════════════
   LAYER CONTROL — CUSTOM CHECKBOXES & PANEL POLISH
   ═══════════════════════════════════════════════════════════════ */

/* Panel base */
.leaflet-control-layers {
    position: relative;
}

/* Header label is injected as a real DOM node by rux_ui_cleanup.js — no ::before needed */

/* ── List scrollbar ──────────────────────────────────────────── */
.leaflet-control-layers-list {
    max-height: 260px;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: rgba(148, 163, 184, 0.3) transparent;
}
.leaflet-control-layers-list::-webkit-scrollbar {
    width: 4px;
}
.leaflet-control-layers-list::-webkit-scrollbar-track {
    background: transparent;
}
.leaflet-control-layers-list::-webkit-scrollbar-thumb {
    background: rgba(148, 163, 184, 0.3);
    border-radius: 3px;
}
.leaflet-control-layers-list::-webkit-scrollbar-thumb:hover {
    background: rgba(148, 163, 184, 0.55);
}

/* ── Each row label ──────────────────────────────────────────── */
.leaflet-control-layers-list label {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 4px 2px !important;
    border-radius: 6px;
    cursor: pointer;
    transition: background 0.14s ease;
    font-size: 12px !important;
    color: #d1dae9 !important;
    font-weight: 500;
    user-select: none;
}
.leaflet-control-layers-list label:hover {
    background: rgba(148, 163, 184, 0.10);
}

/* ── Replace native checkbox with custom styled one ─────────── */
.leaflet-control-layers-list input[type="checkbox"] {
    appearance: none;
    -webkit-appearance: none;
    width: 16px !important;
    height: 16px !important;
    min-width: 16px !important;
    flex-shrink: 0;
    border-radius: 4px;
    border: 1.5px solid rgba(148, 163, 184, 0.38);
    background: rgba(15, 23, 42, 0.65);
    cursor: pointer;
    position: relative;
    transition: border-color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
    vertical-align: middle;
    margin: 0 !important;
}
.leaflet-control-layers-list input[type="checkbox"]:hover {
    border-color: rgba(129, 140, 248, 0.65);
    background: rgba(30, 41, 59, 0.8);
}
.leaflet-control-layers-list input[type="checkbox"]:checked {
    background: rgba(79, 70, 229, 0.9);
    border-color: rgba(99, 102, 241, 0.9);
    box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.20);
}
.leaflet-control-layers-list input[type="checkbox"]:checked::after {
    content: "";
    position: absolute;
    left: 4px;
    top: 1.5px;
    width: 5px;
    height: 9px;
    border: 2px solid #ffffff;
    border-top: none;
    border-left: none;
    transform: rotate(44deg);
    border-radius: 1px;
}
.leaflet-control-layers-list label span {
    margin-left: 0 !important;
    line-height: 1.3;
}

/* ── Separator between overlay groups ───────────────────────── */
.leaflet-control-layers-separator {
    border-top: 1px solid rgba(148, 163, 184, 0.16) !important;
    margin: 6px 0 !important;
}

/* ── Toggle button — strip default image; icon injected via JS ─── */
.leaflet-control-layers-toggle {
    background-image: none !important;
    /* NOTE: No display override here — let Leaflet show/hide it naturally
       via .leaflet-control-layers-expanded .leaflet-control-layers-toggle { display:none } */
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #c8d6ee;
}
/* In integrated mode the toggle must always be visible (Leaflet's hide-on-expand is overridden below) */

/* ── Expanded panel extra padding ────────────────────────────── */
.leaflet-control-layers-expanded {
    padding: 12px 14px !important;
}

.leaflet-control-layers .rux-layer-toggle {
    position: absolute;
    top: 8px;
    right: 8px;
    border: 1px solid rgba(148, 163, 184, 0.35);
    background: rgba(15, 23, 42, 0.82);
    color: #e2e8f0;
    border-radius: 8px;
    width: 28px;
    height: 28px;
    font-size: 15px;
    line-height: 1;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    z-index: 2;
}

.leaflet-control-layers.rux-clean-collapsed .leaflet-control-layers-list {
    display: none;
}

.leaflet-control-layers.rux-clean-collapsed {
    width: 44px !important;
    min-width: 44px !important;
    height: 44px !important;
    overflow: hidden !important;
    border-radius: 12px !important;
}

@media (max-width: 960px) {
    body.rux-integrated-main #rux-main-shell {
        padding: 6px;
        gap: 6px;
        left: 6px !important;
        top: 6px !important;
        right: 6px !important;
        bottom: 6px !important;
        border-radius: 16px !important;
    }

    body.rux-integrated-main #rux-left-console,
    body.rux-integrated-main #rux-right-hero {
        border-radius: 12px;
    }
}

@media (max-width: 820px) {
    body.rux-integrated-main #rux-left-stats-card {
        margin-top: 4px;
        padding: 10px;
    }

    body.rux-integrated-main #rux-ai-panel[data-integrated="1"].rux-bottom-console {
        width: calc(100% - 18px) !important;
        bottom: 8px !important;
        border-radius: 0 !important;
    }

    .leaflet-top.leaflet-left {
        top: 74px !important;
        left: 10px !important;
    }

    #ppsqm-legend {
        top: 8px !important;
        right: 10px !important;
        width: 150px !important;
        padding: 8px 10px !important;
    }

    #ppsqm-legend > div:first-child {
        font-size: 10px !important;
        margin-bottom: 3px !important;
    }

    #ppsqm-legend span {
        font-size: 9px !important;
    }

    #rux-hero-title-block {
        max-width: 160px !important;
    }

    #rux-hero-title {
        font-size: clamp(24px, 9.2vw, 34px) !important;
        line-height: 1.03 !important;
    }
}

/* ════════════════════════════════════════════════════════════════
   RUX INTEGRATED LAYOUT — ENHANCEMENTS
   ════════════════════════════════════════════════════════════════ */

/* ── AI panel header: visible when embedded in left console ───── */
body.rux-integrated-main #rux-main-shell #rux-ai-panel[data-integrated="1"] .rux-ai-header {
    display: flex !important;
    min-height: auto !important;
    padding: 10px 14px 8px !important;
    border-bottom: 1px solid rgba(148, 163, 184, 0.22) !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: flex-start !important;
}

body.rux-integrated-main #rux-main-shell #rux-ai-panel[data-integrated="1"] .rux-ai-title {
    display: flex !important;
}

/* ── AI panel: fills remaining slot height ─────────────────────── */
body.rux-integrated-main #rux-left-ai-slot #rux-ai-panel {
    flex: 1 1 auto !important;
    min-height: 0 !important;
}

/* ── Stats card: compact, non-shrinking above AI panel ────────── */
body.rux-integrated-main #rux-left-stats-card {
    flex-shrink: 0 !important;
    margin-bottom: 6px !important;
}

/* ── "+" quick-prompt button: show in integrated mode ──────────── */
body.rux-integrated-main #rux-ai-plus-btn {
    display: inline-flex !important;
}

/* ── Hero title block: restored with compact sizing ───────────── */
#rux-hero-title-block {
    display: block !important;
}

#rux-hero-title {
    font-size: clamp(20px, 2.5vw, 32px) !important;
    line-height: 1 !important;
}

#rux-hero-summary {
    font-size: 11px !important;
    margin-top: 8px !important;
    color: rgba(218, 230, 248, 0.78) !important;
    line-height: 1.45 !important;
}

/* ── District strip: hidden in integrated mode (intentional) ──────
   District navigation is handled by the AI agent — user types a
   district name and the agent focuses the map via focusDistrictByName(). */

/* ── Property popup: dark glass theme ─────────────────────────── */
#rux-right-hero .leaflet-popup-content-wrapper {
    background: rgba(14, 21, 35, 0.97) !important;
    border: 1px solid rgba(148, 163, 184, 0.26) !important;
    border-radius: 12px !important;
    box-shadow: 0 14px 36px rgba(0, 0, 0, 0.65) !important;
}

#rux-right-hero .leaflet-popup-content {
    color: #e2e8f0 !important;
    margin: 0 !important;
}

/* ── POI dot popup: roomy padding + close-button clearance ───────── */
/* MUST be scoped under #rux-right-hero so it out-specifies the global
   `#rux-right-hero .leaflet-popup-content { margin:0 !important }` rule (1,1,0).
   This selector is 1,2,0 and wins. Applies to BOTH base POI dots AND agent
   highlight_pois dots (both now bind with className 'rux-poi-popup'). */
#rux-right-hero .rux-poi-popup .leaflet-popup-content-wrapper {
    border-radius: 14px !important;
}
#rux-right-hero .rux-poi-popup .leaflet-popup-content {
    margin: 12px 36px 13px 16px !important;   /* top right(=X room) bottom left */
    line-height: 1.5 !important;
    font-size: 12px !important;
}
#rux-right-hero .rux-poi-popup .leaflet-popup-close-button {
    top: 9px !important;
    right: 11px !important;
    width: 18px !important;
    height: 18px !important;
    font: 400 17px/18px Inter, system-ui, sans-serif !important;
    color: #94a3b8 !important;
    padding: 0 !important;
}
#rux-right-hero .rux-poi-popup .leaflet-popup-close-button:hover {
    color: #e2e8f0 !important;
}

#rux-right-hero .leaflet-popup-tip {
    background: rgba(14, 21, 35, 0.97) !important;
}

@media (max-width: 820px) {
    #rux-district-strip {
        left: 10px !important;
        right: 10px !important;
        bottom: 12px !important;
    }
}

/* ============================================================
   STRUCTURAL LAYOUT STABILIZERS
   Ensures integrated shell remains scrollable and non-overlapping.
   ============================================================ */
body.rux-integrated-main {
    overflow: hidden;
}

body.rux-integrated-main #rux-main-shell {
    isolation: isolate;
}

/* Restore core integrated AI sections in case legacy hide rules are still present. */
body.rux-integrated-main #rux-ai-panel,
body.rux-integrated-main #rux-ai-panel .rux-ai-header,
body.rux-integrated-main #rux-ai-panel .rux-ai-body,
body.rux-integrated-main #rux-ai-panel .rux-ai-footer,
body.rux-integrated-main #rux-ai-panel #rux-ai-messages {
    visibility: visible !important;
    pointer-events: auto !important;
}

body.rux-integrated-main #rux-ai-panel .rux-ai-header,
body.rux-integrated-main #rux-ai-panel .rux-ai-body,
body.rux-integrated-main #rux-ai-panel .rux-ai-footer,
body.rux-integrated-main #rux-ai-panel #rux-ai-messages {
    display: flex !important;
}

body.rux-integrated-main #rux-ai-panel .rux-ai-body,
body.rux-integrated-main #rux-ai-panel .rux-ai-footer,
body.rux-integrated-main #rux-ai-panel #rux-ai-messages {
    flex-direction: column !important;
}

body.rux-integrated-main #rux-left-console {
    display: flex !important;
    flex-direction: column !important;
    min-height: 0 !important;
    min-width: 0 !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    overscroll-behavior: contain;
}

body.rux-integrated-main #rux-left-intel {
    flex: 0 0 auto !important;
}

body.rux-integrated-main #rux-left-ai-slot {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    min-width: 0 !important;
    overflow: hidden !important;
}

body.rux-integrated-main #rux-left-ai-slot #rux-ai-panel {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    min-width: 0 !important;
    height: 100% !important;
}

body.rux-integrated-main #rux-left-ai-slot #rux-ai-panel .rux-ai-body {
    min-height: 0 !important;
    overflow: hidden !important;
}

body.rux-integrated-main #rux-left-ai-slot #rux-ai-panel #rux-ai-messages {
    min-height: 0 !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
}

body.rux-integrated-main #rux-right-hero {
    min-width: 0 !important;
    min-height: 0 !important;
    overflow: hidden !important;
}

body.rux-integrated-main #rux-right-hero .folium-map {
    width: 100% !important;
    height: 100% !important;
}

@media (max-width: 820px) {
    body.rux-integrated-main #rux-main-shell {
        height: 100dvh !important;
        max-height: 100dvh !important;
        grid-template-rows: minmax(42dvh, 46dvh) minmax(0, 1fr) !important;
    }

    body.rux-integrated-main #rux-left-console {
        overflow-y: auto !important;
        overflow-x: hidden !important;
        border-bottom: 0 !important;
    }

    body.rux-integrated-main #rux-left-ai-slot {
        padding-bottom: 10px !important;
    }
}

/* ═══════════════════════════════════════════════════════════════
   INTEGRATED MODE — LAYER CONTROL FLOATING DROPDOWN
   ═══════════════════════════════════════════════════════════════ */

/* In integrated mode the list renders as a fixed dropdown.
   Exact top/right are set dynamically by _positionList() in rux_ui_cleanup.js
   so the panel's right edge aligns with #rux-right-hero's right border at runtime. */
body.rux-integrated-main #rux-map-hero .leaflet-control-layers-expanded .leaflet-control-layers-list {
    position: fixed !important;
    top: 64px !important;
    right: 8px !important;
    width: 224px !important;
    max-height: 300px !important;
    overflow-y: auto !important;
    padding: 10px 12px !important;
    border-radius: 12px !important;
    border: 1px solid rgba(148, 163, 184, 0.22) !important;
    background: linear-gradient(165deg, rgba(18, 26, 40, 0.97), rgba(12, 18, 30, 0.95)) !important;
    backdrop-filter: blur(18px) saturate(140%) !important;
    -webkit-backdrop-filter: blur(18px) saturate(140%) !important;
    box-shadow: 0 18px 36px rgba(2, 6, 18, 0.55), 0 0 0 1px rgba(255,255,255,0.04) inset !important;
    scrollbar-width: thin;
    scrollbar-color: rgba(148, 163, 184, 0.28) transparent;
}
body.rux-integrated-main #rux-map-hero .leaflet-control-layers-expanded .leaflet-control-layers-list::-webkit-scrollbar {
    width: 4px;
}
body.rux-integrated-main #rux-map-hero .leaflet-control-layers-expanded .leaflet-control-layers-list::-webkit-scrollbar-thumb {
    background: rgba(148, 163, 184, 0.3);
    border-radius: 3px;
}

/* "Map Layers" header is injected by JS — suppress any leftover CSS ::before */
body.rux-integrated-main #rux-map-hero .leaflet-control-layers-expanded::before,
body.rux-integrated-main #rux-map-hero .leaflet-control-layers-expanded .leaflet-control-layers-list::before {
    display: none !important;
    content: none !important;
}

/* Layer toggle button — matches .rux-hero-icon-btn exactly, always visible */
/* Override Leaflet's hide-on-expand rule with higher specificity */
body.rux-integrated-main #rux-map-hero .leaflet-control-layers .leaflet-control-layers-toggle,
body.rux-integrated-main #rux-map-hero .leaflet-control-layers-expanded .leaflet-control-layers-toggle {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 44px !important;
    height: 44px !important;
    border-radius: 12px !important;
    border: 1px solid rgba(148, 163, 184, 0.26) !important;
    background: rgba(15, 23, 42, 0.72) !important;
    color: #e2e8f0 !important;
    cursor: pointer !important;
    transition: background 0.2s ease, border-color 0.2s ease !important;
    box-shadow: none !important;
}
body.rux-integrated-main #rux-map-hero .leaflet-control-layers .leaflet-control-layers-toggle:hover,
body.rux-integrated-main #rux-map-hero .leaflet-control-layers-expanded .leaflet-control-layers-toggle:hover {
    background: rgba(30, 41, 59, 0.84) !important;
    border-color: rgba(203, 213, 225, 0.42) !important;
}
/* Active (open) state: accent ring like .rux-hero-icon-btn.active */
body.rux-integrated-main #rux-map-hero .leaflet-control-layers-expanded .leaflet-control-layers-toggle {
    border-color: rgba(129, 140, 248, 0.78) !important;
    box-shadow: 0 0 0 1px rgba(99, 102, 241, 0.28) inset !important;
}

/* ═══════════════════════════════════════════════════════════════
   HERO TOPBAR BUTTONS — INTEGRATED MODE
   ═══════════════════════════════════════════════════════════════ */

body.rux-integrated-main #rux-map-hero .rux-hero-btn {
    padding: 5px 13px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.01em;
    border-radius: 9px;
    border: 1px solid rgba(148, 163, 184, 0.22) !important;
    background: rgba(25, 36, 54, 0.78) !important;
    color: rgba(218, 232, 250, 0.88) !important;
    transition: border-color 0.17s ease, background 0.17s ease, color 0.17s ease;
    backdrop-filter: none;
}
body.rux-integrated-main #rux-map-hero .rux-hero-btn:hover {
    border-color: rgba(148, 163, 184, 0.42) !important;
    background: rgba(38, 53, 77, 0.88) !important;
    color: #f0f6ff !important;
}
body.rux-integrated-main #rux-map-hero .rux-hero-btn.report-toggle {
    border-color: rgba(34, 197, 94, 0.28) !important;
    background: rgba(22, 101, 52, 0.28) !important;
    color: rgba(134, 239, 172, 0.9) !important;
}
body.rux-integrated-main #rux-map-hero .rux-hero-btn.report-toggle:hover {
    border-color: rgba(34, 197, 94, 0.46) !important;
    background: rgba(22, 101, 52, 0.42) !important;
    color: #bbf7d0 !important;
}

/* Map mode button — keep .rux-hero-icon-btn defaults, just add active-state styling */
body.rux-integrated-main #rux-map-mode-btn[aria-pressed="true"] {
    border-color: rgba(129, 140, 248, 0.78) !important;
    box-shadow: 0 0 0 1px rgba(99, 102, 241, 0.28) inset !important;
}

/* ═══════════════════════════════════════════════════════════════
   BACKEND STATUS PILL — hero bar connectivity indicator
   ═══════════════════════════════════════════════════════════════ */
#rux-backend-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 11px 4px 8px;
    border-radius: 999px;
    border: 1px solid rgba(148, 163, 184, 0.18);
    background: rgba(15, 23, 42, 0.62);
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: 0.02em;
    color: rgba(148, 163, 184, 0.78);
    cursor: default;
    transition: border-color 0.3s ease, color 0.3s ease;
    white-space: nowrap;
}
.rux-bp-dot {
    display: inline-block;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #6b7280;
    transition: background 0.4s ease, box-shadow 0.4s ease;
    flex-shrink: 0;
}
.rux-bp-dot.rux-bp-online {
    background: #22c55e;
    box-shadow: 0 0 6px rgba(34, 197, 94, 0.5);
}
.rux-bp-dot.rux-bp-offline {
    background: #ef4444;
    box-shadow: 0 0 6px rgba(239, 68, 68, 0.4);
}
#rux-backend-pill:has(.rux-bp-online) {
    border-color: rgba(34, 197, 94, 0.22);
    color: rgba(134, 239, 172, 0.88);
}
#rux-backend-pill:has(.rux-bp-offline) {
    border-color: rgba(239, 68, 68, 0.22);
    color: rgba(252, 165, 165, 0.88);
}
/* Rule-based mode pill — amber/orange tint (Fix #7) */
.rux-bp-dot.rux-bp-rulebased {
    background: #f59e0b;
    box-shadow: 0 0 6px rgba(245, 158, 11, 0.5);
}
#rux-backend-pill:has(.rux-bp-rulebased) {
    border-color: rgba(245, 158, 11, 0.22);
    color: rgba(253, 211, 77, 0.9);
}

/* ── Stats card subtitle note ─────────────────────────────────── */
body.rux-integrated-main #rux-left-stats-card .rux-left-stats-note {
    font-size: 10px;
    line-height: 1.4;
    color: rgba(148, 163, 184, 0.55);
    margin-bottom: 10px;
    font-style: italic;
}

/* ═══════════════════════════════════════════════════════════════
   ONBOARDING HINT — first-time-use overlay on map
   ═══════════════════════════════════════════════════════════════ */
#rux-onboard-hint {
    position: absolute;
    bottom: 80px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 9300;
    pointer-events: auto;
    animation: ruxOnboardIn 0.45s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
#rux-onboard-hint.rux-onboard-hiding {
    animation: ruxOnboardOut 0.3s ease forwards;
}
@keyframes ruxOnboardIn {
    from { opacity: 0; transform: translateX(-50%) translateY(16px); }
    to   { opacity: 1; transform: translateX(-50%) translateY(0); }
}
@keyframes ruxOnboardOut {
    from { opacity: 1; transform: translateX(-50%) translateY(0); }
    to   { opacity: 0; transform: translateX(-50%) translateY(12px); }
}
.rux-onboard-inner {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 18px;
    border-radius: 14px;
    border: 1px solid rgba(134, 239, 172, 0.28);
    background: linear-gradient(165deg, rgba(18, 26, 42, 0.96), rgba(12, 18, 32, 0.94));
    box-shadow: 0 16px 40px rgba(2, 6, 18, 0.55), 0 0 0 1px rgba(34, 197, 94, 0.08) inset;
    backdrop-filter: blur(16px) saturate(130%);
    -webkit-backdrop-filter: blur(16px) saturate(130%);
    max-width: 420px;
    color: #cbd5e1;
}
.rux-onboard-icon {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 10px;
    background: rgba(34, 197, 94, 0.16);
    border: 1px solid rgba(134, 239, 172, 0.22);
    color: #86efac;
}
.rux-onboard-text {
    font-size: 12.5px;
    line-height: 1.5;
    color: rgba(203, 213, 225, 0.92);
}
.rux-onboard-text strong {
    color: #dcfce7;
    font-weight: 700;
}
.rux-onboard-dismiss {
    flex-shrink: 0;
    padding: 6px 14px;
    border-radius: 8px;
    border: 1px solid rgba(134, 239, 172, 0.32);
    background: rgba(34, 197, 94, 0.18);
    color: #86efac;
    font-size: 11.5px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease;
    white-space: nowrap;
}
.rux-onboard-dismiss:hover {
    background: rgba(34, 197, 94, 0.32);
    border-color: rgba(134, 239, 172, 0.52);
}

/* ═══════════════════════════════════════════════════════════════
   SESSION PERSISTENCE — restored session header
   ═══════════════════════════════════════════════════════════════ */
.rux-session-restored-header {
    text-align: center;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: rgba(148, 163, 184, 0.42);
    padding: 8px 0 6px;
    border-bottom: 1px solid rgba(148, 163, 184, 0.08);
    margin-bottom: 6px;
}

/* ═══════════════════════════════════════════════════════════════
   COMING-SOON PLACEHOLDER — blank tab filler (Fix #1)
   ═══════════════════════════════════════════════════════════════ */
.rux-coming-soon-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    min-height: 240px;
    padding: 32px 24px;
    text-align: center;
    gap: 12px;
}
.rux-coming-soon-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 6px;
}
.rux-coming-soon-icon-shell {
    width: 56px;
    height: 56px;
    border-radius: 16px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: rgba(226, 232, 240, 0.86);
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0) 42%),
        rgba(15, 23, 42, 0.38);
    border: 1px solid rgba(148, 163, 184, 0.2);
    box-shadow: 0 14px 28px rgba(2, 6, 23, 0.22);
    backdrop-filter: blur(10px) saturate(120%);
    -webkit-backdrop-filter: blur(10px) saturate(120%);
}
.rux-coming-soon-icon-shell svg {
    width: 24px;
    height: 24px;
    display: block;
}
.rux-coming-soon-title {
    font-size: 15px;
    font-weight: 600;
    color: rgba(226, 232, 240, 0.9);
    letter-spacing: 0.02em;
}
.rux-coming-soon-desc {
    font-size: 12px;
    line-height: 1.55;
    color: rgba(148, 163, 184, 0.65);
    max-width: 320px;
}
.rux-coming-soon-badge {
    display: inline-block;
    margin-top: 6px;
    padding: 3px 10px;
    border-radius: 20px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    background: rgba(148, 163, 184, 0.12);
    border: 1px solid rgba(148, 163, 184, 0.22);
    color: rgba(226, 232, 240, 0.72);
}

/* ═══════════════════════════════════════════════════════════════
   DRAW-MODE TOOLTIP — floating hint during polygon draw (Fix #8)
   ═══════════════════════════════════════════════════════════════ */
#rux-draw-tooltip {
    position: absolute;
    bottom: 52px;
    left: 50%;
    transform: translateX(-50%) translateY(6px);
    z-index: 1200;
    padding: 6px 16px;
    border-radius: 20px;
    background: rgba(15, 23, 42, 0.88);
    border: 1px solid rgba(99, 102, 241, 0.35);
    color: rgba(199, 210, 254, 0.92);
    font-size: 11.5px;
    font-weight: 500;
    letter-spacing: 0.02em;
    white-space: nowrap;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.25s ease, transform 0.25s ease;
    backdrop-filter: blur(8px);
    box-shadow: 0 4px 16px rgba(0,0,0,0.3);
}
#rux-draw-tooltip.rux-draw-tooltip-visible {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

/* ═══════════════════════════════════════════════════════════════
   PROPERTY EVALUATOR — apartment price estimator tab
   ═══════════════════════════════════════════════════════════════ */
.rux-eval-wrap {
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow-y: auto;
    padding: 0;
}

/* ── Form area ──────────────────────────────────────────── */
.rux-eval-form-area {
    padding: 14px 14px 18px;
    display: flex;
    flex-direction: column;
    gap: 9px;
}
.rux-eval-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 2px;
}
.rux-eval-header-icon {
    width: 40px;
    height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: rgba(226, 232, 240, 0.9);
    background:
        linear-gradient(180deg, rgba(255,255,255,0.05), rgba(255,255,255,0) 42%),
        rgba(15, 23, 42, 0.32);
    border: 1px solid rgba(148, 163, 184, 0.18);
    border-radius: 12px;
    box-shadow: 0 12px 24px rgba(2, 6, 23, 0.2);
    backdrop-filter: blur(10px) saturate(120%);
    -webkit-backdrop-filter: blur(10px) saturate(120%);
}
.rux-eval-header-icon svg {
    width: 20px;
    height: 20px;
    display: block;
}
.rux-eval-title {
    font-size: 12px;
    font-weight: 700;
    color: rgba(226, 232, 240, 0.95);
    letter-spacing: 0.08em;
    line-height: 1.25;
    text-transform: uppercase;
}
.rux-eval-subtitle {
    font-size: 10px;
    color: rgba(148, 163, 184, 0.62);
    line-height: 1.45;
    margin-top: 3px;
}
.rux-eval-grid {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.rux-eval-grid-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}
.rux-eval-field {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.rux-eval-field-wide {
    grid-column: 1 / -1;
}
.rux-eval-label {
    font-size: 9px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.11em;
    color: rgba(148, 163, 184, 0.62);
}
.rux-eval-req {
    color: rgba(248, 113, 113, 0.8);
}
.rux-eval-select,
.rux-eval-input {
    background:
        linear-gradient(180deg, rgba(255,255,255,0.03), rgba(255,255,255,0) 32%),
        rgba(15, 23, 42, 0.5);
    border: 1px solid rgba(148, 163, 184, 0.16);
    border-radius: 8px;
    color: rgba(226, 232, 240, 0.9);
    font-size: 11px;
    padding: 7px 10px;
    width: 100%;
    box-sizing: border-box;
    outline: none;
    -webkit-appearance: none;
    appearance: none;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.03);
    transition: border-color 0.15s, background 0.15s, box-shadow 0.15s;
}
.rux-eval-select:focus,
.rux-eval-input:focus {
    border-color: rgba(191, 219, 254, 0.28);
    background:
        linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0) 34%),
        rgba(15, 23, 42, 0.62);
    box-shadow: 0 0 0 1px rgba(191, 219, 254, 0.08);
}
.rux-eval-select option {
    background: #1e293b;
    color: #e2e8f0;
}
.rux-eval-input[type="number"]::-webkit-inner-spin-button { opacity: 0.4; }
.rux-eval-submit {
    margin-top: 4px;
    width: 100%;
    padding: 9px 0;
    border-radius: 8px;
    border: 1px solid rgba(187, 247, 208, 0.2);
    background:
        linear-gradient(180deg, rgba(255,255,255,0.05), rgba(255,255,255,0) 44%),
        linear-gradient(135deg, rgba(134, 239, 172, 0.24) 0%, rgba(34, 197, 94, 0.18) 100%);
    color: #eefbf2;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    cursor: pointer;
    text-shadow: 0 1px 0 rgba(0, 0, 0, 0.16);
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.07),
        0 10px 22px rgba(5, 46, 22, 0.14);
    backdrop-filter: blur(10px) saturate(118%);
    -webkit-backdrop-filter: blur(10px) saturate(118%);
    transition: opacity 0.15s, transform 0.1s, border-color 0.15s, box-shadow 0.15s, background 0.15s;
}
.rux-eval-submit:hover  {
    opacity: 1;
    border-color: rgba(220, 252, 231, 0.28);
    background:
        linear-gradient(180deg, rgba(255,255,255,0.07), rgba(255,255,255,0.01) 44%),
        linear-gradient(135deg, rgba(134, 239, 172, 0.3) 0%, rgba(34, 197, 94, 0.22) 100%);
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.09),
        0 12px 24px rgba(5, 46, 22, 0.18);
}
.rux-eval-submit:active { transform: scale(0.98); }
.rux-eval-submit:disabled { opacity: 0.45; cursor: not-allowed; }
.rux-eval-error {
    margin-top: 4px;
    padding: 8px 10px;
    border-radius: 6px;
    background: rgba(239, 68, 68, 0.12);
    border: 1px solid rgba(239, 68, 68, 0.25);
    color: rgba(252, 165, 165, 0.9);
    font-size: 11px;
    line-height: 1.5;
}

/* ── Results area ─────────────────────────────────────────── */
.rux-eval-result {
    padding: 14px 14px 20px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.rux-eval-back {
    align-self: flex-start;
    background: none;
    border: none;
    color: rgba(148, 163, 184, 0.62);
    font-size: 10px;
    cursor: pointer;
    padding: 0;
    letter-spacing: 0.03em;
    transition: color 0.15s;
}
.rux-eval-back:hover { color: rgba(148, 163, 184, 0.9); }
.rux-eval-res-district {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: rgba(148, 163, 184, 0.5);
}
.rux-eval-price-block {
    background:
        linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0) 34%),
        rgba(15, 23, 42, 0.42);
    border: 1px solid rgba(148, 163, 184, 0.16);
    border-radius: 10px;
    padding: 14px 16px;
    text-align: center;
}
.rux-eval-price-label {
    font-size: 9.5px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.09em;
    color: rgba(148, 163, 184, 0.55);
    margin-bottom: 6px;
}
.rux-eval-price-main {
    font-size: 28px;
    font-weight: 800;
    color: rgba(226, 232, 240, 0.97);
    letter-spacing: -0.02em;
    line-height: 1.1;
}
.rux-eval-price-meta {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    color: rgba(148, 163, 184, 0.7);
    margin-top: 6px;
}
.rux-eval-meta-sep { opacity: 0.4; }
.rux-eval-band {
    background: rgba(15, 23, 42, 0.34);
    border: 1px solid rgba(148, 163, 184, 0.12);
    border-radius: 8px;
    padding: 10px 12px;
}
.rux-eval-band-title {
    font-size: 9.5px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: rgba(148, 163, 184, 0.45);
    margin-bottom: 6px;
}
.rux-eval-band-row {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 11px;
    color: rgba(226, 232, 240, 0.8);
    font-weight: 600;
}
.rux-eval-band-bar {
    flex: 1;
    height: 4px;
    border-radius: 2px;
    background: rgba(148, 163, 184, 0.18);
    overflow: hidden;
}
.rux-eval-band-fill {
    height: 100%;
    width: 60%;
    background: linear-gradient(90deg, #16a34a, #86efac);
    border-radius: 2px;
    margin: 0 auto;
}
.rux-eval-comps-hdr {
    font-size: 9.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.09em;
    color: rgba(148, 163, 184, 0.45);
}
.rux-eval-comps {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.rux-eval-comp-row {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    background: rgba(15, 23, 42, 0.34);
    border: 1px solid rgba(148, 163, 184, 0.1);
    border-radius: 7px;
    padding: 8px 10px;
    gap: 8px;
}
.rux-eval-comp-left { flex: 1; min-width: 0; }
.rux-eval-comp-title {
    font-size: 10.5px;
    font-weight: 600;
    color: rgba(226, 232, 240, 0.8);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.rux-eval-comp-meta {
    font-size: 9.5px;
    color: rgba(148, 163, 184, 0.5);
    margin-top: 2px;
}
.rux-eval-comp-right { text-align: right; flex-shrink: 0; }
.rux-eval-comp-price {
    font-size: 11.5px;
    font-weight: 700;
    color: rgba(226, 232, 240, 0.9);
}
.rux-eval-comp-ppsqm {
    font-size: 9.5px;
    color: rgba(148, 163, 184, 0.5);
    margin-top: 1px;
}
.rux-eval-again {
    margin-top: 4px;
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(148, 163, 184, 0.18) !important;
    color: rgba(226, 232, 240, 0.84);
    box-shadow: none;
}

/* ─── Feasibility Tab ──────────────────────────────────────────────── */
.rux-feas-mix-title {
    font-size: 11px;
    font-weight: 600;
    color: rgba(148, 163, 184, 0.7);
    text-transform: uppercase;
    letter-spacing: 0.6px;
    margin: 10px 0 4px 0;
}
.rux-feas-verdict {
    border: 2px solid;
    border-radius: 10px;
    padding: 14px 18px;
    text-align: center;
    margin-bottom: 12px;
}
.rux-feas-verdict-label {
    font-size: 18px;
    font-weight: 800;
    letter-spacing: 1.5px;
}
.rux-feas-verdict-detail {
    font-size: 11px;
    margin-top: 4px;
    opacity: 0.8;
    color: rgba(226, 232, 240, 0.8);
}
.rux-feas-kpis {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 8px;
    margin-bottom: 12px;
}
.rux-feas-kpi {
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(148, 163, 184, 0.12);
    border-radius: 8px;
    padding: 10px 8px;
    text-align: center;
}
.rux-feas-kpi-val {
    font-size: 15px;
    font-weight: 700;
    color: rgba(226, 232, 240, 0.95);
}
.rux-feas-kpi-label {
    font-size: 9.5px;
    color: rgba(148, 163, 184, 0.6);
    margin-top: 3px;
}
.rux-feas-stack-row {
    display: flex;
    justify-content: space-between;
    padding: 5px 0;
    font-size: 11.5px;
    color: rgba(226, 232, 240, 0.78);
    border-bottom: 1px solid rgba(148, 163, 184, 0.08);
}
.rux-feas-stack-total {
    font-weight: 700;
    color: rgba(226, 232, 240, 0.95);
    border-bottom: none;
    border-top: 1px solid rgba(148, 163, 184, 0.2);
    margin-top: 2px;
    padding-top: 6px;
}
.rux-feas-risk-item {
    display: flex;
    align-items: flex-start;
    gap: 6px;
    font-size: 11px;
    color: rgba(250, 204, 21, 0.85);
    padding: 3px 0;
}
.rux-item-icon {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    margin-top: 1px;
    opacity: 0.85;
}
.rux-feas-ai-text {
    font-size: 11.5px;
    color: rgba(226, 232, 240, 0.75);
    line-height: 1.55;
    padding: 8px 0;
}

/* ─── HBU Tab ──────────────────────────────────────────────────────── */
.rux-hbu-rec-badge {
    background: linear-gradient(135deg, rgba(59,130,246,0.15) 0%, rgba(139,92,246,0.15) 100%);
    border: 1px solid rgba(99, 102, 241, 0.35);
    border-radius: 10px;
    padding: 14px 18px;
    text-align: center;
    margin-bottom: 14px;
}
.rux-hbu-rec-label {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: rgba(148, 163, 184, 0.6);
}
.rux-hbu-rec-value {
    font-size: 18px;
    font-weight: 800;
    color: rgba(129, 140, 248, 1);
    margin: 4px 0;
}
.rux-hbu-rec-sub {
    font-size: 10.5px;
    color: rgba(148, 163, 184, 0.6);
}
.rux-hbu-scenarios {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 8px;
    margin-bottom: 14px;
}
.rux-hbu-card {
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(148, 163, 184, 0.12);
    border-radius: 10px;
    padding: 12px 8px;
    text-align: center;
    position: relative;
    transition: border-color 0.2s;
}
.rux-hbu-card-best {
    border-color: rgba(129, 140, 248, 0.5);
    background: rgba(99, 102, 241, 0.08);
}
.rux-hbu-card-badge {
    position: absolute;
    top: -8px;
    right: 8px;
    background: rgba(99, 102, 241, 0.9);
    color: #fff;
    font-size: 9px;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 4px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.rux-hbu-card-icon {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 6px;
    color: rgba(148, 163, 184, 0.7);
}
.rux-hbu-card-best .rux-hbu-card-icon {
    color: rgba(129, 140, 248, 0.9);
}
.rux-hbu-card-title {
    font-size: 11px;
    font-weight: 600;
    color: rgba(226, 232, 240, 0.85);
    margin-bottom: 4px;
}
.rux-hbu-card-value {
    font-size: 14px;
    font-weight: 700;
    color: rgba(226, 232, 240, 0.95);
}
.rux-hbu-card-sub {
    font-size: 9.5px;
    color: rgba(148, 163, 184, 0.55);
    margin-top: 4px;
    line-height: 1.35;
}

/* ─── HBU Pin-on-Map ──────────────────────────────────────────────── */
.rux-hbu-pin-section {
    margin: 10px 0 12px 0;
}
.rux-hbu-pin-label {
    font-size: 11px;
    font-weight: 600;
    color: rgba(148, 163, 184, 0.7);
    margin-bottom: 6px;
}
.rux-eval-opt {
    font-weight: 400;
    font-style: italic;
    opacity: 0.7;
}
.rux-hbu-pin-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 9px 14px;
    background: rgba(99, 102, 241, 0.08);
    border: 1px dashed rgba(99, 102, 241, 0.4);
    border-radius: 8px;
    color: rgba(129, 140, 248, 0.9);
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s;
    text-align: left;
}
.rux-hbu-pin-btn:hover {
    background: rgba(99, 102, 241, 0.14);
    border-color: rgba(99, 102, 241, 0.65);
}
.rux-hbu-pin-btn-active {
    background: rgba(239, 68, 68, 0.1) !important;
    border-color: rgba(239, 68, 68, 0.55) !important;
    color: rgba(252, 165, 165, 0.95) !important;
    animation: rux-pin-pulse 1.2s ease-in-out infinite;
}
@keyframes rux-pin-pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0); }
    50%       { box-shadow: 0 0 0 4px rgba(239, 68, 68, 0.18); }
}
.rux-hbu-pin-btn-icon {
    flex-shrink: 0;
    display: flex;
    align-items: center;
}
.rux-hbu-pin-chip {
    display: flex;
    align-items: center;
    gap: 7px;
    margin-top: 7px;
    padding: 5px 10px;
    background: rgba(129, 140, 248, 0.1);
    border: 1px solid rgba(129, 140, 248, 0.3);
    border-radius: 6px;
    font-size: 11px;
    color: rgba(129, 140, 248, 0.95);
}
.rux-hbu-pin-chip-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #818cf8;
    flex-shrink: 0;
    animation: rux-pin-dot-pulse 2s ease-in-out infinite;
}
@keyframes rux-pin-dot-pulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50%       { opacity: 0.5; transform: scale(0.75); }
}
.rux-hbu-pin-clear {
    margin-left: auto;
    background: none;
    border: none;
    color: rgba(129, 140, 248, 0.6);
    cursor: pointer;
    font-size: 11px;
    padding: 0 2px;
    line-height: 1;
    flex-shrink: 0;
}
.rux-hbu-pin-clear:hover {
    color: rgba(239, 68, 68, 0.8);
}
/* Leaflet tooltip for the HBU pin marker */
.rux-hbu-pin-tooltip {
    background: rgba(30, 32, 48, 0.92) !important;
    border: 1px solid rgba(129, 140, 248, 0.5) !important;
    color: rgba(129, 140, 248, 1) !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    border-radius: 5px !important;
    padding: 3px 8px !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.4) !important;
}
.rux-hbu-pin-tooltip::before {
    border-top-color: rgba(129, 140, 248, 0.5) !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   REPORT PANEL — NORMAL (NON-MAXIMIZED) WORKSPACE CARD
   Ensures sections list and draft tab scroll cleanly inside the card.
   ═══════════════════════════════════════════════════════════════════════════ */

/* Panel in integrated mode: flex column, no overflow clip on the card itself */
body.rux-integrated-main #rux-main-shell > #rux-report-panel:not(.rux-rpt-maximized) {
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
}

/* Views container fills available card height */
body.rux-integrated-main #rux-main-shell > #rux-report-panel:not(.rux-rpt-maximized) .rux-rpt-views {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    overflow: hidden !important;
}

/* Active view scrolls */
body.rux-integrated-main #rux-main-shell > #rux-report-panel:not(.rux-rpt-maximized) .rux-rpt-view.active {
    flex: 0 0 auto !important;
    min-height: auto !important;
    overflow: visible !important;
    display: flex !important;
    flex-direction: column !important;
}

/* Content area inside each tab scrolls */
body.rux-integrated-main #rux-main-shell > #rux-report-panel:not(.rux-rpt-maximized) .rux-rpt-content {
    flex: 0 0 auto !important;
    min-height: auto !important;
    overflow: visible !important;
}

/* Draft wrap: flex column so editor can grow; allow scroll if content overflows */
body.rux-integrated-main #rux-main-shell > #rux-report-panel:not(.rux-rpt-maximized) .rux-rpt-draft-wrap {
    display: flex !important;
    flex-direction: column !important;
    flex: 0 0 auto !important;
    min-height: auto !important;
    overflow: visible !important;
}

/* Canvas layout in normal mode: single column (sidebar hidden) */
body.rux-integrated-main #rux-main-shell > #rux-report-panel:not(.rux-rpt-maximized) .rux-rpt-canvas-side {
    display: none !important;
}

body.rux-integrated-main #rux-main-shell > #rux-report-panel:not(.rux-rpt-maximized) .rux-rpt-canvas-layout {
    display: flex !important;
    flex-direction: column !important;
    flex: 0 0 auto !important;
    min-height: auto !important;
}

body.rux-integrated-main #rux-main-shell > #rux-report-panel:not(.rux-rpt-maximized) .rux-rpt-canvas-main {
    flex: 0 0 auto !important;
    min-height: auto !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: visible !important;
}

/* Draft editor in normal mode: fills card height, scrolls internally */
body.rux-integrated-main #rux-main-shell > #rux-report-panel:not(.rux-rpt-maximized) #rux-rpt-draft-editor {
    flex: 1 1 auto !important;
    min-height: 120px !important;
    resize: none !important;
    overflow-y: auto !important;
}

/* New report card layout — sections list fills available height */
body.rux-integrated-main #rux-main-shell > #rux-report-panel:not(.rux-rpt-maximized) .rux-rpt-sections-list {
    flex: 0 0 auto !important;
    min-height: auto !important;
    overflow: visible !important;
}
body.rux-integrated-main #rux-main-shell > #rux-report-panel:not(.rux-rpt-maximized) .rux-rpt-footer-bar {
    flex-shrink: 0 !important;
}
body.rux-integrated-main #rux-main-shell > #rux-report-panel:not(.rux-rpt-maximized) .rux-rpt-setup {
    flex-shrink: 0 !important;
}

/* ════════════════════════════════════════════════════════════════════════════
   REPORT CANVAS — MAXIMIZE / FULLSCREEN MODE
   These rules fire when JS portals the panel to <body> and adds
   .rux-rpt-maximized.  The old inline-HTML rules target
   #rux-main-shell > #rux-report-panel, so they stop matching once the panel
   is moved to body — leaving these rules in full control.
   ════════════════════════════════════════════════════════════════════════════ */

/* 1 ── Panel: fixed full-viewport overlay ──────────────────────────────── */
#rux-report-panel.rux-rpt-maximized {
    position: fixed !important;
    inset: 18px !important;
    width: auto !important;
    height: auto !important;
    max-width: none !important;
    max-height: none !important;
    min-width: 0 !important;
    min-height: 0 !important;
    margin: 0 !important;
    z-index: 9990 !important;
    display: flex !important;
    flex-direction: column !important;
    border-radius: 24px !important;
    background: linear-gradient(165deg, rgba(9,14,26,0.98) 0%, rgba(11,18,32,0.97) 100%) !important;
    border: 1px solid rgba(147,197,253,0.24) !important;
    box-shadow:
        0 0 0 1px rgba(147,197,253,0.07),
        0 48px 120px rgba(2,6,20,0.80),
        inset 0 1px 0 rgba(255,255,255,0.05) !important;
    overflow: hidden !important;
    transform: none !important;
    transition: none !important;
}

/* 2 ── Dim everything behind the canvas ────────────────────────────────── */
body.rux-report-canvas-mode #rux-left-console,
body.rux-report-canvas-mode #rux-right-hero,
body.rux-report-canvas-mode #rux-main-shell > .rux-workspace-card:not(#rux-report-panel) {
    opacity: 0.07 !important;
    pointer-events: none !important;
    filter: blur(3px) saturate(0.3) !important;
    transition: opacity 0.25s ease, filter 0.25s ease !important;
}

/* 3 ── Header strip (52 px, flex row) ──────────────────────────────────── */
#rux-report-panel.rux-rpt-maximized .rux-rpt-header {
    flex-shrink: 0 !important;
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    padding: 12px 20px 11px !important;
    min-height: 52px !important;
    max-height: 52px !important;
    border-bottom: 1px solid rgba(148,163,184,0.1) !important;
}

/* 4 ── Report-type pill row ─────────────────────────────────────────────── */
#rux-rpt-type-pills {
    display: flex !important;
    gap: 5px !important;
    align-items: center !important;
    flex-shrink: 0 !important;
    margin: 0 auto 0 12px !important;
}

.rux-rpt-type-pill {
    display: inline-flex !important;
    align-items: center !important;
    padding: 3px 12px !important;
    border-radius: 20px !important;
    font-size: 10.5px !important;
    font-weight: 600 !important;
    letter-spacing: 0.05em !important;
    cursor: pointer !important;
    border: 1px solid rgba(148,163,184,0.2) !important;
    background: transparent !important;
    color: rgba(148,163,184,0.65) !important;
    transition: all 0.15s ease !important;
    white-space: nowrap !important;
    line-height: 1.4 !important;
}
.rux-rpt-type-pill:hover {
    border-color: rgba(99,102,241,0.5) !important;
    color: rgba(165,180,252,0.9) !important;
    background: rgba(99,102,241,0.1) !important;
}
.rux-rpt-type-pill.active {
    border-color: rgba(99,102,241,0.65) !important;
    background: rgba(99,102,241,0.18) !important;
    color: rgba(165,180,252,0.95) !important;
}
.rux-rpt-type-pill[data-type="hbu"].active {
    border-color: rgba(245,158,11,0.6) !important;
    background: rgba(245,158,11,0.14) !important;
    color: rgba(252,211,77,0.95) !important;
}
.rux-rpt-type-pill[data-type="feasibility"].active {
    border-color: rgba(16,185,129,0.6) !important;
    background: rgba(16,185,129,0.14) !important;
    color: rgba(52,211,153,0.95) !important;
}
.rux-rpt-type-pill[data-type="site"].active {
    border-color: rgba(100,116,139,0.55) !important;
    background: rgba(100,116,139,0.14) !important;
    color: rgba(148,163,184,0.95) !important;
}

/* 5 ── Tabs: hidden in canvas mode ─────────────────────────────────────── */
#rux-report-panel.rux-rpt-maximized .rux-rpt-tabs {
    display: none !important;
}

/* 6 ── Views container: flex column, fills remaining space ─────────────── */
#rux-report-panel.rux-rpt-maximized .rux-rpt-views {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    overflow: hidden !important;
    display: flex !important;
    flex-direction: column !important;
}

/* 7 ── All tab-views hidden except draft (the canvas) ──────────────────── */
#rux-report-panel.rux-rpt-maximized .rux-rpt-view {
    display: none !important;
}
#rux-report-panel.rux-rpt-maximized .rux-rpt-view[data-rpt-view="draft"] {
    display: flex !important;
    flex: 1 1 auto !important;
    min-height: 0 !important;
    flex-direction: column !important;
    overflow: hidden !important;
}

/* 8 ── Content wrapper inside draft view ───────────────────────────────── */
#rux-report-panel.rux-rpt-maximized .rux-rpt-content {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    overflow: hidden !important;
    display: flex !important;
    flex-direction: column !important;
    padding: 0 !important;
}

/* 9 ── Draft-wrap (direct child of content) ────────────────────────────── */
#rux-report-panel.rux-rpt-maximized .rux-rpt-draft-wrap {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    overflow: hidden !important;
    display: flex !important;
    flex-direction: column !important;
}

/* 10 ── Toolbar: hide — keeps it lean ──────────────────────────────────── */
#rux-report-panel.rux-rpt-maximized .rux-rpt-draft-toolbar {
    display: none !important;
}

/* 11 ── Two-column grid: left rail | right editor ──────────────────────── */
#rux-report-panel.rux-rpt-maximized .rux-rpt-canvas-layout {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    display: grid !important;
    grid-template-columns: 300px 1fr !important;
    gap: 0 !important;
    overflow: hidden !important;
}

/* 12 ── Left rail ───────────────────────────────────────────────────────── */
#rux-report-panel.rux-rpt-maximized .rux-rpt-canvas-side {
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
    border-right: 1px solid rgba(148,163,184,0.1) !important;
    padding: 16px 14px 14px !important;
    gap: 12px !important;
}

/* 13 ── Canvas cards in left rail ──────────────────────────────────────── */
#rux-report-panel.rux-rpt-maximized .rux-rpt-canvas-card {
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
    min-height: 0 !important;
}
/* Outline card: grows */
#rux-report-panel.rux-rpt-maximized .rux-rpt-canvas-card:first-child {
    flex: 1 1 auto !important;
}
/* Notes card: fixed */
#rux-report-panel.rux-rpt-maximized .rux-rpt-canvas-card:last-child {
    flex-shrink: 0 !important;
    max-height: 140px !important;
}

/* 14 ── Outline list: scrollable ───────────────────────────────────────── */
#rux-report-panel.rux-rpt-maximized #rux-rpt-canvas-outline,
#rux-report-panel.rux-rpt-maximized .rux-rpt-canvas-outline {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    overflow-y: auto !important;
    scrollbar-width: thin !important;
    scrollbar-color: rgba(148,163,184,0.18) transparent !important;
}

/* 15 ── Notes textarea in left rail ────────────────────────────────────── */
#rux-report-panel.rux-rpt-maximized #rux-rpt-canvas-notes-editor {
    flex: 1 1 auto !important;
    min-height: 52px !important;
    max-height: 90px !important;
    resize: none !important;
}

/* 16 ── Right main area ─────────────────────────────────────────────────── */
#rux-report-panel.rux-rpt-maximized .rux-rpt-canvas-main {
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
    padding: 16px 20px 0 16px !important;
    gap: 10px !important;
}
#rux-report-panel.rux-rpt-maximized .rux-rpt-canvas-mainbar {
    flex-shrink: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
}

/* 17 ── Draft editor/canvas doc: fills all height, document surface feel ── */
#rux-report-panel.rux-rpt-maximized #rux-rpt-draft-editor {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    resize: none !important;
    overflow-y: auto !important;
    scrollbar-width: thin !important;
    scrollbar-color: rgba(148,163,184,0.18) transparent !important;
}
/* Canvas-doc (contenteditable) in maximize — restore document typography */
#rux-report-panel.rux-rpt-maximized #rux-rpt-draft-editor.rux-rpt-canvas-doc {
    padding: 36px 52px 24px !important;
    background: rgba(10, 16, 32, 0.72) !important;
    border: 1px solid rgba(148, 163, 184, 0.1) !important;
    border-radius: 8px !important;
    color: #dde6f4 !important;
    font-family: 'Georgia', 'Charter', 'Times New Roman', serif !important;
    font-size: 15px !important;
    line-height: 1.78 !important;
    outline: none !important;
}

/* 18 ── Hide footer, gen row, help text ─────────────────────────────────── */
#rux-report-panel.rux-rpt-maximized .rux-rpt-footer,
#rux-report-panel.rux-rpt-maximized .rux-rpt-gen-row,
#rux-report-panel.rux-rpt-maximized .rux-rpt-notes-help {
    display: none !important;
}

/* 19 ── Clean up header chrome in maximize mode ─────────────────────────── */
/* Hide decorative fold-icon glyph and the reorder grip — not meaningful in
   fullscreen canvas.  The fold button is kept and re-purposed as "restore to
   card" (its click is intercepted in JS to un-maximize without folding).    */
#rux-report-panel.rux-rpt-maximized .rux-card-fold-icon,
#rux-report-panel.rux-rpt-maximized .rux-card-grip {
    display: none !important;
}

/* Fold button: shown in maximize mode as the restore-to-card action */
#rux-report-panel.rux-rpt-maximized .rux-card-fold {
    display: inline-flex !important;
}

/* Keep maximize-toggle and close visible and push them flush-right */
#rux-report-panel.rux-rpt-maximized .rux-card-actions {
    display: flex !important;
    align-items: center !important;
    gap: 4px !important;
    margin-left: auto !important;
    flex-shrink: 0 !important;
}

/* Type-pills row: pushed between title and actions, no auto-margin override */
#rux-rpt-type-pills {
    margin-left: 14px !important;
    margin-right: 0 !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   GEMINI CANVAS — CONTENTEDITABLE DOCUMENT SURFACE
   ══════════════════════════════════════════════════════════════════════════ */

/* ── Canvas document surface (replaces textarea in maximize mode) ─────── */
.rux-rpt-canvas-doc {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    padding: 36px 52px 24px;
    background: rgba(10, 16, 32, 0.72);
    color: #dde6f4;
    font-family: 'Georgia', 'Charter', 'Times New Roman', serif;
    font-size: 15px;
    line-height: 1.78;
    border-radius: 8px;
    border: 1px solid rgba(148, 163, 184, 0.1);
    outline: none;
    cursor: text;
    scroll-behavior: smooth;
    /* Subtle document feel */
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

/* Placeholder via ::before on truly-empty div */
.rux-rpt-canvas-doc:empty::before {
    content: attr(data-placeholder);
    color: rgba(100, 116, 139, 0.65);
    font-style: italic;
    pointer-events: none;
    display: block;
}

/* Double-class specificity beats single-class rules from inline <style> blocks */
.rux-rpt-draft-editor.rux-rpt-canvas-doc {
    font-family: 'Georgia', 'Charter', 'Times New Roman', serif;
    font-size: 15px;
    line-height: 1.78;
    padding: 36px 52px 24px;
    background: rgba(10, 16, 32, 0.72);
    border: 1px solid rgba(148, 163, 184, 0.1);
    color: #dde6f4;
    resize: none;
    cursor: text;
}

/* Normal (non-maximized) mode: compact */
body.rux-integrated-main #rux-main-shell > #rux-report-panel:not(.rux-rpt-maximized) .rux-rpt-canvas-doc,
body.rux-integrated-main #rux-main-shell > #rux-report-panel:not(.rux-rpt-maximized) .rux-rpt-draft-editor.rux-rpt-canvas-doc {
    min-height: 120px !important;
    padding: 14px 16px !important;
    font-size: 13px !important;
    border-radius: 6px !important;
}

/* ── Section blocks in the canvas document ───────────────────────────── */
.rux-rpt-doc-section {
    margin-bottom: 32px;
    padding-bottom: 28px;
    border-bottom: 1px solid rgba(148, 163, 184, 0.1);
    scroll-margin-top: 16px;
    transition: background 0.25s ease;
}
.rux-rpt-doc-section:last-child {
    border-bottom: none;
    margin-bottom: 0;
}

/* Highlight flash when jumped-to from TOC */
.rux-rpt-doc-section-highlight {
    background: rgba(79, 70, 229, 0.08) !important;
    border-radius: 6px;
}

/* Section heading — H2 style */
.rux-rpt-doc-sec-heading {
    font-family: -apple-system, 'Segoe UI', Arial, sans-serif;
    font-size: 16px;
    font-weight: 700;
    color: #c7d8f0;
    margin: 0 0 14px;
    padding: 0;
    letter-spacing: -0.01em;
    line-height: 1.25;
    border: none;
    outline: none;
}

/* Paragraphs inside sections */
.rux-rpt-doc-section p {
    margin: 0 0 13px;
    color: #b8cde4;
}
.rux-rpt-doc-section p:last-child {
    margin-bottom: 0;
}

/* New section placeholder state */
.rux-rpt-doc-section-new {
    opacity: 0.75;
}

/* ── Outline dots (left rail TOC) ─────────────────────────────────────── */
.rux-rpt-outline-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
    margin-top: 3px;
    margin-right: 8px;
}
.rux-rpt-outline-dot.dot-ready {
    background: #22c55e;
    box-shadow: 0 0 5px rgba(34, 197, 94, 0.45);
}
.rux-rpt-outline-dot.dot-loading {
    background: #f59e0b;
    animation: rux-dot-pulse 1s ease-in-out infinite;
}
.rux-rpt-outline-dot.dot-empty {
    background: rgba(148, 163, 184, 0.22);
    border: 1px solid rgba(148, 163, 184, 0.35);
}

@keyframes rux-dot-pulse {
    0%, 100% { opacity: 1; }
    50%       { opacity: 0.35; }
}

/* ── Updated outline item layout (includes dot + meta) ───────────────── */
.rux-rpt-canvas-outline-top {
    display: flex !important;
    align-items: flex-start !important;
}
.rux-rpt-canvas-outline-meta {
    flex: 1 1 auto;
    min-width: 0;
}
.rux-rpt-canvas-outline-title-row {
    display: flex;
    align-items: center;
    gap: 5px;
    margin-bottom: 3px;
}

/* Jump-to-section button (looks like a link) */
.rux-rpt-canvas-outline-jump {
    background: none;
    border: none;
    padding: 0;
    color: #7c9dc0;
    font-size: 11.5px;
    font-weight: 600;
    cursor: pointer;
    text-align: left;
    line-height: 1.3;
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.rux-rpt-canvas-outline-jump:hover {
    color: #c7d8f0;
    text-decoration: underline;
}
.is-loading .rux-rpt-canvas-outline-jump {
    color: #d9a63c;
}

/* ── Canvas quick-actions bar ─────────────────────────────────────────── */
.rux-rpt-canvas-quickbar {
    display: none; /* hidden in card/normal mode */
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 5px 12px;
    background: rgba(8, 14, 28, 0.75);
    border-top: 1px solid rgba(148, 163, 184, 0.1);
    border-radius: 0 0 6px 6px;
    flex-shrink: 0;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}
#rux-report-panel.rux-rpt-maximized .rux-rpt-canvas-quickbar {
    display: flex !important;
}

.rux-rpt-qbar-left,
.rux-rpt-qbar-right {
    display: flex;
    align-items: center;
    gap: 5px;
}
.rux-rpt-qbar-center {
    flex: 1 1 auto;
    text-align: center;
}
.rux-rpt-qbar-wc {
    font-size: 11px;
    color: rgba(100, 116, 139, 0.7);
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.02em;
}

.rux-rpt-qbar-btn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    border-radius: 6px;
    border: 1px solid rgba(148, 163, 184, 0.18);
    background: rgba(22, 33, 54, 0.7);
    color: rgba(148, 163, 184, 0.75);
    font-size: 11.5px;
    font-family: inherit;
    cursor: pointer;
    transition: background 0.14s, color 0.14s, border-color 0.14s;
    white-space: nowrap;
}
.rux-rpt-qbar-btn:hover {
    background: rgba(40, 55, 80, 0.85);
    color: #c7d8f0;
    border-color: rgba(148, 163, 184, 0.3);
}
.rux-rpt-qbar-btn-primary {
    border-color: rgba(99, 102, 241, 0.4);
    background: rgba(79, 70, 229, 0.16);
    color: #a5b4fc;
}
.rux-rpt-qbar-btn-primary:hover {
    background: rgba(79, 70, 229, 0.28);
    color: #c7d2fe;
    border-color: rgba(99, 102, 241, 0.55);
}

/* ============================================================
   MAP TOGGLE BUTTON
   ============================================================ */
#rux-ai-map-toggle-btn {
    flex: 0 0 auto !important;
    width: 32px !important;
    height: 32px !important;
    border-radius: 8px !important;
    border: 1px solid rgba(187, 247, 208, 0.22) !important;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0) 46%),
        linear-gradient(135deg, rgba(134, 239, 172, 0.18), rgba(34, 197, 94, 0.12)) !important;
    color: rgba(220, 252, 231, 0.9) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    transition: all 0.18s ease !important;
    padding: 0 !important;
    margin-right: 2px !important;
    position: relative !important;
}

#rux-ai-map-toggle-btn:hover {
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.01) 46%),
        linear-gradient(135deg, rgba(134, 239, 172, 0.24), rgba(34, 197, 94, 0.16)) !important;
    border-color: rgba(187, 247, 208, 0.32) !important;
    transform: translateY(-1px) !important;
}

#rux-ai-map-toggle-btn.map-off {
    border-color: rgba(148, 163, 184, 0.3) !important;
    background: rgba(15, 23, 42, 0.5) !important;
    color: rgba(148, 163, 184, 0.5) !important;
}

/* In ibar context, match the 36px send button height */
#rux-ibar #rux-ai-map-toggle-btn {
    width: 36px !important;
    height: 36px !important;
    border-radius: 10px !important;
    margin-right: 0 !important;
}

#rux-ai-map-toggle-btn.map-off::after {
    content: '' !important;
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    width: 22px !important;
    height: 1.5px !important;
    background: rgba(148, 163, 184, 0.6) !important;
    transform: translate(-50%, -50%) rotate(-45deg) !important;
    border-radius: 2px !important;
    pointer-events: none !important;
}

/* ============================================================
   THINKING BUBBLE (typing indicator)
   ============================================================ */
#rux-ai-typing {
    display: none !important;
    padding: 4px 0 6px 8px !important;
    background: transparent !important;
    margin: 0 !important;
}

#rux-ai-typing.active {
    display: flex !important;
    align-items: flex-start !important;
}

.rux-thinking-bubble {
    display: inline-flex !important;
    align-items: center !important;
    gap: 5px !important;
    background: rgba(30, 41, 59, 0.92) !important;
    border: 1px solid rgba(55, 65, 81, 0.8) !important;
    border-radius: 16px 16px 16px 4px !important;
    padding: 9px 14px !important;
    backdrop-filter: blur(8px) !important;
}

/* Use #id + class for high specificity to beat inline <style> .rux-ai-typing span rules */
#rux-ai-typing .rux-dot {
    display: inline-block !important;
    width: 7px !important;
    height: 7px !important;
    border-radius: 50% !important;
    background: rgba(34, 211, 238, 0.75) !important;
    animation: ruxDotBounce 1.2s infinite ease-in-out !important;
    flex-shrink: 0 !important;
    margin-left: 0 !important;
}

#rux-ai-typing .rux-dot:nth-child(1) { animation-delay: 0s !important; }
#rux-ai-typing .rux-dot:nth-child(2) { animation-delay: 0.18s !important; }
#rux-ai-typing .rux-dot:nth-child(3) { animation-delay: 0.36s !important; }

@keyframes ruxDotBounce {
    0%, 60%, 100% {
        transform: translateY(0) scale(1) !important;
        opacity: 0.5 !important;
    }
    30% {
        transform: translateY(-6px) scale(1.15) !important;
        opacity: 1 !important;
    }
}

/* ── Area Analytics Panel fixes ───────────────────────────────── */

/* Fix 1a: Allow h5 title to wrap in narrow chart-box.small columns */
.chart-box.small h5 {
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: unset !important;
    line-height: 1.3 !important;
}

/* Fix 1b: Tone down dispersion pill — make it read as footnote, not badge */
.pill#pill-dispersion {
    background: rgba(186, 230, 193, 0.04) !important;
    border-color: rgba(186, 230, 193, 0.08) !important;
    color: rgba(148, 163, 184, 0.55) !important;
    font-size: 8px !important;
    padding: 3px 7px !important;
    font-weight: 500 !important;
    width: 100% !important;
    box-sizing: border-box !important;
    justify-content: center !important;
}

/* Fix 2: Single-column layout when only one stock-mix box is visible */
#section-stock-mix .rux-two-col.single-col {
    grid-template-columns: 1fr !important;
}

/* Fix 3: Area Snapshot section — remove extra top margin since it's the first item */
.rux-snapshot-section {
    margin-top: 0 !important;
}

/* Fix 8: KPI card labels — allow wrapping so full title is visible */
.rux-mini-card .lbl {
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: unset !important;
    font-size: 8px !important;
    line-height: 1.3 !important;
}

/* KPI card values — reduce size so long values ($245,000) don't wrap */
.rux-mini-card .val {
    font-size: 12px !important;
    letter-spacing: -0.02em !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

/* Fix 4: Taller canvas for amenity radar so point labels don't clip */
#chart-amenity-profile {
    height: 170px !important;
}

/* ═══════════════════════════════════════════════════════════════
   DESIGN-CRITIQUE PASS — 2026-04-20
   Compact stats card, radii scale, touch targets, legend reposition,
   Inter on Leaflet, cluster cap, AI header density.
   ═══════════════════════════════════════════════════════════════ */

/* ── Compact stats card (3-cell strip + collapsible details) ── */
body.rux-integrated-main #rux-left-stats-card[data-compact="1"] {
    padding: 10px 10px 6px !important;
    border-radius: 12px !important;
}
body.rux-integrated-main #rux-left-stats-card[data-compact="1"] .rux-left-stats-strip {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 8px !important;
    align-items: stretch !important;
}
body.rux-integrated-main #rux-left-stats-card[data-compact="1"] .rux-left-stats-cell {
    padding: 6px 4px !important;
    border-right: 1px solid rgba(148, 163, 184, 0.14) !important;
    min-width: 0 !important;
}
body.rux-integrated-main #rux-left-stats-card[data-compact="1"] .rux-left-stats-cell:last-child {
    border-right: 0 !important;
}
body.rux-integrated-main #rux-left-stats-card[data-compact="1"] .rux-left-stats-cell .rux-left-stats-key {
    font-size: 10px !important;
    letter-spacing: 0.05em !important;
    text-transform: uppercase !important;
    color: #8fa1bd !important;
    margin-bottom: 2px !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}
body.rux-integrated-main #rux-left-stats-card[data-compact="1"] .rux-left-stats-cell .rux-left-stats-val {
    font-size: 15px !important;
    font-weight: 700 !important;
    color: #f1f5f9 !important;
    line-height: 1.1 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}
body.rux-integrated-main #rux-left-stats-card[data-compact="1"] .rux-left-stats-asof {
    margin-top: 8px !important;
    font-size: 10px !important;
    color: #8fa1bd !important;
    letter-spacing: 0.02em !important;
    text-align: center !important;
    opacity: 0.78 !important;
}
body.rux-integrated-main #rux-left-stats-card[data-compact="1"] .rux-left-stats-details {
    margin-top: 8px !important;
    border-top: 1px solid rgba(148, 163, 184, 0.14) !important;
    padding-top: 6px !important;
}
body.rux-integrated-main #rux-left-stats-card[data-compact="1"] .rux-left-stats-details > summary {
    list-style: none !important;
    cursor: pointer !important;
    font-size: 10px !important;
    letter-spacing: 0.07em !important;
    text-transform: uppercase !important;
    color: #9fb0c8 !important;
    padding: 6px 2px !important;
    min-height: 32px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    user-select: none !important;
}
body.rux-integrated-main #rux-left-stats-card[data-compact="1"] .rux-left-stats-details > summary::-webkit-details-marker {
    display: none !important;
}
body.rux-integrated-main #rux-left-stats-card[data-compact="1"] .rux-left-stats-details > summary::after {
    content: "▾";
    font-size: 10px;
    color: #64748b;
    transition: transform 0.2s ease;
}
body.rux-integrated-main #rux-left-stats-card[data-compact="1"] .rux-left-stats-details[open] > summary::after {
    transform: rotate(180deg);
}
body.rux-integrated-main #rux-left-stats-card[data-compact="1"] .rux-left-stats-details:focus-within > summary {
    outline: 2px solid rgba(96, 165, 250, 0.6);
    outline-offset: 2px;
    border-radius: 6px;
}
body.rux-integrated-main #rux-left-stats-card[data-compact="1"] .rux-left-stats-details-body {
    padding-top: 6px !important;
}
body.rux-integrated-main #rux-left-stats-card[data-compact="1"] .rux-left-stats-mini-grid {
    display: grid !important;
    grid-template-columns: 1fr auto !important;
    row-gap: 4px !important;
    column-gap: 10px !important;
    margin-bottom: 10px !important;
}
body.rux-integrated-main #rux-left-stats-card[data-compact="1"] .rux-left-stats-mini-grid .rux-left-stats-key {
    font-size: 11px !important;
    color: #9fb0c8 !important;
}
body.rux-integrated-main #rux-left-stats-card[data-compact="1"] .rux-left-stats-mini-grid .rux-left-stats-val {
    font-size: 11px !important;
    font-weight: 600 !important;
    color: #e8f0fb !important;
}

/* ── District chip: 44×44 touch target (WCAG 2.5.5 AA) ── */
body.rux-integrated-main #rux-district-strip .rux-district-chip {
    min-height: 44px !important;
    padding: 10px 14px !important;
    border-radius: 20px !important;
}

/* ── Leaflet typography: force Inter across all map descendants ── */
body.rux-integrated-main .leaflet-container,
body.rux-integrated-main .leaflet-container .leaflet-control,
body.rux-integrated-main .leaflet-container .leaflet-popup-content,
body.rux-integrated-main .leaflet-container .leaflet-control-attribution,
body.rux-integrated-main .leaflet-container .leaflet-draw-actions,
body.rux-integrated-main .leaflet-container .leaflet-draw-tooltip {
    font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
}

/* ── Legend: move bottom-right so it stops competing with layer control (top-right) ── */
body.rux-integrated-main #rux-right-hero #ppsqm-legend {
    top: auto !important;
    right: 14px !important;
    bottom: 92px !important;
    left: auto !important;
    border-radius: 12px !important;
}

/* ── Corner-radius scale: 8 / 12 / 20 — tame one-off values ── */
body.rux-integrated-main {
    --rux-radius-sm: 8px;
    --rux-radius-md: 12px;
    --rux-radius-lg: 20px;
}
body.rux-integrated-main #rux-left-intel,
body.rux-integrated-main #rux-ai-panel,
body.rux-integrated-main #rux-ai-panel .rux-ai-commandbar {
    border-radius: var(--rux-radius-md) !important;
}
body.rux-integrated-main .rux-ai-chip {
    border-radius: var(--rux-radius-lg) !important;
}

/* ── AI header: unify button styling, hide verbose text labels on Clear/Log ── */
body.rux-integrated-main #rux-ai-panel[data-integrated="1"] #rux-clear-chat-btn,
body.rux-integrated-main #rux-ai-panel[data-integrated="1"] #rux-export-log-btn {
    font-size: 0 !important;
    width: 32px !important;
    height: 32px !important;
    min-width: 32px !important;
    padding: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: var(--rux-radius-sm) !important;
}
body.rux-integrated-main #rux-ai-panel[data-integrated="1"] #rux-clear-chat-btn::before {
    content: "";
    display: inline-block;
    width: 15px;
    height: 15px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23cbd5e1' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 6h18M8 6V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2M19 6l-1 14a2 2 0 0 1-2 2H8a2 2 0 0 1-2-2L5 6'/%3E%3C/svg%3E") center/contain no-repeat;
}
body.rux-integrated-main #rux-ai-panel[data-integrated="1"] #rux-export-log-btn i {
    font-size: 14px !important;
}
body.rux-integrated-main #rux-ai-panel[data-integrated="1"] #rux-export-log-btn i + * {
    display: none !important;
}

/* ── Map-aware chip: hide below narrow widths (low-value indicator) ── */
@media (max-width: 1180px) {
    body.rux-integrated-main #rux-map-aware-chip {
        display: none !important;
    }
}

/* end DESIGN-CRITIQUE PASS */

/* end RUX UI Cleanup */
/* ══════════════════════════════════════════════════════════════
   RUX LOGIN + LOGO OVERRIDES (appended after archive cleanup CSS
   so they win specificity battles)
   ══════════════════════════════════════════════════════════════ */

/* Inline login inputs styled to match .rux-field-value */
input.rux-inline-input,
input.rux-inline-input:hover,
input.rux-inline-input:focus {
    background: transparent !important;
    background-color: transparent !important;
    border: none !important;
    border-bottom: 1px solid rgba(255,255,255,0.12) !important;
    border-radius: 0 !important;
    padding: 0 0 10px !important;
    font-size: 14px !important;
    font-family: inherit !important;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    outline: none !important;
    box-shadow: none !important;
    width: 100% !important;
    box-sizing: border-box !important;
    min-height: 34px !important;
    letter-spacing: 0.01em !important;
    transition: border-color 0.2s ease !important;
    caret-color: #22c55e !important;
}
input.rux-inline-input::placeholder { color: rgba(255,255,255,0.25) !important; }
input.rux-inline-input:focus { border-bottom-color: rgba(34,197,94,0.7) !important; }
input.rux-inline-input:-webkit-autofill,
input.rux-inline-input:-webkit-autofill:hover,
input.rux-inline-input:-webkit-autofill:focus {
    -webkit-box-shadow: 0 0 0 1000px #0c111c inset !important;
    -webkit-text-fill-color: #ffffff !important;
    caret-color: #22c55e !important;
    border-bottom: 1px solid rgba(255,255,255,0.12) !important;
    transition: background-color 9999s ease !important;
}

/* Login error + shake on bad password */
@keyframes rux-inline-shake {
    0%,100% { transform: translateX(0); }
    20% { transform: translateX(-6px); }
    40% { transform: translateX(6px); }
    60% { transform: translateX(-4px); }
    80% { transform: translateX(4px); }
}
#rux-login-fields.rux-inline-shake { animation: rux-inline-shake 0.5s ease; }
#rux-login-fields, #rux-status-fields,
#rux-footer-login, #rux-footer-status { transition: opacity 0.35s ease; }
#rux-launch-enter:disabled { pointer-events: none !important; cursor: default !important; }

/* Intro screen brand link (replaces "RUX" text) */
.rux-brand-link {
    font-family: Inter, -apple-system, BlinkMacSystemFont, sans-serif;
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.1em;
    color: rgba(148, 163, 184, 0.5);
    text-decoration: none;
    transition: color 0.2s ease;
}
.rux-brand-link:hover { color: rgba(148, 163, 184, 0.85); }

/* Right panel: large heading logo replacing "RUXEN" h1 */
.rux-heading-logo {
    width: 300px;
    max-width: 80%;
    height: auto;
    display: block;
    filter: brightness(0) invert(1) drop-shadow(0 2px 24px rgba(99, 102, 241, 0.4));
    margin-bottom: 8px;
}

/* AI panel header logo */
.rux-ai-title-logo {
    height: 20px;
    width: auto;
    display: inline-block;
    vertical-align: middle;
    margin-right: 2px;
    filter: brightness(0) invert(1) drop-shadow(0 0 6px rgba(99, 102, 241, 0.5));
}

/* Workspace card header logo */
.rux-rpt-title-logo {
    height: 18px;
    width: auto;
    display: inline-block;
    vertical-align: middle;
    filter: brightness(0) invert(1) drop-shadow(0 0 6px rgba(99, 102, 241, 0.4));
}

/* Empty chat state logo */
.rux-chat-empty-logo {
    width: 160px;
    height: auto;
    display: block;
    margin: 0 auto 8px;
    filter: brightness(0) invert(1) drop-shadow(0 0 18px rgba(99, 102, 241, 0.4));
    opacity: 0.9;
}

/* ── Price-centroid cross marker ────────────────────────────────────
   One per active property segment. Marks the value-weighted center of
   gravity. Translucent pink/red with a soft glow so it reads clearly
   over the green dots + fog (and over either basemap theme). */
.rux-centroid-cross {
    background: transparent;
    border: none;
    pointer-events: auto;
}
.rux-centroid-cross .rux-centroid-cross-inner {
    position: relative;
    width: 34px;
    height: 34px;
}
.rux-centroid-cross .rux-centroid-cross-inner::before,
.rux-centroid-cross .rux-centroid-cross-inner::after {
    content: "";
    position: absolute;
    background: rgba(248, 113, 113, 0.95);
    box-shadow:
        0 0 6px rgba(248, 113, 113, 0.6),
        0 0 14px rgba(248, 113, 113, 0.35);
    border-radius: 1px;
}
.rux-centroid-cross .rux-centroid-cross-inner::before {
    /* vertical arm */
    left: 50%;
    top: 4px;
    bottom: 4px;
    width: 3px;
    transform: translateX(-50%);
}
.rux-centroid-cross .rux-centroid-cross-inner::after {
    /* horizontal arm */
    top: 50%;
    left: 4px;
    right: 4px;
    height: 3px;
    transform: translateY(-50%);
}
/* Light theme tweak — slightly more saturated so the cross still pops
   against the lighter Carto tiles. */
body[data-rux-map-theme="light"] .rux-centroid-cross .rux-centroid-cross-inner::before,
body[data-rux-map-theme="light"] .rux-centroid-cross .rux-centroid-cross-inner::after {
    background: rgba(220, 38, 38, 0.95);
}

/* ── Market-intelligence card: clip overflow, tidy spacing (high specificity
   to beat the inline <style> in the Folium HTML). ── */
body.rux-integrated-main .rux-district-curve-card { overflow: hidden; }
body.rux-integrated-main .rux-district-curve-svg { display: block; width: 100%; height: auto; }
body.rux-integrated-main #rux-yield-pulse-sec { padding: 2px 0 4px; margin-top: 8px; overflow: hidden; }
body.rux-integrated-main #rux-yield-pulse-sec .rux-section-label { margin-top: 0; }
body.rux-integrated-main .rux-intel-mode-pane[data-mode-pane="market"] { overflow-y: auto; max-height: 100%; }

/* ── Report canvas: retheme the jarring indigo "primary" CTA button (the blue
   mess on the section outline incl. HBU) to the dark-glass accent-green. ── */
body.rux-integrated-main .rux-rpt-canvas-outline-btn.primary {
    background: rgba(34, 197, 94, 0.16) !important;
    border-color: rgba(34, 197, 94, 0.42) !important;
    color: #bbf7d0 !important;
}
body.rux-integrated-main .rux-rpt-canvas-outline-btn.primary:hover {
    background: rgba(34, 197, 94, 0.26) !important;
}

/* ── HCMC report canvas: bigger body text + full-width, report-grade charts.
   Gated on data-rux-city="hcmc" so Yerevan reports are untouched. The chart
   figure ships floated-right at 46%/max-height:120px (tiny & messy); here it
   becomes a clean full-width block with legible type. ── */
#rux-report-panel.rux-rpt-maximized #rux-rpt-draft-editor.rux-rpt-canvas-doc {
    font-size: 16.5px !important;
    line-height: 1.85 !important;
}
#rux-report-panel #rux-rpt-draft-editor h1,
#rux-report-panel #rux-rpt-draft-editor .rux-rpt-doc-sec-heading {
    font-size: 23px !important;
    line-height: 1.3 !important;
}
#rux-report-panel #rux-rpt-draft-editor h2 {
    font-size: 19px !important;
    line-height: 1.32 !important;
}
#rux-report-panel #rux-rpt-draft-editor h3 {
    font-size: 16.5px !important;
}
#rux-report-panel #rux-rpt-draft-editor li {
    margin-bottom: 5px !important;
}
/* charts → full-width, centered block (not floated), generous spacing */
#rux-report-panel #rux-rpt-draft-editor .rux-rpt-chart-figure {
    float: none !important;
    clear: both !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin: 22px 0 26px !important;
    padding: 18px 22px 14px !important;
    border: 1px solid rgba(148,163,184,0.22) !important;
    border-radius: 12px !important;
    background: rgba(10,16,32,0.55) !important;
    box-sizing: border-box !important;
}
#rux-report-panel #rux-rpt-draft-editor .rux-rpt-chart-svg {
    width: 100% !important;
    height: auto !important;
    max-height: none !important;
}
#rux-report-panel #rux-rpt-draft-editor .rux-rpt-chart-title {
    font-size: 13px !important;
    letter-spacing: 0.05em !important;
    color: rgba(226,232,240,0.82) !important;
}
#rux-report-panel #rux-rpt-draft-editor .rux-rpt-chart-caption {
    font-size: 11px !important;
    color: rgba(148,163,184,0.7) !important;
    margin-top: 8px !important;
}

/* ── Hide the visible scrollbar on the intelligence panes — still scrollable,
   just no chunky scrollbar. Applies to BOTH cities: this was previously gated
   to HCMC only, which left Yerevan's Model-Intelligence card with the ugly
   default scrollbar (Arthur's parity note). ── */
.rux-intel-mode-pane,
.rux-intel-market-pane,
#rux-left-ai-slot,
#rux-left-intel {
    scrollbar-width: none !important;      /* Firefox */
    -ms-overflow-style: none !important;   /* IE/Edge */
}
.rux-intel-mode-pane::-webkit-scrollbar,
.rux-intel-market-pane::-webkit-scrollbar,
#rux-left-ai-slot::-webkit-scrollbar,
#rux-left-intel::-webkit-scrollbar {
    width: 0 !important;
    height: 0 !important;
    display: none !important;
}

/* ── Compact the price-heatmap segment tray — chips at 122px each made the
   bottom-center tray span the whole screen and overlap other UI. Shrink the
   chips + tray so it's a tidy, narrow strip. Unified across cities (#4: same
   UI both cities — HCMC's compact tray is the master look). ── */
#rux-hex-seg-chips button[data-rux-seg] {
    min-width: 0 !important;
    padding: 5px 9px !important;
    font-size: 10px !important;
    letter-spacing: .1px !important;
    border-radius: 6px !important;
}
#rux-hex-seg-inner {
    gap: 5px !important;
    padding: 7px 10px !important;
    border-radius: 13px !important;
}

/* ── Popup readability: the map-hero popups have a forced dark-glass background
   (rgba(14,21,35,.97)), but several popup builders use near-black inline text
   (#0f172a) meant for a white popup → invisible "empty window". Force any such
   element's text to light. Coloured badges use other hex values and are
   unaffected; child spans inherit the light colour. ── */
#rux-right-hero .leaflet-popup-content [style*="0f172a"] { color: #e5e7eb !important; }
#rux-right-hero .leaflet-popup-content [style*="0F172A"] { color: #e5e7eb !important; }

/* ════════════════════════════════════════════════════════════════════
   ISSUE 2 — 3D real-cards GLOSSY-WHITE theme. When body.rux-3d-realcards is on,
   the SAME RUXEN workspace cards (intel/chat/report/plot) are docked over the 3D
   scene; recolor them from the dark glass to the 3D view's light crystal-glossy
   look (Arthur: "design same, only the color is glossy white"). Mirrors the Twin's
   own glossy panel. Scoped to #rux-3d-overlay so the 2D cards are untouched.
   ════════════════════════════════════════════════════════════════════ */
/* DARK TRANSPARENT GLASS — match the 2D main-workspace cards (NOT white).
   (Reverses the earlier glossy-white-in-3D direction per the new design brief.) */
body.rux-3d .rux-workspace-card {
  background: linear-gradient(180deg, rgba(15,23,42,0.66), rgba(17,24,39,0.60)) !important;
  -webkit-backdrop-filter: blur(14px) saturate(135%) !important;
  backdrop-filter: blur(14px) saturate(135%) !important;
  border: 1px solid rgba(148,163,184,0.28) !important;
}
/* Light text on the dark glass (matches the 2D cards). */
body.rux-3d .rux-workspace-card,
body.rux-3d .rux-workspace-card * {
  color: #dbe6f4 !important;
  border-color: rgba(148,163,184,0.20) !important;
  text-shadow: none !important;
}
/* Re-assert the floating card shadow (cleared by the * rule above). */
body.rux-3d .rux-workspace-card {
  box-shadow: 0 16px 54px rgba(2,6,18,0.55), inset 0 1px 0 rgba(255,255,255,0.06) !important;
}
/* Headers + inner sub-surfaces → translucent dark. */
body.rux-3d .rux-workspace-card .rux-card-head,
body.rux-3d .rux-workspace-card .rux-rpt-header,
body.rux-3d .rux-workspace-card .rux-chat-head-main,
body.rux-3d .rux-workspace-card .rux-ai-messages {
  background: rgba(15,23,42,0.30) !important;
  border-color: rgba(148,163,184,0.18) !important;
}
/* Inputs / selects / textareas → dark glass. */
body.rux-3d .rux-workspace-card input,
body.rux-3d .rux-workspace-card textarea,
body.rux-3d .rux-workspace-card select {
  background: rgba(15,23,42,0.30) !important;
  color: #e2e8f0 !important;
  border: 1px solid rgba(148,163,184,0.24) !important;
}
/* Buttons / chips → dark glass. */
body.rux-3d .rux-workspace-card button {
  background: rgba(148,163,184,0.10) !important;
  border: 1px solid rgba(148,163,184,0.20) !important;
  color: #e2e8f0 !important;
}
/* Brand-green primary action on dark. */
body.rux-3d .rux-workspace-card .rux-fmt-insert {
  background: rgba(34,197,94,0.18) !important;
  border-color: rgba(34,197,94,0.45) !important;
  color: #bbf7d0 !important;
}

/* 3D Control card (control3d) is a 3D-ONLY workspace card: never shown in 2D;
   hidden when closed in 3D. (Its own `.hidden`/`.rux-card-closed` is overridden by
   .rux-workspace-card, so gate it explicitly.) */
body:not(.rux-3d) #rux-control3d-panel { display: none !important; }
body.rux-3d #rux-control3d-panel.rux-card-closed { display: none !important; }

/* 3D Control card: COLUMN layout (header bar on top, scrolling body below) — same
   as the other workspace cards. The engine sets display:flex but not the direction,
   so default row put the header beside the body (broken). Force column + size the
   header/body. */
/* control3d was omitted from the card position list (yerevan_model_mvp_v2.html:16771
   lists chat/intel/report/plot only), so it defaulted to position:static and ignored
   the layout engine's inline left → it flowed onto Market Intelligence (#3 overlap).
   Force absolute positioning to match the other workspace cards. */
body.rux-3d #rux-main-shell > #rux-control3d-panel.rux-workspace-card { position: absolute !important; }
body.rux-3d #rux-control3d-panel { display: flex !important; flex-direction: column !important; overflow: hidden !important; }
body.rux-3d #rux-control3d-panel > .rux-rpt-header { flex: 0 0 auto !important; }
/* 3D Control card body — sectioned controls styled like the Twin's control card,
   inheriting the glossy-white skin from body.rux-3d .rux-workspace-card. */
#rux-control3d-body { flex: 1 1 auto; min-height: 0; padding: 0 0 10px; overflow-y: auto; overflow-x: hidden; }
.r3c-group { padding: 11px 15px; border-top: 1px solid rgba(100,116,139,0.16); }
.r3c-group:first-child { border-top: none; }
.r3c-label { font-size: 9px; font-weight: 800; letter-spacing: .11em; text-transform: uppercase; color: #94a3b8; margin-bottom: 8px; }
.r3c-btn { display: flex; align-items: center; gap: 9px; width: 100%; text-align: left; cursor: pointer;
  background: rgba(148,163,184,0.10); border: 1px solid rgba(148,163,184,0.18); color: #dbe6f4;
  font: 600 11.5px Inter, -apple-system, sans-serif; padding: 8px 11px; border-radius: 9px; margin-bottom: 5px; transition: all .15s; }
.r3c-btn:last-child { margin-bottom: 0; }
.r3c-btn:hover { background: rgba(148,163,184,0.18); }
.r3c-btn.active { background: linear-gradient(135deg, rgba(34,197,94,0.22), rgba(16,185,129,0.16)); color: #d1fae5; border-color: rgba(52,211,153,0.5); box-shadow: 0 0 0 1px rgba(52,211,153,0.18), 0 0 14px rgba(34,197,94,0.28); }
.r3c-btn svg { flex: 0 0 auto; opacity: .8; }
.r3c-btn.active svg { opacity: 1; }
.r3c-row { display: flex; gap: 6px; }
/* review item 17: inside a row ALL buttons drop the bottom margin — the
   :last-child rule above zeroed only the radius button, so polygon and
   radius rendered at different heights */
.r3c-row .r3c-btn { flex: 1 1 0; justify-content: center; margin-bottom: 0; min-width: 0; }
.r3c-range { width: 100%; cursor: pointer; accent-color: #22c55e; }
.r3c-legend { display: flex; flex-direction: column; gap: 6px; }
.r3c-leg { display: flex; align-items: center; gap: 8px; font-size: 10.5px; color: #cbd5e1; font-weight: 500; }
.r3c-dot { width: 11px; height: 11px; border-radius: 50%; flex: 0 0 auto; box-shadow: 0 0 0 1px rgba(0,0,0,.15); }
.r3c-info-empty { font-size: 11px; color: #94a3b8; font-style: italic; padding: 4px 0; }

/* 3D chat card: force the SAME glossy-white as the control card / early 3D panels.
   The integrated-chat rules set a dark translucent card + dark header that beat my
   earlier selectors; use #rux-main-shell > #rux-chat-panel.rux-workspace-card
   specificity (+1 class over the inline rule) to win. Keep the user's accent bubble. */
body.rux-3d #rux-main-shell > #rux-chat-panel.rux-workspace-card {
  background: linear-gradient(180deg, rgba(15,23,42,0.66), rgba(17,24,39,0.60)) !important;
  background-image: linear-gradient(180deg, rgba(15,23,42,0.66), rgba(17,24,39,0.60)) !important;
  -webkit-backdrop-filter: blur(14px) saturate(135%) !important;
  backdrop-filter: blur(14px) saturate(135%) !important;
}
body.rux-3d #rux-main-shell > #rux-chat-panel.rux-workspace-card .rux-rpt-header,
body.rux-3d #rux-main-shell > #rux-chat-panel.rux-workspace-card .rux-card-head,
body.rux-3d #rux-main-shell > #rux-chat-panel.rux-workspace-card .rux-chat-head-main {
  background: rgba(15,23,42,0.30) !important;
  border-color: rgba(148,163,184,0.18) !important;
}
body.rux-3d #rux-main-shell > #rux-chat-panel.rux-workspace-card .rux-ai-messages,
body.rux-3d #rux-main-shell > #rux-chat-panel.rux-workspace-card .rux-ai-body,
body.rux-3d #rux-main-shell > #rux-chat-panel.rux-workspace-card #rux-ibar {
  background: transparent !important;
}
body.rux-3d #rux-main-shell > #rux-chat-panel.rux-workspace-card .rux-ai-message-assistant .rux-ai-message-inner {
  background: rgba(15,23,42,0.30) !important;
  color: #e2e8f0 !important;
  border: 1px solid rgba(148,163,184,0.18) !important;
}
body.rux-3d #rux-main-shell > #rux-chat-panel.rux-workspace-card #rux-ai-input,
body.rux-3d #rux-main-shell > #rux-chat-panel.rux-workspace-card textarea {
  background: rgba(15,23,42,0.30) !important;
  color: #e2e8f0 !important;
  border-color: rgba(148,163,184,0.24) !important;
}
body.rux-3d #rux-main-shell > #rux-chat-panel.rux-workspace-card #rux-ai-input::placeholder { color: #94a3b8 !important; }
/* 3D chat header FOREGROUND: the bar was built for a dark background (light text +
   icons). Now that it is glossy-white, darken the wordmark/tabs/chrome so they stay
   legible, and give the active tab a visible chip instead of white-on-white. */
body.rux-3d #rux-main-shell > #rux-chat-panel.rux-workspace-card .rux-rpt-header,
body.rux-3d #rux-main-shell > #rux-chat-panel.rux-workspace-card .rux-card-head,
body.rux-3d #rux-main-shell > #rux-chat-panel.rux-workspace-card .rux-rpt-header *,
body.rux-3d #rux-main-shell > #rux-chat-panel.rux-workspace-card .rux-card-head * {
  color: #cbd5e1 !important;
}
body.rux-3d #rux-main-shell > #rux-chat-panel.rux-workspace-card .rux-rpt-header svg,
body.rux-3d #rux-main-shell > #rux-chat-panel.rux-workspace-card .rux-card-head svg {
  stroke: #cbd5e1 !important;
}
body.rux-3d #rux-main-shell > #rux-chat-panel.rux-workspace-card .rux-ai-mode-btn.active {
  color: #f1f6fc !important;
  background: rgba(148,163,184,0.16) !important;
  border-color: rgba(148,163,184,0.28) !important;
}

/* ════════════════════════════════════════════════════════════════════
   ISSUE #1 — GLOSSY-WHITE PARITY for the remaining workspace cards in 3D.
   The generic body.rux-3d .rux-workspace-card rule (0 IDs) loses to the dark
   integrated-main 2-ID rule (yerevan_model_mvp_v2.html:16771), so intel / report
   / plot stayed dark while chat + control3d (which has a 2-ID override / no dark
   competitor) went glossy. Mirror the chat card's 2-ID override for each.
   ════════════════════════════════════════════════════════════════════ */
body.rux-3d #rux-main-shell > #rux-intel-panel.rux-workspace-card,
body.rux-3d #rux-main-shell > #rux-report-panel.rux-workspace-card,
body.rux-3d #rux-main-shell > #rux-plot-panel.rux-workspace-card {
  background: linear-gradient(180deg, rgba(15,23,42,0.66), rgba(17,24,39,0.60)) !important;
  background-image: linear-gradient(180deg, rgba(15,23,42,0.66), rgba(17,24,39,0.60)) !important;
  -webkit-backdrop-filter: blur(14px) saturate(135%) !important;
  backdrop-filter: blur(14px) saturate(135%) !important;
  border: 1px solid rgba(148,163,184,0.28) !important;
  box-shadow: 0 16px 54px rgba(2,6,18,0.55), inset 0 1px 0 rgba(255,255,255,0.06) !important;
}
/* Headers + tab strips → translucent light */
body.rux-3d #rux-main-shell > #rux-intel-panel .rux-intel-hdr,
body.rux-3d #rux-main-shell > #rux-intel-panel .rux-card-head,
body.rux-3d #rux-main-shell > #rux-intel-panel .rux-rpt-header,
body.rux-3d #rux-main-shell > #rux-report-panel .rux-rpt-header,
body.rux-3d #rux-main-shell > #rux-report-panel .rux-card-head,
body.rux-3d #rux-main-shell > #rux-report-panel .rux-rpt-tabs,
body.rux-3d #rux-main-shell > #rux-plot-panel .rux-card-head,
body.rux-3d #rux-main-shell > #rux-plot-panel .rux-rpt-header {
  background: rgba(15,23,42,0.30) !important;
  border-color: rgba(148,163,184,0.18) !important;
}
/* The OPEN-card header has a dark rule (yerevan_model_mvp_v2.html:17527,
   `…#X:not(.rux-card-folded) .rux-card-head { background: rgba(9,14,24,0.32) }`,
   specificity 2-id/3-class) that beat the rule above (2-id/2-class) → the Market
   Intelligence / Report / Area headers stayed gray. Win with 4 classes
   (:not + .rux-rpt-header.rux-card-head). */
body.rux-3d #rux-main-shell > #rux-intel-panel:not(.rux-card-folded) .rux-rpt-header.rux-card-head,
body.rux-3d #rux-main-shell > #rux-report-panel:not(.rux-card-folded) .rux-rpt-header.rux-card-head,
body.rux-3d #rux-main-shell > #rux-plot-panel:not(.rux-card-folded) .rux-rpt-header.rux-card-head,
/* the Area-Analytics (plot) header uses .rux-plot-header, not .rux-rpt-header */
body.rux-3d #rux-main-shell > #rux-plot-panel:not(.rux-card-folded) .rux-plot-header.rux-card-head {
  background: rgba(15,23,42,0.30) !important;
  background-color: rgba(15,23,42,0.30) !important;
  border-bottom-color: rgba(148,163,184,0.18) !important;
}
/* Card TITLE text. The dark theme sets .rux-rpt-title / #rux-area-title to a light
   grey (rgba(226,232,240,.9)) via a 2-id/3-class rule (yerevan_model_mvp_v2.html:17569)
   — faint/illegible on the glossy-white header. Re-assert dark with 4 classes (add
   .rux-workspace-card) so the titles read on every card, consistently. */
body.rux-3d #rux-main-shell > #rux-intel-panel.rux-workspace-card .rux-card-head .rux-rpt-title,
body.rux-3d #rux-main-shell > #rux-chat-panel.rux-workspace-card .rux-card-head .rux-rpt-title,
body.rux-3d #rux-main-shell > #rux-report-panel.rux-workspace-card .rux-card-head .rux-rpt-title,
body.rux-3d #rux-main-shell > #rux-plot-panel.rux-workspace-card .rux-card-head .rux-rpt-title,
body.rux-3d #rux-main-shell > #rux-plot-panel.rux-workspace-card .rux-plot-header .rux-rpt-title,
body.rux-3d #rux-main-shell > #rux-plot-panel.rux-workspace-card #rux-area-title {
  color: #e8eef7 !important;
}
/* Header CHROME buttons (fold / maximize / close ×, grip) were light for the dark
   header → invisible on glossy white. Darken text + svg across every glossy card.
   Scoped to the header so it never touches the indigo .r3c-btn.active body buttons. */
body.rux-3d #rux-main-shell > .rux-workspace-card.rux-workspace-card .rux-card-head button,
body.rux-3d #rux-main-shell > .rux-workspace-card.rux-workspace-card .rux-rpt-header button,
body.rux-3d #rux-main-shell > .rux-workspace-card.rux-workspace-card .rux-plot-header button,
body.rux-3d #rux-main-shell > .rux-workspace-card.rux-workspace-card .rux-card-grip {
  color: #cbd5e1 !important;
  opacity: 1 !important;
}
body.rux-3d #rux-main-shell > .rux-workspace-card.rux-workspace-card .rux-card-head button svg,
body.rux-3d #rux-main-shell > .rux-workspace-card.rux-workspace-card .rux-rpt-header button svg,
body.rux-3d #rux-main-shell > .rux-workspace-card.rux-workspace-card .rux-plot-header button svg,
body.rux-3d #rux-main-shell > .rux-workspace-card.rux-workspace-card .rux-card-grip svg {
  stroke: #cbd5e1 !important;
  color: #cbd5e1 !important;
  opacity: 1 !important;
}
/* Inner dark sub-surfaces (chart boxes, donut box, report views/content/setup,
   mini cards) → light glass so nothing reads as a dark island on the white card */
body.rux-3d #rux-main-shell > #rux-plot-panel .chart-box,
body.rux-3d #rux-main-shell > #rux-plot-panel .rux-prop-donut-box,
body.rux-3d #rux-main-shell > #rux-intel-panel .chart-box,
body.rux-3d #rux-main-shell > #rux-intel-panel .rux-prop-donut-box,
body.rux-3d #rux-main-shell > #rux-report-panel .rux-rpt-views,
body.rux-3d #rux-main-shell > #rux-report-panel .rux-rpt-content,
body.rux-3d #rux-main-shell > #rux-report-panel .rux-rpt-setup,
body.rux-3d #rux-main-shell > #rux-report-panel .rux-mini-card {
  background: rgba(15,23,42,0.30) !important;
  border-color: rgba(148,163,184,0.18) !important;
}
/* Inputs / selects / textareas */
body.rux-3d #rux-main-shell > #rux-report-panel input,
body.rux-3d #rux-main-shell > #rux-report-panel select,
body.rux-3d #rux-main-shell > #rux-report-panel textarea,
body.rux-3d #rux-main-shell > #rux-intel-panel input,
body.rux-3d #rux-main-shell > #rux-plot-panel input {
  background: rgba(15,23,42,0.30) !important;
  color: #e2e8f0 !important;
  border: 1px solid rgba(148,163,184,0.24) !important;
}
/* Re-assert dark text on strong labels (SETUP/Scope/Target, chart titles, tabs,
   POLYGON ANALYTICS pill) whose color is set via 2-ID / inline rules. */
body.rux-3d #rux-main-shell > #rux-report-panel .rux-rpt-title,
body.rux-3d #rux-main-shell > #rux-report-panel .rux-rpt-tab,
body.rux-3d #rux-main-shell > #rux-report-panel label,
body.rux-3d #rux-main-shell > #rux-plot-panel .chart-box h5,
body.rux-3d #rux-main-shell > #rux-plot-panel .pill,
body.rux-3d #rux-main-shell > #rux-intel-panel .chart-box h5 {
  color: #cbd5e1 !important;
}
/* Active segmented buttons (Scope/Purpose tabs, report tabs) → visible accent chip
   on the white card instead of washed-out light-on-light. */
body.rux-3d #rux-main-shell > #rux-report-panel .rux-rpt-tab.active,
body.rux-3d #rux-main-shell > #rux-report-panel button.active,
body.rux-3d #rux-main-shell > #rux-intel-panel button.active,
body.rux-3d #rux-main-shell > #rux-plot-panel button.active {
  background: rgba(99,102,241,0.22) !important;
  border-color: rgba(129,140,248,0.45) !important;
  color: #c7d2fe !important;
}

/* ════════════════════════════════════════════════════════════════════
   ISSUE #6 — restore the 3D Control button SELECTED highlight. The base
   .r3c-btn.active (bare class, rux_ui_cleanup.css:3589) loses to the body.rux-3d
   #rux-main-shell scope + the generic glossy button/`*` rules (which force light
   bg + #1e2940 text). Re-assert the indigo accent with 2-ID + !important.
   ════════════════════════════════════════════════════════════════════ */
body.rux-3d #rux-main-shell > #rux-control3d-panel .r3c-btn.active {
  background: linear-gradient(135deg, rgba(34,197,94,0.22), rgba(16,185,129,0.16)) !important;
  background-image: linear-gradient(135deg, rgba(34,197,94,0.22), rgba(16,185,129,0.16)) !important;
  border-color: rgba(52,211,153,0.5) !important;
  box-shadow: 0 0 0 1px rgba(52,211,153,0.18), 0 0 14px rgba(34,197,94,0.28) !important;
  font-weight: 700 !important;
}
body.rux-3d #rux-main-shell > #rux-control3d-panel .r3c-btn.active,
body.rux-3d #rux-main-shell > #rux-control3d-panel .r3c-btn.active * {
  color: #d1fae5 !important;
}
body.rux-3d #rux-main-shell > #rux-control3d-panel .r3c-btn.active svg { stroke: #6ee7b7 !important; opacity: 1 !important; }
/* keep inactive buttons clearly un-selected (the Back button keeps its inline tint) */
body.rux-3d #rux-main-shell > #rux-control3d-panel .r3c-btn:not(.active):not([data-act=back]) {
  background: rgba(148,163,184,0.10) !important;
  color: #dbe6f4 !important;
}

/* ════════════════════════════════════════════════════════════════════
   ISSUE #7 — scrollbar + corner-radius polish.
   (a) Hide scrollbars on the 3D Control body + 3D chat scroll areas (match the
       report/intel panes — keep scrollable, kill the visible bar).
   (b) control3d was omitted from the card-radius + header-radius ID lists
       (yerevan_model_mvp_v2.html:16771 / 17514) so it only got the asymmetric
       edge-left 31px rounding → mismatched top-left. Force all four card corners
       to the standard 24px and both header top corners to 23px.
   ════════════════════════════════════════════════════════════════════ */
#rux-control3d-body,
body.rux-3d #rux-main-shell > #rux-chat-panel.rux-workspace-card .rux-ai-messages,
body.rux-3d #rux-main-shell > #rux-chat-panel.rux-workspace-card .rux-ai-body {
  scrollbar-width: none !important;
  -ms-overflow-style: none !important;
}
#rux-control3d-body::-webkit-scrollbar,
body.rux-3d #rux-main-shell > #rux-chat-panel.rux-workspace-card .rux-ai-messages::-webkit-scrollbar,
body.rux-3d #rux-main-shell > #rux-chat-panel.rux-workspace-card .rux-ai-body::-webkit-scrollbar {
  width: 0 !important; height: 0 !important; display: none !important;
}
body.rux-3d #rux-main-shell > #rux-control3d-panel.rux-workspace-card,
body.rux-3d #rux-main-shell > #rux-control3d-panel.rux-workspace-card.rux-card-edge-left,
body.rux-3d #rux-main-shell > #rux-control3d-panel.rux-workspace-card.rux-card-edge-right {
  border-radius: var(--rux-card-surface-radius) !important;
}
body.rux-3d #rux-main-shell > #rux-control3d-panel.rux-workspace-card > .rux-rpt-header.rux-card-head,
body.rux-3d #rux-main-shell > #rux-control3d-panel.rux-workspace-card.rux-card-edge-left > .rux-rpt-header.rux-card-head {
  border-top-left-radius: var(--rux-card-header-radius) !important;
  border-top-right-radius: var(--rux-card-header-radius) !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
}

/* ════════════════════════════════════════════════════════════════════
   ISSUE #8 — top-right rail tools in 3D. These tools (urban-heat, metro, bus,
   reach/isochrone, hex-segmentation, crosshair) operate on the 2D Leaflet map,
   which is hidden behind the 3D scene — so in 3D they have no effect. Rather than
   leave them "interactive but dead", disable them in 3D. The 3D-native
   visualization tools (Land Use, Heritage, Seismic, Building Labels, Market
   Prices, Vertical Filter) are live in the 3D Control card; the layer toggle is
   redirected there (see rux_3d_building_view.js).
   ════════════════════════════════════════════════════════════════════ */
body.rux-3d #rux-heat-toggle,
body.rux-3d #rux-metro-toggle,
body.rux-3d #rux-bus-toggle,
body.rux-3d #rux-reach-toggle,
body.rux-3d #rux-hex-seg-toggle,
body.rux-3d #rux-cross-toggle,
body.rux-3d #rux-cl-toggle {
  opacity: 0.30 !important;
  pointer-events: none !important;
  filter: grayscale(0.7) !important;
}

/* The 2D map's price color scale (#ppsqm-legend — "Apartments for sale · USD/m² ·
   N hexes · median") and the urban-heat legend belong to the Leaflet map, which is
   hidden in 3D. Hide them so they don't float over the 3D scene (bottom-right). The
   3D scene's own price coloring is driven from the 3D Control card's Market Prices. */
body.rux-3d #ppsqm-legend,
body.rux-3d #rux-heat-legend { display: none !important; }

/* ════════════════════════════════════════════════════════════════════
   BUILDING DETAIL card — a tiled workspace card (replaces the iframe's
   disconnected top-right #info-panel). Like control3d it's 3D-ONLY and was
   omitted from the inline card position list (index.html:16874 lists only
   chat/intel/report/plot), so it would default to position:static and ignore
   the layout engine. Mirror control3d's structural rules: 3D-only visibility,
   absolute positioning, column layout, card radius. The dark glass comes from
   the generic `body.rux-3d .rux-workspace-card` rule above.
   ════════════════════════════════════════════════════════════════════ */
body:not(.rux-3d) #rux-building-detail-panel { display: none !important; }
body.rux-3d #rux-building-detail-panel.rux-card-closed { display: none !important; }
body.rux-3d #rux-main-shell > #rux-building-detail-panel.rux-workspace-card { position: absolute !important; }
/* The integrated rule forces overflow-y:auto on every card; on the building card
   that puts a (briefly visible) scrollbar on the PANEL on top of the inner body's
   own (hidden) scrollbar. Force the panel to clip so only the body scrolls — kills
   the millisecond scrollbar flash when the card opens. (2-ID beats the integrated rule.) */
body.rux-3d #rux-main-shell > #rux-building-detail-panel.rux-workspace-card { overflow: hidden !important; overflow-y: hidden !important; }
body.rux-3d #rux-main-shell > #rux-building-detail-panel.rux-workspace-card::-webkit-scrollbar { width: 0 !important; height: 0 !important; display: none !important; }
body.rux-3d #rux-building-detail-panel { display: flex !important; flex-direction: column !important; overflow: hidden !important; }
body.rux-3d #rux-building-detail-panel > .rux-rpt-header { flex: 0 0 auto !important; }
#rux-building-detail-body { flex: 1 1 auto; min-height: 0; padding: 0 0 10px; overflow-y: auto; overflow-x: hidden; scrollbar-width: none; -ms-overflow-style: none; }
#rux-building-detail-body::-webkit-scrollbar { width: 0; height: 0; display: none; }
body.rux-3d #rux-main-shell > #rux-building-detail-panel.rux-workspace-card,
body.rux-3d #rux-main-shell > #rux-building-detail-panel.rux-workspace-card.rux-card-edge-left,
body.rux-3d #rux-main-shell > #rux-building-detail-panel.rux-workspace-card.rux-card-edge-right {
  border-radius: var(--rux-card-surface-radius) !important;
}
body.rux-3d #rux-main-shell > #rux-building-detail-panel.rux-workspace-card > .rux-rpt-header.rux-card-head,
body.rux-3d #rux-main-shell > #rux-building-detail-panel.rux-workspace-card.rux-card-edge-left > .rux-rpt-header.rux-card-head {
  border-top-left-radius: var(--rux-card-header-radius) !important;
  border-top-right-radius: var(--rux-card-header-radius) !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
}
/* Identity strip prepended to the relayed content (building title + meta). */
#rux-building-detail-body .rux-bld-ident { padding: 13px 16px 10px; border-bottom: 1px solid rgba(148,163,184,0.16); }
#rux-building-detail-body .rux-bld-ident-title { font-size: 14px; font-weight: 700; color: #f1f6fc; line-height: 1.25; }
#rux-building-detail-body .rux-bld-ident-meta { font-size: 10.5px; color: #9fb0c4; margin-top: 3px; letter-spacing: .01em; }

/* ── Re-theme the relayed Twin panel HTML (built light-themed) to dark glass ──
   The content uses both CSS custom props (--ruxen-*) and hardcoded slate hexes.
   1) Redefine the --ruxen-* vars dark so var()-based colours auto-theme.
   2) Remap the hardcoded light-panel slate text + white fills with [style*=]
      overrides (inline styles beat CSS; same pattern as the popup-readability
      rule above). Accent colours (indigo / amber heritage / green-red trend)
      read fine on dark and are left untouched. */
#rux-building-detail-panel {
  --ruxen-text:      #e8eef7;
  --ruxen-text-2:    #cbd5e1;
  --ruxen-muted:     #9fb0c4;
  --ruxen-faint:     #7e8ca0;
  --ruxen-border:    rgba(148,163,184,0.24);
  --ruxen-border-2:  rgba(148,163,184,0.16);
  --ruxen-accent:    #818cf8;
  --ruxen-accent-2:  #34d399;
  --ruxen-surface:        rgba(15,23,42,0.30);
  --ruxen-surface-2:      rgba(15,23,42,0.40);
  --ruxen-surface-solid:  rgba(15,23,42,0.30);
  --ruxen-elevated:       rgba(15,23,42,0.30);
  --ruxen-gloss:     inset 0 1px 0 rgba(255,255,255,0.05);
}
#rux-building-detail-body { color: #dbe6f4; font: 12px/1.5 Inter, -apple-system, sans-serif; }
#rux-building-detail-body [style*="#1e293b"],
#rux-building-detail-body [style*="#1e2940"],
#rux-building-detail-body [style*="#0f172a"] { color: #e8eef7 !important; }
#rux-building-detail-body [style*="#475569"],
#rux-building-detail-body [style*="#334155"] { color: #cbd5e1 !important; }
#rux-building-detail-body [style*="#64748b"] { color: #9fb0c4 !important; }
#rux-building-detail-body [style*="#4338ca"] { color: #c7d2fe !important; }
/* Preserve the valuation table's semantic signals (green = below market / up,
   red = above market / down) — brightened for legibility on dark glass, and kept
   from being flattened by the generic light-text rule. */
#rux-building-detail-body [style*="#16a34a"] { color: #4ade80 !important; }
#rux-building-detail-body [style*="#dc2626"] { color: #f87171 !important; }
#rux-building-detail-body [style*="#ca8a04"],
#rux-building-detail-body [style*="#d97706"],
#rux-building-detail-body [style*="#ea580c"] { color: #fbbf24 !important; }
/* The relayed valuation table is a 6-column table built for the wider iframe panel;
   in the narrower workspace card its right columns (vs Market / 6-Mo Trend) overflowed
   and were clipped by overflow-x:hidden. Force it to fit the card's content box so it
   honours the right inset — fixed layout with sensible column widths + wrapping. */
#rux-building-detail-body table { table-layout: fixed !important; width: 100% !important; border-collapse: collapse !important; }
#rux-building-detail-body table th,
#rux-building-detail-body table td {
  overflow-wrap: break-word !important; word-break: break-word !important; hyphens: auto;
  padding: 5px 4px !important; font-size: 9.5px !important;
}
#rux-building-detail-body table th:nth-child(1), #rux-building-detail-body table td:nth-child(1) { width: 21% !important; text-align: left !important; }
#rux-building-detail-body table th:nth-child(2), #rux-building-detail-body table td:nth-child(2),
#rux-building-detail-body table th:nth-child(3), #rux-building-detail-body table td:nth-child(3) { width: 15% !important; }
#rux-building-detail-body table th:nth-child(4), #rux-building-detail-body table td:nth-child(4) { width: 22% !important; }
#rux-building-detail-body table th:nth-child(5), #rux-building-detail-body table td:nth-child(5),
#rux-building-detail-body table th:nth-child(6), #rux-building-detail-body table td:nth-child(6) { width: 13.5% !important; }
/* Safety net: nothing relayed into the card may exceed the content box width. */
#rux-building-detail-body img, #rux-building-detail-body table, #rux-building-detail-body pre { max-width: 100% !important; }
/* White / light fills → faint dark glass so nothing reads as a white island.
   Scoped to BLOCK-LEVEL surfaces only (:is(div,section,...)) so tiny inline-styled
   spans/chips don't get a stray rectangular box. */
#rux-building-detail-body :is(div,section,article,aside,table,thead,tbody,tr)[style*="rgba(255,255,255"],
#rux-building-detail-body :is(div,section,article,aside,table,thead,tbody,tr)[style*="rgba(248,250,252"],
#rux-building-detail-body :is(div,section,article,aside,table,thead,tbody,tr)[style*="rgba(249,251,253"],
#rux-building-detail-body :is(div,section,article,aside,table,thead,tbody,tr)[style*="rgba(241,245,249"],
#rux-building-detail-body :is(div,section,article,aside,table,thead,tbody,tr)[style*="rgba(226,232,240"] { background: rgba(15,23,42,0.38) !important; }
/* Light divider/border colours → subtle slate. */
#rux-building-detail-body [style*="rgba(100,116,139"] { border-color: rgba(148,163,184,0.16) !important; }

/* ── Relayed iframe content uses class-based styling (.poi-item / .poi-name /
   .poi-sector) whose CSS lives in the twin iframe and does NOT travel with the
   innerHTML. Re-style them parent-side so the floor-by-floor tenant list reads
   native dark-glass: padded rows, a proper rounded category pill (not a cramped
   unpadded box). ── */
#rux-building-detail-body .poi-item {
  padding: 9px 16px !important;
  border-bottom: 1px solid rgba(148,163,184,0.10) !important;
}
#rux-building-detail-body .poi-name {
  font-size: 12.5px !important; font-weight: 600 !important; color: #e8eef7 !important; margin-bottom: 4px !important;
}
#rux-building-detail-body .poi-sector {
  display: inline-block !important;
  font-size: 9px !important; font-weight: 700 !important;
  letter-spacing: .04em !important; text-transform: uppercase !important;
  padding: 3px 9px !important; border-radius: 999px !important;
  background: rgba(148,163,184,0.12) !important;
  border: 1px solid rgba(148,163,184,0.20) !important;
  color: #c4d0e0 !important;
}

/* ── Card-title PARITY across every workspace card. The base .rux-rpt-title is
   13px and the chat wordmark .rux-ai-title-main is 15px, while the integrated
   override only normalized intel/chat/report/plot to 11px — so control3d,
   the building card, and the RUXEN wordmark rendered at a different size. Unify
   them all to the canonical 11px / 700 / 0.12em / uppercase. High specificity
   (2 IDs) beats the inline 15px wordmark rule (1 ID). ── */
body.rux-integrated-main #rux-main-shell .rux-workspace-card .rux-rpt-title,
body.rux-integrated-main #rux-main-shell #rux-area-title,
body.rux-integrated-main #rux-main-shell #rux-ai-panel[data-integrated="1"] .rux-ai-title-main,
body.rux-integrated-main #rux-main-shell .rux-ai-title-main {
  font-family: 'Inter', system-ui, sans-serif !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
}

/* ════════════════════════════════════════════════════════════════════
   3D CATCHMENT ANALYSIS — the bank-grade report rendered into the Area
   Analytics card from a drawn Polygon / Radius over the 3D scene. The hero
   is the catchment's building count + its per-m² valuation (a lender's first
   questions); built-form, use mix and occupancy follow. Dark-glass, matches
   the 3D workspace cards.
   ════════════════════════════════════════════════════════════════════ */
.rux-3d-catchment { padding: 16px 18px 20px; color: #dbe6f4; font-family: Inter, system-ui, -apple-system, sans-serif; }
.rux-3d-catchment .rux-cat-head { padding-bottom: 12px; border-bottom: 1px solid rgba(148,163,184,0.14); margin-bottom: 14px; }
.rux-3d-catchment .rux-cat-kicker { font-size: 9.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: #818cf8; }
.rux-3d-catchment .rux-cat-title { font-size: 23px; font-weight: 350; color: #cbd5e1; margin-top: 5px; letter-spacing: -.01em; }
.rux-3d-catchment .rux-cat-title b { font-weight: 700; color: #f1f6fc; }
.rux-3d-catchment .rux-cat-sec { margin-bottom: 15px; }
.rux-3d-catchment .rux-cat-seclabel { font-size: 9px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: #94a3b8; margin-bottom: 9px; }
.rux-3d-catchment .rux-cat-vrow { display: grid; grid-template-columns: 48px 1fr auto; align-items: baseline; gap: 10px; padding: 7px 0; border-bottom: 1px dashed rgba(148,163,184,0.10); }
.rux-3d-catchment .rux-cat-vrow:last-child { border-bottom: 0; }
.rux-3d-catchment .rux-cat-vk { font-size: 10px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: #9fb0c4; }
.rux-3d-catchment .rux-cat-vv { font-size: 17px; font-weight: 700; color: #f1f6fc; white-space: nowrap; }
.rux-3d-catchment .rux-cat-vv i { font-size: 10px; font-weight: 500; font-style: normal; color: #7e8ca0; margin-left: 1px; }
.rux-3d-catchment .rux-cat-vr { font-size: 10px; color: #94a3b8; text-align: right; white-space: nowrap; }
.rux-3d-catchment .rux-cat-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.rux-3d-catchment .rux-cat-stat { background: rgba(15,23,42,0.38); border: 1px solid rgba(148,163,184,0.14); border-radius: 10px; padding: 9px 11px; }
.rux-3d-catchment .rux-cat-stk { font-size: 9px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: #8b9bb0; }
.rux-3d-catchment .rux-cat-stv { font-size: 15px; font-weight: 700; color: #e8eef7; margin-top: 3px; }
.rux-3d-catchment .rux-cat-mixrow { display: grid; grid-template-columns: 96px 1fr 34px; align-items: center; gap: 9px; padding: 4px 0; }
.rux-3d-catchment .rux-cat-mixlabel { font-size: 11px; color: #c4d0e0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rux-3d-catchment .rux-cat-mixbar { height: 6px; border-radius: 3px; background: rgba(148,163,184,0.14); overflow: hidden; }
.rux-3d-catchment .rux-cat-mixbar i { display: block; height: 100%; border-radius: 3px; background: linear-gradient(90deg, #6366f1, #818cf8); }
.rux-3d-catchment .rux-cat-mixpct { font-size: 10.5px; font-weight: 700; color: #c7d2fe; text-align: right; }
.rux-3d-catchment .rux-cat-foot { margin-top: 14px; padding-top: 11px; border-top: 1px solid rgba(148,163,184,0.12); font-size: 10px; font-style: italic; line-height: 1.5; color: #8b9bb0; }
.rux-3d-catchment .rux-cat-empty { padding: 24px 6px; text-align: center; color: #94a3b8; font-size: 12px; line-height: 1.5; }
/* In 3D the Area Analytics card reuses the SAME 2D "Polygon Analytics" draw card
   (#rux-plot-empty) — its click routes to the 3D scene draw. Only the 2D plot
   loading/data internals are hidden; the draw card stays so the panel is identical
   to 2D. (Once a catchment renders, renderArea3D hides #rux-plot-empty itself.) */
body.rux-3d #rux-plot-panel #rux-plot-loading,
body.rux-3d #rux-plot-panel #rux-plot-data { display: none !important; }

/* ════════════════════════════════════════════════════════════════════
   CARDS == their dark header. Arthur: "make all cards transparency and colour
   the same as their headline block dark area, so they are the same." The card
   now carries the one dark-glass tone (above); here the HEADER strips drop their
   extra fill so the header reads at the SAME tone as the body — one uniform
   surface, divided only by a hairline. 2-ID + extra classes (.rux-workspace-card,
   :not(.rux-card-folded), .rux-rpt-header.rux-card-head) so these beat the
   per-panel header rules + the open-card header rule above.
   ════════════════════════════════════════════════════════════════════ */
body.rux-3d #rux-main-shell > #rux-control3d-panel.rux-workspace-card .rux-rpt-header,
body.rux-3d #rux-main-shell > #rux-intel-panel.rux-workspace-card:not(.rux-card-folded) .rux-rpt-header.rux-card-head,
body.rux-3d #rux-main-shell > #rux-report-panel.rux-workspace-card:not(.rux-card-folded) .rux-rpt-header.rux-card-head,
body.rux-3d #rux-main-shell > #rux-report-panel.rux-workspace-card .rux-rpt-tabs,
body.rux-3d #rux-main-shell > #rux-plot-panel.rux-workspace-card:not(.rux-card-folded) .rux-plot-header.rux-card-head,
body.rux-3d #rux-main-shell > #rux-plot-panel.rux-workspace-card:not(.rux-card-folded) .rux-rpt-header.rux-card-head,
body.rux-3d #rux-main-shell > #rux-chat-panel.rux-workspace-card .rux-rpt-header,
body.rux-3d #rux-main-shell > #rux-chat-panel.rux-workspace-card .rux-card-head,
body.rux-3d #rux-main-shell > #rux-building-detail-panel.rux-workspace-card .rux-rpt-header {
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  border-bottom: 1px solid rgba(148,163,184,0.13) !important;
}
/* P15 (2026-07-08): the chat's INNER header wrapper was in the border-bottom
   list above, painting a 2nd divider line under "RUXEN" in 3D that the 2D chat
   doesn't have. Keep the background flattening, drop the extra border. */
body.rux-3d #rux-main-shell > #rux-chat-panel.rux-workspace-card .rux-chat-head-main {
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
}

/* ── Functional surfaces that were still a DIFFERENT dark than the card (Arthur
   flagged the chat header, the SEGMENT dropdown, the chat input and the assistant
   bubbles). Pull them all onto the SAME glass as the card: header + bubbles read at
   the card tone (transparent), fields get the card tone + a hairline outline so they
   still read as fields without a different fill. High specificity (extra IDs /
   :not + double-class) to beat the integrated-mode rules that set the off-tones. ── */
/* chat header — beats the inline `…:not(.rux-card-folded) .rux-card-head{rgba(9,14,24,.32)}` */
body.rux-3d #rux-main-shell > #rux-chat-panel.rux-workspace-card:not(.rux-card-folded) .rux-rpt-header.rux-card-head,
body.rux-3d #rux-main-shell > #rux-chat-panel.rux-workspace-card:not(.rux-card-folded) .rux-rpt-header,
body.rux-3d #rux-main-shell > #rux-chat-panel.rux-workspace-card:not(.rux-card-folded) .rux-chat-head-main {
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
}
/* inputs / selects / textareas → exact card tone + a thin outline (so they read as
   fields, not as a different-coloured block). */
body.rux-3d #rux-main-shell #rux-intel-panel select,
body.rux-3d #rux-main-shell #rux-intel-panel input,
body.rux-3d #rux-main-shell #rux-report-panel select,
body.rux-3d #rux-main-shell #rux-report-panel input,
body.rux-3d #rux-main-shell #rux-report-panel textarea,
body.rux-3d #rux-main-shell #rux-plot-panel input,
body.rux-3d #rux-main-shell > #rux-chat-panel.rux-workspace-card #rux-ai-input,
body.rux-3d #rux-main-shell > #rux-chat-panel.rux-workspace-card textarea {
  background: rgba(255,255,255,0.02) !important;
  background-color: rgba(255,255,255,0.02) !important;
  background-image: none !important;
  border: 1px solid rgba(148,163,184,0.22) !important;
}
/* assistant chat bubbles → card tone (USER bubbles keep their green accent). */
body.rux-3d #rux-main-shell #rux-chat-panel .rux-ai-message-assistant .rux-ai-message-inner {
  background: rgba(255,255,255,0.02) !important;
  background-image: none !important;
  border: 1px solid rgba(148,163,184,0.16) !important;
}
/* Inner content containers (chart boxes, report-structure cards, setup, tabs) →
   the same card tone + a hairline, so every surface in every card reads identical. */
body.rux-3d #rux-main-shell #rux-intel-panel .chart-box,
body.rux-3d #rux-main-shell #rux-intel-panel .rux-prop-donut-box,
body.rux-3d #rux-main-shell #rux-plot-panel .chart-box,
body.rux-3d #rux-main-shell #rux-plot-panel .rux-prop-donut-box,
body.rux-3d #rux-main-shell #rux-report-panel .rux-rpt-views,
body.rux-3d #rux-main-shell #rux-report-panel .rux-rpt-content,
body.rux-3d #rux-main-shell #rux-report-panel .rux-rpt-setup,
body.rux-3d #rux-main-shell #rux-report-panel .rux-mini-card,
body.rux-3d #rux-main-shell #rux-report-panel .rux-rpt-tabs {
  background: rgba(255,255,255,0.025) !important;
  background-image: none !important;
  border: 1px solid rgba(148,163,184,0.14) !important;
}

/* ── FOLDED cards in 3D must keep the SAME glass as open cards. The 2D folded rule
   (index.html: `…> .rux-workspace-card.rux-card-folded { background: rgba(10,14,22,0.94) }`)
   paints a near-opaque dark strip — fine in 2D, but it made the folded 3D Control read
   as a black bar next to its translucent siblings (the per-card 3D rules out-specced it
   for intel/chat/report, but control3d + building only had the 0-ID generic glass).
   Re-assert the unified glass for every folded 3D card, with body.rux-3d.rux-integrated-main
   (extra class) so it beats the 2D folded rule's specificity + later source order. ── */
body.rux-3d.rux-integrated-main #rux-main-shell > .rux-workspace-card.rux-card-folded {
  background: linear-gradient(180deg, rgba(15,23,42,0.66), rgba(17,24,39,0.60)) !important;
  background-image: linear-gradient(180deg, rgba(15,23,42,0.66), rgba(17,24,39,0.60)) !important;
}

/* In 3D the modern POI panel (#rux-poi-cat-panel) replaces the 2D Leaflet layer
   control, so never show the vestigial #rux-layer-popup-host (it can otherwise
   appear as an empty 'MAP LAYERS' glass panel beside the POI list). */
body.rux-3d #rux-layer-popup-host { display: none !important; }

/* The data-driven POI panel (rux_poi_panel.js → #rux-poi-cat-panel) now fully
   replaces the legacy Leaflet layer control in 2D integrated mode as well, so the
   old #rux-layer-popup-host (the "MAP LAYERS" panel with the dead 10 Folium
   categories) is orphaned. Hide it even when it gets the .is-open class — the
   inline rule `#rux-layer-popup-host.is-open{display:block}` (index.html) has
   higher specificity than a bare id selector, so we add `html` + match `.is-open`
   to outrank it. Its hidden checkbox list stays in the DOM (Price-panel proxy). */
html body.rux-integrated-main #rux-layer-popup-host,
html body.rux-integrated-main #rux-layer-popup-host.is-open {
  display: none !important;
}

/* 2D ⇄ 3D ISOLATION — a 2D isochrone/reach (drawn on #rux-reach-canvas, z-index 450)
   and its control bar (#rux-reach-bar) otherwise render OVER the 3D scene as a flat
   2D footprint, and the time-slider bleeds in. 2D and 3D must not share drawn visuals,
   so hide the whole reach surface in 3D (it's preserved for when you return to 2D). */
body.rux-3d #rux-reach-canvas,
body.rux-3d #rux-reach-bar,
body.rux-3d .rux-reach-pt,
body.rux-3d .leaflet-pane #rux-reach-canvas { display: none !important; }

/* Bottom breathing room — the scrolling cards (Model Intelligence, Report, etc.)
   ran their last row right onto the card edge. Add a bottom pad to the scroll
   content so nothing sits flush against the bottom. */
body.rux-3d #rux-main-shell > #rux-intel-panel.rux-workspace-card,
body.rux-3d #rux-main-shell > #rux-report-panel.rux-workspace-card,
body.rux-3d #rux-main-shell > #rux-plot-panel.rux-workspace-card { padding-bottom: 18px !important; }
body.rux-3d #rux-main-shell > #rux-intel-panel .rux-intel-mode-pane,
body.rux-3d #rux-main-shell > #rux-report-panel .rux-rpt-content,
body.rux-3d #rux-main-shell > #rux-report-panel .rux-rpt-views { padding-bottom: 16px !important; }

/* Property-listing rows → the SAME block-button style as the PRICE HEATMAP buttons
   (full-width, bordered, green-crystal active). The whole row is the button; the
   native checkbox is hidden (the label still toggles it on click). */
.rux-price-panel .rux-pp-propwrap { gap: 5px !important; }
.rux-price-panel .rux-pp-prow {
  display: block !important; width: 100% !important; text-align: left !important;
  background: rgba(15,23,42,0.55) !important; color: #cbd5e1 !important;
  border: 1px solid rgba(34,197,94,0.18) !important; border-radius: 7px !important;
  padding: 7px 12px !important; font-size: 11px !important; font-weight: 500 !important;
  letter-spacing: .2px !important;
  transition: background .15s, color .15s, border-color .15s, box-shadow .15s !important;
}
.rux-price-panel .rux-pp-prow:hover {
  background: rgba(34,197,94,0.14) !important; color: #d1fae5 !important;
  border-color: rgba(34,197,94,0.35) !important;
}
.rux-price-panel .rux-pp-prow input[type=checkbox] {
  position: absolute !important; opacity: 0 !important; width: 0 !important; height: 0 !important;
  margin: 0 !important; pointer-events: none !important;
}
.rux-price-panel .rux-pp-prow:has(input:checked) {
  background: rgba(34,197,94,0.28) !important; color: #ecfdf5 !important;
  border-color: rgba(34,197,94,0.7) !important; font-weight: 600 !important;
  box-shadow: 0 0 0 1px rgba(34,197,94,0.35), 0 2px 10px rgba(34,197,94,0.35), inset 0 0 12px rgba(34,197,94,0.18) !important;
}

/* (Basemap darkening reverted per user — the default CARTO dark_all theme is
   kept. Left intentionally blank so the original basemap shows unchanged.) */

/* ════════════════════════════════════════════════════════════════════════
   GENERATED REPORT — premium document typography (FE design pass)
   The generated report text rendered into #rux-rpt-draft-editor.rux-rpt-canvas-doc
   was plain/cramped. This gives it a readable centered column, a clear heading
   hierarchy with brand-green section heads, comfortable line-height, and styled
   lead paragraph / blockquote / table / lists. High specificity + !important so
   it wins over the Folium-inlined report styles in index.html.
   ════════════════════════════════════════════════════════════════════════ */
html body.rux-integrated-main.rux-report-canvas-mode #rux-main-shell > #rux-report-panel #rux-rpt-draft-editor.rux-rpt-canvas-doc{
  max-width: 840px !important;
  margin: 0 auto !important;
  padding: 30px 44px 72px !important;
  color: #cdd7e4 !important;
  font-family: Inter, system-ui, -apple-system, sans-serif !important;
  font-size: 14.5px !important;
  line-height: 1.72 !important;
}
body.rux-report-canvas-mode #rux-rpt-draft-editor.rux-rpt-canvas-doc h1{
  font-size: 26px !important; font-weight: 650 !important; line-height: 1.2 !important;
  letter-spacing: -0.02em !important; color: #f1f6fc !important;
  margin: 0 0 4px !important; padding-bottom: 15px !important;
  border-bottom: 1px solid rgba(148,163,184,0.16) !important;
}
body.rux-report-canvas-mode #rux-rpt-draft-editor.rux-rpt-canvas-doc h2{
  font-size: 12.5px !important; font-weight: 700 !important;
  letter-spacing: 0.085em !important; text-transform: uppercase !important;
  color: #7dd3a8 !important;
  margin: 36px 0 12px !important; padding: 0 !important; border: 0 !important;
}
body.rux-report-canvas-mode #rux-rpt-draft-editor.rux-rpt-canvas-doc h3{
  font-size: 15px !important; font-weight: 650 !important; color: #e8eef6 !important;
  margin: 22px 0 6px !important; letter-spacing: -0.01em !important;
}
body.rux-report-canvas-mode #rux-rpt-draft-editor.rux-rpt-canvas-doc p{
  margin: 0 0 14px !important; color: #cdd7e4 !important;
}
/* lead paragraph (the first paragraph, right after the H1 title) */
body.rux-report-canvas-mode #rux-rpt-draft-editor.rux-rpt-canvas-doc h1 + p{
  font-size: 16px !important; line-height: 1.62 !important; color: #e2e9f2 !important;
  margin: 18px 0 24px !important;
}
body.rux-report-canvas-mode #rux-rpt-draft-editor.rux-rpt-canvas-doc strong{
  color: #f4f8fc !important; font-weight: 650 !important;
}
body.rux-report-canvas-mode #rux-rpt-draft-editor.rux-rpt-canvas-doc ul,
body.rux-report-canvas-mode #rux-rpt-draft-editor.rux-rpt-canvas-doc ol{
  margin: 0 0 16px !important; padding-left: 22px !important;
}
body.rux-report-canvas-mode #rux-rpt-draft-editor.rux-rpt-canvas-doc li{
  margin: 5px 0 !important; padding-left: 4px !important; color: #cdd7e4 !important;
}
body.rux-report-canvas-mode #rux-rpt-draft-editor.rux-rpt-canvas-doc li::marker{ color: #52b788 !important; }
body.rux-report-canvas-mode #rux-rpt-draft-editor.rux-rpt-canvas-doc blockquote{
  margin: 20px 0 !important; padding: 13px 18px !important;
  border-left: 3px solid rgba(52,211,153,0.55) !important;
  background: rgba(34,197,94,0.06) !important; border-radius: 0 8px 8px 0 !important;
  color: #d7e3ee !important; font-style: normal !important;
}
body.rux-report-canvas-mode #rux-rpt-draft-editor.rux-rpt-canvas-doc table{
  width: 100% !important; border-collapse: collapse !important; margin: 18px 0 22px !important; font-size: 13px !important;
}
body.rux-report-canvas-mode #rux-rpt-draft-editor.rux-rpt-canvas-doc th{
  text-align: left !important; font-weight: 600 !important; color: #aebed0 !important;
  font-size: 10.5px !important; letter-spacing: 0.06em !important; text-transform: uppercase !important;
  padding: 9px 14px !important; border-bottom: 1px solid rgba(148,163,184,0.30) !important;
}
body.rux-report-canvas-mode #rux-rpt-draft-editor.rux-rpt-canvas-doc td{
  padding: 9px 14px !important; border-bottom: 1px solid rgba(148,163,184,0.10) !important;
  color: #cdd7e4 !important; font-variant-numeric: tabular-nums !important;
}
body.rux-report-canvas-mode #rux-rpt-draft-editor.rux-rpt-canvas-doc tr:hover td{ background: rgba(148,163,184,0.045) !important; }