/**
 * Discover Page Styles
 * recreateme.ai
 */

/* Mobile-only elements: hidden on desktop, shown via media query */
.mobile-only { display: none !important; }

/* ============ LAYOUT ============ */
@media (min-width: 769px) {
    body:has(.discover-app) {
        overflow: hidden;
    }
}

.discover-app {
    display: flex;
    flex-direction: column;
}

/* Desktop: fixed viewport, inner scroll.
   Header fixed-positioning + scroll container padding-top is handled
   globally in style.css (applies to all app variants except studio). */
@media (min-width: 769px) {
    .discover-app {
        height: 100vh;
        overflow: hidden;
    }
    .discover-scroll-container {
        flex: 1;
        overflow-y: auto;
    }
}

/* Mobile: body scrolls naturally (Safari bar minimization) */
@media (max-width: 768px) {
    body:has(.discover-app) {
        overflow: visible !important;
        height: auto !important;
    }
    .discover-app {
        height: auto;
        overflow: visible;
    }
    .discover-scroll-container {
        overflow-y: visible;
    }
}

.discover-main {
    padding: 1.5rem clamp(16px, 1.25vw, 32px);
    margin: 0 auto;
    width: 100%;
}

.discover-app .header {
    max-width: none;
}

.discover-app .header > .header-left,
.discover-app .header > .header-center,
.discover-app .header > .header-right {
    max-width: 1400px;
}

.discover-app .header-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    max-width: none;
    margin: 0;
    /* Matches .discover-main padding so the logo's left edge aligns with the
       leftmost card, and the user menu's right edge aligns with the last card. */
    padding: 0 clamp(16px, 1.25vw, 32px);
    height: 100%;
    position: relative;
}

.discover-app .header-left {
    z-index: 2;
    /* Explicit override — base .header-left in style.css has padding-left: 2rem
       which would otherwise push the logo 2rem past our aligned card edge. */
    padding-left: 0;
}

.discover-app .header-right {
    z-index: 2;
}

.discover-app .header-center {
    z-index: 1;
}

/* ============ MAIN NAVIGATION TABS ============ */

.main-nav-container {
    margin-bottom: 24px;
}

/* .main-nav-tabs / .main-nav-tab styling lives in style.css (single source of
   truth). Keeping this file focused on page-specific layout. */

/* ============ TOP BAR (Filters + Search) ============ */

.discover-top-bar {
    display: flex;
    align-items: flex-end;
    gap: 16px;
    margin-bottom: 24px;
}
/* Add this to fix search container alignment */
.discover-top-bar .search-container {
    margin-bottom: 0;
}
.filter-tabs {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
}

.filter-tabs.hidden {
    display: none;
}

.filter-divider {
    width: 1px;
    height: 24px;
    background: var(--border);
    margin: 0 4px;
}

.filter-tab {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 8px 12px;
    min-width: 100px;
    background: transparent;
    border: none;
    border-radius: var(--radius-md);
    color: var(--text-secondary);
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
    transition: all var(--transition);
    white-space: nowrap;
}

.filter-tab:hover {
    color: var(--text);
    background: var(--bg-hover);
}

.filter-tab.active {
    background: var(--bg-elevated);
    color: var(--text);
    box-shadow: var(--shadow-sm);
}

.filter-tab svg {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

/* Replace .time-select (lines 183-197) with: */
.time-select {
    padding: 8px 28px 8px 12px;
    background: var(--bg-elevated);
    border: none;
    border-radius: var(--radius-md);
    color: var(--text);
    font-size: 0.875rem;
    cursor: pointer;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%23888' viewBox='0 0 24 24'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M19 9l-7 7-7-7'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 8px center;
    background-size: 16px 16px; /* ADD THIS - fixes the flying arrow */
    flex-shrink: 0;
    width: auto;
    transition: none; /* ADD THIS - prevents unwanted transitions */
}

.time-select:focus {
    outline: none;
}

/* ============ CUSTOM DROPDOWNS ============ */
.custom-dropdown {
    position: relative;
    display: inline-block;
}

.dropdown-trigger {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    min-width: 110px;
    justify-content: center;
    background: transparent;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    color: var(--text-secondary);
    font-size: 0.8125rem;
    font-weight: 500;
    cursor: pointer;
    transition: all var(--transition);
    white-space: nowrap;
}

.dropdown-trigger:hover {
    background: var(--bg-hover);
}

.dropdown-trigger svg:last-child {
    color: var(--text-secondary);
    transition: transform 0.2s ease;
}

.custom-dropdown.open .dropdown-trigger svg:last-child {
    transform: rotate(180deg);
}

.dropdown-label {
    color: var(--text);
}

.dropdown-menu {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    min-width: 160px;
    /* Frosted recipe — matches .card-tag / .overlay-btn for unified popup language. */
    background: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-lg);
    z-index: 1000;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
    transition: all 0.15s ease;
    overflow: hidden;
}

.custom-dropdown.open .dropdown-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.dropdown-option {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 10px 14px;
    background: none;
    border: none;
    text-align: left;
    color: rgba(255, 255, 255, 0.85);
    font-size: 0.875rem;
    cursor: pointer;
    transition: all var(--transition);
}

.dropdown-option:hover {
    background: rgba(255, 255, 255, 0.25);
    color: #ffffff;
}

.dropdown-option.active {
    color: #ffffff;
    background: rgba(255, 255, 255, 0.15);
}

.dropdown-option .check-icon {
    margin-left: auto;
    opacity: 0;
    color: var(--accent);
}

.dropdown-option.active .check-icon {
    opacity: 1;
}

.dropdown-option svg:first-child {
    color: var(--text-secondary);
    flex-shrink: 0;
}

.dropdown-option:hover svg:first-child,
.dropdown-option.active svg:first-child {
    color: var(--text);
}

/* Search Header (shown when searching) */
.search-header {
    display: flex;
    align-items: center;
    gap: 12px;
}

.search-header.hidden {
    display: none;
}

.back-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: 50%;
    color: var(--text);
    cursor: pointer;
    transition: all 0.2s;
    flex-shrink: 0;
}

.back-btn:hover {
    background: var(--bg-hover);
    border-color: var(--text-muted);
}

.search-results-label {
    font-size: 1rem;
    font-weight: 600;
    color: var(--text);
    white-space: nowrap;
}

/* Search Container - right side */
.search-container {
    position: relative;
    width: 321px;
    flex-shrink: 0;
    margin-left: auto;
}

.search-wrapper {
    position: relative;
    display: flex;
    align-items: center;
}

.search-icon {
    position: absolute;
    left: 12px;
    color: var(--text-muted);
    pointer-events: none;
}

.search-input {
    width: 100%;
    height: 38px;
    padding: 0 32px 0 38px;
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: 19px;
    color: var(--text);
    font-size: 0.875rem;
    transition: all 0.2s;
}

.search-input:focus {
    outline: none;
    border-color: var(--accent);
    background: var(--bg-elevated);
}

.search-input::placeholder {
    color: var(--text-muted);
}

.search-clear {
    position: absolute;
    right: 6px;
    background: none;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    padding: 4px;
    display: flex;
    border-radius: 50%;
}

.search-clear:hover {
    color: var(--text);
    background: var(--bg-hover);
}

.search-clear.hidden {
    display: none;
}

/* Suggestions Dropdown */
.search-suggestions {
    position: absolute;
    top: calc(100% + 4px);
    right: 0;
    width: 300px;
    /* Frosted recipe — unified popup language. */
    background: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border-radius: 12px;
    box-shadow: var(--shadow-lg);
    z-index: 1000;
    max-height: 320px;
    overflow-y: auto;
    opacity: 1;
    visibility: visible;
    transition: opacity 0.15s ease, visibility 0.15s;
    will-change: backdrop-filter;
}

/* Override global .hidden { display: none } for this specific element so the
   dropdown stays in the render tree (keeps backdrop-filter warm, no blur
   delay when re-opening the search). */
.search-suggestions.hidden {
    display: block;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

/* ============ GRID ============ */
/* Masonry CSS (column vars, .masonry-active rules) lives in style.css under
   .masonry-grid so /profile and /creations can share it. Here we just set
   the CSS grid fallback for pre-hydration and non-masonry modes. */
.discover-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: var(--masonry-gap, 12px);
    will-change: transform;
}

/* ============ SHIMMER LOADING ============ */

.shimmer-card {
    aspect-ratio: 1;
    border-radius: var(--radius-lg);
    overflow: hidden;
}

.shimmer-card .loading-skeleton {
    width: 100%;
    height: 100%;
}

/* Two shimmer placeholder cards (tall 4:5 + square 1:1) rendered as direct
   children of `.discover-grid` so they pick up the exact same column width
   as real `.discover-card`s — guaranteed identical sizing. Inner structure
   mirrors a real card (.card-image + .card-footer with avatar / username /
   stats) and uses the shared `.loading-skeleton` shimmer from style.css,
   same one the /app collections page uses. */
