:root {
    /* Mobile layout variables - consistent across all pages */
    --mobile-page-margin: 16px;
    --mobile-topbar-bg: #FAECDA;
    --mobile-topbar-height: 60px;
    --mobile-hero-heading-weight: 600;
    --mobile-section-heading-weight: 500;
    --mobile-button-font-size: 1rem;
    --mobile-button-font-weight: 600;

    --primary-bg: #E8F4F8;
    --secondary-bg: #F5F3F2;
    --accent1: #9CB0A3;
    --accent2: #FFC7B6;
    --text-dark: #3A3A3A;
    --text-light: #5A5F5A;
    --login-bg: rgba(255, 255, 255, 0.25);
    --input-bg: rgba(255, 255, 255, 0.9);
    --theme-toggle-bg: rgba(255, 255, 255, 0.9);
    --overlay-opacity: 0.3;
    --ai-bubble: #D8E8E5;
    --highlight: #FFC7B6;
    --user-bubble: #FFFFFF;
    --night-primary-bg: #1A1A1A;
    --night-secondary-bg: #2E2E2E;
    --night-ai-bubble: #3A3A3A;
    --night-user-bubble: #4E4E4E;
    --night-text-dark: #E8E8E8;
    --night-text-light: #B5B5B5;
    --night-highlight: #FF6F61;
    --night-input-bg: #333333;
    --bg: #fff9f6;
    /* Main page background - soft cream */
    --sidebar-bg: #fff2ec;
    /* Sidebar background - from ThemeChat */
    --card-bg: var(--peach);
    /* For dashboard cards - very light, almost white */
    --card-image-bg: #fff7f2;
    /* Softer cream for image placeholder area */
    --accent: #ffc4b3;
    /* Peach accent from ThemeChat */
    --peach: #ffdacf;
    /* Lighter peach from ThemeChat */
    --text: #4b2e2e;
    /* Main text color from ThemeChat */
    --text-light: #6a504b;
    /* Lighter text for descriptions, secondary info */
    --soft-border: #f0dad3;
    /* Soft border color from ThemeChat */
    --font-sans: 'Inter', system-ui, -apple-system, sans-serif;
    --font-serif: 'Fraunces', Georgia, serif;
    --font-handwriting: 'Caveat', cursive;
    --font-lato: var(--font-sans);
    /* Legacy mapping */
    --font-merriweather: var(--font-serif);
    /* Legacy mapping */
    --shadow-soft: 0 2px 8px rgba(75, 46, 46, 0.06);
    /* Softer shadow for cards */
    --shadow-medium: 0 4px 15px rgba(75, 46, 46, 0.08);
    /* Slightly more pronounced */
    --button-card-primary-bg: var(--peach);
    --button-card-primary-hover-bg: var(--accent);
    --button-card-primary-text: var(--text);
    --button-card-secondary-border: var(--soft-border);
    --button-card-secondary-hover-bg: var(--sidebar-bg);
    --button-card-secondary-hover-border: var(--peach);
    --main-content-bg: #FAECDA;
    --card-content-bg: #fff2ec;
    --card-image-placeholder-bg: #f7f5f2;
    --peach-bg: #fff2ec;
    /* overlay backdrop */
    --core: #FFD9C7;
    /* inner sun core */
    --peach-2: #FFD9C7;
    /* halo color */
    --white: #fff;
    --ci-backdrop: rgba(20, 14, 11, .78);
    --ci-disk-0: #FFF5EE;
    --ci-disk-1: #FFE5D6;
    --ci-disk-2: #FFC9AD;
    --ci-white: #FFFDF8;
    --ci-ink: #FAE9DE;
    --ci-ink-soft: rgba(250, 233, 222, .75);
    --ci-peach: #FBD8CD;
    /* 125% zoom effect variables */
    /* --base-font-size: 20px;
    --sidebar-width: 350px;
    --sidebar-padding: 2.1rem;
    --main-content-margin: 350px;
    --main-box-padding: 1.5rem 3rem;
    --card-padding: 1.9rem 1.9rem;
    --card-title-size: 1.9rem;
    --nav-button-font-size: 1.15rem;
    --nav-button-padding: 1.2rem 1.3rem;
    --sidebar-toggle-font-size: 1.5rem;
    --sidebar-toggle-padding: 10px 16px;
    --main-content-header-size: 2.5rem;
    --main-content-header-margin-bottom: 2.5rem;
    --scale-factor: 1.25; /* Our target zoom level */
    /* font-size: var(--base-font-size); */
}

