/* ==========================================================================
   gencuebox.com - MASTER RESPONSIVE STYLESHEET
   Phase 10 Full-Site Responsive Hardening Pass (Mobile + Tablet Final)
   Strict Parity Across All Viewports: 320px, 360px, 390px, 480px, 600px, 768px, 900px, 1024px, 1280px, 1440px
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. UNIVERSAL FLUID FOUNDATIONS & VIEWPORT BOUNDS (ZERO HORIZONTAL SCROLL)
   -------------------------------------------------------------------------- */
*, *::before, *::after {
    box-sizing: border-box;
}

html, body {
    max-width: 100%;
    width: 100%;
    overflow-x: hidden;
    box-sizing: border-box;
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

/* Fluid responsive images & media containment */
img, video, canvas, svg {
    max-width: 100%;
    height: auto;
}

/* Accessible focus outlines for keyboard navigation */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
    outline: 2px solid var(--accent-orange, #ff7a00) !important;
    outline-offset: 2px !important;
}

/* Fluid responsive prompt cards with aspect-ratio protection against layout shift */
.card-image,
.trending-card-img {
    aspect-ratio: 16 / 10;
    object-fit: cover;
    width: 100%;
    background-color: #141519;
}

/* Card titles with text expansion safety */
.card-title,
.gcb-prompt-card-title,
.profile-prompt-title {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    line-clamp: 2;
    word-break: break-word;
}

/* Prompt preview text wrapping */
.card-preview-text,
.modal-prompt-text,
.customizer-output-box,
.prompt-text-content,
.full-prompt-body {
    word-break: break-word;
    overflow-wrap: anywhere;
    white-space: pre-wrap;
    max-width: 100%;
}

/* Global Container Bounds Protection */
.app-container,
.main-content,
.explore-page-wrapper,
.create-page-wrapper,
.settings-page-canvas,
.standalone-page-wrapper,
.homepage-hero-fullbleed-wrapper,
.legal-page-wrapper,
.contact-page-wrapper,
.about-page-wrapper,
.collection-page-wrapper,
.trending-page-wrapper {
    max-width: 100% !important;
    width: 100% !important;
    box-sizing: border-box !important;
    min-width: 0;
}

/* Horizontal scrollable rails for pills with smooth touch momentum */
.model-filters-wrapper,
.model-pills-row,
.creator-filters,
.filter-group,
.tags-scroll-row,
.sub-filter-pills,
.filter-pills-row,
.tags-chips-list,
.suggested-chips-list {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none; /* Firefox */
    max-width: 100%;
}

.model-filters-wrapper::-webkit-scrollbar,
.model-pills-row::-webkit-scrollbar,
.creator-filters::-webkit-scrollbar,
.sub-filter-pills::-webkit-scrollbar,
.filter-pills-row::-webkit-scrollbar,
.tags-scroll-row::-webkit-scrollbar {
    display: none !important; /* Chrome/Safari */
}

/* --------------------------------------------------------------------------
   2. MOBILE NAVIGATION DRAWER & CANONICAL TOP HEADER CONTROLS
   -------------------------------------------------------------------------- */
.mobile-top-bar {
    display: none !important;
    align-items: center;
    justify-content: space-between;
    background: var(--bg-card, #111216);
    border-bottom: 1px solid var(--border-color, rgba(255, 255, 255, 0.08));
    padding: 10px 16px;
    position: sticky;
    top: 0;
    z-index: 1000;
}

.mobile-menu-toggle-btn {
    background: transparent;
    border: 1px solid var(--border-color, rgba(255, 255, 255, 0.12));
    color: var(--text-primary, #ffffff);
    min-width: 44px;
    min-height: 44px;
    border-radius: var(--radius-sm, 6px);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.mobile-drawer-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.82);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    z-index: 99999;
    display: none !important;
    opacity: 0;
    transition: opacity 0.25s ease;
}

.mobile-drawer-overlay.active {
    display: block !important;
    opacity: 1;
}

.mobile-drawer-content {
    position: fixed;
    top: 0;
    left: -320px;
    width: min(300px, 84vw);
    height: 100vh;
    height: 100dvh;
    background: #0e0f13;
    border-right: 1px solid rgba(255, 255, 255, 0.1);
    z-index: 100000;
    display: flex;
    flex-direction: column;
    padding: 24px 20px max(24px, env(safe-area-inset-bottom, 24px)) 20px;
    transition: left 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    box-shadow: 10px 0 40px rgba(0, 0, 0, 0.8);
}

.mobile-drawer-overlay.active .mobile-drawer-content {
    left: 0;
}

.mobile-drawer-content .nav-item {
    min-height: 44px;
    display: flex;
    align-items: center;
    padding: 10px 14px;
    font-size: 0.92rem;
    gap: 12px;
}

/* --------------------------------------------------------------------------
   3. DESKTOP SPECIFICATION (> 1024px) — PRESERVE LOCKED EXPERIENCE
   -------------------------------------------------------------------------- */
@media screen and (min-width: 1025px) {
    .app-container.with-sidebar .sidebar {
        display: flex !important;
        position: fixed;
        width: 250px;
        height: 100vh;
        top: 0;
        left: 0;
    }
    .app-container.with-sidebar .main-content {
        margin-left: 250px !important;
        padding: 28px 36px;
        min-width: 0;
    }
    .main-content {
        margin-left: auto !important;
        margin-right: auto !important;
        padding: 36px 24px 72px 24px;
        max-width: 1480px;
        margin: 0 auto;
        width: 100%;
    }
    .mobile-top-bar {
        display: none !important;
    }
    .prompt-grid,
    #homePromptGrid,
    #homeBattleTestedGrid,
    #searchResultsGrid,
    #trendingPromptGrid,
    #favoritesGrid,
    #collectionPromptGrid,
    .explore-prompts-grid,
    .spotlight-prompts-grid {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
        gap: 20px;
    }
    .creators-grid,
    #homeCreatorsGrid {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
        gap: 20px;
    }
    .modal-grid-layout {
        display: grid;
        grid-template-columns: 1.1fr 1.3fr;
        min-height: 520px;
        max-height: 85vh;
    }
}

/* --------------------------------------------------------------------------
   4. TABLET SPECIFICATION (769px to 1024px)
   -------------------------------------------------------------------------- */
@media screen and (min-width: 769px) and (max-width: 1024px) {
    .app-container {
        flex-direction: column;
    }
    .sidebar {
        display: none !important;
    }
    .main-content {
        margin-left: 0 !important;
        max-width: 100% !important;
        width: 100% !important;
        padding: 24px 24px 64px 24px;
    }

    /* Top Navigation Adaptation */
    .top-nav-inner {
        padding: 0 20px !important;
        gap: 12px !important;
    }
    .top-nav-links {
        display: none !important;
    }
    .top-nav-hamburger {
        display: inline-flex !important;
        min-width: 40px;
        min-height: 40px;
        align-items: center;
        justify-content: center;
    }
    .top-nav-search-btn kbd {
        display: none !important;
    }

    /* Adaptive 2-Column Discovery Grids */
    .prompt-grid,
    #homePromptGrid,
    #homeTrendingGrid,
    #homeBattleTestedGrid,
    #searchResultsGrid,
    #trendingPromptGrid,
    #favoritesGrid,
    #collectionPromptGrid,
    .explore-prompts-grid,
    .spotlight-prompts-grid,
    .profile-prompts-grid {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 18px !important;
    }

    .creators-grid,
    #homeCreatorsGrid {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 18px !important;
    }

    .prompt-modal-container {
        width: 92% !important;
        max-width: 760px !important;
        max-height: 88vh !important;
    }

    .modal-grid-layout {
        grid-template-columns: 1fr 1.2fr;
    }

    .hero-headline,
    .hero-title-locked {
        font-size: 2.3rem !important;
    }

    .stats-overview-grid,
    .platform-stats-grid,
    .models-hero-stats {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 14px !important;
    }

    .framework-steps-rail {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 14px !important;
    }

    /* Footer: Balanced 2-Column Layout */
    .footer-inner {
        grid-template-columns: 1fr 1fr !important;
        gap: 28px !important;
    }
    .footer-brand-col {
        grid-column: span 2 !important;
        border-right: none !important;
        border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
        padding-bottom: 20px !important;
        padding-right: 0 !important;
    }
    .footer-col:last-child {
        grid-column: span 2 !important;
    }
}

