/* ================================================================
   mobile-extra.css — 50 New Mobile Implementations
   Appended to / works alongside mobile.css
   ================================================================ */

/* ═══════════════════ 16. FLOATING ACTION BUTTON (FAB) ═══════════════════ */
@media (max-width: 768px) {
    .fab-container {
        position: fixed;
        bottom: calc(78px + env(safe-area-inset-bottom));
        right: 20px;
        z-index: 500;
        display: flex;
        flex-direction: column-reverse;
        align-items: flex-end;
        gap: 12px;
    }

    .fab-main {
        width: 56px;
        height: 56px;
        border-radius: 50%;
        background: linear-gradient(135deg, #dc2626, #ff4444);
        border: none;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        box-shadow: 0 4px 24px rgba(220, 38, 38, .45);
        color: #fff;
        transition: transform .25s cubic-bezier(.34, 1.56, .64, 1), box-shadow .25s;
        -webkit-tap-highlight-color: transparent;
        position: relative;
    }

    .fab-main:active {
        transform: scale(.92);
    }

    .fab-main.open {
        transform: rotate(45deg);
    }

    .fab-main svg {
        width: 22px;
        height: 22px;
    }

    .fab-actions {
        display: flex;
        flex-direction: column;
        align-items: flex-end;
        gap: 10px;
        opacity: 0;
        pointer-events: none;
        transform: translateY(10px);
        transition: opacity .2s, transform .25s cubic-bezier(.34, 1.56, .64, 1);
    }

    .fab-actions.open {
        opacity: 1;
        pointer-events: all;
        transform: translateY(0);
    }

    .fab-action {
        display: flex;
        align-items: center;
        gap: 10px;
        background: var(--card);
        border: 1.5px solid var(--border);
        border-radius: 50px;
        padding: 10px 16px 10px 12px;
        cursor: pointer;
        color: var(--text);
        font-size: .82rem;
        font-weight: 700;
        box-shadow: 0 4px 20px rgba(0, 0, 0, .25);
        white-space: nowrap;
        -webkit-tap-highlight-color: transparent;
        transition: transform .15s, background .15s;
    }

    .fab-action:active {
        transform: scale(.95);
        background: var(--card-hover);
    }

    .fab-action .fa-icon {
        width: 32px;
        height: 32px;
        border-radius: 50%;
        background: rgba(220, 38, 38, .1);
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: .9rem;
    }
}

@media (min-width: 769px) {
    .fab-container {
        display: none !important;
    }
}

/* ═══════════════════ 17. BOTTOM SHEET DRAG HANDLE & SNAP ═══════════════════ */
.card-sheet {
    /* Add touch-action for swipe tracking */
    touch-action: pan-y;
}

.card-sheet-handle {
    cursor: grab;
    padding: 4px 0;
    margin-bottom: 16px;
}

.card-sheet-handle:active {
    cursor: grabbing;
}

/* ═══════════════════ 18. STICKY CATEGORY SECTION HEADERS ═══════════════════ */
@media (max-width: 768px) {
    .category-section .cat-header {
        position: sticky;
        top: calc(52px + 44px);
        /* top-bar height + nav height */
        z-index: 50;
        background: rgba(var(--bg-rgb, 10, 10, 18), 0.7);
        padding: 10px 0 8px;
        margin-bottom: 12px;
        border-bottom: 1px solid var(--border);
        backdrop-filter: blur(10px);
        -webkit-backdrop-filter: blur(10px);
    }

    /* Sticky header compact mode when stuck */
    .cat-header.is-stuck {
        padding: 6px 0 6px;
    }

    .cat-header.is-stuck .cat-desc {
        display: none;
    }

    .cat-header.is-stuck .cat-title {
        font-size: 1rem;
    }
}

/* ═══════════════════ 19. CARD SWIPE TO FAVORITE ═══════════════════ */
@media (max-width: 768px) {
    .card-swiper {
        position: relative;
        overflow: hidden;
        border-radius: 14px;
    }

    .card-swipe-bg {
        position: absolute;
        inset: 0;
        background: linear-gradient(135deg, rgba(220, 38, 38, .15), rgba(255, 68, 68, .08));
        border: 2px solid rgba(220, 38, 38, .3);
        border-radius: 14px;
        display: flex;
        align-items: center;
        justify-content: flex-end;
        padding-right: 20px;
        opacity: 0;
        transition: opacity .15s;
        pointer-events: none;
        font-size: 1.5rem;
    }

    .card-swipe-bg.active {
        opacity: 1;
    }

    .card.swiping {
        transition: transform .1s ease;
    }
}

/* ═══════════════════ 20. "NEW" BADGE ON NEW SITES ═══════════════════ */
.badge-new {
    display: inline-flex;
    align-items: center;
    background: linear-gradient(135deg, #dc2626, #ff4444);
    color: #fff;
    font-size: .58rem;
    font-weight: 800;
    padding: 2px 7px;
    border-radius: 50px;
    letter-spacing: .6px;
    text-transform: uppercase;
    margin-left: 6px;
    vertical-align: middle;
    box-shadow: 0 2px 8px rgba(220, 38, 38, .3);
}

.badge-trending {
    display: inline-flex;
    align-items: center;
    background: linear-gradient(135deg, #f59e0b, #fbbf24);
    color: #000;
    font-size: .58rem;
    font-weight: 800;
    padding: 2px 7px;
    border-radius: 50px;
    letter-spacing: .6px;
    text-transform: uppercase;
    margin-left: 6px;
    vertical-align: middle;
    box-shadow: 0 2px 8px rgba(245, 158, 11, .3);
}

/* ═══════════════════ 21. CARD GLOW PULSE ON FAVORITE ═══════════════════ */
@keyframes favGlow {
    0% {
        box-shadow: 0 0 0 0 rgba(220, 38, 38, .5);
    }

    70% {
        box-shadow: 0 0 0 12px rgba(220, 38, 38, 0);
    }

    100% {
        box-shadow: 0 0 0 0 rgba(220, 38, 38, 0);
    }
}

.card.just-faved {
    animation: favGlow .6s ease forwards;
    border-color: rgba(220, 38, 38, .5) !important;
}

/* ═══════════════════ 22. SEARCH SUGGESTIONS DROPDOWN ═══════════════════ */
@media (max-width: 768px) {
    .search-suggestions {
        position: absolute;
        top: calc(100% + 6px);
        left: 0;
        right: 0;
        background: var(--card);
        border: 1.5px solid var(--border);
        border-radius: 16px;
        overflow: hidden;
        z-index: 200;
        box-shadow: 0 8px 32px rgba(0, 0, 0, .3);
        animation: fadeUp .2s ease both;
    }

    .search-suggestion-item {
        display: flex;
        align-items: center;
        gap: 12px;
        padding: 12px 16px;
        cursor: pointer;
        transition: background .15s;
        border-bottom: 1px solid var(--border);
        -webkit-tap-highlight-color: transparent;
    }

    .search-suggestion-item:last-child {
        border-bottom: none;
    }

    .search-suggestion-item:active {
        background: var(--card-hover);
    }

    .ss-icon {
        font-size: 1rem;
        width: 24px;
        text-align: center;
    }

    .ss-text {
        font-size: .88rem;
        font-weight: 600;
        color: var(--text);
    }

    .ss-type {
        font-size: .72rem;
        color: var(--text-muted);
        margin-left: auto;
    }
}

/* ═══════════════════ 23. POPULAR SEARCHES CHIPS ═══════════════════ */
@media (max-width: 768px) {
    .popular-searches {
        display: flex;
        gap: 8px;
        overflow-x: auto;
        padding: 8px 16px 0;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
        margin-bottom: 8px;
    }

    .popular-searches::-webkit-scrollbar {
        display: none;
    }

    .pop-chip {
        flex-shrink: 0;
        display: flex;
        align-items: center;
        gap: 6px;
        background: var(--card);
        border: 1px solid var(--border);
        border-radius: 50px;
        padding: 6px 14px;
        font-size: .78rem;
        font-weight: 600;
        color: var(--text-muted);
        cursor: pointer;
        transition: all .2s;
        -webkit-tap-highlight-color: transparent;
    }

    .pop-chip:active {
        background: rgba(220, 38, 38, .08);
        border-color: rgba(220, 38, 38, .3);
        color: var(--accent);
    }

    .pop-chip-icon {
        font-size: .85rem;
    }
}

/* ═══════════════════ 24. VOICE SEARCH WAVEFORM ═══════════════════ */
.voice-waveform {
    display: none;
    align-items: center;
    gap: 3px;
    height: 18px;
    margin-left: 4px;
}

.voice-waveform.active {
    display: flex;
}

.wv-bar {
    width: 3px;
    border-radius: 2px;
    background: var(--accent);
    animation: wvAnim 0.5s ease-in-out infinite alternate;
}

.wv-bar:nth-child(1) {
    height: 6px;
    animation-delay: 0s;
}

.wv-bar:nth-child(2) {
    height: 12px;
    animation-delay: .1s;
}

.wv-bar:nth-child(3) {
    height: 16px;
    animation-delay: .2s;
}

.wv-bar:nth-child(4) {
    height: 10px;
    animation-delay: .3s;
}

.wv-bar:nth-child(5) {
    height: 14px;
    animation-delay: .15s;
}

@keyframes wvAnim {
    from {
        transform: scaleY(.4);
    }

    to {
        transform: scaleY(1);
    }
}

/* ═══════════════════ 25. FILTER CHIPS ROW ═══════════════════ */
@media (max-width: 768px) {
    .mobile-filter-row {
        display: flex;
        gap: 8px;
        overflow-x: auto;
        padding: 0 16px 10px;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
    }

    .mobile-filter-row::-webkit-scrollbar {
        display: none;
    }

    .filter-chip {
        flex-shrink: 0;
        padding: 7px 16px;
        border-radius: 50px;
        border: 1.5px solid var(--border);
        background: var(--card);
        color: var(--text-muted);
        font-size: .78rem;
        font-weight: 700;
        cursor: pointer;
        transition: all .2s;
        white-space: nowrap;
        -webkit-tap-highlight-color: transparent;
    }

    .filter-chip.active {
        background: rgba(220, 38, 38, .1);
        border-color: rgba(220, 38, 38, .4);
        color: var(--accent);
    }
}

/* ═══════════════════ 26. SEARCH CLEAR BUTTON ═══════════════════ */
@media (max-width: 768px) {
    .search-clear-btn {
        position: absolute;
        right: 48px;
        top: 50%;
        transform: translateY(-50%);
        width: 28px;
        height: 28px;
        border-radius: 50%;
        background: var(--border);
        border: none;
        display: none;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        color: var(--text-muted);
        font-size: .85rem;
        -webkit-tap-highlight-color: transparent;
    }

    .search-clear-btn.visible {
        display: flex;
    }
}

/* ═══════════════════ 27. STATS WIDGET (SIGNED IN) ═══════════════════ */
@media (max-width: 768px) {
    .mobile-stats-widget {
        display: flex;
        gap: 8px;
        padding: 16px;
        overflow-x: auto;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
        animation: fadeUp .5s .2s ease both;
    }

    .mobile-stats-widget::-webkit-scrollbar {
        display: none;
    }

    .mstat {
        flex-shrink: 0;
        min-width: 100px;
        background: var(--card);
        border: 1px solid var(--border);
        border-radius: 14px;
        padding: 14px 16px;
        display: flex;
        flex-direction: column;
        gap: 4px;
    }

    .mstat-val {
        font-size: 1.4rem;
        font-weight: 900;
        color: var(--accent);
        line-height: 1;
    }

    .mstat-lbl {
        font-size: .68rem;
        color: var(--text-muted);
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: .5px;
    }

    .mstat-icon {
        font-size: 1.1rem;
        margin-bottom: 4px;
    }
}

/* ═══════════════════ 28. PROFILE AVATAR IN TOP BAR ═══════════════════ */
@media (max-width: 768px) {
    .user-avatar-btn {
        width: 34px;
        height: 34px;
        border-radius: 50%;
        background: linear-gradient(135deg, #dc2626, #ff4444);
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: .85rem;
        font-weight: 800;
        color: #fff;
        cursor: pointer;
        border: 2px solid rgba(220, 38, 38, .3);
        flex-shrink: 0;
        overflow: hidden;
        box-shadow: 0 2px 8px rgba(220, 38, 38, .25);
        transition: transform .2s;
        -webkit-tap-highlight-color: transparent;
    }

    .user-avatar-btn:active {
        transform: scale(.9);
    }

    .user-avatar-btn img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        border-radius: 50%;
    }
}

/* ═══════════════════ 29. FAVORITES COUNT BADGE ON NAV ═══════════════════ */
@media (max-width: 768px) {
    .fav-count-badge {
        position: absolute;
        top: 4px;
        right: calc(50% - 18px);
        background: linear-gradient(135deg, #dc2626, #ff4444);
        color: #fff;
        font-size: .52rem;
        font-weight: 800;
        min-width: 16px;
        height: 16px;
        border-radius: 50px;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 0 4px;
        border: 2px solid var(--bg);
        animation: badgePop .3s cubic-bezier(.34, 1.56, .64, 1) both;
    }

    @keyframes badgePop {
        from {
            transform: scale(0);
        }

        to {
            transform: scale(1);
        }
    }
}

/* ═══════════════════ 30. APPLE-STYLE HAPTIC BUTTON PRESS ═══════════════════ */
@media (max-width: 768px) {

    .btn-visit:active,
    .fav-btn:active,
    .section-tab:active,
    .nav-btn:active,
    .filter-chip:active {
        transform: scale(.94);
        transition: transform .08s ease;
    }
}

/* ═══════════════════ 31. CARD CSS CONTAINMENT ═══════════════════ */
/* NOTE: contain:layout style removed — it blocks event propagation to buttons */
.card {
    contain: paint;
    /* paint-only is safe; layout+style breaks click events */
}

.category-section {
    contain: paint;
}

/* ═══════════════════ 32. REDUCE MOTION SUPPORT ═══════════════════ */
@media (prefers-reduced-motion: reduce) {

    *,
    *::before,
    *::after {
        animation-duration: .01ms !important;
        transition-duration: .01ms !important;
    }

    .card-sheet {
        transition: none;
    }

    .promo-popup {
        transition: none;
    }
}

/* ═══════════════════ 33. CATEGORY COLOR DOTS ON CARDS ═══════════════════ */
@media (max-width: 768px) {
    .card-cat-dot {
        display: inline-block;
        width: 8px;
        height: 8px;
        border-radius: 50%;
        margin-right: 4px;
        vertical-align: middle;
        flex-shrink: 0;
    }

    .card-cat-dot.free {
        background: #22c55e;
    }

    .card-cat-dot.piracy {
        background: #dc2626;
    }

    .card-cat-dot.sports {
        background: #3b82f6;
    }

    .card-cat-dot.edu {
        background: #a855f7;
    }

    .card-cat-dot.top {
        background: #f59e0b;
    }
}

/* ═══════════════════ 34. SECTION COUNT PILL IN HEADER ═══════════════════ */
@media (max-width: 768px) {
    .cat-count-pill {
        display: inline-flex;
        align-items: center;
        background: rgba(220, 38, 38, .1);
        color: var(--accent);
        border-radius: 50px;
        padding: 3px 10px;
        font-size: .68rem;
        font-weight: 800;
        margin-left: 8px;
        vertical-align: middle;
    }
}

/* ═══════════════════ 35. APP-LIKE PAGE TRANSITION ═══════════════════ */
@media (max-width: 768px) {
    .page-transition-out {
        animation: pageOut .2s ease forwards;
    }

    @keyframes pageOut {
        to {
            opacity: 0;
            transform: translateX(-20px);
        }
    }

    /* Links in bottom nav get slide-right effect — applied via JS before navigation */
}

/* ═══════════════════ 36. SEARCH HISTORY ITEM STYLE ═══════════════════ */
@media (max-width: 768px) {
    .search-history-chip {
        display: flex;
        align-items: center;
        gap: 6px;
        background: var(--surface);
        border: 1px solid var(--border);
        border-radius: 50px;
        padding: 5px 12px;
        font-size: .75rem;
        color: var(--text-muted);
        cursor: pointer;
        flex-shrink: 0;
        -webkit-tap-highlight-color: transparent;
        transition: all .15s;
    }

    .search-history-chip:active {
        border-color: var(--accent);
        color: var(--accent);
    }

    .search-history-chip .sh-icon {
        font-size: .8rem;
    }
}

/* ═══════════════════ 37. SMOOTH SKELETON FADE IN ═══════════════════ */
.card {
    animation: cardIn .4s ease both;
}

@keyframes cardIn {
    from {
        opacity: 0;
        transform: translateY(8px);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

/* Stagger on initial load */
.card:nth-child(1) {
    animation-delay: .0s;
}

.card:nth-child(2) {
    animation-delay: .03s;
}

.card:nth-child(3) {
    animation-delay: .06s;
}

.card:nth-child(4) {
    animation-delay: .08s;
}

.card:nth-child(5) {
    animation-delay: .1s;
}

.card:nth-child(6) {
    animation-delay: .12s;
}

/* ═══════════════════ 38. FEELING LUCKY BUTTON ═══════════════════ */
@media (max-width: 768px) {
    .feeling-lucky-btn {
        display: flex;
        align-items: center;
        gap: 6px;
        background: linear-gradient(135deg, rgba(220, 38, 38, .1), rgba(255, 68, 68, .06));
        border: 1.5px solid rgba(220, 38, 38, .2);
        border-radius: 50px;
        padding: 8px 18px;
        color: var(--accent);
        font-size: .8rem;
        font-weight: 700;
        cursor: pointer;
        margin: 8px auto 0;
        -webkit-tap-highlight-color: transparent;
        transition: all .2s;
    }

    .feeling-lucky-btn:active {
        transform: scale(.95);
        background: rgba(220, 38, 38, .15);
    }

    .feeling-lucky-btn svg {
        width: 14px;
        height: 14px;
    }
}

@media (min-width: 769px) {
    .feeling-lucky-btn {
        display: none;
    }
}

/* ═══════════════════ 39. ONBOARDING HIGHLIGHT RING ═══════════════════ */
.onboarding-pulse {
    animation: onboardingRing 2s ease-in-out 3;
}

@keyframes onboardingRing {
    0% {
        box-shadow: 0 0 0 0 rgba(220, 38, 38, .5);
    }

    70% {
        box-shadow: 0 0 0 10px rgba(220, 38, 38, 0);
    }

    100% {
        box-shadow: 0 0 0 0 rgba(220, 38, 38, 0);
    }
}

/* ═══════════════════ 40. MOMENTUM SCROLL EVERYWHERE ═══════════════════ */
.pinned-cats,
.rv-scroll,
.user-stats-bar,
.section-tabs,
#navFilters,
.popular-searches,
.mobile-filter-row,
.search-history-row {
    -webkit-overflow-scrolling: touch;
    scroll-behavior: smooth;
}

/* ═══════════════════ 41. DARK GLASS CARD VARIANT ═══════════════════ */
@media (max-width: 768px) {
    [data-theme="dark"] .card {
        background: rgba(20, 20, 20, .9);
        backdrop-filter: blur(10px);
        -webkit-backdrop-filter: blur(10px);
    }
}

/* ═══════════════════ 42. CONFETTI BURST KEYFRAMES ═══════════════════ */
.confetti-piece {
    position: fixed;
    pointer-events: none;
    z-index: 9999;
    width: 8px;
    height: 12px;
    border-radius: 2px;
    animation: confettiFall 1.5s ease-out forwards;
}

@keyframes confettiFall {
    0% {
        transform: translateY(-20px) rotate(0deg);
        opacity: 1;
    }

    100% {
        transform: translateY(80vh) rotate(720deg);
        opacity: 0;
    }
}

/* ═══════════════════ 43. SECTION HEADER ACTIVE INDICATOR ═══════════════════ */
@media (max-width: 768px) {
    .nav-btn.in-view {
        border-color: rgba(220, 38, 38, .4);
        background: rgba(220, 38, 38, .08);
        color: var(--accent);
    }
}

/* ═══════════════════ 44. SCROLL SNAP ON MAIN CONTENT SECTIONS ═══════════════════ */
/* Opt-in only per section, not forced globally */
.snap-section {
    scroll-margin-top: 120px;
}

/* ═══════════════════ 45. IMPROVED FAV BUTTON FILL ANIMATION ═══════════════════ */
.fav-btn svg path {
    transition: fill .25s cubic-bezier(.34, 1.56, .64, 1), stroke .25s;
}

.fav-btn.active svg path {
    fill: var(--accent);
    stroke: var(--accent);
}

/* ═══════════════════ 46. BOTTOM SHEET VELOCITY SCROLL ═══════════════════ */
.card-sheet {
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
}

/* ═══════════════════ 47. TOAST NOTIFICATION ═══════════════════ */
.toast {
    position: fixed;
    bottom: calc(80px + env(safe-area-inset-bottom) + 12px);
    left: 50%;
    transform: translateX(-50%) translateY(20px);
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 50px;
    padding: 10px 20px;
    font-size: .82rem;
    font-weight: 600;
    color: var(--text);
    box-shadow: 0 4px 24px rgba(0, 0, 0, .3);
    z-index: 900;
    white-space: nowrap;
    opacity: 0;
    transition: all .3s cubic-bezier(.34, 1.56, .64, 1);
    pointer-events: none;
}

.toast.show {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

.toast.success {
    border-color: rgba(34, 197, 94, .3);
    color: #22c55e;
}

.toast.error {
    border-color: rgba(220, 38, 38, .3);
    color: var(--accent);
}

/* ═══════════════════ 48. SEARCH BAR FOCUS GLOW — see global rule below ═══════════════════ */
@media (max-width: 768px) {
    .search-input-wrap input:focus {
        outline: none;
    }
}

/* ═══════════════════ 49. HERO STATS TICKER (SIGNED IN) ═══════════════════ */
@media (max-width: 768px) {
    .hero-stat-animate .hero-stat-num {
        animation: countUp .8s cubic-bezier(.34, 1.2, .64, 1) both;
    }

    @keyframes countUp {
        from {
            opacity: 0;
            transform: translateY(12px);
        }

        to {
            opacity: 1;
            transform: none;
        }
    }
}

/* ═══════════════════ 50. NATIVE-FEEL INPUT STYLING ═══════════════════ */
@media (max-width: 768px) {

    input,
    select,
    textarea {
        -webkit-appearance: none;
        appearance: none;
        border-radius: 0;
    }

    input[type="email"],
    input[type="password"],
    input[type="text"],
    input[type="search"] {
        border-radius: 12px;
        font-size: max(16px, 1em);
        /* prevents iOS zoom */
        -webkit-user-select: text;
        user-select: text;
    }
}

/* ═══ 55-56. PRINT STYLES ═══ */
@media print {

    .top-bar,
    .nav-wrap,
    .section-tabs,
    .back-top,
    .fav-btn,
    .btn-copy-link,
    .mobile-nav-toggle,
    .ptr-indicator,
    .promo-popup,
    .fab-container,
    .bottom-nav {
        display: none !important;
    }

    .card {
        break-inside: avoid;
        border: 1px solid #ccc !important;
        box-shadow: none !important;
    }

    .card-grid {
        display: block;
    }

    body {
        background: #fff !important;
        color: #000 !important;
    }

    a {
        color: #000 !important;
        text-decoration: underline !important;
    }
}

/* 57. Text selection color */
::selection {
    background: rgba(220, 38, 38, .3);
    color: inherit;
}

::-moz-selection {
    background: rgba(220, 38, 38, .3);
    color: inherit;
}

/* ═══════════════════ 58. CORE RESPONSIVE & INTERACTION FLOWS ═══════════════════ */
@media (max-width: 480px) {

    /* Auth Modal: Prevent keyboard from pushing inputs out of view */
    .auth-modal {
        padding: 24px 20px !important;
        margin: 12px;
        max-height: 85vh;
        overflow-y: auto;
        overscroll-behavior: contain;
        transform: translateY(12px) scale(.95) !important;
    }

    .modal-overlay.open .auth-modal {
        transform: translateY(0) scale(1) !important;
    }

    .auth-modal h2 {
        font-size: 1.3rem !important;
    }

    /* Touch Target Enhancements for Saving/Unsaving */
    .fav-btn {
        width: 40px !important;
        height: 40px !important;
    }

    .fav-btn svg {
        width: 22px !important;
        height: 22px !important;
    }

    .fav-btn::before {
        content: '';
        position: absolute;
        inset: -10px;
        /* Expands the clickable area without changing visual size */
    }

    /* Toast notification positioning to clear the bottom nav + safe area */
    .toast {
        bottom: calc(90px + env(safe-area-inset-bottom)) !important;
        padding: 12px 24px !important;
        font-size: .95rem !important;
        box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4) !important;
    }

    /* Admin link touch target in modal */
    #adminLinkWrap a {
        padding: 12px 24px !important;
        width: 100%;
        justify-content: center;
    }
}

/* --- PHASE 10: ULTIMATE MOBILE POLISH & PERFORMANCE --- */

/* 1. Eliminate Horizontal Overflow completely */
html,
body {
    max-width: 100vw;
    overflow-x: hidden;
    /* contain keeps scroll working on mobile, none was too aggressive */
    overscroll-behavior-x: none;
}

/* 2. Hardware Accelerated — NOTE: DO NOT add transform to .bottom-nav or .auth-modal
   transform on a position:fixed element breaks its viewport anchoring (creates new stacking context) */
/* .bottom-nav and .auth-modal intentionally excluded from transform/will-change */

/* 3. Card Action Flex Wrapping & Safe Areas */
.card-actions,
.card-tags,
.quick-tools-row {
    flex-wrap: wrap !important;
    gap: 8px;
    /* Ensure uniform spacing when wrapping */
}

/* 4. Safe Area Insets for iOS & Modern Android */
.main-content {
    padding-bottom: calc(80px + env(safe-area-inset-bottom, 20px)) !important;
}

.bottom-nav {
    padding-bottom: env(safe-area-inset-bottom, 0px) !important;
}

/* 5. Minimum 44px Touch Targets for Accessibility */
.tag,
.category-pill,
.theme-btn,
.close-auth,
button,
.icon-btn {
    min-height: 44px;
    min-width: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.tag {
    padding: 8px 16px;
}

/* 6. Form Scaling Fix (Already partially in mobile-extra, reinforcing here) */
input[type="text"],
input[type="email"],
input[type="search"] {
    font-size: 16px !important;
    /* Strictly prevents iOS Safari Zoom */
}


/* --- PHASE 10: HARDWARE ACCELERATED SCROLL HIDE --- */
.nav-slide-up {
    transform: translateY(-150%) !important;
    transition: transform 0.3s cubic-bezier(0.25, 1, 0.5, 1) !important;
}

/* ══════════════════════════════════════════════════════════════
   MEGA BUILD: 100 FEATURES — CSS Layer
   ══════════════════════════════════════════════════════════════ */

/* ─── FEATURE 1: COMMAND PALETTE (Cmd/Ctrl+K) ─── */
#cmdPalette {
    position: fixed;
    inset: 0;
    z-index: 9000;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding-top: 12vh;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.18s ease;
}

#cmdPalette.open {
    opacity: 1;
    pointer-events: all;
}

#cmdPaletteOverlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.65);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}

#cmdPaletteBox {
    position: relative;
    z-index: 1;
    width: min(640px, 92vw);
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 20px;
    box-shadow: 0 32px 80px rgba(0, 0, 0, 0.6);
    overflow: hidden;
    transform: translateY(-8px) scale(0.97);
    transition: transform 0.22s cubic-bezier(0.34, 1.56, 0.64, 1);
}

#cmdPalette.open #cmdPaletteBox {
    transform: translateY(0) scale(1);
}

#cmdInput {
    width: 100%;
    padding: 18px 20px 18px 52px;
    font-size: 1.05rem;
    font-weight: 500;
    background: transparent;
    border: none;
    border-bottom: 1px solid var(--border);
    color: var(--text);
    outline: none;
    font-family: inherit;
}

.cmd-search-icon {
    position: absolute;
    left: 18px;
    top: 18px;
    color: var(--text-dim);
    width: 20px;
    height: 20px;
}

#cmdResults {
    max-height: 420px;
    overflow-y: auto;
    padding: 8px 0;
}