.discover-loading-card {
    background: var(--bg-elevated);
    border-radius: var(--radius-lg);
    overflow: hidden;
    border: 1px solid var(--border);
    /* Without this, grid items stretch to the tallest sibling's height,
       leaving empty space below the shorter (1:1) card's footer that looks
       like an oversized footer. Pin to top so each card hugs its content. */
    align-self: start;
}
.discover-loading-card.discover-loading-card-tall .card-image { aspect-ratio: 4 / 5; }
.discover-loading-card.discover-loading-card-square .card-image { aspect-ratio: 1 / 1; }
.discover-loading-card .card-image > .loading-skeleton {
    width: 100%;
    height: 100%;
    border-radius: 0;
}
.discover-loading-card .card-avatar .loading-skeleton {
    width: 100%;
    height: 100%;
    border-radius: 50%;
}
.discover-loading-card .card-username-skel {
    width: 84px;
    height: 10px;
    border-radius: 4px;
}
.discover-loading-card .card-stat-skel {
    width: 26px;
    height: 12px;
    border-radius: 4px;
}

/* ============ CARD ============ */

.discover-card {
    background: var(--bg-elevated);
    border-radius: var(--radius-lg);
    overflow: hidden;
    border: 1px solid var(--border);
    cursor: pointer;
    contain: layout style paint;
}

/* ---- Frosted-glass compositing budget ----
   Each frosted card element (.overlay-btn, .card-tag, .card-more-menu) pins a
   GPU compositing layer (backdrop-filter + will-change). On discover's unbounded
   feed the live-layer count climbed with every batch until per-frame Layerize
   stalled scroll ("chunky after a batch loads"). observeFrostCards() in
   discover.js tags only cards near the viewport `.frosted-live`; every other
   card drops its blur layers via the rule below. The frosted overlays are hidden
   until card hover and you can only hover an on-screen (therefore live) card, so
   the look is identical — only off-screen idle layers go away. (Profile never
   hit this because its per-tab grids stay small.) */
.discover-card:not(.frosted-live) .overlay-btn,
.discover-card:not(.frosted-live) .card-tag,
.discover-card:not(.frosted-live) .card-tag-more,
.discover-card:not(.frosted-live) .card-more-menu {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    will-change: auto;
}

/* DISCOVER SEARCH  */

/* ============ SEARCH ============ */
.search-container {
    position: relative;
    margin-bottom: 20px;
    max-width: 480px;
}

.search-wrapper {
    position: relative;
    display: flex;
    align-items: center;
}

.search-icon {
    position: absolute;
    left: 14px;
    color: var(--text-muted);
    pointer-events: none;
}

.search-input {
    width: 100%;
    padding: 12px 40px 12px 44px;
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: 24px;
    color: var(--text);
    font-size: 0.9375rem;
    transition: all 0.2s;
}

.search-input:focus {
    outline: none;
    border-color: var(--accent);
    background: var(--bg-elevated);
}

.search-input::placeholder {
    color: var(--text-muted);
}

.search-clear {
    position: absolute;
    right: 12px;
    background: none;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    padding: 4px;
    display: flex;
    border-radius: 50%;
}

.search-clear:hover {
    color: var(--text);
    background: var(--bg-hover);
}

.card-image {
    position: relative;
    overflow: clip;
    background: var(--bg-secondary);
    /* Fallback aspect so cards don't collapse on pages that haven't run the
       masonry packer yet. The packer sets inline height which wins over this. */
    aspect-ratio: 1;
}
.card-image:has(.card-more-menu.open) {
    overflow: visible;
}

/* Collection cards keep the 2x2 preview at 1:1. They still sit in the masonry
   grid but the packer treats them as 1:1 aspect, so this matches. */
.collection-type-card .card-image {
    aspect-ratio: 1;
}

.card-image img {
    display: block;
    width: 100%;
    height: 100%;
    /* Default: contain — full image visible, never cropped. */
    object-fit: contain;
}

/* Ultra-wide cards (ratio > 3:2) are clamped to 3:2 by the masonry packer
   and marked with data-clamped. Zoom-crop their images via cover so they
   fill the 3:2 frame instead of sitting letterboxed. Only affects cards
   that were explicitly wider than 3:2 — narrower ones stay on `contain`. */
.discover-card[data-clamped] .card-image img {
    object-fit: cover;
}

.card-overlay {
    position: absolute;
    inset: 0;
    background: transparent;
    /* Parent stays at opacity: 1 permanently. Each child .overlay-btn does
       its OWN opacity fade on card hover. Reason: when a parent transitions
       opacity 0→1, Chrome discards and rebuilds the children's backdrop-
       filter compositing layers, which is the visible blur lag. Keeping the
       parent always "on" pins the children's GPU layers. */
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    justify-content: flex-end;
    padding: 12px;
    pointer-events: none;
    z-index: 4;
}

.card-overlay .overlay-btn {
    pointer-events: auto;
}

.overlay-btn {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    /* Frosted-glass recipe matching .card-tag. Hover inverts dark→light. */
    background: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: none;
    outline: none;  /* kill browser default focus ring that clips against frosted edge */
    color: #ffffff;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    /* Button itself owns the fade-in on card hover. Parent .card-overlay
       stays at opacity: 1 so this element is always painted — its backdrop-
       filter compositing layer is never torn down. No `transform: translateZ`
       here: Chromium has a known issue where transform + backdrop-filter on
       the same element disables the filter. `will-change` alone is enough to
       get the layer pre-promoted. */
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s, background 0.2s, color 0.2s;
    will-change: backdrop-filter, opacity;
}

@media (hover: hover) {
    .discover-card:hover .overlay-btn {
        opacity: 1;
        pointer-events: auto;
    }
}

.overlay-btn:hover {
    background: rgba(255, 255, 255, 0.25);
    color: #ffffff;
}

.card-footer {
    padding: 10px 14px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.card-user {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

.card-avatar {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--bg-secondary);
    color: var(--text-secondary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    font-weight: 600;
    flex-shrink: 0;
    overflow: hidden;
}

.card-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.card-avatar svg {
    width: 100%;
    height: 100%;
}

.card-username {
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.card-stats {
    display: flex;
    align-items: center;
    gap: 8px;
}

.stat-btn {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 4px 8px;
    background: transparent;
    border: none;
    color: var(--text-secondary);
    font-size: 0.8125rem;
    cursor: pointer;
    border-radius: var(--radius-sm);
    transition: all var(--transition);
    -webkit-tap-highlight-color: transparent;
}

@media (hover: hover) {
    .stat-btn:hover {
        background: var(--bg-hover);
        color: var(--text);
    }
}

.stat-btn.liked {
    color: #e53935;
}

.stat-btn.liked svg {
    fill: #e53935;
    stroke: #e53935;
}

/* ============ LOADING & EMPTY STATES ============ */

.discover-loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 80px 20px;
    gap: 16px;
    color: var(--text-secondary);
}

.discover-loading:not(.hidden) {
    display: flex !important;
    min-height: 300px;
}

.loading-spinner {
    width: 32px;
    height: 32px;
    border: 3px solid var(--border);
    border-top-color: var(--accent);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

.discover-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 80px 20px;
    text-align: center;
}

.discover-empty .empty-icon {
    font-size: 3rem;
    margin-bottom: 16px;
    opacity: 0.5;
}

.discover-empty h3 {
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--text);
    margin-bottom: 8px;
    text-transform: none;
    letter-spacing: normal;
}

.discover-empty p {
    color: var(--text-secondary);
    margin-bottom: 24px;
}

.scroll-sentinel {
    display: flex;
    justify-content: center;
    padding: 32px 0;
    min-height: 1px;
}

.scroll-spinner {
    width: 28px;
    height: 28px;
    border: 3px solid var(--border);
    border-top-color: var(--accent);
    border-radius: 50%;
    animation: spin 0.7s linear infinite;
}

/* ============ DETAIL MODAL ============ */

/* Disable backdrop-filter on the detail modal's backdrop so the
   recreate panel slide-in doesn't have to re-blur the page behind every
   frame. Other modals (login, share, etc.) keep their blur via the
   default `.modal-backdrop` rule in style.css. */
#detail-modal .modal-backdrop {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

.detail-modal-content {
    /* Make modal-content the positioning context for the absolutely-
       positioned `.detail-collection-panel` inside it (rather than letting
       the panel resolve up to `.detail-modal-wrapper`). The wrapper is auto-
       sized from its children so its bounds jitter sub-pixel per frame as
       max-width and padding-right transition; pinning the panel to modal-
       content's bounds gives the panel children a stable containing block,
       so the collection options slide as one rigid unit instead of re-
       painting individually. /p/ has the same fix via .public-container. */
    position: relative;
    display: flex;
    flex-direction: row;
    width: fit-content;
    max-width: min(95vw, 1100px);
    max-height: 90vh;
    padding: 0;
    overflow: hidden auto;
    background: var(--bg-elevated);
    border-radius: var(--radius-xl);
    border: 1px solid var(--border);
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
    transition: max-width 0.3s ease, padding-right 0.3s ease;
}

.detail-modal-content:has(.detail-collection-panel.open) {
    max-width: min(95vw, 1440px);
    padding-right: 340px;
}

.modal-close {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: white;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 20;
    transition: all var(--transition);
}

.modal-close:hover {
    background: rgba(0, 0, 0, 0.7);
}

.detail-layout {
    display: grid;
    grid-template-columns: 1fr 420px;
    max-height: 90vh;
    flex: 1;
    min-width: 0;
}

.detail-image-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: var(--bg-secondary);
    padding: 12px;
    position: relative;
    overflow: hidden;
}

.detail-image-container img {
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 85vh;
    object-fit: contain;
    border-radius: var(--radius-md);
    transition: filter 0.2s ease-out;
}

