:root {
    --hr-shell-bg:
        radial-gradient(circle at top left, rgba(201, 165, 106, 0.07), transparent 28%),
        radial-gradient(circle at top right, rgba(201, 165, 106, 0.05), transparent 24%),
        linear-gradient(180deg, #f8fafc 0%, #f5f3ef 46%, #f8fafc 100%);
    --hr-surface: rgba(255, 255, 255, 0.82);
    --hr-surface-strong: rgba(255, 255, 255, 0.94);
    --hr-border: rgba(148, 163, 184, 0.2);
    --hr-shadow: 0 26px 70px -38px rgba(15, 23, 42, 0.28);
    --hr-shadow-soft: 0 18px 50px -30px rgba(15, 23, 42, 0.18);
    --hr-text: #0f172a;
    --hr-muted: #475569;
}

html {
    background: #f5f3ef;
}

body.app-shell {
    background: var(--hr-shell-bg);
    color: var(--hr-text);
}

html.theme-dark {
    --hr-shell-bg: #141414;
    --hr-surface: #1e1e1e;
    --hr-surface-strong: #252525;
    --hr-border: rgba(255, 255, 255, 0.08);
    --hr-shadow: none;
    --hr-shadow-soft: none;
    --hr-text: #ffffff;
    --hr-muted: #8e8e93;
    background: #141414;
}

html.theme-dark body.app-shell {
    background: var(--hr-shell-bg);
    color: var(--hr-text);
}

::selection {
    background: rgba(201, 165, 106, 0.22);
}

.premium-nav {
    background: rgba(255, 255, 255, 0.78);
    border-bottom: 1px solid var(--hr-border);
    box-shadow: 0 18px 44px -34px rgba(15, 23, 42, 0.35);
    backdrop-filter: blur(18px);
}

html.theme-dark .premium-nav {
    background: rgba(20, 20, 20, 0.88);
}

.premium-nav-main {
    min-height: 4.5rem;
}

@media (min-width: 1024px) {
    .premium-nav-grid {
        display: grid;
        grid-template-columns: auto minmax(0, 1fr) auto;
        align-items: center;
        column-gap: 1rem;
    }
}

.premium-nav-link {
    position: relative;
    border-radius: 9999px;
    padding: 0.6rem 0.85rem;
    color: #334155;
    font-size: 0.95rem;
    line-height: 1.1;
    white-space: nowrap;
    transition: all 0.2s ease;
}

html.theme-dark .premium-nav-link {
    color: #ebebf5;
}

.premium-nav-link:hover,
.premium-nav-link.is-active {
    color: #0f172a;
    background: rgba(255, 255, 255, 0.74);
    box-shadow: inset 0 0 0 1px rgba(148, 163, 184, 0.18);
}

html.theme-dark .premium-nav-link:hover,
html.theme-dark .premium-nav-link.is-active {
    color: #ffffff;
    background: rgba(255, 255, 255, 0.1);
}

.premium-pill-button {
    border-radius: 9999px;
    box-shadow: 0 18px 40px -24px rgba(11, 15, 24, 0.28);
}

.premium-menu,
.premium-surface,
.home-shell .shadow-lg,
.home-shell .shadow-2xl,
.dashboard-shell .shadow-lg,
.properties-shell .shadow-lg,
.pricing-shell .shadow-lg {
    border: 1px solid var(--hr-border);
    box-shadow: var(--hr-shadow);
}

.premium-menu,
.premium-surface {
    background: var(--hr-surface-strong);
    backdrop-filter: blur(14px);
}

.premium-theme-toggle {
    min-width: 3.5rem;
    flex-shrink: 0;
}

.premium-theme-icon-dark {
    display: none;
}

html.theme-dark .premium-theme-icon-light {
    display: none;
}

html.theme-dark .premium-theme-icon-dark {
    display: inline-flex;
}

.premium-section-title {
    letter-spacing: -0.04em;
}

/* ── Features Panel: light mode ─────────────────────────────── */
.hr-features-heading {
    color: #0f172a;
}
.hr-features-sub {
    color: #64748b;
}
.hr-feature-row {
    border-top: 1px solid rgba(15, 23, 42, 0.08);
}
.hr-feature-row-last {
    border-bottom: 1px solid rgba(15, 23, 42, 0.08);
}
.hr-feature-title {
    color: #0f172a;
}
.hr-feature-desc {
    color: #64748b;
}

/* ── Features Panel: dark mode ──────────────────────────────── */
html.theme-dark .hr-features-heading {
    color: #ffffff !important;
}
html.theme-dark .hr-features-sub {
    color: #8e8e93 !important;
}
html.theme-dark .hr-feature-row {
    border-top-color: rgba(255, 255, 255, 0.08) !important;
}
html.theme-dark .hr-feature-row-last {
    border-bottom-color: rgba(255, 255, 255, 0.08) !important;
}
html.theme-dark .hr-feature-title {
    color: #ffffff !important;
}
html.theme-dark .hr-feature-desc {
    color: #8e8e93 !important;
}

/* ── Investment Panel: dark mode override ────────────────────── */
html.theme-dark .hr-investment-panel {
    background: linear-gradient(155deg, #1a1a1a 0%, #252525 55%, #141414 100%) !important;
    box-shadow: 0 0 0 1px rgba(201, 165, 106, 0.12), 0 24px 48px -12px rgba(0, 0, 0, 0.55);
}

.premium-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    border-radius: 9999px;
    padding: 0.45rem 0.8rem;
    border: 1px solid rgba(148, 163, 184, 0.18);
    background: rgba(255, 255, 255, 0.75);
    color: #475569;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
}

.premium-hero-panel {
    border: 1px solid rgba(255, 255, 255, 0.3);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0.06));
    box-shadow: 0 30px 70px -40px rgba(15, 23, 42, 0.65);
    backdrop-filter: blur(14px);
}

.premium-card-hover {
    transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}

.premium-card-hover:hover {
    transform: translateY(-4px);
    box-shadow: 0 28px 66px -36px rgba(15, 23, 42, 0.28);
}

.dashboard-shell .bg-white,
.properties-shell .bg-white,
.pricing-shell .bg-white {
    background: var(--hr-surface-strong) !important;
}

html.theme-dark .app-shell .bg-white {
    background: #1e1e1e !important;
}

.dashboard-shell .rounded-xl,
.dashboard-shell .rounded-2xl,
.properties-shell .rounded-xl,
.properties-shell .rounded-2xl,
.pricing-shell .rounded-xl,
.pricing-shell .rounded-2xl,
.home-shell .rounded-xl,
.home-shell .rounded-2xl {
    border-radius: 1.5rem;
}