.cmd-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 11px 20px;
    cursor: pointer;
    border-radius: 0;
    transition: background 0.12s;
    color: var(--text);
    text-decoration: none;
    font-size: 0.9rem;
}

.cmd-item:hover,
.cmd-item.active {
    background: rgba(220, 38, 38, 0.08);
    color: var(--accent);
}

.cmd-item-icon {
    font-size: 1.1rem;
    width: 28px;
    text-align: center;
    flex-shrink: 0;
}

.cmd-item-label {
    flex: 1;
    font-weight: 600;
}

.cmd-item-hint {
    font-size: 0.75rem;
    color: var(--text-muted);
}

.cmd-section-label {
    padding: 8px 20px 4px;
    font-size: 0.7rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 1.2px;
    color: var(--text-dim);
}

.cmd-kbd {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 5px;
    padding: 2px 7px;
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--text-muted);
    font-family: monospace;
    margin-left: auto;
}

#cmdPaletteKbd {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 16px;
    border-top: 1px solid var(--border);
    font-size: 0.72rem;
    color: var(--text-dim);
}

#cmdPaletteKbd span {
    display: flex;
    gap: 8px;
    align-items: center;
}

/* ─── FEATURE 2: SKELETON CARD LOADING ─── */
@keyframes shimmer {
    0% {
        background-position: -200% center;
    }

    100% {
        background-position: 200% center;
    }
}