/* Desktop only: size the detail image by its container (which the JS open
   flow pre-sizes to the FULL image's display box) instead of the image's
   intrinsic pixels, so the 800px progressive thumb and the full-res image
   render at the SAME size -- no "minimised then grow" jump. Mirrors the
   studio .output-display img fix. Scoped to :not(.wide-layout) because only
   the normal layout sets a fixed px grid column; wide-layout keeps its own
   max-height rule and mobile (<=768px) keeps intrinsic sizing. object-fit:
   contain still preserves aspect (letterboxes if needed). */
@media (min-width: 769px) {
    .detail-layout:not(.wide-layout) .detail-image-container img {
        width: 100%;
        height: 100%;
    }
}

/* Blur-up: while showing the 800px thumb, softly blur it. Cleared the
   instant the full-resolution image replaces it. Kept subtle since the
   thumb is already high quality. */
.detail-image-container img.is-thumb {
    filter: blur(4px);
}

.detail-info {
    padding: 16px 20px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    border-left: 1px solid var(--border);
    overflow-y: auto;
    min-height: 0;
    background: var(--bg-elevated);
}

.detail-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--border);
}

.detail-user {
    display: flex;
    align-items: center;
    gap: 12px;
}

.detail-user .user-avatar {
    width: 46px;
    height: 46px;
    border-radius: 50%;
    background: var(--bg-secondary);
    color: var(--text-muted);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.125rem;
    font-weight: 600;
    overflow: hidden;
}

.detail-user .user-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.detail-user .user-avatar svg {
    width: 100%;
    height: 100%;
}

.detail-user .user-info {
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.detail-user .user-name {
    display: inline;
    font-weight: 600;
    font-size: 1rem;
    color: var(--text);
    max-width: none;
    overflow: visible;
    white-space: normal;
    text-overflow: unset;
}

.detail-user .post-time {
    font-size: 0.8125rem;
    color: var(--text-muted);
}

/* More menu (3-dot) in modal header — hidden on desktop since the card
   hamburger menu already provides these actions. Kept on mobile where
   hover-to-reveal doesn't work. */
.detail-more-wrapper {
    position: relative;
    flex-shrink: 0;
}

@media (min-width: 769px) {
    .detail-more-wrapper {
        display: none;
    }
}

.detail-more-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    background: none;
    border: none;
    border-radius: var(--radius-md);
    color: var(--text-secondary);
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
}

.detail-more-btn:hover {
    background: var(--bg-hover);
    color: var(--text);
}

.detail-more-menu {
    position: absolute;
    top: calc(100% + 4px);
    right: 0;
    /* Frosted recipe — unified popup language. */
    background: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border-radius: var(--radius-md);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
    z-index: 200;
    /* Edge-to-edge items (see .card-more-menu comment). */
    overflow: hidden;
    min-width: 180px;
    /* Opacity-based show/hide to keep backdrop-filter warm (see .card-more-menu). */
    opacity: 0;
    visibility: hidden;
    transform: translateY(-4px);
    pointer-events: none;
    transition: opacity 0.12s ease, visibility 0.12s, transform 0.12s ease;
    will-change: backdrop-filter;
}

.detail-more-menu.open {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    pointer-events: auto;
}

.detail-more-item {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 10px 12px;
    background: none;
    border: none;
    /* No border-radius: edge-to-edge hover fill, clipped by parent. */
    color: #ffffff;
    font-size: 0.8125rem;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.15s;
    white-space: nowrap;
}

.detail-more-item:hover {
    background: rgba(255, 255, 255, 0.25);
}

.detail-more-item.delete {
    color: #f87171;
}

.detail-more-item svg {
    flex-shrink: 0;
}

/* Inline reaction badge between header and prompt */
.detail-reaction-badge {
    display: flex;
    align-items: center;
    gap: 2px;
    min-height: 0;
}

.detail-reaction-badge:empty {
    display: none;
}

.detail-reaction-badge .badge-emoji {
    font-size: 1.5rem;
    line-height: 1;
}

.detail-prompt-section {
    display: flex;
    flex-direction: column;
    gap: 8px;
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
}

.detail-prompt-section label {
    font-size: 0.6875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--text-muted);
    flex-shrink: 0;
}

.detail-prompt {
    padding: 10px 12px;
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    font-size: 0.875rem;
    line-height: 1.6;
    color: var(--text);
    min-height: 40px;
    flex: 1 1 auto;
    overflow-y: auto;
}

.detail-meta {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px;
    flex-shrink: 0;
}

.meta-item {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 6px 10px;
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
}

.meta-item label {
    font-size: 0.5625rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--text-muted);
}

.meta-item span {
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--text);
}

.meta-collection-link {
    text-decoration: none;
    color: inherit;
    cursor: pointer;
    transition: border-color 0.15s;
}

.meta-collection-link:hover {
    border-color: var(--accent);
}

.meta-collection-link span {
    color: var(--accent);
}

/* When collection is shown, use 3-column grid */
.detail-meta:has(.meta-collection-link:not(.hidden)) {
    grid-template-columns: 1fr 1fr 1fr;
}

.detail-cta {
    display: flex;
    gap: 10px;
    padding-top: 14px;
    border-top: 1px solid var(--border);
    margin-top: auto;
    flex-shrink: 0;
}

.detail-cta .btn-primary {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 16px;
    font-weight: 600;
}

.detail-cta .btn-primary.recreate-btn {
    background: var(--accent);
    border: none;
    color: var(--bg) !important;
}

.detail-cta .btn-primary.recreate-btn svg {
    stroke: var(--bg) !important;
}

.recreate-btn svg {
    stroke: var(--bg) !important;
}

button.recreate-btn {
    color: var(--bg) !important;
}

.detail-cta .btn-primary.recreate-btn:hover {
    background: var(--accent-hover);
}

/* Dot separator removed in favor of a count pill — `.recreate-btn span`
   targets only the count span (the divider span has its own class) so the
   `<span>{{ count }}</span>` directly inside the button reads as a metric
   chip next to the action label, mirroring the GitHub Star/Watch/Fork
   pattern. Subtle white tint on the dark-accent button (light mode) and
   subtle dark tint on the white-accent button (dark mode) keeps the pill
   readable without overpowering the primary CTA. */
.recreate-btn .recreate-divider {
    display: none;
}

.recreate-btn > span:not(.recreate-divider) {
    background: rgba(255, 255, 255, 0.18);
    padding: 2px 9px;
    border-radius: 10px;
    font-size: 0.8125rem;
    font-weight: 600;
    line-height: 1.4;
}

[data-theme="dark"] .recreate-btn > span:not(.recreate-divider) {
    background: rgba(0, 0, 0, 0.12);
}

.detail-cta .like-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 12px 16px;
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    color: var(--text);
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
    transition: all var(--transition);
    -webkit-tap-highlight-color: transparent;
}

@media (hover: hover) {
    .detail-cta .like-btn:hover {
        background: var(--bg-hover);
        border-color: var(--text-muted);
    }
}

.detail-cta .like-btn.liked {
    color: #e53935;
    border-color: rgba(229, 57, 53, 0.3);
    background: rgba(229, 57, 53, 0.1);
}

.detail-cta .like-btn.liked svg {
    fill: #e53935;
}

/* ============ SHARE DROPDOWN ============ */

.share-btn-wrapper {
    position: relative;
}

.detail-cta .share-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 12px 14px;
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    color: var(--text);
    cursor: pointer;
    transition: all var(--transition);
}

.detail-cta .share-btn:hover {
    background: var(--bg-hover);
    border-color: var(--text-muted);
}

.share-dropdown {
    position: absolute;
    bottom: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%) translateY(4px);
    /* Frosted recipe — unified popup language. */
    background: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border-radius: var(--radius-md);
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.3);
    min-width: 150px;
    /* Edge-to-edge items. */
    overflow: hidden;
    z-index: 100;
    /* Opacity-based show/hide to keep backdrop-filter warm. */
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.15s ease, visibility 0.15s, transform 0.15s ease;
    will-change: backdrop-filter;
}

.share-dropdown.open {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
    pointer-events: auto;
}

.detail-cta .share-dropdown {
    left: auto;
    right: 0;
    transform: none;
    animation: shareDropInRight 0.15s ease;
}

@keyframes shareDropInRight {
    from { opacity: 0; transform: translateY(4px); }
    to { opacity: 1; transform: translateY(0); }
}

.share-dropdown-item {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 7px 10px;
    background: none;
    border: none;
    /* No border-radius: edge-to-edge hover fill, clipped by parent. */
    color: #ffffff;
    font-size: 0.8125rem;
    font-weight: 500;
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.15s ease;
}

.share-dropdown-item:hover {
    background: rgba(255, 255, 255, 0.25);
}

@keyframes shareDropIn {
    from {
        opacity: 0;
        transform: translateX(-50%) translateY(4px);
    }
    to {
        opacity: 1;
        transform: translateX(-50%) translateY(0);
    }
}

/* ============ COLLECTION PANEL (inline, like share panel) ============ */

.detail-collection-panel {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 340px;
    background: var(--bg-elevated);
    border-left: 1px solid var(--border);
    transform: translateX(100%);
    /* visibility (not display) so transform actually animates;
       delayed on close so the panel stays visible during slide-out. */
    transition: transform 0.3s ease, visibility 0s 0.3s;
    display: flex;
    visibility: hidden;
    flex-direction: column;
    z-index: 15;
    will-change: transform;
}