.dashboard-shell .text-gray-600,
.dashboard-shell .text-gray-500,
.properties-shell .text-gray-600,
.properties-shell .text-gray-500,
.pricing-shell .text-gray-600,
.pricing-shell .text-gray-500,
.home-shell .text-gray-600,
.home-shell .text-gray-500 {
    color: var(--hr-muted) !important;
}

html.theme-dark .app-shell .text-gray-900,
html.theme-dark .app-shell .text-slate-950,
html.theme-dark .app-shell .text-slate-900,
html.theme-dark .app-shell .text-gray-800 {
    color: #ffffff !important;
}

html.theme-dark .app-shell .text-gray-700,
html.theme-dark .app-shell .text-gray-600,
html.theme-dark .app-shell .text-gray-500,
html.theme-dark .app-shell .text-slate-700,
html.theme-dark .app-shell .text-slate-600,
html.theme-dark .app-shell .text-slate-500 {
    color: #ebebf5 !important;
}

.dashboard-shell .border,
.properties-shell .border,
.pricing-shell .border,
.home-shell .border {
    border-color: rgba(148, 163, 184, 0.14) !important;
}

html.theme-dark .app-shell .border,
html.theme-dark .app-shell .border-gray-100,
html.theme-dark .app-shell .border-gray-200,
html.theme-dark .app-shell .border-gray-300,
html.theme-dark .app-shell .border-slate-200,
html.theme-dark .app-shell .border-slate-300 {
    border-color: rgba(255, 255, 255, 0.08) !important;
}

html.theme-dark .app-shell .bg-gray-50,
html.theme-dark .app-shell .bg-gray-100,
html.theme-dark .app-shell .bg-slate-50 {
    background: rgba(255, 255, 255, 0.06) !important;
}

html.theme-dark .app-shell input,
html.theme-dark .app-shell select,
html.theme-dark .app-shell textarea {
    background: #1e1e1e;
    color: #ffffff;
    border-color: rgba(255, 255, 255, 0.12);
}

html.theme-dark .app-shell input::placeholder,
html.theme-dark .app-shell textarea::placeholder {
    color: #8e8e93;
}

html.theme-dark .app-shell .hover\:bg-slate-50:hover,
html.theme-dark .app-shell .hover\:bg-gray-50:hover,
html.theme-dark .app-shell .hover\:bg-gray-100:hover {
    background: rgba(255, 255, 255, 0.06) !important;
}

