/* ═══════════════════════════════════════════════════════════════
   Home Buyers Guide SA — Theme System v2 (Edge-to-Edge)
   Light mode (default) + Dark mode (.dark-mode on body)
   Full-bleed professional layout — Property24 inspired
   ═══════════════════════════════════════════════════════════════ */

/* ── LIGHT MODE VARIABLES ── */
:root {
    --brand-green:        #1d9e75;
    --brand-green-dark:   #085041;
    --brand-green-light:  #e1f5ee;
    --app-bg:             #eef1f5;
    --surface:            #ffffff;
    --surface-2:          #f8fafc;
    --header-bg:          #1d9e75;
    --header-text:        #ffffff;
    --header-sub:         rgba(255,255,255,0.75);
    --text-1:             #111827;
    --text-2:             #4b5563;
    --text-3:             #9ca3af;
    --border:             #e3e8ee;
    --border-2:           #eceff3;
    --divider:            #eef1f4;
    --prog-bg:            #e5e7eb;
    --photo-bg:           #1a2d42;
    --photo-icon:         rgba(255,255,255,0.25);
    --tab-bg:             #ffffff;
    --tab-text:           #6b7280;
    --tab-active-bg:      #1d9e75;
    --tab-active-text:    #ffffff;
    --tab-border:         #e3e8ee;
    --btn-assess-bg:      #1d9e75;
    --btn-assess-text:    #ffffff;
    --btn-view-bg:        #e8f4f0;
    --btn-view-text:      #085041;
    --btn-edit-bg:        #f3f4f6;
    --btn-edit-text:      #374151;
    --btn-del-bg:         #fef2f2;
    --btn-del-text:       #b91c1c;
    --nav-bg:             #ffffff;
    --nav-border:         #e3e8ef;
    --nav-inactive:       #9ca3af;
    --stat-bg:            rgba(255,255,255,0.22);
    --stat-num:           #ffffff;
    --stat-lbl:           rgba(255,255,255,0.8);
    --stat-best:          #a8f0d8;
    --switch-track-off:   #cbd5e1;
    --switch-track-on:    #1d9e75;
    --icon-circle-bg:     #e8f4f0;
    --icon-circle-color:  #1d9e75;
}

/* ── DARK MODE VARIABLES ── */
body.dark-mode {
    --app-bg:             #0d1520;
    --surface:            #132030;
    --surface-2:          #162436;
    --header-bg:          #0f1d2e;
    --header-text:        #e8f1f8;
    --header-sub:         rgba(255,255,255,0.55);
    --text-1:             #e8f1f8;
    --text-2:             #8bbad4;
    --text-3:             #5a85a0;
    --border:             #1e3448;
    --border-2:           #1b2d40;
    --divider:            #1a2c3f;
    --prog-bg:            #1e3448;
    --tab-bg:             #1a3050;
    --tab-text:           #c8dff0;
    --tab-active-bg:      #1d9e75;
    --tab-active-text:    #ffffff;
    --tab-border:         #1e3448;
    --btn-assess-bg:      #1d9e75;
    --btn-assess-text:    #ffffff;
    --btn-view-bg:        #1a3a5c;
    --btn-view-text:      #c8dff0;
    --btn-edit-bg:        #1a2d42;
    --btn-edit-text:      #8bbad4;
    --btn-del-bg:         #2a1525;
    --btn-del-text:       #f87171;
    --nav-bg:             #0f1d2e;
    --nav-border:         #1b2d40;
    --nav-inactive:       #4a7090;
    --stat-bg:            #162436;
    --stat-num:           #e8f1f8;
    --stat-lbl:           #8bbad4;
    --stat-best:          #1d9e75;
    --switch-track-off:   #1e3448;
    --switch-track-on:    #1d9e75;
    --icon-circle-bg:     rgba(29,158,117,0.18);
    --icon-circle-color:  #1d9e75;
}

/* ════════════════════════════════════════
   EDGE-TO-EDGE FOUNDATION
   ════════════════════════════════════════ */
html, body {
    width: 100%;
    margin: 0 !important;
    padding: 0 !important;
}

body {
    background: var(--app-bg) !important;
    animation: none !important;
    color: var(--text-1) !important;
    transition: background 0.3s, color 0.3s;
}

/* Container: ZERO padding — full bleed */
.container {
    padding: 0 !important;
    margin: 0 !important;
    max-width: 100% !important;
    width: 100% !important;
    background: transparent !important;
}

@media (min-width: 768px) {
    .container {
        max-width: 100% !important;
        padding: 0 !important;
    }
}

/* Screens: full width, bottom space for nav only */
.screen {
    padding: 0 0 84px 0 !important;
    margin: 0 !important;
    border-radius: 0 !important;
    width: 100%;
    background: var(--app-bg);
    transition: background 0.3s;
    min-height: 100vh;
}

/* ════════════════════════════════════════
   OLD BANNER — REMOVED
   ════════════════════════════════════════ */
.app-header-banner { display: none !important; }
.app-header { display: none !important; }

/* ════════════════════════════════════════
   APP TOP BAR — full width
   ════════════════════════════════════════ */
.app-top-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 16px 12px;
    background: var(--header-bg);
    transition: background 0.3s;
    width: 100%;
    position: sticky;
    top: 0;
    z-index: 100;
}

