\/* Ensure the private areas show up */
#privateSecondaryNav:not(.d-none), 
#privateColumns:not(.d-none) {
    display: block !important;
}

/* Fix the layout of the 9 assistant buttons test */
.assistant-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 10px;
}

.brand-text {
    color: #b08a48 !important; /* Gold */
    font-weight: bold;
}

/* ==========================================================================
   NUCLEAR MOBILE HEADER FIX (The "Block Hammer" Method)
   Destroys Flexbox layout on mobile to force a hard vertical stack.
   ========================================================================== */

@media (max-width: 991px) {

    /* 1. THE PARENT CONTAINER: Stop Flexing, Start Stacking */
    /* display: block forces elements to act like paragraphs (one after another) */
    html body header nav.navbar .container {
        display: block !important;
        text-align: center !important;
        height: auto !important;
        padding-bottom: 10px !important;
    }

    /* 2. THE BRAND (Logo + Text): Force Full Width Block */
    html body header nav.navbar .navbar-brand {
        display: block !important;
        width: 100% !important;
        margin-right: 0 !important;
        margin-bottom: 5px !important; /* Push buttons down */
        text-align: center !important;
    }

    /* Make sure the logo image and text sit nicely inside the block */
    html body header nav.navbar .navbar-brand > * {
        display: inline-block !important;
        vertical-align: middle !important;
    }

    /* 3. THE TEXT: Stack properly */
    html body header nav.navbar .brand-text {
        font-size: 1.1rem !important;
        white-space: normal !important;
    }

    /* 4. THE BUTTONS WRAPPER: Force Full Width Block below */
    html body header nav.navbar #mainNav,
    html body header nav.navbar #mainNav.navbar-collapse {
        display: block !important;
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        visibility: visible !important;
        opacity: 1 !important;
        position: relative !important;
    }

    /* 5. THE BUTTONS THEMSELVES: Center them */
    html body header nav.navbar #mainNav .navbar-nav {
        display: inline-flex !important; /* Keep buttons side-by-side inside the block */
        flex-direction: row !important;
        justify-content: center !important;
        width: auto !important;
        gap: 8px !important;
    }

    /* 6. SPACE SAVER: Hide text labels on very small screens */
    @media (max-width: 480px) {
        html body header nav.navbar .btn span:not(#credit-balance):not(.badge) {
            display: none !important;
        }
        html body header nav.navbar .btn {
            padding: 6px 12px !important;
        }
        html body header nav.navbar .btn i {
            margin: 0 !important;
            font-size: 1.2rem !important;
        }
    }
}
/* FORCE HIDE DISABLED TOOLS */
.user-disabled-tool {
    display: none !important;
}

/* ... (The code I gave you previously) ... */

.modal-xl-custom {
    height: 85vh;
    border-radius: 12px;
    overflow: hidden;
}

.iframe-full {
    width: 100%;
    height: 100%;
    border: none;
    display: block;
}

/* === NEW: FIX GOOGLE SHEET ON MOBILE === */
@media (max-width: 768px) {
    /* Target the ratio box inside the Artist Sheet View.
       We override the 16x9 ratio to make it tall (125%) on phones.
    */
    #artistSheetView .ratio {
        --bs-aspect-ratio: 125%; /* Taller vertical rectangle */
    }
    
    /* Ensure the modal doesn't get cut off on very small screens */
    .modal-xl-custom {
        height: 90vh; /* slightly taller on mobile */
    }
}