.card-skeleton {
    border-radius: 16px;
    background: var(--card);
    border: 1px solid var(--border);
    padding: 20px;
    overflow: hidden;
    position: relative;
}

.card-skeleton::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, 0.05) 50%, transparent 100%);
    background-size: 200% 100%;
    animation: shimmer 1.5s infinite;
}

.skel-line {
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.07);
    margin-bottom: 10px;
}

.skel-line.h20 {
    height: 20px;
    width: 70%;
}

.skel-line.h14 {
    height: 14px;
    width: 90%;
}

.skel-line.h14.w60 {
    width: 60%;
}

.skel-line.h40 {
    height: 40px;
    width: 100%;
    border-radius: 10px;
}

/* ─── FEATURE 3: GYRO GLASS PARALLAX ─── */

/* ─── FEATURE 5: PINCH-TO-ZOOM GRID ─── */
#mainContent.zoom-1 .card-grid {
    grid-template-columns: 1fr !important;
}

#mainContent.zoom-2 .card-grid {
    grid-template-columns: repeat(2, 1fr) !important;
}

#mainContent.zoom-3 .card-grid {
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)) !important;
}

#mainContent.zoom-4 .card-grid {
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)) !important;
}

.zoom-level-toast {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0.8);
    background: rgba(0, 0, 0, 0.8);
    color: #fff;
    padding: 12px 24px;
    border-radius: 50px;
    font-weight: 700;
    font-size: 0.9rem;
    z-index: 8000;
    opacity: 0;
    pointer-events: none;
    transition: all 0.25s;
}