.detail-collection-panel.open {
    transform: translateX(0);
    visibility: visible;
    transition: transform 0.3s ease, visibility 0s 0s;
}

.collection-panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 22px 20px 6px 20px;
    min-height: 73px;
    flex-shrink: 0;
    min-width: 260px;
    position: relative;
}

.collection-panel-header::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 20px;
    right: 20px;
    height: 1px;
    background: var(--border);
}

.collection-panel-title {
    display: flex;
    align-items: center;
    gap: 8px;
}

.collection-panel-back {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    background: transparent;
    border: none;
    border-radius: var(--radius-sm);
    color: var(--text-muted);
    cursor: pointer;
    transition: all var(--transition);
}

.collection-panel-back:hover {
    color: var(--text);
    background: var(--bg-hover);
}

.collection-panel-header h3 {
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--text);
    margin: 0;
    white-space: nowrap;
    text-transform: none;
    letter-spacing: normal;
}


.collection-panel-body {
    padding: 12px 14px;
    display: flex;
    flex-direction: column;
    gap: 0;
    overflow: hidden;
    flex: 1;
    min-width: 260px;
    min-height: 0;
}

.collection-panel-footer {
    padding: 14px 14px 20px 14px;
    flex-shrink: 0;
    min-width: 260px;
    margin-top: auto;
    position: relative;
}

.collection-panel-footer::before {
    content: '';
    position: absolute;
    top: 0;
    left: 20px;
    right: 20px;
    height: 1px;
    background: var(--border);
}

.collection-new-btn {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 13px 17px 12px 17px;
    font-weight: 600;
    border-radius: var(--radius-md);
}

.collection-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
    overflow-y: auto;
    flex: 1;
    min-height: 0;
    -webkit-overflow-scrolling: touch;
    will-change: scroll-position;
}

.collection-option {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 10px 14px 10px 11px;
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: border-color var(--transition), background var(--transition);
    text-align: left;
    width: 100%;
    flex-shrink: 0;
    contain: layout style;
}

.collection-option:hover {
    background: var(--bg-hover);
    border-color: var(--text-muted);
}


.collection-option-preview {
    width: 72px;
    height: 72px;
    border-radius: var(--radius-sm);
    overflow: hidden;
    background: var(--bg);
    flex-shrink: 0;
}

.collection-option-preview img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.preview-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-muted);
    font-size: 1.25rem;
}

.collection-option-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.collection-option-name {
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.collection-option-studio {
    font-size: 0.8125rem;
    color: var(--text-secondary);
}

.collection-empty {
    padding: 40px 20px;
    text-align: center;
    color: var(--text-secondary);
}


.collection-loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 48px 20px;
    flex: 1;
    gap: 16px;
    color: var(--text-muted);
}

.recreate-stat {
    display: flex;
    align-items: center;
    gap: 4px;
    color: var(--text-secondary);
    font-size: 13px;
}

.recreate-stat svg {
    stroke: var(--text-secondary);
    transition: stroke var(--transition);
}

.recreate-stat:hover svg {
    stroke: var(--text);
}

/* ============ USER MENU (matching app.js style) ============ */

.user-avatar {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    background: var(--bg-secondary);
    color: var(--text-secondary);
    border-radius: 50%;
    font-size: 0.75rem;
    font-weight: 600;
    overflow: hidden;
}

.user-avatar svg {
    width: 100%;
    height: 100%;
}

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

