@import '_content/Microsoft.FluentUI.AspNetCore.Components/Microsoft.FluentUI.AspNetCore.Components.84wtju4z0n.bundle.scp.css';

/* /Components/Layout/ImageGallery.razor.rz.scp.css */
/* --- 1. Base / Main Content --- */
.main-content-scrollable[b-130emioidr] {
    width: 100%;
}

/* --- 2. Gallery Grid --- */
.gallery-grid[b-130emioidr] {
    position: relative;
    width: 100%;
    margin: 0 auto;
    display: block;
}

.grid-item[b-130emioidr] {
    position: absolute; /* Required for Masonry script */
    transition: transform 0.6s cubic-bezier(0.23, 1, 0.32, 1);
    border-radius: 12px;
    overflow: hidden;
    cursor: pointer;
}

    .grid-item img[b-130emioidr] {
        width: 100%;
        display: block;
        height: auto;
        transition: transform 0.3s ease;
    }

    .grid-item:hover img[b-130emioidr] {
        transform: scale(1.05);
    }

    .grid-item img.creator-avatar[b-130emioidr] {
        position: absolute;
        bottom: 8px;
        left: 8px;
        z-index: 10;        
        width: 32px !important;
        height: 32px !important;
        border-radius: 50%;
        object-fit: cover;
        border: 2px solid rgba(255, 255, 255, 0.8);
        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.6);
    }

/* --- 3. Ultra-Smooth Responsive Column Logic --- */
@media (min-width: 1801px) and (max-width: 2500px) {
    .grid-item[b-130emioidr] {
        width: calc((100% - (12px * 9)) / 10);
    }
}

@media (min-width: 2501px) and (max-width: 3400px) {
    .grid-item[b-130emioidr] {
        width: calc((100% - (12px * 11)) / 12);
    }
}

@media (min-width: 3401px) {
    .grid-item[b-130emioidr] {
        width: calc((100% - (12px * 15)) / 16);
    }
}