.zoom-level-toast.show {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
}

/* ─── FEATURE 10: SCROLL PROGRESS BAR ─── */
#scrollProgressBar {
    position: fixed;
    top: 0;
    left: 0;
    height: 3px;
    width: 0%;
    background: linear-gradient(90deg, #dc2626, #ff4444, #ff6b9d);
    z-index: 9999;
    transition: width 0.08s linear;
    border-radius: 0 2px 2px 0;
    box-shadow: 0 0 8px rgba(220, 38, 38, 0.6);
}

/* ─── FEATURE 11: COPY LINK FEEDBACK ─── */
.btn-copy-link.copied {
    background: rgba(0, 201, 167, 0.12) !important;
    border-color: var(--green) !important;
    color: var(--green) !important;
}

/* ─── FEATURE 12: MULTI-SELECT MODE ─── */
.multi-select-bar {
    position: fixed;
    bottom: calc(72px + env(safe-area-inset-bottom));
    left: 50%;
    transform: translateX(-50%) translateY(120%);
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 50px;
    padding: 10px 20px;
    display: flex;
    align-items: center;
    gap: 12px;
    z-index: 800;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
    white-space: nowrap;
}

.multi-select-bar.visible {
    transform: translateX(-50%) translateY(0);
}

.multi-select-count {
    font-weight: 800;
    font-size: 0.85rem;
    color: var(--accent);
}

.ms-btn {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 50px;
    padding: 6px 14px;
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--text);
    cursor: pointer;
    transition: all 0.15s;
}

.ms-btn:active {
    transform: scale(0.95);
}

.ms-btn.danger {
    color: var(--red);
    border-color: rgba(255, 107, 107, 0.3);
}

.card.ms-selected {
    outline: 2px solid var(--accent) !important;
    outline-offset: 2px;
    background: rgba(220, 38, 38, 0.06) !important;
}

.ms-checkbox {
    position: absolute;
    top: 10px;
    left: 10px;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    border: 2px solid var(--border);
    background: var(--card);
    display: none;
    align-items: center;
    justify-content: center;
    font-size: 0.7rem;
    color: #fff;
    z-index: 5;
    transition: all 0.2s;
}

body.multi-select-mode .card {
    position: relative;
}

body.multi-select-mode .ms-checkbox {
    display: flex;
}

body.multi-select-mode .card.ms-selected .ms-checkbox {
    background: var(--accent);
    border-color: var(--accent);
}

/* ─── FEATURE 15: OFFLINE INDICATOR ─── */
#offlineIndicator {
    position: fixed;
    bottom: calc(80px + env(safe-area-inset-bottom));
    left: 50%;
    transform: translateX(-50%) translateY(120%);
    background: linear-gradient(135deg, #1a1a1a, #2a2a2a);
    color: #fff;
    padding: 10px 20px;
    border-radius: 50px;
    font-size: 0.82rem;
    font-weight: 700;
    z-index: 5000;
    display: flex;
    align-items: center;
    gap: 8px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
    border: 1px solid rgba(255, 255, 255, 0.1);
    transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

#offlineIndicator.show {
    transform: translateX(-50%) translateY(0);
}

.offline-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #ff6b6b;
    animation: offlinePulse 1.2s infinite;
    flex-shrink: 0;
}

@keyframes offlinePulse {

    0%,
    100% {
        opacity: 1;
    }

    50% {
        opacity: 0.3;
    }
}

/* ─── FEATURE 20: ANIMATED GRADIENT BORDER ON HOVER ─── */
@property --border-angle {
    syntax: '<angle>';
    initial-value: 0deg;
    inherits: false;
}

.card:hover {
    --border-angle: 360deg;
    border-color: transparent !important;
    background-image: linear-gradient(var(--card), var(--card)),
        conic-gradient(from var(--border-angle), #dc2626 0%, #ff6b9d 25%, #a855f7 50%, #3b82f6 75%, #dc2626 100%);
    background-origin: border-box;
    background-clip: padding-box, border-box;
    border: 1px solid transparent !important;
}

@keyframes rotateBorder {
    to {
        --border-angle: 360deg;
    }
}

.card:hover {
    animation: rotateBorder 3s linear infinite;
}

/* ─── FEATURE 22: TRUST SCORE ─── */
.trust-score {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    font-size: 0.68rem;
    font-weight: 800;
    padding: 2px 8px;
    border-radius: 50px;
    margin-left: 6px;
}

.trust-score.high {
    background: rgba(0, 201, 167, 0.12);
    color: var(--green);
}

.trust-score.mid {
    background: rgba(245, 158, 11, 0.12);
    color: var(--yellow);
}

.trust-score.low {
    background: rgba(255, 107, 107, 0.12);
    color: var(--red);
}

/* ─── FEATURE 32: EDITOR'S PICK BADGE ─── */
.badge-editors-pick {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: linear-gradient(135deg, #a855f7, #6366f1);
    color: #fff;
    font-size: 0.58rem;
    font-weight: 800;
    padding: 2px 8px;
    border-radius: 50px;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    margin-left: 6px;
    box-shadow: 0 2px 8px rgba(168, 85, 247, 0.3);
}

/* ─── FEATURE 33: NEW THIS WEEK BADGE ─── */
.badge-new-week {
    display: inline-flex;
    align-items: center;
    background: linear-gradient(135deg, #10b981, #059669);
    color: #fff;
    font-size: 0.58rem;
    font-weight: 800;
    padding: 2px 8px;
    border-radius: 50px;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    margin-left: 6px;
    box-shadow: 0 2px 8px rgba(16, 185, 129, 0.3);
}

/* ─── FEATURE 38: ONBOARDING CHECKLIST ─── */
#onboardingChecklist {
    position: fixed;
    bottom: calc(80px + env(safe-area-inset-bottom));
    right: 16px;
    width: 280px;
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 20px;
    padding: 16px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
    z-index: 700;
    transform: translateX(120%);
    transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

#onboardingChecklist.show {
    transform: translateX(0);
}

.ob-title {
    font-size: 0.85rem;
    font-weight: 800;
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--text);
}

.ob-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 7px 0;
    font-size: 0.8rem;
    color: var(--text-muted);
    border-bottom: 1px solid var(--border);
}

.ob-item:last-child {
    border-bottom: none;
}