.app-top-bar .logo-mark { display: flex; align-items: center; gap: 10px; }
.app-top-bar .logo-icon-wrap {
    width: 34px; height: 34px; border-radius: 9px;
    background: rgba(255,255,255,0.2);
    display: flex; align-items: center; justify-content: center;
}
.app-top-bar .logo-icon-wrap i { font-size: 17px; color: #fff; }
.app-top-bar .logo-text .app-name { font-size: 14px; font-weight: 600; color: var(--header-text); line-height: 1.25; }
.app-top-bar .logo-text .app-tagline { font-size: 9px; color: var(--header-sub); line-height: 1; }
.app-top-bar .header-actions { display: flex; gap: 8px; }
.app-top-bar .hdr-btn {
    width: 32px; height: 32px; border-radius: 50%;
    background: rgba(255,255,255,0.15); border: none;
    display: flex; align-items: center; justify-content: center; cursor: pointer;
}
.app-top-bar .hdr-btn i { font-size: 14px; color: rgba(255,255,255,0.85); }

/* ════════════════════════════════════════
   SCREEN HEADERS — full-width colour band
   ════════════════════════════════════════ */
.screen-header {
    background: var(--header-bg) !important;
    margin: 0 !important;
    padding: 14px 16px !important;
    border-radius: 0 !important;
    width: 100%;
    display: flex;
    align-items: center;
    gap: 12px;
    transition: background 0.3s;
    border: none !important;
    box-shadow: none !important;
}

.screen-header h2 {
    color: #ffffff !important;
    font-size: 1.15rem !important;
    font-weight: 600 !important;
    text-shadow: none !important;
    margin: 0 !important;
}

.back-button {
    background: rgba(255,255,255,0.18) !important;
    width: 36px !important;
    height: 36px !important;
    box-shadow: none !important;
    color: #fff !important;
    border: none !important;
}
.back-button:hover { transform: none !important; box-shadow: none !important; }

/* ════════════════════════════════════════
   HOME — STATS STRIP (full width)
   ════════════════════════════════════════ */
.home-stats-strip {
    background: var(--header-bg);
    padding: 0 16px 16px;
    display: flex;
    gap: 8px;
    transition: background 0.3s;
    width: 100%;
}
.home-stat-chip {
    flex: 1; background: var(--stat-bg); border-radius: 10px;
    padding: 9px 4px; text-align: center; transition: background 0.3s;
}
.home-stat-chip .hsc-num {
    font-size: 20px; font-weight: 600; color: var(--stat-num);
    line-height: 1; margin-bottom: 3px; transition: color 0.3s;
}
.home-stat-chip .hsc-num.best { color: var(--stat-best); }
.home-stat-chip .hsc-lbl { font-size: 9px; color: var(--stat-lbl); transition: color 0.3s; }

/* ════════════════════════════════════════
   SECTION LABELS (padded inside)
   ════════════════════════════════════════ */
.section-label {
    font-size: 10px; font-weight: 600; letter-spacing: 0.07em;
    color: var(--brand-green); margin: 16px 16px 8px;
    text-transform: uppercase;
}

/* ════════════════════════════════════════
   FILTER TABS
   ════════════════════════════════════════ */
.filter-tabs {
    display: flex; border-radius: 10px; overflow: hidden;
    margin: 0 14px 12px; border: 0.5px solid var(--tab-border);
    transition: border-color 0.3s;
}
.filter-tab {
    flex: 1; padding: 9px 4px; text-align: center;
    font-size: 12px; font-weight: 500; border: none; cursor: pointer;
    background: var(--tab-bg); color: var(--tab-text);
    transition: background 0.2s, color 0.2s;
    font-family: 'Poppins', sans-serif;
}
.filter-tab.active { background: var(--tab-active-bg); color: var(--tab-active-text); }

/* ════════════════════════════════════════
   PROPERTY CARDS — FULL BLEED (edge to edge)
   ════════════════════════════════════════ */
.property-list {
    display: flex; flex-direction: column; gap: 8px;
    padding: 0 0 100px; width: 100%;
}

.property-card {
    background: var(--surface) !important;
    border: none !important;
    border-top: 0.5px solid var(--border) !important;
    border-bottom: 0.5px solid var(--border) !important;
    border-radius: 0 !important;
    overflow: hidden !important;
    box-shadow: none !important;
    padding: 0 !important;
    gap: 0 !important;
    margin: 0 0 8px 0 !important;
    width: 100% !important;
    transition: background 0.3s, border-color 0.3s !important;
}
.property-card:hover { transform: none !important; box-shadow: none !important; }

/* Photo — spans full screen width */
.prop-photo-area {
    position: relative; height: 180px; background: var(--photo-bg);
    overflow: hidden; cursor: pointer; width: 100%;
}
.prop-photo-area img { width: 100%; height: 100%; object-fit: cover; }
.prop-photo-placeholder {
    display: flex; flex-direction: column; align-items: center;
    justify-content: center; height: 100%; gap: 7px; cursor: pointer;
}
.prop-photo-placeholder i { font-size: 32px; color: var(--photo-icon); }
.prop-photo-placeholder span { font-size: 11px; color: var(--photo-icon); }

.prop-score-badge {
    position: absolute; top: 12px; right: 12px;
    background: rgba(29,158,117,0.94); border-radius: 11px;
    padding: 6px 10px; text-align: center; min-width: 50px;
}
.prop-score-badge .psb-num { font-size: 19px; font-weight: 600; color: #fff; line-height: 1; }
.prop-score-badge .psb-out { font-size: 8px; color: rgba(255,255,255,0.8); }

.prop-status-badge {
    position: absolute; bottom: 12px; left: 12px;
    border-radius: 6px; padding: 4px 10px;
    font-size: 10px; font-weight: 600; letter-spacing: 0.03em;
}
.prop-status-badge.good    { background: rgba(29,158,117,0.92); color: #fff; }
.prop-status-badge.fair    { background: rgba(241,143,1,0.92); color: #fff; }
.prop-status-badge.poor    { background: rgba(220,38,38,0.92); color: #fff; }
.prop-status-badge.pending { background: rgba(60,60,60,0.78); color: #e8e8e8; }

.prop-card-info { padding: 12px 16px 0; }
.prop-card-address {
    font-size: 15px; font-weight: 600; color: var(--text-1);
    margin-bottom: 3px; transition: color 0.3s;
}
.prop-card-meta { font-size: 11px; color: var(--text-2); margin-bottom: 9px; transition: color 0.3s; }
.prop-card-specs { display: flex; gap: 14px; margin-bottom: 9px; }
.prop-card-spec {
    display: flex; align-items: center; gap: 5px;
    font-size: 11px; color: var(--text-2); transition: color 0.3s;
}
.prop-card-spec i { font-size: 12px; color: var(--brand-green); }

.prop-progress-wrap { margin-bottom: 4px; }
.prop-progress-bg {
    height: 4px; border-radius: 99px; background: var(--prog-bg);
    overflow: hidden; margin-bottom: 4px; transition: background 0.3s;
}
.prop-progress-fill { height: 4px; border-radius: 99px; background: var(--brand-green); transition: width 0.4s; }
.prop-progress-row { display: flex; justify-content: space-between; margin-bottom: 6px; }
.prop-progress-row span { font-size: 10px; color: var(--text-3); transition: color 0.3s; }
.prop-progress-row .prog-pct { color: var(--brand-green); font-weight: 500; }

.prop-card-actions { display: flex; gap: 6px; padding: 8px 16px 14px; }
.prop-action-btn {
    flex: 1; border-radius: 9px; padding: 10px 6px; border: none;
    cursor: pointer; font-size: 12px; font-weight: 500;
    display: flex; align-items: center; justify-content: center; gap: 5px;
    transition: background 0.2s, color 0.2s;
    font-family: 'Poppins', sans-serif;
}
.prop-action-btn i { font-size: 13px; }
.prop-action-btn.assess { background: var(--btn-assess-bg) !important; color: var(--btn-assess-text) !important; }
.prop-action-btn.view   { background: var(--btn-view-bg) !important;   color: var(--btn-view-text) !important; }
.prop-action-btn.edit   { background: var(--btn-edit-bg) !important;   color: var(--btn-edit-text) !important; max-width: 44px; flex: 0 0 44px; }
.prop-action-btn.del    { background: var(--btn-del-bg) !important;    color: var(--btn-del-text) !important;  max-width: 44px; flex: 0 0 44px; }

/* ════════════════════════════════════════
   ADD PROPERTY BUTTON
   ════════════════════════════════════════ */
.add-property-btn {
    display: flex; align-items: center; justify-content: center; gap: 8px;
    background: var(--btn-assess-bg) !important; color: #ffffff !important;
    border: none !important; border-radius: 12px !important;
    padding: 14px !important; font-size: 14px !important; font-weight: 600 !important;
    width: calc(100% - 28px); margin: 6px 14px 16px;
    cursor: pointer; font-family: 'Poppins', sans-serif;
}

/* ════════════════════════════════════════
   TOOLS GRID
   ════════════════════════════════════════ */
.tools-grid {
    display: grid; grid-template-columns: 1fr 1fr 1fr;
    gap: 8px; margin: 0 14px 16px;
}
.tool-card {
    background: var(--surface); border: 0.5px solid var(--border);
    border-radius: 13px; padding: 14px 8px; text-align: center;
    cursor: pointer; transition: background 0.3s, border-color 0.3s;
}
.tool-card i { font-size: 22px; display: block; margin-bottom: 7px; color: var(--brand-green); }
.tool-card .tc-name { font-size: 11px; font-weight: 600; color: var(--text-1); margin-bottom: 2px; transition: color 0.3s; }
.tool-card .tc-sub { font-size: 9px; color: var(--text-2); transition: color 0.3s; }

/* Hide old tiles */
.home-tiles { display: none !important; }

/* ════════════════════════════════════════
   SETUP / SETTINGS / HELP SECTIONS — full width
   ════════════════════════════════════════ */
.setup-section, .settings-section, .help-section {
    background: var(--surface) !important;
    border: none !important;
    border-top: 0.5px solid var(--border) !important;
    border-bottom: 0.5px solid var(--border) !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    padding: 18px 16px !important;
    margin: 0 0 10px 0 !important;
    width: 100%;
    transition: background 0.3s, border-color 0.3s;
}

.setup-section h3, .settings-section h3, .help-section h3 {
    color: var(--text-1) !important;
    transition: color 0.3s;
}

/* ════════════════════════════════════════
   SETTINGS — native list rows
   ════════════════════════════════════════ */
.settings-list { gap: 0 !important; }

.setting-item {
    background: transparent !important;
    border: none !important;
    border-bottom: 0.5px solid var(--divider) !important;
    border-radius: 0 !important;
    padding: 15px 0 !important;
    min-height: auto !important;
    transition: background 0.2s !important;
}
.setting-item:last-child { border-bottom: none !important; }
.setting-item:hover { background: transparent !important; transform: none !important; border-color: var(--divider) !important; }

.setting-icon {
    width: 40px !important; height: 40px !important;
    background: var(--icon-circle-bg) !important;
    color: var(--icon-circle-color) !important;
    font-size: 1rem !important;
}

.setting-info h4 { color: var(--text-1) !important; font-size: 0.95rem !important; transition: color 0.3s; }
.setting-info p  { color: var(--text-2) !important; font-size: 0.8rem !important;  transition: color 0.3s; }
.setting-arrow   { color: var(--text-3) !important; }

/* ════════════════════════════════════════
   THEME SWITCH — clearly visible
   ════════════════════════════════════════ */
.theme-switch {
    width: 52px; height: 30px; min-width: 52px;
    border-radius: 99px;
    background: var(--switch-track-off);
    border: none; cursor: pointer; position: relative;
    transition: background 0.25s; flex-shrink: 0;
    display: inline-block;
}
.theme-switch.dark-on { background: var(--switch-track-on); }
.theme-switch-thumb {
    position: absolute; top: 3px; left: 3px;
    width: 24px; height: 24px; border-radius: 50%;
    background: #ffffff;
    box-shadow: 0 1px 4px rgba(0,0,0,0.3);
    transition: transform 0.25s;
    pointer-events: none;
}
.theme-switch.dark-on .theme-switch-thumb { transform: translateX(22px); }

/* ════════════════════════════════════════
   FORMS — clean, full width sections
   ════════════════════════════════════════ */
.form-label { color: var(--text-1) !important; transition: color 0.3s; }
.form-hint  { color: var(--text-3) !important; }
.form-input, .form-select, .form-textarea {
    background: var(--surface-2) !important;
    color: var(--text-1) !important;
    border: 0.5px solid var(--border) !important;
    border-radius: 10px !important;
    transition: background 0.3s, color 0.3s, border-color 0.3s;
}
.form-input:focus, .form-select:focus, .form-textarea:focus {
    border-color: var(--brand-green) !important;
    outline: none !important;
}

.property-type-card {
    background: var(--surface-2) !important;
    border: 1px solid var(--border) !important;
    transition: background 0.3s, border-color 0.3s !important;
}
.property-type-card h4 { color: var(--text-1) !important; }
.property-type-card p  { color: var(--text-2) !important; }
.property-type-card.selected {
    background: var(--brand-green-light) !important;
    border-color: var(--brand-green) !important;
}
body.dark-mode .property-type-card.selected {
    background: rgba(29,158,117,0.15) !important;
}
.property-type-card.selected h4 { color: var(--brand-green-dark) !important; }
body.dark-mode .property-type-card.selected h4 { color: var(--brand-green) !important; }

/* ════════════════════════════════════════
   MODALS
   ════════════════════════════════════════ */
.modal-overlay { background: rgba(0,0,0,0.7) !important; }
.modal-content {
    background: var(--surface) !important;
    color: var(--text-1) !important;
    border: 0.5px solid var(--border) !important;
    transition: background 0.3s;
}
.modal-title  { color: var(--text-1) !important; }
.modal-body   { color: var(--text-2) !important; }

/* ════════════════════════════════════════
   EMPTY STATES
   ════════════════════════════════════════ */
.empty-state h3 { color: var(--text-1) !important; }
.empty-state p  { color: var(--text-2) !important; }
.empty-state i  { color: var(--brand-green) !important; }

/* ════════════════════════════════════════
   BOTTOM NAVIGATION — full width
   ════════════════════════════════════════ */
.bottom-nav {
    position: fixed; bottom: 0; left: 0; right: 0;
    width: 100%;
    display: flex; justify-content: space-around; align-items: center;
    padding: 9px 8px max(10px, env(safe-area-inset-bottom, 10px));
    background: var(--nav-bg);
    border-top: 0.5px solid var(--nav-border);
    z-index: 200;
    transition: background 0.3s, border-color 0.3s;
}
.nav-item {
    display: flex; flex-direction: column; align-items: center;
    cursor: pointer; min-width: 50px; padding: 4px 2px;
    border: none; background: none;
}
.nav-item i { font-size: 20px; display: block; margin-bottom: 3px; color: var(--nav-inactive); transition: color 0.2s; }
.nav-item span { font-size: 9px; display: block; color: var(--nav-inactive); transition: color 0.2s; font-family: 'Poppins', sans-serif; }
.nav-item.active i, .nav-item.active span { color: var(--brand-green); }
.nav-fab {
    width: 48px; height: 48px; border-radius: 50%;
    background: var(--brand-green); border: none;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer; box-shadow: 0 3px 10px rgba(29,158,117,0.45);
    margin-top: -18px;
}
.nav-fab i { font-size: 22px; color: #fff; }

/* ════════════════════════════════════════
   ASSESSMENT SCREENS — edge to edge
   ════════════════════════════════════════ */
.assessment-category, .room-section, .category-section {
    border-radius: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    width: 100% !important;
}

/* Property details container */
.property-detail-container {
    padding: 0 !important;
}

/* ════════════════════════════════════════
   SCROLLBAR (subtle)
   ════════════════════════════════════════ */
::-webkit-scrollbar { width: 0; height: 0; }

/* ════════════════════════════════════════
   HOME CONTENT WRAPPER — full width
   ════════════════════════════════════════ */
.home-content {
    width: 100%;
    padding: 0;
}


/* ═══════════════════════════════════════════════════════════════
   COMPREHENSIVE SCREEN OVERRIDES — every screen, every modal
   ═══════════════════════════════════════════════════════════════ */

/* ════════════════════════════════════════
   GENERIC BUTTONS
   ════════════════════════════════════════ */
.primary-button {
    background: var(--brand-green) !important;
    color: #ffffff !important;
    border: none !important;
    border-radius: 10px !important;
    box-shadow: none !important;
    font-weight: 600 !important;
}
.secondary-button {
    background: var(--btn-view-bg) !important;
    color: var(--btn-view-text) !important;
    border: none !important;
    border-radius: 10px !important;
    box-shadow: none !important;
}
.done-button {
    background: var(--brand-green) !important;
    color: #fff !important;
    border: none !important;
    border-radius: 12px !important;
    box-shadow: 0 2px 8px rgba(29,158,117,0.35) !important;
    font-weight: 600 !important;
}

/* ════════════════════════════════════════
   ONBOARDING / WELCOME MODAL
   ════════════════════════════════════════ */
.welcome-modal, .onboarding-modal, .assessment-guide-modal {
    background: var(--surface) !important;
    border: 0.5px solid var(--border) !important;
    border-radius: 18px !important;
    color: var(--text-1) !important;
}
.welcome-modal h2, .assessment-guide-modal h2,
.welcome-modal h3, .assessment-guide-modal h3 {
    color: var(--text-1) !important;
}
.welcome-modal p, .assessment-guide-modal p {
    color: var(--text-2) !important;
}
.assessment-guide-header {
    background: var(--header-bg) !important;
    border-radius: 18px 18px 0 0 !important;
}
.assessment-guide-header h2, .assessment-guide-header h3 { color: #fff !important; }
.assessment-guide-icon { background: rgba(255,255,255,0.2) !important; color: #fff !important; }
.assessment-guide-body { background: var(--surface) !important; color: var(--text-2) !important; }
.step-description { color: var(--text-2) !important; }
.guide-tips-section {
    background: var(--surface-2) !important;
    border: 0.5px solid var(--border) !important;
    border-radius: 12px !important;
}
.rating-item {
    background: var(--surface-2) !important;
    border: 0.5px solid var(--border) !important;
    border-radius: 10px !important;
}
.rating-label { color: var(--text-1) !important; }
.rating-desc  { color: var(--text-2) !important; }
.rating-item.excellent .rating-header { color: #1d9e75 !important; }
.rating-item.good .rating-header      { color: #22c55e !important; }
.rating-item.fair .rating-header      { color: #eab308 !important; }
.rating-item.poor .rating-header      { color: #ef4444 !important; }
.dont-show-again { color: var(--text-3) !important; }

/* ════════════════════════════════════════
   ASSESSMENT SCREEN — categories & rooms
   ════════════════════════════════════════ */
.assessment-categories { padding: 0 !important; }

.assessment-category {
    background: var(--surface) !important;
    border: none !important;
    border-top: 0.5px solid var(--border) !important;
    border-bottom: 0.5px solid var(--border) !important;
    border-radius: 0 !important;
    margin: 0 0 8px 0 !important;
    box-shadow: none !important;
    overflow: hidden;
}

.category-header {
    background: var(--surface) !important;
    border: none !important;
    border-radius: 0 !important;
    padding: 15px 16px !important;
    transition: background 0.2s !important;
}
.category-header:hover { background: var(--surface-2) !important; }
.category-name, .category-title { color: var(--text-1) !important; font-weight: 600 !important; }
.category-icon {
    background: var(--icon-circle-bg) !important;
    color: var(--brand-green) !important;
    border-radius: 10px !important;
}
.category-progress { color: var(--text-2) !important; }
.category-expanded-content {
    background: transparent !important;
    padding: 0 !important;
}

.room-section {
    background: transparent !important;
    border: none !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05) !important;
    border-radius: 0 !important;
    margin: 0 !important;
    box-shadow: none !important;
}

.room-header-bar {
    background: transparent !important;
    border-radius: 0 !important;
    padding: 11px 16px !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
}
.room-header-bar h4, .room-title-section h4,
.instance-name { color: var(--text-1) !important; }
.room-controls i { color: var(--text-2) !important; }

.assessment-item {
    background: transparent !important;
    border: none !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05) !important;
    border-radius: 0 !important;
    padding: 13px 16px 11px !important;
    margin: 0 !important;
}
.assessment-item:last-child { border-bottom: none !important; }
.item-question { color: var(--text-1) !important; font-weight: 500 !important; }

.rating-dropdown, .feature-dropdown {
    background: var(--surface-2) !important;
    color: var(--text-1) !important;
    border: 0.5px solid var(--border) !important;
    border-radius: 9px !important;
    padding: 9px 12px !important;
}

.info-btn, .question-info-btn {
    background: var(--icon-circle-bg) !important;
    color: var(--brand-green) !important;
    border: none !important;
    border-radius: 50% !important;
}

/* Questions section */
.questions-section {
    background: var(--surface) !important;
    border: none !important;
    border-top: 0.5px solid var(--border) !important;
    border-bottom: 0.5px solid var(--border) !important;
    border-radius: 0 !important;
    margin: 0 0 8px 0 !important;
}
.questions-header { background: var(--surface) !important; color: var(--text-1) !important; }
.questions-header h4 { color: var(--text-1) !important; }
.question-item {
    background: transparent !important;
    border-bottom: 0.5px solid var(--divider) !important;
    border-radius: 0 !important;
}
.question-text { color: var(--text-1) !important; }
.question-textarea, .room-notes-textarea, .room-name-input {
    background: var(--surface-2) !important;
    color: var(--text-1) !important;
    border: 0.5px solid var(--border) !important;
    border-radius: 10px !important;
}
.required-marker { color: #ef4444 !important; }

/* Notes */
.room-notes-section { background: transparent !important; }
.add-notes-btn {
    background: var(--btn-edit-bg) !important;
    color: var(--btn-edit-text) !important;
    border: none !important;
    border-radius: 9px !important;
}

/* Add room / feature buttons */
.add-room-btn, .add-feature-btn, .room-instance-btn {
    background: var(--icon-circle-bg) !important;
    color: var(--brand-green) !important;
    border: 1px dashed var(--brand-green) !important;
    border-radius: 10px !important;
}
.delete-room-instance-btn {
    background: var(--btn-del-bg) !important;
    color: var(--btn-del-text) !important;
    border: none !important;
    border-radius: 8px !important;
}
.add-other-features-section {
    background: var(--surface) !important;
    border: 0.5px solid var(--border) !important;
    border-left: none !important;
    border-right: none !important;
    border-radius: 0 !important;
}

/* Completion */
.completion-status, .completion-text { color: var(--text-2) !important; }
.completion-progress { background: var(--prog-bg) !important; }
.room-completion-section { background: transparent !important; }

/* Photo buttons */
.photo-btn, .capture-btn, .gallery-btn {
    background: var(--btn-view-bg) !important;
    color: var(--btn-view-text) !important;
    border: none !important;
    border-radius: 9px !important;
}
.item-photos { background: transparent !important; margin-top: 7px !important; }
.photo-preview { background: transparent !important; border-radius: 0 !important; display: flex !important; flex-wrap: wrap !important; gap: 6px !important; }
.no-photos { display: none !important; }
.item-note-area { margin: 6px 0 !important; }
.item-note-textarea {
    width: 100% !important;
    background: var(--surface-2) !important;
    color: var(--text-1) !important;
    border: 1px solid var(--brand-green) !important;
    border-radius: 9px !important;
    padding: 8px 10px !important;
    font-size: 0.78rem !important;
    font-family: 'Poppins', sans-serif !important;
    resize: none !important;
    outline: none !important;
    box-sizing: border-box !important;
}

/* Done button container */
.done-button-container { background: transparent !important; padding: 16px !important; }

/* ════════════════════════════════════════
   RESULTS / REPORT SCREEN
   ════════════════════════════════════════ */
.assessment-results-improved, .assessment-report {
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    padding: 0 !important;
}

.report-header {
    background: var(--surface) !important;
    border: none !important;
    border-bottom: 0.5px solid var(--border) !important;
    border-radius: 0 !important;
    padding: 18px 16px !important;
    margin: 0 0 8px 0 !important;
}
.report-header h2, .report-header h3 { color: var(--text-1) !important; }
.report-date { color: var(--text-3) !important; }
.report-property-info { color: var(--text-2) !important; }

.report-score-section, .score-display-main {
    background: var(--surface) !important;
    border: none !important;
    border-radius: 0 !important;
    border-bottom: 0.5px solid var(--border) !important;
    margin: 0 0 8px 0 !important;
    padding: 20px 16px !important;
}

.score-circle-large {
    background: var(--icon-circle-bg) !important;
    border: 3px solid var(--brand-green) !important;
}
/* removed: score number colour now follows grade (green/amber/red) via inline style */
.score-grade-large  { color: var(--text-1) !important; }
.score-summary-large { color: var(--text-2) !important; }
.score-info-large    { color: var(--text-2) !important; }

.key-insights {
    background: var(--surface) !important;
    border: none !important;
    border-top: 0.5px solid var(--border) !important;
    border-bottom: 0.5px solid var(--border) !important;
    border-left: 3px solid var(--brand-green) !important;
    border-radius: 0 !important;
    margin: 0 0 8px 0 !important;
    padding: 16px !important;
}
.key-insights h3, .key-insights h4 { color: var(--text-1) !important; }
.insight-item { color: var(--text-2) !important; background: transparent !important; }
.insight-icon { color: var(--brand-green) !important; }
.insights-grid { background: transparent !important; }

.assessment-details-enhanced, .room-assessment-enhanced {
    background: var(--surface) !important;
    border: none !important;
    border-top: 0.5px solid var(--border) !important;
    border-bottom: 0.5px solid var(--border) !important;
    border-radius: 0 !important;
    margin: 0 0 8px 0 !important;
}
.details-main-title, .issues-main-title { color: var(--text-1) !important; }
.details-introduction, .issues-introduction { color: var(--text-2) !important; }
.room-header-enhanced { background: var(--surface-2) !important; color: var(--text-1) !important; }
.room-header-enhanced h4 { color: var(--text-1) !important; }

.assessment-item-enhanced, .assessment-item-clean, .report-item {
    background: transparent !important;
    border-bottom: 0.5px solid var(--divider) !important;
    border-radius: 0 !important;
}
.item-header { color: var(--text-1) !important; }
.item-content { color: var(--text-2) !important; }

.issue-item-enhanced {
    background: var(--surface-2) !important;
    border: 0.5px solid var(--border) !important;
    border-left: 3px solid #ef4444 !important;
    border-radius: 10px !important;
}
.issue-header { color: var(--text-1) !important; }
.issue-location { color: var(--text-3) !important; }
.issues-section-header { color: var(--text-1) !important; }

.guidance-block {
    background: var(--surface-2) !important;
    border: 0.5px solid var(--border) !important;
    border-radius: 10px !important;
    color: var(--text-2) !important;
}

.assessment-pdf-btn, .report-actions button {
    background: var(--brand-green) !important;
    color: #fff !important;
    border: none !important;
    border-radius: 10px !important;
}
.assessment-top-actions, .report-actions { background: transparent !important; }
.report-loading { color: var(--text-2) !important; background: var(--surface) !important; border-radius: 0 !important; }

/* ════════════════════════════════════════
   PROPERTY DETAILS VIEW
   ════════════════════════════════════════ */
.property-detail-view { background: transparent !important; }
.detail-section-container {
    background: var(--surface) !important;
    border: none !important;
    border-top: 0.5px solid var(--border) !important;
    border-bottom: 0.5px solid var(--border) !important;
    border-radius: 0 !important;
    margin: 0 0 8px 0 !important;
    box-shadow: none !important;
}
.detail-section-header {
    background: var(--surface) !important;
    color: var(--text-1) !important;
    border-radius: 0 !important;
}
.detail-section-header h3, .detail-section-header h4 { color: var(--text-1) !important; }
.detail-section-content { background: var(--surface) !important; color: var(--text-2) !important; }
.property-details-line { color: var(--text-2) !important; }
.property-details-readonly { color: var(--text-2) !important; }
.spec-item { color: var(--text-2) !important; background: var(--surface-2) !important; border-radius: 8px !important; }
.detail-actions button { border-radius: 10px !important; }


/* ════════════════════════════════════════
   MODALS — all types
   ════════════════════════════════════════ */
.info-modal-content, .confirm-modal-content, .save-modal-content,
.cancel-modal-content, .warning-modal-content, .incomplete-assessment-modal {
    background: var(--surface) !important;
    color: var(--text-2) !important;
    border: 0.5px solid var(--border) !important;
    border-radius: 16px !important;
}
.info-modal-content h3, .confirm-modal-content h3,
.save-modal-content h3, .warning-modal-content h3 { color: var(--text-1) !important; }
.info-icon, .save-icon { color: var(--brand-green) !important; }
.confirm-icon, .warning-icon, .incomplete-icon { color: #f59e0b !important; }
.cancel-icon { color: #ef4444 !important; }

/* PDF export modal */
.pdf-option-group {
    background: var(--surface-2) !important;
    border: 0.5px solid var(--border) !important;
    border-radius: 10px !important;
}
.pdf-option-label { color: var(--text-1) !important; }
.pdf-option-description { color: var(--text-2) !important; }

/* ════════════════════════════════════════
   COST CALCULATOR (generic coverage)
   ════════════════════════════════════════ */
#costCalculatorScreen .setup-section,
#costCalculatorScreen .calculator-section {
    background: var(--surface) !important;
    border-radius: 0 !important;
    border-left: none !important;
    border-right: none !important;
}
.calculator-result, .calc-result {
    background: var(--surface-2) !important;
    border: 0.5px solid var(--border) !important;
    border-radius: 12px !important;
    color: var(--text-1) !important;
}
.section-title { color: var(--text-1) !important; }
.group-header { color: var(--text-1) !important; }
.feature-name { color: var(--text-1) !important; }
.feature-select {
    background: var(--surface-2) !important;
    color: var(--text-1) !important;
    border-color: var(--border) !important;
}
.qty-btn {
    background: var(--icon-circle-bg) !important;
    color: var(--brand-green) !important;
    border: none !important;
}
.feature-chips span, .feature-group {
    background: var(--surface-2) !important;
    color: var(--text-2) !important;
    border-color: var(--border) !important;
}

/* Reset modal items */
.reset-item  { background: var(--surface-2) !important; border-color: var(--border) !important; }
.reset-label { color: var(--text-1) !important; }
.reset-count { color: var(--text-2) !important; }

/* Storage info */
.storage-item    { background: var(--surface-2) !important; }
.storage-icon    { color: var(--brand-green) !important; }
.storage-details { color: var(--text-2) !important; }

/* ════════════════════════════════════════
   UPCOMING ASSESSMENTS (home banner)
   ════════════════════════════════════════ */
#upcomingAssessmentsContainer > div {
    background: var(--surface) !important;
    border: 0.5px solid var(--border) !important;
    border-left: 3px solid var(--brand-green) !important;
    border-radius: 0 !important;
    color: var(--text-1) !important;
}

/* Premium upgrade banner — keep brand green */
.premium-banner, .upgrade-banner {
    border-radius: 0 !important;
    margin: 0 0 8px 0 !important;
}

/* ═══════════════════════════════════════════════════════════════
   v3 ADDITIONS — status bar, splash, welcome modal, settings,
   calculator, appearance segmented control
   ═══════════════════════════════════════════════════════════════ */

/* ════════════════════════════════════════
   STATUS BAR CLEARANCE — push top bar below
   phone clock/battery area
   ════════════════════════════════════════ */
.app-top-bar {
    padding-top: calc(14px + 28px) !important; /* 28px status bar clearance */
}

/* ════════════════════════════════════════
   LOADING / SPLASH SCREEN — on-theme
   ════════════════════════════════════════ */
.loading-modal {
    background: #0d1520 !important;
}
.loading-modal-content { background: transparent !important; }
.loading-logo .loading-icon i.fa-home {
    color: #ffffff !important;
    text-shadow: none !important;
}
.loading-logo .loading-icon .loading-magnifier {
    color: #1d9e75 !important;
}
.loading-text h2 {
    color: #e8f1f8 !important;
    text-shadow: none !important;
}
.loading-text h2 span, .loading-text h2 b { color: #1d9e75 !important; }
.loading-text p { color: #8bbad4 !important; }
.loading-spinner {
    border-color: #1e3448 !important;
    border-top-color: #1d9e75 !important;
}

/* ════════════════════════════════════════
   WELCOME MODAL — professional restyle
   ════════════════════════════════════════ */
.welcome-modal {
    background: rgba(5, 10, 18, 0.85) !important;
    backdrop-filter: blur(4px);
}
.welcome-content {
    background: var(--surface) !important;
    border: 0.5px solid var(--border) !important;
    border-radius: 20px !important;
    box-shadow: 0 20px 60px rgba(0,0,0,0.5) !important;
    max-width: 100% !important;
}
.welcome-close-btn {
    background: var(--surface-2) !important;
    color: var(--text-2) !important;
    border: 0.5px solid var(--border) !important;
}
.welcome-header {
    background: linear-gradient(160deg, #1d9e75, #0f6e56) !important;
    border-radius: 20px 20px 0 0 !important;
    padding: 28px 24px 24px !important;
}
.welcome-icon {
    background: rgba(255,255,255,0.2) !important;
    color: #ffffff !important;
    border: none !important;
    box-shadow: none !important;
}
.welcome-header h2 {
    color: #ffffff !important;
    text-shadow: none !important;
    font-size: 1.35rem !important;
}
.welcome-header p {
    color: rgba(255,255,255,0.85) !important;
}
.welcome-body { background: var(--surface) !important; }
.welcome-intro {
    background: var(--surface-2) !important;
    border: 0.5px solid var(--border) !important;
    border-left: 3px solid var(--brand-green) !important;
    border-radius: 12px !important;
    color: var(--text-2) !important;
}
.welcome-intro p { color: var(--text-2) !important; }
.welcome-intro strong { color: var(--text-1) !important; }
.welcome-step {
    background: var(--surface-2) !important;
    border: 0.5px solid var(--border) !important;
    border-left: none !important;
    border-radius: 12px !important;
    box-shadow: none !important;
}
.step-number {
    background: var(--brand-green) !important;
    color: #ffffff !important;
    box-shadow: none !important;
    border: none !important;
}
.step-title { color: var(--text-1) !important; }
.step-description { color: var(--text-2) !important; }
.welcome-tip {
    background: rgba(29,158,117,0.08) !important;
    border: 0.5px solid var(--brand-green) !important;
    border-radius: 12px !important;
}
.tip-icon { color: #f5b942 !important; background: transparent !important; }
.tip-content h4 { color: var(--text-1) !important; }
.tip-content p  { color: var(--text-2) !important; }
.welcome-footer { background: var(--surface) !important; border-top: 0.5px solid var(--divider) !important; }
.dont-show-again label { color: var(--text-3) !important; }
.welcome-btn-primary {
    background: var(--brand-green) !important;
    color: #ffffff !important;
    border: none !important;
    border-radius: 10px !important;
    box-shadow: 0 2px 8px rgba(29,158,117,0.35) !important;
    font-weight: 600 !important;
}
.welcome-btn-secondary {
    background: var(--btn-edit-bg) !important;
    color: var(--btn-edit-text) !important;
    border: none !important;
    border-radius: 10px !important;
}

/* ════════════════════════════════════════
   SETTINGS — professional grouped layout
   ════════════════════════════════════════ */
.settings-group {
    background: var(--surface);
    border-top: 0.5px solid var(--border);
    border-bottom: 0.5px solid var(--border);
    margin: 0 0 4px 0;
    padding: 4px 16px;
    transition: background 0.3s, border-color 0.3s;
}
.settings-group .settings-list { gap: 0 !important; }

/* Appearance control with segmented Light/Dark */
.appearance-control {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 14px 0;
}
.appearance-info { flex: 1; min-width: 0; }
.appearance-info h4 {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--text-1);
    margin: 0 0 2px 0;
    transition: color 0.3s;
}
.appearance-info p {
    font-size: 0.78rem;
    color: var(--text-2);
    margin: 0;
    transition: color 0.3s;
}
.theme-segments {
    display: flex;
    background: var(--surface-2);
    border: 0.5px solid var(--border);
    border-radius: 12px;
    padding: 3px;
    gap: 3px;
    flex-shrink: 0;
}
.theme-segment {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    border: none;
    border-radius: 9px;
    background: transparent;
    color: var(--text-2);
    font-size: 12px;
    font-weight: 600;
    font-family: 'Poppins', sans-serif;
    cursor: pointer;
    transition: background 0.2s, color 0.2s;
}
.theme-segment i { font-size: 13px; }
.theme-segment.active {
    background: var(--brand-green);
    color: #ffffff;
    box-shadow: 0 1px 4px rgba(29,158,117,0.4);
}

/* Danger setting accent */
.danger-setting .setting-icon {
    background: var(--btn-del-bg) !important;
    color: var(--btn-del-text) !important;
}
.danger-setting .setting-info h4 { color: var(--btn-del-text) !important; }

/* ════════════════════════════════════════
   COST CALCULATOR — full restyle
   ════════════════════════════════════════ */
.calculator-description {
    background: var(--surface) !important;
    border: none !important;
    border-bottom: 0.5px solid var(--border) !important;
    border-radius: 0 !important;
    margin: 0 0 8px 0 !important;
    padding: 14px 16px !important;
    box-shadow: none !important;
}
.calculator-description p { color: var(--text-2) !important; margin: 0 !important; }

/* Generic strong overrides for the JS-rendered calculator */
#standaloneCostCalculator > div,
#standaloneCostCalculator .calculator-card,
#standaloneCostCalculator .calc-section,
#standaloneCostCalculator .calculator-section,
#standaloneCostCalculator .cost-calculator {
    background: var(--surface) !important;
    border: none !important;
    border-top: 0.5px solid var(--border) !important;
    border-bottom: 0.5px solid var(--border) !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}
#standaloneCostCalculator h2,
#standaloneCostCalculator h3,
#standaloneCostCalculator h4,
#standaloneCostCalculator label {
    color: var(--text-1) !important;
    text-shadow: none !important;
}
#standaloneCostCalculator p,
#standaloneCostCalculator .hint,
#standaloneCostCalculator small {
    color: var(--text-2) !important;
}
#standaloneCostCalculator input,
#standaloneCostCalculator select,
#standaloneCostCalculator textarea {
    background: var(--surface-2) !important;
    color: var(--text-1) !important;
    border: 0.5px solid var(--border) !important;
    border-radius: 10px !important;
}
#standaloneCostCalculator input::placeholder { color: var(--text-3) !important; }
#standaloneCostCalculator .toggle-buttons button,
#standaloneCostCalculator .yes-no-toggle button,
#standaloneCostCalculator button[class*="toggle"] {
    background: var(--surface-2) !important;
    color: var(--text-2) !important;
    border: 0.5px solid var(--border) !important;
    border-radius: 10px !important;
}
#standaloneCostCalculator .toggle-buttons button.active,
#standaloneCostCalculator .yes-no-toggle button.active,
#standaloneCostCalculator button[class*="toggle"].active,
#standaloneCostCalculator button.selected {
    background: var(--brand-green) !important;
    color: #ffffff !important;
    border-color: var(--brand-green) !important;
}
#standaloneCostCalculator button[class*="calculate"],
#standaloneCostCalculator .calculate-btn,
#standaloneCostCalculator .primary-button {
    background: var(--brand-green) !important;
    color: #ffffff !important;
    border: none !important;
    border-radius: 10px !important;
    font-weight: 600 !important;
}
#standaloneCostCalculator .result-row,
#standaloneCostCalculator .results-section,
#standaloneCostCalculator [class*="result"] {
    background: var(--surface-2) !important;
    border-color: var(--border) !important;
    color: var(--text-1) !important;
    border-radius: 10px !important;
}
#standaloneCostCalculator .info-btn,
#standaloneCostCalculator [class*="info-icon"] {
    background: var(--icon-circle-bg) !important;
    color: var(--brand-green) !important;
}

/* Calculator on light mode keeps same vars automatically */

/* ═══════════════════════════════════════════════════════════════
   v4 — SYSTEMATIC LIGHT MODE FIX + WELCOME REDESIGN +
   HELP GUIDE REDESIGN + CALCULATOR EXACT OVERRIDES + SCORE BADGE
   ═══════════════════════════════════════════════════════════════ */

/* ════════════════════════════════════════
   THE MASTER FIX — old CSS files use
   --text-white / --text-light everywhere.
   Redefine them per mode so EVERY legacy
   component becomes readable in light mode.
   ════════════════════════════════════════ */
body:not(.dark-mode) {
    --text-white: #111827 !important;
    --text-light: #4b5563 !important;
}
body.dark-mode {
    --text-white: #e8f1f8 !important;
    --text-light: #8bbad4 !important;
}

/* Re-assert WHITE text on elements that keep
   coloured backgrounds in both modes */
.screen-header h2,
.screen-header p,
.app-top-bar .app-name,
.help-header h2, .help-header p,
.help-header-with-nav h2, .help-header-with-nav p,
.help-title h2, .help-title p,
.banner-content, .banner-content h2, .banner-content p,
.premium-banner *, .upgrade-banner * {
    color: #ffffff !important;
}
.app-top-bar .app-tagline { color: rgba(255,255,255,0.75) !important; }

/* ════════════════════════════════════════
   WELCOME MODAL — ALWAYS DARK, professional
   (explicit colours — immune to mode toggle)
   ════════════════════════════════════════ */
.welcome-modal {
    background: rgba(4, 9, 16, 0.92) !important;
    backdrop-filter: blur(6px);
    display: flex !important;
    align-items: center;
    justify-content: center;
    padding: 20px;
}
.welcome-content {
    background: #0f1d2e !important;
    border: 0.5px solid #1e3448 !important;
    border-radius: 24px !important;
    box-shadow: 0 24px 80px rgba(0,0,0,0.6) !important;
    max-width: 100% !important;
    width: 100%;
    padding: 0 !important;
    overflow: hidden;
    position: relative;
}
.welcome-close-btn {
    position: absolute !important;
    top: 14px; right: 14px;
    width: 34px; height: 34px;
    background: rgba(255,255,255,0.1) !important;
    color: rgba(255,255,255,0.7) !important;
    border: none !important;
    border-radius: 50% !important;
    z-index: 5;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer;
}

/* Hero */
.welcome-hero {
    background: linear-gradient(165deg, #1d9e75 0%, #0c5c45 100%);
    padding: 36px 24px 28px;
    text-align: center;
}
.welcome-hero-icon {
    position: relative;
    width: 64px; height: 64px;
    margin: 0 auto 16px;
    background: rgba(255,255,255,0.18);
    border-radius: 18px;
    display: flex; align-items: center; justify-content: center;
}
.welcome-hero-icon .fa-home { font-size: 30px; color: #ffffff; }
.welcome-hero-icon .welcome-hero-magnifier {
    position: absolute;
    bottom: 8px; right: 8px;
    font-size: 15px;
    color: #a8f0d8;
}
.welcome-hero h2 {
    color: #ffffff !important;
    font-size: 1.5rem !important;
    font-weight: 700 !important;
    margin: 0 0 6px 0 !important;
    text-shadow: none !important;
}
.welcome-hero p {
    color: rgba(255,255,255,0.85) !important;
    font-size: 0.85rem !important;
    margin: 0 !important;
}

/* Feature rows */
.welcome-features {
    padding: 22px 22px 6px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}
.welcome-feature {
    display: flex;
    align-items: flex-start;
    gap: 13px;
}
.wf-icon {
    width: 40px; height: 40px;
    flex-shrink: 0;
    background: rgba(29,158,117,0.15);
    border-radius: 12px;
    display: flex; align-items: center; justify-content: center;
}
.wf-icon i { font-size: 17px; color: #1d9e75; }
.wf-text h4 {
    color: #e8f1f8 !important;
    font-size: 0.92rem !important;
    font-weight: 600 !important;
    margin: 0 0 2px 0 !important;
}
.wf-text p {
    color: #8bbad4 !important;
    font-size: 0.78rem !important;
    line-height: 1.45 !important;
    margin: 0 !important;
}

/* CTA */
.welcome-cta {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background: #1d9e75 !important;
    color: #ffffff !important;
    border: none !important;
    border-radius: 12px !important;
    padding: 14px !important;
    font-size: 0.95rem !important;
    font-weight: 600 !important;
    font-family: 'Poppins', sans-serif !important;
    width: calc(100% - 44px);
    margin: 18px 22px 0;
    cursor: pointer;
    box-shadow: 0 4px 14px rgba(29,158,117,0.4);
}

/* Footer row */
.welcome-footer-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 22px 20px;
}
.dont-show-again {
    display: flex;
    align-items: center;
    gap: 7px;
    cursor: pointer;
}
.dont-show-again input { accent-color: #1d9e75; }
.dont-show-again label {
    color: #5a85a0 !important;
    font-size: 0.75rem !important;
    cursor: pointer;
}
.welcome-link {
    background: none !important;
    border: none !important;
    color: #8bbad4 !important;
    font-size: 0.75rem !important;
    cursor: pointer;
    display: flex; align-items: center; gap: 5px;
    font-family: 'Poppins', sans-serif;
}

/* ════════════════════════════════════════
   CALCULATOR — exact class overrides
   ════════════════════════════════════════ */
.cost-calculator-container,
.cost-section-container,
.cost-input-section,
.financial-overview {
    background: var(--surface) !important;
    border: none !important;
    border-top: 0.5px solid var(--border) !important;
    border-bottom: 0.5px solid var(--border) !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}
.cost-section-header { background: transparent !important; }
.cost-section-title, .subsection-title { color: var(--text-1) !important; }
.cost-label, .cost-item-label { color: var(--text-1) !important; }
.cost-item-info, .slider-labels, .cost-item-amount { color: var(--text-2) !important; }
.cost-input, .interest-rate-input {
    background: var(--surface-2) !important;
    color: var(--text-1) !important;
    border: 0.5px solid var(--border) !important;
    border-radius: 10px !important;
}
.cost-input::placeholder { color: var(--text-3) !important; }
.bond-toggle-btn {
    background: var(--surface-2) !important;
    color: var(--text-2) !important;
    border: 0.5px solid var(--border) !important;
}
.bond-toggle-btn.active {
    background: var(--brand-green) !important;
    color: #ffffff !important;
    border-color: var(--brand-green) !important;
}
.cost-section-summary { color: var(--brand-green) !important; }
.cost-section-toggle { color: var(--text-3) !important; }
.cost-subsection-header { color: var(--text-1) !important; }
.subsection-total { color: var(--brand-green) !important; }

/* Summary block — MONTHLY COST / ONCE-OFF */
.cost-summary-container {
    background: var(--surface) !important;
    border: none !important;
    border-top: 0.5px solid var(--border) !important;
    border-bottom: 0.5px solid var(--border) !important;
    border-radius: 0 !important;
}
.cost-summary-item {
    background: var(--surface-2) !important;
    border: 0.5px solid var(--border) !important;
    border-radius: 12px !important;
}
.cost-summary-item:hover { transform: none !important; box-shadow: none !important; }
.cost-summary-label {
    color: var(--text-2) !important;
    opacity: 1 !important;
    font-weight: 600 !important;
}
.cost-breakdown-item, .financial-item { color: var(--text-2) !important; }
.cost-breakdown-total, .cost-total-label { color: var(--text-1) !important; }
.cost-total-amount { color: var(--brand-green) !important; }

/* Important information / disclaimer */
.financial-disclaimer, .disclaimer-box {
    background: var(--surface-2) !important;
    border: 0.5px solid var(--border) !important;
    border-left: 3px solid var(--brand-green) !important;
    border-radius: 12px !important;
}
.disclaimer-box h4 { color: var(--text-1) !important; }
.disclaimer-box li, .disclaimer-box p { color: var(--text-2) !important; }
#standaloneCostCalculator .disclaimer-box li { color: var(--text-2) !important; }

/* ════════════════════════════════════════
   SCORE BADGE — labelled, professional
   ════════════════════════════════════════ */
.prop-score-badge {
    position: absolute;
    top: 10px; right: 10px;
    border-radius: 12px;
    padding: 7px 12px;
    text-align: center;
    min-width: 0;
    box-shadow: 0 2px 10px rgba(0,0,0,0.3);
}
.prop-score-badge.good    { background: rgba(29,158,117,0.95); }
.prop-score-badge.fair    { background: rgba(217,119,6,0.95); }
.prop-score-badge.poor    { background: rgba(220,38,38,0.95); }
.prop-score-badge .psb-label {
    font-size: 7.5px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.85);
    margin-bottom: 1px;
    white-space: nowrap;
}
.prop-score-badge .psb-value { line-height: 1; }
.prop-score-badge .psb-num {
    font-size: 19px;
    font-weight: 700;
    color: #ffffff;
}
.prop-score-badge .psb-out {
    font-size: 10px;
    font-weight: 500;
    color: rgba(255,255,255,0.8);
}

/* ═══════════════════════════════════════════════════════════════
   v4 — WELCOME MODAL (always dark), HELP REDESIGN,
   LIGHT-MODE LEGIBILITY GUARANTEES, SCORE BADGE
   ═══════════════════════════════════════════════════════════════ */

/* ════════════════════════════════════════
   WELCOME MODAL — always dark, premium look
   (fixed colours — does NOT change with theme)
   ════════════════════════════════════════ */
.hbgw-overlay {
    position: fixed; inset: 0; z-index: 9999;
    background: rgba(5, 10, 18, 0.92);
    display: flex; align-items: center; justify-content: center;
    padding: 20px 14px;
    overflow-y: auto;
}
.hbgw-card {
    background: linear-gradient(180deg, #13243a 0%, #0d1726 100%);
    border: 0.5px solid #21405c;
    border-radius: 22px;
    width: 100%; max-width: 100%;
    max-height: 92vh; overflow-y: auto;
    position: relative;
    box-shadow: 0 24px 80px rgba(0,0,0,0.6);
}
.hbgw-close {
    position: absolute; top: 14px; right: 14px;
    width: 34px; height: 34px; border-radius: 50%;
    background: rgba(255,255,255,0.08);
    border: 0.5px solid rgba(255,255,255,0.12);
    color: #8bbad4; font-size: 14px;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer; z-index: 2;
}
.hbgw-hero {
    text-align: center;
    padding: 38px 24px 22px;
    background: radial-gradient(circle at 50% 0%, rgba(29,158,117,0.18), transparent 70%);
}
.hbgw-logo {
    position: relative; display: inline-block;
    margin-bottom: 14px;
}
.hbgw-logo .fa-home { font-size: 46px; color: #ffffff; }
.hbgw-logo .hbgw-mag {
    position: absolute; bottom: -4px; right: -12px;
    font-size: 22px; color: #1d9e75;
    text-shadow: 0 0 12px rgba(29,158,117,0.6);
}
.hbgw-hero h2 {
    color: #e8f1f8; font-size: 1.5rem; font-weight: 700;
    margin: 0 0 4px 0; line-height: 1.25;
}
.hbgw-hero h2 span { color: #1d9e75; }
.hbgw-tagline {
    color: #8bbad4; font-size: 0.85rem; margin: 0;
    letter-spacing: 0.04em;
}
.hbgw-body { padding: 4px 22px 8px; }
.hbgw-intro {
    color: #b8cedd; font-size: 0.88rem; text-align: center;
    line-height: 1.55; margin: 0 0 18px 0;
}
.hbgw-feature {
    display: flex; align-items: flex-start; gap: 13px;
    padding: 11px 0;
    border-bottom: 0.5px solid rgba(139,186,212,0.1);
}
.hbgw-feature:last-child { border-bottom: none; }
.hbgw-fi {
    width: 40px; height: 40px; border-radius: 11px;
    background: rgba(29,158,117,0.14);
    border: 0.5px solid rgba(29,158,117,0.3);
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
}
.hbgw-fi i { font-size: 16px; color: #1d9e75; }
.hbgw-ft h4 {
    color: #e8f1f8; font-size: 0.9rem; font-weight: 600;
    margin: 0 0 2px 0;
}
.hbgw-ft p {
    color: #7da3bd; font-size: 0.78rem; line-height: 1.45; margin: 0;
}
.hbgw-footer { padding: 14px 22px 24px; }
.hbgw-cta {
    width: 100%;
    background: #1d9e75; color: #ffffff;
    border: none; border-radius: 13px;
    padding: 15px; font-size: 15px; font-weight: 600;
    font-family: 'Poppins', sans-serif;
    cursor: pointer;
    display: flex; align-items: center; justify-content: center; gap: 8px;
    box-shadow: 0 4px 16px rgba(29,158,117,0.4);
}
.hbgw-secondary {
    width: 100%;
    background: transparent; color: #8bbad4;
    border: none; padding: 13px; font-size: 13px;
    font-family: 'Poppins', sans-serif; cursor: pointer;
}
.hbgw-dontshow {
    display: flex; align-items: center; justify-content: center;
    gap: 8px; cursor: pointer; padding-top: 2px;
}
.hbgw-dontshow input { accent-color: #1d9e75; }
.hbgw-dontshow span { color: #5a85a0; font-size: 12px; }

/* Kill any old welcome-modal styling that may linger */
.welcome-modal { display: none !important; }

/* ════════════════════════════════════════
   HELP & GUIDE — background
   ════════════════════════════════════════ */
#helpScreen { background: var(--app-bg) !important; }

/* ════════════════════════════════════════
   LIGHT MODE LEGIBILITY GUARANTEE
   Force readable text on JS-rendered screens
   regardless of inline styles or old CSS
   ════════════════════════════════════════ */
body:not(.dark-mode) #standaloneCostCalculator,
body:not(.dark-mode) #standaloneCostCalculator *:not(button):not(.active):not(i) {
    color: #111827 !important;
}
body:not(.dark-mode) #standaloneCostCalculator p,
body:not(.dark-mode) #standaloneCostCalculator li,
body:not(.dark-mode) #standaloneCostCalculator small,
body:not(.dark-mode) #standaloneCostCalculator .hint {
    color: #4b5563 !important;
}
body:not(.dark-mode) #standaloneCostCalculator input::placeholder { color: #9ca3af !important; }

body.dark-mode #standaloneCostCalculator,
body.dark-mode #standaloneCostCalculator *:not(button):not(.active):not(i) {
    color: #e8f1f8 !important;
}
body.dark-mode #standaloneCostCalculator p,
body.dark-mode #standaloneCostCalculator li,
body.dark-mode #standaloneCostCalculator small {
    color: #8bbad4 !important;
}

/* Buttons inside calculator keep their own colours (after the blanket rule) */
#standaloneCostCalculator button.active,
#standaloneCostCalculator button.selected,
#standaloneCostCalculator .toggle-buttons button.active {
    color: #ffffff !important;
    background: var(--brand-green) !important;
}
#standaloneCostCalculator .calculate-btn,
#standaloneCostCalculator button[class*="calculate"] {
    color: #ffffff !important;
}

/* Same guarantee for Help screen */
body:not(.dark-mode) #helpScreen h1,
body:not(.dark-mode) #helpScreen h2:not(.help-header h2),
body:not(.dark-mode) #helpScreen h3,
body:not(.dark-mode) #helpScreen h4 {
    color: #111827 !important;
}
body:not(.dark-mode) #helpScreen p:not(.help-header p):not(.help-title p):not(.category-info p),
body:not(.dark-mode) #helpScreen li,
body:not(.dark-mode) #helpScreen span:not(.section-count) {
    color: #4b5563 !important;
}
body.dark-mode #helpScreen h1,
body.dark-mode #helpScreen h3,
body.dark-mode #helpScreen h4 {
    color: #e8f1f8 !important;
}
body.dark-mode #helpScreen p:not(.help-header p):not(.help-title p):not(.category-info p),
body.dark-mode #helpScreen li {
    color: #8bbad4 !important;
}
/* Quick-link labels keep primary text color (override span rule above) */
body:not(.dark-mode) #helpScreen .quick-link span,
body.dark-mode #helpScreen .quick-link span {
    color: var(--text-1) !important;
}
/* Article header (breadcrumb + title) stays white on the green header bar */
body:not(.dark-mode) #helpScreen .article-header-text h2,
body.dark-mode #helpScreen .article-header-text h2 {
    color: #ffffff !important;
}
body:not(.dark-mode) #helpScreen .article-breadcrumb,
body.dark-mode #helpScreen .article-breadcrumb {
    color: rgba(255, 255, 255, 0.65) !important;
}
/* Welcome banner heading keeps its brand-green accent */
body:not(.dark-mode) #helpScreen .banner-content h3,
body.dark-mode #helpScreen .banner-content h3 {
    color: var(--brand-green) !important;
}
/* Article prev/next nav keeps label vs title hierarchy */
body:not(.dark-mode) #helpScreen .article-nav-label,
body.dark-mode #helpScreen .article-nav-label {
    color: var(--text-3) !important;
}
body:not(.dark-mode) #helpScreen .article-nav-title,
body.dark-mode #helpScreen .article-nav-title {
    color: var(--text-1) !important;
}