/* --------------------------------------------------------------------------
   5. MOBILE SPECIFICATION (max-width: 768px) — COMPLETE RESPONSIVE SYSTEM
   -------------------------------------------------------------------------- */
@media screen and (max-width: 768px) {
    .app-container {
        flex-direction: column;
    }
    .sidebar {
        display: none !important;
    }
    .main-content {
        margin-left: 0 !important;
        max-width: 100% !important;
        width: 100% !important;
        padding: 16px 16px 48px 16px;
    }

    /* 5.1 CANONICAL TOP HEADER MOBILE HARDENING */
    .top-nav-inner {
        padding: 0 16px !important;
        height: 62px !important;
        gap: 10px !important;
    }
    .top-nav-left {
        gap: 12px !important;
    }
    .top-nav-links {
        display: none !important;
    }
    .top-nav-hamburger {
        display: inline-flex !important;
        width: 38px !important;
        height: 38px !important;
        min-width: 38px !important;
        min-height: 38px !important;
        padding: 0 !important;
        align-items: center !important;
        justify-content: center !important;
    }
    .top-nav-brand {
        display: flex !important;
        align-items: center !important;
        flex-shrink: 0 !important;
    }
    .top-nav-brand .brand-logo,
    .top-nav-logo-img {
        width: 138px !important;
        max-width: 145px !important;
        height: auto !important;
        max-height: 42px !important;
        aspect-ratio: 138 / 38 !important;
        object-fit: contain !important;
        object-position: left center !important;
        display: block !important;
        flex-shrink: 0 !important;
    }
    .top-nav-right {
        display: flex !important;
        align-items: center !important;
        gap: 8px !important;
        flex-shrink: 0 !important;
        min-height: 38px !important;
    }
    .top-nav-hamburger,
    .top-nav-search-btn {
        width: 38px !important;
        height: 38px !important;
        min-width: 38px !important;
        min-height: 38px !important;
        flex-shrink: 0 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        box-sizing: border-box !important;
    }
    .top-nav-search-btn kbd,
    .top-nav-search-label,
    .top-nav-search-text {
        display: none !important;
    }

    /* Header Auth Controls: Compact Mobile Mode (zero-footprint guest state) */
    .top-nav-bar .auth-buttons-group,
    #headerAuthContainer.auth-buttons-group,
    #headerAuthContainer .btn-login,
    #headerAuthContainer .btn-signup {
        display: none !important;
        width: 0 !important;
        height: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow: hidden !important;
        flex-shrink: 0 !important;
    }
    .btn-header-create-prompt {
        padding: 0 10px !important;
        height: 38px !important;
        gap: 0 !important;
    }
    .btn-header-create-prompt span {
        display: none !important;
    }
    .logged-user-pill {
        padding: 2px !important;
        background: transparent !important;
        border: none !important;
    }
    .logged-user-pill .header-username,
    .logged-user-pill .header-chevron {
        display: none !important;
    }
    .logged-user-pill .header-avatar {
        width: 34px !important;
        height: 34px !important;
    }
    .btn-notification-bell {
        width: 38px !important;
        height: 38px !important;
        padding: 0 !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    /* Mobile Dropdown Viewport Bounds Protection */
    .profile-dropdown {
        position: absolute !important;
        top: calc(100% + 8px) !important;
        right: 0 !important;
        left: auto !important;
        width: 220px !important;
        max-width: calc(100vw - 20px) !important;
        box-sizing: border-box !important;
        z-index: 10000 !important;
    }

    /* Mobile Notification Dropdown Viewport Bounds Protection */
    .notification-dropdown {
        position: fixed !important;
        top: 70px !important;
        left: 12px !important;
        right: 12px !important;
        width: auto !important;
        min-width: 0 !important;
        max-width: calc(100vw - 24px) !important;
        margin: 0 !important;
        transform: none !important;
        box-sizing: border-box !important;
        z-index: 100001 !important;
        max-height: calc(100vh - 84px) !important;
        max-height: calc(100dvh - 84px) !important;
        display: none;
        flex-direction: column !important;
        overflow: hidden !important;
    }

    .notification-dropdown.active {
        display: flex !important;
    }

    .notification-dropdown .notif-dropdown-header {
        flex-shrink: 0 !important;
    }

    .notification-dropdown .notif-list-container {
        flex: 1 1 auto !important;
        min-height: 0 !important;
        max-height: calc(100vh - 140px) !important;
        max-height: calc(100dvh - 140px) !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        -webkit-overflow-scrolling: touch;
    }

    .notification-dropdown .notif-item {
        align-items: flex-start !important;
        padding: 12px 14px !important;
        gap: 10px !important;
        box-sizing: border-box !important;
    }

    .notification-dropdown .notif-content {
        min-width: 0 !important;
        flex: 1 1 auto !important;
        overflow: hidden !important;
    }

    .notification-dropdown .notif-text,
    .notification-dropdown .notif-text strong {
        word-break: break-word !important;
        overflow-wrap: anywhere !important;
        white-space: normal !important;
    }

    /* 5.2 RESPONSIVE TYPOGRAPHY CLAMPING */
    h1,
    .hero-headline,
    .hero-title-locked,
    .create-page-title,
    .settings-title,
    .explore-hero-title,
    .models-hero-title,
    .categories-hero-title,
    .trending-hero-title,
    .creators-hero-title {
        font-size: clamp(1.65rem, 5.2vw, 2.25rem) !important;
        line-height: 1.22 !important;
        word-break: break-word !important;
    }

    h2,
    .section-title-concept,
    .auth-required-title {
        font-size: clamp(1.25rem, 4vw, 1.6rem) !important;
        line-height: 1.28 !important;
        word-break: break-word !important;
    }

    .hero-subhead,
    .explore-hero-subtitle,
    .models-hero-subtitle,
    .categories-hero-subtitle,
    .trending-hero-subtitle,
    .create-page-subtitle,
    .settings-subtitle {
        font-size: clamp(0.85rem, 2.8vw, 0.95rem) !important;
        line-height: 1.5 !important;
    }

    /* 5.3 HERO & BANNER LAYOUTS */
    .home-hero-section,
    .explore-hero-card,
    .models-hero-card,
    .categories-hero-card,
    .trending-hero-card {
        padding: 22px 18px !important;
        border-radius: var(--radius-md, 10px) !important;
        margin-bottom: 20px !important;
        background-position: center !important;
    }
    .hero-text-shield {
        padding: 16px !important;
        max-width: 100% !important;
    }
    .hero-action-row {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 10px !important;
    }
    .hero-search-wrapper,
    .hero-search-box {
        width: 100% !important;
        max-width: 100% !important;
    }

    /* Phase 10 Full-Bleed Homepage Hero Responsive Engine */
    .homepage-hero-fullbleed-wrapper {
        width: 100% !important;
        max-width: 100% !important;
        overflow: hidden !important;
        margin: 0 !important;
        padding: 0 !important;
        box-sizing: border-box !important;
    }
    .home-hero-fullbleed,
    .home-hero-concept {
        min-height: 520px !important;
        background-position: 80% center !important;
        padding: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }
    .hero-bg-overlay {
        background: linear-gradient(
            180deg,
            rgba(8, 9, 11, 0.96) 0%,
            rgba(8, 9, 11, 0.90) 65%,
            rgba(8, 9, 11, 0.82) 100%
        ) !important;
    }
    .home-hero-inner {
        padding: 32px 16px !important;
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }
    .hero-content-col {
        max-width: 100% !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }
    .hero-concept-badge {
        font-size: clamp(0.72rem, 3.2vw, 0.82rem) !important;
        padding: 5px 12px !important;
        margin-bottom: 14px !important;
        max-width: 100% !important;
        white-space: normal !important;
        line-height: 1.35 !important;
        box-sizing: border-box !important;
    }
    .hero-title-locked {
        font-size: clamp(1.75rem, 6.8vw, 2.35rem) !important;
        line-height: 1.16 !important;
        letter-spacing: -0.025em !important;
        margin: 0 0 10px 0 !important;
        word-break: break-word !important;
        max-width: 100% !important;
    }
    .hero-positioning-line {
        font-size: clamp(0.95rem, 3.6vw, 1.1rem) !important;
        line-height: 1.35 !important;
        margin: 0 0 10px 0 !important;
        max-width: 100% !important;
        word-break: break-word !important;
    }
    .hero-subhead-locked {
        font-size: clamp(0.85rem, 3vw, 0.94rem) !important;
        line-height: 1.52 !important;
        max-width: 100% !important;
        margin: 0 0 18px 0 !important;
        word-break: break-word !important;
    }
    .concept-search-bar {
        position: relative !important;
        width: 100% !important;
        max-width: 100% !important;
        min-height: 48px !important;
        padding: 0 !important;
        margin: 0 0 16px 0 !important;
        box-sizing: border-box !important;
    }
    .concept-search-input {
        width: 100% !important;
        height: 48px !important;
        padding: 0 48px 0 42px !important;
        font-size: 0.88rem !important;
        border-radius: var(--radius-full, 9999px) !important;
        box-sizing: border-box !important;
    }
    .concept-search-bar .search-icon-left,
    .search-icon-left {
        left: 14px !important;
        width: 17px !important;
        height: 17px !important;
    }
    .concept-search-btn {
        right: 5px !important;
        width: 38px !important;
        height: 38px !important;
    }
    .hero-quick-pills {
        display: flex !important;
        align-items: center !important;
        justify-content: flex-start !important;
        gap: 6px !important;
        flex-wrap: wrap !important;
        margin-bottom: 20px !important;
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }
    .quick-pills-label {
        font-size: 0.78rem !important;
        color: #8b91a0 !important;
        font-weight: 600 !important;
        margin-right: 2px !important;
    }
    .quick-pill {
        background: rgba(255, 255, 255, 0.05) !important;
        backdrop-filter: blur(8px) !important;
        -webkit-backdrop-filter: blur(8px) !important;
        border: 1px solid rgba(255, 255, 255, 0.1) !important;
        color: #d1d5db !important;
        padding: 5px 12px !important;
        border-radius: var(--radius-full, 9999px) !important;
        font-size: 0.78rem !important;
        font-weight: 500 !important;
        text-decoration: none !important;
        display: inline-block !important;
        white-space: nowrap !important;
        transition: all 0.2s ease !important;
        box-sizing: border-box !important;
    }
    .quick-pill:hover {
        background: rgba(255, 107, 0, 0.15) !important;
        border-color: rgba(255, 107, 0, 0.4) !important;
        color: #ffffff !important;
    }
    .hero-actions-concept {
        display: flex !important;
        justify-content: flex-start !important;
        gap: 10px !important;
        flex-wrap: wrap !important;
        width: 100% !important;
        max-width: 100% !important;
        margin-bottom: 8px !important;
        box-sizing: border-box !important;
    }
    .btn-concept-primary {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 8px !important;
        background: linear-gradient(135deg, #ff9900, #ff5500) !important;
        color: #000000 !important;
        font-weight: 700 !important;
        font-size: 0.88rem !important;
        padding: 10px 20px !important;
        border-radius: var(--radius-sm, 8px) !important;
        text-decoration: none !important;
        box-shadow: 0 4px 16px rgba(255, 107, 0, 0.3) !important;
        border: none !important;
        cursor: pointer !important;
        box-sizing: border-box !important;
        white-space: nowrap !important;
    }
    .btn-concept-secondary {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 8px !important;
        background: rgba(255, 255, 255, 0.06) !important;
        backdrop-filter: blur(8px) !important;
        -webkit-backdrop-filter: blur(8px) !important;
        color: #ffffff !important;
        border: 1px solid rgba(255, 255, 255, 0.15) !important;
        font-weight: 600 !important;
        font-size: 0.88rem !important;
        padding: 10px 20px !important;
        border-radius: var(--radius-sm, 8px) !important;
        text-decoration: none !important;
        cursor: pointer !important;
        box-sizing: border-box !important;
        white-space: nowrap !important;
    }

    /* Phase 10 Integrated Trust Rail Mobile Hardening */
    .home-trust-rail,
    .trust-platform-strip {
        width: 100% !important;
        max-width: 100% !important;
        padding: 16px 0 !important;
        margin: 0 !important;
        min-height: 154px !important;
        box-sizing: border-box !important;
    }
    .home-trust-rail-inner,
    .trust-strip-inner {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 12px 14px !important;
        padding: 0 16px !important;
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }
    .trust-strip-divider {
        display: none !important;
    }
    .trust-stat-item {
        display: flex !important;
        align-items: center !important;
        gap: 10px !important;
        padding: 6px 4px !important;
        justify-content: flex-start !important;
        min-width: 0 !important;
        min-height: 48px !important;
        box-sizing: border-box !important;
    }
    .trust-stat-icon {
        width: 38px !important;
        height: 38px !important;
        min-width: 38px !important;
        border-radius: 10px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        flex-shrink: 0 !important;
        box-sizing: border-box !important;
    }
    .trust-stat-icon svg,
    .trust-stat-icon i {
        display: inline-block !important;
        width: 18px !important;
        height: 18px !important;
    }
    .trust-stat-text {
        display: flex !important;
        flex-direction: column !important;
        min-width: 0 !important;
        overflow: hidden !important;
    }
    .trust-stat-num {
        font-size: 1.25rem !important;
        font-weight: 800 !important;
        line-height: 1.15 !important;
        min-height: 1.25em !important;
        color: #ffffff !important;
    }
    .trust-stat-label {
        font-size: 0.74rem !important;
        color: var(--text-secondary, #9095a5) !important;
        line-height: 1.25 !important;
        white-space: normal !important;
        word-break: break-word !important;
        min-height: 2.5em !important;
        display: block !important;
    }

    /* 5.4 FEED & CARD SYSTEMS */
    .prompt-grid,
    #homePromptGrid,
    #homeTrendingGrid,
    #homeBattleTestedGrid,
    #searchResultsGrid,
    #trendingPromptGrid,
    #favoritesGrid,
    #collectionPromptGrid,
    .explore-prompts-grid,
    .spotlight-prompts-grid,
    .profile-prompts-grid {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 16px !important;
    }
    #homeTrendingGrid {
        min-height: 380px !important;
    }

    .creators-grid,
    #homeCreatorsGrid {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 14px !important;
    }

    /* Universal Creator Card: 5-Thumbnail Row Elastic Flex */
    .creator-card-thumbnails,
    .creator-preview-strip,
    .creator-work-strip {
        display: flex !important;
        width: 100% !important;
        min-width: 0 !important;
        overflow: hidden !important;
        gap: 4px !important;
    }
    .creator-card-thumbnails img,
    .creator-card-thumbnails a,
    .creator-preview-strip img,
    .creator-work-strip img {
        flex: 1 1 0 !important;
        min-width: 0 !important;
        aspect-ratio: 1 / 1 !important;
        object-fit: cover !important;
    }

    /* Card Badges: No Collision */
    .card-score-pill,
    .gcb-score-pill {
        max-width: 48% !important;
        white-space: nowrap !important;
    }
    .card-model-badge,
    .card-model-tag,
    .modal-model-badge {
        max-width: 48% !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }

    /* 5.5 SEARCH AUTOCOMPLETE BOUNDS */
    .explore-autocomplete-dropdown,
    .search-autocomplete-dropdown,
    .concept-autocomplete-dropdown,
    .hero-search-form .autocomplete-dropdown {
        left: 0 !important;
        right: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
        overflow-x: hidden !important;
        max-height: min(320px, 50vh) !important;
        z-index: 1000 !important;
    }

    /* 5.6 PROMPT DETAIL PAGE (prompt.html) STANDALONE SYSTEM */
    .standalone-page-wrapper {
        margin: 12px auto 40px auto !important;
        padding: 0 10px !important;
    }
    .standalone-prompt-box-wrapper {
        padding: 16px !important;
        border-radius: var(--radius-md, 10px) !important;
    }
    .modal-grid-layout {
        display: flex !important;
        flex-direction: column !important;
        min-height: unset !important;
        max-height: unset !important;
        gap: 16px !important;
    }
    .modal-image-col,
    .modal-details-col {
        width: 100% !important;
        overflow-y: visible !important;
    }
    .modal-main-img {
        max-height: 320px !important;
        object-fit: contain !important;
        width: 100% !important;
    }
    .modal-action-buttons-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 8px !important;
    }
    .modal-action-btn {
        min-height: 44px !important;
        font-size: 0.84rem !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    /* 5.7 FORMS & INPUT CONTROLS */
    input[type="text"],
    input[type="email"],
    input[type="password"],
    input[type="search"],
    input[type="url"],
    textarea,
    select {
        font-size: 16px !important; /* Prevents auto-zoom on mobile Safari */
        max-width: 100% !important;
        box-sizing: border-box !important;
    }

    /* 5.8 MODAL DIALOGS HARDENING */
    .share-modal-card,
    .delete-modal-card,
    .collection-modal-card {
        width: calc(100vw - 20px) !important;
        max-width: calc(100vw - 20px) !important;
        max-height: calc(100dvh - 24px) !important;
        padding: 16px !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch;
        box-sizing: border-box !important;
        border-radius: var(--radius-md, 10px) !important;
    }
    .modal-close,
    .share-modal-close,
    .delete-modal-close {
        min-width: 38px !important;
        min-height: 38px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    /* 5.8.1 PROMPT DETAIL MODAL — SINGLE VIEWPORT SCROLL ARCHITECTURE */
    .prompt-modal-container {
        width: min(960px, calc(100vw - 24px)) !important;
        max-width: calc(100vw - 24px) !important;
        max-height: calc(100vh - 24px) !important;
        max-height: calc(100dvh - 24px) !important;
        padding: 0 !important;
        padding-bottom: env(safe-area-inset-bottom, 0px) !important;
        overflow: hidden !important;
        display: flex !important;
        flex-direction: column !important;
        position: relative !important;
        box-sizing: border-box !important;
        border-radius: var(--radius-md, 12px) !important;
    }

    .modal-backdrop {
        padding: 12px !important;
    }

    .prompt-modal-container .modal-close {
        position: absolute !important;
        top: 12px !important;
        right: 12px !important;
        width: 42px !important;
        height: 42px !important;
        min-width: 42px !important;
        min-height: 42px !important;
        border-radius: 50% !important;
        background: rgba(14, 16, 22, 0.94) !important;
        border: 1px solid rgba(255, 255, 255, 0.2) !important;
        color: #ffffff !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        box-shadow: 0 4px 14px rgba(0, 0, 0, 0.65) !important;
        z-index: 1000 !important;
        cursor: pointer !important;
    }

    .prompt-modal-container .modal-close:hover,
    .prompt-modal-container .modal-close:focus-visible {
        background: rgba(255, 153, 0, 0.2) !important;
        border-color: var(--accent-orange) !important;
        outline: none !important;
    }

    /* Single primary scroll surface inside prompt modal */
    .modal-grid-layout {
        display: flex !important;
        flex-direction: column !important;
        flex: 1 1 auto !important;
        min-height: 0 !important;
        max-height: none !important;
        height: auto !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        overscroll-behavior: contain !important;
        -webkit-overflow-scrolling: touch !important;
    }

    .modal-image-col {
        overflow-y: visible !important;
        max-height: none !important;
        height: auto !important;
        padding: 16px 16px 12px 16px !important;
        flex-shrink: 0 !important;
    }

    .modal-image-col > div:first-child,
    .modal-media-viewport {
        min-height: 180px !important;
        max-height: 320px !important;
    }

    .modal-main-img {
        max-height: 300px !important;
        object-fit: contain !important;
    }

    .modal-model-badge {
        top: 10px !important;
        left: 10px !important;
        font-size: 0.76rem !important;
        padding: 4px 10px !important;
    }

    .modal-compat-box {
        padding: 12px !important;
        margin-top: 12px !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }

    .modal-compat-grid {
        gap: 8px !important;
    }

    .modal-details-col {
        overflow-y: visible !important;
        max-height: none !important;
        height: auto !important;
        padding: 16px !important;
        gap: 12px !important;
        flex-shrink: 0 !important;
    }

    .modal-header-meta {
        padding-right: 48px !important;
    }

    .modal-prompt-title {
        font-size: clamp(1.2rem, 4.5vw, 1.45rem) !important;
        line-height: 1.25 !important;
        word-break: break-word !important;
        overflow-wrap: anywhere !important;
    }

    .modal-creator-row {
        font-size: 0.82rem !important;
    }

    .version-control-row {
        width: 100% !important;
        box-sizing: border-box !important;
        margin-bottom: 8px !important;
        padding: 8px 10px !important;
        font-size: 0.78rem !important;
    }

    .quality-score-card {
        width: 100% !important;
        box-sizing: border-box !important;
        padding: 10px 12px !important;
    }

    .quality-breakdown-panel {
        width: 100% !important;
        box-sizing: border-box !important;
    }

    .modal-prompt-box {
        background: #0b0c0e !important;
        border: 1px solid var(--border-color) !important;
        border-radius: var(--radius-md) !important;
        padding: 12px !important;
        margin-top: 8px !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }

    .modal-prompt-text {
        font-size: 0.86rem !important;
        line-height: 1.5 !important;
        max-height: none !important;
        height: auto !important;
        overflow-y: visible !important;
        padding-bottom: 0 !important;
        width: 100% !important;
        box-sizing: border-box !important;
        white-space: pre-wrap !important;
        word-break: break-word !important;
        overflow-wrap: anywhere !important;
    }

    .modal-action-buttons-grid {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 8px !important;
        width: 100% !important;
        margin-top: 10px !important;
    }

    .modal-action-btn {
        width: 100% !important;
        min-height: 44px !important;
        padding: 8px 10px !important;
        font-size: 0.82rem !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 6px !important;
        box-sizing: border-box !important;
    }

    .modal-action-btn#modalCollectionBtn,
    .modal-action-btn.btn-action-fullwidth,
    .modal-action-btn.modal-action-btn-share {
        grid-column: 1 / -1 !important;
    }

    .modal-stats-row {
        flex-wrap: wrap !important;
        gap: 10px 14px !important;
    }

    .modal-related-grid {
        grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)) !important;
        gap: 8px !important;
    }

    .customizer-drawer {
        padding: 12px !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }

    .customizer-output-box {
        max-height: 180px !important;
        font-size: 0.82rem !important;
        overflow-wrap: anywhere !important;
        word-break: break-word !important;
    }

    /* 5.9 STATS & TRUST RAILS */
    .platform-stats-grid,
    .framework-steps-rail,
    .models-hero-stats,
    .stats-overview-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 10px !important;
    }

    /* 5.10 CANONICAL FOOTER RESPONSIVE SYSTEM */
    .site-footer {
        padding: 28px 16px 0 16px !important;
    }
    .footer-inner {
        grid-template-columns: 1fr !important;
        gap: 22px !important;
        padding-bottom: 22px !important;
    }
    .footer-col {
        border-right: none !important;
        padding-right: 0 !important;
    }
    .footer-brand-col {
        grid-column: span 1 !important;
        border-right: none !important;
        border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
        padding-bottom: 16px !important;
        padding-right: 0 !important;
    }
    .footer-bottom-strip {
        flex-direction: column !important;
        align-items: center !important;
        text-align: center !important;
        gap: 12px !important;
    }
    .footer-bottom-left,
    .footer-bottom-center {
        justify-content: center !important;
        text-align: center !important;
        width: 100% !important;
        position: static !important;
        transform: none !important;
    }

    /* Floating Back to Top Button Safe Positioning */
    .back-to-top-btn {
        bottom: max(16px, env(safe-area-inset-bottom, 16px)) !important;
        right: 16px !important;
        width: 40px !important;
        height: 40px !important;
        z-index: 900 !important;
    }
}