.ob-check {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    border: 2px solid var(--border);
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.65rem;
    transition: all 0.2s;
}

.ob-item.done .ob-check {
    background: var(--green);
    border-color: var(--green);
    color: #fff;
}

.ob-item.done {
    text-decoration: line-through;
    opacity: 0.6;
}

.ob-progress {
    height: 4px;
    background: var(--border);
    border-radius: 2px;
    margin-top: 12px;
    overflow: hidden;
}

.ob-progress-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--accent), var(--green));
    border-radius: 2px;
    transition: width 0.5s ease;
}

#obCloseBtn {
    position: absolute;
    top: 12px;
    right: 12px;
    background: none;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    font-size: 1rem;
    line-height: 1;
    padding: 4px;
}

/* ─── FEATURE 41: CONFETTI ─── */
.confetti-piece {
    position: fixed;
    width: 10px;
    height: 10px;
    top: -10px;
    border-radius: 2px;
    animation: confettiFall linear forwards;
    pointer-events: none;
    z-index: 9999;
}

@keyframes confettiFall {
    0% {
        transform: translateY(0) rotate(0deg);
        opacity: 1;
    }

    100% {
        transform: translateY(100vh) rotate(720deg);
        opacity: 0;
    }
}

/* ─── FEATURE 44: 3D CARD TILT ─── */
@media (hover: hover) and (min-width: 769px) {
    .card {
        transform-style: preserve-3d;
        perspective: 1000px;
    }

    .card:hover {
        transform: perspective(1000px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) translateZ(4px) !important;
        transition: transform 0.1s ease-out !important;
    }
}

/* ─── FEATURE 46: ANIMATED FAVICON TICKER ─── */
/* (Handled in JS) */

/* ─── FEATURE 48: BOTTOM SHEET DRAG PROGRESS ─── */
.sheet-drag-progress {
    position: absolute;
    top: 0;
    left: 0;
    height: 3px;
    background: var(--accent);
    border-radius: 0 3px 3px 0;
    width: 0%;
    transition: width 0.1s linear;
    opacity: 0;
}

/* ─── FEATURE 49: PULSE RING ON NEW SITES ─── */
.card[data-is-new="true"]::before {
    content: '';
    position: absolute;
    top: 8px;
    right: 8px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--green);
    box-shadow: 0 0 0 0 rgba(0, 201, 167, 0.4);
    animation: newPulse 2s infinite;
}

@keyframes newPulse {
    0% {
        box-shadow: 0 0 0 0 rgba(0, 201, 167, 0.5);
    }

    70% {
        box-shadow: 0 0 0 10px rgba(0, 201, 167, 0);
    }

    100% {
        box-shadow: 0 0 0 0 rgba(0, 201, 167, 0);
    }
}

.card {
    position: relative;
}

/* ─── FEATURE 51: TOAST QUEUE ─── */
#toastContainer {
    position: fixed;
    bottom: calc(80px + env(safe-area-inset-bottom));
    left: 50%;
    transform: translateX(-50%);
    z-index: 5000;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    pointer-events: none;
}

#toastContainer .toast {
    position: relative !important;
    bottom: auto !important;
    left: auto !important;
    transform: none !important;
    animation: toastIn 0.3s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
    pointer-events: all;
}

@keyframes toastIn {
    from {
        opacity: 0;
        transform: translateY(12px) scale(0.92);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* ─── FEATURE 52: RIPPLE EFFECT ─── */
.ripple-host {
    position: relative;
    overflow: hidden;
}

.ripple {
    position: absolute;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.15);
    transform: scale(0);
    animation: rippleAnim 0.5s ease-out forwards;
    pointer-events: none;
}

@keyframes rippleAnim {
    to {
        transform: scale(4);
        opacity: 0;
    }
}

/* ─── FEATURE 54: SURPRISE ME DICE ANIMATION ─── */
@keyframes diceRoll {
    0% {
        transform: rotate(0deg) scale(1);
    }

    25% {
        transform: rotate(-15deg) scale(0.9);
    }

    50% {
        transform: rotate(15deg) scale(1.1);
    }

    75% {
        transform: rotate(-8deg) scale(0.95);
    }

    100% {
        transform: rotate(0deg) scale(1);
    }
}

.dice-rolling {
    animation: diceRoll 0.5s ease;
}

/* ─── FEATURE 55: DARK MODE PARTICLES ─── */
#heroParticles {
    position: absolute;
    inset: 0;
    pointer-events: none;
    overflow: hidden;
    z-index: 0;
}

.hero-particle {
    position: absolute;
    border-radius: 50%;
    background: rgba(220, 38, 38, 0.25);
    animation: particleFloat linear infinite;
}

@keyframes particleFloat {
    0% {
        transform: translateY(100%) rotate(0deg);
        opacity: 0;
    }

    10% {
        opacity: 1;
    }

    90% {
        opacity: 1;
    }

    100% {
        transform: translateY(-100vh) rotate(360deg);
        opacity: 0;
    }
}

/* ─── FEATURE 57: NAVBAR CATEGORY COLOR THEME ─── */
.nav-wrap[data-active-type="piracy"] {
    border-bottom-color: var(--piracy-accent) !important;
}

.nav-wrap[data-active-type="sports"] {
    border-bottom-color: var(--sports-accent) !important;
}

.nav-wrap[data-active-type="labs"] {
    border-bottom-color: var(--labs-accent) !important;
}

.nav-wrap[data-active-type="agent"] {
    border-bottom-color: var(--agent-accent) !important;
}

.nav-wrap[data-active-type="llm"] {
    border-bottom-color: var(--llm-accent) !important;
}

.nav-wrap[data-active-type="vpn"] {
    border-bottom-color: var(--vpn-accent) !important;
}

/* ─── FEATURE 60: SEARCH GLOW — rotating conic gradient ring ─── */
@property --sg-angle {
    syntax: '<angle>';
    initial-value: 0deg;
    inherits: false;
}

@keyframes sgSpin {
    to {
        --sg-angle: 360deg;
    }
}

@keyframes sgPulse {

    0%,
    100% {
        opacity: 0.85;
    }

    50% {
        opacity: 1;
    }
}

.search-wrap {
    isolation: auto;
}

.search-wrap:focus-within::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 53px;
    background: conic-gradient(from var(--sg-angle),
            #dc2626, #ff6b9d, #a855f7, #22d3ee, #10b981, #dc2626);
    animation: sgSpin 3s linear infinite, sgPulse 1.8s ease-in-out infinite;
    z-index: 0;
}

/* Input covers the conic gradient inside the ring */
.search-wrap:focus-within .search-input-wrap {
    position: relative;
    z-index: 1;
    background: var(--bg2);
    border-radius: 51px;
}

.search-wrap:focus-within {
    box-shadow: none !important;
    animation: none !important;
}

/* ─── FEATURE 62: PWA INSTALL BANNER ─── */
#pwaInstallBanner {
    position: fixed;
    bottom: calc(80px + env(safe-area-inset-bottom));
    left: 16px;
    right: 16px;
    background: linear-gradient(135deg, var(--card), var(--surface));
    border: 1px solid var(--border);
    border-radius: 20px;
    padding: 16px 20px;
    display: flex;
    align-items: center;
    gap: 14px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
    z-index: 700;
    transform: translateY(140%);
    transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

#pwaInstallBanner.show {
    transform: translateY(0);
}

.pwa-icon {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: linear-gradient(135deg, #dc2626, #ff4444);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.4rem;
    flex-shrink: 0;
}

.pwa-text {
    flex: 1;
}

.pwa-title {
    font-weight: 800;
    font-size: 0.88rem;
    color: var(--text);
}

.pwa-sub {
    font-size: 0.72rem;
    color: var(--text-muted);
    margin-top: 2px;
}

.pwa-install-btn {
    background: linear-gradient(135deg, #dc2626, #ff4444);
    color: #fff;
    border: none;
    border-radius: 50px;
    padding: 8px 16px;
    font-size: 0.8rem;
    font-weight: 700;
    cursor: pointer;
    white-space: nowrap;
    transition: transform 0.15s;
}

.pwa-install-btn:active {
    transform: scale(0.96);
}

.pwa-dismiss {
    background: none;
    border: none;
    color: var(--text-dim);
    cursor: pointer;
    font-size: 1.1rem;
    padding: 4px;
    flex-shrink: 0;
}

/* ─── FEATURE 80: UPVOTE LEADERBOARD MODAL ─── */
#leaderboardModal {
    position: fixed;
    inset: 0;
    z-index: 8500;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s;
}

#leaderboardModal.open {
    opacity: 1;
    pointer-events: all;
}

#leaderboardBox {
    background: var(--surface);
    border-radius: 24px 24px 0 0;
    border: 1px solid var(--border);
    width: min(640px, 100%);
    max-height: 75vh;
    overflow-y: auto;
    padding: 24px;
    transform: translateY(100%);
    transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
    box-shadow: 0 -8px 40px rgba(0, 0, 0, 0.5);
}

#leaderboardModal.open #leaderboardBox {
    transform: translateY(0);
}

.lb-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 0;
    border-bottom: 1px solid var(--border);
}

.lb-rank {
    font-size: 1.1rem;
    font-weight: 900;
    width: 28px;
    text-align: center;
    color: var(--text-muted);
}

.lb-rank.gold {
    color: #ffd93d;
}

.lb-rank.silver {
    color: #cbd5e1;
}

.lb-rank.bronze {
    color: #fb923c;
}