/* --- 4. Modal Overlay Base --- */
@keyframes fadeIn-b-130emioidr {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

.modal-overlay[b-130emioidr] {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(0, 0, 0, 0.85);
    backdrop-filter: blur(8px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    padding: 30px; /* Room around the layout */
    animation: fadeIn-b-130emioidr 0.3s ease;
}

/* --- 5. Modal Layout --- */
.modal-layout-container[b-130emioidr] {
    display: flex;
    flex-direction: row !important; /* Force row layout */
    flex-wrap: nowrap !important; /* CRITICAL: Prevent stacking */
    width: 100%;
    max-width: 1800px;
    height: 90vh;
    border-radius: 16px;
    overflow: hidden;
    background: var(--brand-void, #000);
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.8);
    user-select: none;
    -webkit-user-select: none;
}

/* --- 6. Modal Image Section (Left) --- */
.modal-image-section[b-130emioidr] {
    flex: 1 1 auto; /* Grow and shrink as needed */
    min-width: 300px; /* CRITICAL: Prevents massive images from blowing out the flex row */
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    padding: 20px;
}

    .modal-image-section img[b-130emioidr] {
        max-width: 100%;
        max-height: 100%;
        object-fit: contain;
    }

/* --- 7. Glass Info Column (Right Side) --- */
.glass-column[b-130emioidr] {
    width: 380px;
    flex-shrink: 0; /* CRITICAL: Protects the column from being crushed by the image */
    background: var(--bg-glass, rgba(20, 20, 25, 0.65));
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(10px);
    border-left: 1px solid rgba(255, 255, 255, 0.1);
    padding: 30px 25px;
    display: flex;
    flex-direction: column;
    position: relative;
    overflow-y: auto; /* Allows scrolling inside the column if stats get too tall */
}

/* --- 8. Modal Controls --- */
.close-modal-btn[b-130emioidr] {
    position: absolute;
    top: 15px;
    right: 15px;
    background: rgba(0,0,0,0.5);
    color: white;
    border: none;
    border-radius: 50%;
    width: 32px;
    height: 32px;
    cursor: pointer;
    z-index: 10;
    transition: background 0.2s;
}

    .close-modal-btn:hover[b-130emioidr] {
        background: var(--brand-magenta, magenta);
    }

/* --- 9. Prompt Section --- */
.prompt-wrapper[b-130emioidr] {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 10px;
    margin-top: 30px;
    margin-bottom: 20px;
}

.prompt-section[b-130emioidr] {
    font-size: 0.95rem;
    line-height: 1.4;
    color: var(--text-prompt, #ddd);
    display: -webkit-box;
    -webkit-line-clamp: 4; /* Standard clamped height */
    -webkit-box-orient: vertical;
    overflow: hidden;
    transition: all 0.3s ease;
    width: 100%;
    height: auto;
}

    .prompt-section.expanded[b-130emioidr] {
        -webkit-line-clamp: unset;
        display: block;
        max-height: 1000px;
        overflow-y: auto;
        padding-right: 8px;
    }

    .prompt-section[b-130emioidr]::-webkit-scrollbar {
        width: 4px;
    }

    .prompt-section[b-130emioidr]::-webkit-scrollbar-thumb {
        background: var(--brand-magenta, magenta);
        border-radius: 10px;
    }

.label[b-130emioidr] {
    color: var(--brand-gold, gold);
    font-weight: bold;
    text-transform: uppercase;
    font-size: 0.75rem;
    letter-spacing: 1px;
    margin-right: 8px;
    display: block;
    margin-bottom: 5px;
}

.expand-toggle-btn[b-130emioidr] {
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.3s ease;
    align-self: flex-start;
}

    .expand-toggle-btn:hover[b-130emioidr] {
        filter: brightness(1.2);
    }

/* --- 10. Stats Grid --- */
.stats-grid[b-130emioidr] {
    display: flex;
    flex-direction: column; /* Stacks items vertically for side column */
    gap: 15px;
    font-family: 'JetBrains Mono', 'Consolas', monospace;
    font-size: 0.85rem;
    border-top: 1px solid rgba(255,255,255,0.05);
    padding-top: 20px;
    margin-top: auto; /* Pushes to bottom if space is available */
}

.stat-item[b-130emioidr] {
    color: var(--text-low-contrast);
    display: flex;
    align-items: center;
    justify-content: space-between; /* Spreads label and value */
    width: 100%;
}

    .stat-item strong[b-130emioidr] {
        color: var(--text-low-contrast);
        text-transform: uppercase;
        font-size: 0.7rem;
        letter-spacing: 0.5px;
    }

/* Add hover interaction to the seed for copying */
.seed-badge[b-130emioidr] {
    cursor: pointer;
    transition: filter 0.2s;
}

    .seed-badge:hover[b-130emioidr] {
        filter: brightness(1.3);
    }

/* --- 11. Additional Actions (Modal Image Bottom) --- */
.additional-actions[b-130emioidr] {
    position: absolute;
    bottom: 20px;
    left: 20px;
    right: 20px;
    display: flex;
    /* This centers them if there's one, and spaces them nicely if there are many */
    justify-content: center;
    gap: 15px;
    z-index: 20;
    pointer-events: none;
}

    /* If there are 3 buttons, we might want them to spread to the edges again */
    .additional-actions:has(> :nth-child(3))[b-130emioidr] {
        justify-content: space-between;
    }

    .additional-actions > *[b-130emioidr] {
        pointer-events: auto; /* Re-enables clicking on the buttons themselves */
    }
/* /Components/Layout/MainLayout.razor.rz.scp.css */
.page[b-c2e1y4k5sn] {
    position: relative;
    display: flex;
    flex-direction: column;

}

main[b-c2e1y4k5sn] {
    flex: 1;
}

@media (max-width: 640.98px) {
    .top-row[b-c2e1y4k5sn] {
        justify-content: space-between;
    }

    .top-row[b-c2e1y4k5sn]  a, .top-row[b-c2e1y4k5sn]  .btn-link {
        margin-left: 0;
    }
}

@media (min-width: 641px) {
    .page[b-c2e1y4k5sn] {
        flex-direction: row;
    }

    .sidebar[b-c2e1y4k5sn] {
        width: 250px;
        height: 100vh;
        position: sticky;
        top: 0;
    }

    .top-row[b-c2e1y4k5sn] {
        position: sticky;
        top: 0;
        z-index: 1;
    }

    .top-row.auth[b-c2e1y4k5sn]  a:first-child {
        flex: 1;
        text-align: right;
        width: 0;
    }

    .top-row[b-c2e1y4k5sn], article[b-c2e1y4k5sn] {
        padding-left: 2rem !important;
        padding-right: 1.5rem !important;
    }
}

.ad-container-bottom-left[b-c2e1y4k5sn] {
    position: fixed; /* This is the magic line that stops the layout shift */
    bottom: 10px;
    left: 10px;
    z-index: 1000;
    width: 250px;
    height: 250px;
    /* TODO Remove the red background once you see the test ad */
    background: rgba(255, 0, 0, 0.1);
}
/* /Components/Layout/Menu.razor.rz.scp.css */
.menu-toggle[b-kl8553tt6t] {  
    z-index:1000;
    position: fixed;
    left: 20px;
    top: 20px;
    z-index: 1001;
    background: var(--bg-glass-hover);
    border: 1px solid rgba(255,255,255,0.2);
    border-radius: 8px;
    padding: 8px;
    cursor: pointer;
    backdrop-filter: blur(5px);
}

.menu-container[b-kl8553tt6t] {    
    z-index:999;
    display: flex;
    flex-direction: column;
    position: fixed;
    left: 0;
    top: 0;
    height: 100vh;
    width: 280px;
    background: var(--bg-main-overlay);
    backdrop-filter: var(--blur-standard);
    border-right: 1px solid var(--border-thin);
    box-shadow: 10px 0 30px rgba(0,0,0,0.5);    
    transition: all 0.75s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

    .menu-container.minimized[b-kl8553tt6t] {
        transform: translateX(-100%);
    }

    .menu-container.open[b-kl8553tt6t] {
        transform: translateX(0);
    }

.menu-title[b-kl8553tt6t] {
    font-size: 1.5rem;
    font-weight: 400;
    letter-spacing: 3px;
    padding: 30px 25px 10px 10px;
    color: var(--text-gold); /* Using the logo stroke color */
    text-align: right;
    margin: 0;
}

.menu-divider[b-kl8553tt6t] {
    height: 2px;
    width: 80%;
    margin: 10px auto 30px auto;
    background: var(--divider-gradient);
}

.menu-content[b-kl8553tt6t] {
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
}

.menu-item[b-kl8553tt6t] {
    display: flex;
    flex-wrap:wrap;       
    gap: 15px;
    padding: 15px 25px;
    
    cursor: pointer;
    transition: all 0.2s ease;
    font-weight: 500;
}

    .menu-item:hover[b-kl8553tt6t] {
        color: var(--text-bright);
        background: var(--bg-glass-hover);
        padding-left: 35px;
    }

[b-kl8553tt6t] .nav-tab {
    text-decoration: none;
    color: var(--text-low-contrast);
}
/* /Components/Layout/ModelSelector.razor.rz.scp.css */
.modal-overlay[b-hu9emupo23] {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(0, 0, 0, 0.6); /* Dim the background */
    backdrop-filter: blur(10px); /* The "Glass" effect */
    -webkit-backdrop-filter: blur(10px);
    display: flex;
    justify-content: center; /* Horizontal center */
    align-items: center; /* Vertical center */
    z-index: 9999; /* Stay on top of everything */   
}

/* The Error Box */
.modal-content[b-hu9emupo23] {
    background: #1a1a1a; /* Match your theme color */
    padding: 2.5rem;
    border-radius: 15px;
    text-align: center;
    width: 90%;
    max-width: 400px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.8);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: antiquewhite;
}

.info-text[b-hu9emupo23] {
    margin-bottom: 25px;
    line-height: 1.5;
}

.model-selection-bar[b-hu9emupo23] {
    display: flex;    
    flex-direction:column;
    padding: 25px;
    gap:15px;
    background: var(--bg-main-overlay);       
}

.morphd-dropdown-wrapper[b-hu9emupo23] {
    position: relative;
    display: inline-block;
}

.morphd-dropdown-toggle[b-hu9emupo23] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 50px !important;
    min-width: 300px;
    width:500px;
    padding: 0 10px;
    font-size: 1.0rem;
    font-weight: 400;
    color: antiquewhite;
    background: var(--bg-glass);
    border: 1px solid var(--border-thin);
    border-radius: 5px;
    transition: all 0.3s ease;
    cursor: pointer;
}

    .morphd-dropdown-toggle:hover[b-hu9emupo23] {
        transform: translateY(-2px);
        background: var(--bg-glass-active);
        border-color: var(--border-glow-blue);
        box-shadow: var(--shadow-glow-blue);
    }

.dropdown-overlay[b-hu9emupo23] {
    position: fixed;
    top: 0;
    left: 0;
    gap: 10px;
    width: 100vw;
    height: 100vh;
    z-index: 999; /* Just below the dropdown menu (1000) */
    cursor: default;
}

.morphd-dropdown-menu[b-hu9emupo23] {
    position: absolute;
    top: calc(100% + 5px); /* Position slightly below the button */
    left: 0;
    width: 100%;
    margin: 0;
    padding: 5px;
    list-style: none;
    background: var(--bg-glass-dark);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid var(--border-glow-blue);
    border-radius: 5px;
    box-shadow: var(--shadow-glow-blue);
    z-index: 1000;
    animation: fadeInUp 0.2s ease-out;
    height: auto;
    max-height: 400px;
    overflow-y: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

    .morphd-dropdown-menu li[b-hu9emupo23] {
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 5px;
        color: var(--text-prompt, antiquewhite);
        cursor: pointer;
        transition: background 0.2s ease, color 0.2s ease;
        font-weight: 200;
    }

        .morphd-dropdown-menu li:hover[b-hu9emupo23] {
            background: rgba(255, 255, 255, 0.15);
            color: ghostwhite;
        }

.main-row[b-hu9emupo23],
.model-row[b-hu9emupo23] {
    display: grid;
    grid-template-columns: 50px 125px 100px 100px 1fr;
    align-items: center;
    gap: 15px;
    padding: 8px 0;
    width: 100%;
}

    .model-row span[b-hu9emupo23] {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

.thumbnail-view[b-hu9emupo23] {
    grid-column: 1;
    width: 40px;
    align-self: start;
    object-fit: cover;
    border-radius: 5px;
    transition: opacity 0.2s ease;
} 

.model-name[b-hu9emupo23] {
    grid-column:2;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--brand-blue);
    text-transform: uppercase;
}

.model-badge[b-hu9emupo23] {
    grid-column:3;
    text-align:center;
    width: 100px;
    justify-self: start;
    font-size: 0.7rem;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 4px;
    margin-right: 4px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-gold);
    background: rgba(255, 204, 0, 0.1);    
}

.sfw-model-safety[b-hu9emupo23], 
.nsfw-model-safety[b-hu9emupo23] {
    grid-column: 4;
    text-align: center;
    width: 100px;
    justify-self: start;
    font-size: 0.7rem;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 4px;
    margin-right: 4px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.sfw-model-safety[b-hu9emupo23] {
    color: #00ff88;
    background: rgba(0, 255, 136, 0.1);
    border: 1px solid rgba(0, 255, 136, 0.2);
}

.nsfw-model-safety[b-hu9emupo23] {
    color: #ff4500;
    background: rgba(255, 69, 0, 0.15);
    border: 1px solid rgba(255, 69, 0, 0.3);
    box-shadow: 0 0 10px rgba(255, 69, 0, 0.1);
}

.model-description[b-hu9emupo23] {
    grid-column: 5;
    font-size: 0.6rem;
    color: var(--text-low-contrast);
    padding: 2px 6px;
}

.live-cost-badge[b-hu9emupo23] {
    grid-column: 3;
    justify-self: end;
    font-size: 0.9rem;
    color: var(--text-gold);
    background: var(--bg-glass);
    padding: 4px 10px;
    border-radius: 4px;
    border: 1px solid var(--border-glow-magenta);
}

.settings-sliders[b-hu9emupo23] {
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
}

.slider-group[b-hu9emupo23] {
    flex: 1;
    min-width: 200px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.slider-bind[b-hu9emupo23] {
    align-content: start
}

.information-button[b-hu9emupo23] {
    background: transparent;
    border: none;
    padding: 0;
    margin-left: 4px;
    cursor: pointer;    
}

.slider-label[b-hu9emupo23] {
    display: flex;
    justify-content: space-between;
    font-size: 0.85rem;
    color: var(--text-low-contrast);
    font-weight: 600;
}

.slider-value[b-hu9emupo23] {
    color: var(--brand-blue);
}

.morph-slider[b-hu9emupo23] {
    -webkit-appearance: none;
    width: 100%;
    background: transparent;
}

    .morph-slider[b-hu9emupo23]::-webkit-slider-runnable-track {
        width: 100%;
        height: 6px;
        background: var(--bg-glass);
        border-radius: 3px;
        border: 1px solid var(--border-thin);
    }

    .morph-slider[b-hu9emupo23]::-webkit-slider-thumb {
        -webkit-appearance: none;
        height: 16px;
        width: 16px;
        border-radius: 50%;
        background: var(--brand-blue);
        margin-top: -6px;
        cursor: pointer;
        box-shadow: var(--shadow-glow-blue);
    }

   /*DOUBLE CHEKC*/
/* Section Dividers inside the menu */
.menu-divider[b-hu9emupo23] {
    font-size: 0.65rem;
    text-transform: uppercase;
    color: var(--brand-blue);
    padding: 8px 12px 4px 12px !important;
    font-weight: 800;
    letter-spacing: 1px;
    background: transparent !important;
    cursor: default !important;
}

    .menu-divider.premium[b-hu9emupo23] {
        color: var(--text-gold);
        margin-top: 10px;
        border-top: 1px solid rgba(255, 255, 255, 0.05);
    }

/* Provider Pill inside the button */
.provider-pill[b-hu9emupo23] {
    font-size: 0.6rem;
    padding: 2px 6px;
    border-radius: 4px;
    text-transform: uppercase;
    font-weight: 700;
}

    .provider-pill.cloud[b-hu9emupo23] {
        background: rgba(0, 210, 255, 0.15);
        color: var(--brand-blue);
        border: 1px solid rgba(0, 210, 255, 0.3);
    }

    .provider-pill.fal[b-hu9emupo23] {
        background: rgba(255, 204, 0, 0.1);
        color: var(--text-gold);
        border: 1px solid rgba(255, 204, 0, 0.3);
    }

/* Metadata grouping for the list items */


.model-li.selected[b-hu9emupo23] {
    background: rgba(255, 255, 255, 0.05);
    border-left: 3px solid var(--brand-blue);
}
/* /Components/Layout/ReconnectModal.razor.rz.scp.css */
.components-reconnect-first-attempt-visible[b-larm1rvllv],
.components-reconnect-repeated-attempt-visible[b-larm1rvllv],
.components-reconnect-failed-visible[b-larm1rvllv],
.components-pause-visible[b-larm1rvllv],
.components-resume-failed-visible[b-larm1rvllv],
.components-rejoining-animation[b-larm1rvllv] {
    display: none;
}

#components-reconnect-modal.components-reconnect-show .components-reconnect-first-attempt-visible[b-larm1rvllv],
#components-reconnect-modal.components-reconnect-show .components-rejoining-animation[b-larm1rvllv],
#components-reconnect-modal.components-reconnect-paused .components-pause-visible[b-larm1rvllv],
#components-reconnect-modal.components-reconnect-resume-failed .components-resume-failed-visible[b-larm1rvllv],
#components-reconnect-modal.components-reconnect-retrying[b-larm1rvllv],
#components-reconnect-modal.components-reconnect-retrying .components-reconnect-repeated-attempt-visible[b-larm1rvllv],
#components-reconnect-modal.components-reconnect-retrying .components-rejoining-animation[b-larm1rvllv],
#components-reconnect-modal.components-reconnect-failed[b-larm1rvllv],
#components-reconnect-modal.components-reconnect-failed .components-reconnect-failed-visible[b-larm1rvllv] {
    display: block;
}


#components-reconnect-modal[b-larm1rvllv] {
    background-color: white;
    width: 20rem;
    margin: 20vh auto;
    padding: 2rem;
    border: 0;
    border-radius: 0.5rem;
    box-shadow: 0 3px 6px 2px rgba(0, 0, 0, 0.3);
    opacity: 0;
    transition: display 0.5s allow-discrete, overlay 0.5s allow-discrete;
    animation: components-reconnect-modal-fadeOutOpacity-b-larm1rvllv 0.5s both;
    &[open]

{
    animation: components-reconnect-modal-slideUp-b-larm1rvllv 1.5s cubic-bezier(.05, .89, .25, 1.02) 0.3s, components-reconnect-modal-fadeInOpacity-b-larm1rvllv 0.5s ease-in-out 0.3s;
    animation-fill-mode: both;
}

}

#components-reconnect-modal[b-larm1rvllv]::backdrop {
    background-color: rgba(0, 0, 0, 0.4);
    animation: components-reconnect-modal-fadeInOpacity-b-larm1rvllv 0.5s ease-in-out;
    opacity: 1;
}

@keyframes components-reconnect-modal-slideUp-b-larm1rvllv {
    0% {
        transform: translateY(30px) scale(0.95);
    }

    100% {
        transform: translateY(0);
    }
}

@keyframes components-reconnect-modal-fadeInOpacity-b-larm1rvllv {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

@keyframes components-reconnect-modal-fadeOutOpacity-b-larm1rvllv {
    0% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}

.components-reconnect-container[b-larm1rvllv] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
}

#components-reconnect-modal p[b-larm1rvllv] {
    margin: 0;
    text-align: center;
}