/* --------------------------------------------------------------------------
   6. SMALL MOBILE HARDENING (max-width: 480px, 390px, 360px, 320px)
   -------------------------------------------------------------------------- */
@media screen and (max-width: 480px) {
    .top-nav-inner {
        padding: 0 12px !important;
        height: 58px !important;
        gap: 8px !important;
    }
    .top-nav-brand {
        flex-shrink: 0 !important;
    }
    .top-nav-brand .brand-logo,
    .top-nav-logo-img {
        width: 132px !important;
        max-width: 138px !important;
        height: auto !important;
        max-height: 40px !important;
        object-fit: contain !important;
        object-position: left center !important;
        display: block !important;
        flex-shrink: 0 !important;
    }
    .top-nav-search-btn {
        width: 36px !important;
        height: 36px !important;
        padding: 0 !important;
        justify-content: center !important;
    }
    .top-nav-hamburger {
        width: 36px !important;
        height: 36px !important;
        min-width: 36px !important;
        min-height: 36px !important;
    }

    .notification-dropdown {
        top: 66px !important;
        max-height: calc(100vh - 78px) !important;
        max-height: calc(100dvh - 78px) !important;
    }
    .notification-dropdown .notif-list-container {
        max-height: calc(100vh - 128px) !important;
        max-height: calc(100dvh - 128px) !important;
    }

    /* Top Nav Logged-Out Controls: Minimal & Clean */
    #headerAuthContainer,
    #headerAuthContainer .auth-buttons-group,
    #headerAuthContainer a[href*="create"],
    #headerAuthContainer .top-nav-create-btn,
    #headerAuthContainer .btn-signup,
    #headerAuthContainer .btn-login {
        display: none !important;
    }

    /* Small Mobile Hero Polish */
    .home-hero-inner {
        padding: 24px 14px !important;
    }
    .hero-title-locked {
        font-size: clamp(1.6rem, 6.2vw, 1.95rem) !important;
    }
    .concept-search-input {
        height: 46px !important;
        padding: 0 46px 0 40px !important;
        font-size: 0.84rem !important;
    }
    .concept-search-btn {
        width: 36px !important;
        height: 36px !important;
        right: 5px !important;
    }
    .home-trust-rail-inner,
    .trust-strip-inner {
        gap: 10px 10px !important;
        padding: 0 12px !important;
    }
    .trust-stat-num {
        font-size: 1.15rem !important;
    }
    .trust-stat-label {
        font-size: 0.7rem !important;
    }

    /* Platform Stats on Small Mobile */
    .platform-stats-grid,
    .framework-steps-rail,
    .models-hero-stats,
    .stats-overview-grid {
        grid-template-columns: 1fr !important;
        gap: 8px !important;
    }

    .creator-trust-grid {
        grid-template-columns: 1fr !important;
        gap: 8px !important;
    }

    /* Settings & Create Prompt Form Stacking */
    .settings-hero-card {
        padding: 16px !important;
    }
    .settings-page-canvas {
        padding: 16px 10px 48px !important;
    }
    .settings-nav-item {
        font-size: 0.78rem !important;
        padding: 6px 10px !important;
    }
    .overview-status-grid,
    .jump-to-grid {
        grid-template-columns: 1fr !important;
    }
    .profile-summary-header {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 12px !important;
    }

    /* Modal Button Grid Single Column on Smallest Devices */
    .modal-action-buttons-grid {
        grid-template-columns: 1fr !important;
        gap: 6px !important;
    }
    .structural-pill-grid {
        grid-template-columns: 1fr !important;
    }

    /* Messages Composer Control Compactness */
    .msg-composer-toolbar {
        gap: 4px !important;
    }
    .btn-composer-tool {
        padding: 6px !important;
    }
}