.user-name {
    font-size: 0.8125rem;
    font-weight: 500;
    max-width: 100px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.user-menu {
    position: relative;
    margin-right: 0.5rem;
}

.user-btn {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.25rem 0.625rem;
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    color: var(--text);
    cursor: pointer;
    transition: all var(--transition);
}

.user-btn:hover {
    background: var(--bg-hover);
    border-color: var(--text-muted);
}

.user-avatar {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    background: var(--bg-secondary);
    color: var(--text-secondary);
    border-radius: 50%;
    font-size: 0.75rem;
    font-weight: 600;
    overflow: hidden;
}

.user-name {
    font-size: 0.8125rem;
    font-weight: 500;
    max-width: 100px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.user-btn .user-name {
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--text);
}

.user-chevron {
    color: var(--text-secondary);
    transition: transform 0.2s ease;
}

.user-menu.open .user-chevron {
    transform: rotate(180deg);
}

.user-dropdown {
    position: absolute;
    top: calc(100% + 0.5rem + 2.5px);
    right: 0;
    min-width: 180px;
    /* Matches the navigation bar's frosted glass recipe (theme-adaptive). */
    background: var(--header-glass-bg);
    backdrop-filter: blur(28px) saturate(200%);
    -webkit-backdrop-filter: blur(28px) saturate(200%);
    border: 1px solid var(--header-glass-border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-lg);
    z-index: 1000;
    overflow: hidden;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
    transition: all 0.15s ease;
    will-change: backdrop-filter;
}

.user-menu.open .user-dropdown {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}


.user-info {
    padding: 0.625rem 0.875rem;
}

.user-email {
    font-size: 0.75rem;
    color: var(--text-secondary);
}

.user-dropdown .user-info {
    padding: 12px 16px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.user-dropdown .user-email {
    font-size: 0.8125rem;
    color: rgba(255, 255, 255, 0.7);
}

.user-dropdown .user-name {
    color: #ffffff;
}

.dropdown-divider {
    height: 1px;
    background: var(--border);
}

.dropdown-item {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 10px 16px;
    background: none;
    border: none;
    text-align: left;
    color: var(--text-secondary);
    font-size: 0.875rem;
    cursor: pointer;
    text-decoration: none;
    transition: all var(--transition);
}

.dropdown-item:hover {
    /* Nav-bar-style theme-adaptive hover (matches header's own tabs). */
    background: var(--bg-hover);
    color: var(--text);
}

.dropdown-item svg {
    color: var(--text-secondary);
}

/* ============ BUTTONS ============ */

.btn-sm {
    padding: 6px 14px;
    font-size: 0.8125rem;
}

.btn-spinner {
    width: 16px;
    height: 16px;
    border: 2px solid currentColor;
    border-top-color: transparent;
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
    display: inline-block;
}

a.card-user {
    text-decoration: none;
    color: inherit;
}
a.card-user:hover {
    opacity: 0.8;
}

.detail-username-link {
    color: var(--text);
    text-decoration: none;
    font-weight: 600;
}
.detail-username-link:hover {
    opacity: 0.8;
}

.detail-user-link {
    text-decoration: none;
    color: inherit;
    display: flex;
    align-items: center;
    gap: 12px;
}
.detail-user-link:hover {
    opacity: 0.8;
}
/* Toast — all styles in style.css */

/* ============ RESPONSIVE ============ */

@media (max-width: 768px) {
    .discover-app .header {
        position: sticky;
        top: 0;
        z-index: 100;
    }

    .discover-app .header-left {
        padding-left: 0;
    }

    .discover-main {
        padding: 16px;
    }

    .main-nav-tabs {
        width: 100%;
        justify-content: center;
    }

    .main-nav-tab {
        flex: 1;
        justify-content: center;
        padding: 10px 12px;
        font-size: 0.8125rem;
    }
    
    /* Top bar mobile - stack vertically */
    .mobile-only {
        display: flex !important;
    }

    .discover-top-bar {
        flex-direction: column;
        align-items: stretch;
        gap: 12px;
    }

    .discover-top-bar .search-container {
        order: -1;
    }
    
    .filter-tabs {
        flex-wrap: nowrap;
        width: 100%;
        gap: 0;
        background: var(--bg-secondary);
        border-radius: var(--radius-lg);
        padding: 3px;
    }

    /* Hide Featured and Collections tabs on mobile — they live in the More dropdown */
    .filter-tab.feed-filter[data-feed="featured"],
    .filter-tab.feed-filter[data-feed="collections"] {
        display: none;
    }

    .filter-tab {
        flex: 1;
        flex-shrink: 0;
        padding: 8px 4px;
        min-width: 0;
        border-radius: var(--radius-md);
        font-size: 0.75rem;
        gap: 4px;
    }

    .filter-tab svg {
        width: 14px;
        height: 14px;
        flex-shrink: 0;
    }

    .filter-text {
        display: inline;
    }

    .filter-tab.feed-filter {
        border: none;
    }

    .filter-tab.feed-filter:not(.active) {
        background: transparent;
    }

    .filter-tab.feed-filter:not(.active):hover {
        background: var(--bg-hover);
        border-color: transparent;
    }

    /* More dropdown button */
    .filter-more-wrapper {
        display: flex;
        position: relative;
        flex: 1;
    }

    .filter-more-btn {
        width: 100%;
    }

    .filter-more-btn svg {
        display: block;
    }

    .filter-more-dropdown {
        position: absolute;
        top: calc(100% + 6px);
        right: 0;
        min-width: 160px;
        /* Frosted recipe — unified popup language. */
        background: rgba(0, 0, 0, 0.7);
        backdrop-filter: blur(8px);
        -webkit-backdrop-filter: blur(8px);
        border-radius: var(--radius-md);
        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
        z-index: 100;
        overflow: hidden;
        /* Opacity-based show/hide to keep backdrop-filter warm. */
        opacity: 0;
        visibility: hidden;
        transform: translateY(-4px);
        pointer-events: none;
        transition: opacity 0.12s ease, visibility 0.12s, transform 0.12s ease;
        will-change: backdrop-filter;
    }

    .filter-more-dropdown.open {
        opacity: 1;
        visibility: visible;
        transform: translateY(0);
        pointer-events: auto;
    }

    .filter-more-option {
        display: flex;
        align-items: center;
        gap: 8px;
        width: 100%;
        padding: 10px 12px;
        background: none;
        border: none;
        /* No border-radius: edge-to-edge hover fill. */
        color: #ffffff;
        font-size: 0.8125rem;
        font-weight: 500;
        cursor: pointer;
        transition: background 0.15s;
    }

    .filter-more-option:hover {
        background: rgba(255, 255, 255, 0.25);
    }

    .filter-more-option svg {
        display: block;
        width: 16px;
        height: 16px;
        flex-shrink: 0;
    }

    .filter-tab.feed-filter.active {
        background: var(--accent);
        color: var(--bg);
        border-color: transparent;
    }

    .filter-divider {
        display: none;
    }
    
    .search-container {
        width: 100%;
        margin-left: 0;
    }

    /* 16px minimum on inputs to prevent iOS auto-zoom — see also end-of-file override */
    .search-input {
        font-size: 16px;
    }

    .search-suggestions {
        width: 100%;
        max-width: none;
        left: 0;
        right: 0;
        transform: none;
    }

    .search-header {
        width: 100%;
        height: auto;
    }
    
    .search-results-label {
        font-size: 0.9rem;
    }
    
    .discover-grid {
        grid-template-columns: 1fr;
        gap: 12px;
    }
    
    /* Modal: fullscreen fixed overlay on mobile — prevents Safari navbar scroll */
    .detail-modal-content {
        position: fixed !important;
        inset: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        max-height: none !important;
        height: 100% !important;
        border-radius: 0 !important;
        overflow: hidden !important;
        margin: 0 !important;
    }

    .detail-layout {
        grid-template-columns: 1fr;
        height: 100%;
        max-height: 100%;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior: contain;
    }

    .detail-info {
        border-left: none;
        border-top: 1px solid var(--border);
        padding: 16px;
        overflow: visible !important;
        overflow-y: visible !important;
    }

    .detail-prompt-section {
        overflow: visible !important;
        flex: 0 0 auto;
        min-height: 60px;
    }

    .detail-prompt {
        max-height: 200px;
        overflow-y: auto;
    }

    .detail-header {
        padding-bottom: 8px;
    }

    /* Hide desktop dropdown menu on mobile */
    .detail-more-menu {
        display: none !important;
    }

    /* Mobile bottom sheet for three-dot menu */
    .detail-mobile-sheet {
        display: none;
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        background: var(--bg-elevated);
        border-radius: 16px 16px 0 0;
        border-top: 1px solid var(--border);
        z-index: 1000;
        padding: 8px 8px calc(env(safe-area-inset-bottom, 0px) + 12px);
        box-shadow: 0 -4px 24px rgba(0, 0, 0, 0.3);
    }

    .detail-mobile-sheet.open {
        display: block;
    }

    .detail-mobile-sheet .detail-more-item {
        display: flex;
        align-items: center;
        gap: 10px;
        width: 100%;
        padding: 14px 16px;
        background: none;
        border: none;
        border-radius: var(--radius-sm);
        color: var(--text);
        font-size: 0.9375rem;
        font-weight: 500;
        cursor: pointer;
    }

    .detail-mobile-sheet .detail-more-item.delete {
        color: var(--error, #ef4444);
    }

    .detail-mobile-sheet .detail-more-item svg {
        flex-shrink: 0;
    }

    .detail-menu-backdrop {
        display: none;
        position: absolute;
        inset: 0;
        background: rgba(0, 0, 0, 0.4);
        z-index: 999;
    }

    .detail-menu-backdrop.open {
        display: block;
    }

    .detail-user .user-avatar {
        width: 36px;
        height: 36px;
        font-size: 0.875rem;
        flex-shrink: 0;
    }

    .detail-user .user-info {
        min-width: 0;
        flex: 1;
        display: flex !important;
        flex-direction: column;
        overflow: visible !important;
    }

    .detail-user .user-name {
        display: inline !important;
        font-size: 0.875rem !important;
        font-weight: 600 !important;
        max-width: none !important;
        overflow: visible !important;
        white-space: normal !important;
        color: var(--text) !important;
        text-overflow: unset !important;
    }

    .detail-user .user-name-row {
        display: flex !important;
        gap: 8px;
        overflow: visible !important;
    }

    .follow-btn-pill {
        padding: 3px 10px;
        font-size: 0.6875rem;
        flex-shrink: 0;
    }

    .detail-image-container {
        padding: 0;
        background: transparent;
        border-radius: 0;
    }

    .detail-image-container img {
        /* Inherit max-height: calc(85vh - 24px) from base rule so the whole
           image fits at its natural aspect (matches generations modal). */
        border-radius: 0;
        width: 100%;
        height: auto;
        object-fit: contain;
    }
    
    .detail-modal-content:has(.detail-collection-panel.open) {
        padding-right: 0;
        padding-bottom: 0;
    }

    .detail-collection-panel {
        top: auto;
        right: 0;
        bottom: 0;
        left: 0;
        width: 100% !important;
        border-left: none;
        border-top: 1px solid var(--border);
        border-radius: 16px 16px 0 0;
        height: 50vh;
        transform: translateY(100%);
        transition: transform 0.3s ease, visibility 0s 0.3s;
        display: flex;
        visibility: hidden;
        z-index: 20;
    }

    .detail-collection-panel.open {
        width: 100% !important;
        transform: translateY(0);
        visibility: visible;
        transition: transform 0.3s ease, visibility 0s 0s;
    }

    .collection-panel-header {
        padding: 14px 14px 6px 14px;
        min-height: auto;
    }

    .collection-panel-header::after {
        left: 14px;
        right: 14px;
    }

    .collection-panel-header h3 {
        font-size: 1rem;
    }

    .collection-panel-body {
        padding: 8px 10px;
    }

    .collection-panel-footer {
        padding: 10px 10px 16px 10px;
    }

    .collection-panel-footer::before {
        left: 14px;
        right: 14px;
    }

    /* Back button arrow points down on mobile (panel slides from bottom) */
    .collection-panel-back svg {
        transform: rotate(-90deg);
    }

    /* Image viewer: allow native pinch-to-zoom on mobile */
    .image-viewer-container {
        overflow: auto;
        -webkit-overflow-scrolling: touch;
    }

    .image-viewer-img {
        max-width: 100vw;
        max-height: 100vh;
        cursor: default;
        touch-action: manipulation;
    }

    .image-viewer-hint,
    .image-viewer-zoom-level {
        display: none;
    }

    .detail-cta {
        flex-direction: row;
        gap: 6px;
        padding-bottom: 16px;
    }

    .detail-cta .btn-primary.recreate-btn {
        flex: 1;
        padding: 10px 8px;
        font-size: 0.8125rem;
        gap: 4px;
        min-width: 0;
    }

    .detail-cta .btn-primary.recreate-btn svg {
        width: 16px;
        height: 16px;
        flex-shrink: 0;
    }

    .detail-cta .recreate-btn .recreate-divider,
    .detail-cta .recreate-btn #detail-recreate-count {
        display: none;
    }

    .detail-cta .bookmark-btn,
    .detail-cta .like-btn,
    .detail-cta .share-btn {
        padding: 10px;
        justify-content: center;
        width: 44px;
        height: 44px;
        flex-shrink: 0;
    }

    .detail-cta .bookmark-btn svg,
    .detail-cta .like-btn svg,
    .detail-cta .share-btn svg {
        width: 22px;
        height: 22px;
        flex-shrink: 0;
    }

    .detail-cta .bookmark-btn span,
    .detail-cta .like-btn span {
        display: none;
    }

    /* Card adjustments for tablet */
    .card-footer {
        padding: 10px 14px;
    }

    .card-avatar {
        width: 26px;
        height: 26px;
    }

    .card-username {
        font-size: 0.8rem;
    }
}

@media (max-width: 480px) {
    .card-footer {
        padding: 10px 12px;
    }

    .card-avatar {
        width: 24px;
        height: 24px;
        font-size: 0.6875rem;
    }

    .card-username {
        font-size: 0.75rem;
    }

    .stat-btn {
        padding: 4px 8px;
        font-size: 0.75rem;
        min-height: 32px;
    }

    .main-nav-tab {
        padding: 8px 10px;
    }

    /* detail-modal-content already fullscreen from 768px breakpoint */

    .collection-preview-content {
        width: 100vw !important;
    }

    /* Search container responsive */
    .search-container {
        width: 100%;
        max-width: none;
    }

    .search-suggestions {
        width: 100%;
        max-width: none;
        left: 0;
        right: 0;
        transform: none;
    }

    /* Better touch targets */
    .overlay-btn {
        width: 44px;
        height: 44px;
    }

    .dropdown-option {
        padding: 10px 12px;
        min-height: 44px;
    }
}

/* ============ HIDDEN UTILITY ============ */

.hidden {
    display: none !important;
}

/* ============ MOBILE MENU ITEM ACTIVE STATE ============ */

.mobile-menu-item.active {
    background: var(--bg-hover);
    color: var(--text);
}


.delete-overlay-btn {
    /* Frosted red. Kept distinctly red on hover (not inverted to the tag's
       light-white) so the danger semantic stays obvious. */
    background: rgba(220, 38, 38, 0.7) !important;
}

.delete-overlay-btn:hover {
    background: rgba(220, 38, 38, 0.9) !important;
}

/* ============ THREE-DOT MORE MENU ON CARDS ============ */

.card-overlay {
    gap: 6px;
}

.card-more-wrapper {
    position: relative;
    pointer-events: auto;
}

.card-more-menu {
    /* --menu-shift is set by adjustCardMenuPosition() in common.js when the
       menu would otherwise spill past the card's bottom onto the footer.
       Defaults to 0. The shift is baked into the same transform that runs
       the open animation so motion + positioning don't fight each other. */
    --menu-shift: 0px;
    position: absolute;
    right: calc(100% + 8px);
    top: 0;
    /* Frosted recipe — unified popup language. */
    background: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border-radius: var(--radius-md);
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.3);
    min-width: 140px;
    /* No inner padding + overflow hidden so items can fill the full cell
       edge-to-edge (matches .dropdown-menu's date-filter pattern). */
    overflow: hidden;
    z-index: 100;
    /* Opacity-based show/hide (not display) so the element stays in the
       render tree and backdrop-filter stays warm — prevents the 100-500ms
       blur delay when the menu reopens. */
    opacity: 0;
    visibility: hidden;
    transform: translateX(4px) translateY(var(--menu-shift));
    pointer-events: none;
    transition: opacity 0.12s ease, visibility 0.12s, transform 0.12s ease;
    will-change: backdrop-filter;
}

.collection-type-card .collection-preview-grid {
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    overflow: hidden;
}

.card-more-menu.open {
    opacity: 1;
    visibility: visible;
    transform: translateX(0) translateY(var(--menu-shift));
    pointer-events: auto;
}

@keyframes menuFadeIn {
    from { opacity: 0; transform: translateX(4px); }
    to { opacity: 1; transform: translateX(0); }
}

.card-more-item {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 8px 12px;
    background: none;
    border: none;
    /* No border-radius: hover tint fills the cell edge-to-edge, clipped by
       the parent .card-more-menu's overflow:hidden + rounded corners. */
    color: #ffffff;
    /* Strip default anchor styling so <a class="card-more-item"> (used for
       Open-in-new-tab) renders identically to <button class="card-more-item">.
       Without this, anchors get blue text + underline + visited-purple by
       browser default. */
    text-decoration: none;
    font-size: 0.8125rem;
    font-weight: 500;
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.15s ease;
}
a.card-more-item:visited,
a.card-more-item:hover,
a.card-more-item:focus {
    color: #ffffff;
    text-decoration: none;
}

.card-more-item:hover {
    background: rgba(255, 255, 255, 0.25);
}

.card-more-item.delete {
    color: #f87171;
}

.card-more-item svg {
    flex-shrink: 0;
    color: rgba(255, 255, 255, 0.7);
}

/* ============ EDIT TAGS MODAL ============ */

.edit-tags-modal-content {
    max-width: 420px;
    width: 90vw;
    padding: 24px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.edit-tags-modal-content h3 {
    font-size: 1rem;
    font-weight: 600;
    color: var(--text);
    margin: 0;
}

.edit-tags-wrapper {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    padding: 10px 12px;
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    min-height: 44px;
    align-items: center;
    align-content: flex-start;
    cursor: text;
}

.edit-tags-wrapper:focus-within {
    border-color: var(--accent);
}

.edit-tags-pills {
    display: contents;
}

.edit-tags-wrapper .tag-pill {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 8px;
    background: var(--bg-hover);
    border: 1px solid var(--border);
    border-radius: 10px;
    font-size: 0.75rem;
    color: var(--text);
}

.edit-tags-wrapper .tag-remove {
    background: none;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    font-size: 0.875rem;
    padding: 0 2px;
    line-height: 1;
}

.edit-tags-wrapper .tag-remove:hover {
    color: var(--text);
}

.edit-tags-wrapper input {
    flex: 1;
    min-width: 80px;
    background: none;
    border: none;
    outline: none;
    color: var(--text);
    font-size: 0.875rem;
    padding: 4px 0;
}

.edit-tags-hint {
    font-size: 0.75rem;
    color: var(--text-muted);
    margin: 0;
    transition: color 0.2s;
}

.edit-tags-hint.tags-error {
    color: #e53935;
}

.edit-tags-actions {
    display: flex;
    gap: 8px;
    justify-content: flex-end;
}

.report-modal-subtitle {
    font-size: 0.8125rem;
    color: var(--text-muted);
    margin: 0;
}

.report-reasons {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.report-reason-btn {
    padding: 6px 14px;
    font-size: 0.8125rem;
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: 20px;
    color: var(--text);
    cursor: pointer;
    transition: all 0.15s ease;
}

.report-reason-btn:hover {
    border-color: var(--text-muted);
}

.report-reason-btn.selected {
    background: #ef4444;
    border-color: #ef4444;
    color: #fff;
}

.report-textarea {
    width: 100%;
    margin-top: 12px;
    padding: 10px 12px;
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    color: var(--text);
    font-size: 0.875rem;
    font-family: inherit;
    line-height: 1.5;
    resize: vertical;
    min-height: 80px;
}

.report-textarea:focus {
    outline: none;
    border-color: var(--accent);
}

.report-submit-btn {
    background: #ef4444 !important;
}

.report-submit-btn:hover {
    background: #dc2626 !important;
}

.delete-modal-text {
    font-size: 0.875rem;
    color: var(--text-muted);
    margin: 0;
    line-height: 1.5;
}

/* Uniform button sizing inside modal action rows */
.modal-actions button {
    flex: 1;
    padding: 12px 16px !important;
    font-size: 0.875rem !important;
    font-weight: 500;
    border-radius: var(--radius-md);
    cursor: pointer;
}

.btn-danger {
    background: #ef4444;
    color: #fff;
    border: none;
    border-radius: var(--radius-md);
    cursor: pointer;
    font-weight: 500;
}

.btn-danger:hover {
    background: #dc2626;
}

.detail-actions {
    display: flex;
    gap: 8px;
    margin-right: 32px; /* Add space to avoid overlap with modal close button */
}


/* ============ CARD TAGS (hover overlay) ============ */
.card-tags {
    position: absolute;
    bottom: 8px;
    left: 8px;
    right: 8px;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    opacity: 0;
    transform: translateY(8px);
    transition: opacity 0.2s, transform 0.2s;
    pointer-events: none;
    z-index: 2;
}

@media (hover: hover) {
    .card-image:hover .card-tags {
        opacity: 1;
        transform: translateY(0);
        pointer-events: auto;
    }
}

@media (hover: none) {
    .card-tags {
        opacity: 1;
        transform: translateY(0);
        pointer-events: auto;
    }
}

.card-tag {
    display: inline-block;
    padding: 4px 10px;
    background: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    color: rgba(255, 255, 255, 0.9);
    border-radius: 12px;
    font-size: 11px;
    font-weight: 500;
    transition: background 0.2s, color 0.2s;
    cursor: pointer;
}

.card-tag:hover {
    background: rgba(255, 255, 255, 0.25);
    color: white;
}

.card-tag-more {
    display: inline-block;
    padding: 4px 8px;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    color: rgba(255, 255, 255, 0.7);
    border-radius: 12px;
    font-size: 11px;
}

/* ============ DETAIL MODAL TAGS (in info panel) ============ */
.detail-tags-section {
    display: flex;
    flex-direction: column;
    gap: 6px;
    flex-shrink: 0;
}

.detail-tags-section.hidden {
    display: none;
}

.detail-tags-section label {
    font-size: 0.625rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--text-muted);
}

.detail-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.detail-tag {
    display: inline-block;
    padding: 4px 10px;
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    color: var(--text-secondary);
    border-radius: 12px;
    font-size: 0.75rem;
    font-weight: 500;
    transition: background 0.2s, color 0.2s, border-color 0.2s;
    cursor: pointer;
    text-decoration: none;
}

.detail-tag:hover {
    background: var(--bg-hover);
    border-color: var(--text-muted);
    color: var(--text);
    text-decoration: none;
}


/* ============ FEED TABS ============ */
.filter-divider {
    width: 1px;
    height: 24px;
    background: var(--border);
    margin: 0 4px;
    align-self: center;
}

.filter-tab.feed-filter {
    border: 1px solid var(--border);
}

.filter-tab.feed-filter.active {
    background: var(--accent);
    color: var(--bg);
    box-shadow: none;
    border-color: var(--accent);
}

.filter-tab.feed-filter:not(.active) {
    background: var(--bg-elevated);
    color: var(--text-secondary);
}

.filter-tab.feed-filter:not(.active):hover {
    color: var(--text);
    background: var(--bg-hover);
    border-color: var(--text-muted);
}

/* ============ FOLLOW BUTTON ============ */
.follow-btn {
    padding: 8px 20px;
    background: var(--accent);
    border: none;
    border-radius: 20px;
    color: white;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
}

.follow-btn:hover {
    opacity: 0.9;
}

.follow-btn.following {
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    color: var(--text-secondary);
}

.follow-btn.following:hover {
    border-color: #e74c3c;
    color: #e74c3c;
}

.follow-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Detail header with follow button */
.detail-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/* ============ REMOVE FOCUS OUTLINES ============ */
.detail-modal-content *:focus {
    outline: none;
}

.detail-modal-content button:focus,
.detail-modal-content .btn-primary:focus,
.detail-modal-content .like-btn:focus,
.detail-modal-content .recreate-btn:focus,
.detail-modal-content .user-avatar:focus {
    outline: none;
    box-shadow: none;
}


/* ============ BOOKMARKS ============ */

.bookmark-overlay-btn {
    background: rgba(0, 0, 0, 0.6) !important;
}

.bookmark-overlay-btn.bookmarked {
    color: var(--accent) !important;
}

.bookmark-overlay-btn.bookmarked svg {
    fill: var(--accent);
    stroke: var(--accent);
}

/* Bookmark button - card */
.stat-btn.bookmarked {
    color: var(--accent);
}

.stat-btn.bookmarked svg {
    fill: var(--accent);
    stroke: var(--accent);
}

/* Recreate button - card (highlighted when current user has already recreated) */
.stat-btn.recreate-stat.recreated {
    color: var(--accent);
}

.stat-btn.recreate-stat.recreated svg {
    stroke: var(--accent);
}

/* Bookmark button - modal */
.detail-cta .bookmark-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 12px 16px;
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    color: var(--text);
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
    transition: all var(--transition);
    -webkit-tap-highlight-color: transparent;
}

@media (hover: hover) {
    .detail-cta .bookmark-btn:hover {
        background: var(--bg-hover);
        border-color: var(--text-muted);
    }
}

.detail-cta .bookmark-btn.bookmarked {
    color: var(--accent);
    border-color: var(--accent);
    background: rgba(var(--accent-rgb), 0.1);
}

.detail-cta .bookmark-btn.bookmarked svg {
    fill: var(--accent);
}


/* ============ FOLLOW BUTTON PILL (Modal) ============ */
.user-name-row {
    display: flex;
    align-items: center;
    gap: 12px;
}

.follow-btn-pill {
    padding: 4px 12px;
    background: transparent;
    border: 1px solid var(--border);
    border-radius: 20px;
    color: var(--text-secondary);
    font-size: 0.75rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
}

.follow-btn-pill:hover {
    border-color: var(--accent);
    color: var(--accent);
    background: rgba(99, 102, 241, 0.08);
}

.follow-btn-pill.following {
    background: var(--bg-secondary);
    border-color: var(--border);
    color: var(--text-muted);
}

.follow-btn-pill.following:hover {
    border-color: #e74c3c;
    color: #e74c3c;
    background: rgba(231, 76, 60, 0.08);
}

.follow-btn-pill:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}