@media (max-width: 560px) {
    .app-container:has(.foyer-main) .floating-host-container,
    .app-container:has(.oracles-container) .floating-host-container,
    .app-container:has(.featured-hero) .floating-host-container,
    .app-container:has(.penpals-main) .floating-host-container,
    .app-container:has(.filters-panel) .floating-host-container,
    .app-container:has(.lovedones-wall-hero) .floating-host-container,
    .app-container:has(.vault-card) .floating-host-container,
    .app-container:has(.keepsake-card) .floating-host-container {
        display: none;
    }
}

/* Auth pages use their own focused shell without Mini Granny chrome. */
.app-container:has(.check-email-page) .candle,
.app-container:has(.check-email-page) .floating-host-container,
.app-container:has(.check-email-page) .companion-overlay,
.app-container:has(.check-email-page) .companion-auth-modals,
.app-container:has(.magic-link-page) .candle,
.app-container:has(.magic-link-page) .floating-host-container,
.app-container:has(.magic-link-page) .companion-overlay,
.app-container:has(.magic-link-page) .companion-auth-modals {
    display: none !important;
}




body.night-mode {
    background: linear-gradient(45deg, var(--night-primary-bg), var(--night-secondary-bg));
    color: var(--night-text-dark);
}

/* Global Sidebar Fix - enforcing consistent border across all pages */
.sidebar {
    border-right: 1px solid #d8b8ad !important;
}