@media screen and (max-width: 360px) {
    .top-nav-inner {
        padding: 0 8px !important;
        gap: 6px !important;
    }
    .top-nav-brand {
        flex-shrink: 0 !important;
    }
    .top-nav-brand .brand-logo,
    .top-nav-logo-img {
        width: 124px !important;
        max-width: 128px !important;
        height: auto !important;
        max-height: 38px !important;
        object-fit: contain !important;
        object-position: left center !important;
        display: block !important;
        flex-shrink: 0 !important;
    }
    .main-content {
        padding: 12px 10px 40px 10px !important;
    }
    .btn-header-create-prompt,
    .btn-notification-bell,
    .top-nav-search-btn,
    .top-nav-hamburger {
        width: 34px !important;
        height: 34px !important;
        min-width: 34px !important;
        min-height: 34px !important;
    }

    /* Smallest Mobile (320px-360px) Zero-Overflow Bounds */
    .home-hero-inner {
        padding: 20px 10px !important;
    }
    .hero-title-locked {
        font-size: 1.5rem !important;
    }
    .hero-concept-badge {
        font-size: 0.7rem !important;
        padding: 4px 10px !important;
    }
    .hero-actions-concept {
        gap: 8px !important;
    }
    .btn-concept-primary,
    .btn-concept-secondary {
        flex: 1 1 120px !important;
        padding: 9px 12px !important;
        font-size: 0.82rem !important;
    }
    .home-hero-fullbleed,
    .home-hero-concept {
        min-height: 535px !important;
    }
    .home-trust-rail,
    .trust-platform-strip {
        min-height: 142px !important;
    }
    .home-trust-rail-inner,
    .trust-strip-inner {
        padding: 0 8px !important;
        gap: 8px 6px !important;
    }
    .trust-stat-item {
        gap: 6px !important;
        padding: 2px !important;
    }
    .trust-stat-icon {
        width: 32px !important;
        height: 32px !important;
        min-width: 32px !important;
    }
    .trust-stat-icon svg,
    .trust-stat-icon i {
        width: 15px !important;
        height: 15px !important;
    }
    .trust-stat-num {
        font-size: 1.05rem !important;
    }
    .trust-stat-label {
        font-size: 0.66rem !important;
    }

    .notification-dropdown {
        top: 66px !important;
        left: 12px !important;
        right: 12px !important;
        max-height: calc(100vh - 78px) !important;
        max-height: calc(100dvh - 78px) !important;
    }
    .notification-dropdown .notif-list-container {
        max-height: calc(100vh - 126px) !important;
        max-height: calc(100dvh - 126px) !important;
    }

    .prompt-modal-container {
        width: calc(100vw - 16px) !important;
        max-width: calc(100vw - 16px) !important;
    }
    .modal-details-col {
        padding: 12px 10px !important;
    }
    .modal-prompt-box {
        padding: 10px !important;
    }
    .modal-action-buttons-grid {
        gap: 6px !important;
    }
    .modal-action-btn {
        font-size: 0.78rem !important;
        padding: 6px 8px !important;
    }
}