/* ============ REACTION BADGE & PICKER ============ */

/* Wrapper around modal content — allows badge to poke out */
.detail-modal-wrapper {
    position: relative;
}

/* Badge half-in/half-out at top-right of modal — stacked emojis */
.modal-reaction-badge {
    position: absolute;
    top: -14px;
    right: 125px;
    display: flex;
    align-items: center;
    z-index: 30;
    filter: drop-shadow(0 2px 6px rgba(0,0,0,0.4));
    pointer-events: none;
}
.modal-reaction-badge .badge-emoji {
    font-size: 2rem;
    line-height: 1;
    position: relative;
}
.modal-reaction-badge .badge-emoji:nth-child(1) { z-index: 5; }
.modal-reaction-badge .badge-emoji:nth-child(2) { z-index: 4; }
.modal-reaction-badge .badge-emoji:nth-child(3) { z-index: 3; }
.modal-reaction-badge .badge-emoji:nth-child(4) { z-index: 2; }
.modal-reaction-badge .badge-emoji:nth-child(5) { z-index: 1; }
.modal-reaction-badge .badge-emoji + .badge-emoji {
    margin-left: -18px;
}

/* Floating emoji animation on click */
@keyframes emoji-float {
    0% {
        opacity: 1;
        transform: translateY(0) translateX(0) scale(1);
    }
    15% {
        transform: translateY(-30px) translateX(8px) scale(1.15);
    }
    30% {
        transform: translateY(-60px) translateX(-6px) scale(1.1);
    }
    50% {
        opacity: 0.85;
        transform: translateY(-100px) translateX(10px) scale(1.05);
    }
    70% {
        transform: translateY(-140px) translateX(-8px) scale(1);
    }
    100% {
        opacity: 0;
        transform: translateY(-190px) translateX(5px) scale(0.9);
    }
}
.emoji-float-anim {
    position: fixed;
    font-size: 2rem;
    pointer-events: none;
    z-index: 9999;
    animation: emoji-float 1.6s ease-out forwards;
    line-height: 1;
    will-change: transform, opacity;
}