.lb-site {
    flex: 1;
    font-weight: 700;
    font-size: 0.88rem;
    color: var(--text);
}

.lb-votes {
    font-size: 0.8rem;
    font-weight: 800;
    color: var(--accent);
}

/* ─── FEATURE 81: XP & CURATOR SYSTEM ─── */
#xpBar {
    position: fixed;
    top: 52px;
    left: 0;
    right: 0;
    height: 3px;
    background: transparent;
    z-index: 180;
}

#xpBarFill {
    height: 100%;
    background: linear-gradient(90deg, #a855f7, #6366f1);
    border-radius: 0 2px 2px 0;
    transition: width 0.8s cubic-bezier(0.34, 1.56, 0.64, 1);
    box-shadow: 0 0 8px rgba(168, 85, 247, 0.5);
}

.xp-level-popup {
    position: fixed;
    top: 70px;
    right: 16px;
    background: linear-gradient(135deg, #a855f7, #6366f1);
    color: #fff;
    padding: 10px 18px;
    border-radius: 50px;
    font-size: 0.82rem;
    font-weight: 800;
    z-index: 5000;
    opacity: 0;
    transform: translateY(-8px);
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
    pointer-events: none;
    box-shadow: 0 4px 20px rgba(168, 85, 247, 0.4);
}

.xp-level-popup.show {
    opacity: 1;
    transform: translateY(0);
}

/* ─── FEATURE 82: ACHIEVEMENT BADGE POPUP ─── */
.achievement-popup {
    position: fixed;
    bottom: calc(90px + env(safe-area-inset-bottom));
    left: 50%;
    transform: translateX(-50%) translateY(30px);
    background: linear-gradient(135deg, var(--card), var(--surface));
    border: 1px solid var(--border);
    border-radius: 20px;
    padding: 14px 20px;
    display: flex;
    align-items: center;
    gap: 14px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
    z-index: 5000;
    opacity: 0;
    transition: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
    pointer-events: none;
    min-width: 280px;
    max-width: 90vw;
    text-align: left;
}

.achievement-popup.show {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

.achievement-icon {
    font-size: 2rem;
    flex-shrink: 0;
}

.achievement-text .ach-title {
    font-weight: 800;
    font-size: 0.85rem;
    color: var(--text);
}

.achievement-text .ach-sub {
    font-size: 0.72rem;
    color: var(--text-muted);
    margin-top: 2px;
}

/* ─── FEATURE 90: USER STREAK COUNTER ─── */
.streak-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: linear-gradient(135deg, rgba(255, 153, 0, 0.15), rgba(255, 100, 0, 0.1));
    border: 1px solid rgba(255, 153, 0, 0.3);
    color: #ff9900;
    font-size: 0.72rem;
    font-weight: 800;
    padding: 3px 10px;
    border-radius: 50px;
    white-space: nowrap;
}

/* ─── FEATURE 95: LIVE USER COUNT ─── */
#liveUserCount {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--text-muted);
    padding: 4px 10px;
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 50px;
    margin-left: 12px;
}

.live-dot {
    width: 7px;
    height: 7px;
    background: #00c9a7;
    border-radius: 50%;
    animation: livePulse 2s infinite;
    flex-shrink: 0;
}

@keyframes livePulse {

    0%,
    100% {
        box-shadow: 0 0 0 0 rgba(0, 201, 167, 0.5);
    }

    50% {
        box-shadow: 0 0 0 5px rgba(0, 201, 167, 0);
    }
}

/* ─── FEATURE 97: CHANGELOG MODAL ─── */
#changelogModal {
    position: fixed;
    inset: 0;
    z-index: 8600;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s;
    padding: 16px;
}

#changelogModal.open {
    opacity: 1;
    pointer-events: all;
}

#changelogBox {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 24px;
    padding: 28px;
    max-width: 480px;
    width: 100%;
    max-height: 80vh;
    overflow-y: auto;
    box-shadow: 0 32px 80px rgba(0, 0, 0, 0.6);
    transform: scale(0.95) translateY(-8px);
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

#changelogModal.open #changelogBox {
    transform: scale(1) translateY(0);
}

.cl-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 20px;
}

.cl-title {
    font-size: 1.1rem;
    font-weight: 900;
    color: var(--text);
}

.cl-version {
    font-size: 0.72rem;
    font-weight: 800;
    color: var(--accent);
    background: rgba(220, 38, 38, 0.1);
    padding: 3px 10px;
    border-radius: 50px;
}

.cl-item {
    display: flex;
    gap: 12px;
    padding: 10px 0;
    border-bottom: 1px solid var(--border);
}

.cl-item:last-child {
    border-bottom: none;
}

.cl-emoji {
    font-size: 1.1rem;
    flex-shrink: 0;
}

.cl-desc {
    font-size: 0.84rem;
    color: var(--text-muted);
    line-height: 1.5;
}

.cl-desc strong {
    color: var(--text);
}

/* ─── FEATURE 98: KONAMI CODE RETRO THEME ─── */
[data-theme="retro"] {
    --bg: #001100;
    --bg2: #002200;
    --surface: #003300;
    --card: #004400;
    --card-hover: #005500;
    --border: rgba(0, 255, 0, 0.2);
    --border-hover: rgba(0, 255, 0, 0.5);
    --text: #00ff00;
    --text-muted: rgba(0, 255, 0, 0.6);
    --text-dim: rgba(0, 255, 0, 0.3);
    --accent: #00ff00;
    --accent-glow: rgba(0, 255, 0, 0.2);
    --accent2: #00cc00;
    --nav-bg: rgba(0, 17, 0, 0.92);
}

[data-theme="retro"] * {
    font-family: 'Courier New', monospace !important;
}

[data-theme="retro"] .card {
    border-style: dashed !important;
}

@keyframes scanlines {
    0% {
        transform: translateY(0);
    }

    100% {
        transform: translateY(4px);
    }
}

[data-theme="retro"] body::after {
    content: '';
    position: fixed;
    inset: 0;
    background: repeating-linear-gradient(0deg, rgba(0, 0, 0, 0.15) 0px, rgba(0, 0, 0, 0.15) 1px, transparent 1px, transparent 2px);
    pointer-events: none;
    z-index: 99999;
    animation: scanlines 0.1s linear infinite;
}

/* ─── FEATURE 99: AMBIENT AUDIO TOGGLE ─── */
#audioToggleBtn {
    display: flex;
    align-items: center;
    gap: 6px;
    background: none;
    border: 1px solid var(--border);
    border-radius: 50px;
    padding: 6px 14px;
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--text-muted);
    cursor: pointer;
    transition: all 0.2s;
    -webkit-tap-highlight-color: transparent;
}

#audioToggleBtn:hover,
#audioToggleBtn.playing {
    border-color: var(--accent);
    color: var(--accent);
}

.audio-wave {
    display: flex;
    gap: 2px;
    align-items: center;
    height: 14px;
}

.audio-wave span {
    display: block;
    width: 3px;
    border-radius: 2px;
    background: currentColor;
}

#audioToggleBtn.playing .audio-wave span {
    animation: audioWave 0.6s ease-in-out infinite alternate;
}

#audioToggleBtn.playing .audio-wave span:nth-child(2) {
    animation-delay: 0.1s;
}

#audioToggleBtn.playing .audio-wave span:nth-child(3) {
    animation-delay: 0.2s;
}

@keyframes audioWave {
    from {
        height: 4px;
    }

    to {
        height: 12px;
    }
}

/* ─── FEATURE 100: SETTINGS DRAWER ─── */
#settingsDrawer {
    position: fixed;
    right: 0;
    top: 0;
    bottom: 0;
    width: 300px;
    background: var(--surface);
    border-left: 1px solid var(--border);
    z-index: 8000;
    padding: 24px 20px;
    overflow-y: auto;
    transition: transform 0.35s cubic-bezier(0.25, 1, 0.5, 1), visibility 0.35s;
    box-shadow: -8px 0 40px rgba(0, 0, 0, 0.4);
    transform: translateX(110%);
    visibility: hidden;
}

#settingsDrawer.open {
    transform: translateX(0);
    visibility: visible;
}

.settings-overlay {
    position: fixed;
    inset: 0;
    z-index: 7999;
    background: rgba(0, 0, 0, 0.4);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s;
}

.settings-overlay.open {
    opacity: 1;
    pointer-events: all;
}

.settings-title {
    font-size: 1rem;
    font-weight: 900;
    margin-bottom: 20px;
    color: var(--text);
}

.settings-section {
    margin-bottom: 20px;
}

.settings-label {
    font-size: 0.72rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--text-dim);
    margin-bottom: 8px;
}

.settings-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 0;
    border-bottom: 1px solid var(--border);
    font-size: 0.85rem;
    color: var(--text-muted);
}

.settings-toggle {
    width: 42px;
    height: 24px;
    border-radius: 50px;
    background: var(--border);
    position: relative;
    cursor: pointer;
    transition: background 0.2s;
    flex-shrink: 0;
}

.settings-toggle.on {
    background: var(--accent);
}

.settings-toggle::after {
    content: '';
    position: absolute;
    top: 2px;
    left: 2px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #fff;
    transition: left 0.2s;
}

.settings-toggle.on::after {
    left: 20px;
}


/* ══════════════════════════════════════════════════════
   GLASS THEME FIXES — Force red accent everywhere
   ══════════════════════════════════════════════════════ */

/* 1. Buttons — all red, not white */