/* Important Information panel in calculator */
#standaloneCostCalculator [class*="important"],
#standaloneCostCalculator [class*="info-panel"] {
    background: var(--surface-2) !important;
    border: 0.5px solid var(--border) !important;
    border-radius: 12px !important;
}

/* Result cost blocks */
#standaloneCostCalculator [class*="monthly"],
#standaloneCostCalculator [class*="once-off"],
#standaloneCostCalculator [class*="result"] {
    background: var(--surface) !important;
    border-color: var(--border) !important;
}

/* ════════════════════════════════════════
   SCORE BADGE — labelled, prominent
   ════════════════════════════════════════ */
.prop-score-badge {
    position: absolute; top: 10px; right: 10px;
    background: rgba(8, 18, 14, 0.82) !important;
    backdrop-filter: blur(4px);
    border: 1.5px solid #1d9e75 !important;
    border-radius: 12px !important;
    padding: 7px 12px !important;
    text-align: center;
    min-width: 92px !important;
}
.prop-score-badge.fair { border-color: #f1a008 !important; }
.prop-score-badge.poor { border-color: #ef4444 !important; }
.prop-score-badge .psb-label {
    display: block;
    font-size: 7px;
    font-weight: 600;
    letter-spacing: 0.09em;
    color: #7de8c3;
    text-transform: uppercase;
    margin-bottom: 3px;
    white-space: nowrap;
}
.prop-score-badge.fair .psb-label { color: #ffd28a; }
.prop-score-badge.poor .psb-label { color: #ffb3b3; }
.prop-score-badge .psb-value {
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: 2px;
}
.prop-score-badge .psb-num {
    font-size: 21px !important;
    font-weight: 700 !important;
    color: #ffffff !important;
    line-height: 1 !important;
}
.prop-score-badge .psb-out {
    font-size: 10px !important;
    color: rgba(255,255,255,0.65) !important;
    font-weight: 500;
}

/* ═══════════════════════════════════════════════════════════════
   v5 — ADD PROPERTY FLOW + CALCULATOR FULL REDESIGN
   ═══════════════════════════════════════════════════════════════ */

/* ════════════════════════════════════════
   ADD PROPERTY — type selection cards
   ════════════════════════════════════════ */
#addPropertyScreen .setup-section h3 {
    font-size: 0.95rem !important;
    font-weight: 600 !important;
    margin-bottom: 14px !important;
}

.property-type-grid {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 10px !important;
    margin: 0 !important;
}

.property-type-card {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 15px !important;
    background: var(--surface-2) !important;
    border: 1.5px solid var(--border) !important;
    border-radius: 14px !important;
    padding: 16px !important;
    cursor: pointer !important;
    text-align: left !important;
    transition: border-color 0.2s, background 0.2s !important;
    box-shadow: none !important;
    position: relative;
}
.property-type-card:hover { transform: none !important; }
.property-type-card .property-icon {
    width: 50px !important;
    height: 50px !important;
    min-width: 50px !important;
    border-radius: 13px !important;
    background: var(--icon-circle-bg) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin: 0 !important;
    box-shadow: none !important;
    border: none !important;
}
.property-type-card .property-icon i {
    font-size: 20px !important;
    color: var(--brand-green) !important;
}
.property-type-card h4 {
    color: var(--text-1) !important;
    font-size: 1rem !important;
    font-weight: 600 !important;
    margin: 0 0 2px 0 !important;
}
.property-type-card p {
    color: var(--text-2) !important;
    font-size: 0.78rem !important;
    margin: 0 !important;
    line-height: 1.35 !important;
}
.property-type-card.selected {
    border-color: var(--brand-green) !important;
    background: var(--brand-green-light) !important;
}
body.dark-mode .property-type-card.selected {
    background: rgba(29,158,117,0.12) !important;
}
.property-type-card.selected::after {
    content: '\f058';
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
    position: absolute;
    top: 12px; right: 14px;
    color: var(--brand-green);
    font-size: 18px;
}

/* Property type display pill on details screen */
.property-type-display {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    background: var(--icon-circle-bg) !important;
    color: var(--brand-green) !important;
    border: 0.5px solid var(--brand-green) !important;
    border-radius: 99px !important;
    padding: 8px 16px !important;
    font-size: 0.85rem !important;
    font-weight: 600 !important;
    margin: 14px 16px 6px !important;
    box-shadow: none !important;
}
.property-type-display i { color: var(--brand-green) !important; }

/* ════════════════════════════════════════
   PROPERTY DETAILS FORM — professional
   ════════════════════════════════════════ */
.property-details-form {
    background: var(--surface) !important;
    border-top: 0.5px solid var(--border) !important;
    border-bottom: 0.5px solid var(--border) !important;
    padding: 18px 16px !important;
    margin: 8px 0 0 0 !important;
    border-radius: 0 !important;
}

.form-group { margin-bottom: 16px !important; }

.form-label {
    display: block !important;
    font-size: 0.82rem !important;
    font-weight: 600 !important;
    color: var(--text-1) !important;
    margin-bottom: 7px !important;
    letter-spacing: 0.01em !important;
}

.form-input, .form-select, .form-textarea {
    width: 100% !important;
    background: var(--surface-2) !important;
    color: var(--text-1) !important;
    border: 1px solid var(--border) !important;
    border-radius: 11px !important;
    padding: 13px 14px !important;
    font-size: 0.92rem !important;
    font-family: 'Poppins', sans-serif !important;
    transition: border-color 0.2s, box-shadow 0.2s !important;
    box-shadow: none !important;
}
.form-input:focus, .form-select:focus, .form-textarea:focus {
    border-color: var(--brand-green) !important;
    box-shadow: 0 0 0 3px rgba(29,158,117,0.12) !important;
    outline: none !important;
}
.form-input::placeholder { color: var(--text-3) !important; }

.form-row {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 12px !important;
}
.form-row .form-group { margin-bottom: 16px !important; }

/* Save / submit buttons in form */
.property-details-form button[type="submit"],
.property-details-form .primary-button,
.save-property-btn {
    width: 100% !important;
    background: var(--brand-green) !important;
    color: #ffffff !important;
    border: none !important;
    border-radius: 12px !important;
    padding: 15px !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    font-family: 'Poppins', sans-serif !important;
    cursor: pointer !important;
    box-shadow: 0 3px 12px rgba(29,158,117,0.3) !important;
    margin-top: 6px !important;
}

/* ════════════════════════════════════════
   COST CALCULATOR — full redesign
   (real classes from calculator.css)
   ════════════════════════════════════════ */

/* Intro strip */
.calculator-description {
    background: var(--surface) !important;
    border: none !important;
    border-bottom: 0.5px solid var(--border) !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    padding: 14px 16px !important;
    margin: 0 0 8px 0 !important;
    text-align: left !important;
}
.calculator-description p {
    color: var(--text-2) !important;
    font-size: 0.85rem !important;
    opacity: 1 !important;
}

/* Main wrapper — flat, no gradient box */
#standaloneCostCalculator {
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    overflow: visible !important;
}

/* Input section */
#standaloneCostCalculator .cost-input-section {
    background: var(--surface) !important;
    border: none !important;
    border-top: 0.5px solid var(--border) !important;
    border-bottom: 0.5px solid var(--border) !important;
    border-radius: 0 !important;
    padding: 18px 16px !important;
    margin: 0 0 8px 0 !important;
}

.cost-form-grid {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 14px !important;
}

/* Collapsible cost sections */
#standaloneCostCalculator .cost-section-container,
.cost-section-container {
    background: var(--surface) !important;
    border: none !important;
    border-top: 0.5px solid var(--border) !important;
    border-bottom: 0.5px solid var(--border) !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    margin: 0 0 8px 0 !important;
    overflow: hidden !important;
}

.cost-section-header {
    padding: 15px 16px !important;
    background: var(--surface) !important;
    border-bottom: 0.5px solid var(--divider) !important;
}
.cost-section-header:hover { background: var(--surface-2) !important; }

.cost-section-title {
    color: var(--text-1) !important;
    font-size: 0.95rem !important;
    font-weight: 600 !important;
    gap: 10px !important;
}
.cost-section-title i {
    color: var(--brand-green) !important;
    width: 34px; height: 34px;
    background: var(--icon-circle-bg);
    border-radius: 9px;
    display: inline-flex !important;
    align-items: center; justify-content: center;
    font-size: 14px !important;
}
.cost-section-summary {
    background: var(--icon-circle-bg) !important;
    color: var(--brand-green) !important;
    font-size: 0.8rem !important;
    font-weight: 600 !important;
    padding: 5px 11px !important;
    border-radius: 99px !important;
}
.cost-section-toggle { color: var(--text-3) !important; font-size: 0.95rem !important; }

.cost-section-content.expanded { padding: 14px 16px !important; }
.cost-section-content.collapsed { padding: 0 16px !important; }

/* Breakdown rows — clean dividers, no boxes */
.cost-breakdown-grid { gap: 0 !important; }
.cost-breakdown-item {
    background: transparent !important;
    border: none !important;
    border-bottom: 0.5px solid var(--divider) !important;
    border-radius: 0 !important;
    padding: 12px 2px !important;
    transition: none !important;
}
.cost-breakdown-item:hover { background: transparent !important; transform: none !important; }
.cost-breakdown-item:last-child { border-bottom: none !important; }
.cost-item-label { color: var(--text-2) !important; font-size: 0.88rem !important; font-weight: 500 !important; }
.cost-item-amount { color: var(--text-1) !important; font-size: 0.95rem !important; font-weight: 600 !important; }

/* Sub-sections */
.cost-subsection { border-bottom: 0.5px solid var(--divider) !important; }
.cost-subsection-header {
    background: transparent !important;
    border-left: none !important;
    border-radius: 0 !important;
    padding: 10px 2px !important;
}
.subsection-title { color: var(--brand-green) !important; font-size: 0.85rem !important; }
.subsection-total { color: var(--brand-green) !important; font-size: 0.95rem !important; }
.cost-breakdown-item.sub-item {
    background: transparent !important;
    border: none !important;
    border-bottom: 0.5px solid var(--divider) !important;
    margin-left: 12px !important;
    padding: 11px 2px !important;
}
.cost-breakdown-item.sub-item:hover { transform: none !important; background: transparent !important; }

/* Section total row */
.cost-breakdown-total {
    background: transparent !important;
    border: none !important;
    border-top: 1.5px solid var(--brand-green) !important;
    border-radius: 0 !important;
    padding: 14px 2px !important;
    margin-top: 4px !important;
}
.cost-total-label { color: var(--text-1) !important; font-size: 0.95rem !important; }
.cost-total-amount { color: var(--brand-green) !important; font-size: 1.2rem !important; font-weight: 700 !important; }

/* ── Summary — modern stat cards ── */
#standaloneCostCalculator .cost-summary-container,
.cost-summary-container {
    background: var(--surface) !important;
    border: none !important;
    border-top: 0.5px solid var(--border) !important;
    border-bottom: 0.5px solid var(--border) !important;
    border-radius: 0 !important;
    padding: 18px 16px !important;
    margin: 0 0 8px 0 !important;
}

.cost-summary-grid {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 10px !important;
}

.cost-summary-item {
    background: var(--surface-2) !important;
    border: 0.5px solid var(--border) !important;
    border-radius: 14px !important;
    padding: 16px 12px !important;
    text-align: center !important;
    transition: none !important;
    position: relative;
    overflow: hidden;
}
.cost-summary-item:hover { transform: none !important; box-shadow: none !important; }
.cost-summary-item.monthly { border-left: none !important; }
.cost-summary-item.once-off { border-left: none !important; }
.cost-summary-item.monthly::before,
.cost-summary-item.once-off::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
}
.cost-summary-item.monthly::before { background: var(--brand-green); }
.cost-summary-item.once-off::before { background: #f1a008; }

.cost-summary-label {
    color: var(--text-2) !important;
    font-size: 0.68rem !important;
    font-weight: 600 !important;
    letter-spacing: 0.07em !important;
    opacity: 1 !important;
    margin-bottom: 6px !important;
}
.cost-summary-amount {
    font-size: 1.45rem !important;
    font-weight: 700 !important;
}
.cost-summary-item.monthly .cost-summary-amount { color: var(--brand-green) !important; }
.cost-summary-item.once-off .cost-summary-amount { color: #f1a008 !important; }

/* Info buttons */
.cost-info-btn {
    background: var(--icon-circle-bg) !important;
    color: var(--brand-green) !important;
    border: none !important;
    box-shadow: none !important;
}
.cost-info-btn:hover { transform: none !important; box-shadow: none !important; }

/* Disclaimer / important information */
#standaloneCostCalculator .financial-disclaimer,
.financial-disclaimer {
    background: var(--surface-2) !important;
    border: 0.5px solid var(--border) !important;
    border-radius: 14px !important;
    padding: 16px !important;
    margin: 0 16px max(120px, env(safe-area-inset-bottom, 0px) + 90px) 16px !important;
}
#standaloneCostCalculator .disclaimer-box h4,
.disclaimer-box h4 {
    color: var(--text-1) !important;
    font-size: 0.92rem !important;
}
#standaloneCostCalculator .disclaimer-box h4 i,
.disclaimer-box h4 i { color: var(--brand-green) !important; }
#standaloneCostCalculator .disclaimer-box li,
.disclaimer-box li {
    color: var(--text-2) !important;
    font-size: 0.8rem !important;
}
#standaloneCostCalculator .disclaimer-box li::before,
.disclaimer-box li::before { color: var(--brand-green) !important; }

/* Financial overview (property detail) */
.financial-overview {
    background: var(--surface-2) !important;
    border: 0.5px solid var(--border) !important;
    border-radius: 12px !important;
}
.financial-item label { color: var(--text-1) !important; }
.financial-item .value { color: var(--text-1) !important; }
.financial-item .price-highlight { color: var(--brand-green) !important; }

/* ═══════════════════════════════════════════════════════════════
   v6 — DISCLAIMER FIX, VIEW & EDIT BUTTON, PROPERTY OVERVIEW
   ═══════════════════════════════════════════════════════════════ */

/* ════════════════════════════════════════
   IMPORTANT INFORMATION — remove stray
   green line, clean bullet alignment
   ════════════════════════════════════════ */
.financial-disclaimer,
#standaloneCostCalculator .financial-disclaimer {
    border-left: 0.5px solid var(--border) !important;
    position: relative !important;
}
.disclaimer-box,
#standaloneCostCalculator .disclaimer-box {
    border: none !important;
    border-left: none !important;
    border-radius: 0 !important;
    background: transparent !important;
    padding: 0 !important;
    margin: 0 !important;
    box-shadow: none !important;
}
.disclaimer-box::before,
.disclaimer-box::after,
.financial-disclaimer::before,
.financial-disclaimer::after {
    display: none !important;
    content: none !important;
}
.disclaimer-box h4,
#standaloneCostCalculator .disclaimer-box h4 {
    border: none !important;
    padding: 0 0 10px 0 !important;
    margin: 0 0 4px 0 !important;
    border-bottom: 0.5px solid var(--divider) !important;
}
.disclaimer-box ul,
#standaloneCostCalculator .disclaimer-box ul {
    border: none !important;
    padding: 8px 0 0 0 !important;
    margin: 0 !important;
}
.disclaimer-box li,
#standaloneCostCalculator .disclaimer-box li {
    border: none !important;
    padding-left: 18px !important;
    margin-bottom: 10px !important;
    line-height: 1.5 !important;
    position: relative !important;
}
.disclaimer-box li::before,
#standaloneCostCalculator .disclaimer-box li::before {
    content: '•' !important;
    color: var(--brand-green) !important;
    position: absolute !important;
    left: 2px !important;
    top: 0 !important;
    font-weight: bold !important;
}

/* ════════════════════════════════════════
   VIEW & EDIT button — labeled width
   ════════════════════════════════════════ */
.prop-action-btn.edit.labeled {
    max-width: none !important;
    flex: 1 !important;
}
.prop-card-actions { flex-wrap: wrap !important; }
.prop-card-actions .prop-action-btn { min-width: 96px; }
.prop-card-actions .prop-action-btn.del { min-width: 44px; flex: 0 0 44px !important; }

/* ════════════════════════════════════════
   PROPERTY OVERVIEW SCREEN — full redesign
   ════════════════════════════════════════ */

/* Gallery — full bleed at top */
.property-gallery-section {
    margin: 0 !important;
    border-radius: 0 !important;
    overflow: hidden !important;
    background: var(--photo-bg) !important;
}
.property-gallery-section img {
    width: 100% !important;
    border-radius: 0 !important;
}

/* Hero overview — flat surface, no gradient */
.simple-property-overview {
    background: var(--surface) !important;
    background-image: none !important;
    border: none !important;
    border-bottom: 0.5px solid var(--border) !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    padding: 16px !important;
    margin: 0 0 8px 0 !important;
}

.property-price {
    color: var(--brand-green) !important;
    font-size: 1.6rem !important;
    font-weight: 700 !important;
    text-shadow: none !important;
    margin-bottom: 4px !important;
}

.property-main-row {
    display: block !important;
}

.property-type-line {
    color: var(--text-1) !important;
    font-size: 1.02rem !important;
    font-weight: 600 !important;
    margin-bottom: 3px !important;
}

.property-address-line {
    color: var(--text-2) !important;
    font-size: 0.85rem !important;
    margin-bottom: 12px !important;
}

/* Spec chips — clean, consistent */
.property-specs-row {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
    margin-bottom: 14px !important;
}
.spec-item {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    background: var(--surface-2) !important;
    border: 0.5px solid var(--border) !important;
    border-radius: 9px !important;
    padding: 7px 11px !important;
    font-size: 0.82rem !important;
    color: var(--text-1) !important;
    font-weight: 500 !important;
}
.spec-item i {
    color: var(--brand-green) !important;
    font-size: 0.85rem !important;
}

/* Sale link area — clean inline block */
.property-sale-link-area {
    background: var(--surface-2) !important;
    border: 0.5px solid var(--border) !important;
    border-radius: 12px !important;
    padding: 12px 14px !important;
    margin-top: 4px !important;
    box-shadow: none !important;
}
.sale-link-header {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    margin-bottom: 8px !important;
}
.sale-link-header h4 {
    color: var(--text-1) !important;
    font-size: 0.88rem !important;
    font-weight: 600 !important;
    margin: 0 !important;
}
.edit-link-btn {
    width: 30px !important;
    height: 30px !important;
    border-radius: 8px !important;
    background: var(--icon-circle-bg) !important;
    color: var(--brand-green) !important;
    border: none !important;
    font-size: 12px !important;
}
.property-sale-link {
    display: inline-flex !important;
    align-items: center !important;
    gap: 7px !important;
    color: var(--brand-green) !important;
    font-size: 0.85rem !important;
    font-weight: 600 !important;
    text-decoration: none !important;
}
.no-sale-link {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 7px !important;
    border: 1.5px dashed var(--border) !important;
    border-radius: 9px !important;
    padding: 10px !important;
    color: var(--text-2) !important;
    font-size: 0.82rem !important;
    cursor: pointer !important;
    background: transparent !important;
}
.no-sale-link:hover { border-color: var(--brand-green) !important; color: var(--brand-green) !important; }

/* Collapsible sections — refined */
.detail-section-container {
    background: var(--surface) !important;
    border: none !important;
    border-top: 0.5px solid var(--border) !important;
    border-bottom: 0.5px solid var(--border) !important;
    border-radius: 0 !important;
    margin: 0 0 8px 0 !important;
    box-shadow: none !important;
    overflow: hidden !important;
}
.detail-section-header {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 16px !important;
    cursor: pointer !important;
    background: var(--surface) !important;
    border: none !important;
}
.detail-section-header:hover { background: var(--surface-2) !important; }
.detail-section-header .section-title {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    flex: 1 !important;
}
.detail-section-header .section-title i {
    width: 38px !important;
    height: 38px !important;
    min-width: 38px !important;
    background: var(--icon-circle-bg) !important;
    color: var(--brand-green) !important;
    border-radius: 10px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 15px !important;
}
.detail-section-header .section-title h3 {
    color: var(--text-1) !important;
    font-size: 0.98rem !important;
    font-weight: 600 !important;
    margin: 0 !important;
    line-height: 1.3 !important;
}
.section-status {
    background: var(--icon-circle-bg) !important;
    color: var(--brand-green) !important;
    font-size: 0.72rem !important;
    font-weight: 600 !important;
    padding: 4px 10px !important;
    border-radius: 99px !important;
    margin-left: 8px !important;
}
.section-toggle {
    color: var(--text-3) !important;
    font-size: 0.9rem !important;
    transition: transform 0.25s !important;
}
.section-toggle.collapsed { transform: rotate(-90deg) !important; }
.detail-section-content {
    background: var(--surface) !important;
    border-top: 0.5px solid var(--divider) !important;
}
.detail-section-content.expanded { padding: 16px !important; }
.detail-section-content.collapsed { padding: 0 16px !important; max-height: 0 !important; overflow: hidden !important; border-top: none !important; }

/* Property details readonly rows */
.property-details-line,
.property-details-readonly p {
    display: flex !important;
    justify-content: space-between !important;
    padding: 11px 0 !important;
    border-bottom: 0.5px solid var(--divider) !important;
    color: var(--text-2) !important;
    font-size: 0.88rem !important;
    margin: 0 !important;
}
.property-details-line:last-child { border-bottom: none !important; }
.property-details-line strong,
.property-details-readonly strong { color: var(--text-1) !important; font-weight: 600 !important; }

/* Photo gallery in detail view */
.detail-section-content h4 {
    color: var(--text-1) !important;
    font-size: 0.95rem !important;
}
.photo-gallery, .room-photo-group {
    background: var(--surface-2) !important;
    border: 0.5px solid var(--border) !important;
    border-radius: 12px !important;
    padding: 12px !important;
    margin-bottom: 10px !important;
}
.room-photo-group h5, .room-photo-group .room-name {
    color: var(--text-1) !important;
    font-size: 0.88rem !important;
}
.photo-thumbnail, .gallery-thumb {
    border-radius: 9px !important;
    border: 0.5px solid var(--border) !important;
}

/* Action buttons — stacked clean */
.detail-actions {
    display: flex !important;
    flex-direction: column !important;
    gap: 9px !important;
    padding: 14px 16px max(110px, env(safe-area-inset-bottom, 0px) + 90px) !important;
    background: transparent !important;
}
.detail-actions .detail-actions { padding: 0 !important; }
.action-btn {
    width: 100% !important;
    border: none !important;
    border-radius: 12px !important;
    padding: 14px !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    font-family: 'Poppins', sans-serif !important;
    cursor: pointer !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    box-shadow: none !important;
}
.action-btn.primary {
    background: var(--brand-green) !important;
    background-image: none !important;
    color: #ffffff !important;
    box-shadow: 0 3px 12px rgba(29,158,117,0.3) !important;
}
.action-btn.secondary {
    background: var(--btn-view-bg) !important;
    background-image: none !important;
    color: var(--btn-view-text) !important;
}

/* ═══════════════════════════════════════════════════════════════
   v7 — FINAL STANDARDIZATION PASS
   Equal buttons, feature accordions, gallery, global consistency
   ═══════════════════════════════════════════════════════════════ */

/* ════════════════════════════════════════
   PROPERTY CARD BUTTONS — STANDARDIZED
   Equal height, no wrapping, consistent size
   ════════════════════════════════════════ */
.prop-card-actions {
    display: flex !important;
    flex-wrap: nowrap !important;
    gap: 6px !important;
    padding: 8px 16px 14px !important;
}
.prop-card-actions .prop-action-btn {
    flex: 1 1 0 !important;
    min-width: 0 !important;
    max-width: none !important;
    height: 42px !important;
    padding: 0 6px !important;
    font-size: 11.5px !important;
    font-weight: 600 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    border-radius: 9px !important;
    line-height: 1 !important;
}
.prop-card-actions .prop-action-btn i {
    font-size: 12px !important;
    flex-shrink: 0 !important;
}
.prop-card-actions .prop-action-btn.del {
    flex: 0 0 44px !important;
    min-width: 44px !important;
}
.prop-card-actions .prop-action-btn.edit.labeled {
    flex: 1 1 0 !important;
}

/* ════════════════════════════════════════
   FEATURE ACCORDIONS (Property Details)
   External / Internal / Other Features
   ════════════════════════════════════════ */
.property-details-readonly { padding: 0 !important; }

.feature-section-readonly {
    background: transparent !important;
    border: none !important;
    border-bottom: 0.5px solid var(--divider) !important;
    border-radius: 0 !important;
    margin: 0 !important;
    box-shadow: none !important;
    overflow: hidden !important;
}
.feature-section-readonly:last-child { border-bottom: none !important; }

.feature-header-readonly {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 14px 2px !important;
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    cursor: pointer !important;
    box-shadow: none !important;
}
.feature-header-readonly:hover { background: transparent !important; }

.feature-title {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
}
.feature-title i {
    width: 32px !important;
    height: 32px !important;
    min-width: 32px !important;
    background: var(--icon-circle-bg) !important;
    color: var(--brand-green) !important;
    border-radius: 9px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 13px !important;
}
.feature-title span {
    color: var(--text-1) !important;
    font-size: 0.92rem !important;
    font-weight: 600 !important;
}
.feature-title .feature-count {
    background: var(--icon-circle-bg) !important;
    color: var(--brand-green) !important;
    font-size: 0.72rem !important;
    font-weight: 600 !important;
    padding: 3px 9px !important;
    border-radius: 99px !important;
    margin-left: 2px !important;
}

.feature-toggle, .feature-toggle i {
    color: var(--text-3) !important;
    font-size: 0.85rem !important;
    transition: transform 0.25s !important;
}
.feature-header-readonly.collapsed .feature-toggle { transform: rotate(-90deg) !important; }

.feature-content-readonly {
    background: transparent !important;
    border: none !important;
    padding: 0 0 6px 0 !important;
}
.feature-content-readonly.collapsed {
    max-height: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
}

.features-list-readonly {
    display: block !important;
    gap: 0 !important;
    padding: 0 0 0 42px !important;
}
.feature-item-readonly {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    background: transparent !important;
    border: none !important;
    border-bottom: 0.5px solid var(--divider) !important;
    border-radius: 0 !important;
    padding: 11px 2px !important;
    margin: 0 !important;
    box-shadow: none !important;
}
.feature-item-readonly:last-child { border-bottom: none !important; }
.feature-item-readonly .feature-name {
    color: var(--text-2) !important;
    font-size: 0.88rem !important;
    font-weight: 500 !important;
}
.feature-item-readonly .feature-quantity {
    min-width: 26px !important;
    height: 26px !important;
    background: var(--icon-circle-bg) !important;
    color: var(--brand-green) !important;
    border: none !important;
    border-radius: 8px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 0.8rem !important;
    font-weight: 600 !important;
    padding: 0 8px !important;
}
.no-features-message {
    color: var(--text-3) !important;
    font-size: 0.82rem !important;
    padding: 4px 0 10px 42px !important;
    font-style: normal !important;
}

/* ════════════════════════════════════════
   PROPERTY GALLERY — clean and modern
   ════════════════════════════════════════ */
.property-gallery {
    background: var(--photo-bg) !important;
    border: none !important;
    border-radius: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    box-shadow: none !important;
}
.gallery-main-image {
    position: relative !important;
    height: 230px !important;
    overflow: hidden !important;
    border-radius: 0 !important;
}
.gallery-main-image .main-image {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    border-radius: 0 !important;
}
.gallery-controls button,
.gallery-prev, .gallery-next {
    width: 36px !important;
    height: 36px !important;
    border-radius: 50% !important;
    background: rgba(0,0,0,0.45) !important;
    color: #ffffff !important;
    border: none !important;
    font-size: 13px !important;
    backdrop-filter: blur(2px);
}
.photo-counter {
    background: rgba(0,0,0,0.55) !important;
    color: #ffffff !important;
    font-size: 0.72rem !important;
    font-weight: 600 !important;
    padding: 4px 10px !important;
    border-radius: 99px !important;
    backdrop-filter: blur(2px);
}
.gallery-thumbnails {
    display: flex !important;
    gap: 8px !important;
    padding: 10px 12px 12px !important;
    overflow-x: auto !important;
    background: var(--photo-bg) !important;
    justify-content: flex-start !important;
}
.gallery-thumbnail {
    width: 64px !important;
    height: 52px !important;
    min-width: 64px !important;
    border-radius: 8px !important;
    overflow: hidden !important;
    border: 2px solid transparent !important;
    position: relative !important;
    cursor: pointer !important;
    background: rgba(255,255,255,0.06) !important;
}
.gallery-thumbnail.active { border-color: var(--brand-green) !important; }
.gallery-thumbnail img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
}
.thumbnail-label {
    position: absolute !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    background: rgba(0,0,0,0.65) !important;
    color: #ffffff !important;
    font-size: 0.55rem !important;
    padding: 2px 4px !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    text-align: center !important;
}