/* Badge on grid cards — top-right of image, stacked */
.reaction-badge {
    position: absolute;
    top: 6px;
    right: 6px;
    display: flex;
    align-items: center;
    z-index: 3;
    filter: drop-shadow(0 2px 4px rgba(0,0,0,0.3));
    pointer-events: none;
}
.reaction-badge .badge-emoji {
    font-size: 1.4rem;
    line-height: 1;
    position: relative;
}
.reaction-badge .badge-emoji:nth-child(1) { z-index: 5; }
.reaction-badge .badge-emoji:nth-child(2) { z-index: 4; }
.reaction-badge .badge-emoji:nth-child(3) { z-index: 3; }
.reaction-badge .badge-emoji:nth-child(4) { z-index: 2; }
.reaction-badge .badge-emoji:nth-child(5) { z-index: 1; }
.reaction-badge .badge-emoji + .badge-emoji {
    margin-left: -12px;
}

/* Emoji picker overlay at bottom of image in modal */
.image-reaction-overlay {
    position: absolute;
    bottom: 16px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 4px;
    padding: 6px 12px;
    background: rgba(0, 0, 0, 0.55);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border-radius: 24px;
    opacity: 0;
    transition: opacity 0.2s;
    z-index: 5;
}
.detail-image-container:hover .image-reaction-overlay {
    opacity: 1;
}

.reaction-emoji {
    font-size: 1.5rem;
    cursor: pointer;
    padding: 2px 4px;
    border-radius: 8px;
    transition: transform 0.15s, background 0.15s;
    line-height: 1;
    user-select: none;
    opacity: 0.85;
}
.reaction-emoji:hover {
    transform: scale(1.25);
    opacity: 1;
}
.reaction-emoji.active {
    transform: scale(1.2);
    opacity: 1;
    background: rgba(255, 255, 255, 0.2);
}

/* Image-overlay badge variant — hidden on desktop (wrapper badge handles desktop) */
.modal-reaction-badge.image-badge {
    display: none;
}

@media (max-width: 768px) {
    /* Hide the wrapper badge on mobile (it lives outside the scroll area) */
    .detail-modal-wrapper > .modal-reaction-badge:not(.image-badge) {
        display: none !important;
    }
    /* Pill chip that sits ON the divider line between .detail-header and
       .detail-prompt-section. Negative margins pull it up onto the header's
       bottom border and tighten the gap below. Solid bg masks the border
       where the pill overlaps it. */
    .modal-reaction-badge.image-badge {
        display: flex;
        position: relative;
        align-self: flex-end;
        margin-top: -26px;
        margin-bottom: -8px;
        padding: 4px 12px;
        background: var(--bg-elevated);
        border: 1px solid var(--border);
        border-radius: 999px;
        box-shadow: 0 1px 4px rgba(0, 0, 0, 0.15);
        z-index: 1;
        top: auto;
        right: auto;
        left: auto;
        transform: none;
        filter: none;
        pointer-events: auto;
        align-items: center;
    }
    .modal-reaction-badge .badge-emoji {
        font-size: 1.6rem;
    }
    .image-reaction-overlay {
        bottom: 10px;
        gap: 2px;
        padding: 5px 10px;
    }
    .reaction-emoji {
        font-size: 1.25rem;
    }
}

/* Suggestions Dropdown */
.search-suggestions {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: 12px;
    box-shadow: var(--shadow-lg);
    z-index: 100;
    max-height: 320px;
    overflow-y: auto;
}

.suggestion-section {
    padding: 8px 0;
}

.suggestion-section:not(:last-child) {
    border-bottom: 1px solid var(--border);
}

.suggestion-header {
    padding: 6px 14px;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.suggestion-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    color: var(--text);
    cursor: pointer;
    transition: background 0.15s;
}

.suggestion-item:hover {
    background: var(--bg-hover);
}

.suggestion-tag {
    color: var(--accent);
    font-weight: 500;
}

.suggestion-username {
    color: var(--text);
    font-weight: 500;
}

.suggestion-count {
    margin-left: auto;
    font-size: 0.75rem;
    color: var(--text-muted);
}

.suggestion-avatar {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    overflow: hidden;
    background: var(--bg-secondary);
    color: var(--text-muted);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    font-weight: 600;
    flex-shrink: 0;
}

/* Active Search Pill */
.search-active {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px 8px 16px;
    background: var(--accent);
    color: white;
    border-radius: 20px;
    font-size: 0.875rem;
    font-weight: 500;
    margin-bottom: 16px;
}

.search-active-clear {
    display: flex;
    align-items: center;
    gap: 4px;
    background: rgba(255,255,255,0.2);
    border: none;
    color: white;
    padding: 4px 8px;
    border-radius: 12px;
    cursor: pointer;
    font-size: 0.75rem;
}

.search-active-clear:hover {
    background: rgba(255,255,255,0.3);
}

/* Clickable Tags in Cards */
.card-tag {
    cursor: pointer;
}