/* 2. Nav filter buttons — active state red */


/* 3. Section tabs — active red */

/* 4. Bottom nav — active icon red */



/* 5. All bottom nav icons slightly visible (not pure white dim) */


/* 6. Fav button heart — red fill when active */

/* 7. Upvote / copy / share buttons — red tint hover */

/* 8. Card visit button label in glass — keep gradient */

/* 9. Hero stats — accent red not white */

/* 10. General: wherever --accent is white in glass, use red for interactive elements */


/* ══════════════════════════════════════════════════════
   SEARCH RING — Pulsating thick gradient border
   ══════════════════════════════════════════════════════ */

/* Remove previous glow approach */
@property --sg-angle {
    syntax: '<angle>';
    initial-value: 0deg;
    inherits: false;
}

@keyframes sgSpin {
    to {
        --sg-angle: 360deg;
    }
}

@keyframes sgPulse {

    0%,
    100% {
        opacity: 0.85;
        filter: blur(1px) brightness(1);
    }

    50% {
        opacity: 1;
        filter: blur(0px) brightness(1.3);
    }
}

.search-wrap:focus-within::before {
    content: '';
    position: absolute;
    inset: -3px;
    border-radius: 58px;
    z-index: -1;
    background: conic-gradient(from var(--sg-angle),
            #dc2626 0%,
            #ff6b9d 15%,
            #a855f7 30%,
            #6366f1 45%,
            #22d3ee 60%,
            #10b981 75%,
            #ffd93d 88%,
            #dc2626 100%);
    animation:
        sgSpin 3s linear infinite,
        sgPulse 1.5s ease-in-out infinite;
}

/* Outer soft glow halo */
.search-wrap:focus-within {
    filter: drop-shadow(0 0 12px rgba(168, 85, 247, 0.35)) drop-shadow(0 0 24px rgba(220, 38, 38, 0.2)) !important;
    box-shadow: none !important;
}

/* ══════════════════════════════════════════════════════
   MULTI-SELECT BAR — Move above bottom nav, not over it
   ══════════════════════════════════════════════════════ */

/* On mobile: sit well above the bottom nav */
@media (max-width: 768px) {
    .multi-select-bar {
        bottom: calc(80px + env(safe-area-inset-bottom) + 12px) !important;
        border-radius: 16px !important;
        left: 12px !important;
        right: 12px !important;
        transform: translateX(0) translateY(120%) !important;
        width: auto !important;
    }

    .multi-select-bar.visible {
        transform: translateX(0) translateY(0) !important;
    }
}

/* On desktop: float in top-right as a compact toolbar */
@media (min-width: 769px) {
    .multi-select-bar {
        bottom: auto !important;
        top: 70px !important;
        right: 20px !important;
        left: auto !important;
        transform: translateX(120%) !important;
        border-radius: 16px !important;
    }

    .multi-select-bar.visible {
        transform: translateX(0) !important;
    }
}

/* ══════════════════════════════════════════════════════
   PWA INSTALL BANNER — Mobile only
   ══════════════════════════════════════════════════════ */
@media (min-width: 769px) {
    #pwaInstallBanner {
        display: none !important;
    }
}

/* ══════════════════════════════════════════════════════
   GLASS THEME — Hero title & Surprise Me button red fix
   ══════════════════════════════════════════════════════ */

/* Hero h1 gradient: in glass --accent=#fff making it white, force red gradient */

/* Surprise Me button — force red on glass */

/* General: any button using var(--accent) text in glass = white → force red */

/* ══════════════════════════════════════════════════════
   OFFLINE INDICATOR — Add close button styles
   ══════════════════════════════════════════════════════ */
#offlineIndicator .offline-close {
    margin-left: auto;
    background: none;
    border: none;
    color: inherit;
    font-size: 1rem;
    cursor: pointer;
    opacity: 0.7;
    padding: 0 4px;
    line-height: 1;
}

#offlineIndicator .offline-close:hover {
    opacity: 1;
}

/* ══════════════════════════════════════════════════════
   SCROLL FIX — ensure off-screen fixed elements don't
   capture pointer/scroll events
   ══════════════════════════════════════════════════════ */

/* Multi-select bar: no pointer events when hidden */
.multi-select-bar:not(.visible) {
    pointer-events: none !important;
}

/* Onboarding checklist: no pointer events when off-screen */
#onboardingChecklist:not(.show) {
    pointer-events: none !important;
}

/* Settings drawer: no pointer events when closed */
#settingsDrawer:not(.open) {
    pointer-events: none !important;
}

/* ══════════════════════════════════════════════════════
   GLASS THEME — Hero description links + count = RED
   (Override inline style via !important + high specificity)
   ══════════════════════════════════════════════════════ */

/* Site count "991+" in hero paragraph */

/* @bsky and @setupsai links */

/* Surprise Me button — inline style uses var(--accent) for bg */

/* Manus.AI link in credit line */

/* ══════════════════════════════════════════════════════
   GLASS THEME — Section tabs active state fix
   Active tabs showing as white-on-white → force red
   ══════════════════════════════════════════════════════ */

/* Glass theme nav-btn hover text — ensure visible */

/* Glass active nav btn indicator line */

/* ═══ 25 MOBILE IMPROVEMENTS ═══ */

/* M1: Touch target minimum 44px */
@media (max-width: 768px) {

    .fav-btn,
    .btn-native-share {
        min-width: 44px;
        min-height: 44px;
    }
}

/* M2: Bottom nav smoother transitions */
.bottom-nav a {
    transition: color .2s ease, transform .15s ease;
}

.bottom-nav a:active {
    transform: scale(.92);
}

/* M3: Horizontal strip momentum scrolling  */
@media (max-width: 768px) {
    .dash-strip {
        scroll-padding-left: 20px;
        padding-left: 4px;
        padding-right: 20px;
    }

    .dash-card {
        min-width: 220px;
        max-width: 260px;
    }
}

/* M4: Bottom nav active indicator dot */
.bottom-nav a.active::after {
    content: '';
    position: absolute;
    bottom: 4px;
    left: 50%;
    transform: translateX(-50%);
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: var(--accent);
}

/* M5: Card press feedback */
@media (max-width: 768px) {
    .card:active {
        transform: scale(.98);
        transition: transform .1s;
    }
}

/* M6: Bottom nav icon spacing */
@media (max-width: 768px) {
    .bottom-nav a .nav-label {
        margin-top: 3px;
        font-size: .62rem;
        letter-spacing: .3px;
    }
}

/* M7: Toast above bottom nav on mobile */
@media (max-width: 768px) {
    .toast {
        bottom: 90px !important;
    }
}

/* M8: Card border-radius boost on mobile */
@media (max-width: 768px) {
    .card {
        border-radius: 18px;
    }
}

/* M9: Smooth hero section */
@media (max-width: 768px) {
    .hero {
        transition: opacity .3s ease, transform .3s ease;
    }
}

/* M10: Section tab horizontal scroll */
@media (max-width: 768px) {
    .section-tabs {
        -webkit-overflow-scrolling: touch;
        scroll-snap-type: x mandatory;
    }

    .section-tab {
        scroll-snap-align: start;
        flex-shrink: 0;
    }
}

/* M11: Card action row bigger touch targets */
@media (max-width: 768px) {
    .card-actions {
        gap: 6px;
    }

    .card-actions button,
    .card-actions a {
        padding: 10px 12px;
    }
}

/* M12: Better mobile card spacing */
@media (max-width: 768px) {
    .grid {
        gap: 14px;
        padding: 0 12px;
    }
}

/* M13: Nav button active scale */
.nav-btn:active {
    transform: scale(.95);
    transition: transform .1s;
}

/* M14: Font rendering on mobile */
@media (max-width: 768px) {
    body {
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
    }
}

/* M15: Card shadow on touch */
@media (max-width: 768px) {
    .card:active {
        box-shadow: 0 2px 12px rgba(0, 0, 0, .25);
    }
}

/* M16: Mobile header  blur */
@media (max-width: 768px) {
    .top-bar {
        backdrop-filter: blur(16px) saturate(150%);
        -webkit-backdrop-filter: blur(16px) saturate(150%);
    }
}

/* M17: Smoother grid transitions */
@media (max-width: 768px) {
    .grid {
        transition: opacity .3s ease;
    }
}

/* M18: Mobile badge sizing */
@media (max-width: 768px) {
    .badge {
        font-size: .62rem;
        padding: 3px 7px;
    }
}

/* M19: Better mobile footer */
@media (max-width: 768px) {
    .footer {
        padding: 32px 16px 100px;
    }
}

/* M20: Dashboard greeting on mobile */
@media (max-width: 768px) {
    .dash-greeting {
        margin: 12px 12px;
        padding: 24px 18px 20px;
        border-radius: 16px;
    }

    .dash-greeting h2 {
        font-size: 1.2rem;
    }

    .dash-section {
        padding: 0 12px;
    }
}

/* M21: Better spaced action buttons on mobile */
@media (max-width: 768px) {
    .card-actions {
        flex-wrap: wrap;
    }

    .btn-visit {
        flex: 1;
        justify-content: center;
    }
}

/* M22: Category section mobile padding */
@media (max-width: 768px) {
    .category-section {
        padding: 0 8px;
    }
}

/* M23: Better mobile auth button */
@media (max-width: 768px) {
    #authBtn {
        padding: 6px 12px;
        border-radius: 10px;
    }

    #authBtnLabel {
        max-width: 80px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
}