.premium-footer {
    background:
        radial-gradient(circle at top left, rgba(201, 165, 106, 0.08), transparent 26%),
        linear-gradient(180deg, #1a1a1a 0%, #141414 100%);
}

.premium-metric {
    border: 1px solid rgba(255, 255, 255, 0.14);
    background: rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(12px);
}

.premium-auth-link:hover {
    transform: translateY(-1px);
}

/* ─── Profile trigger button ─── */
.hr-profile-trigger {
    border: 1px solid rgba(148, 163, 184, 0.22);
    background: rgba(255, 255, 255, 0.82);
    color: #334155;
    box-shadow: 0 2px 10px -6px rgba(15, 23, 42, 0.14);
    will-change: background-color, box-shadow;
}

.hr-profile-trigger:hover {
    background: rgba(255, 255, 255, 0.96);
    color: #0f172a;
    box-shadow: 0 4px 18px -6px rgba(15, 23, 42, 0.2);
}

html.theme-dark .hr-profile-trigger {
    background: #252525;
    border-color: rgba(255, 255, 255, 0.08);
    color: #ebebf5;
}

html.theme-dark .hr-profile-trigger:hover {
    background: #2c2c2e;
    color: #ffffff;
}

.hr-profile-trigger-avatar {
    width: 1.9rem;
    height: 1.9rem;
    border-radius: 9999px;
    background: rgba(201, 165, 106, 0.14);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

/* ─── Profile card dropdown ─── */
.hr-profile-card {
    width: 19rem;
    border-radius: 1.35rem;
    background: #ffffff;
    border: 1px solid rgba(148, 163, 184, 0.18);
    box-shadow: 0 18px 38px -18px rgba(15, 23, 42, 0.24), 0 0 0 1px rgba(148, 163, 184, 0.08);
    overflow: hidden;
    will-change: opacity;
    contain: layout paint;
}

html.theme-dark .hr-profile-card {
    background: #252525;
    border-color: rgba(255, 255, 255, 0.08);
    box-shadow: 0 18px 38px -18px rgba(0, 0, 0, 0.7), 0 0 0 1px rgba(255, 255, 255, 0.05);
}

.hr-profile-card-header {
    display: flex;
    align-items: center;
    gap: 0.9rem;
    padding: 1.1rem 1.15rem 0.9rem;
}

.hr-profile-card-avatar {
    width: 3rem;
    height: 3rem;
    border-radius: 9999px;
    background: rgba(201, 165, 106, 0.14);
    border: 2px solid rgba(201, 165, 106, 0.3);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

html.theme-dark .hr-profile-card-avatar {
    background: rgba(201, 165, 106, 0.12);
    border-color: rgba(201, 165, 106, 0.22);
}

.hr-profile-card-name {
    font-size: 0.95rem;
    font-weight: 700;
    color: #0f172a;
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

html.theme-dark .hr-profile-card-name {
    color: #ffffff;
}

.hr-profile-card-email {
    font-size: 0.78rem;
    color: #64748b;
    margin-top: 0.1rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

html.theme-dark .hr-profile-card-email {
    color: #8e8e93;
}

.hr-profile-card-dots {
    display: flex;
    align-items: center;
    gap: 3px;
    margin-left: auto;
    flex-shrink: 0;
    padding: 0.3rem;
    border-radius: 9999px;
    cursor: default;
}

.hr-profile-card-dots span {
    display: block;
    width: 4px;
    height: 4px;
    border-radius: 9999px;
    background: #94a3b8;
}

html.theme-dark .hr-profile-card-dots span {
    background: #636366;
}

/* ─── Theme segmented control ─── */
.hr-theme-segment {
    display: flex;
    gap: 0;
    padding: 0.3rem;
    border-radius: 9999px;
    background: rgba(241, 245, 249, 1);
    margin: 0 1.15rem 0.9rem;
}

html.theme-dark .hr-theme-segment {
    background: #2c2c2e;
}

.hr-theme-segment-sm {
    margin: 0;
}

.hr-theme-segment button {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
    padding: 0.55rem 0.75rem;
    border-radius: 9999px;
    font-size: 0.82rem;
    font-weight: 600;
    border: none;
    cursor: pointer;
    transition: all 0.18s ease;
    white-space: nowrap;
}

.hr-segment-active {
    background: #ffffff !important;
    color: #0f172a !important;
    box-shadow: 0 1px 8px -2px rgba(15, 23, 42, 0.18), 0 0 0 1px rgba(148, 163, 184, 0.14) !important;
}

html.theme-dark .hr-segment-active {
    background: #3a3a3c !important;
    color: #ffffff !important;
    box-shadow: 0 1px 8px -2px rgba(0, 0, 0, 0.5) !important;
}

.hr-segment-inactive {
    background: transparent !important;
    color: #94a3b8 !important;
    box-shadow: none !important;
}

.hr-segment-inactive:hover {
    color: #475569 !important;
}

html.theme-dark .hr-segment-inactive {
    color: #636366 !important;
}

html.theme-dark .hr-segment-inactive:hover {
    color: #8e8e93 !important;
}

/* ─── Profile card links ─── */
.hr-profile-card-links {
    border-top: 1px solid rgba(148, 163, 184, 0.14);
    max-height: 22rem;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: rgba(148, 163, 184, 0.3) transparent;
    padding: 0.35rem 0;
}

html.theme-dark .hr-profile-card-links {
    border-top-color: rgba(255, 255, 255, 0.07);
}

.hr-profile-menu-item {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    padding: 0.52rem 1.15rem;
    font-size: 0.85rem;
    font-weight: 500;
    color: #334155;
    transition: background 0.15s ease, color 0.15s ease;
    cursor: pointer;
    background: none;
    border: none;
    width: 100%;
    text-align: left;
}

.hr-profile-menu-item:hover {
    background: rgba(241, 245, 249, 0.9);
    color: #0f172a;
}

html.theme-dark .hr-profile-menu-item {
    color: #8e8e93;
}

html.theme-dark .hr-profile-menu-item:hover {
    background: rgba(255, 255, 255, 0.07);
    color: #ffffff;
}

.hr-menu-icon {
    width: 1rem;
    text-align: center;
    color: #94a3b8;
    flex-shrink: 0;
}

html.theme-dark .hr-menu-icon {
    color: #636366;
}

.hr-menu-logout {
    color: #ef4444 !important;
}

.hr-menu-logout .hr-menu-icon {
    color: #ef4444 !important;
}

.hr-menu-logout:hover {
    background: rgba(254, 226, 226, 0.6) !important;
    color: #dc2626 !important;
}

html.theme-dark .hr-menu-logout:hover {
    background: rgba(69, 10, 10, 0.5) !important;
    color: #fca5a5 !important;
}

.dashboard-hero-actions {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.9rem;
}

.dashboard-hero-primary-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
}

.dashboard-hero-support-link {
    display: inline-flex;
    align-items: center;
    gap: 0.65rem;
    border-radius: 9999px;
    border: 1px solid rgba(148, 163, 184, 0.22);
    background: rgba(255, 255, 255, 0.7);
    padding: 0.7rem 1rem;
    font-size: 0.95rem;
    font-weight: 600;
    color: #475569;
    transition: all 0.2s ease;
}

.dashboard-hero-support-link:hover {
    border-color: rgba(37, 99, 235, 0.35);
    color: #2563eb;
    background: rgba(239, 246, 255, 0.88);
}

html.theme-dark .dashboard-hero-support-link {
    background: #1e1e1e;
    border-color: rgba(255, 255, 255, 0.08);
    color: #ebebf5;
}

html.theme-dark .dashboard-hero-support-link:hover {
    border-color: rgba(96, 165, 250, 0.35);
    color: #ffffff;
    background: #252525;
}

.premium-nav-center {
    min-width: 0;
    justify-self: start;
    flex-wrap: nowrap;
}

.premium-nav-actions {
    flex-shrink: 0;
    justify-self: end;
}

.premium-profile-trigger {
    max-width: 14rem;
}

@media (max-width: 1279px) {
    .premium-nav-link {
        padding: 0.55rem 0.7rem;
        font-size: 0.875rem;
    }

    .premium-profile-trigger {
        max-width: 11rem;
    }
}

@media (min-width: 1024px) {
    .dashboard-hero-actions {
        align-items: flex-end;
    }

    .dashboard-hero-primary-actions {
        justify-content: flex-end;
    }

    main aside:not(.auth-showcase),
    .properties-shell aside:not(.auth-showcase),
    .dashboard-shell aside:not(.auth-showcase),
    .pricing-shell aside:not(.auth-showcase) {
        position: sticky;
        top: 5.5rem;
        align-self: flex-start;
    }

    .dashboard-sidebar-stack {
        position: sticky;
        top: 5.5rem;
        align-self: flex-start;
    }

    .property-detail-sidebar {
        position: sticky;
        top: 5.5rem;
        align-self: flex-start;
    }

    .profile-summary-grid {
        grid-template-columns: minmax(0, 1.3fr) minmax(22rem, 1fr);
    }
}

/* ── Dark mode: remove all drop shadows ─────────────────────────────
   Shadows look wrong on dark surfaces — they add muddy dark halos that
   flatten cards rather than lifting them. Depth is communicated via
   subtle border + background-level contrast instead.
   ─────────────────────────────────────────────────────────────────── */
html.theme-dark .app-shell .shadow-sm,
html.theme-dark .app-shell .shadow,
html.theme-dark .app-shell .shadow-md,
html.theme-dark .app-shell .shadow-lg,
html.theme-dark .app-shell .shadow-xl,
html.theme-dark .app-shell .shadow-2xl,
html.theme-dark .app-shell .shadow-inner,
html.theme-dark .app-shell .hover\:shadow-2xl:hover,
html.theme-dark .app-shell .hover\:shadow-lg:hover,
html.theme-dark .app-shell .hover\:shadow-xl:hover {
    box-shadow: none !important;
}

/* Custom component shadows */
html.theme-dark .premium-nav            { box-shadow: none; }
html.theme-dark .premium-surface        { box-shadow: none; }
html.theme-dark .premium-card-hover:hover { box-shadow: none; }
html.theme-dark .premium-hero-panel     { box-shadow: none; }
html.theme-dark .hr-profile-trigger     { box-shadow: none !important; }
html.theme-dark .hr-profile-card        { box-shadow: none !important; }
html.theme-dark .hr-search-card         { box-shadow: none; }

/* ── Tailwind dark: slate → charcoal remap (public pages) ───────────
   Ensures any dark: Tailwind classes in public blade views use the
   charcoal palette instead of the default slate/navy tones.
   ─────────────────────────────────────────────────────────────────── */
html.theme-dark .dark\:bg-slate-950    { background-color: #141414 !important; }
html.theme-dark .dark\:bg-slate-900    { background-color: #1e1e1e !important; }
html.theme-dark .dark\:bg-slate-800    { background-color: #252525 !important; }
html.theme-dark .dark\:bg-slate-700    { background-color: #2c2c2e !important; }
html.theme-dark .dark\:bg-slate-950\/40 { background-color: rgba(20,20,20,0.4) !important; }
html.theme-dark .dark\:bg-slate-900\/80 { background-color: rgba(30,30,30,0.8) !important; }
html.theme-dark .dark\:bg-slate-800\/80 { background-color: rgba(37,37,37,0.8) !important; }
html.theme-dark .dark\:border-slate-700 { border-color: rgba(255,255,255,0.08) !important; }
html.theme-dark .dark\:border-slate-600 { border-color: rgba(255,255,255,0.10) !important; }
html.theme-dark .dark\:text-slate-200  { color: #ebebf5 !important; }
html.theme-dark .dark\:text-slate-300  { color: #d1d1d6 !important; }
html.theme-dark .dark\:text-slate-400  { color: #8e8e93 !important; }
html.theme-dark .dark\:text-slate-500  { color: #636366 !important; }

/* ── Global Tailwind text/bg overrides for public app shell ─────────
   Catches slate-* classes used directly in blade templates that are
   not prefixed with dark: but still need to flip in dark mode.
   ─────────────────────────────────────────────────────────────────── */
html.theme-dark .app-shell .text-slate-950,
html.theme-dark .app-shell .text-slate-900,
html.theme-dark .app-shell .text-gray-900,
html.theme-dark .app-shell .text-gray-800 { color: #ffffff !important; }

html.theme-dark .app-shell .text-slate-700,
html.theme-dark .app-shell .text-slate-600,
html.theme-dark .app-shell .text-gray-700,
html.theme-dark .app-shell .text-gray-600 { color: #ebebf5 !important; }

html.theme-dark .app-shell .text-slate-500,
html.theme-dark .app-shell .text-gray-500 { color: #8e8e93 !important; }

html.theme-dark .app-shell .text-slate-400,
html.theme-dark .app-shell .text-gray-400 { color: #636366 !important; }

/* ── Support page hero banner ────────────────────────────────────── */
.hr-support-hero {
    border: 1px solid #a7f3d0;              /* emerald-200 — cleaner single-colour border */
    background:
        radial-gradient(ellipse 70% 80% at 100% 0%, rgba(167,243,208,0.45) 0%, transparent 65%),
        radial-gradient(ellipse 55% 70% at 0% 100%, rgba(186,230,253,0.35) 0%, transparent 60%),
        #ffffff;
    position: relative;
    overflow: hidden;
}

html.theme-dark .hr-support-hero {
    background: #1e1e1e;
    border-color: rgba(255, 255, 255, 0.08);
}

/* Stat cards inside the hero banner */
.hr-support-stat-card {
    border: 1px solid rgba(16, 185, 129, 0.18);
    background: rgba(255, 255, 255, 0.88);
    backdrop-filter: blur(10px);
    box-shadow: 0 1px 3px rgba(0,0,0,0.06);
}
html.theme-dark .hr-support-stat-card {
    background: #2c2c2e;
    border-color: rgba(255, 255, 255, 0.08);
    backdrop-filter: none;
}
html.theme-dark .hr-support-stat-card p { color: #ebebf5; }
html.theme-dark .hr-support-stat-card .text-slate-500 { color: #636366 !important; }
html.theme-dark .hr-support-stat-card .text-slate-950 { color: #ffffff !important; }
html.theme-dark .hr-support-stat-card .text-emerald-700 { color: #34d399 !important; }
html.theme-dark .hr-support-stat-card .text-amber-700 { color: #fbbf24 !important; }

/* "Request Live Chat" secondary button */
html.theme-dark .hr-live-chat-btn {
    background: #2c2c2e !important;
    border-color: rgba(255, 255, 255, 0.10) !important;
    color: #ebebf5 !important;
}
html.theme-dark .hr-live-chat-btn:hover {
    background: #3a3a3c !important;
    color: #ffffff !important;
}

/* ── Profile page ────────────────────────────────────────────────── */

/* Form fields — light + dark */
.profile-field {
    background: #ffffff;
    color: #0f172a;
    border-color: #d1d5db;
    transition: border-color 0.18s ease, box-shadow 0.18s ease;
    outline: none;
}
.profile-field:focus {
    border-color: rgb(234 88 12);
    box-shadow: 0 0 0 3px rgba(234, 88, 12, 0.12);
}
.profile-field::placeholder { color: #94a3b8; }

/* Readonly / disabled email field — muted, not broken */
.profile-field--readonly {
    cursor: default;
    opacity: 0.72;
}
.profile-field--readonly:focus {
    border-color: #d1d5db;
    box-shadow: none;
}

/* Dark mode — fields */
html.theme-dark .profile-field {
    background: #252525;
    color: #ebebf5;
    border-color: rgba(255, 255, 255, 0.10);
}
html.theme-dark .profile-field:focus {
    border-color: rgb(234 88 12);
    box-shadow: 0 0 0 3px rgba(234, 88, 12, 0.15);
}
html.theme-dark .profile-field::placeholder { color: #636366; }
html.theme-dark .profile-field--readonly {
    background: #1e1e1e;
    border-color: rgba(255, 255, 255, 0.07);
    opacity: 0.65;
}
html.theme-dark .profile-field--readonly:focus {
    border-color: rgba(255, 255, 255, 0.07);
    box-shadow: none;
}

/* Dark mode — card surfaces */
html.theme-dark .profile-summary-grid .bg-white {
    background: #1e1e1e !important;
    border-color: rgba(255, 255, 255, 0.08) !important;
    box-shadow: none !important;
}

/* Dark mode — headings */
html.theme-dark .profile-summary-grid .text-gray-900,
html.theme-dark .profile-summary-grid h1.text-gray-900,
html.theme-dark .profile-summary-grid h2,
html.theme-dark .profile-summary-grid h3 { color: #ffffff !important; }

/* Dark mode — labels and body text */
html.theme-dark .profile-summary-grid .text-gray-700,
html.theme-dark .profile-summary-grid label { color: #d1d1d6 !important; }
html.theme-dark .profile-summary-grid .text-gray-600 { color: #8e8e93 !important; }
html.theme-dark .profile-summary-grid .text-gray-500 { color: #636366 !important; }

/* Dark mode — row dividers */
html.theme-dark .profile-summary-grid .border-gray-100 { border-color: rgba(255, 255, 255, 0.07) !important; }

/* Dark mode — status / active badge */
html.theme-dark .profile-summary-grid .bg-green-100 { background: rgba(16,185,129,0.15) !important; }
html.theme-dark .profile-summary-grid .text-green-800 { color: #34d399 !important; }

/* Dark mode — warning info box */
html.theme-dark .profile-summary-grid .bg-amber-50  { background: rgba(245,158,11,0.10) !important; }
html.theme-dark .profile-summary-grid .border-amber-200 { border-color: rgba(245,158,11,0.25) !important; }
html.theme-dark .profile-summary-grid .text-amber-900 { color: #fbbf24 !important; }

/* Dark mode — submit buttons */
html.theme-dark .profile-summary-grid .bg-gray-900 { background: #3a3a3c !important; }
html.theme-dark .profile-summary-grid .hover\:bg-gray-800:hover { background: #2c2c2e !important; }

/* ── Secondary "back" navigation button ─────────────────────────── */
.hr-back-btn {
    background: #f1f5f9;
    border: 1px solid #e2e8f0;
    color: #334155;
    white-space: nowrap;
}
.hr-back-btn:hover {
    background: #e2e8f0;
    border-color: #cbd5e1;
    color: #0f172a;
}
html.theme-dark .hr-back-btn {
    background: #2c2c2e;
    border-color: rgba(255, 255, 255, 0.10);
    color: #ebebf5;
}
html.theme-dark .hr-back-btn:hover {
    background: #3a3a3c;
    border-color: rgba(255, 255, 255, 0.14);
    color: #ffffff;
}

/* ── Flash / session notification banners ───────────────────────── */
.hr-flash {
    display: flex;
    align-items: center;
    gap: 0.875rem;
    padding: 0.875rem 1rem 0.875rem 1.125rem;
    border-radius: 0.875rem;
    background: #ffffff;
    border: 1px solid rgba(148, 163, 184, 0.22);
    border-left-width: 4px;
    box-shadow: 0 2px 12px -4px rgba(15, 23, 42, 0.08), 0 1px 3px rgba(15, 23, 42, 0.06);
}

.hr-flash--success { border-left-color: #10b981; }
.hr-flash--error   { border-left-color: #f43f5e; }
.hr-flash--warning { border-left-color: #f59e0b; }

.hr-flash__icon {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.75rem;
    height: 1.75rem;
    border-radius: 9999px;
    font-size: 0.6875rem;
}

.hr-flash--success .hr-flash__icon { background: rgba(16, 185, 129, 0.12); color: #059669; }
.hr-flash--error   .hr-flash__icon { background: rgba(244,  63,  94, 0.12); color: #e11d48; }
.hr-flash--warning .hr-flash__icon { background: rgba(245, 158,  11, 0.12); color: #d97706; }

.hr-flash__body {
    flex: 1;
    font-size: 0.875rem;
    font-weight: 500;
    color: #1e293b;
    line-height: 1.5;
}

.hr-flash__close {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.5rem;
    height: 1.5rem;
    border-radius: 0.5rem;
    background: transparent;
    border: none;
    cursor: pointer;
    color: #94a3b8;
    font-size: 0.75rem;
    transition: background 0.15s ease, color 0.15s ease;
}

.hr-flash__close:hover {
    background: rgba(15, 23, 42, 0.06);
    color: #475569;
}

/* Dark mode */
html.theme-dark .hr-flash {
    background: #1e1e1e;
    border-color: rgba(255, 255, 255, 0.08);
    box-shadow: none;
}

html.theme-dark .hr-flash--success { border-left-color: #34d399; }
html.theme-dark .hr-flash--error   { border-left-color: #fb7185; }
html.theme-dark .hr-flash--warning { border-left-color: #fbbf24; }

html.theme-dark .hr-flash--success .hr-flash__icon { background: rgba(52, 211, 153, 0.12); color: #34d399; }
html.theme-dark .hr-flash--error   .hr-flash__icon { background: rgba(251, 113, 133, 0.12); color: #fb7185; }
html.theme-dark .hr-flash--warning .hr-flash__icon { background: rgba(251, 191,  36, 0.12); color: #fbbf24; }

html.theme-dark .hr-flash__body  { color: #ebebf5; }
html.theme-dark .hr-flash__close { color: #636366; }
html.theme-dark .hr-flash__close:hover { background: rgba(255,255,255,0.06); color: #8e8e93; }

/* ── Wallet / chart range pill group (public pages) ─────────────── */
.hr-wallet-range-group {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem;
    border-radius: 9999px;
    padding: 0.35rem;
    background: rgba(241, 245, 249, 0.92);
    border: 1px solid rgba(148, 163, 184, 0.18);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

.hr-wallet-range-chip {
    display: inline-block;
    text-decoration: none;
    border: 0;
    border-radius: 9999px;
    background: transparent;
    color: #334155;
    cursor: pointer;
    font-size: 0.92rem;
    font-weight: 700;
    line-height: 1;
    padding: 0.8rem 1.15rem;
    transition: background-color 160ms ease, color 160ms ease, box-shadow 160ms ease;
}
.hr-wallet-range-chip:hover {
    background: rgba(255, 255, 255, 0.9);
    color: #0f172a;
    box-shadow: 0 10px 24px -18px rgba(15, 23, 42, 0.45);
}
.hr-wallet-range-chip.is-active {
    background: #0f172a;
    color: #ffffff;
    box-shadow: 0 16px 28px -18px rgba(15, 23, 42, 0.5);
}

html.theme-dark .hr-wallet-range-group {
    background: #252525;
    border-color: rgba(255, 255, 255, 0.08);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03);
}
html.theme-dark .hr-wallet-range-chip {
    color: #ebebf5;
}
html.theme-dark .hr-wallet-range-chip:hover {
    background: rgba(255, 255, 255, 0.08);
    color: #ffffff;
    box-shadow: none;
}
html.theme-dark .hr-wallet-range-chip.is-active {
    background: #c9a56a;
    color: #141414;
    box-shadow: none;
}

/* ── Logo icon (nav brand mark) ──────────────────────────────────── */
.hr-logo-icon {
    background: #0b0f18;
}
html.theme-dark .hr-logo-icon {
    background: #2c2c2e;
}

/* ── Brand text (nav) ────────────────────────────────────────────── */
html.theme-dark .hr-brand-text {
    color: #ffffff !important;
}

/* ── CTA "Get Started" button ────────────────────────────────────── */
.hr-cta-btn {
    background: #0b0f18;
    color: #ffffff;
}
html.theme-dark .hr-cta-btn {
    background: #c9a56a;
    color: #141414;
}

/* ── Mobile menu ─────────────────────────────────────────────────── */
html.theme-dark .hr-mobile-menu {
    background: rgba(20, 20, 20, 0.97) !important;
    border-top-color: rgba(255, 255, 255, 0.08) !important;
}

html.theme-dark .hr-mobile-menu-btn {
    background: rgba(255, 255, 255, 0.1) !important;
    border-color: rgba(255, 255, 255, 0.15) !important;
    color: #ffffff !important;
}

html.theme-dark .hr-mobile-link {
    color: #ebebf5 !important;
}

html.theme-dark .hr-mobile-link:hover {
    background: rgba(255, 255, 255, 0.06) !important;
    color: #ffffff !important;
}

html.theme-dark .hr-mobile-sep {
    border-color: rgba(255, 255, 255, 0.08) !important;
}

/* ── Homepage hero search card ───────────────────────────────────── */
.hr-search-card {
    background: #ffffff;
    border-radius: 1.5rem;
    overflow: hidden;
    box-shadow: 0 32px 64px -24px rgba(0,0,0,0.55), 0 0 0 1px rgba(255,255,255,0.06);
}
html.theme-dark .hr-search-card {
    background: #252525;
    box-shadow: 0 32px 64px -24px rgba(0,0,0,0.7), 0 0 0 1px rgba(255,255,255,0.08);
}

.hr-search-header {
    border-bottom: 1px solid #f1f0ee;
}
html.theme-dark .hr-search-header {
    border-bottom-color: rgba(255, 255, 255, 0.08);
}

.hr-search-eyebrow { color: #9ca3af; }
.hr-search-title   { color: #111827; }
html.theme-dark .hr-search-title { color: #ffffff; }

.hr-search-label { color: #374151; }
html.theme-dark .hr-search-label { color: #8e8e93; }

.hr-search-input {
    width: 100%;
    border-radius: 0.75rem;
    border: 1.5px solid #e5e7eb;
    background: #fafaf9;
    padding: 0.8rem 0.9rem 0.8rem 2.5rem;
    font-size: 0.88rem;
    color: #111827;
    outline: none;
    transition: border-color 0.15s, box-shadow 0.15s;
}
.hr-search-select {
    width: 100%;
    border-radius: 0.75rem;
    border: 1.5px solid #e5e7eb;
    background: #fafaf9;
    padding: 0.8rem 0.9rem;
    font-size: 0.88rem;
    color: #374151;
    outline: none;
    transition: border-color 0.15s;
}
html.theme-dark .hr-search-input,
html.theme-dark .hr-search-select {
    background: #1e1e1e;
    border-color: rgba(255, 255, 255, 0.12);
    color: #ffffff;
}
html.theme-dark .hr-search-input::placeholder { color: #8e8e93; }

.hr-search-footer { display: grid; grid-template-columns: 1fr 1fr 1fr; border-top: 1px solid #f1f0ee; }
html.theme-dark .hr-search-footer { border-top-color: rgba(255, 255, 255, 0.08); }

.hr-search-footer-cell { padding: 0.9rem 0.75rem; text-align: center; }
.hr-search-footer-cell-mid {
    border-left: 1px solid #f1f0ee;
    border-right: 1px solid #f1f0ee;
}
html.theme-dark .hr-search-footer-cell-mid {
    border-left-color: rgba(255, 255, 255, 0.08);
    border-right-color: rgba(255, 255, 255, 0.08);
}

.hr-search-stat-label { font-size: 0.75rem; font-weight: 700; letter-spacing: 0.15em; text-transform: uppercase; color: #9ca3af; }
.hr-search-stat-value { margin-top: 0.2rem; font-size: 0.78rem; font-weight: 600; color: #374151; }
html.theme-dark .hr-search-stat-value { color: #ebebf5; }

/* ── Property card "View details" button ─────────────────────────── */
.hr-prop-detail-btn {
    background: #1a2035;
    color: #ffffff;
}
html.theme-dark .hr-prop-detail-btn {
    background: #3a3a3c;
    color: #ffffff;
}

/* ── "View all listings" pill button ─────────────────────────────── */
html.theme-dark .hr-view-all-btn {
    background: #252525 !important;
    border-color: rgba(255, 255, 255, 0.1) !important;
    color: #ebebf5 !important;
}
html.theme-dark .hr-view-all-btn:hover {
    background: #2c2c2e !important;
    color: #ffffff !important;
}

/* ── Tailwind opacity-modifier bg/border classes ─────────────────────
   Tailwind generates distinct classes for bg-slate-50/65, bg-white/90 etc.
   These need separate overrides as they don't match the base class selector.
   ─────────────────────────────────────────────────────────────────────── */
html.theme-dark .app-shell .bg-slate-50\/65,
html.theme-dark .app-shell .bg-slate-100\/65,
html.theme-dark .app-shell .bg-slate-50\/80,
html.theme-dark .app-shell .bg-white\/80,
html.theme-dark .app-shell .bg-white\/90 {
    background-color: #252525 !important;
}

html.theme-dark .app-shell .border-slate-200\/80,
html.theme-dark .app-shell .border-slate-300\/80,
html.theme-dark .app-shell .border-gray-200\/80 {
    border-color: rgba(255, 255, 255, 0.08) !important;
}

/* ── Trust signal / badge colors in dark mode ────────────────────────
   Property listing trust signal badges (bg-emerald-100, bg-amber-100,
   bg-violet-100, bg-slate-100) rendered in light on dark cards.
   ─────────────────────────────────────────────────────────────────────── */
html.theme-dark .app-shell .bg-emerald-100 { background: rgba(16, 185, 129, 0.18) !important; }
html.theme-dark .app-shell .text-emerald-700 { color: #6ee7b7 !important; }
html.theme-dark .app-shell .bg-amber-100 { background: rgba(245, 158, 11, 0.18) !important; }
html.theme-dark .app-shell .text-amber-700 { color: #fcd34d !important; }
html.theme-dark .app-shell .bg-violet-100 { background: rgba(139, 92, 246, 0.18) !important; }
html.theme-dark .app-shell .text-violet-700 { color: #c4b5fd !important; }
html.theme-dark .app-shell .bg-slate-100 { background: rgba(255, 255, 255, 0.08) !important; }
html.theme-dark .app-shell .text-slate-700 { color: #ebebf5 !important; }
html.theme-dark .app-shell .bg-red-50 { background: rgba(239, 68, 68, 0.12) !important; }
html.theme-dark .app-shell .border-red-200 { border-color: rgba(239, 68, 68, 0.3) !important; }
html.theme-dark .app-shell .text-red-700 { color: #fca5a5 !important; }

/* ── Property card "View Details" button ─────────────────────────────
   Uses bg-gray-100 text-gray-700 in light; remapped for dark.
   ─────────────────────────────────────────────────────────────────────── */
html.theme-dark .app-shell .bg-gray-100 { background: #2c2c2e !important; }
html.theme-dark .app-shell .text-gray-700 { color: #ebebf5 !important; }

/* ── Saved search alert card + checkbox rows ─────────────────────────── */
html.theme-dark .app-shell .border-primary\/10 { border-color: rgba(255,255,255,0.08) !important; }
html.theme-dark .app-shell .border-gray-200 { border-color: rgba(255,255,255,0.08) !important; }

/* ── Pagination links ─────────────────────────────────────────────────── */
html.theme-dark .app-shell nav[aria-label] span,
html.theme-dark .app-shell nav[aria-label] a {
    background: #252525 !important;
    border-color: rgba(255,255,255,0.08) !important;
    color: #ebebf5 !important;
}
html.theme-dark .app-shell nav[aria-label] span[aria-current="page"] {
    background: #c9a56a !important;
    color: #141414 !important;
    border-color: transparent !important;
}
html.theme-dark .app-shell nav[aria-label] a:hover {
    background: #2c2c2e !important;
}

/* ── property image placeholder ─────────────────────────────────────── */
html.theme-dark .app-shell .bg-gray-200 { background: #2c2c2e !important; }
html.theme-dark .app-shell .text-gray-400 { color: #636366 !important; }

/* ── Info / alert / notice boxes (sky, blue, amber tones) ────────────
   These colored light-background boxes (info, warning, tip alerts) need
   to be remapped so they remain readable on charcoal dark backgrounds.
   ─────────────────────────────────────────────────────────────────────── */
html.theme-dark .app-shell .bg-sky-50       { background: rgba(14, 165, 233, 0.10) !important; }
html.theme-dark .app-shell .border-sky-200  { border-color: rgba(14, 165, 233, 0.25) !important; }
html.theme-dark .app-shell .text-sky-700,
html.theme-dark .app-shell .text-sky-800    { color: #7dd3fc !important; }
html.theme-dark .app-shell .text-sky-600    { color: #38bdf8 !important; }

html.theme-dark .app-shell .bg-blue-50      { background: rgba(59, 130, 246, 0.10) !important; }
html.theme-dark .app-shell .border-blue-200 { border-color: rgba(59, 130, 246, 0.25) !important; }
html.theme-dark .app-shell .text-blue-700,
html.theme-dark .app-shell .text-blue-800   { color: #93c5fd !important; }
html.theme-dark .app-shell .text-blue-600   { color: #60a5fa !important; }

html.theme-dark .app-shell .bg-amber-50     { background: rgba(245, 158, 11, 0.10) !important; }
html.theme-dark .app-shell .border-amber-200 { border-color: rgba(245, 158, 11, 0.25) !important; }
html.theme-dark .app-shell .text-amber-600,
html.theme-dark .app-shell .text-amber-700  { color: #fcd34d !important; }

html.theme-dark .app-shell .bg-green-50     { background: rgba(16, 185, 129, 0.10) !important; }
html.theme-dark .app-shell .border-green-200 { border-color: rgba(16, 185, 129, 0.25) !important; }
html.theme-dark .app-shell .text-green-700,
html.theme-dark .app-shell .text-green-800  { color: #6ee7b7 !important; }

html.theme-dark .app-shell .bg-rose-50      { background: rgba(244, 63, 94, 0.10) !important; }
html.theme-dark .app-shell .border-rose-200 { border-color: rgba(244, 63, 94, 0.25) !important; }
html.theme-dark .app-shell .text-rose-600,
html.theme-dark .app-shell .text-rose-700   { color: #fda4af !important; }

/* ── Dashed placeholder boxes (virtual tour, map) ────────────────────── */
html.theme-dark .app-shell .border-dashed { border-color: rgba(255,255,255,0.12) !important; }

/* ── Table styles ─────────────────────────────────────────────────────── */
html.theme-dark .app-shell table thead,
html.theme-dark .app-shell .bg-gray-50 { background: rgba(255, 255, 255, 0.04) !important; }
html.theme-dark .app-shell table td,
html.theme-dark .app-shell table th { border-color: rgba(255,255,255,0.06) !important; color: #ebebf5; }
html.theme-dark .app-shell table th { color: #8e8e93 !important; }

/* ── property primary/10 trust signal badge ──────────────────────────── */
html.theme-dark .app-shell .bg-primary\/10 { background: rgba(37, 99, 235, 0.18) !important; }
html.theme-dark .app-shell .text-primary   { color: #60a5fa !important; }

/* ── Rose/pink alert borders and hover ───────────────────────────────── */
html.theme-dark .app-shell .border-rose-200 { border-color: rgba(244, 63, 94, 0.3) !important; }
html.theme-dark .app-shell .text-rose-500,
html.theme-dark .app-shell .text-rose-600   { color: #fda4af !important; }
html.theme-dark .app-shell .hover\:bg-rose-50:hover { background: rgba(244, 63, 94, 0.10) !important; }

/* ── Dark buttons (bg-slate-950) repurposed for dark mode ────────────── */
html.theme-dark .app-shell .bg-slate-950    { background: #3a3a3c !important; }
html.theme-dark .app-shell .hover\:bg-slate-800:hover { background: #2c2c2e !important; }
html.theme-dark .app-shell .hover\:bg-slate-900:hover { background: #252525 !important; }

/* ── Hover overrides ─────────────────────────────────────────────────── */
html.theme-dark .app-shell .hover\:bg-gray-100:hover { background: #2c2c2e !important; }
html.theme-dark .app-shell .hover\:bg-slate-100:hover { background: #2c2c2e !important; }
html.theme-dark .app-shell .hover\:bg-blue-700:hover { background: #2563eb !important; }
html.theme-dark .app-shell .hover\:text-primary:hover { color: #60a5fa !important; }
html.theme-dark .app-shell .hover\:text-blue-700:hover { color: #93c5fd !important; }

/* ── Border-b dividers in tables / cards ─────────────────────────────── */
html.theme-dark .app-shell .border-b { border-bottom-color: rgba(255,255,255,0.06) !important; }
html.theme-dark .app-shell .divide-y > * + * { border-top-color: rgba(255,255,255,0.06) !important; }

/* ═══════════════════════════════════════════════════════════════════════
   PASTEL CARD / ACTION BOARD FIX
   Opacity-modifier pastels (bg-rose-50/80, bg-emerald-50/80, bg-sky-50/80,
   bg-secondary/5 etc.) all render as garish light washes in dark mode.
   Replace every pastel wash with the charcoal surface colour.
   ═══════════════════════════════════════════════════════════════════════ */

/* Action board card backgrounds */
html.theme-dark .app-shell .bg-rose-50\/80,
html.theme-dark .app-shell .bg-rose-50\/60,
html.theme-dark .app-shell .bg-rose-50\/40      { background: #252525 !important; }
html.theme-dark .app-shell .bg-emerald-50\/80,
html.theme-dark .app-shell .bg-emerald-50\/60,
html.theme-dark .app-shell .bg-emerald-50\/40   { background: #252525 !important; }
html.theme-dark .app-shell .bg-sky-50\/80,
html.theme-dark .app-shell .bg-sky-50\/60,
html.theme-dark .app-shell .bg-sky-50\/40       { background: #252525 !important; }
html.theme-dark .app-shell .bg-amber-50\/80,
html.theme-dark .app-shell .bg-amber-50\/60,
html.theme-dark .app-shell .bg-amber-50\/40     { background: #252525 !important; }
html.theme-dark .app-shell .bg-teal-50\/80,
html.theme-dark .app-shell .bg-purple-50\/80,
html.theme-dark .app-shell .bg-blue-50\/80,
html.theme-dark .app-shell .bg-indigo-50\/80    { background: #252525 !important; }

/* Custom colour opacity variants (primary, secondary, accent) */
html.theme-dark .app-shell .bg-secondary\/5,
html.theme-dark .app-shell .bg-secondary\/10    { background: #252525 !important; }
html.theme-dark .app-shell .border-secondary\/20,
html.theme-dark .app-shell .border-secondary\/30,
html.theme-dark .app-shell .hover\:border-secondary\/30:hover { border-color: rgba(255,255,255,0.10) !important; }

/* Hover pastel backgrounds on quick-action links */
html.theme-dark .app-shell .hover\:bg-emerald-50:hover  { background: rgba(16,185,129,0.08) !important; }
html.theme-dark .app-shell .hover\:bg-amber-50:hover    { background: rgba(245,158,11,0.08) !important; }
html.theme-dark .app-shell .hover\:bg-purple-50:hover   { background: rgba(139,92,246,0.08) !important; }
html.theme-dark .app-shell .hover\:bg-sky-50:hover      { background: rgba(14,165,233,0.08) !important; }
html.theme-dark .app-shell .hover\:bg-teal-50:hover     { background: rgba(20,184,166,0.08) !important; }
html.theme-dark .app-shell .hover\:bg-blue-50:hover     { background: rgba(59,130,246,0.08) !important; }
html.theme-dark .app-shell .hover\:bg-indigo-50:hover   { background: rgba(99,102,241,0.08) !important; }

/* Hover border accents on quick-action links */
html.theme-dark .app-shell .hover\:border-rose-300:hover    { border-color: rgba(244,63,94,0.25) !important; }
html.theme-dark .app-shell .hover\:border-emerald-300:hover { border-color: rgba(16,185,129,0.25) !important; }
html.theme-dark .app-shell .hover\:border-sky-300:hover     { border-color: rgba(14,165,233,0.25) !important; }
html.theme-dark .app-shell .hover\:border-amber-300:hover   { border-color: rgba(245,158,11,0.25) !important; }
html.theme-dark .app-shell .hover\:border-purple-500\/30:hover { border-color: rgba(139,92,246,0.25) !important; }

/* ── Missing *-100 icon bg overrides ─────────────────────────────────── */
html.theme-dark .app-shell .bg-rose-100    { background: rgba(244,63,94,0.15) !important; }
html.theme-dark .app-shell .bg-purple-100  { background: rgba(139,92,246,0.15) !important; }
html.theme-dark .app-shell .bg-sky-100     { background: rgba(14,165,233,0.15) !important; }
html.theme-dark .app-shell .bg-teal-50,
html.theme-dark .app-shell .bg-teal-100    { background: rgba(20,184,166,0.15) !important; }
html.theme-dark .app-shell .bg-cyan-50,
html.theme-dark .app-shell .bg-cyan-100    { background: rgba(6,182,212,0.15) !important; }
html.theme-dark .app-shell .bg-orange-50,
html.theme-dark .app-shell .bg-orange-100  { background: rgba(249,115,22,0.15) !important; }
html.theme-dark .app-shell .bg-indigo-50,
html.theme-dark .app-shell .bg-indigo-100  { background: rgba(99,102,241,0.15) !important; }
html.theme-dark .app-shell .bg-yellow-100  { background: rgba(234,179,8,0.15) !important; }

/* ── Missing *-100 icon text colour overrides ────────────────────────── */
html.theme-dark .app-shell .text-purple-600  { color: #c4b5fd !important; }
html.theme-dark .app-shell .text-sky-600     { color: #38bdf8 !important; }
html.theme-dark .app-shell .text-teal-600    { color: #2dd4bf !important; }
html.theme-dark .app-shell .text-cyan-600    { color: #22d3ee !important; }
html.theme-dark .app-shell .text-orange-600  { color: #fb923c !important; }
html.theme-dark .app-shell .text-indigo-600  { color: #a5b4fc !important; }
html.theme-dark .app-shell .text-yellow-700,
html.theme-dark .app-shell .text-yellow-800  { color: #fde68a !important; }
html.theme-dark .app-shell .text-green-700,
html.theme-dark .app-shell .text-green-800   { color: #6ee7b7 !important; }

/* ── Status badge pairs ───────────────────────────────────────────────── */
html.theme-dark .app-shell .bg-green-100    { background: rgba(22,163,74,0.15) !important; }
html.theme-dark .app-shell .bg-yellow-100   { background: rgba(234,179,8,0.15) !important; }
html.theme-dark .app-shell .text-green-800  { color: #86efac !important; }
html.theme-dark .app-shell .text-yellow-800 { color: #fde68a !important; }

/* ── Emerald reply bubble (inside conversation cards) ────────────────── */
html.theme-dark .app-shell .bg-emerald-50   { background: rgba(16,185,129,0.08) !important; }
html.theme-dark .app-shell .text-emerald-800 { color: #6ee7b7 !important; }

/* ── Warning/alert amber box (profile completion nudge) ─────────────── */
html.theme-dark .app-shell .bg-amber-50     { background: rgba(245,158,11,0.08) !important; }
html.theme-dark .app-shell .text-amber-900  { color: #fcd34d !important; }
html.theme-dark .app-shell .border-amber-300 { border-color: rgba(245,158,11,0.3) !important; }
html.theme-dark .app-shell .hover\:bg-amber-100:hover { background: rgba(245,158,11,0.12) !important; }

/* ── Additional opacity-modifier bg classes (support, show pages) ─────── */
html.theme-dark .app-shell .bg-primary\/5   { background: rgba(37,99,235,0.10) !important; }
html.theme-dark .app-shell .bg-secondary\/10 { background: rgba(15,118,110,0.15) !important; }
html.theme-dark .app-shell .bg-amber-50\/70  { background: rgba(245,158,11,0.08) !important; }
html.theme-dark .app-shell .hover\:bg-red-50:hover   { background: rgba(239,68,68,0.08) !important; }
html.theme-dark .app-shell .hover\:bg-slate-50:hover { background: rgba(255,255,255,0.04) !important; }
html.theme-dark .app-shell .border-primary\/30 { border-color: rgba(37,99,235,0.3) !important; }
html.theme-dark .app-shell .hover\:border-primary\/30:hover { border-color: rgba(37,99,235,0.3) !important; }