.card-tag:hover {
    background: rgba(255, 255, 255, 0.35);
    color: white;
}

.detail-tag {
    cursor: pointer;
}

.detail-tag:hover {
    background: var(--accent);
    border-color: var(--accent);
    color: var(--bg);
}

/* ============ ACTIVE SEARCH STATE ============ */
.search-active-container {
    margin-bottom: 20px;
}

.search-active-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 12px;
}

.back-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: 50%;
    color: var(--text);
    cursor: pointer;
    transition: all 0.2s;
    flex-shrink: 0;
}

.back-btn:hover {
    background: var(--bg-hover);
    border-color: var(--text-muted);
}

.search-wrapper-active {
    flex: 1;
    max-width: 480px;
}

.search-active-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    background: var(--accent);
    color: white;
    border-radius: 20px;
    font-size: 0.875rem;
    font-weight: 500;
}

/* Hide main search when in active search mode */
.search-container.hidden-for-active {
    display: none;
}


/* ======== TOP CREATORS GRID */

/* ============ TOP CREATORS GRID ============ */
.creator-card {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 16px 20px;
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    cursor: pointer;
    transition: all 0.2s;
}

.creator-card:hover {
    border-color: var(--text-muted);
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

.creator-rank {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--text-muted);
    min-width: 36px;
}

.creator-rank:nth-child(1) { color: #FFD700; }

.creator-card:nth-child(1) .creator-rank { color: #FFD700; }
.creator-card:nth-child(2) .creator-rank { color: #C0C0C0; }
.creator-card:nth-child(3) .creator-rank { color: #CD7F32; }

.creator-avatar {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    overflow: hidden;
    flex-shrink: 0;
}

.creator-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.creator-avatar-placeholder {
    width: 100%;
    height: 100%;
    background: var(--accent);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    font-weight: 600;
}

.creator-info {
    flex: 1;
    min-width: 0;
}

.creator-name {
    font-size: 1rem;
    font-weight: 600;
    color: var(--text);
    margin-bottom: 4px;
}

.creator-stats {
    display: flex;
    gap: 16px;
}

.creator-stat {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 0.8125rem;
    color: var(--text-secondary);
}

.creator-stat svg {
    opacity: 0.7;
}

.creator-follow-btn {
    padding: 8px 20px;
    background: var(--accent);
    border: none;
    border-radius: 20px;
    color: white;
    font-size: 0.8125rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
    flex-shrink: 0;
}

.creator-follow-btn:hover {
    opacity: 0.9;
}

.creator-follow-btn.following {
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    color: var(--text-secondary);
}

.creator-follow-btn.following:hover {
    border-color: #e74c3c;
    color: #e74c3c;
}

/* ============ TOP CREATORS - CARD WITH IMAGE ============ */
.creator-card-wrapper {
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    overflow: hidden;
}

.creator-card-wrapper:hover {
    border-color: var(--text-muted);
}

.creator-header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    cursor: pointer;
    transition: background 0.2s;
}

.creator-header:hover {
    background: var(--bg-hover);
}

.creator-card-wrapper .discover-card {
    border: none;
    border-radius: 0;
    border-top: 1px solid var(--border);
}

.creator-card-wrapper .card-footer {
    padding: 10px 14px;
}

.creator-rank {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--text-muted);
    min-width: 32px;
}

.creator-card-wrapper:nth-child(1) .creator-rank { color: #FFD700; }
.creator-card-wrapper:nth-child(2) .creator-rank { color: #C0C0C0; }
.creator-card-wrapper:nth-child(3) .creator-rank { color: #CD7F32; }

.creator-avatar {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    overflow: hidden;
    flex-shrink: 0;
}

.creator-avatar-placeholder {
    width: 100%;
    height: 100%;
    background: var(--accent);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    font-weight: 600;
}

.creator-info {
    flex: 1;
    min-width: 0;
}

.creator-name {
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--text);
    margin-bottom: 2px;
}

.creator-stats {
    display: flex;
    gap: 12px;
}

.creator-stat {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 0.75rem;
    color: var(--text-secondary);
}

.creator-stat svg {
    opacity: 0.7;
}

.creator-follow-btn {
    padding: 6px 16px;
    background: var(--accent);
    border: none;
    border-radius: 16px;
    color: white;
    font-size: 0.8125rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
    flex-shrink: 0;
}

.creator-follow-btn:hover {
    opacity: 0.9;
}

.creator-follow-btn.following {
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    color: var(--text-secondary);
}

.creator-follow-btn.following:hover {
    border-color: #e74c3c;
    color: #e74c3c;
}

/* ============ FEATURED FILTERS ============ */
#featured-filters {
    display: flex;
    align-items: center;
    gap: 6px;
}

#featured-sort {
    margin-left: 4px;
}

/* ============ SECONDARY FILTER BAR ============ */
.filter-sub-bar {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 20px;
}

.filter-sub-bar.hidden {
    display: none;
}

.filter-sub-tab {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 6px 14px;
    min-width: 110px;
    background: transparent;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    color: var(--text-secondary);
    font-size: 0.8125rem;
    font-weight: 500;
    cursor: pointer;
    transition: all var(--transition);
    white-space: nowrap;
}

.filter-sub-tab:hover {
    color: var(--text);
    background: var(--bg-hover);
    border-color: var(--text-muted);
}

.filter-sub-tab.active {
    background: var(--bg-elevated);
    color: var(--text);
    border-color: var(--text-muted);
}

.filter-sub-tab svg {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
}

.filter-sub-divider {
    width: 1px;
    height: 24px;
    background: var(--border);
    margin: 0 4px;
}
/* ============ CARD RANK BADGE (in footer) ============ */
.card-rank-badge {
    font-size: 0.875rem;
    font-weight: 700;
    color: var(--text-muted);
    padding: 2px 0;
}

.creator-card-wrapper[data-rank="1"] .card-rank-badge { color: #FFD700; }
.creator-card-wrapper[data-rank="2"] .card-rank-badge { color: #C0C0C0; }
.creator-card-wrapper[data-rank="3"] .card-rank-badge { color: #CD7F32; }

/* ============ COLLECTION CARDS ============ */

/* Collection cards using discover-card shell */
.collection-type-card .collection-preview-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr;
    width: 100%;
    height: 100%;
    gap: 2px;
    background: var(--border);
}

.collection-type-card .collection-preview-cell {
    overflow: hidden;
    background: var(--bg-secondary);
}

.collection-type-card .collection-preview-cell img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.collection-badge-overlay {
    position: absolute;
    top: 8px;
    left: 8px;
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 4px 8px;
    background: rgba(0, 0, 0, 0.65);
    border-radius: var(--radius-md);
    color: white;
    font-size: 0.75rem;
    font-weight: 600;
    pointer-events: none;
    z-index: 3;
}

.collection-card-title-line {
    font-weight: 600;
    font-size: 0.8125rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-bottom: 4px;
}

.card-footer-left {
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.collection-type-card .card-footer {
    align-items: center;
}

/* Collection preview modal grid */
.collection-preview-modal-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr;
    width: 100%;
    height: 100%;
    gap: 0;
    background: none;
    border-radius: var(--radius-md);
    overflow: hidden;
}

.collection-preview-modal-grid .collection-preview-cell {
    overflow: hidden;
    background: var(--bg-secondary);
}

.collection-preview-modal-grid .collection-preview-cell img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}


/* Bigger cards in collections-only feed */
.collections-feed-grid.discover-grid {
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
}

/* Image viewer styles are now in style.css (shared across all pages) */

/* ===== TOUCH DEVICE FIXES ===== */
/* On touch devices, card overlay stays hidden — tap goes straight to modal.
   All actions (recreate, like, save, share) are in the detail modal. */
@media (hover: none) {
    .discover-card .card-overlay {
        display: none;
    }
}

/* Card more-menu: prevent left overflow on narrow screens */
@media (max-width: 480px) {
    .card-more-menu {
        right: 0;
        left: auto;
        top: calc(100% + 4px);
    }
}

/* 16px minimum on modal inputs to prevent iOS auto-zoom.
   Must come AFTER base styles so it wins by source order. */
@media (max-width: 768px) {
    .edit-tags-wrapper input,
    .report-textarea {
        font-size: 16px !important;
    }

    /* Featured filters: 2-col grid on mobile */
    .filter-sub-bar {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 8px;
    }

    #featured-filters {
        display: contents;
    }

    .filter-sub-divider {
        display: none;
    }

    /* Sort + time dropdowns fill their grid cell */
    #featured-sort-dropdown,
    #time-filter-dropdown {
        min-width: 0;
    }

    #featured-sort-dropdown .dropdown-trigger,
    #time-filter-dropdown .dropdown-trigger {
        width: 100%;
        justify-content: center;
    }
}

/* ============ SEO INTRO (crawler-only; visually hidden) ============ */
/* .sr-only utility keeps the h1 + description in the DOM for Googlebot while
   taking zero visual space. Standard a11y pattern. */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* SSR gallery cards (first 20 items rendered server-side for Googlebot +
   pre-signup preview). JS hydrates / replaces with interactive cards on load. */
.discover-ssr-card {
    display: block;
    border-radius: var(--radius-lg);
    overflow: hidden;
    background: var(--bg-elevated);
}

.discover-ssr-card img {
    display: block;
    width: 100%;
    height: auto;
    object-fit: cover;
}