#components-reconnect-modal button[b-larm1rvllv] {
    border: 0;
    background-color: #6b9ed2;
    color: white;
    padding: 4px 24px;
    border-radius: 4px;
}

    #components-reconnect-modal button:hover[b-larm1rvllv] {
        background-color: #3b6ea2;
    }

    #components-reconnect-modal button:active[b-larm1rvllv] {
        background-color: #6b9ed2;
    }

.components-rejoining-animation[b-larm1rvllv] {
    position: relative;
    width: 80px;
    height: 80px;
}

    .components-rejoining-animation div[b-larm1rvllv] {
        position: absolute;
        border: 3px solid #0087ff;
        opacity: 1;
        border-radius: 50%;
        animation: components-rejoining-animation-b-larm1rvllv 1.5s cubic-bezier(0, 0.2, 0.8, 1) infinite;
    }

        .components-rejoining-animation div:nth-child(2)[b-larm1rvllv] {
            animation-delay: -0.5s;
        }

@keyframes components-rejoining-animation-b-larm1rvllv {
    0% {
        top: 40px;
        left: 40px;
        width: 0;
        height: 0;
        opacity: 0;
    }

    4.9% {
        top: 40px;
        left: 40px;
        width: 0;
        height: 0;
        opacity: 0;
    }

    5% {
        top: 40px;
        left: 40px;
        width: 0;
        height: 0;
        opacity: 1;
    }

    100% {
        top: 0px;
        left: 0px;
        width: 80px;
        height: 80px;
        opacity: 0;
    }
}
/* /Components/Layout/SingleImageDisplay.razor.rz.scp.css */
/* --- Container Setup --- */
.single-result-display[b-jns7435cah] {
    margin-top:20px;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 85vh; /* Increased height to feel more like the modal */
    width: 100%;
    padding: 20px;
    background: var(--brand-void, #000);
}

.modal-layout-container[b-jns7435cah] {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    width: 100%;
    max-width: 1600px;
    height: 100%;
    border-radius: 16px;
    overflow: hidden;
    background: #050505;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.8);
}

/* --- Left: Image & Navigation --- */
.modal-image-section[b-jns7435cah] {
    flex: 1 1 auto;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #000;
    padding: 20px;   
    min-width:250px;
}

    .modal-image-section img[b-jns7435cah] {
        max-width: 100%;
        max-height: 100%;
        object-fit: contain;
        border-radius: 8px;
    }

/* --- Navigation & Overlays --- */
.nav-buttons[b-jns7435cah] {
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    transform: translateY(-50%);
    display: flex;
    justify-content: space-between;
    pointer-events: none;
    z-index: 10;
    padding: 0 15px;
}

.nav-btn-wrapper[b-jns7435cah] {
    pointer-events: auto;
    cursor: pointer;
    transition: all 0.2s ease;
    opacity: 0.5;
    user-select: none;
    -webkit-user-select: none; /* Safari */
    -moz-user-select: none; /* Firefox */
    -ms-user-select: none; /* IE10+ */
}

    .nav-btn-wrapper:hover:not(.disabled)[b-jns7435cah] {
        opacity: 1;
        transform: scale(1.1);
    }

.image-actions-overlay[b-jns7435cah] {
    position: absolute;
    top: 20px;
    left: 20px;
    right: 20px;
    display: flex;
    justify-content: space-between;
    z-index: 20;
    pointer-events: none;
}

    .image-actions-overlay button[b-jns7435cah] {
        pointer-events: auto;
    }

/* --- Right: Glass Info Column --- */
.glass-column[b-jns7435cah] {
    width: 380px;
    min-width:250px;
    flex-shrink: 0;
    background: var(--bg-glass, rgba(20, 20, 25, 0.65));
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(10px);
    border-left: 1px solid rgba(255, 255, 255, 0.1);
    padding: 30px 25px;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
}

.prompt-wrapper[b-jns7435cah] {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 30px;
}

.prompt-section[b-jns7435cah] {
    font-size: 0.95rem;
    line-height: 1.5;
    color: var(--text-prompt, #ddd);
    display: -webkit-box;
    -webkit-line-clamp: 5;
    -webkit-box-orient: vertical;
    overflow: hidden;
    transition: all 0.3s ease;
}

    .prompt-section.expanded[b-jns7435cah] {
        -webkit-line-clamp: unset;
        max-height: 500px;
        overflow-y: auto;
    }

.label[b-jns7435cah] {
    color: var(--brand-gold, gold);
    font-weight: bold;
    text-transform: uppercase;
    font-size: 0.75rem;
    display: block;
    margin-bottom: 5px;
}

.expand-toggle-btn[b-jns7435cah] {
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.3s ease;
    align-self: flex-start;
}

    .expand-toggle-btn:hover[b-jns7435cah] {
        filter: brightness(1.2);
    }

/* --- Stats Grid (Vertical Stack) --- */
.stats-grid[b-jns7435cah] {
    display: flex;
    flex-direction: column;
    gap: 15px;
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.85rem;
    border-top: 1px solid rgba(255,255,255,0.1);
    padding-top: 20px;
    margin-top: auto;
}

.stat-item[b-jns7435cah] {
    display: flex;
    justify-content: space-between;
    color: var(--brand-blue, #00d2ff);
}

    .stat-item strong[b-jns7435cah] {
        color: #888;
        text-transform: uppercase;
        font-size: 0.7rem;
    }

.seed-badge[b-jns7435cah] {
    cursor: pointer;
}

    .seed-badge:hover[b-jns7435cah] {
        filter: brightness(1.3);
    }
/* /Components/Layout/TopLayout.razor.rz.scp.css */
.fixed-header[b-0dd3kom6uo] {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    padding: 10px;
}

.morphd-logo-container[b-0dd3kom6uo] {
    margin-left: 50px;
    display: flex;
    align-items: center;
}

    .morphd-logo-container img[b-0dd3kom6uo] {
        width: 200px;
    }
/* /Components/Layout/UserContainer.razor.rz.scp.css */
.user-profile-pill[b-aftlwg8jm7] {
    white-space: nowrap;
    min-width: fit-content;
}

.user-profile-pill[b-aftlwg8jm7] {
    background: rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(15px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    padding: 8px 16px;
    border-radius: 50px;
    display: flex;
    align-items: center;
    gap: 3px;
    width: auto;
    transition: all 0.3s ease;
}

    .user-profile-pill:hover[b-aftlwg8jm7] {
        background: rgba(255, 255, 255, 0.08);
        border-color: rgba(255, 255, 255, 0.2);
    }

.avatar-container[b-aftlwg8jm7] {
    display: flex;
    align-items: center;
    padding-left: 5px;
    margin-right:5px;
}

.morph-container[b-aftlwg8jm7] {
    display: flex;
    align-items: center;
    flex-direction:column;    
    padding-right: 4px;
}

.token-meta[b-aftlwg8jm7] {
    display: flex;
    flex-direction: column;
    line-height: 1;
}

.token-count[b-aftlwg8jm7] {
    color: gold;
    font-size: 0.9rem;
    font-weight: 900;
}

.token-label[b-aftlwg8jm7] {
    color: rgba(255, 255, 255, 0.5);
    font-size: 0.6rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.vr-divider[b-aftlwg8jm7] {
    background-color: rgba(255, 255, 255, 0.2);
    width: 1px;
    height: 24px;
    margin: 0 8px;
}

.user-meta[b-aftlwg8jm7] {
    text-align: right;
    display: flex;
    flex-direction: column;
}

.user-name[b-aftlwg8jm7] {
    color: whitesmoke;
    font-size: 0.85rem;
    font-weight: 900;
    cursor:pointer;
}

.user-badge[b-aftlwg8jm7] {
    color: gold;
    font-size: 0.7rem;
    font-weight: 400;
}

.logout-link[b-aftlwg8jm7] {
    display: flex;
    align-items: center;
    text-decoration: none;
    transition: transform 0.2s ease;
}

    .logout-link:hover[b-aftlwg8jm7] {
        transform: translateX(3px);
    }

/* Ensure the profile editing inputs look clean */
.profile-edit-body[b-aftlwg8jm7] {
    display: flex;
    flex-direction: column;
    gap: 20px;
    margin: 25px 0;
    text-align: left;
}

.input-group[b-aftlwg8jm7] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

    .input-group label[b-aftlwg8jm7] {
        font-size: 0.75rem;
        color: rgba(255, 255, 255, 0.6);
        text-transform: uppercase;
        letter-spacing: 0.5px;
    }



.user-pill-avatar[b-aftlwg8jm7] {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    object-fit: cover;
    border: 1px solid rgba(255, 215, 0, 0.3); /* Subtle gold border */
    display: block;
}

/* Ensure the divider stays clean */
.vr-divider[b-aftlwg8jm7] {
    width: 1px;
    height: 20px;
    background-color: rgba(255, 255, 255, 0.2);
    margin: 0 10px;
}

.modal-overlay[b-aftlwg8jm7] {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000;
}

.modal-content[b-aftlwg8jm7] {
    display:flex;
    flex-direction:column;
    background: var(--bg-main-overlay);
    padding: 2.5rem;
    border-radius: 12px;
    text-align: center;
    width: 90%;
    max-width: 400px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.5);
    color: antiquewhite;
    row-gap:5px;
}

.image-upload-wrapper label.button-choice[b-aftlwg8jm7] {
    cursor: pointer;
    width: 100%;
    height: 45px;
    margin-bottom: 0;
    font-size: 0.9rem;
    align-items: center;
    justify-content: center;
    background: var(--bg-glass);
    border: 1px solid var(--border-thin);
    border-radius: 5px;
    transition: all 0.3s ease;
    align-content: center;
}

.username-input-wrapper[b-aftlwg8jm7] {
    position: relative;
    width: 100%;
}

.username-prompt-box[b-aftlwg8jm7] {
    display: flex;
    flex: 1;
    width:100%;
    align-self: flex-start;
    justify-content: center;
    font-size: 1.2rem;
    min-height: 50px;
    height: 50px;
    max-height: 600px;
    background: var(--bg-glass);
    border: 1px solid var(--border-thin);
    color: var(--text-prompt);
    border-radius: 5px;
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
    margin-bottom: 5px;
    padding: 15px;
    line-height: 1.0;
    color: antiquewhite;
    font-weight: 200 !important;
    overflow-y: auto; /* Allow scrolling */
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* Internet Explorer 10+ */
}

    .username-prompt-box[b-aftlwg8jm7]::placeholder {
        color: var(--text-placeholder);
        font-weight: 200 !important;
    }

    .username-prompt-box:hover[b-aftlwg8jm7] {
        outline: none;
        background: rgba(255, 255, 255, 0.15);
        border: 1px solid white;
        color: ghostwhite;
    }

    .username-prompt-box:focus[b-aftlwg8jm7] {
        outline: none;
        background: var(--bg-input-focus);
        border-color: var(--border-glow-blue);
        color: ghostwhite;
    }

.modal-actions[b-aftlwg8jm7] {
}

.image-upload-wrapper label.button-choice[b-aftlwg8jm7] {
    cursor: pointer;
    width: 100%;
    height: 45px;
    margin-bottom: 0;
    font-size: 0.9rem;
    align-items: center;
    justify-content: center;
    background: var(--bg-glass);
    border: 1px solid var(--border-thin);
    border-radius: 5px;
    transition: all 0.3s ease;
    align-content: center;
}

.email-input-wrapper[b-aftlwg8jm7] {
    position: relative;
    width: 100%;
}

.email-prompt-box[b-aftlwg8jm7] {
    width: 100%;
    height: 45px;
    background: var(--bg-glass);
    border: 1px solid var(--border-thin);
    border-radius: 10px;
    color: antiquewhite;
    padding: 0 45px 0 15px;
}

    .email-prompt-box:focus[b-aftlwg8jm7] {
        outline: none;
        border-color: var(--border-glow-blue);
    }

.orientation-button[b-aftlwg8jm7] {
    cursor: pointer;
    width: 100%;
    height: 45px;
    margin-bottom: 0;
    font-size: 0.9rem;
    align-items: center;
    justify-content: center;
    color:antiquewhite;
    background: var(--bg-glass);
    border: 1px solid var(--border-thin);
    border-radius: 5px;
    transition: all 0.3s ease;
    align-content: center;
}

    .orientation-button:hover[b-aftlwg8jm7] {
        transform: translateY(-2px);
        background: var(--bg-glass-active);
        border-color: var(--border-glow-blue);
        box-shadow: var(--shadow-glow-blue);
    }

    .orientation-button:active[b-aftlwg8jm7] {
        background: rgba(46, 204, 113, 0.15);
        border: 1px solid var(--brand-blue);
        box-shadow: 0 0 15px rgba(46, 204, 113, 0.2);
    }

    .orientation-button.active[b-aftlwg8jm7]  svg {
        fill: var(--brand-blue) !important;
    }

/* Animation for the gold icon */
@keyframes spin-once-b-aftlwg8jm7 {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

.spin-gold[b-aftlwg8jm7] {
    animation: spin-once-b-aftlwg8jm7 0.8s ease-in-out;
}

/* Subtle pulse for the number */
.balance-update[b-aftlwg8jm7] {
    animation: pulse-gold-b-aftlwg8jm7 0.4s ease-out;
}

@keyframes pulse-gold-b-aftlwg8jm7 {
    0% {
        transform: scale(1);
        filter: brightness(1);
    }

    50% {
        transform: scale(1.1);
        filter: brightness(1.5);
    }

    100% {
        transform: scale(1);
        filter: brightness(1);
    }
}
/* /Components/Layout/UserPrompt.razor.rz.scp.css */
/* The Glass Background */
.modal-overlay[b-w0lgg7s0jp] {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(0, 0, 0, 0.6); /* Dim the background */
    backdrop-filter: blur(10px); /* The "Glass" effect */
    -webkit-backdrop-filter: blur(10px);
    display: flex;
    justify-content: center; /* Horizontal center */
    align-items: center; /* Vertical center */
    z-index: 9999; /* Stay on top of everything */
}

/* The Error Box */
.modal-content[b-w0lgg7s0jp] {
    background: #1a1a1a; /* Match your theme color */
    padding: 2.5rem;
    border-radius: 15px;
    text-align: center;
    width: 90%;
    max-width: 400px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.8);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: antiquewhite;
}

.error-title[b-w0lgg7s0jp] {
    margin: 0 0 10px 0;
    color: #FFB900;
    font-weight: bold;
}

.error-text[b-w0lgg7s0jp] {
    margin-bottom: 25px;
    line-height: 1.5;
}

/* Reuse your existing login-button style for the button */
.confirm-button[b-w0lgg7s0jp] {
    height: 45px;
    border: 1px solid antiquewhite;
    border-radius: 25px;
    background-color: transparent;
    color: antiquewhite;
    cursor: pointer;
    transition: all 0.3s ease;
}

    .confirm-button:hover[b-w0lgg7s0jp] {
        background: rgba(255, 255, 255, 0.1);
    }

.prompt-container[b-w0lgg7s0jp] {
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    gap: 5px;    
    width:100%;
    margin-top:15px;
}

.morphd-prompt-box[b-w0lgg7s0jp] {
    display: flex;
    flex: 1;
    min-width: 500px;
    align-self: flex-start;
    justify-content: center;
    font-size: 1.2rem;
    min-height: 50px;
    height: 50px;
    max-height: 600px;
    background: var(--bg-glass);
    border: 1px solid var(--border-thin);
    color: var(--text-prompt);
    border-radius: 5px;
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
    margin-bottom: 5px;
    padding: 15px;
    line-height: 1.0;
    color: antiquewhite;
    font-weight: 200 !important;
    overflow-y: auto; /* Allow scrolling */
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* Internet Explorer 10+ */
}

    .morphd-prompt-box[b-w0lgg7s0jp]::placeholder {
        color: var(--text-placeholder);
        font-weight: 200 !important;
    }

    .morphd-prompt-box:hover[b-w0lgg7s0jp] {
        outline: none;
        background: rgba(255, 255, 255, 0.15);
        border: 1px solid white;
        color: ghostwhite;
    }

    .morphd-prompt-box:focus[b-w0lgg7s0jp] {
        outline: none;
        background: var(--bg-input-focus);
        border-color: var(--border-glow-blue);
        color: ghostwhite;
    }

.morphd-seed-box[b-w0lgg7s0jp] {
    min-width: 200px;
    width: 200px;
    align-self: flex-start;
    justify-content: center;
    font-size: 1.2rem;
    height: 50px;
    background: var(--bg-glass);
    border: 1px solid var(--border-thin);
    color: var(--text-seed);
    border-radius: 5px;
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
    margin-bottom: 5px;
    padding: 15px;
    color: antiquewhite;
    font-weight: 200 !important;
    overflow-y: hidden;
}

    .morphd-seed-box[b-w0lgg7s0jp]::placeholder {
        color: var(--text-placeholder);
        font-weight: 200 !important;
    }

    .morphd-seed-box:hover[b-w0lgg7s0jp] {
        outline: none;
        background: rgba(255, 255, 255, 0.15);
        border: 1px solid white;
        color: ghostwhite;
    }

    .morphd-seed-box:focus[b-w0lgg7s0jp] {
        outline: none;
        background: var(--bg-input-focus);
        border-color: var(--border-glow-blue);
        color: ghostwhite;
    }

.random-generator-button[b-w0lgg7s0jp] {
    height: 50px !important;
    width: 50px;
    align-items: center;
    justify-content: center;
    background: var(--bg-glass);
    border: 1px solid var(--border-thin);
    border-radius: 5px;
    transition: all 0.3s ease;
}

    .random-generator-button:hover[b-w0lgg7s0jp] {
        transform: translateY(-2px);
        background: var(--bg-glass-active);
        border-color: var(--border-glow-blue);
        box-shadow: var(--shadow-glow-blue);
    }

.play-button[b-w0lgg7s0jp] {
    height: 50px !important;
    width: 50px;
    align-items: center;
    justify-content: center;
    background: var(--bg-glass);
    border: 1px solid var(--border-thin);
    border-radius: 5px;
    transition: all 0.3s ease;
}

    .play-button:hover[b-w0lgg7s0jp] {
        transform: translateY(-2px);
        background: var(--bg-glass-active);
        border-color: var(--border-glow-blue);
        box-shadow: var(--shadow-glow-blue);
    }

.selection-container[b-w0lgg7s0jp] {
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    gap: 5px;
    padding-left: 25px;
    padding-right: 25px;
}

.orientation-button[b-w0lgg7s0jp] {
    height: 50px !important;
    width: 50px;
    align-items: center;
    justify-content: center;
    background: var(--bg-glass);
    border: 1px solid var(--border-thin);
    border-radius: 5px;
    transition: all 0.3s ease;
}

    .orientation-button:hover[b-w0lgg7s0jp] {
        transform: translateY(-2px);
        background: var(--bg-glass-active);
        border-color: var(--border-glow-blue);
        box-shadow: var(--shadow-glow-blue);
    }

    .orientation-button:active[b-w0lgg7s0jp] {
        background: rgba(46, 204, 113, 0.15);
        border: 1px solid var(--brand-blue);
        box-shadow: 0 0 15px rgba(46, 204, 113, 0.2);
    }

    .orientation-button.active[b-w0lgg7s0jp]  svg {
        fill: var(--brand-blue) !important;
    }

.fluent-spinner[b-w0lgg7s0jp] {
    width: 20px;
    height: 20px;
    border: 2px solid rgba(0, 210, 255, 0.2);
    border-top: 2px solid var(--brand-blue);
    border-radius: 50%;
    animation: spin-b-w0lgg7s0jp 0.8s linear infinite;
    display: inline-block;
}

@keyframes spin-b-w0lgg7s0jp {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

/* --- Custom Glass Dropdown --- */

.morphd-dropdown-wrapper[b-w0lgg7s0jp] {
    position: relative;
    display: inline-block;
}

.morphd-dropdown-toggle[b-w0lgg7s0jp] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 50px !important;
    min-width: 300px;
    padding: 0 10px;
    font-size: 1.0rem;
    font-weight: 400;
    color: antiquewhite;
    background: var(--bg-glass);
    border: 1px solid var(--border-thin);
    border-radius: 5px;
    transition: all 0.3s ease;
    cursor: pointer;
}

    .morphd-dropdown-toggle:hover[b-w0lgg7s0jp] {
        transform: translateY(-2px);
        background: var(--bg-glass-active);
        border-color: var(--border-glow-blue);
        box-shadow: var(--shadow-glow-blue);
    }

.morphd-dropdown-menu[b-w0lgg7s0jp] {
    position: absolute;
    top: calc(100% + 5px); /* Position slightly below the button */
    left: 0;
    width: 100%;
    margin: 0;
    padding: 5px;
    list-style: none;
    background: var(--bg-glass-dark);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid var(--border-glow-blue);
    border-radius: 5px;
    box-shadow: var(--shadow-glow-blue);
    z-index: 1000;
    animation: fadeInUp-b-w0lgg7s0jp 0.2s ease-out;
    height: auto;
    max-height: 400px;
    overflow-y: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

    .morphd-dropdown-menu li[b-w0lgg7s0jp] {
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 5px;
        color: var(--text-prompt, antiquewhite);
        cursor: pointer;
        transition: background 0.2s ease, color 0.2s ease;
        font-weight: 200;
    }

        .morphd-dropdown-menu li:hover[b-w0lgg7s0jp] {
            background: rgba(255, 255, 255, 0.15);
            color: ghostwhite;
        }

.style-thumbnail-view[b-w0lgg7s0jp] {
    width: 40px;
    align-self: start;
    object-fit: cover;
    border-radius: 5px;
    transition: opacity 0.2s ease;
}

.style-thumbnail-drop[b-w0lgg7s0jp] {
    width: 40px;
    align-self: start;
    object-fit: cover;
    border-radius: 5px;
    transition: opacity 0.2s ease;
}

/* Optional: Make the image jump to full opacity when the user hovers over the row */
.morphd-dropdown-menu li:hover .style-thumbnail[b-w0lgg7s0jp] {
    opacity: 1;
}

/* Invisible overlay to catch clicks outside the dropdown */
.dropdown-overlay[b-w0lgg7s0jp] {
    position: fixed;
    top: 0;
    left: 0;
    gap: 10px;
    width: 100vw;
    height: 100vh;
    z-index: 999; /* Just below the dropdown menu (1000) */
    cursor: default;
}

/* Reusing your animation if you don't already have it globally */
@keyframes fadeInUp-b-w0lgg7s0jp {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}
/* /Components/Pages/Login.razor.rz.scp.css */
/* --- Header & Layout --- */
.top-row[b-79w4yf2v0w] {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    padding: 10px;
}

.morphd-logo-container[b-79w4yf2v0w] {
    margin-left: 15px;
}

    .morphd-logo-container img[b-79w4yf2v0w] {
        width: 100px;
    }

.login-button[b-79w4yf2v0w] {
    width: 100px;
    height: 35px;
    border: 1px solid antiquewhite;
    border-radius: 25px;
    background-color: transparent;
    color: antiquewhite;
    cursor: pointer;
    transition: all 0.3s ease;
}

    .login-button:hover[b-79w4yf2v0w] {
        background: rgba(255, 255, 255, 0.1);
    }

/* --- Masonry Reveal Logic --- */
.invisible-gallery[b-79w4yf2v0w] {
    opacity: 0;
    pointer-events: none;
}

.fade-in[b-79w4yf2v0w] {
    opacity: 1;
    transition: opacity 3s ease-in-out;
}

.main-content-scrollable[b-79w4yf2v0w] {
    width: 100%;
}

.gallery-wrapper[b-79w4yf2v0w] {
    width: 100%;
    padding: 5px;
    box-sizing: border-box;
}

/* --- New 5-Column Masonry --- */
.login-gallery-container[b-79w4yf2v0w] {
    column-count: 6;
    column-gap: 10px;
    width: 100%;
    padding: 10px;
}

    .login-gallery-container .grid-item[b-79w4yf2v0w] {
        display: inline-block; /* Essential for column-count */
        width: 100%;
        margin-bottom: 2px;
        break-inside: avoid; /* Prevents images from splitting across columns */
    }

        .login-gallery-container .grid-item img[b-79w4yf2v0w] {
            width: 100%;
            height: auto;
            display: block;
            border-radius: 8px;
            transition: transform 0.3s ease;
        }

/* --- Modal & Auth --- */
.modal-overlay[b-79w4yf2v0w] {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000;
}

.modal-content[b-79w4yf2v0w] {
    background: var(--bg-main-overlay);
    padding: 2.5rem;
    border-radius: 12px;
    text-align: center;
    width: 90%;
    max-width: 400px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.5);
    color: antiquewhite;
}

.modal-actions[b-79w4yf2v0w] {
    display: flex;
    flex-direction: column;
    gap: 15px;
    margin-top: 20px;
}

.button-choice[b-79w4yf2v0w] {
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-glass);
    border: 1px solid var(--border-thin);
    border-radius: 10px;
    color: antiquewhite;
    height: 50px;
    cursor: pointer;
    transition: 0.3s;
}

    .button-choice:hover[b-79w4yf2v0w] {
        background: rgba(255, 255, 255, 0.15);
        border-color: white;
    }

    .button-choice img[b-79w4yf2v0w] {
        height: 20px;
        margin-right: 10px;
    }

.shake-error[b-79w4yf2v0w] {
    color: var(--danger-red, #ff4d4d) !important;
    font-weight: bold;
    animation: shake-b-79w4yf2v0w 0.4s ease-in-out;
}

    .shake-error a[b-79w4yf2v0w] {
        color: var(--danger-red, #ff4d4d) !important;
        text-decoration: underline !important;
    }

@keyframes shake-b-79w4yf2v0w {
    0%, 100% {
        transform: translateX(0);
    }

    25% {
        transform: translateX(-4px);
    }

    50% {
        transform: translateX(4px);
    }

    75% {
        transform: translateX(-4px);
    }
}
/* /Components/Pages/TopCreators.razor.rz.scp.css */
.contributor-list[b-uxjmdh5m5i] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(400px, 1fr));
    gap: 1rem;
    padding: 1rem;
}

.contributor-card[b-uxjmdh5m5i] {
    color: var(--text-prompt);
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px;
    background: var(--bg-main-overlay);
    border: 1px solid var(--border-thin);
    border-radius: 8px;
    transition: transform 0.2s ease;
}

    .contributor-card:hover[b-uxjmdh5m5i] {
        transform: translateY(-2px);
        background: var(--bg-glass-hover);
        cursor: pointer;
    }

.creator-info[b-uxjmdh5m5i] {
    display: flex;
    flex-direction: column;
}

@keyframes avatarFloat-b-uxjmdh5m5i {
    0% {
        transform: translateY(0px);
    }

    50% {
        transform: translateY(-8px);
    }
    /* Only the circle moves up */
    100% {
        transform: translateY(0px);
    }
}

.avatar-container[b-uxjmdh5m5i] {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

    /* Apply animation and borders ONLY to the top 3 containers */
    .avatar-container.top-rank-0[b-uxjmdh5m5i],
    .avatar-container.top-rank-1[b-uxjmdh5m5i],
    .avatar-container.top-rank-2[b-uxjmdh5m5i] {
        animation: avatarFloat-b-uxjmdh5m5i 3s ease-in-out infinite;
        border-radius: 50%;
        padding: 3px;
    }

/* Border Colors */
.top-rank-0[b-uxjmdh5m5i] {
    border: 2px solid #FFD700;
    shadow: 0 0 10px rgba(255, 215, 0, 0.4);
}

.top-rank-1[b-uxjmdh5m5i] {
    border: 2px solid #C0C0C0;
}

.top-rank-2[b-uxjmdh5m5i] {
    border: 2px solid #CD7F32;
}

/* Avatar Sizing */
.creator-avatar[b-uxjmdh5m5i] {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    object-fit: cover;
    background: var(--bg-main-overlay); /* Fallback color */
}

    .creator-avatar.large[b-uxjmdh5m5i] {
        width: 65px; /* Tiny bit bigger */
        height: 65px;
    }

.user-name[b-uxjmdh5m5i] {
    font-weight: bold;
    font-size: 1.1rem;
    color: var(--text-prompt);
}