/* --------------------------------------------------------------------------
   7. NEVER DEPEND ON HOVER (MANDATORY FOR TOUCH DEVICES)
   -------------------------------------------------------------------------- */
@media (hover: none), (max-width: 768px) {
    .prompt-card,
    .gcb-prompt-card {
        display: flex;
        flex-direction: column;
    }
    .card-image-wrapper,
    .trending-card-image-wrap {
        position: relative;
    }
    .prompt-card .card-overlay,
    .gcb-prompt-card .card-overlay {
        position: relative !important;
        opacity: 1 !important;
        background: #141519 !important;
        display: flex !important;
        flex-direction: row !important;
        padding: 10px 12px !important;
        gap: 8px !important;
        border-top: 1px solid var(--border-color, rgba(255, 255, 255, 0.08)) !important;
        pointer-events: auto !important;
    }
    .prompt-card .overlay-btn,
    .gcb-prompt-card .overlay-btn {
        width: auto !important;
        flex: 1 !important;
        min-height: 42px !important;
        padding: 8px 10px !important;
        font-size: 0.84rem !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 6px !important;
        border-radius: var(--radius-sm, 6px) !important;
        font-weight: 700 !important;
    }
}

/* --------------------------------------------------------------------------
   8. LANDSCAPE MOBILE ORIENTATION (max-height: 550px)
   -------------------------------------------------------------------------- */
@media screen and (max-height: 550px) and (orientation: landscape) {
    .prompt-modal-container,
    .delete-modal-card,
    .share-modal-card {
        max-height: 94vh !important;
        padding: 12px !important;
    }
    .modal-main-img {
        max-height: 160px !important;
    }
    .compare-card {
        max-height: 92vh !important;
    }
    .mobile-drawer-content {
        padding-top: 14px !important;
    }
}