@media (max-width: 1024px) {
    .mobile-floating-header {
        z-index: 1300 !important;
    }

    body:has(.app-layout > .sidebar.visible) {
        overflow: hidden !important;
        touch-action: none;
    }

    .app-layout > .sidebar {
        position: fixed !important;
        inset: 0 !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        z-index: 1200 !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;
        width: 100vw !important;
        max-width: none !important;
        min-width: 0 !important;
        height: 100vh !important;
        height: 100dvh !important;
        min-height: 100svh !important;
        padding: calc(84px + env(safe-area-inset-top, 0px)) max(20px, calc(env(safe-area-inset-right, 0px) + 20px)) max(26px, calc(env(safe-area-inset-bottom, 0px) + 26px)) max(20px, calc(env(safe-area-inset-left, 0px) + 20px)) !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        overscroll-behavior: contain !important;
        -webkit-overflow-scrolling: touch !important;
        border-right: 0 !important;
        background:
            linear-gradient(180deg, #fffcf6 0%, #FAECDA 44%, #f6e6d0 100%) !important;
        box-shadow: none !important;
        opacity: 0 !important;
        visibility: hidden !important;
        pointer-events: none !important;
        transform: translateY(12px) scale(0.985) !important;
        transition:
            opacity 0.22s ease,
            visibility 0.22s ease,
            transform 0.24s ease !important;
    }

    .app-layout > .sidebar.visible {
        opacity: 1 !important;
        visibility: visible !important;
        pointer-events: auto !important;
        transform: translateY(0) scale(1) !important;
    }

    .app-layout > .sidebar.hidden {
        width: 100vw !important;
        padding: calc(84px + env(safe-area-inset-top, 0px)) max(20px, calc(env(safe-area-inset-right, 0px) + 20px)) max(26px, calc(env(safe-area-inset-bottom, 0px) + 26px)) max(20px, calc(env(safe-area-inset-left, 0px) + 20px)) !important;
        transform: translateY(12px) scale(0.985) !important;
    }

    .app-layout > .sidebar .sidebar-menu {
        width: min(100%, 520px) !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }

    .app-layout > .sidebar .sidebar-bottom,
    .app-layout > .sidebar .sidebar-guest-actions {
        width: min(100%, 520px) !important;
        margin-left: auto !important;
        margin-right: auto !important;
        margin-top: auto !important;
        padding-top: 1.15rem !important;
        border-top: 1px solid rgba(118, 82, 62, 0.12) !important;
    }

    .app-layout > .sidebar .sidebar-bottom {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    .app-layout > .sidebar-overlay {
        display: none !important;
    }

    body.night-mode .app-layout > .sidebar {
        background:
            linear-gradient(180deg, #2c2520 0%, #221d19 48%, #1c1815 100%) !important;
        color: #E8DDD0 !important;
    }

    body.night-mode .app-layout > .sidebar .sidebar-bottom,
    body.night-mode .app-layout > .sidebar .sidebar-guest-actions {
        border-top-color: rgba(229, 190, 146, 0.15) !important;
    }
}

@media (max-width: 420px) {
    .app-layout > .sidebar {
        padding-left: max(16px, calc(env(safe-area-inset-left, 0px) + 16px)) !important;
        padding-right: max(16px, calc(env(safe-area-inset-right, 0px) + 16px)) !important;
    }
}

@media (max-width: 420px) and (max-height: 740px) {
    .app-layout > .sidebar {
        padding-top: calc(76px + env(safe-area-inset-top, 0px)) !important;
        padding-bottom: max(18px, calc(env(safe-area-inset-bottom, 0px) + 18px)) !important;
    }

    .app-layout > .sidebar .sidebar-bottom,
    .app-layout > .sidebar .sidebar-guest-actions {
        padding-top: 0.75rem !important;
    }
}

@media (max-width: 1024px) and (prefers-reduced-motion: reduce) {
    .app-layout > .sidebar,
    .app-layout > .sidebar.hidden,
    .app-layout > .sidebar.visible {
        transform: none !important;
        transition: opacity 0.12s linear, visibility 0.12s linear !important;
    }
}

.night-mode {
    --primary-bg: #1A2A32;
    --secondary-bg: #2D3B44;
    --text-dark: #E8F4F8;
    --text-light: #CFD8DC;
    --login-bg: rgba(45, 59, 68, 0.95);
    --input-bg: rgba(26, 42, 50, 0.9);
    --theme-toggle-bg: rgba(26, 42, 50, 0.9);
    --overlay-opacity: 0.6;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;

}

body {
    min-height: 100vh;
    background-color: rgb(250, 236, 218);
    /*background: linear-gradient(45deg, var(--primary-bg), var(--secondary-bg));*/
    /*background-image: url('https://images.unsplash.com/photo-1500382017468-9049fed747ef?ixlib=rb-1.2.1&auto=format&fit=crop&w=1920&q=80');*/
    background-size: cover;
    background-position: center;
    transition: all 0.5s ease;
    position: relative;
}

/* Remove the dark overlay - we don't need it for the front page */
/* body::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(
        rgba(0, 0, 0, var(--overlay-opacity)),
        rgba(0, 0, 0, var(--overlay-opacity))
    );
    transition: all 0.5s ease;
} */

.bubble {
    background-color: var(--ai-bubble);
    border-radius: 16px;
    padding: 20px;
    box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.1);
    /* inherited font-sans */
    color: var(--text-dark);
    line-height: 1.6;

}

body.night-mode .bubble {
    background-color: var(--night-ai-bubble);
    color: var(--night-text-dark);
}

.bubble h1,
.bubble h2,
.bubble h3 {
    font-weight: bold;
    margin: 8px 0;
}

.bubble ul,
.bubble ol {
    padding-left: 20px;
    margin-bottom: 10px;
}

.bubble pre {
    background-color: #f5f5f5;
    padding: 10px;
    border-radius: 5px;
    overflow-x: auto;
}

body.night-mode .bubble pre {
    background-color: var(--night-secondary-bg);
}

.bubble code {
    font-family: "Courier New", monospace;
    background-color: #f0f0f0;
    padding: 2px 4px;
    border-radius: 4px;
}

body.night-mode .bubble code {
    background-color: var(--night-secondary-bg);
}

.bubble img {
    max-width: 100%;
    height: auto;
    border-radius: 5px;
    margin: 5px 0;
}

.bubble .ai-uploaded-image {
    width: 100%;
    max-width: 200px;
    height: auto;
    border-radius: 12px;
    object-fit: cover;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    margin: 8px;
    border: 2px solid #e0e0e0;
}

.bubble .ai-uploaded-image:hover {
    transform: scale(1.05);
    box-shadow: 0px 6px 20px rgba(0, 0, 0, 0.15);
}

.bubble img+img {
    margin-left: 5px;
}

.bubble {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.bubble p:last-child {
    font-style: italic;
    color: #4a4a4a;
}

body.night-mode .bubble p:last-child {
    color: var(--night-text-light);
}

/* Responsive Image Grid */
.bubble .ai-uploaded-image {
    display: inline-block;
}

.bubble p {
    font-size: 1.2em !important;
    /* Adjust size as needed */
    line-height: 1.5;
    /* Improve readability */
}

.ai-avatar {
    width: 120px;
    height: 120px;
    border-radius: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 15px auto;
    background-color: #f0f0f0;
    overflow: hidden;
    border: 3px solid var(--highlight);
}

.avatar-placeholder {
    font-size: 60px;
    line-height: 1;
}



.ai-avatar {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}

.profile-image {
    width: 150px;
    height: 150px;
    object-fit: cover;
    border-radius: 50%;
    border: 3px solid var(--highlight);
}

/* Style for all form fields to maintain consistency */
.form-field {
    margin-bottom: 20px;
    width: 100%;
}

/* Style for text inputs (plain HTML elements replacing Fluent web components) */
.form-field input[type="text"],
.form-field input[type="email"],
.form-field input[type="password"],
.form-field input[type="search"],
.form-field input[type="tel"],
.form-field input[type="url"],
.form-field input[type="number"],
.form-field input[type="datetime-local"],
.form-field input,
.form-field .text-input {
    width: 100%;
    box-sizing: border-box;
    min-height: 40px;
}

/* Style for select dropdowns */
.form-field select {
    width: 100%;
    box-sizing: border-box;
    min-height: 40px;
}

/* Style for date pickers */
.form-field input[type="date"] {
    width: 100%;
    box-sizing: border-box;
    min-height: 40px;
}

/* Style for checkboxes and radio buttons */
.form-field input[type="checkbox"],
.form-field input[type="radio"] {
    display: block;
    margin-bottom: 8px;
}

/* Style for sliders */
.form-field input[type="range"] {
    width: 100%;
    margin: 10px 0;
}

.form-field textarea {
    width: 100%;
    min-height: 80px;
    box-sizing: border-box;
}

/* Style for field labels */
.form-field label {
    display: block;
    margin-bottom: 8px;
    font-weight: 500;
    color: var(--text-dark);
}

/* Night mode adjustments */
body.night-mode .form-field label {
    color: var(--night-text-dark);
}

/* Field focus states */
::deep .form-field input:focus,
::deep .form-field select:focus,
::deep .form-field textarea:focus {
    border-color: var(--highlight);
    outline: none;
}

body.night-mode ::deep .form-field input:focus,
body.night-mode ::deep .form-field select:focus,
body.night-mode ::deep .form-field textarea:focus {
    border-color: var(--night-highlight);
}

/* Form sections */
.form-section {
    background-color: rgba(255, 255, 255, 0.7);
    padding: 20px;
    border-radius: 10px;
    margin-bottom: 30px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

body.night-mode .form-section {
    background-color: rgba(40, 40, 40, 0.8);
}

.form-section h3 {
    margin-bottom: 15px;
    border-bottom: 2px solid var(--highlight);
    padding-bottom: 8px;
    color: var(--text-dark);
}

body.night-mode .form-section h3 {
    color: var(--night-text-dark);
    border-bottom-color: var(--night-highlight);
}

@media (min-width: 600px) {
    .bubble {
        padding: 24px;
    }

    .bubble .ai-uploaded-image {
        max-width: 160px;
    }

    .bubble {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 12px;
    }
}

/* Timeline for Recent Activity */
.timeline {
    position: relative;
    padding: 1rem 0;
}

.timeline::before {
    content: '';
    position: absolute;
    left: 10px;
    top: 0;
    height: 100%;
    width: 2px;
    background: #e9ecef;
}

.timeline-item {
    position: relative;
    padding-left: 40px;
    margin-bottom: 1.5rem;
}

.timeline-item:last-child {
    margin-bottom: 0;
}

.timeline-badge {
    position: absolute;
    left: 0;
    top: 0;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
}

.timeline-badge i {
    font-size: 0.7rem;
    color: #fff;
}

.timeline-content {
    padding-bottom: 1rem;
}

/* Card hover effects */
.loved-one-card {
    transition: transform 0.2s, box-shadow 0.2s;
    cursor: pointer;
}

.loved-one-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
}



/*.theme-chat-message.ai p:last-child {
    font-style: italic !important;
    color: #4a4a4a;
    
    color: #444;
    display: block;
    margin-top: 0.5rem;
}*/

.theme-chat-bubble p {
    line-height: 1.6;
    margin: 0;
}

.theme-chat-bubble h1,
.theme-chat-bubble h2,
.theme-chat-bubble h3 {
    font-weight: bold;
    margin: 8px 0;
}

.theme-chat-bubble ul,
.theme-chat-bubble ol {
    padding-left: 20px;
    margin-bottom: 10px;
}

.theme-chat-bubble pre {
    background-color: #f5f5f5;
    padding: 10px;
    border-radius: 5px;
    overflow-x: auto;
}


.theme-chat-bubble code {
    font-family: "Courier New", monospace !important;
    background-color: #f0f0f0;
    padding: 2px 4px;
    border-radius: 4px;
}



/* (Other global styles you provided such as for .login-container, h2, .input-group, etc.) */

/* Strong override: constrain inline images inside AI chat bubbles globally
   This helps when component-scoped CSS is overridden by other global rules. */
.loved-one-chat-bubble.ai img:not(.uploaded-image):not(.file-chip-thumbnail),
.loved-one-chat-bubble.ai-bubble-with-save img:not(.uploaded-image):not(.file-chip-thumbnail),
.loved-one-chat-message.ai .loved-one-chat-bubble img:not(.uploaded-image):not(.file-chip-thumbnail) {
    max-width: 220px !important;
    max-height: 220px !important;
    width: auto !important;
    height: auto !important;
    object-fit: cover !important;
    border-radius: 10px !important;
    display: block !important;
}

@media (max-width: 768px) {

    .loved-one-chat-bubble.ai img:not(.uploaded-image):not(.file-chip-thumbnail),
    .loved-one-chat-bubble.ai-bubble-with-save img:not(.uploaded-image):not(.file-chip-thumbnail),
    .loved-one-chat-message.ai .loved-one-chat-bubble img:not(.uploaded-image):not(.file-chip-thumbnail) {
        max-width: 160px !important;
        max-height: 160px !important;
    }
}

@media (max-width: 1024px) {
    .sidebar .sidebar-top-content {
        display: none !important;
    }
}

@media (min-width: 1025px) {
    .sidebar .sidebar-top-content {
        flex-shrink: 0 !important;
        margin-bottom: 1rem !important;
    }

    .sidebar .app-logo-link {
        display: block !important;
        width: 100% !important;
        margin-top: -1.2rem !important;
        margin-bottom: 1rem !important;
        text-align: center !important;
        text-decoration: none !important;
    }

    .sidebar .sidebar-logo img {
        display: inline-block !important;
        width: auto !important;
        max-width: 180px !important;
        height: 50px !important;
        margin: 0 !important;
        vertical-align: middle !important;
        border: none !important;
        border-radius: 0 !important;
        box-shadow: none !important;
    }
}

/* Mini Granny mobile overlay override.
   iOS Safari keeps fixed elements tied to the visual viewport and safe areas,
   so keep the chat stack above the browser chrome and cap long greetings. */
@media (max-width: 768px) {
    .companion-overlay {
        --companion-mobile-input-bottom: max(16px, calc(env(safe-area-inset-bottom, 0px) + 16px));
        --companion-mobile-input-height: 62px;
        --companion-mobile-stack-gap: 18px;
        --companion-mobile-stack-bottom: calc(var(--companion-mobile-input-bottom) + var(--companion-mobile-input-height) + var(--companion-mobile-stack-gap));
        --companion-mobile-top-clearance: max(24px, calc(env(safe-area-inset-top, 0px) + 56px));
        height: 100vh !important;
        height: 100dvh !important;
        min-height: 100svh !important;
        overflow: hidden !important;
        overscroll-behavior: contain !important;
    }

    .companion-close {
        top: max(12px, calc(env(safe-area-inset-top, 0px) + 12px)) !important;
        right: max(12px, calc(env(safe-area-inset-right, 0px) + 12px)) !important;
    }

    .companion-granny-container {
        bottom: var(--companion-mobile-stack-bottom) !important;
        left: max(16px, calc(env(safe-area-inset-left, 0px) + 16px)) !important;
        right: max(16px, calc(env(safe-area-inset-right, 0px) + 16px)) !important;
        max-height: calc(100vh - var(--companion-mobile-stack-bottom) - var(--companion-mobile-top-clearance)) !important;
        max-height: calc(100dvh - var(--companion-mobile-stack-bottom) - var(--companion-mobile-top-clearance)) !important;
    }

    .speech-cloud {
        box-sizing: border-box !important;
        min-width: min(260px, calc(100vw - 112px)) !important;
        max-width: min(72vw, calc(100vw - 112px)) !important;
        max-height: calc(100vh - var(--companion-mobile-stack-bottom) - var(--companion-mobile-top-clearance)) !important;
        max-height: calc(100dvh - var(--companion-mobile-stack-bottom) - var(--companion-mobile-top-clearance)) !important;
        overflow: hidden !important;
    }

    .speech-cloud-content {
        max-height: min(46vh, 360px) !important;
        max-height: min(46dvh, 360px) !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch !important;
        overscroll-behavior: contain !important;
    }

    .thought-bar-container {
        bottom: var(--companion-mobile-input-bottom) !important;
        left: max(12px, calc(env(safe-area-inset-left, 0px) + 12px)) !important;
        right: max(12px, calc(env(safe-area-inset-right, 0px) + 12px)) !important;
    }

    .suggestion-chips-container,
    .revisit-chips-container {
        bottom: calc(var(--companion-mobile-input-bottom) + var(--companion-mobile-input-height) + 8px) !important;
        left: max(12px, calc(env(safe-area-inset-left, 0px) + 12px)) !important;
        right: max(12px, calc(env(safe-area-inset-right, 0px) + 12px)) !important;
    }
}

/* Subscription page trust row override.
   Keep this global because Blazor isolated CSS can stay bundled until app restart. */
.subscription-trust-row {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    gap: clamp(1.35rem, 4vw, 3rem) !important;
    flex-wrap: wrap !important;
    max-width: 960px !important;
    margin: 2.05rem auto 1.15rem !important;
    padding: 1.15rem 1rem 0 !important;
    border-width: 1px 0 0 0 !important;
    border-style: solid !important;
    border-image: linear-gradient(to right, transparent, rgba(169, 127, 86, 0.18), transparent) 1 !important;
    border-radius: 0 !important;
    background: transparent !important;
}

.subscription-trust-item {
    justify-content: flex-start !important;
    text-align: left !important;
    padding: 0 !important;
}

.subscription-trust-item + .subscription-trust-item {
    border-left: none !important;
    border-top: none !important;
}

@media (max-width: 992px) {
    .subscription-trust-row {
        max-width: 440px !important;
        gap: 0.8rem 1.2rem !important;
        padding-top: 1rem !important;
    }

    .subscription-trust-item {
        justify-content: center !important;
        text-align: center !important;
    }
}

/* Subscription page portrait-credit panel override. */
.credit-balance-section {
    width: 100% !important;
    max-width: 860px !important;
    margin: 4.5rem auto 2.75rem !important;
    padding: 0 1rem !important;
}

.credit-balance-card {
    position: relative !important;
    display: grid !important;
    grid-template-columns: minmax(260px, 1fr) auto minmax(180px, auto) !important;
    grid-template-areas:
        "title balance action"
        "info balance action" !important;
    align-items: center !important;
    column-gap: clamp(1.5rem, 4vw, 3rem) !important;
    row-gap: 0.75rem !important;
    max-width: none !important;
    margin: 0 auto !important;
    padding: 2rem 2.25rem !important;
    text-align: left !important;
    overflow: hidden !important;
    border-radius: 16px !important;
    border: 1px solid rgba(154, 111, 79, 0.2) !important;
    background: linear-gradient(135deg, rgba(255, 253, 249, 0.96) 0%, rgba(255, 246, 236, 0.94) 58%, rgba(255, 234, 211, 0.72) 100%) !important;
    box-shadow: 0 18px 42px rgba(84, 58, 43, 0.09), 0 1px 0 rgba(255, 255, 255, 0.78) inset !important;
}

.credit-balance-header {
    grid-area: title !important;
    justify-content: flex-start !important;
    gap: 0.8rem !important;
    margin: 0 !important;
}

.credit-balance-icon {
    width: 2.1rem !important;
    height: 2.1rem !important;
    flex-basis: 2.1rem !important;
    border-radius: 999px !important;
    background: rgba(255, 246, 236, 0.86) !important;
    box-shadow: inset 0 0 0 1px rgba(154, 111, 79, 0.14) !important;
}

.credit-balance-header h3 {
    font-size: 1.55rem !important;
    line-height: 1.15 !important;
    color: #6F4538 !important;
}

.credit-balance-content {
    grid-area: balance !important;
    min-width: 150px !important;
    padding: 0 1.8rem !important;
    margin: 0 !important;
    border-left: 1px solid rgba(154, 111, 79, 0.16) !important;
    border-right: 1px solid rgba(154, 111, 79, 0.16) !important;
}

.credit-count {
    font-size: 3.7rem !important;
}

.credit-label {
    max-width: 9rem !important;
    font-size: 0.95rem !important;
    line-height: 1.35 !important;
}

.credit-info {
    grid-area: info !important;
    max-width: 360px !important;
    margin: 0 !important;
}

.credit-topup-link {
    grid-area: action !important;
    justify-self: end !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-width: 172px !important;
    min-height: 52px !important;
    padding: 0.85rem 1.45rem !important;
    border-radius: 999px !important;
    box-shadow: 0 10px 22px rgba(90, 62, 54, 0.2) !important;
}

@media (max-width: 768px) {
    .app-container:has(.experience-shell) > .candle {
        display: none;
    }

    .credit-balance-section {
        margin-top: 3.2rem !important;
        margin-bottom: 2.25rem !important;
    }

    .credit-balance-card {
        grid-template-columns: 1fr !important;
        grid-template-areas:
            "title"
            "balance"
            "info"
            "action" !important;
        justify-items: center !important;
        text-align: center !important;
        padding: 1.65rem !important;
        margin: 0 1rem !important;
        row-gap: 1.1rem !important;
    }

    .credit-balance-header {
        justify-content: center !important;
    }

    .credit-balance-header h3 {
        font-size: 1.35rem !important;
    }

    .credit-balance-content {
        width: 100% !important;
        padding: 1.05rem 0 !important;
        border-left: none !important;
        border-right: none !important;
        border-top: 1px solid rgba(154, 111, 79, 0.14) !important;
        border-bottom: 1px solid rgba(154, 111, 79, 0.14) !important;
    }

    .credit-info {
        max-width: 24rem !important;
    }

    .credit-count {
        font-size: 3rem !important;
    }

    .credit-topup-link {
        justify-self: center !important;
        width: 100% !important;
        max-width: 240px !important;
    }
}

/* Reset password page live layout override. */
.reset-password-page {
    width: 100% !important;
    flex: 1 1 auto !important;
}