/* M24: Improved mobile scroll-to-top */
@media (max-width: 768px) {
    .back-top {
        bottom: 90px;
        right: 14px;
        width: 44px;
        height: 44px;
    }

    .back-top svg {
        width: 26px;
        height: 26px;
    }
}

/* M25: Card limits text on mobile */
@media (max-width: 768px) {
    .card-limits.has-limits {
        font-size: .7rem;
        padding: 6px 10px;
        border-radius: 8px;
    }
}

/* ═══════════════════════════════════════════════════════════════════
   M26: GLASS THEME — MOBILE FIX
   Problem: Glass theme renders an opaque red/dark screen on mobile.
   Root cause: background-attachment:fixed is broken on iOS/Android,
   radial-gradient opacities (0.4) are too intense, and heavy
   backdrop-filter on 990+ cards overloads mobile GPU.
   ═══════════════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════════════════
   M26b: HERO PSEUDO-ELEMENT FIX — THE ROOT CAUSE OF RED SCREEN
   .hero::before is width:200% height:200% with red gradients,
   creating a 980px element on mobile that floods the viewport red.
   ═══════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {

    /* Constrain hero and clip its overflow */
    .hero {
        overflow: hidden !important;
        max-width: 100vw !important;
        position: relative !important;
    }

    /* Kill the oversized ::before (was width:200% height:200% top:-50% left:-50%) */
    .hero::before {
        width: 100% !important;
        height: 100% !important;
        top: 0 !important;
        left: 0 !important;
        opacity: 0.25 !important;
        transform: none !important;
    }

    /* ::after gradient overlay also needs constraining */
    .hero::after {
        max-width: 100% !important;
        width: 100% !important;
    }

    /* Glass theme: dim the hero pseudo even further */

    /* Glass theme: ensure hero bg is transparent so body gradient shows */
    }

/* ═══════════════════════════════════════════════════════════════════
   M27: HORIZONTAL OVERFLOW FIX — MOBILE
   Problem: Multiple elements exceed 375px viewport width,
   causing unwanted horizontal scroll on mobile.
   ═══════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {

    /* Nuclear overflow prevention */
    html {
        overflow-x: hidden !important;
        max-width: 100vw !important;
    }

    body {
        overflow-x: hidden !important;
        max-width: 100vw !important;
        width: 100% !important;
    }

    /* Clamp all major containers */
    .main,
    .main-content,
    #mainContent,
    .hero,
    .hero-content,
    .nav-wrap,
    .top-bar,
    .section-tabs,
    .card-grid {
        max-width: 100vw !important;
        overflow-x: hidden !important;
    }

    /* Bottom nav: force full viewport width, no wider */
    .bottom-nav {
        width: 100vw !important;
        max-width: 100vw !important;
        left: 0 !important;
        right: 0 !important;
        overflow-x: hidden !important;
    }

    /* Bottom nav inner container */
    .bottom-nav .nav-inner,
    .bottom-nav>div,
    .bottom-nav>nav {
        max-width: 100% !important;
        display: flex !important;
        justify-content: space-around !important;
        overflow-x: hidden !important;
    }

    /* Hero stats: wrap on small screens */
    .hero-stats {
        gap: 24px !important;
        justify-content: center !important;
    }

    /* Prevent search wrap from exceeding viewport */
    .search-wrap {
        max-width: calc(100vw - 32px) !important;
    }

    /* Category nav filters: allow horizontal scroll but within viewport */
    .nav-filters-wrap,
    #navFilters {
        max-width: 100vw !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
    }

    /* Theme switcher: compact on mobile */
    .theme-switcher {
        max-width: 100% !important;
        flex-shrink: 1 !important;
    }

    /* Top bar: prevent overflow from too many buttons */
    .top-bar {
        flex-wrap: nowrap !important;
        overflow: hidden !important;
    }
}

/* ══════════════════════════════════════════════════════
   M28 — MOBILE PERFORMANCE: content-visibility + containment
   Skips rendering for off-screen cards (991 cards total).
   Dramatically reduces initial paint cost and memory usage.
   ══════════════════════════════════════════════════════ */

/* Each card: skip rendering when off-screen */
@media (max-width: 768px) {
    .card {
        content-visibility: auto;
        contain-intrinsic-size: auto 320px;
    }

    /* Category sections: skip off-screen sections entirely */
    .category-group,
    [data-category-section] {
        content-visibility: auto;
        contain-intrinsic-size: auto 600px;
    }

    /* Contain layout for major containers */
    .main-content,
    .cards-container {
        contain: layout style;
    }
}

/* ═══════════════════ v3.3 — May 2026 Mobile Polish ═══════════════════ */

/* Reduced motion respect — kills decorative animations for users who ask */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
    .ptr-spinner,
    .bn-badge,
    .badge-new {
        animation: none !important;
    }
}

/* Accessible focus rings (keyboard users on mobile w/ external KB) */
@media (max-width: 768px) {
    a:focus-visible,
    button:focus-visible,
    [role="button"]:focus-visible,
    input:focus-visible {
        outline: 2px solid #ff4444;
        outline-offset: 2px;
        border-radius: 8px;
    }
}

/* Card description: bump to 4 lines on tablet-sized phones (≥430px) for more info-density */
@media (min-width: 430px) and (max-width: 768px) {
    .card-desc {
        -webkit-line-clamp: 4 !important;
    }
}

/* Extra-small phone optimization (<360px) — iPhone SE 1st gen, older Androids */
@media (max-width: 360px) {
    .hero {
        padding: 70px 12px 24px;
    }
    .hero h1 {
        font-size: clamp(1.25rem, 6.2vw, 1.7rem) !important;
        line-height: 1.15;
    }
    .card {
        padding: 14px 12px;
        border-radius: 12px;
    }
    .card-name {
        font-size: .92rem;
    }
    /* .section-tab base styling consolidated into index.html inline <style>
       (this ≤360 override was dead — the inline rules win by source order). */
    .nav-btn {
        padding: 6px 11px;
        font-size: .72rem;
    }
    .bottom-nav a {
        font-size: .54rem;
    }
}

/* Fresh-this-week rail — featured strip at top of main on mobile */
.fresh-rail {
    margin: 0 auto 24px;
    max-width: 1280px;
    padding: 0 16px;
    animation: fadeUp .5s ease both;
}

.fresh-rail-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 12px;
}

.fresh-rail-title {
    font-size: 1.05rem;
    font-weight: 800;
    color: var(--text);
    display: flex;
    align-items: center;
    gap: 8px;
}

.fresh-rail-title .pulse-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #ff4444;
    box-shadow: 0 0 0 0 rgba(255, 68, 68, .6);
    animation: freshPulse 2s ease-in-out infinite;
}

@keyframes freshPulse {
    0%,
    100% { box-shadow: 0 0 0 0 rgba(255, 68, 68, .6); }
    50%  { box-shadow: 0 0 0 8px rgba(255, 68, 68, 0); }
}

.fresh-rail-sub {
    font-size: .78rem;
    color: var(--text-muted);
    margin-left: auto;
}

.fresh-rail-scroll {
    display: flex;
    gap: 12px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding: 4px 4px 12px;
}

.fresh-rail-scroll::-webkit-scrollbar {
    display: none;
}

.fresh-card {
    flex: 0 0 240px;
    scroll-snap-align: start;
    background: var(--card, #181818);
    border: 1px solid var(--border, #2a2a2a);
    border-radius: 14px;
    padding: 14px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    text-decoration: none;
    color: inherit;
    position: relative;
    transition: transform .15s ease, border-color .2s, box-shadow .2s;
    -webkit-tap-highlight-color: transparent;
}

.fresh-card:hover,
.fresh-card:focus-visible {
    transform: translateY(-2px);
    border-color: rgba(220, 38, 38, .5);
    box-shadow: 0 6px 24px rgba(220, 38, 38, .15);
}

.fresh-card:active {
    transform: scale(.98);
}

.fresh-card-top {
    display: flex;
    align-items: center;
    gap: 10px;
}

.fresh-card-favicon {
    width: 28px;
    height: 28px;
    border-radius: 6px;
    background: var(--surface, #0e0e0e);
    flex-shrink: 0;
}

.fresh-card-name {
    font-size: .95rem;
    font-weight: 700;
    color: var(--text);
    line-height: 1.2;
    margin: 0;
}

.fresh-card-cat {
    font-size: .65rem;
    font-weight: 700;
    color: var(--accent, #ff4444);
    text-transform: uppercase;
    letter-spacing: .6px;
}

.fresh-card-desc {
    font-size: .78rem;
    color: var(--text-muted);
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin: 0;
}

.fresh-card-badge {
    position: absolute;
    top: 10px;
    right: 10px;
    background: linear-gradient(135deg, #dc2626, #ff4444);
    color: #fff;
    font-size: .58rem;
    font-weight: 800;
    padding: 2px 7px;
    border-radius: 50px;
    letter-spacing: .5px;
    text-transform: uppercase;
}

@media (max-width: 480px) {
    .fresh-card {
        flex: 0 0 220px;
        padding: 12px;
    }
    .fresh-rail-sub {
        display: none;
    }
}

/* Better safe-area handling — covers landscape notch */
@media (max-width: 1024px) and (orientation: landscape) {
    body {
        padding-left: env(safe-area-inset-left);
        padding-right: env(safe-area-inset-right);
    }
}

/* Tap area for share button — was sometimes too small */
@media (max-width: 768px) {
    .card-share-btn {
        min-height: 36px;
    }
}