/* No photos placeholder */
.no-photos-gallery {
    background: var(--photo-bg) !important;
    border: none !important;
    border-radius: 0 !important;
    margin: 0 !important;
    padding: 32px 16px !important;
}
.no-photos-placeholder { text-align: center !important; }
.no-photos-placeholder i { font-size: 34px !important; color: rgba(255,255,255,0.25) !important; }
.no-photos-placeholder h3 { color: #e8f1f8 !important; font-size: 1rem !important; margin: 10px 0 4px !important; }
.no-photos-placeholder p { color: rgba(255,255,255,0.45) !important; font-size: 0.82rem !important; margin-bottom: 14px !important; }

/* ════════════════════════════════════════
   GLOBAL STANDARDIZATION
   ════════════════════════════════════════ */

/* All chevrons / toggles — one consistent colour (kill old gold) */
.section-toggle, .section-toggle i,
.feature-toggle, .feature-toggle i,
.category-arrow, .category-arrow i,
.cost-section-toggle, .cost-section-toggle i,
.setting-arrow, .setting-arrow i {
    color: var(--text-3) !important;
}

/* Standard heading scale across all screens */
.screen-header h2 { font-size: 1.15rem !important; font-weight: 600 !important; }
.detail-section-header .section-title h3,
.cost-section-title,
.category-header .category-name,
.questions-header h4 { font-size: 0.98rem !important; font-weight: 600 !important; }

/* Standard count/status pills everywhere */
.section-status, .cost-section-summary, .feature-count, .section-count {
    background: var(--icon-circle-bg) !important;
    color: var(--brand-green) !important;
    font-size: 0.72rem !important;
    font-weight: 600 !important;
    border-radius: 99px !important;
}

/* Standard icon tiles everywhere */
.detail-section-header .section-title i,
.cost-section-title i,
.category-icon {
    background: var(--icon-circle-bg) !important;
    color: var(--brand-green) !important;
}

/* Consistent focus rings on ALL inputs app-wide */
input:focus, select:focus, textarea:focus {
    border-color: var(--brand-green) !important;
    box-shadow: 0 0 0 3px rgba(29,158,117,0.12) !important;
    outline: none !important;
}

/* Consistent scroll behaviour */
.screen { -webkit-overflow-scrolling: touch; }

/* ═══════════════════════════════════════════════════════════════
   v8 — ASSESSMENT RESULTS (screen + overview section) AND
   FULL REPORT — complete professional redesign
   ═══════════════════════════════════════════════════════════════ */

/* ════════════════════════════════════════
   RESULTS VIEW — shared by Results screen
   and the overview expanded section
   ════════════════════════════════════════ */
.assessment-results-improved {
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    padding: 0 !important;
    box-shadow: none !important;
}
.assessment-results-improved > h3 {
    color: var(--text-1) !important;
    font-size: 1.05rem !important;
    font-weight: 600 !important;
    margin: 0 0 2px 0 !important;
}
.assessment-date {
    color: var(--text-3) !important;
    font-size: 0.75rem !important;
    margin-bottom: 16px !important;
}

/* Score hero */
.score-display-main {
    background: var(--surface-2) !important;
    border: 0.5px solid var(--border) !important;
    border-radius: 16px !important;
    padding: 22px 16px !important;
    margin: 0 0 14px 0 !important;
    text-align: center !important;
    display: block !important;
}
.score-number-section {
    display: flex !important;
    align-items: baseline !important;
    justify-content: center !important;
    gap: 4px !important;
    margin-bottom: 12px !important;
}
.score-number-large {
    font-size: 3rem !important;
    font-weight: 700 !important;
    line-height: 1 !important;
    text-shadow: none !important;
}
.score-out-of {
    color: var(--text-3) !important;
    font-size: 1rem !important;
    font-weight: 500 !important;
}
.score-grade-section { display: block !important; }
.score-grade-badge {
    display: inline-block !important;
    background-image: none !important;
    border-radius: 99px !important;
    padding: 7px 22px !important;
    font-size: 0.85rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.06em !important;
    text-align: center !important;
    margin-bottom: 12px !important;
    box-shadow: none !important;
    text-shadow: none !important;
}
.score-description, .score-grade-section > div:not(.score-grade-badge) {
    color: var(--text-2) !important;
    font-size: 0.85rem !important;
    line-height: 1.55 !important;
    text-align: center !important;
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
}

/* Condition progress */
.progress-section {
    background: var(--surface-2) !important;
    border: 0.5px solid var(--border) !important;
    border-radius: 14px !important;
    padding: 14px 16px !important;
    margin: 0 0 14px 0 !important;
}
.progress-label {
    display: flex !important;
    justify-content: space-between !important;
    margin-bottom: 8px !important;
}
.progress-label span {
    color: var(--text-1) !important;
    font-size: 0.85rem !important;
    font-weight: 600 !important;
}
.progress-label span:last-child { color: var(--brand-green) !important; }
.progress-bar-container {
    height: 7px !important;
    border-radius: 99px !important;
    background: var(--prog-bg) !important;
    overflow: hidden !important;
    margin-bottom: 7px !important;
}
.progress-bar-fill {
    height: 100% !important;
    border-radius: 99px !important;
    background: linear-gradient(90deg, #e63946, #f1a008, #28a745, #1d9e75) !important;
    background-size: 400px 100% !important;
}
.progress-markers {
    display: flex !important;
    justify-content: space-between !important;
}
.progress-markers span {
    color: var(--text-3) !important;
    font-size: 0.68rem !important;
}

/* Key insights */
.key-insights {
    background: var(--surface-2) !important;
    border: 0.5px solid var(--border) !important;
    border-left: 3px solid var(--brand-green) !important;
    border-radius: 14px !important;
    padding: 14px 16px !important;
    margin: 0 0 14px 0 !important;
}
.key-insights h4 {
    color: var(--text-1) !important;
    font-size: 0.92rem !important;
    font-weight: 600 !important;
    margin: 0 0 10px 0 !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
}
.key-insights h4 i { color: var(--brand-green) !important; }
.insights-grid { display: block !important; }
.insight-item {
    display: flex !important;
    align-items: flex-start !important;
    gap: 10px !important;
    padding: 8px 0 !important;
    border-bottom: 0.5px solid var(--divider) !important;
    background: transparent !important;
}
.insight-item:last-child { border-bottom: none !important; }
.insight-item span {
    color: var(--text-2) !important;
    font-size: 0.83rem !important;
    line-height: 1.5 !important;
}
.insight-icon {
    width: 26px !important;
    height: 26px !important;
    min-width: 26px !important;
    border-radius: 8px !important;
    background: var(--icon-circle-bg) !important;
    color: var(--brand-green) !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 11px !important;
    margin-top: 1px !important;
}

/* Budget + negotiation cards */
.budget-considerations, .price-impact {
    background: var(--surface-2) !important;
    border: 0.5px solid var(--border) !important;
    border-radius: 14px !important;
    padding: 14px 16px !important;
    margin: 0 0 14px 0 !important;
    background-image: none !important;
}
.budget-considerations h4, .price-impact h4 {
    color: var(--text-1) !important;
    font-size: 0.92rem !important;
    font-weight: 600 !important;
    margin: 0 0 8px 0 !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
}
.budget-considerations h4 i, .price-impact h4 i { color: var(--brand-green) !important; }
.budget-text, .price-text {
    color: var(--text-2) !important;
    font-size: 0.83rem !important;
    line-height: 1.55 !important;
}
.negotiation-power {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    margin-top: 12px !important;
    padding-top: 10px !important;
    border-top: 0.5px solid var(--divider) !important;
}
.negotiation-power > span:first-child {
    color: var(--text-1) !important;
    font-size: 0.83rem !important;
    font-weight: 600 !important;
}
.power-indicator {
    border-radius: 99px !important;
    padding: 5px 14px !important;
    font-size: 0.78rem !important;
    font-weight: 700 !important;
}

/* Full Report button */
.assessment-results-improved .btn.btn-primary,
.assessment-results-improved .btn-primary {
    width: 100% !important;
    background: var(--brand-green) !important;
    background-image: none !important;
    color: #ffffff !important;
    border: none !important;
    border-radius: 12px !important;
    padding: 14px !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    font-family: 'Poppins', sans-serif !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    box-shadow: 0 3px 12px rgba(29,158,117,0.3) !important;
    cursor: pointer !important;
}

/* Results SCREEN container — full-bleed surface */
#assessmentResultsScreen .assessment-results-improved {
    background: var(--surface) !important;
    border-top: 0.5px solid var(--border) !important;
    border-bottom: 0.5px solid var(--border) !important;
    padding: 16px !important;
    margin: 0 0 8px 0 !important;
}

/* ════════════════════════════════════════
   FULL REPORT — professional redesign
   ════════════════════════════════════════ */
.assessment-report {
    background: transparent !important;
    padding: 0 !important;
}

/* Export */
.assessment-top-actions {
    padding: 12px 16px !important;
    background: transparent !important;
}
.assessment-pdf-btn {
    width: 100% !important;
    background: var(--brand-green) !important;
    color: #fff !important;
    border: none !important;
    border-radius: 12px !important;
    padding: 13px !important;
    font-size: 13.5px !important;
    font-weight: 600 !important;
    font-family: 'Poppins', sans-serif !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    box-shadow: 0 3px 12px rgba(29,158,117,0.3) !important;
}

/* Report header */
.report-header {
    background: var(--surface) !important;
    background-image: none !important;
    border: none !important;
    border-top: 0.5px solid var(--border) !important;
    border-bottom: 0.5px solid var(--border) !important;
    border-radius: 0 !important;
    padding: 18px 16px !important;
    margin: 0 0 8px 0 !important;
    box-shadow: none !important;
}
.report-title-section h1 {
    color: var(--text-1) !important;
    font-size: 1.15rem !important;
    font-weight: 700 !important;
    margin: 0 0 10px 0 !important;
    text-shadow: none !important;
}
.report-property-info h2 {
    color: var(--text-1) !important;
    font-size: 1rem !important;
    font-weight: 600 !important;
    margin: 0 0 2px 0 !important;
}
.report-property-info p {
    color: var(--text-2) !important;
    font-size: 0.85rem !important;
    margin: 0 0 8px 0 !important;
}
.report-header .property-details-line {
    background: var(--surface-2) !important;
    border: 0.5px solid var(--border) !important;
    border-bottom: 0.5px solid var(--border) !important;
    border-radius: 9px !important;
    padding: 8px 12px !important;
    color: var(--text-2) !important;
    font-size: 0.8rem !important;
    display: inline-block !important;
    margin-bottom: 10px !important;
}
.report-date {
    color: var(--text-3) !important;
    font-size: 0.72rem !important;
    text-align: right !important;
    line-height: 1.6 !important;
}

/* Score circle section */
.report-score-section {
    background: var(--surface) !important;
    background-image: none !important;
    border: none !important;
    border-top: 0.5px solid var(--border) !important;
    border-bottom: 0.5px solid var(--border) !important;
    border-radius: 0 !important;
    padding: 24px 16px !important;
    margin: 0 0 8px 0 !important;
}
.score-summary-large {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 14px !important;
    text-align: center !important;
}
.score-circle-large {
    width: 110px !important;
    height: 110px !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border: none !important;
    position: relative !important;
}
.score-circle-large::before {
    content: '';
    position: absolute;
    inset: 7px;
    border-radius: 50%;
    background: var(--surface);
}
.score-circle-large .score-number-large {
    position: relative !important;
    z-index: 1 !important;
    font-size: 1.7rem !important;
    font-weight: 700 !important;
    color: var(--text-1) !important;
}
.score-info-large h3 {
    color: var(--text-1) !important;
    font-size: 1.02rem !important;
    font-weight: 600 !important;
    margin: 0 0 4px 0 !important;
}
.score-grade-large {
    font-size: 1.15rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.08em !important;
    margin-bottom: 8px !important;
}
.assessment-type-badge {
    display: inline-block !important;
    background: var(--icon-circle-bg) !important;
    color: var(--brand-green) !important;
    border: none !important;
    border-radius: 99px !important;
    padding: 6px 16px !important;
    font-size: 0.72rem !important;
    font-weight: 600 !important;
    letter-spacing: 0.06em !important;
    text-transform: uppercase !important;
}

/* Summary + guidance blocks */
.assessment-summary {
    background: var(--surface) !important;
    border: none !important;
    border-top: 0.5px solid var(--border) !important;
    border-bottom: 0.5px solid var(--border) !important;
    border-radius: 0 !important;
    padding: 16px !important;
    margin: 0 0 8px 0 !important;
}
.score-grade-highlight {
    border-radius: 12px !important;
    padding: 14px 16px !important;
    margin-bottom: 12px !important;
}
.score-grade-highlight h3 { font-size: 1.15rem !important; margin: 0 0 2px 0 !important; }
.score-grade-highlight .score-percentage { font-size: 0.95rem !important; }
.summary-description {
    color: var(--text-2) !important;
    font-size: 0.86rem !important;
    line-height: 1.6 !important;
    margin-bottom: 12px !important;
}
.guidance-block {
    background: var(--surface-2) !important;
    border: 0.5px solid var(--border) !important;
    border-radius: 12px !important;
    padding: 13px 14px !important;
    margin-bottom: 10px !important;
    color: var(--text-2) !important;
}
.guidance-block h4 {
    color: var(--text-1) !important;
    font-size: 0.88rem !important;
    font-weight: 600 !important;
    margin: 0 0 6px 0 !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
}
.guidance-block h4 i { color: var(--brand-green) !important; }
.guidance-block p {
    color: var(--text-2) !important;
    font-size: 0.82rem !important;
    line-height: 1.55 !important;
    margin: 0 !important;
}
.guidance-block.budget-highlight { border-left: 3px solid var(--brand-green) !important; }
.immediate-actions {
    background: var(--surface-2) !important;
    border: 0.5px solid var(--border) !important;
    border-left: 3px solid #f1a008 !important;
    border-radius: 12px !important;
    padding: 13px 14px !important;
    margin-bottom: 10px !important;
}
.immediate-actions h4 {
    color: var(--text-1) !important;
    font-size: 0.88rem !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    margin: 0 0 8px 0 !important;
}
.immediate-actions h4 i { color: #f1a008 !important; }
.immediate-actions ul { margin: 0 !important; padding-left: 18px !important; }
.immediate-actions li {
    color: var(--text-2) !important;
    font-size: 0.82rem !important;
    line-height: 1.55 !important;
    margin-bottom: 6px !important;
}

/* Room-by-room details */
.assessment-details-enhanced {
    background: var(--surface) !important;
    border: none !important;
    border-top: 0.5px solid var(--border) !important;
    border-bottom: 0.5px solid var(--border) !important;
    border-radius: 0 !important;
    padding: 16px !important;
    margin: 0 0 8px 0 !important;
}
.details-main-title {
    color: var(--text-1) !important;
    font-size: 1.05rem !important;
    font-weight: 700 !important;
    margin: 0 0 8px 0 !important;
    background: transparent !important;
    padding: 0 !important;
    border-radius: 0 !important;
}
.details-introduction p {
    color: var(--text-2) !important;
    font-size: 0.82rem !important;
    line-height: 1.55 !important;
    margin-bottom: 14px !important;
}

.assessment-section-enhanced {
    margin-bottom: 16px !important;
    background: transparent !important;
    border: none !important;
}
.section-header-enhanced {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 10px 0 !important;
    border-bottom: 1.5px solid var(--border) !important;
    margin-bottom: 10px !important;
    background: transparent !important;
}
.section-title-enhanced {
    font-size: 0.98rem !important;
    font-weight: 700 !important;
    display: flex !important;
    align-items: center !important;
    gap: 9px !important;
    margin: 0 !important;
}
.section-title-enhanced i { font-size: 0.95rem !important; }
.section-summary {
    background: var(--surface-2) !important;
    border: 0.5px solid var(--border) !important;
    color: var(--text-2) !important;
    font-size: 0.7rem !important;
    font-weight: 600 !important;
    border-radius: 99px !important;
    padding: 4px 10px !important;
    white-space: nowrap !important;
}

.room-assessment-enhanced {
    background: var(--surface-2) !important;
    border: 0.5px solid var(--border) !important;
    border-radius: 13px !important;
    padding: 13px 14px !important;
    margin-bottom: 10px !important;
}
.room-header-enhanced {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    margin-bottom: 6px !important;
    background: transparent !important;
    padding: 0 !important;
}
.room-title-enhanced {
    color: var(--text-1) !important;
    font-size: 0.92rem !important;
    font-weight: 600 !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    margin: 0 !important;
}
.room-title-enhanced i { color: var(--brand-green) !important; font-size: 0.85rem !important; }
.room-item-count {
    color: var(--text-3) !important;
    font-size: 0.7rem !important;
    white-space: nowrap !important;
}

.room-items-grid { display: block !important; }
.assessment-item-enhanced {
    background: transparent !important;
    border: none !important;
    border-bottom: 0.5px solid var(--divider) !important;
    border-radius: 0 !important;
    padding: 11px 0 !important;
    margin: 0 !important;
}
.assessment-item-enhanced:last-child { border-bottom: none !important; }
.assessment-item-enhanced .item-header {
    display: flex !important;
    align-items: flex-start !important;
    justify-content: space-between !important;
    gap: 10px !important;
}
.item-text-enhanced {
    color: var(--text-1) !important;
    font-size: 0.86rem !important;
    font-weight: 500 !important;
    line-height: 1.45 !important;
    flex: 1 !important;
}
.rating-badge {
    border-radius: 99px !important;
    padding: 4px 11px !important;
    font-size: 0.68rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.04em !important;
    white-space: nowrap !important;
}
.item-description-enhanced {
    background: transparent !important;
    border: none !important;
    border-left: 2.5px solid var(--border) !important;
    border-radius: 0 !important;
    padding: 4px 0 4px 12px !important;
    margin-top: 8px !important;
    color: var(--text-2) !important;
    font-size: 0.8rem !important;
    line-height: 1.55 !important;
}

.room-notes-enhanced {
    background: var(--surface) !important;
    border: 0.5px solid var(--border) !important;
    border-radius: 10px !important;
    padding: 11px 13px !important;
    margin-top: 10px !important;
}
.notes-header {
    color: var(--text-1) !important;
    font-size: 0.8rem !important;
    display: flex !important;
    align-items: center !important;
    gap: 7px !important;
    margin-bottom: 5px !important;
}
.notes-header i { color: var(--brand-green) !important; }
.notes-content { color: var(--text-2) !important; font-size: 0.8rem !important; line-height: 1.5 !important; }

/* Issues requiring attention */
.issues-requiring-attention-section {
    background: var(--surface) !important;
    border: none !important;
    border-top: 0.5px solid var(--border) !important;
    border-bottom: 0.5px solid var(--border) !important;
    border-radius: 0 !important;
    padding: 16px !important;
    margin: 0 0 8px 0 !important;
}
.issues-main-title {
    color: var(--text-1) !important;
    font-size: 1.02rem !important;
    font-weight: 700 !important;
    display: flex !important;
    align-items: center !important;
    gap: 9px !important;
    margin: 0 0 4px 0 !important;
}
.issues-main-title i { color: #f1a008 !important; }
.issues-summary { color: var(--text-3) !important; font-size: 0.75rem !important; margin-bottom: 8px !important; }
.issues-introduction p {
    color: var(--text-2) !important;
    font-size: 0.82rem !important;
    line-height: 1.55 !important;
    margin-bottom: 12px !important;
}
.issues-grid { display: block !important; }
.issue-item-enhanced {
    background: var(--surface-2) !important;
    border: 0.5px solid var(--border) !important;
    border-left: 3px solid #f1a008 !important;
    border-radius: 12px !important;
    padding: 13px 14px !important;
    margin-bottom: 10px !important;
}
.issue-item-enhanced.priority-high { border-left-color: #e63946 !important; }
.issue-header {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    margin-bottom: 8px !important;
}
.issue-priority-badge {
    font-size: 0.68rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.05em !important;
    border-radius: 99px !important;
    padding: 4px 11px !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 5px !important;
}
.issue-priority-badge.high { background: rgba(230,57,70,0.14) !important; color: #e63946 !important; }
.issue-priority-badge.medium { background: rgba(241,160,8,0.14) !important; color: #f1a008 !important; }
.issue-number { color: var(--text-3) !important; font-size: 0.75rem !important; font-weight: 600 !important; }
.issue-location { color: var(--text-3) !important; font-size: 0.75rem !important; }

/* ═══════════════════════════════════════════════════════════════
   v9 — FULL REPORT v2: dashboard hero + accordion navigation
   ═══════════════════════════════════════════════════════════════ */

/* ── Dashboard hero ── */
.rpt-hero {
    background: var(--surface);
    border-top: 0.5px solid var(--border);
    border-bottom: 0.5px solid var(--border);
    padding: 18px 16px;
    margin-bottom: 8px;
}
.rpt-hero-top {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 16px;
}
.rpt-ring {
    width: 92px;
    height: 92px;
    min-width: 92px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}
.rpt-ring-inner {
    position: absolute;
    inset: 7px;
    border-radius: 50%;
    background: var(--surface);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    line-height: 1;
}
.rpt-ring-num { font-size: 1.6rem; font-weight: 700; }
.rpt-ring-out { font-size: 0.62rem; color: var(--text-3); margin-top: 2px; }
.rpt-hero-info { flex: 1; min-width: 0; }
.rpt-grade-pill {
    display: inline-block;
    border-radius: 99px;
    padding: 4px 14px;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.07em;
    margin-bottom: 7px;
}
.rpt-address {
    color: var(--text-1);
    font-size: 1.02rem;
    font-weight: 600;
    margin: 0 0 2px 0;
    line-height: 1.3;
}
.rpt-meta { color: var(--text-2); font-size: 0.78rem; margin: 0 0 3px 0; }
.rpt-date { color: var(--text-3); font-size: 0.68rem; margin: 0; }

.rpt-stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 7px;
    margin-bottom: 12px;
}
.rpt-stat {
    background: var(--surface-2);
    border: 0.5px solid var(--border);
    border-radius: 11px;
    padding: 10px 4px;
    text-align: center;
}
.rpt-stat-num {
    display: block;
    color: var(--text-1);
    font-size: 1.15rem;
    font-weight: 700;
    line-height: 1;
    margin-bottom: 3px;
}
.rpt-stat-lbl {
    display: block;
    color: var(--text-3);
    font-size: 0.6rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.rpt-dist {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}
.rpt-chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    border-radius: 99px;
    padding: 5px 11px;
    font-size: 0.7rem;
    font-weight: 600;
}
.rpt-chip i { font-size: 0.7rem; }
.rpt-chip.excellent { background: rgba(6,214,160,0.12);  color: #06D6A0; }
.rpt-chip.good      { background: rgba(40,167,69,0.12);  color: #28A745; }
.rpt-chip.fair      { background: rgba(241,143,1,0.12);  color: #F18F01; }
.rpt-chip.poor      { background: rgba(230,57,70,0.12);  color: #E63946; }

/* ── Accordions ── */
.rpt-details-label {
    color: var(--text-3);
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    padding: 10px 16px 6px;
}
.rpt-acc {
    background: var(--surface);
    border-top: 0.5px solid var(--border);
    border-bottom: 0.5px solid var(--border);
    margin-bottom: 8px;
    overflow: hidden;
}
.rpt-acc-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 15px 16px;
    cursor: pointer;
    background: var(--surface);
}
.rpt-acc-header:active { background: var(--surface-2); }
.rpt-acc-title {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 1;
    min-width: 0;
}
.rpt-acc-title > i:first-child {
    width: 34px;
    height: 34px;
    min-width: 34px;
    background: var(--icon-circle-bg);
    color: var(--brand-green);
    border-radius: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
}
.rpt-acc-title span:not(.rpt-acc-count) {
    color: var(--text-1);
    font-size: 0.95rem;
    font-weight: 600;
}
.rpt-acc-count {
    background: var(--icon-circle-bg);
    color: var(--brand-green);
    font-size: 0.68rem;
    font-weight: 700;
    border-radius: 99px;
    padding: 3px 9px;
    display: inline-flex;
    align-items: center;
    gap: 3px;
}
.rpt-acc-count.warn {
    background: rgba(241,160,8,0.14);
    color: #f1a008;
}
.rpt-acc-chev {
    color: var(--text-3);
    font-size: 0.85rem;
    transition: transform 0.25s;
    transform: rotate(-90deg);
}
.rpt-acc.open .rpt-acc-chev { transform: rotate(0deg); }
.rpt-acc-body {
    display: none;
    padding: 4px 16px 16px;
    border-top: 0.5px solid var(--divider);
}
.rpt-acc.open .rpt-acc-body { display: block; }

/* Issues footer note */
.issues-footer-note {
    display: flex;
    gap: 10px;
    background: var(--surface-2);
    border: 0.5px solid var(--border);
    border-radius: 11px;
    padding: 12px 13px;
    margin-top: 4px;
}
.issues-footer-note i { color: var(--brand-green); margin-top: 2px; }
.issues-footer-note div { color: var(--text-2); font-size: 0.78rem; line-height: 1.5; }
.issues-footer-note strong { color: var(--text-1); }

.issue-item-name { margin-bottom: 5px; }
.issue-item-name strong { color: var(--text-1); font-size: 0.88rem; }
.issue-description { color: var(--text-2); font-size: 0.8rem; line-height: 1.55; }
.issue-location {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 6px;
}
.issue-location i { font-size: 0.55rem !important; }

/* Back to top */
.scroll-to-top-container {
    padding: 8px 16px max(110px, env(safe-area-inset-bottom, 0px) + 90px);
    text-align: center;
}
.scroll-to-top-btn {
    background: var(--surface-2) !important;
    color: var(--text-2) !important;
    border: 0.5px solid var(--border) !important;
    border-radius: 99px !important;
    padding: 10px 20px !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 7px !important;
    cursor: pointer !important;
}

/* ═══════════════════════════════════════════════════════════════
   v10 — REPORT DETAIL SECTIONS: flat, no nested containers
   Room header + count on ONE line; item + rating on ONE line
   ═══════════════════════════════════════════════════════════════ */

/* Kill the room "card" box — flat group with divider */
.assessment-report .room-assessment-enhanced,
.rpt-acc .room-assessment-enhanced {
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    padding: 0 !important;
    margin: 0 0 4px 0 !important;
    box-shadow: none !important;
}

/* Room header — single row: icon + name left, count right */
.assessment-report .room-header-enhanced,
.rpt-acc .room-header-enhanced {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
    text-align: left !important;
    gap: 10px !important;
    background: transparent !important;
    border: none !important;
    border-bottom: 1.5px solid var(--border) !important;
    border-radius: 0 !important;
    padding: 12px 0 8px 0 !important;
    margin: 0 !important;
}
.assessment-report .room-title-enhanced,
.rpt-acc .room-title-enhanced {
    display: inline-flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 8px !important;
    color: var(--text-1) !important;
    font-size: 0.95rem !important;
    font-weight: 600 !important;
    margin: 0 !important;
    padding: 0 !important;
    text-align: left !important;
    background: transparent !important;
}
.assessment-report .room-title-enhanced i,
.rpt-acc .room-title-enhanced i {
    width: auto !important;
    height: auto !important;
    min-width: 0 !important;
    background: transparent !important;
    color: var(--brand-green) !important;
    font-size: 0.85rem !important;
    border-radius: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    box-shadow: none !important;
}
.assessment-report .room-item-count,
.rpt-acc .room-item-count {
    background: transparent !important;
    border: none !important;
    color: var(--text-3) !important;
    font-size: 0.72rem !important;
    font-weight: 500 !important;
    padding: 0 !important;
    margin: 0 !important;
    border-radius: 0 !important;
    white-space: nowrap !important;
}

/* Items — flat divider rows; title + rating on ONE line */
.assessment-report .room-items-grid,
.rpt-acc .room-items-grid {
    display: block !important;
    gap: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
}
.assessment-report .assessment-item-enhanced,
.rpt-acc .assessment-item-enhanced {
    background: transparent !important;
    border: none !important;
    border-bottom: 0.5px solid var(--divider) !important;
    border-radius: 0 !important;
    padding: 11px 0 !important;
    margin: 0 !important;
    box-shadow: none !important;
}
.assessment-report .assessment-item-enhanced:last-child,
.rpt-acc .assessment-item-enhanced:last-child {
    border-bottom: none !important;
}
.assessment-report .assessment-item-enhanced .item-header,
.rpt-acc .assessment-item-enhanced .item-header {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
    text-align: left !important;
    gap: 12px !important;
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
    margin: 0 !important;
}
.assessment-report .item-text-enhanced,
.rpt-acc .item-text-enhanced {
    color: var(--text-1) !important;
    font-size: 0.88rem !important;
    font-weight: 500 !important;
    line-height: 1.4 !important;
    text-align: left !important;
    flex: 1 !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
}
.assessment-report .item-rating-enhanced,
.rpt-acc .item-rating-enhanced {
    flex-shrink: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
}
.assessment-report .rating-badge,
.rpt-acc .rating-badge {
    display: inline-block !important;
    border-radius: 99px !important;
    padding: 4px 11px !important;
    font-size: 0.64rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.05em !important;
    white-space: nowrap !important;
    margin: 0 !important;
}

/* Guidance — slim indented note, no box */
.assessment-report .item-description-enhanced,
.rpt-acc .item-description-enhanced {
    background: transparent !important;
    border: none !important;
    border-left: 2px solid var(--border) !important;
    border-radius: 0 !important;
    padding: 2px 0 2px 11px !important;
    margin: 7px 0 0 0 !important;
    color: var(--text-2) !important;
    font-size: 0.79rem !important;
    line-height: 1.5 !important;
    text-align: left !important;
    box-shadow: none !important;
}

/* Notes — minimal */
.assessment-report .room-notes-enhanced,
.rpt-acc .room-notes-enhanced {
    background: transparent !important;
    border: none !important;
    border-left: 2px solid var(--brand-green) !important;
    border-radius: 0 !important;
    padding: 2px 0 2px 11px !important;
    margin: 8px 0 4px 0 !important;
    box-shadow: none !important;
}
.assessment-report .notes-header,
.rpt-acc .notes-header {
    color: var(--brand-green) !important;
    font-size: 0.72rem !important;
    font-weight: 600 !important;
    letter-spacing: 0.04em !important;
    text-transform: uppercase !important;
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    margin-bottom: 3px !important;
}
.assessment-report .notes-header i { font-size: 0.7rem !important; }
.assessment-report .notes-content,
.rpt-acc .notes-content {
    color: var(--text-2) !important;
    font-size: 0.79rem !important;
    line-height: 1.5 !important;
}

/* Accordion body breathing room */
.rpt-acc-body { padding: 0 16px 14px !important; }

/* Section header inside accordion (legacy) — flatten if present */
.rpt-acc .section-header-enhanced { display: none !important; }

/* ═══════════════════════════════════════════════════════════════
   v11 — ISSUES REQUIRING ATTENTION: flat redesign (no boxes)
   ═══════════════════════════════════════════════════════════════ */
.assessment-report .issue-item-enhanced,
.rpt-acc .issue-item-enhanced {
    background: transparent !important;
    border: none !important;
    border-left: 2px solid #f1a008 !important;
    border-radius: 0 !important;
    padding: 2px 0 10px 12px !important;
    margin: 0 0 14px 0 !important;
    box-shadow: none !important;
}
.assessment-report .issue-item-enhanced.priority-critical,
.assessment-report .issue-item-enhanced.priority-high,
.rpt-acc .issue-item-enhanced.priority-critical {
    border-left-color: #e63946 !important;
}

.assessment-report .issue-header,
.rpt-acc .issue-header {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 10px !important;
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
    margin: 0 0 6px 0 !important;
}
.assessment-report .issue-priority-badge,
.rpt-acc .issue-priority-badge {
    display: inline-flex !important;
    align-items: center !important;
    gap: 5px !important;
    border-radius: 99px !important;
    padding: 3px 10px !important;
    font-size: 0.62rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.06em !important;
    border: none !important;
    box-shadow: none !important;
}
.assessment-report .issue-priority-badge.critical,
.rpt-acc .issue-priority-badge.critical {
    background: rgba(230,57,70,0.14) !important;
    color: #e63946 !important;
}
.assessment-report .issue-priority-badge.high,
.rpt-acc .issue-priority-badge.high {
    background: rgba(241,160,8,0.14) !important;
    color: #f1a008 !important;
}
.assessment-report .issue-number,
.rpt-acc .issue-number {
    color: var(--text-3) !important;
    font-size: 0.72rem !important;
    font-weight: 600 !important;
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
}

.assessment-report .issue-location,
.rpt-acc .issue-location {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 6px !important;
    color: var(--text-3) !important;
    font-size: 0.7rem !important;
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
    margin: 0 0 4px 0 !important;
}
.assessment-report .issue-location span,
.rpt-acc .issue-location span {
    color: var(--text-3) !important;
    font-size: 0.7rem !important;
    background: transparent !important;
    padding: 0 !important;
}
.assessment-report .issue-location i { font-size: 0.5rem !important; color: var(--text-3) !important; }

.assessment-report .issue-item-name,
.rpt-acc .issue-item-name {
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
    margin: 0 0 4px 0 !important;
}
.assessment-report .issue-item-name strong,
.rpt-acc .issue-item-name strong {
    color: var(--text-1) !important;
    font-size: 0.9rem !important;
    font-weight: 600 !important;
}
.assessment-report .issue-description,
.rpt-acc .issue-description {
    color: var(--text-2) !important;
    font-size: 0.8rem !important;
    line-height: 1.55 !important;
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* Hide legacy rating indicator row if rendered by old code */
.assessment-report .issue-rating-indicator,
.rpt-acc .issue-rating-indicator { display: none !important; }

/* Issues intro slimmer */
.rpt-acc .issues-introduction p {
    color: var(--text-2) !important;
    font-size: 0.8rem !important;
    line-height: 1.55 !important;
    margin: 0 0 14px 0 !important;
}

/* ═══════════════════════════════════════════════════════════════
   v12 — SCORE GRADE STANDARDIZATION + EDIT PROPERTY REDESIGN
   ═══════════════════════════════════════════════════════════════ */

/* ── Excellent grade across badges (matches scoring thresholds) ── */
.prop-status-badge.excellent { background: rgba(6,214,160,0.92); color: #fff; }
.prop-score-badge.excellent  { border-color: #06D6A0 !important; }
.prop-score-badge.excellent .psb-label { color: #8ff5dc; }
.prop-score-badge.good       { border-color: #28A745 !important; }
.prop-score-badge.good .psb-label { color: #9be8ae; }

/* ════════════════════════════════════════
   EDIT PROPERTY — form buttons
   ════════════════════════════════════════ */
.form-buttons {
    display: flex !important;
    flex-direction: column-reverse !important;
    gap: 9px !important;
    margin-top: 18px !important;
}
.save-button {
    width: 100% !important;
    background: var(--brand-green) !important;
    background-image: none !important;
    color: #ffffff !important;
    border: none !important;
    border-radius: 12px !important;
    padding: 14px !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    font-family: 'Poppins', sans-serif !important;
    cursor: pointer !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    box-shadow: 0 3px 12px rgba(29,158,117,0.3) !important;
}
.cancel-button {
    width: 100% !important;
    background: var(--surface-2) !important;
    background-image: none !important;
    color: var(--text-2) !important;
    border: 0.5px solid var(--border) !important;
    border-radius: 12px !important;
    padding: 13px !important;
    font-size: 13.5px !important;
    font-weight: 600 !important;
    font-family: 'Poppins', sans-serif !important;
    cursor: pointer !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    box-shadow: none !important;
}

/* ════════════════════════════════════════
   EDIT PROPERTY — Additional Features
   ════════════════════════════════════════ */
.features-section {
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    padding: 6px 0 0 0 !important;
    margin: 14px 0 0 0 !important;
    box-shadow: none !important;
}
.features-title {
    font-size: 10px !important;
    font-weight: 600 !important;
    letter-spacing: 0.07em !important;
    text-transform: uppercase !important;
    color: var(--brand-green) !important;
    margin: 0 0 10px 0 !important;
    display: flex !important;
    align-items: center !important;
    gap: 7px !important;
    text-align: left !important;
    text-shadow: none !important;
}
.features-title i { font-size: 12px !important; color: var(--brand-green) !important; }

.feature-group {
    background: var(--surface-2) !important;
    background-image: none !important;
    border: 0.5px solid var(--border) !important;
    border-radius: 13px !important;
    margin: 0 0 10px 0 !important;
    box-shadow: none !important;
    overflow: hidden !important;
}
.group-header {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 14px 15px !important;
    background: transparent !important;
    background-image: none !important;
    border: none !important;
    border-radius: 0 !important;
    cursor: pointer !important;
}
.group-header span {
    display: inline-flex !important;
    align-items: center !important;
    gap: 9px !important;
    color: var(--text-1) !important;
    font-size: 0.92rem !important;
    font-weight: 600 !important;
}
.group-header span i { color: var(--brand-green) !important; font-size: 0.85rem !important; }
.group-header .toggle-icon { color: var(--text-3) !important; font-size: 0.8rem !important; transition: transform 0.25s !important; }

.group-content {
    padding: 0 15px 14px !important;
    background: transparent !important;
    border: none !important;
}
.group-content.collapsed { display: none !important; padding: 0 !important; }

/* Select + add button on one row */
.add-row {
    display: flex !important;
    gap: 8px !important;
    margin-bottom: 12px !important;
}
.feature-select {
    flex: 1 !important;
    background: var(--surface) !important;
    color: var(--text-1) !important;
    border: 0.5px solid var(--border) !important;
    border-radius: 11px !important;
    padding: 12px 13px !important;
    font-size: 0.88rem !important;
    font-family: 'Poppins', sans-serif !important;
}
.add-btn {
    flex: 0 0 46px !important;
    width: 46px !important;
    height: auto !important;
    background: var(--brand-green) !important;
    background-image: none !important;
    color: #ffffff !important;
    border: none !important;
    border-radius: 11px !important;
    font-size: 15px !important;
    cursor: pointer !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-shadow: none !important;
}

/* Feature chips → clean rows */
.feature-chips { display: block !important; }
.feature-chip {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 10px !important;
    background: var(--surface) !important;
    background-image: none !important;
    border: 0.5px solid var(--border) !important;
    border-radius: 11px !important;
    padding: 10px 13px !important;
    margin: 0 0 8px 0 !important;
    box-shadow: none !important;
}
.feature-chip .feature-text {
    background: transparent !important;
    color: var(--text-1) !important;
    font-size: 0.88rem !important;
    font-weight: 500 !important;
    padding: 0 !important;
    border: none !important;
}
.feature-controls {
    display: flex !important;
    align-items: center !important;
    gap: 7px !important;
}
.qty-btn {
    width: 28px !important;
    height: 28px !important;
    border-radius: 8px !important;
    background: var(--icon-circle-bg) !important;
    color: var(--brand-green) !important;
    border: none !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    cursor: pointer !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-shadow: none !important;
}
.qty-num {
    min-width: 22px !important;
    text-align: center !important;
    background: transparent !important;
    color: var(--text-1) !important;
    font-size: 0.9rem !important;
    font-weight: 600 !important;
    padding: 0 !important;
    border: none !important;
}
.remove-btn {
    width: 28px !important;
    height: 28px !important;
    border-radius: 8px !important;
    background: var(--btn-del-bg) !important;
    color: var(--btn-del-text) !important;
    border: none !important;
    font-size: 11px !important;
    cursor: pointer !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-shadow: none !important;
}

/* Empty state inside chips list */
.feature-chips > div:empty { display: none !important; }
.feature-chips .no-features,
.feature-chips .empty-message,
.no-features-yet {
    border: 1.5px dashed var(--border) !important;
    border-radius: 11px !important;
    background: transparent !important;
    color: var(--text-3) !important;
    font-size: 0.82rem !important;
    font-style: normal !important;
    text-align: center !important;
    padding: 14px !important;
}

/* ═══════════════════════════════════════════════════════════════
   v13 — EDIT PROPERTY: final polish
   Auto-add select, inline title icon, clean rows
   ═══════════════════════════════════════════════════════════════ */

/* Features title — icon inline with text, left aligned */
.features-title {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 8px !important;
    text-align: left !important;
    color: var(--text-1) !important;
    font-size: 0.95rem !important;
    font-weight: 600 !important;
    letter-spacing: 0.01em !important;
    text-transform: none !important;
    margin: 4px 0 12px 0 !important;
    padding: 0 !important;
}
.features-title i {
    display: inline-flex !important;
    position: static !important;
    margin: 0 !important;
    color: var(--brand-green) !important;
    font-size: 1rem !important;
    background: transparent !important;
}

/* Add row — select fills the row (auto-adds on selection) */
.add-row {
    display: block !important;
    margin-bottom: 10px !important;
}
.add-row .feature-select,
.feature-select {
    width: 100% !important;
    background: var(--surface-2) !important;
    color: var(--text-1) !important;
    border: 1px solid var(--border) !important;
    border-radius: 11px !important;
    padding: 13px 14px !important;
    font-size: 0.92rem !important;
    font-family: 'Poppins', sans-serif !important;
    appearance: none !important;
    -webkit-appearance: none !important;
    background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%235a85a0' stroke-width='1.6' fill='none' stroke-linecap='round'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 14px center !important;
}

/* Hide any leftover add buttons (now auto-add on select) */
.add-row .add-btn { display: none !important; }

/* Feature chips — confirmed clean rows (light-mode parity) */
body:not(.dark-mode) .feature-chip {
    background: #ffffff !important;
    border-color: var(--border) !important;
}
body:not(.dark-mode) .feature-chip .feature-text { color: #111827 !important; }
body:not(.dark-mode) .qty-num { color: #111827 !important; }

/* Group content spacing now that button is gone */
.group-content { padding-top: 2px !important; }

/* ═══════════════════════════════════════════════════════════════
   v14 — PROPERTY OVERVIEW: Property24-style refinement
   One sizing standard: icon tiles 34px, titles 0.95rem,
   body 0.88rem, meta 0.78rem, pills 0.7rem
   ═══════════════════════════════════════════════════════════════ */

/* ── Hero: quiet, information-first ── */
.simple-property-overview {
    padding: 14px 16px 16px !important;
}
.property-price {
    font-size: 1.5rem !important;
    font-weight: 700 !important;
    margin-bottom: 3px !important;
    letter-spacing: -0.01em !important;
}
.property-type-line {
    font-size: 0.95rem !important;
    font-weight: 600 !important;
    margin-bottom: 2px !important;
}
.property-address-line {
    font-size: 0.82rem !important;
    margin-bottom: 12px !important;
}

/* ── Spec row: Property24 style — small icons, no boxes ── */
.property-specs-row {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    gap: 0 !important;
    margin-bottom: 12px !important;
    padding: 10px 0 !important;
    border-top: 0.5px solid var(--divider) !important;
    border-bottom: 0.5px solid var(--divider) !important;
}
.spec-item {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    padding: 0 16px 0 0 !important;
    margin-right: 16px !important;
    border-right: 0.5px solid var(--divider) !important;
    font-size: 0.88rem !important;
    font-weight: 600 !important;
    color: var(--text-1) !important;
}
.spec-item:last-child {
    border-right: none !important;
    margin-right: 0 !important;
    padding-right: 0 !important;
}
.spec-item i {
    color: var(--brand-green) !important;
    font-size: 0.85rem !important;
}

/* ── Sale link: slim single row ── */
.property-sale-link-area {
    padding: 10px 12px !important;
    border-radius: 10px !important;
    margin-top: 0 !important;
}
.sale-link-header { margin-bottom: 6px !important; }
.sale-link-header h4 { font-size: 0.82rem !important; }
.edit-link-btn {
    width: 26px !important;
    height: 26px !important;
    font-size: 11px !important;
    border-radius: 7px !important;
}
.property-sale-link { font-size: 0.82rem !important; }
.no-sale-link {
    padding: 8px !important;
    font-size: 0.78rem !important;
    border-radius: 8px !important;
}

/* ── Section headers: one standard size ── */
.detail-section-header { padding: 14px 16px !important; }
.detail-section-header .section-title { gap: 11px !important; }
.detail-section-header .section-title i {
    width: 34px !important;
    height: 34px !important;
    min-width: 34px !important;
    border-radius: 9px !important;
    font-size: 14px !important;
}
.detail-section-header .section-title h3 {
    font-size: 0.95rem !important;
}
.section-status {
    font-size: 0.7rem !important;
    padding: 3px 9px !important;
}
.section-toggle { font-size: 0.8rem !important; }

/* ── Feature accordions inside Property Details: compact ── */
.feature-header-readonly { padding: 12px 2px !important; }
.feature-title { gap: 9px !important; }
.feature-title i {
    width: 28px !important;
    height: 28px !important;
    min-width: 28px !important;
    border-radius: 8px !important;
    font-size: 11.5px !important;
}
.feature-title span { font-size: 0.9rem !important; }
.feature-title .feature-count {
    font-size: 0.68rem !important;
    padding: 2px 8px !important;
}
.feature-toggle, .feature-toggle i { font-size: 0.78rem !important; }
.features-list-readonly { padding-left: 37px !important; }
.feature-item-readonly { padding: 10px 2px !important; }
.feature-item-readonly .feature-name { font-size: 0.85rem !important; }
.feature-item-readonly .feature-quantity {
    min-width: 24px !important;
    height: 24px !important;
    font-size: 0.75rem !important;
    border-radius: 7px !important;
}
.no-features-message { padding-left: 37px !important; font-size: 0.78rem !important; }

/* ── Gallery: compact, swipe-first ── */
.gallery-main-image { height: 240px !important; }
.gallery-controls button, .gallery-prev, .gallery-next {
    width: 32px !important;
    height: 32px !important;
    font-size: 12px !important;
}
.photo-counter { font-size: 0.68rem !important; padding: 3px 9px !important; }
.gallery-thumbnails { padding: 8px 12px 10px !important; gap: 7px !important; }
.gallery-thumbnail {
    width: 56px !important;
    height: 46px !important;
    min-width: 56px !important;
    border-radius: 7px !important;
}

/* ── Action buttons: standard 48px ── */
.detail-actions { gap: 8px !important; padding-top: 10px !important; }
.action-btn {
    height: 48px !important;
    padding: 0 16px !important;
    font-size: 13.5px !important;
    border-radius: 11px !important;
}
.action-btn i { font-size: 13.5px !important; }

/* ── Financial overview rows in expanded section ── */
.financial-overview { padding: 4px 12px !important; border-radius: 10px !important; }
.financial-item {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    padding: 10px 0 !important;
    border-bottom: 0.5px solid var(--divider) !important;
}
.financial-item:last-child { border-bottom: none !important; }
.financial-item label { font-size: 0.85rem !important; color: var(--text-2) !important; margin: 0 !important; }
.financial-item .value { font-size: 0.88rem !important; font-weight: 600 !important; }
.financial-item .price-highlight { font-size: 0.95rem !important; font-weight: 700 !important; }

/* ── Detail section content standard text ── */
.detail-section-content.expanded { padding: 12px 16px 14px !important; }
.detail-section-content h4 { font-size: 0.9rem !important; }
.detail-section-content p { font-size: 0.85rem !important; }

/* ═══════════════════════════════════════════════════════════════
   v15 — OVERVIEW: clear hierarchy, pro buttons, photo placeholder,
   compact calculator
   ═══════════════════════════════════════════════════════════════ */

/* ── Photo placeholder: clean hero, no button ── */
.no-photos-gallery {
    position: relative !important;
    height: 190px !important;
    background: linear-gradient(160deg, #15273d 0%, #0e1b2b 100%) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
}
.no-photos-placeholder {
    text-align: center !important;
    padding: 0 24px !important;
}
.npg-icon {
    width: 58px;
    height: 58px;
    margin: 0 auto 10px;
    border-radius: 16px;
    background: rgba(29,158,117,0.14);
    border: 0.5px solid rgba(29,158,117,0.3);
    display: flex;
    align-items: center;
    justify-content: center;
}
.npg-icon i {
    font-size: 24px !important;
    color: #1d9e75 !important;
}
.npg-hint {
    color: rgba(139,186,212,0.7) !important;
    font-size: 0.75rem !important;
    margin: 0 !important;
}
.no-photos-placeholder h3, .no-photos-placeholder > i,
.no-photos-placeholder .primary-button { display: none !important; }

.property-gallery { position: relative !important; }
.property-gallery .prop-score-badge,
.no-photos-gallery .prop-score-badge { z-index: 5; }

/* ── EXPANDED-STATE HIERARCHY ──
   You can always see what is open: green left bar +
   tinted header + rotated green chevron */
.detail-section-container:has(> .detail-section-content.expanded) {
    border-left: 3px solid var(--brand-green) !important;
}
.detail-section-container:has(> .detail-section-content.expanded) > .detail-section-header {
    background: var(--surface-2) !important;
}
.detail-section-container:has(> .detail-section-content.expanded) .section-toggle {
    color: var(--brand-green) !important;
    transform: rotate(180deg) !important;
}
.detail-section-content.expanded {
    background: var(--app-bg) !important;
    border-top: 0.5px solid var(--divider) !important;
}

/* ── NESTED feature groups read as children, not sections ── */
.detail-section-content .feature-section-readonly {
    margin: 0 0 0 6px !important;
    padding-left: 12px !important;
    border-left: 2px solid var(--divider) !important;
    border-bottom: none !important;
}
.detail-section-content .feature-section-readonly:has(.feature-content-readonly:not(.collapsed)) {
    border-left-color: var(--brand-green) !important;
}
.feature-header-readonly { padding: 11px 2px !important; }
.feature-title i {
    width: auto !important;
    height: auto !important;
    min-width: 0 !important;
    background: transparent !important;
    border-radius: 0 !important;
    font-size: 0.82rem !important;
    color: var(--brand-green) !important;
}
.feature-title span { font-size: 0.88rem !important; }
.feature-section-readonly:has(.feature-content-readonly:not(.collapsed)) .feature-title span {
    color: var(--brand-green) !important;
}
.feature-title .feature-count {
    font-size: 0.66rem !important;
    padding: 2px 7px !important;
}
.feature-toggle, .feature-toggle i { font-size: 0.7rem !important; }
.feature-section-readonly:has(.feature-content-readonly:not(.collapsed)) .feature-toggle {
    color: var(--brand-green) !important;
}
.features-list-readonly { padding-left: 18px !important; }
.no-features-message { padding-left: 18px !important; }

/* ── Action buttons: professional pair ── */
.detail-actions {
    padding: 14px 16px max(110px, env(safe-area-inset-bottom, 0px) + 90px) !important;
    gap: 9px !important;
}
.action-btn {
    height: 50px !important;
    border-radius: 13px !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    letter-spacing: 0.01em !important;
}
.action-btn.primary {
    background: var(--brand-green) !important;
    color: #fff !important;
    box-shadow: 0 2px 10px rgba(29,158,117,0.28) !important;
}
.action-btn.secondary {
    background: transparent !important;
    color: var(--text-1) !important;
    border: 1.5px solid var(--border) !important;
    box-shadow: none !important;
}
.action-btn.secondary:active { background: var(--surface-2) !important; }
.action-btn.secondary i { color: var(--text-2) !important; }

/* ── Calculator: compact sizing everywhere ── */
.cost-input-section label,
#standaloneCostCalculator label,
.cost-form-grid label {
    font-size: 0.84rem !important;
    font-weight: 600 !important;
    margin-bottom: 6px !important;
}
.cost-input-section input,
.cost-input-section select,
#standaloneCostCalculator input,
#standaloneCostCalculator select {
    padding: 11px 12px !important;
    font-size: 0.88rem !important;
    border-radius: 10px !important;
}
.cost-info-btn,
#standaloneCostCalculator .cost-info-btn {
    width: 18px !important;
    height: 18px !important;
    min-width: 18px !important;
    font-size: 9px !important;
}
.cost-input-section .toggle-buttons,
#standaloneCostCalculator .toggle-buttons {
    border-radius: 11px !important;
    padding: 3px !important;
}
.cost-input-section .toggle-buttons button,
#standaloneCostCalculator .toggle-buttons button,
#standaloneCostCalculator button[class*="toggle"] {
    padding: 9px 0 !important;
    font-size: 0.85rem !important;
    border-radius: 9px !important;
}
.cost-form-grid { gap: 12px !important; }
.cost-section-title { font-size: 0.92rem !important; }
.cost-section-title i {
    width: 30px !important;
    height: 30px !important;
    font-size: 12.5px !important;
}
.cost-summary-amount { font-size: 1.3rem !important; }

/* Financial section inner heading */
.detail-section-content .cost-input-section h3,
.detail-section-content .cost-input-section h4 { font-size: 0.92rem !important; }

/* Asking price summary card inside financial section */
.financial-overview { text-align: left !important; }

/* ═══════════════════════════════════════════════════════════════
   v16 — EXPANSION VIA LIGHTER BACKGROUND (no green lines),
   SIDE-BY-SIDE ACTION BUTTONS
   ═══════════════════════════════════════════════════════════════ */

/* ── Kill the green-line/nesting approach from v15 ── */
.detail-section-container:has(> .detail-section-content.expanded) {
    border-left: none !important;
}
.detail-section-content .feature-section-readonly,
.detail-section-content .feature-section-readonly:has(.feature-content-readonly:not(.collapsed)) {
    border-left: none !important;
    margin-left: 0 !important;
    padding-left: 0 !important;
}

/* ── Expanded = whole container subtly lighter ──
   Collapsed sections: var(--surface). Expanded: one step lighter,
   in line with the scheme, header and content together. */
.detail-section-container:has(> .detail-section-content.expanded) {
    background: #182a3e !important; /* one step lighter than surface */
}
.detail-section-container:has(> .detail-section-content.expanded) > .detail-section-header {
    background: transparent !important;
}
.detail-section-content.expanded {
    background: transparent !important;
    border-top: 0.5px solid var(--divider) !important;
}
body:not(.dark-mode) .detail-section-container:has(> .detail-section-content.expanded) {
    background: #f3f6f9 !important;
}

/* Same rule for the report accordions — consistent everywhere */
.rpt-acc.open {
    background: #182a3e !important;
}
.rpt-acc.open .rpt-acc-header { background: transparent !important; }
body:not(.dark-mode) .rpt-acc.open { background: #f3f6f9 !important; }

/* Expanded nested feature group: title + chevron green only (no lines, no boxes) */
.feature-section-readonly:has(.feature-content-readonly:not(.collapsed)) .feature-title span,
.feature-section-readonly:has(.feature-content-readonly:not(.collapsed)) .feature-toggle {
    color: var(--brand-green) !important;
}

/* ── Action buttons: side-by-side, substantial ── */
.detail-actions {
    flex-direction: row !important;
    gap: 10px !important;
}
.detail-actions .action-btn {
    flex: 1 1 0 !important;
    width: auto !important;
    height: 52px !important;
    border-radius: 13px !important;
    font-size: 13.5px !important;
    padding: 0 10px !important;
    white-space: nowrap !important;
}
.detail-actions .action-btn i { font-size: 13px !important; }
.action-btn.primary { box-shadow: 0 2px 8px rgba(29,158,117,0.25) !important; }
.action-btn.secondary {
    background: var(--surface) !important;
    border: 1.5px solid var(--border) !important;
}

/* ═══════════════════════════════════════════════════════════════
   v17 — LIGHTER-WHEN-EXPANDED for calculator + edit property,
   flattened feature chips, heading spacing
   ═══════════════════════════════════════════════════════════════ */

/* ── Standalone calculator: expanded section = lighter bg ── */
.cost-section-container:has(> .cost-section-content.expanded) {
    background: #182a3e !important;
}
.cost-section-container:has(> .cost-section-content.expanded) > .cost-section-header {
    background: transparent !important;
}
.cost-section-container:has(> .cost-section-content.expanded) .cost-section-toggle {
    color: var(--brand-green) !important;
    transform: rotate(180deg) !important;
}
.cost-section-content.expanded { background: transparent !important; }
body:not(.dark-mode) .cost-section-container:has(> .cost-section-content.expanded) {
    background: #f3f6f9 !important;
}

/* ── Edit property: expanded group = lighter bg ── */
.feature-group { overflow: hidden !important; }
.feature-group:has(> .group-content:not(.collapsed)) {
    background: #182a3e !important;
    border-color: var(--border) !important;
}
.feature-group:has(> .group-content:not(.collapsed)) > .group-header {
    background: transparent !important;
}
.feature-group:has(> .group-content:not(.collapsed)) .toggle-icon {
    color: var(--brand-green) !important;
    transform: rotate(180deg) !important;
}
.group-header .toggle-icon { transition: transform 0.25s !important; color: var(--text-3) !important; }
.group-content { border-top: 0.5px solid var(--divider) !important; }
.group-content.collapsed { border-top: none !important; }
body:not(.dark-mode) .feature-group:has(> .group-content:not(.collapsed)) {
    background: #f3f6f9 !important;
}

/* ── Flatten feature chips: divider rows, no boxes ── */
.feature-chips { display: block !important; gap: 0 !important; }
.feature-chip {
    background: transparent !important;
    border: none !important;
    border-bottom: 0.5px solid var(--divider) !important;
    border-radius: 0 !important;
    padding: 11px 2px !important;
    margin: 0 !important;
    box-shadow: none !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 10px !important;
}
.feature-chip:last-child { border-bottom: none !important; }
.feature-chip .feature-text {
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
    color: var(--text-1) !important;
    font-size: 0.88rem !important;
    font-weight: 500 !important;
}
body:not(.dark-mode) .feature-chip { background: transparent !important; }
body:not(.dark-mode) .feature-chip .feature-text { color: #111827 !important; }

.feature-controls {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
}
.qty-btn {
    width: 26px !important;
    height: 26px !important;
    min-width: 26px !important;
    border-radius: 8px !important;
    background: var(--surface-2) !important;
    border: 0.5px solid var(--border) !important;
    color: var(--text-1) !important;
    font-size: 12px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-shadow: none !important;
}
.qty-num {
    background: transparent !important;
    border: none !important;
    min-width: 20px !important;
    text-align: center !important;
    color: var(--text-1) !important;
    font-size: 0.88rem !important;
    font-weight: 600 !important;
    padding: 0 !important;
}
.remove-btn {
    width: 26px !important;
    height: 26px !important;
    min-width: 26px !important;
    border-radius: 8px !important;
    background: rgba(230,57,70,0.12) !important;
    color: #e63946 !important;
    border: none !important;
    font-size: 11px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin-left: 2px !important;
    box-shadow: none !important;
}

/* Empty state: quieter */
.no-features-clean, .no-features {
    border: 1px dashed var(--border) !important;
    border-radius: 10px !important;
    padding: 14px !important;
    color: var(--text-3) !important;
    font-size: 0.78rem !important;
    font-style: normal !important;
    text-align: center !important;
    background: transparent !important;
    margin-top: 2px !important;
}

/* ── "Additional Property Features" heading: clean spacing ── */
.features-section { border: none !important; padding-top: 4px !important; }
.features-title {
    border: none !important;
    border-bottom: none !important;
    margin: 22px 0 14px 0 !important;
    padding: 0 !important;
    line-height: 1.3 !important;
}
.features-title i { font-size: 0.95rem !important; }
.features-section > hr { display: none !important; }

/* ═══════════════════════════════════════════════════════════════
   v18 — CALCULATOR EXPAND FIX + ASSESSMENT SCREEN REDESIGN
   ═══════════════════════════════════════════════════════════════ */

/* ── Calculator: cover both expand mechanisms ──
   (some sections toggle .expanded, others only remove .collapsed) */
.cost-section-container:has(.cost-section-content.expanded),
.cost-section-container:has(.cost-section-content:not(.collapsed)) {
    background: #182a3e !important;
}
.cost-section-container:has(.cost-section-content.expanded) > .cost-section-header,
.cost-section-container:has(.cost-section-content:not(.collapsed)) > .cost-section-header {
    background: transparent !important;
}
.cost-section-container:has(.cost-section-content.expanded) .cost-section-toggle,
.cost-section-container:has(.cost-section-content:not(.collapsed)) .cost-section-toggle {
    color: var(--brand-green) !important;
    transform: rotate(180deg) !important;
}
body:not(.dark-mode) .cost-section-container:has(.cost-section-content.expanded),
body:not(.dark-mode) .cost-section-container:has(.cost-section-content:not(.collapsed)) {
    background: #f3f6f9 !important;
}

/* ════════════════════════════════════════
   ASSESSMENT SCREEN (checklist)
   ════════════════════════════════════════ */
.assessment-content { background: transparent !important; padding: 0 !important; }
.assessment-categories { padding: 0 !important; }

/* Top progress */
.progress-bar {
    height: 6px !important;
    border-radius: 99px !important;
    background: var(--prog-bg) !important;
    overflow: hidden !important;
}
.progress-fill {
    background: var(--brand-green) !important;
    border-radius: 99px !important;
}
.progress-text { color: var(--text-2) !important; font-size: 0.78rem !important; }
.assessment-mode-indicator {
    background: var(--icon-circle-bg) !important;
    color: var(--brand-green) !important;
    border: none !important;
    border-radius: 99px !important;
    font-size: 0.7rem !important;
    font-weight: 600 !important;
    padding: 4px 12px !important;
}

/* Category cards — collapsed: surface; expanded: lighter */
.assessment-category {
    background: var(--surface) !important;
    border: none !important;
    border-top: 0.5px solid var(--border) !important;
    border-bottom: 0.5px solid var(--border) !important;
    border-radius: 0 !important;
    margin: 0 0 8px 0 !important;
    box-shadow: none !important;
    overflow: hidden !important;
}
.assessment-category:has(> .category-expanded-content) {
    background: #182a3e !important;
}
body:not(.dark-mode) .assessment-category:has(> .category-expanded-content) {
    background: #f3f6f9 !important;
}

.category-header {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 14px 16px !important;
    background: transparent !important;
    cursor: pointer !important;
}
.category-title {
    display: flex !important;
    align-items: center !important;
    gap: 11px !important;
    flex: 1 !important;
    min-width: 0 !important;
}
.category-icon {
    width: 34px !important;
    height: 34px !important;
    min-width: 34px !important;
    border-radius: 10px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 14px !important;
    color: #ffffff !important;
    box-shadow: none !important;
}
.category-name {
    color: var(--text-1) !important;
    font-size: 0.95rem !important;
    font-weight: 600 !important;
    flex: 1 !important;
}
.category-progress {
    width: 36px !important;
    height: 36px !important;
    min-width: 36px !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 0.58rem !important;
    font-weight: 700 !important;
    color: var(--text-1) !important;
    position: relative !important;
    z-index: 0 !important;
}
.category-progress::before {
    content: '';
    position: absolute;
    inset: 4px;
    border-radius: 50%;
    background: var(--surface);
    z-index: -1;
}
.assessment-category:has(> .category-expanded-content) .category-progress::before {
    background: #182a3e;
}
body:not(.dark-mode) .assessment-category:has(> .category-expanded-content) .category-progress::before {
    background: #f3f6f9;
}
.category-toggle {
    color: var(--text-3) !important;
    font-size: 0.85rem !important;
    transition: transform 0.25s !important;
    margin-left: 10px !important;
}
.category-toggle:not(.collapsed) {
    color: var(--brand-green) !important;
    transform: rotate(180deg) !important;
}
.category-expanded-content {
    background: transparent !important;
    border-top: 0.5px solid var(--divider) !important;
    padding: 4px 0 8px !important;
}

/* Rooms — child groups, flat rows */
.room-section {
    background: transparent !important;
    border: none !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05) !important;
    border-radius: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    box-shadow: none !important;
}
.room-section:last-child { border-bottom: none !important; }

/* Base room header — flat, no card */
.room-header-bar {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 8px !important;
    background: transparent !important;
    padding: 11px 16px !important;
    border: none !important;
    border-radius: 0 !important;
    cursor: pointer !important;
}

/* All room headers: name + chevron on one line */
.room-header-bar.room-header-clickable {
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
}

/* Room instances panel — pills inside expanded content */
.room-instances-panel {
    padding: 4px 16px 10px !important;
    background: transparent !important;
}
.custom-name-section {
    padding: 8px 16px 0 !important;
}
.custom-name-section label {
    color: var(--text-2) !important;
    font-size: 0.78rem !important;
}

/* Room headers — flat rows, no card look */
#propertyAssessmentScreen .room-header-bar {
    background: transparent !important;
    border-radius: 0 !important;
    margin: 0 !important;
}
#propertyAssessmentScreen .room-header-bar.room-header-clickable {
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
}
#propertyAssessmentScreen .room-instances-panel {
    background: transparent !important;
}
.room-expand-indicator {
    color: var(--text-3) !important;
    font-size: 0.8rem !important;
    flex-shrink: 0 !important;
    transition: transform 0.2s !important;
}
.room-title-section {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
}
.room-title-section i {
    color: var(--brand-green) !important;
    font-size: 0.85rem !important;
    width: auto !important;
    background: transparent !important;
}
.room-title-section h4 {
    color: var(--text-1) !important;
    font-size: 0.92rem !important;
    font-weight: 600 !important;
    margin: 0 !important;
}
.room-controls {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    flex-shrink: 0 !important;
}
/* Pills wrap inside the instances panel */
.room-instances-panel .room-instances-selector {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 7px !important;
    width: 100% !important;
}
.room-instances-selector {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 7px !important;
}
.room-instance-wrapper {
    display: inline-flex !important;
    align-items: center !important;
    gap: 3px !important;
}
.room-instance-btn {
    background: var(--surface-2) !important;
    border: 0.5px solid var(--border) !important;
    color: var(--text-2) !important;
    border-radius: 99px !important;
    padding: 7px 14px !important;
    font-size: 0.78rem !important;
    font-weight: 600 !important;
    font-family: 'Poppins', sans-serif !important;
    cursor: pointer !important;
    box-shadow: none !important;
}
.room-instance-btn.active {
    background: var(--brand-green) !important;
    border-color: var(--brand-green) !important;
    color: #ffffff !important;
}
.room-instance-btn.completed:not(.active) {
    background: var(--icon-circle-bg) !important;
    border-color: var(--brand-green) !important;
    color: var(--brand-green) !important;
}
.delete-room-instance-btn {
    width: 22px !important;
    height: 22px !important;
    min-width: 22px !important;
    border-radius: 50% !important;
    background: rgba(230,57,70,0.12) !important;
    color: #e63946 !important;
    border: none !important;
    font-size: 9px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
}
.add-room-btn {
    background: transparent !important;
    border: 1.5px dashed var(--border) !important;
    color: var(--text-2) !important;
    border-radius: 99px !important;
    padding: 7px 14px !important;
    font-size: 0.78rem !important;
    font-weight: 600 !important;
    font-family: 'Poppins', sans-serif !important;
}

/* Questions — divider rows */
.assessment-items, .questions-list { padding: 0 !important; }
.assessment-item {
    background: transparent !important;
    border: none !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05) !important;
    border-radius: 0 !important;
    padding: 13px 16px 11px !important;
    margin: 0 !important;
    box-shadow: none !important;
}
.assessment-item:last-child { border-bottom: none !important; }
.item-question, .question-header {
    display: flex !important;
    align-items: flex-start !important;
    justify-content: space-between !important;
    gap: 10px !important;
    margin-bottom: 9px !important;
}
.question-text {
    color: var(--text-1) !important;
    font-size: 0.88rem !important;
    font-weight: 500 !important;
    line-height: 1.45 !important;
    flex: 1 !important;
}
.required-marker { color: #e63946 !important; }
.info-btn, .question-info-btn {
    width: 22px !important;
    height: 22px !important;
    min-width: 22px !important;
    border-radius: 50% !important;
    background: var(--icon-circle-bg) !important;
    color: var(--brand-green) !important;
    border: none !important;
    font-size: 10px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-shadow: none !important;
    flex-shrink: 0 !important;
}

/* Rating dropdown */
.rating-dropdown {
    width: 100% !important;
    background: var(--surface-2) !important;
    color: var(--text-1) !important;
    border: 1px solid var(--border) !important;
    border-radius: 10px !important;
    padding: 11px 36px 11px 12px !important;
    font-size: 0.88rem !important;
    font-family: 'Poppins', sans-serif !important;
    -webkit-appearance: none !important;
    appearance: none !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%235a85a0' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 12px center !important;
}
.item-rating.rating-excellent .rating-dropdown { border-color: #FFD700 !important; color: #FFD700 !important; }
.item-rating.rating-good     .rating-dropdown { border-color: #28A745 !important; color: #28A745 !important; }
.item-rating.rating-fair     .rating-dropdown { border-color: #F18F01 !important; color: #F18F01 !important; }
.item-rating.rating-poor     .rating-dropdown { border-color: #E63946 !important; color: #E63946 !important; }
.item-rating.rating-na       .rating-dropdown { border-color: var(--text-3) !important; color: var(--text-3) !important; }

/* Photo + notes actions */
.item-photos { margin-top: 9px !important; }
.photo-actions {
    display: flex !important;
    gap: 8px !important;
}
.photo-btn {
    flex: 1 !important;
    background: transparent !important;
    border: 1.5px dashed rgba(90,133,160,0.4) !important;
    color: var(--text-2) !important;
    border-radius: 9px !important;
    padding: 9px 0 !important;
    font-size: 0.78rem !important;
    font-weight: 600 !important;
    font-family: 'Poppins', sans-serif !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    box-shadow: none !important;
}
.photo-btn i { color: var(--text-2) !important; font-size: 0.8rem !important; }
.capture-btn {
    border-color: rgba(29,158,117,0.5) !important;
    color: var(--brand-green) !important;
}
.capture-btn i { color: var(--brand-green) !important; }
.note-btn {
    flex: 0 0 auto !important;
    padding: 9px 14px !important;
    border-color: rgba(90,133,160,0.35) !important;
    color: var(--text-2) !important;
}
.photo-preview img {
    width: 44px !important;
    height: 44px !important;
    border-radius: 8px !important;
    object-fit: cover !important;
    border: 0.5px solid var(--border) !important;
}
.add-notes-btn {
    width: 100% !important;
    margin-top: 8px !important;
    background: transparent !important;
    border: 1.5px dashed var(--border) !important;
    color: var(--text-2) !important;
    border-radius: 9px !important;
    padding: 9px 0 !important;
    font-size: 0.78rem !important;
    font-weight: 600 !important;
    font-family: 'Poppins', sans-serif !important;
}
.add-notes-btn.has-notes {
    border-style: solid !important;
    border-color: var(--brand-green) !important;
    color: var(--brand-green) !important;
    background: var(--icon-circle-bg) !important;
}

/* Notes textareas */
.room-notes-textarea, .question-textarea {
    width: 100% !important;
    background: var(--surface-2) !important;
    color: var(--text-1) !important;
    border: 1px solid var(--border) !important;
    border-radius: 10px !important;
    padding: 11px 12px !important;
    font-size: 0.85rem !important;
    font-family: 'Poppins', sans-serif !important;
    min-height: 70px !important;
}
.room-notes-section { margin-top: 10px !important; }

/* Room completion */
.room-completion-section {
    background: transparent !important;
    border: none !important;
    padding: 10px 0 0 0 !important;
}
.completion-bar {
    height: 6px !important;
    border-radius: 99px !important;
    background: var(--prog-bg) !important;
    overflow: hidden !important;
}
.completion-fill { background: var(--brand-green) !important; border-radius: 99px !important; }
.completion-text, .completion-status {
    color: var(--text-3) !important;
    font-size: 0.72rem !important;
}

/* ── Tooltip / info modal ── */
.assessment-info-modal {
    background: rgba(5, 10, 18, 0.8) !important;
    backdrop-filter: blur(3px);
}
.info-modal-content, .modal-content {
    background: var(--surface) !important;
    border: 0.5px solid var(--border) !important;
    border-radius: 16px !important;
    max-width: 400px !important;
    box-shadow: 0 20px 60px rgba(0,0,0,0.45) !important;
}
.info-header, .modal-header {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 15px 16px !important;
    border-bottom: 0.5px solid var(--divider) !important;
    background: transparent !important;
}
.info-header h3, .modal-header h3 {
    color: var(--text-1) !important;
    font-size: 0.95rem !important;
    font-weight: 600 !important;
    margin: 0 !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
}
.info-header i, .modal-header i { color: var(--brand-green) !important; }
.modal-close-btn {
    width: 30px !important;
    height: 30px !important;
    border-radius: 50% !important;
    background: var(--surface-2) !important;
    color: var(--text-2) !important;
    border: 0.5px solid var(--border) !important;
    font-size: 12px !important;
}
.info-content, .modal-body {
    padding: 16px !important;
    color: var(--text-2) !important;
    font-size: 0.85rem !important;
    line-height: 1.6 !important;
    background: transparent !important;
}
.info-content h4, .modal-body h4 {
    color: var(--text-1) !important;
    font-size: 0.88rem !important;
}
.info-content i.fa-lightbulb { color: #f5b942 !important; }

/* Save / cancel / confirm modal buttons */
.save-modal-content button, .cancel-modal-content button,
.confirm-modal-content button, .warning-modal-content button {
    border-radius: 11px !important;
    padding: 12px 16px !important;
    font-size: 13.5px !important;
    font-weight: 600 !important;
    font-family: 'Poppins', sans-serif !important;
}

/* ═══════════════════════════════════════════════════════════════
   v19 — ASSESSMENT SCREEN: compact items, inline tooltips,
   flat wrappers, light-mode legibility, header buttons
   ═══════════════════════════════════════════════════════════════ */

/* ── Question + info button on ONE line, forced ── */
.assessment-item .item-question,
.assessment-item .question-header {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 8px !important;
    margin-bottom: 8px !important;
}
.assessment-item .question-text {
    display: inline !important;
    width: auto !important;
    flex: 1 1 auto !important;
    margin: 0 !important;
    padding: 0 !important;
}
.assessment-item .info-btn {
    position: static !important;
    margin: 0 !important;
    transform: none !important;
}

/* ── Kill wrapper containers: full-width, flat ── */
.item-rating, .question-response {
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    box-shadow: none !important;
    width: 100% !important;
}
.rating-dropdown {
    box-shadow: none !important;
    margin: 0 !important;
}
.assessment-items, .questions-list, .questions-section,
.questions-expanded-content {
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
    margin: 0 !important;
    box-shadow: none !important;
}
.category-expanded-content { padding: 2px 14px 12px !important; }
.assessment-item { padding: 12px 0 !important; }

/* ── Photos: compact — no giant placeholder, slim controls ── */
.item-photos { margin-top: 8px !important; }
.item-photos .no-photos { display: none !important; }
.item-photos .photo-preview {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 6px !important;
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
    margin: 6px 0 0 0 !important;
    min-height: 0 !important;
    box-shadow: none !important;
}
.item-photos .photo-preview:empty { display: none !important; margin: 0 !important; }
.photo-actions { gap: 8px !important; }
.photo-btn {
    flex: 0 1 auto !important;
    padding: 8px 16px !important;
    font-size: 0.76rem !important;
}
.photo-preview img, .photo-preview .photo-thumb {
    width: 48px !important;
    height: 48px !important;
    border-radius: 8px !important;
    object-fit: cover !important;
    border: 0.5px solid var(--border) !important;
    margin: 0 !important;
}

/* ── Assessment header (setup-section): clean buttons ── */
#propertyAssessmentScreen .property-summary h3 {
    font-size: 1.05rem !important;
    font-weight: 700 !important;
}
#propertyAssessmentScreen .property-summary p {
    font-size: 0.82rem !important;
}
.assessment-progress {
    height: 6px !important;
    border-radius: 99px !important;
    background: var(--prog-bg) !important;
    overflow: hidden !important;
    margin: 10px 0 6px !important;
}
.assessment-results-btn {
    width: 100% !important;
    background: var(--brand-green) !important;
    background-image: none !important;
    color: #ffffff !important;
    border: none !important;
    border-radius: 11px !important;
    padding: 12px !important;
    font-size: 13.5px !important;
    font-weight: 600 !important;
    font-family: 'Poppins', sans-serif !important;
    box-shadow: 0 2px 8px rgba(29,158,117,0.25) !important;
    margin: 8px 0 0 0 !important;
}
.assessment-controls {
    display: flex !important;
    flex-direction: row !important;
    gap: 9px !important;
    margin-top: 9px !important;
}
.save-assessment-btn, .cancel-assessment-btn {
    flex: 1 1 0 !important;
    height: 46px !important;
    border-radius: 11px !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    font-family: 'Poppins', sans-serif !important;
    box-shadow: none !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 7px !important;
}
.save-assessment-btn {
    background: var(--brand-green) !important;
    background-image: none !important;
    color: #ffffff !important;
    border: none !important;
}
.cancel-assessment-btn {
    background: var(--surface) !important;
    background-image: none !important;
    color: var(--text-1) !important;
    border: 1.5px solid var(--border) !important;
}

/* ── LIGHT MODE: assessment screen + info modals fully legible ── */
body:not(.dark-mode) #propertyAssessmentScreen h1,
body:not(.dark-mode) #propertyAssessmentScreen h3:not(.screen-header h3),
body:not(.dark-mode) #propertyAssessmentScreen h4,
body:not(.dark-mode) #propertyAssessmentScreen .question-text,
body:not(.dark-mode) #propertyAssessmentScreen .category-name,
body:not(.dark-mode) #propertyAssessmentScreen .instance-name {
    color: #111827 !important;
}
body:not(.dark-mode) #propertyAssessmentScreen p,
body:not(.dark-mode) #propertyAssessmentScreen .completion-text,
body:not(.dark-mode) #propertyAssessmentScreen .room-item-count {
    color: #4b5563 !important;
}
body:not(.dark-mode) .rating-dropdown,
body:not(.dark-mode) .room-notes-textarea,
body:not(.dark-mode) .question-textarea {
    background: #ffffff !important;
    color: #111827 !important;
}

/* Info/tips modal — light mode readable, both modes polished */
body:not(.dark-mode) .info-modal-content,
body:not(.dark-mode) .modal-content {
    background: #ffffff !important;
}
body:not(.dark-mode) .info-content,
body:not(.dark-mode) .modal-body,
body:not(.dark-mode) .info-content p,
body:not(.dark-mode) .modal-body p,
body:not(.dark-mode) .info-content li,
body:not(.dark-mode) .modal-body li,
body:not(.dark-mode) .info-content span,
body:not(.dark-mode) .modal-body span,
body:not(.dark-mode) .info-content div,
body:not(.dark-mode) .modal-body div {
    color: #4b5563 !important;
}
body:not(.dark-mode) .info-content h3,
body:not(.dark-mode) .info-content h4,
body:not(.dark-mode) .modal-body h3,
body:not(.dark-mode) .modal-body h4,
body:not(.dark-mode) .info-content strong,
body:not(.dark-mode) .modal-body strong,
body:not(.dark-mode) .info-header h3,
body:not(.dark-mode) .modal-header h3 {
    color: #111827 !important;
}
.info-content li, .modal-body li {
    margin-bottom: 8px !important;
    line-height: 1.55 !important;
}
.info-content ul, .modal-body ul { padding-left: 18px !important; }

/* Rating guide blocks inside the info modal (Excellent/Good/Fair/Poor cards) */
.info-content > div, .modal-body > div {
    border-radius: 11px !important;
}

/* v19.1 — custom modal variants + footer (light mode + polish) */
#customModal.modal {
    background: rgba(5, 10, 18, 0.8) !important;
    backdrop-filter: blur(3px);
}
.modal-footer {
    display: flex !important;
    gap: 9px !important;
    padding: 0 16px 16px !important;
    border: none !important;
    background: transparent !important;
}
.modal-footer button {
    flex: 1 !important;
    border-radius: 11px !important;
    padding: 12px !important;
    font-size: 13.5px !important;
    font-weight: 600 !important;
    font-family: 'Poppins', sans-serif !important;
    border: none !important;
    box-shadow: none !important;
}
.modal-footer button:first-child:not(:only-child) {
    background: var(--surface-2) !important;
    color: var(--text-1) !important;
    border: 1.5px solid var(--border) !important;
}
.modal-footer button:last-child {
    background: var(--brand-green) !important;
    color: #ffffff !important;
}
.info-modal-content, .warning-modal-content,
.save-modal-content, .cancel-modal-content, .confirm-modal-content {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    text-align: center !important;
    padding: 4px 0 !important;
}
.info-modal-content .info-icon i { color: var(--brand-green) !important; font-size: 26px !important; }
.warning-modal-content .warning-icon i { color: #f1a008 !important; font-size: 26px !important; }
.save-modal-content .save-icon i { color: var(--brand-green) !important; font-size: 26px !important; }
.cancel-modal-content .cancel-icon i { color: #e63946 !important; font-size: 26px !important; }
.info-modal-content p, .warning-modal-content p,
.save-modal-content p, .cancel-modal-content p, .confirm-modal-content p {
    color: var(--text-2) !important;
    font-size: 0.88rem !important;
    line-height: 1.55 !important;
    margin: 10px 0 0 0 !important;
}
.info-modal-content strong, .warning-modal-content strong,
.save-modal-content strong, .cancel-modal-content strong {
    color: var(--text-1) !important;
}
body:not(.dark-mode) .info-modal-content p,
body:not(.dark-mode) .warning-modal-content p,
body:not(.dark-mode) .save-modal-content p,
body:not(.dark-mode) .cancel-modal-content p,
body:not(.dark-mode) .confirm-modal-content p { color: #4b5563 !important; }
body:not(.dark-mode) .info-modal-content strong,
body:not(.dark-mode) .warning-modal-content strong,
body:not(.dark-mode) .save-modal-content strong,
body:not(.dark-mode) .cancel-modal-content strong { color: #111827 !important; }

/* ═══════════════════════════════════════════════════════════════
   v20 — INFO BUTTON DISCOVERABLE + ASSESSMENT GUIDE POPUP
   (real classes from onboarding.js) + LIGHT MODE COMPLETE
   ═══════════════════════════════════════════════════════════════ */

/* ── Info button: bigger, hugging the text, clearly tappable ── */
.assessment-item .question-text {
    flex: 0 1 auto !important;   /* don't stretch — keeps the icon beside the text */
}
.assessment-item .item-question { gap: 7px !important; }
.assessment-item .info-btn {
    width: 26px !important;
    height: 26px !important;
    min-width: 26px !important;
    font-size: 12px !important;
    background: var(--icon-circle-bg) !important;
    color: var(--brand-green) !important;
    border: 1px solid rgba(29,158,117,0.45) !important;
}

/* ── ASSESSMENT GUIDE POPUP — full restyle ── */
.assessment-guide-modal {
    position: fixed; inset: 0; z-index: 9999;
    background: rgba(5, 10, 18, 0.82) !important;
    backdrop-filter: blur(3px);
    display: flex; align-items: center; justify-content: center;
    padding: 18px 14px;
}
.assessment-guide-content {
    background: var(--surface) !important;
    border: 0.5px solid var(--border) !important;
    border-radius: 18px !important;
    width: 100% !important;
    max-width: 100% !important;
    max-height: 90vh !important;
    overflow-y: auto !important;
    position: relative !important;
    box-shadow: 0 20px 60px rgba(0,0,0,0.5) !important;
    padding: 0 !important;
}
.assessment-guide-header {
    text-align: center !important;
    padding: 26px 20px 16px !important;
    background: transparent !important;
    border-bottom: 0.5px solid var(--divider) !important;
}
.assessment-guide-icon {
    width: 48px !important;
    height: 48px !important;
    margin: 0 auto 10px !important;
    border-radius: 13px !important;
    background: var(--icon-circle-bg) !important;
    color: var(--brand-green) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 20px !important;
    box-shadow: none !important;
}
.assessment-guide-header h2 {
    color: var(--text-1) !important;
    font-size: 1.1rem !important;
    font-weight: 700 !important;
    margin: 0 0 4px !important;
    text-shadow: none !important;
}
.assessment-guide-header p {
    color: var(--text-2) !important;
    font-size: 0.8rem !important;
    margin: 0 !important;
    line-height: 1.5 !important;
}
.assessment-guide-body { padding: 14px 16px 18px !important; background: transparent !important; }
.assessment-guide-body .welcome-intro {
    background: var(--surface-2) !important;
    border: 0.5px solid var(--border) !important;
    border-left: 3px solid var(--brand-green) !important;
    border-radius: 11px !important;
    padding: 11px 13px !important;
    margin-bottom: 12px !important;
}
.assessment-guide-body .welcome-intro p { color: var(--text-2) !important; font-size: 0.82rem !important; margin: 0 !important; }
.assessment-guide-body .welcome-intro strong { color: var(--text-1) !important; }

/* Rating cards */
.guide-rating-system { display: block !important; }
.rating-item {
    background: var(--surface-2) !important;
    border: 0.5px solid var(--border) !important;
    border-left-width: 3px !important;
    border-radius: 11px !important;
    padding: 11px 13px !important;
    margin-bottom: 8px !important;
    box-shadow: none !important;
}
.rating-item.excellent { border-left-color: #06D6A0 !important; }
.rating-item.good      { border-left-color: #28A745 !important; }
.rating-item.fair      { border-left-color: #F18F01 !important; }
.rating-item.poor      { border-left-color: #E63946 !important; }
.rating-item.na        { border-left-color: var(--text-3) !important; }
.rating-header {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    margin-bottom: 3px !important;
}
.rating-label {
    color: var(--text-1) !important;
    font-size: 0.88rem !important;
    font-weight: 700 !important;
}
.rating-desc {
    color: var(--text-2) !important;
    font-size: 0.78rem !important;
    line-height: 1.5 !important;
}

/* Tips sections */
.guide-tips-section {
    background: var(--surface-2) !important;
    background-image: none !important;
    border: 0.5px solid var(--border) !important;
    border-radius: 11px !important;
    padding: 12px 13px !important;
    margin-top: 10px !important;
}
.guide-tips-section h4 {
    color: var(--brand-green) !important;
    font-size: 0.85rem !important;
    font-weight: 700 !important;
    margin: 0 0 8px !important;
    display: flex !important;
    align-items: center !important;
    gap: 7px !important;
}
.guide-tips-section ul { margin: 0 !important; padding-left: 16px !important; }
.guide-tips-section li {
    color: var(--text-2) !important;
    font-size: 0.78rem !important;
    line-height: 1.55 !important;
    margin-bottom: 7px !important;
    opacity: 1 !important;
}
.guide-tips-section li strong { color: var(--text-1) !important; }
.guide-tips-section li:last-child { margin-bottom: 0 !important; }

/* Guide popup buttons (if present) */
.assessment-guide-body .welcome-btn-primary,
.assessment-guide-content button.primary-button {
    width: 100% !important;
    background: var(--brand-green) !important;
    color: #fff !important;
    border: none !important;
    border-radius: 11px !important;
    padding: 13px !important;
    font-size: 13.5px !important;
    font-weight: 600 !important;
    margin-top: 12px !important;
}

/* ── LIGHT MODE for the guide popup — explicit, nothing inherited ── */
body:not(.dark-mode) .assessment-guide-content { background: #ffffff !important; }
body:not(.dark-mode) .assessment-guide-header h2 { color: #111827 !important; }
body:not(.dark-mode) .assessment-guide-header p { color: #4b5563 !important; }
body:not(.dark-mode) .assessment-guide-body .welcome-intro { background: #f8fafc !important; }
body:not(.dark-mode) .assessment-guide-body .welcome-intro p { color: #4b5563 !important; }
body:not(.dark-mode) .assessment-guide-body .welcome-intro strong { color: #111827 !important; }
body:not(.dark-mode) .rating-item { background: #f8fafc !important; }
body:not(.dark-mode) .rating-label { color: #111827 !important; }
body:not(.dark-mode) .rating-desc { color: #4b5563 !important; }
body:not(.dark-mode) .guide-tips-section { background: #f8fafc !important; }
body:not(.dark-mode) .guide-tips-section li { color: #4b5563 !important; }
body:not(.dark-mode) .guide-tips-section li strong { color: #111827 !important; }
body:not(.dark-mode) .guide-tips-section h4 { color: #157a5b !important; }

/* ── LIGHT MODE blanket for the assessment screen (correct ID) ── */
body:not(.dark-mode) #propertyAssessmentScreen .category-name,
body:not(.dark-mode) #propertyAssessmentScreen .question-text,
body:not(.dark-mode) #propertyAssessmentScreen h3,
body:not(.dark-mode) #propertyAssessmentScreen h4,
body:not(.dark-mode) #propertyAssessmentScreen .room-title-section h4 {
    color: #111827 !important;
}
body:not(.dark-mode) #propertyAssessmentScreen p,
body:not(.dark-mode) #propertyAssessmentScreen span:not(.rating-label):not(button span),
body:not(.dark-mode) #propertyAssessmentScreen .completion-text,
body:not(.dark-mode) #propertyAssessmentScreen .progress-text {
    color: #4b5563 !important;
}
body:not(.dark-mode) #propertyAssessmentScreen .room-instance-btn { color: #4b5563 !important; }
body:not(.dark-mode) #propertyAssessmentScreen .room-instance-btn.active { color: #ffffff !important; }
body:not(.dark-mode) #propertyAssessmentScreen .room-instance-btn.completed:not(.active) { color: #157a5b !important; }
body:not(.dark-mode) #propertyAssessmentScreen .rating-dropdown,
body:not(.dark-mode) #propertyAssessmentScreen .room-notes-textarea {
    background: #ffffff !important;
    color: #111827 !important;
}
body:not(.dark-mode) #propertyAssessmentScreen .photo-btn { color: #4b5563 !important; }
body:not(.dark-mode) #propertyAssessmentScreen .add-notes-btn { color: #4b5563 !important; }
body:not(.dark-mode) #propertyAssessmentScreen .add-notes-btn.has-notes { color: #157a5b !important; }

/* ═══════════════════════════════════════════════════════════════
   v21 — IMPORTANT QUESTIONS: info icon beside the text, same size
   ═══════════════════════════════════════════════════════════════ */
.question-item .question-header {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 7px !important;
    margin-bottom: 8px !important;
}
.question-item .question-header h5 {
    flex: 0 1 auto !important;   /* hug the text — icon sits right after it */
    color: var(--text-1) !important;
    font-size: 0.88rem !important;
    font-weight: 500 !important;
    line-height: 1.45 !important;
    margin: 0 !important;
    padding: 0 !important;
}
.question-item .question-info-btn {
    width: 26px !important;
    height: 26px !important;
    min-width: 26px !important;
    border-radius: 50% !important;
    background: var(--icon-circle-bg) !important;
    color: var(--brand-green) !important;
    border: 1px solid rgba(29,158,117,0.45) !important;
    font-size: 12px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
    position: static !important;
    margin: 0 !important;
    box-shadow: none !important;
}
.question-item {
    background: transparent !important;
    border: none !important;
    border-bottom: 0.5px solid var(--divider) !important;
    border-radius: 0 !important;
    padding: 12px 0 !important;
    margin: 0 !important;
    box-shadow: none !important;
}
.question-item:last-child { border-bottom: none !important; }
body:not(.dark-mode) .question-item .question-header h5 { color: #111827 !important; }

/* ═══════════════════════════════════════════════════════════════
   v22 — CLEAR ASSESSMENT button (Save/Cancel removed: auto-save)
   ═══════════════════════════════════════════════════════════════ */
.assessment-controls {
    display: flex !important;
    margin-top: 9px !important;
}
.clear-assessment-btn {
    flex: 1 !important;
    height: 44px !important;
    background: transparent !important;
    color: #e63946 !important;
    border: 1.5px solid rgba(230,57,70,0.45) !important;
    border-radius: 11px !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    font-family: 'Poppins', sans-serif !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 7px !important;
    box-shadow: none !important;
}
.clear-assessment-btn:active { background: rgba(230,57,70,0.08) !important; }
body:not(.dark-mode) .clear-assessment-btn {
    color: #d12d3a !important;
    border-color: rgba(209,45,58,0.4) !important;
}

/* ═══════════════════════════════════════════════════════════════
   v23 — SETTINGS: clean native-app layout, no card-within-card
   ═══════════════════════════════════════════════════════════════ */
.settings-page {
    padding-bottom: max(110px, env(safe-area-inset-bottom, 0px) + 90px);
}

/* App identity strip */
.settings-identity {
    text-align: center;
    padding: 32px 16px 22px;
    position: relative;
}
.settings-app-icon {
    position: relative;
    display: inline-block;
    margin-bottom: 12px;
}
.settings-app-icon .fa-home {
    font-size: 42px;
    color: var(--brand-green);
}
.settings-app-icon .sai-mag {
    position: absolute;
    bottom: -4px;
    right: -10px;
    font-size: 18px;
    color: var(--text-2);
}
.settings-identity h2 {
    color: var(--text-1);
    font-size: 1.05rem;
    font-weight: 700;
    margin: 0 0 3px 0;
}
.settings-identity p {
    color: var(--text-3);
    font-size: 0.75rem;
    margin: 0;
}

/* Section labels */
.stg-section-label {
    color: var(--text-3);
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    padding: 0 16px 7px;
    margin-top: 4px;
}

/* Card: one background block per group */
.stg-card {
    background: var(--surface);
    border-top: 0.5px solid var(--border);
    border-bottom: 0.5px solid var(--border);
    margin: 0 0 18px 0;
}

/* Rows */
.stg-row {
    display: flex;
    align-items: center;
    gap: 13px;
    padding: 13px 16px;
    cursor: pointer;
    background: transparent;
}
.stg-row:active { background: var(--surface-2); }
.stg-row-icon {
    width: 34px;
    height: 34px;
    min-width: 34px;
    border-radius: 9px;
    background: var(--icon-circle-bg);
    color: var(--brand-green);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
}
.stg-row-info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.stg-row-title {
    color: var(--text-1);
    font-size: 0.92rem;
    font-weight: 600;
    line-height: 1.2;
}
.stg-row-sub {
    color: var(--text-3);
    font-size: 0.75rem;
    line-height: 1.3;
}
.stg-chevron {
    color: var(--text-3);
    font-size: 0.72rem;
}

/* Theme row: icon + info + segmented control on one line */
.stg-row-theme { flex-wrap: wrap; gap: 10px; cursor: default; }
.stg-row-theme:active { background: transparent; }
.stg-row-theme .stg-row-info { flex: 1; min-width: 80px; }
.stg-row-theme .theme-segments { flex-shrink: 0; }

/* Hairline divider between rows */
.stg-divider {
    height: 0.5px;
    background: var(--divider);
    margin: 0 16px 0 63px; /* indent past icon */
}

/* Danger row */
.stg-icon-danger {
    background: rgba(230,57,70,0.10) !important;
    color: #e63946 !important;
}
.stg-title-danger { color: #e63946 !important; }
.stg-row-danger:active { background: rgba(230,57,70,0.06) !important; }

/* Kill old settings-group styles for this screen only */
#settingsScreen .settings-group { display: none !important; }
#settingsScreen .section-label { display: none !important; }
#settingsScreen .appearance-control { display: none !important; }

/* ═══════════════════════════════════════════════════════════════
   v24 — NOTIFICATION TOGGLE in Settings
   ═══════════════════════════════════════════════════════════════ */
.stg-row-toggle { cursor: pointer !important; }
.stg-toggle {
    width: 46px;
    height: 26px;
    min-width: 46px;
    border-radius: 13px;
    background: var(--border);
    position: relative;
    transition: background 0.22s;
    flex-shrink: 0;
}
.stg-toggle.on { background: var(--brand-green); }
.stg-toggle-knob {
    position: absolute;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #ffffff;
    top: 3px;
    left: 3px;
    transition: transform 0.22s;
    box-shadow: 0 1px 4px rgba(0,0,0,0.25);
}
.stg-toggle.on .stg-toggle-knob { transform: translateX(20px); }

/* Calendar + reminder buttons on overview screen */
.cal-btns { display: flex; gap: 8px; flex-wrap: wrap; }
.remind-btn {
    background: var(--icon-circle-bg) !important;
    color: var(--brand-green) !important;
    border: 0.5px solid var(--border) !important;
}
.remind-btn i { color: var(--brand-green) !important; }
/* ═══════════════════════════════════════════════════════════════
   v26 — LIGHT MODE button colours + PDF EXPORT modal redesign
   ═══════════════════════════════════════════════════════════════ */

/* (v26 grey button override removed — replaced by v28) */

/* ── PDF Export Modal ── */
.pdf-export-modal {
    position: fixed; inset: 0; z-index: 9999;
    display: flex; align-items: flex-end; justify-content: center;
    padding: 0;
}
.pdf-export-modal.hidden { display: none !important; }
.pdf-modal-overlay {
    position: absolute; inset: 0;
    background: rgba(5,10,18,0.75);
    backdrop-filter: blur(3px);
}
.pdf-modal-content {
    position: relative; z-index: 1;
    background: var(--surface) !important;
    border: 0.5px solid var(--border) !important;
    border-radius: 20px 20px 0 0 !important;
    width: 100%; max-width: 500px;
    max-height: 92vh; overflow-y: auto;
    box-shadow: 0 -8px 40px rgba(0,0,0,0.4) !important;
    padding: 0 !important;
}
.pdf-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 16px 14px;
    border-bottom: 0.5px solid var(--divider);
    background: transparent !important;
}
.pdf-modal-title-row {
    display: flex; align-items: center; gap: 12px;
}
.pdf-modal-icon {
    width: 38px; height: 38px;
    border-radius: 10px;
    background: rgba(230,57,70,0.12);
    color: #e63946;
    display: flex; align-items: center; justify-content: center;
    font-size: 16px;
}
.pdf-modal-header h3 {
    color: var(--text-1) !important;
    font-size: 1rem !important;
    font-weight: 600 !important;
    margin: 0 0 2px !important;
}
.pdf-modal-header p {
    color: var(--text-3) !important;
    font-size: 0.72rem !important;
    margin: 0 !important;
}
.pdf-modal-close {
    width: 30px; height: 30px;
    border-radius: 50%;
    background: var(--surface-2) !important;
    color: var(--text-2) !important;
    border: 0.5px solid var(--border) !important;
    font-size: 12px;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
}
.pdf-modal-body { padding: 16px; }

/* Fields */
.pdf-field { margin-bottom: 14px; }
.pdf-label {
    display: block;
    color: var(--text-1) !important;
    font-size: 0.82rem !important;
    font-weight: 600 !important;
    margin-bottom: 6px;
}
.pdf-optional {
    color: var(--text-3) !important;
    font-weight: 400 !important;
    font-size: 0.72rem !important;
}
.pdf-input {
    width: 100%;
    background: var(--surface-2) !important;
    color: var(--text-1) !important;
    border: 1px solid var(--border) !important;
    border-radius: 10px !important;
    padding: 11px 12px !important;
    font-size: 0.88rem !important;
    font-family: 'Poppins', sans-serif !important;
}
.pdf-input:focus {
    border-color: var(--brand-green) !important;
    box-shadow: 0 0 0 3px rgba(29,158,117,0.12) !important;
    outline: none !important;
}

/* Section labels */
.pdf-section-label {
    color: var(--text-3) !important;
    font-size: 0.68rem !important;
    font-weight: 600 !important;
    letter-spacing: 0.08em !important;
    text-transform: uppercase !important;
    margin: 16px 0 8px !important;
}

/* Toggle rows */
.pdf-toggle-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 11px 0;
    border-bottom: 0.5px solid var(--divider);
}
.pdf-toggle-row:last-of-type { border-bottom: none; }
.pdf-toggle-info { flex: 1; }
.pdf-toggle-title {
    display: block;
    color: var(--text-1) !important;
    font-size: 0.88rem !important;
    font-weight: 500 !important;
    margin-bottom: 2px;
}
.pdf-toggle-sub {
    display: block;
    color: var(--text-3) !important;
    font-size: 0.72rem !important;
}

/* Toggle switch */
.pdf-switch {
    position: relative;
    display: inline-block;
    width: 44px; height: 24px;
    flex-shrink: 0;
}
.pdf-switch input { opacity: 0; width: 0; height: 0; }
.pdf-switch-slider {
    position: absolute; inset: 0;
    background: var(--border);
    border-radius: 99px;
    transition: background 0.2s;
    cursor: pointer;
}
.pdf-switch-slider::before {
    content: '';
    position: absolute;
    width: 18px; height: 18px;
    border-radius: 50%;
    background: #ffffff;
    top: 3px; left: 3px;
    transition: transform 0.2s;
    box-shadow: 0 1px 3px rgba(0,0,0,0.25);
}
.pdf-switch input:checked + .pdf-switch-slider { background: var(--brand-green); }
.pdf-switch input:checked + .pdf-switch-slider::before { transform: translateX(20px); }

/* Logo upload */
.pdf-logo-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
}
.pdf-logo-label {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 8px;
    background: var(--surface-2) !important;
    border: 1.5px dashed var(--border) !important;
    border-radius: 10px !important;
    padding: 10px 12px !important;
    color: var(--text-2) !important;
    font-size: 0.82rem !important;
    cursor: pointer;
}
.pdf-logo-label i { color: var(--brand-green) !important; }
.pdf-input-file { display: none; }
.pdf-remove-logo {
    width: 36px; height: 36px;
    border-radius: 9px;
    background: rgba(230,57,70,0.1) !important;
    color: #e63946 !important;
    border: none !important;
    font-size: 13px;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
}
.pdf-logo-preview {
    display: flex; align-items: center; gap: 10px;
    background: var(--surface-2) !important;
    border: 0.5px solid var(--border) !important;
    border-radius: 10px !important;
    padding: 10px 12px !important;
    margin-bottom: 4px;
}
.pdf-logo-preview.hidden { display: none; }
.pdf-logo-preview img { width: 40px; height: 40px; object-fit: contain; border-radius: 6px; }
.pdf-logo-preview-label { color: var(--text-2) !important; font-size: 0.78rem !important; }

/* Footer buttons */
.pdf-modal-footer {
    display: flex;
    gap: 9px;
    padding: 12px 16px max(24px, env(safe-area-inset-bottom, 16px));
    border-top: 0.5px solid var(--divider);
    background: transparent;
}
.pdf-btn-cancel {
    flex: 1;
    height: 48px;
    background: var(--surface-2) !important;
    color: var(--text-1) !important;
    border: 1.5px solid var(--border) !important;
    border-radius: 12px !important;
    font-size: 13.5px !important;
    font-weight: 600 !important;
    font-family: 'Poppins', sans-serif !important;
}
.pdf-btn-download {
    flex: 2;
    height: 48px;
    background: #e63946 !important;
    color: #ffffff !important;
    border: none !important;
    border-radius: 12px !important;
    font-size: 13.5px !important;
    font-weight: 600 !important;
    font-family: 'Poppins', sans-serif !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 7px !important;
    box-shadow: 0 2px 8px rgba(230,57,70,0.3) !important;
}

/* Light mode overrides */
body:not(.dark-mode) .pdf-modal-content { background: #ffffff !important; }
body:not(.dark-mode) .pdf-label { color: #111827 !important; }
body:not(.dark-mode) .pdf-toggle-title { color: #111827 !important; }
body:not(.dark-mode) .pdf-input { background: #f8fafc !important; color: #111827 !important; }
body:not(.dark-mode) .pdf-logo-label { background: #f8fafc !important; color: #4b5563 !important; }
body:not(.dark-mode) .pdf-logo-preview { background: #f8fafc !important; }
body:not(.dark-mode) .pdf-modal-header h3 { color: #111827 !important; }

/* ═══════════════════════════════════════════════════════════════
   v27 — PDF MODAL: std-size buttons, logo preview fix
   REPORT: rating-chip filters
   ═══════════════════════════════════════════════════════════════ */

/* ── Fix: logo preview was using .show but CSS hid via .hidden ── */
.pdf-logo-preview { display: flex !important; }
.pdf-logo-preview.hidden { display: none !important; }

/* ── Standard-size footer buttons (match app-wide 50px) ── */
.pdf-modal-footer {
    flex-direction: column !important;
    gap: 10px !important;
}
.pdf-btn-cancel, .pdf-btn-download {
    flex: none !important;
    width: 100% !important;
    height: 50px !important;
    border-radius: 12px !important;
    font-size: 14px !important;
}
.pdf-btn-download { order: -1; } /* primary action on top */

/* ── Save-confirmation modal (reuses save-modal-content) ── */
.save-modal-content .save-icon i { font-size: 30px !important; }
.save-modal-content p:first-of-type { margin-top: 8px !important; }

/* ═══════════════════════════════════════════════════════════════
   REPORT RATING FILTER
   ═══════════════════════════════════════════════════════════════ */

/* Chips become buttons — keep visual style, add interactivity */
.rpt-chip {
    border: none;
    cursor: pointer;
    font-family: 'Poppins', sans-serif;
    transition: transform 0.12s, box-shadow 0.12s;
}
.rpt-chip:active { transform: scale(0.97); }
.rpt-chip.active {
    box-shadow: 0 0 0 2px currentColor inset;
    font-weight: 700;
}

/* Filter status bar */
.rpt-filter-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    background: var(--icon-circle-bg);
    border: 0.5px solid var(--brand-green);
    border-radius: 11px;
    padding: 9px 13px;
    margin-top: 10px;
}
.rpt-filter-bar.hidden { display: none; }
.rpt-filter-label {
    color: var(--text-1);
    font-size: 0.8rem;
}
.rpt-filter-label strong { color: var(--brand-green); }
.rpt-filter-clear {
    background: transparent;
    color: var(--brand-green);
    border: none;
    font-size: 0.78rem;
    font-weight: 600;
    font-family: 'Poppins', sans-serif;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 8px;
    flex-shrink: 0;
}

/* Hidden items/rooms while filtering */
.rpt-item-hidden, .rpt-room-hidden { display: none !important; }

/* Category with no matches for the active filter — dim it */
.rpt-acc-filtered-empty .rpt-acc-header { opacity: 0.4; }

/* ═══════════════════════════════════════════════════════════════
   v28 — OVERVIEW BUTTONS: correct app palette (no grey)
   IMPORTANT QUESTIONS: clear dropdown
   ═══════════════════════════════════════════════════════════════ */

/* ── Edit / Add to Calendar / Set Reminder — use app's brand colours ──
   Edit  = brand-green outline (matches "Edit Property" pattern elsewhere)
   Add to Calendar = solid brand-green (primary action)
   Set Reminder = soft green-tinted ghost (secondary, consistent with
   .remind-btn used on the action-button row at the bottom) */
.add-calendar-btn,
.edit-assessment-date-btn,
.remind-btn {
    height: 48px !important;
    border-radius: 12px !important;
    font-size: 13.5px !important;
    font-weight: 600 !important;
    font-family: 'Poppins', sans-serif !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    width: 100% !important;
    box-shadow: none !important;
}

.add-calendar-btn {
    background: var(--brand-green) !important;
    color: #ffffff !important;
    border: none !important;
    box-shadow: 0 2px 8px rgba(29,158,117,0.25) !important;
}
.add-calendar-btn i { color: #ffffff !important; }

.edit-assessment-date-btn {
    background: transparent !important;
    color: var(--brand-green) !important;
    border: 1.5px solid var(--brand-green) !important;
}
.edit-assessment-date-btn i { color: var(--brand-green) !important; }

.remind-btn {
    background: var(--icon-circle-bg) !important;
    color: var(--brand-green) !important;
    border: 0.5px solid var(--brand-green) !important;
}
.remind-btn i { color: var(--brand-green) !important; }

/* Stack the three buttons with consistent gaps */
.property-sale-link-area .cal-btns,
.financial-overview .cal-btns {
    display: flex !important;
    flex-direction: column !important;
    gap: 9px !important;
}

/* ════════════════════════════════════════
   IMPORTANT QUESTIONS — clear dropdown
   ════════════════════════════════════════ */
.questions-section {
    background: var(--surface) !important;
    border-top: 0.5px solid var(--border) !important;
    border-bottom: 0.5px solid var(--border) !important;
    border-radius: 0 !important;
    margin: 0 0 8px 0 !important;
    box-shadow: none !important;
    overflow: hidden !important;
}
.questions-section.open {
    background: #182a3e !important;
}
body:not(.dark-mode) .questions-section.open {
    background: #f3f6f9 !important;
}

.questions-header {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    padding: 14px 16px !important;
    cursor: pointer !important;
    background: transparent !important;
    border: none !important;
    text-align: left !important;
}
.questions-header-icon {
    width: 34px !important;
    height: 34px !important;
    min-width: 34px !important;
    border-radius: 10px !important;
    background: var(--icon-circle-bg) !important;
    color: var(--brand-green) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 14px !important;
}
.questions-header-info { flex: 1 !important; min-width: 0 !important; }
.questions-header h3 {
    color: var(--text-1) !important;
    font-size: 0.95rem !important;
    font-weight: 600 !important;
    margin: 0 0 2px !important;
}
.questions-header p {
    color: var(--text-3) !important;
    font-size: 0.75rem !important;
    margin: 0 !important;
}
.questions-header-count {
    background: var(--icon-circle-bg) !important;
    color: var(--brand-green) !important;
    font-size: 0.7rem !important;
    font-weight: 700 !important;
    border-radius: 99px !important;
    padding: 3px 9px !important;
    flex-shrink: 0 !important;
}
.questions-chevron {
    color: var(--text-3) !important;
    font-size: 0.85rem !important;
    transition: transform 0.25s !important;
    flex-shrink: 0 !important;
}
.questions-section.open .questions-chevron {
    color: var(--brand-green) !important;
    transform: rotate(180deg) !important;
}

body:not(.dark-mode) .questions-header h3 { color: #111827 !important; }
body:not(.dark-mode) .questions-header p { color: #9ca3af !important; }

/* ═══════════════════════════════════════════════════════════════
   v29 — IMPORTANT QUESTIONS expanded content: clean, compact
   (header from v28 is correct and untouched — only the body below)
   ═══════════════════════════════════════════════════════════════ */

.questions-list {
    padding: 0 16px 14px !important;
    background: transparent !important;
}

.question-item {
    padding: 13px 0 !important;
    margin: 0 !important;
    border-bottom: 0.5px solid var(--divider) !important;
    border-radius: 0 !important;
    background: transparent !important;
}
.question-item:last-child { border-bottom: none !important; }

.question-item .question-header {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 8px !important;
    margin: 0 0 8px 0 !important;
    text-align: left !important;
}
.question-item .question-header h5 {
    flex: 0 1 auto !important;
    color: var(--text-1) !important;
    font-size: 0.86rem !important;
    font-weight: 500 !important;
    line-height: 1.4 !important;
    margin: 0 !important;
    text-align: left !important;
}
.question-item .required-marker {
    color: #e63946 !important;
    font-size: 0.86rem !important;
    margin-left: 1px !important;
}
.question-item .question-info-btn {
    width: 24px !important;
    height: 24px !important;
    min-width: 24px !important;
    border-radius: 50% !important;
    background: var(--icon-circle-bg) !important;
    color: var(--brand-green) !important;
    border: 1px solid rgba(29,158,117,0.4) !important;
    font-size: 11px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
    box-shadow: none !important;
}

.question-item .question-response {
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}
.question-item .question-textarea {
    width: 100% !important;
    min-height: 56px !important;
    background: var(--surface-2) !important;
    color: var(--text-1) !important;
    border: 1px solid var(--border) !important;
    border-radius: 10px !important;
    padding: 10px 12px !important;
    font-size: 0.84rem !important;
    font-family: 'Poppins', sans-serif !important;
    resize: vertical !important;
    box-shadow: none !important;
}
.question-item .question-textarea::placeholder { color: var(--text-3) !important; }
.question-item .question-textarea:focus {
    border-color: var(--brand-green) !important;
    box-shadow: 0 0 0 3px rgba(29,158,117,0.12) !important;
    outline: none !important;
}

body:not(.dark-mode) .question-item .question-header h5 { color: #111827 !important; }
body:not(.dark-mode) .question-item .question-textarea {
    background: #ffffff !important;
    color: #111827 !important;
    border-color: var(--border) !important;
}

/* ═══════════════════════════════════════════════════════════════
   v30 — APP BANNER LOGO in top bar (replaces text wordmark)
   ═══════════════════════════════════════════════════════════════ */
.app-top-bar .logo-mark {
    display: flex;
    align-items: center;
    flex: 1;
    min-width: 0;
}
.app-banner-logo {
    height: 50px;
    width: auto;
    max-width: 74%;
    object-fit: contain;
    display: block;
}
/* Preserve status bar clearance (28px) while giving the banner room.
   Do NOT override padding-top here — v3's calc(14px + 28px) must stand. */
/* removed — replaced by position:fixed approach below */

/* ── Loading / splash screen: banner replaces icon + text ── */
.loading-logo {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}
.loading-banner-logo {
    height: 64px;
    width: auto;
    max-width: 80vw;
    object-fit: contain;
}
.loading-icon, .loading-text { display: none !important; }

/* ── Welcome modal hero: banner replaces icon + heading + tagline ── */
.hbgw-hero {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-direction: column !important;
}
/* FIXED: this previously hid .hbgw-logo / .hbgw-hero h2 / .hbgw-tagline
   on the assumption a .hbgw-banner-logo <img> replaced them — but no
   such banner image element exists in this modal's actual HTML
   (onboarding.js), so hiding these left the hero section empty with
   no heading at all. Restored. */
.hbgw-banner-logo {
    height: 56px;
    width: auto;
    max-width: 85%;
    object-fit: contain;
    margin-bottom: 4px;
}

/* ── Settings identity: banner already in top bar, just show version ── */
.settings-identity {
    text-align: center;
    padding: 18px 16px 14px;
}
.settings-version {
    color: var(--text-3);
    font-size: 0.75rem;
    margin: 0;
}
.settings-app-icon { display: none !important; }

/* ═══════════════════════════════════════════════════════════════
   v31 — STICKY BANNER (bigger) + remove duplicate calculator title
   ═══════════════════════════════════════════════════════════════ */

/* ── Banner: bigger, and the top bar stays pinned on scroll ── */
.app-banner-logo {
    height: 58px !important;
    max-width: 76% !important;
}
/* removed — replaced by position:fixed approach below */

/* ── Standalone calculator: remove the duplicate "Property Cost
   Calculator" heading that renders inside #standaloneCostCalculator
   (the page already has this as its screen-header h2) ──
   This targets the first heading rendered inside the container,
   whatever level it is (h3/h4), as long as it's the first child
   or first child of the first section. */
#standaloneCostCalculator > h3:first-child,
#standaloneCostCalculator > h4:first-child,
#standaloneCostCalculator > .cost-section-title:first-child,
#standaloneCostCalculator > div:first-child > h3:first-child,
#standaloneCostCalculator > div:first-child > h4:first-child,
#standaloneCostCalculator .cost-section-container:first-child > h3,
#standaloneCostCalculator .cost-section-container:first-child > h4 {
    display: none !important;
}
/* Remove the hairline that sat under that heading, if present as first child */
#standaloneCostCalculator > hr:first-of-type {
    display: none !important;
}

/* v32 removed — fixed at source in cost-calculator.js instead */

/* ═══════════════════════════════════════════════════════════════
   v33 — FIX STICKY BANNER: .screen's fadeIn animation sets a
   transform during its run, and some browsers/webviews retain
   a transform context that breaks position:sticky on siblings
   within .container. Disable the transform-based animation.
   ═══════════════════════════════════════════════════════════════ */
.screen {
    animation: none !important;
    transform: none !important;
}

/* Re-confirm sticky context cleanly on .container */
.container {
    position: relative !important;
}
/* removed — replaced by position:fixed approach below */


/* ═══════════════════════════════════════════════════════════════
   v34 — FROZEN BANNER via position:fixed (sticky was unreliable
   in this WebView). The top bar is pinned to the viewport top;
   .container gets matching top padding so content starts below it.
   ═══════════════════════════════════════════════════════════════ */
.app-top-bar {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    z-index: 500 !important;
    min-height: 114px !important;
    padding-bottom: 14px !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.15) !important;
}
.container {
    padding-top: 114px !important;
}
/* ═══════════════════════════════════════════════════════════════
   v23 — LIGHT MODE: ASSESSMENT PAGE POLISH
   Dark mode is untouched. Light-mode controls on the assessment
   screen (rating dropdowns, photo/notes buttons, room tabs, custom
   name field) previously used the same very pale border tokens as
   simple page dividers (--border: #e3e8ee), which read as flat /
   undefined against the white card surfaces — especially in bright
   or outdoor light. This block gives those specific interactive
   controls a clearly visible boundary, a real custom dropdown arrow
   (the rating select previously fell back to the plain native OS
   arrow), and an intentional on-brand teal dashed treatment for
   "add" affordances instead of the washed-out grey that was reading
   as an odd lavender tint in photos.
   ═══════════════════════════════════════════════════════════════ */

/* Rating dropdown — real border, subtle depth, custom arrow + focus ring */
body:not(.dark-mode) #propertyAssessmentScreen .rating-dropdown,
body:not(.dark-mode) #propertyAssessmentScreen .feature-dropdown {
    background-color: #ffffff !important;
    border: 1.5px solid #c7d0db !important;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.05) !important;
    appearance: none !important;
    -webkit-appearance: none !important;
    background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%234b5563' stroke-width='1.6' fill='none' stroke-linecap='round'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 14px center !important;
    padding-right: 34px !important;
}
body:not(.dark-mode) #propertyAssessmentScreen .rating-dropdown:focus {
    border-color: var(--brand-green) !important;
    box-shadow: 0 0 0 3px rgba(29,158,117,0.14) !important;
    outline: none !important;
}

/* Add Photo button — visible boundary against the page background */
body:not(.dark-mode) #propertyAssessmentScreen .photo-btn {
    background: #ffffff !important;
    border: 1.5px solid #d7dee6 !important;
}

/* Add Notes — intentional on-brand teal dashed border (was washed-out grey) */
body:not(.dark-mode) #propertyAssessmentScreen .add-notes-btn {
    background: #ffffff !important;
    border: 1.5px dashed rgba(29,158,117,0.45) !important;
}
body:not(.dark-mode) #propertyAssessmentScreen .add-notes-btn.has-notes {
    border-style: solid !important;
    background: var(--icon-circle-bg) !important;
}

/* Room/feature tabs ("Bedroom 1" etc.) — visible edge on white page */
body:not(.dark-mode) #propertyAssessmentScreen .room-instance-btn {
    border: 1.5px solid #d7dee6 !important;
}
body:not(.dark-mode) #propertyAssessmentScreen .room-instance-btn.active,
body:not(.dark-mode) #propertyAssessmentScreen .room-instance-btn.completed:not(.active) {
    border-color: var(--brand-green) !important;
}

/* "+" add-room / add-feature pill — same on-brand teal dashed treatment */
body:not(.dark-mode) #propertyAssessmentScreen .add-room-btn,
body:not(.dark-mode) #propertyAssessmentScreen .add-feature-btn {
    background: #ffffff !important;
    border: 1.5px dashed rgba(29,158,117,0.45) !important;
}

/* Custom Name input + notes textareas — visible border + focus ring */
body:not(.dark-mode) #propertyAssessmentScreen .room-name-input,
body:not(.dark-mode) #propertyAssessmentScreen .question-textarea,
body:not(.dark-mode) #propertyAssessmentScreen .room-notes-textarea {
    background: #ffffff !important;
    border: 1.5px solid #c7d0db !important;
}
body:not(.dark-mode) #propertyAssessmentScreen .room-name-input:focus,
body:not(.dark-mode) #propertyAssessmentScreen .question-textarea:focus,
body:not(.dark-mode) #propertyAssessmentScreen .room-notes-textarea:focus {
    border-color: var(--brand-green) !important;
    box-shadow: 0 0 0 3px rgba(29,158,117,0.14) !important;
    outline: none !important;
}

/* ── Light mode: visible separators + flat item rows (match dark-mode structure) ── */
body:not(.dark-mode) .assessment-item {
    background: transparent !important;
    border: none !important;
    border-bottom: 1px solid rgba(13, 21, 32, 0.08) !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}
body:not(.dark-mode) .assessment-item:last-child { border-bottom: none !important; }
body:not(.dark-mode) .room-section {
    border-bottom: 1px solid rgba(13, 21, 32, 0.08) !important;
    background: transparent !important;
}
body:not(.dark-mode) .room-section:last-child { border-bottom: none !important; }
body:not(.dark-mode) .category-expanded-content {
    border-top: 1px solid rgba(13, 21, 32, 0.08) !important;
    background: transparent !important;
}
body:not(.dark-mode) .assessment-content { background: transparent !important; }
body:not(.dark-mode) .photo-btn {
    background: transparent !important;
    box-shadow: none !important;
}
body:not(.dark-mode) .capture-btn {
    border: 1.5px dashed rgba(29, 158, 117, 0.55) !important;
    color: var(--brand-green) !important;
}
body:not(.dark-mode) .note-btn {
    border: 1.5px dashed rgba(90, 110, 130, 0.45) !important;
    color: #5a6e82 !important;
}
body:not(.dark-mode) .item-note-textarea {
    background: #ffffff !important;
    color: #1f2937 !important;
    border: 1px solid var(--brand-green) !important;
}

/* Photo area — transparent, matching dark mode (no container box) */
body:not(.dark-mode) #propertyAssessmentScreen .item-photos,
body:not(.dark-mode) #propertyAssessmentScreen .photo-preview {
    background: transparent !important;
    border: none !important;
}

/* Info "i" button — slightly stronger ring so it clearly reads as tappable */
body:not(.dark-mode) #propertyAssessmentScreen .info-btn,
body:not(.dark-mode) #propertyAssessmentScreen .question-info-btn {
    border: 1px solid rgba(29,158,117,0.3) !important;
}
/* v35 — TABLET CENTERED COLUMN — REMOVED.
   This constrained the app to a 600px centered column with a dark
   backdrop on tablets, which is NOT what was wanted — the app should
   fill the entire tablet screen edge-to-edge, exactly like it already
   does on phones, just at the larger width. Reverted in full; the
   original full-bleed @media (min-width: 768px) rule a few hundred
   lines up (which keeps .container at max-width:100%) is what's
   actually in effect now at every screen size. */
/* ═══════════════════════════════════════════════════════════════
   v36 — FIX: #propertyAssessmentScreen / #settingsScreen / #helpScreen
   not filling the screen on tablets (left-aligned with a gap on the
   right, instead of full-bleed).
   Root cause: styles.css (the old pre-redesign stylesheet) has an ID
   rule for these three screens specifically — separate from the
   general .screen class — that caps max-width (428px → 600px → 800px
   → 1000px across breakpoints) and centers via margin:0 auto. Theme.css's
   .screen { margin: 0 !important } correctly cancels the auto-centering
   (since !important always wins regardless of selector specificity),
   but never touched max-width — so the old cap silently survived,
   leaving these three screens pinned to the left edge with their
   capped width instead of filling the viewport like every other
   screen. Neutralizing max-width here fixes all three at once.
   ═══════════════════════════════════════════════════════════════ */
#settingsScreen,
#helpScreen,
#propertyAssessmentScreen {
    max-width: 100% !important;
    margin: 0 !important;
}

/* ═══════════════════ ASSESSMENT SEARCH / FILTER ═══════════════════ */

.assessment-search-bar {
    position: relative;
    display: flex;
    align-items: center;
    margin: 0 0 12px 0;
}

.assessment-search-icon {
    position: absolute;
    left: 15px;
    color: var(--text-3);
    font-size: 0.85rem;
    pointer-events: none;
    z-index: 1;
}

.assessment-search-input {
    width: 100%;
    padding: 13px 44px 13px 40px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 13px;
    color: var(--text-1);
    font-family: 'Poppins', sans-serif;
    font-size: 0.88rem;
    outline: none;
    box-sizing: border-box;
    transition: border-color 0.2s ease;
}

.assessment-search-input:focus {
    border-color: var(--brand-green);
}

.assessment-search-input::placeholder {
    color: var(--text-3);
}

.assessment-search-clear {
    position: absolute;
    right: 10px;
    width: 26px;
    height: 26px;
    background: var(--surface-2);
    border: none;
    border-radius: 50%;
    color: var(--text-2);
    font-size: 0.7rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s ease;
}

.assessment-search-clear:hover {
    background: var(--brand-green);
    color: #fff;
}

/* Suggestion card — additional feature matching search */
.search-suggestion-card {
    display: flex;
    align-items: center;
    gap: 12px;
    background: var(--surface);
    border: 1.5px dashed rgba(29, 158, 117, 0.45);
    border-radius: 13px;
    padding: 12px 14px;
    margin-bottom: 10px;
}

.search-suggestion-icon {
    width: 36px;
    height: 36px;
    background: rgba(29, 158, 117, 0.12);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--brand-green);
    font-size: 0.95rem;
    flex-shrink: 0;
}

.search-suggestion-info { flex: 1; min-width: 0; }

.search-suggestion-name {
    color: var(--text-1);
    font-size: 0.88rem;
    font-weight: 700;
}

.search-suggestion-sub {
    color: var(--text-3);
    font-size: 0.72rem;
    margin-top: 1px;
}

.search-suggestion-add {
    background: var(--brand-green);
    border: none;
    border-radius: 10px;
    padding: 9px 15px;
    color: #fff;
    font-family: 'Poppins', sans-serif;
    font-size: 0.78rem;
    font-weight: 700;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
    transition: opacity 0.2s ease;
}

.search-suggestion-add:hover { opacity: 0.88; }

/* No results state */
.search-no-results {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 22px 16px;
    color: var(--text-3);
    font-size: 0.85rem;
    text-align: center;
}

.search-no-results i { font-size: 1rem; opacity: 0.6; }

/* Light mode adjustments */
body:not(.dark-mode) .assessment-search-input {
    background: #ffffff;
    border-color: #dde3ea;
}
body:not(.dark-mode) .search-suggestion-card {
    background: #ffffff;
}

/* ═══ Category progress — SVG ring (replaces conic-gradient disc) ═══ */
.category-progress {
    position: relative !important;
    width: 40px !important;
    height: 40px !important;
    background: transparent !important;
    border: none !important;
    border-radius: 50% !important;
    margin-left: 8px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
    box-shadow: none !important;
}

.category-progress svg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

.category-progress-text {
    position: relative;
    z-index: 1;
    font-size: 0.56rem !important;
    font-weight: 700 !important;
    color: var(--text-2) !important;
    font-family: 'Poppins', sans-serif !important;
    letter-spacing: -0.2px;
}

.category-progress.complete .category-progress-text {
    color: #1d9e75 !important;
}

/* ═══════════════════ VOICE NOTES ═══════════════════ */

/* Textarea + mic button side by side */
.note-input-row {
    display: flex;
    gap: 7px;
    align-items: stretch;
}

.note-input-row .item-note-textarea,
.note-input-row .question-textarea {
    flex: 1;
    margin: 0 !important;
    width: auto !important;
}

.voice-mic-btn {
    flex: 0 0 44px;
    width: 44px;
    background: rgba(29, 158, 117, 0.12);
    border: 1.5px solid rgba(29, 158, 117, 0.45);
    border-radius: 9px;
    color: var(--brand-green);
    font-size: 1rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s ease;
}

.voice-mic-btn:hover { background: rgba(29, 158, 117, 0.2); }

.voice-mic-btn.mic-active {
    background: var(--brand-green);
    color: #fff;
    animation: voicePulse 1.1s ease-in-out infinite;
}

/* Listening indicator */
.voice-listening {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 9px 12px;
    margin-bottom: 6px;
    background: rgba(29, 158, 117, 0.1);
    border: 1px solid rgba(29, 158, 117, 0.35);
    border-radius: 9px;
}

.voice-dot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--brand-green);
    flex-shrink: 0;
    animation: voicePulse 1.1s ease-in-out infinite;
}

@keyframes voicePulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50%      { opacity: 0.35; transform: scale(0.75); }
}

.voice-listening-text {
    flex: 1;
    color: var(--brand-green);
    font-size: 0.78rem;
    font-weight: 600;
}

.voice-stop-btn {
    background: transparent;
    border: 1px solid rgba(230, 57, 70, 0.5);
    border-radius: 8px;
    padding: 5px 11px;
    color: #E63946;
    font-family: 'Poppins', sans-serif;
    font-size: 0.72rem;
    font-weight: 700;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 5px;
}

.voice-stop-btn:hover { background: rgba(230, 57, 70, 0.08); }

/* Light mode */
body:not(.dark-mode) .voice-mic-btn {
    background: rgba(29, 158, 117, 0.1);
    border-color: rgba(29, 158, 117, 0.55);
}
body:not(.dark-mode) .voice-listening {
    background: rgba(29, 158, 117, 0.08);
}

/* ═══════════════════════════════════════════════════════════════
   PROPERTY FEATURES MANAGEMENT — assessment-screen style
   Injected AFTER .property-details-form so cards fill full width
   ═══════════════════════════════════════════════════════════════ */

.pf-mgmt-section { margin-top: 0 !important; }
.pf-mgmt-heading {
    display: flex !important;
    align-items: flex-start !important;
    gap: 10px !important;
    padding: 22px 16px 14px !important;
    margin: 0 !important;
}
.pf-mgmt-heading > i { color: var(--brand-green) !important; font-size: 1rem !important; margin-top: 3px !important; flex-shrink: 0 !important; }
.pf-mgmt-title { display: block !important; font-size: 0.95rem !important; font-weight: 700 !important; color: var(--text-1) !important; line-height: 1.2 !important; }
.pf-mgmt-hint { margin: 4px 0 0 0 !important; padding: 0 !important; font-size: 0.75rem !important; color: var(--text-3) !important; line-height: 1.4 !important; }
.pf-cat.assessment-category { margin-bottom: 0 !important; }
.pf-cat.assessment-category:has(> .category-expanded-content) { background: #182a3e !important; }
body:not(.dark-mode) .pf-cat.assessment-category:has(> .category-expanded-content) { background: #f3f6f9 !important; }
.pf-features-list { display: block !important; }
.pf-feature-row { display: flex !important; align-items: center !important; justify-content: space-between !important; gap: 10px !important; padding: 11px 16px !important; border-bottom: 0.5px solid var(--divider) !important; }
.pf-feature-row:last-child { border-bottom: none !important; }
.pf-feature-name { color: var(--text-1) !important; font-size: 0.88rem !important; font-weight: 500 !important; flex: 1 !important; }
.pf-no-features { padding: 12px 16px !important; color: var(--text-3) !important; font-size: 0.78rem !important; font-style: italic !important; text-align: center !important; border: 1px dashed var(--border) !important; border-radius: 10px !important; margin: 8px 16px 4px !important; background: transparent !important; }


/* ═══════════════════════════════════════════════════════════════
   CUSTOMIZE ASSESSMENT SCREEN
   ═══════════════════════════════════════════════════════════════ */

.customize-page {
    padding: 0 !important;
    padding-bottom: 40px !important;
}

/* ── Info Card ───────────────────────────────────────────────── */
.cust-info-card {
    background: var(--surface) !important;
    border-top: 0.5px solid var(--border) !important;
    border-bottom: 0.5px solid var(--border) !important;
    margin-bottom: 8px !important;
    overflow: hidden !important;
}
.cust-info-header {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 14px 16px !important;
    cursor: pointer !important;
    user-select: none !important;
}
.cust-info-header-left {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    color: var(--brand-green) !important;
    font-size: 0.9rem !important;
    font-weight: 700 !important;
}
.cust-info-header-left i { font-size: 0.95rem !important; }
.cust-info-chevron {
    color: var(--text-3) !important;
    font-size: 0.75rem !important;
    transition: transform 0.25s ease !important;
}
.cust-info-chevron.open { transform: rotate(180deg) !important; }

.cust-info-body {
    display: none !important;
    padding: 4px 16px 16px !important;
    border-top: 0.5px solid var(--divider) !important;
}
.cust-info-body.open { display: block !important; }
.cust-info-intro {
    font-size: 0.82rem !important;
    color: var(--text-2) !important;
    line-height: 1.6 !important;
    margin: 12px 0 16px !important;
}
.cust-info-row {
    display: flex !important;
    gap: 12px !important;
    margin-bottom: 16px !important;
}
.cust-info-icon {
    width: 30px !important;
    height: 30px !important;
    border-radius: 8px !important;
    background: rgba(29,158,117,0.12) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
    margin-top: 2px !important;
    color: var(--brand-green) !important;
    font-size: 0.75rem !important;
}
.cust-info-term {
    font-size: 0.82rem !important;
    font-weight: 700 !important;
    color: var(--text-1) !important;
    margin: 0 0 4px !important;
}
.cust-info-desc {
    font-size: 0.77rem !important;
    color: var(--text-3) !important;
    line-height: 1.55 !important;
    margin: 0 !important;
}

/* Weight guide inside info card */
.cust-weight-guide {
    display: flex !important;
    flex-direction: column !important;
    gap: 5px !important;
    margin-top: 6px !important;
}
.cust-wg-row {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    font-size: 0.75rem !important;
    color: var(--text-3) !important;
}
.cust-wg-badge {
    display: inline-block !important;
    padding: 2px 8px !important;
    border-radius: 99px !important;
    font-size: 0.65rem !important;
    font-weight: 700 !important;
    white-space: nowrap !important;
    flex-shrink: 0 !important;
}
.wg-low   { background: rgba(107,114,128,0.2) !important; color: #9ca3af !important; }
.wg-mod   { background: rgba(59,130,246,0.15) !important; color: #60a5fa !important; }
.wg-high  { background: rgba(234,179,8,0.15) !important; color: #eab308 !important; }
.wg-vhigh { background: rgba(249,115,22,0.15) !important; color: #f97316 !important; }
.wg-crit  { background: rgba(239,68,68,0.15) !important; color: #f87171 !important; }

/* ── Section headers ─────────────────────────────────────────── */
.cust-section-header {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 18px 16px 10px !important;
}
.cust-section-label {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    font-size: 0.82rem !important;
    font-weight: 700 !important;
    color: var(--text-3) !important;
    text-transform: uppercase !important;
    letter-spacing: 0.06em !important;
}
.cust-section-label i { color: var(--brand-green) !important; }
.cust-add-btn {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    background: rgba(29,158,117,0.12) !important;
    color: var(--brand-green) !important;
    border: 1px solid rgba(29,158,117,0.35) !important;
    border-radius: 99px !important;
    padding: 6px 14px !important;
    font-size: 0.78rem !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    font-family: 'Poppins', sans-serif !important;
}
.cust-add-btn:active { opacity: 0.75 !important; }

/* ── Feature/Question list containers ───────────────────────── */
.cust-list-container {
    padding: 0 !important;
}
.cust-empty-state {
    text-align: center !important;
    padding: 28px 20px !important;
    color: var(--text-3) !important;
}
.cust-empty-state i {
    font-size: 1.8rem !important;
    margin-bottom: 10px !important;
    opacity: 0.4 !important;
    display: block !important;
}
.cust-empty-state p {
    font-size: 0.82rem !important;
    line-height: 1.5 !important;
    margin: 0 !important;
}

/* ── Feature card ────────────────────────────────────────────── */
.cust-feature-card {
    background: var(--surface) !important;
    border-top: 0.5px solid var(--border) !important;
    border-bottom: 0.5px solid var(--border) !important;
    margin-bottom: 1px !important;
}
.cust-feature-header {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    padding: 13px 16px !important;
    cursor: pointer !important;
}
.cust-feature-icon {
    width: 36px !important;
    height: 36px !important;
    border-radius: 10px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
    font-size: 0.82rem !important;
    color: #fff !important;
}
.cust-feature-info { flex: 1 !important; min-width: 0 !important; }
.cust-feature-name {
    font-size: 0.9rem !important;
    font-weight: 700 !important;
    color: var(--text-1) !important;
    display: block !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}
.cust-feature-meta {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    margin-top: 3px !important;
    flex-wrap: wrap !important;
}
.cust-section-badge {
    display: inline-block !important;
    padding: 1px 7px !important;
    border-radius: 99px !important;
    font-size: 0.62rem !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.04em !important;
}
.badge-exterior  { background: rgba(40,167,69,0.15)  !important; color: #28A745 !important; }
.badge-interior  { background: rgba(46,134,171,0.15) !important; color: #2E86AB !important; }
.badge-other     { background: rgba(111,66,193,0.15) !important; color: #6F42C1 !important; }
.badge-location  { background: rgba(234,179,8,0.15)  !important; color: #ca8a04 !important; }

.cust-item-count {
    font-size: 0.7rem !important;
    color: var(--text-3) !important;
}
.cust-feature-actions {
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    flex-shrink: 0 !important;
}
.cust-icon-btn {
    width: 30px !important;
    height: 30px !important;
    border-radius: 8px !important;
    border: none !important;
    background: transparent !important;
    color: var(--text-3) !important;
    cursor: pointer !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 0.78rem !important;
}
.cust-icon-btn.del  { color: #ef4444 !important; }
.cust-icon-btn:active { opacity: 0.6 !important; }
.cust-chevron-btn {
    color: var(--text-3) !important;
    font-size: 0.75rem !important;
    transition: transform 0.2s !important;
}
.cust-chevron-btn.open { transform: rotate(180deg) !important; }

/* Excluded state */
.cust-feature-card.excluded .cust-feature-name { opacity: 0.45 !important; text-decoration: line-through !important; }
.cust-feature-card.excluded .cust-feature-meta { opacity: 0.4 !important; }
.cust-excluded-badge {
    display: inline-block !important;
    padding: 1px 7px !important;
    border-radius: 99px !important;
    font-size: 0.6rem !important;
    font-weight: 700 !important;
    background: rgba(239,68,68,0.12) !important;
    color: #f87171 !important;
    letter-spacing: 0.03em !important;
}

/* ── Items inside a feature card ─────────────────────────────── */
.cust-items-body {
    border-top: 0.5px solid var(--divider) !important;
    padding: 0 !important;
}
.cust-item-row {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    padding: 11px 16px !important;
    border-bottom: 0.5px solid var(--divider) !important;
}
.cust-item-row:last-of-type { border-bottom: none !important; }
.cust-item-left { flex: 1 !important; min-width: 0 !important; }
.cust-item-name {
    font-size: 0.85rem !important;
    font-weight: 600 !important;
    color: var(--text-1) !important;
    margin-bottom: 3px !important;
}
.cust-item-badges {
    display: flex !important;
    gap: 5px !important;
    flex-wrap: wrap !important;
}
.cust-item-badge {
    display: inline-block !important;
    padding: 1px 6px !important;
    border-radius: 99px !important;
    font-size: 0.6rem !important;
    font-weight: 700 !important;
}
.badge-weight  { background: rgba(234,179,8,0.15) !important; color: #eab308 !important; }
.badge-main    { background: rgba(29,158,117,0.15) !important; color: var(--brand-green) !important; }
.badge-dropdown{ background: rgba(107,114,128,0.15) !important; color: #9ca3af !important; }
.badge-guide   { background: rgba(59,130,246,0.12) !important; color: #60a5fa !important; }

.cust-add-item-row {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 10px 16px !important;
    border-top: 0.5px dashed var(--border) !important;
}
.cust-add-item-btn {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    font-size: 0.78rem !important;
    font-weight: 600 !important;
    color: var(--brand-green) !important;
    background: transparent !important;
    border: none !important;
    cursor: pointer !important;
    font-family: 'Poppins', sans-serif !important;
    padding: 6px 12px !important;
}

/* Exclude toggle row */
.cust-exclude-row {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 10px 16px !important;
    border-top: 0.5px solid var(--divider) !important;
    background: rgba(239,68,68,0.04) !important;
}
.cust-exclude-label {
    font-size: 0.78rem !important;
    color: var(--text-3) !important;
    display: flex !important;
    align-items: center !important;
    gap: 7px !important;
}
.cust-exclude-label i { color: #f87171 !important; font-size: 0.75rem !important; }

/* ── Question card ───────────────────────────────────────────── */
.cust-question-card {
    background: var(--surface) !important;
    border-top: 0.5px solid var(--border) !important;
    border-bottom: 0.5px solid var(--border) !important;
    display: flex !important;
    align-items: flex-start !important;
    gap: 12px !important;
    padding: 13px 16px !important;
    margin-bottom: 1px !important;
}
.cust-q-icon {
    width: 30px !important;
    height: 30px !important;
    border-radius: 8px !important;
    background: rgba(29,158,117,0.12) !important;
    color: var(--brand-green) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
    font-size: 0.75rem !important;
    margin-top: 2px !important;
}
.cust-q-body { flex: 1 !important; }
.cust-q-text {
    font-size: 0.85rem !important;
    font-weight: 600 !important;
    color: var(--text-1) !important;
    line-height: 1.4 !important;
    margin-bottom: 3px !important;
}
.cust-q-tooltip {
    font-size: 0.73rem !important;
    color: var(--text-3) !important;
    line-height: 1.4 !important;
}

/* ── Backup card ─────────────────────────────────────────────── */
.cust-backup-card {
    background: var(--surface) !important;
    border-top: 0.5px solid var(--border) !important;
    border-bottom: 0.5px solid var(--border) !important;
    padding: 16px !important;
    margin-bottom: 1px !important;
}
.cust-backup-desc {
    font-size: 0.78rem !important;
    color: var(--text-3) !important;
    line-height: 1.55 !important;
    margin: 0 0 14px !important;
}
.cust-backup-btns {
    display: flex !important;
    gap: 10px !important;
}
.cust-backup-btn {
    flex: 1 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 7px !important;
    padding: 11px 14px !important;
    border-radius: 12px !important;
    font-size: 0.82rem !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    font-family: 'Poppins', sans-serif !important;
    border: 1px solid transparent !important;
}
.cust-export-btn {
    background: rgba(29,158,117,0.12) !important;
    color: var(--brand-green) !important;
    border-color: rgba(29,158,117,0.3) !important;
}
.cust-import-btn {
    background: rgba(59,130,246,0.1) !important;
    color: #60a5fa !important;
    border-color: rgba(59,130,246,0.3) !important;
}

/* ── Customize Modals ────────────────────────────────────────── */
.cust-modal-overlay {
    position: fixed !important;
    inset: 0 !important;
    background: rgba(0,0,0,0.65) !important;
    z-index: 9000 !important;
    display: flex;
    align-items: flex-end !important;
    justify-content: center !important;
}
.cust-modal {
    background: var(--bg-primary) !important;
    border-radius: 20px 20px 0 0 !important;
    width: 100% !important;
    max-width: 520px !important;
    max-height: 88vh !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
}
.cust-modal-header {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 18px 18px 14px !important;
    border-bottom: 0.5px solid var(--border) !important;
    flex-shrink: 0 !important;
}
.cust-modal-title {
    font-size: 1rem !important;
    font-weight: 700 !important;
    color: var(--text-1) !important;
    margin: 0 !important;
}
.cust-modal-close {
    width: 32px !important;
    height: 32px !important;
    border-radius: 50% !important;
    background: var(--surface) !important;
    border: none !important;
    color: var(--text-3) !important;
    cursor: pointer !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 0.8rem !important;
}
.cust-modal-body {
    flex: 1 !important;
    overflow-y: auto !important;
    padding: 16px 18px !important;
}
.cust-modal-footer {
    padding: 12px 18px 20px !important;
    border-top: 0.5px solid var(--border) !important;
    display: flex !important;
    gap: 10px !important;
    flex-shrink: 0 !important;
}
.cust-modal-footer button {
    flex: 1 !important;
    padding: 12px !important;
    border-radius: 12px !important;
    font-size: 0.88rem !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    font-family: 'Poppins', sans-serif !important;
}
.cust-modal-save {
    background: var(--gradient-success) !important;
    color: #fff !important;
    border: none !important;
}
.cust-modal-cancel {
    background: var(--surface) !important;
    color: var(--text-2) !important;
    border: 1px solid var(--border) !important;
}

/* Modal form fields */
.cust-field {
    margin-bottom: 16px !important;
}
.cust-field-label {
    display: block !important;
    font-size: 0.78rem !important;
    font-weight: 600 !important;
    color: var(--text-2) !important;
    margin-bottom: 6px !important;
}
.cust-field-hint {
    display: block !important;
    font-size: 0.7rem !important;
    color: var(--text-3) !important;
    margin-top: 4px !important;
    line-height: 1.4 !important;
}
.cust-field input,
.cust-field select,
.cust-field textarea {
    width: 100% !important;
    background: var(--surface) !important;
    border: 1px solid var(--border) !important;
    border-radius: 10px !important;
    padding: 11px 13px !important;
    color: var(--text-1) !important;
    font-size: 0.85rem !important;
    font-family: 'Poppins', sans-serif !important;
    box-sizing: border-box !important;
}
.cust-field textarea {
    min-height: 72px !important;
    resize: vertical !important;
    line-height: 1.5 !important;
}
.cust-field input:focus,
.cust-field select:focus,
.cust-field textarea:focus {
    outline: none !important;
    border-color: var(--brand-green) !important;
}

/* Include-as radio group */
.cust-include-group {
    display: flex !important;
    gap: 10px !important;
}
.cust-include-option {
    flex: 1 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
    padding: 11px 8px !important;
    border: 1.5px solid var(--border) !important;
    border-radius: 12px !important;
    cursor: pointer !important;
    transition: all 0.2s !important;
    gap: 5px !important;
}
.cust-include-option.selected {
    border-color: var(--brand-green) !important;
    background: rgba(29,158,117,0.08) !important;
}
.cust-include-option input { display: none !important; }
.cust-include-option i {
    font-size: 1.1rem !important;
    color: var(--text-3) !important;
}
.cust-include-option.selected i { color: var(--brand-green) !important; }
.cust-include-option span {
    font-size: 0.72rem !important;
    font-weight: 600 !important;
    color: var(--text-2) !important;
    line-height: 1.3 !important;
}
.cust-include-option.selected span { color: var(--brand-green) !important; }
.cust-include-sub {
    font-size: 0.65rem !important;
    color: var(--text-3) !important;
    line-height: 1.3 !important;
}

/* Guidance accordion inside modal */
.cust-guidance-toggle {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 10px 0 !important;
    cursor: pointer !important;
    border-top: 0.5px solid var(--divider) !important;
    margin-top: 4px !important;
}
.cust-guidance-toggle-left {
    display: flex !important;
    align-items: center !important;
    gap: 7px !important;
    font-size: 0.82rem !important;
    font-weight: 600 !important;
    color: var(--text-2) !important;
}
.cust-guidance-toggle-left i { color: var(--brand-green) !important; font-size: 0.78rem !important; }
.cust-guidance-optional {
    font-size: 0.65rem !important;
    color: var(--text-3) !important;
    background: var(--surface) !important;
    padding: 2px 6px !important;
    border-radius: 99px !important;
}
.cust-guidance-body { padding-top: 10px !important; }

/* Custom item rating in assessment */
.custom-feature-section {
    margin: 0 !important;
    border-top: 0.5px solid var(--border) !important;
}
.custom-feature-section-header {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    padding: 12px 16px !important;
    background: rgba(29,158,117,0.05) !important;
    border-bottom: 0.5px solid var(--border) !important;
}
.custom-feature-section-icon {
    width: 28px !important;
    height: 28px !important;
    border-radius: 8px !important;
    background: var(--brand-green) !important;
    color: #fff !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 0.72rem !important;
    flex-shrink: 0 !important;
}
.custom-feature-section-name {
    font-size: 0.88rem !important;
    font-weight: 700 !important;
    color: var(--text-1) !important;
    flex: 1 !important;
}
.custom-badge {
    font-size: 0.58rem !important;
    font-weight: 700 !important;
    padding: 2px 6px !important;
    border-radius: 99px !important;
    background: rgba(29,158,117,0.15) !important;
    color: var(--brand-green) !important;
    letter-spacing: 0.04em !important;
    text-transform: uppercase !important;
}

/* Custom item rating row */
.custom-item-assess {
    padding: 14px 16px !important;
    border-bottom: 0.5px solid var(--divider) !important;
}
.custom-item-assess:last-child { border-bottom: none !important; }
.custom-item-assess-header {
    display: flex !important;
    align-items: flex-start !important;
    gap: 8px !important;
    margin-bottom: 10px !important;
}
.custom-item-assess-name {
    font-size: 0.85rem !important;
    font-weight: 600 !important;
    color: var(--text-1) !important;
    flex: 1 !important;
    line-height: 1.4 !important;
}

/* Custom question in assessment (inline, no collapsible) */
.custom-question-item {
    border-bottom: 0.5px solid var(--divider) !important;
    padding: 14px 0 !important;
}
.custom-question-item:last-child { border-bottom: none !important; }
.custom-question-header {
    display: flex !important;
    align-items: flex-start !important;
    justify-content: space-between !important;
    gap: 8px !important;
    margin-bottom: 8px !important;
}
.custom-question-text {
    font-size: 0.85rem !important;
    font-weight: 600 !important;
    color: var(--text-1) !important;
    flex: 1 !important;
    line-height: 1.4 !important;
}
.custom-q-del-btn {
    background: transparent !important;
    border: none !important;
    color: #f87171 !important;
    cursor: pointer !important;
    font-size: 0.75rem !important;
    padding: 2px 6px !important;
    flex-shrink: 0 !important;
}

/* Full report custom guidance field */
.custom-guidance-field {
    margin-top: 10px !important;
}
.custom-guidance-label {
    font-size: 0.72rem !important;
    font-weight: 600 !important;
    color: var(--text-3) !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
    margin-bottom: 5px !important;
    display: flex !important;
    align-items: center !important;
    gap: 5px !important;
}
.custom-guidance-label i { color: var(--brand-green) !important; }

/* ═══════════════════════════════════════════════════════════════
   CUSTOMIZE SCREEN — Compact redesign
   ═══════════════════════════════════════════════════════════════ */
.cust-feat-card { border-bottom: 0.5px solid var(--border) !important; background: var(--surface) !important; }
.cust-feat-card.cf-excluded { opacity: 0.5 !important; }
.cust-feat-row { display: flex !important; align-items: center !important; gap: 10px !important; padding: 13px 16px !important; cursor: pointer !important; user-select: none !important; }
.cf-dot { width: 9px !important; height: 9px !important; border-radius: 50% !important; flex-shrink: 0 !important; }
.cf-info { flex: 1 !important; min-width: 0 !important; display: flex !important; flex-direction: column !important; gap: 2px !important; }
.cf-name { font-size: 0.88rem !important; font-weight: 600 !important; color: var(--text-1) !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; }
.cf-meta { font-size: 0.7rem !important; color: var(--text-3) !important; line-height: 1.3 !important; }
.cf-actions { display: flex !important; align-items: center !important; gap: 2px !important; flex-shrink: 0 !important; }
.cf-btn { width: 30px !important; height: 30px !important; border-radius: 8px !important; border: none !important; background: transparent !important; color: var(--text-3) !important; cursor: pointer !important; display: flex !important; align-items: center !important; justify-content: center !important; font-size: 0.72rem !important; }
.cf-btn:active { background: rgba(255,255,255,0.06) !important; }
.cf-del { color: #ef4444 !important; }
.cf-chev { font-size: 0.7rem !important; color: var(--text-3) !important; transition: transform 0.2s !important; padding: 6px !important; }
.cf-chev.open { transform: rotate(180deg) !important; }
.cf-expanded { background: rgba(0,0,0,0.1) !important; border-top: 0.5px solid var(--divider) !important; }
body:not(.dark-mode) .cf-expanded { background: rgba(0,0,0,0.03) !important; }
.cf-item-row { display: flex !important; align-items: center !important; gap: 8px !important; padding: 9px 16px 9px 28px !important; border-bottom: 0.5px solid var(--divider) !important; }
.cf-item-row:last-of-type { border-bottom: none !important; }
.cf-item-bullet { width: 5px !important; height: 5px !important; border-radius: 50% !important; flex-shrink: 0 !important; opacity: 0.55 !important; }
.cf-item-name { flex: 1 !important; font-size: 0.82rem !important; font-weight: 500 !important; color: var(--text-2) !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; }
.cf-item-wt { font-size: 0.65rem !important; font-weight: 600 !important; color: var(--text-3) !important; white-space: nowrap !important; flex-shrink: 0 !important; }
.cf-guide-pill { font-size: 0.58rem !important; font-weight: 700 !important; padding: 1px 5px !important; border-radius: 99px !important; background: rgba(59,130,246,0.12) !important; color: #60a5fa !important; flex-shrink: 0 !important; }
.cf-no-items { font-size: 0.75rem !important; color: var(--text-3) !important; padding: 10px 28px !important; margin: 0 !important; font-style: italic !important; }
.cf-expanded-foot { padding: 10px 16px 12px !important; border-top: 0.5px dashed var(--border) !important; display: flex !important; flex-direction: column !important; gap: 10px !important; }
.cf-add-item { background: transparent !important; border: none !important; color: var(--brand-green) !important; font-size: 0.78rem !important; font-weight: 600 !important; font-family: Poppins, sans-serif !important; cursor: pointer !important; display: inline-flex !important; align-items: center !important; gap: 6px !important; padding: 0 !important; }
.cf-exclude-row { display: flex !important; align-items: center !important; justify-content: space-between !important; cursor: pointer !important; }
.cf-exclude-lbl { font-size: 0.75rem !important; color: var(--text-3) !important; }
.cust-q-compact { display: flex !important; align-items: center !important; gap: 10px !important; padding: 12px 16px !important; border-bottom: 0.5px solid var(--border) !important; background: var(--surface) !important; }
.cust-weight-guide { display: flex !important; flex-direction: column !important; gap: 7px !important; margin-top: 8px !important; }
.cust-wg-row { display: flex !important; align-items: flex-start !important; gap: 8px !important; font-size: 0.75rem !important; color: var(--text-2) !important; line-height: 1.4 !important; }
/* Premium tag in Settings row */
.stg-premium-tag {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    background: linear-gradient(135deg, var(--gold-accent, #C8963E), #e8b84b);
    color: #1a1a1a;
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.3px;
    padding: 2px 6px;
    border-radius: 20px;
    vertical-align: middle;
    margin-left: 6px;
    line-height: 1;
    text-transform: uppercase;
}
.stg-premium-tag i {
    font-size: 0.55rem;
}
.premium-user .stg-premium-tag {
    display: none !important;
}