/* ═══════════════════════════════════════════════════════════════
   NightGallery Theme — style.css
   Dark-mode first · Mobile-first · Snap-scroll feed
   ═══════════════════════════════════════════════════════════════ */

/* ─── DESIGN TOKENS ────────────────────────────────────────── */
:root {
    /* Palette */
    --c-bg:          #08080f;
    --c-surface:     #111118;
    --c-surface-2:   #1a1a24;
    --c-border:      rgba(255,255,255,0.08);
    --c-text:        #f0f0f5;
    --c-text-muted:  rgba(240,240,245,0.55);
    --c-accent:      #e040fb;        /* Electric violet */
    --c-accent-2:    #00e5ff;        /* Cyan pop */
    --c-like:        #ff4b6e;        /* Like red */
    --c-white:       #ffffff;

    /* Glass */
    --glass-bg:      rgba(8,8,15,0.55);
    --glass-blur:    saturate(180%) blur(20px);
    --glass-border:  rgba(255,255,255,0.10);

    /* Spacing */
    --nav-h:         68px;           /* bottom nav height */
    --safe-bottom:   env(safe-area-inset-bottom, 0px);
    --sidebar-w:     72px;

    /* Typography */
    --f-display:     'Syne', sans-serif;
    --f-body:        'DM Sans', sans-serif;

    /* Motion */
    --ease-spring:   cubic-bezier(0.34, 1.56, 0.64, 1);
    --ease-out:      cubic-bezier(0.16, 1, 0.3, 1);
    --dur-fast:      150ms;
    --dur-base:      250ms;
    --dur-slow:      400ms;
}


/* ─── RESET & BASE ──────────────────────────────────────────── */
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    font-size: 16px;
    -webkit-text-size-adjust: 100%;
    scroll-behavior: auto; /* let JS handle */
}

body.ng-body {
    background: var(--c-bg);
    color: var(--c-text);
    font-family: var(--f-body);
    font-weight: 400;
    line-height: 1.5;
    overscroll-behavior: none;
    overflow: hidden;              /* Feed handles scroll, not body */
    height: 100dvh;
    height: 100vh;
}

a {
    color: inherit;
    text-decoration: none;
}

button {
    background: none;
    border: none;
    cursor: pointer;
    font: inherit;
    color: inherit;
    -webkit-tap-highlight-color: transparent;
}

svg {
    display: block;
    fill: none;
}


/* ─── APP WRAPPER ────────────────────────────────────────────── */
.ng-app {
    position: relative;
    width: 100%;
    height: 100dvh;
    height: 100vh;
    overflow: hidden;
}


/* ═══════════════════════════════════════════════════════════════
   FEED — Snap-scroll container
   ═══════════════════════════════════════════════════════════════ */
.ng-feed {
    position: fixed;
    inset: 0;
    overflow-y: scroll;
    overflow-x: hidden;
    scroll-snap-type: y mandatory;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-y: contain;

    /* Hide scrollbar on all browsers */
    scrollbar-width: none;
    -ms-overflow-style: none;
}
.ng-feed::-webkit-scrollbar { display: none; }


/* ═══════════════════════════════════════════════════════════════
   VIDEO CARD
   ═══════════════════════════════════════════════════════════════ */
.ng-video-card {
    position: relative;
    width: 100%;
    height: 100dvh;
    height: 100vh;
    scroll-snap-align: start;
    scroll-snap-stop: always;
    overflow: hidden;
    background: var(--c-bg);

    /* Center-crop for non-9:16 viewports */
    display: flex;
    align-items: center;
    justify-content: center;
}


/* ── Video Player ──────────────────────────────────────────── */
.ng-video-player {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    background: #000;
    z-index: 0;
}


/* ── Tap-to-pause overlay ───────────────────────────────────── */
.ng-tap-overlay {
    position: absolute;
    inset: 0;
    z-index: 10;
    width: 100%;
    height: 100%;
    /* Invisible click target */
}

.ng-play-indicator {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0);
    width: 72px;
    height: 72px;
    background: var(--glass-bg);
    backdrop-filter: var(--glass-blur);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--c-white);
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--dur-fast), transform var(--dur-fast) var(--ease-spring);
}

.ng-play-indicator svg {
    width: 28px;
    height: 28px;
    fill: currentColor;
}

/* Show pause icon when playing, play icon when paused */
.ng-play-indicator .icon-pause { display: block; }
.ng-play-indicator .icon-play  { display: none; }
.ng-play-indicator.is-playing  .icon-pause { display: none; }
.ng-play-indicator.is-playing  .icon-play  { display: block; }

/* Flash animation */
.ng-play-indicator.is-flash {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
    animation: ng-flash var(--dur-slow) var(--ease-out) forwards;
}

@keyframes ng-flash {
    0%   { opacity: 1; transform: translate(-50%, -50%) scale(1.1); }
    60%  { opacity: 1; transform: translate(-50%, -50%) scale(1); }
    100% { opacity: 0; transform: translate(-50%, -50%) scale(0.85); }
}


/* ═══════════════════════════════════════════════════════════════
   SIDEBAR — Glassmorphism action buttons
   ═══════════════════════════════════════════════════════════════ */
.ng-sidebar {
    position: absolute;
    right: 10px;
    /* Must be above nav bar. Extra 20px gives breathing room */
    bottom: calc(var(--nav-h) + var(--safe-bottom) + 20px);
    z-index: 25;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
}

.ng-action-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    width: 56px;
    /* No fixed height — icon block + label stacked */
    padding: 0;
    background: none;
    border: none;
    color: var(--c-white);
    font-family: var(--f-body);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.01em;
    transition: transform var(--dur-base) var(--ease-spring);
    -webkit-tap-highlight-color: transparent;
    text-decoration: none;
}

/* The icon gets its own dark rounded square bg */
.ng-action-btn .ng-btn-icon {
    width: 52px;
    height: 52px;
    border-radius: 14px;
    background: rgba(12, 12, 22, 0.72);
    backdrop-filter: saturate(180%) blur(16px);
    -webkit-backdrop-filter: saturate(180%) blur(16px);
    border: 1px solid rgba(255,255,255,0.10);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background var(--dur-fast), transform var(--dur-fast) var(--ease-spring);
}

.ng-action-btn:active {
    transform: scale(0.88);
}
.ng-action-btn:active .ng-btn-icon {
    background: rgba(255,255,255,0.08);
}

.ng-icon {
    width: 26px;
    height: 26px;
    stroke: currentColor;
    fill: none;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
    transition: stroke var(--dur-fast), fill var(--dur-fast);
}

.ng-action-label {
    font-size: 10px;
    color: rgba(240,240,245,0.80);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    font-weight: 600;
}

/* ── Like ─────────────────────────────────────────────────── */
.ng-like-btn .ng-icon {
    stroke: var(--c-white);
    fill: transparent;
}
.ng-like-btn.is-liked .ng-icon {
    stroke: var(--c-like);
    fill: var(--c-like);
}
.ng-like-btn.is-liked .ng-action-label { color: var(--c-like); }

/* Pulse animation on like */
.ng-like-btn.is-pulse {
    animation: ng-pulse var(--dur-slow) var(--ease-spring);
}
@keyframes ng-pulse {
    0%   { transform: scale(1); }
    40%  { transform: scale(1.28); }
    70%  { transform: scale(0.93); }
    100% { transform: scale(1); }
}

/* ── Sound ─────────────────────────────────────────────────── */
.ng-sound-btn .icon-sound  { display: block; }
.ng-sound-btn .icon-muted  { display: none; }
.ng-sound-btn.is-muted .icon-sound { display: none; }
.ng-sound-btn.is-muted .icon-muted { display: block; }


/* ═══════════════════════════════════════════════════════════════
   BOTTOM INFO OVERLAY — base rule (overridden in v2 additions)
   ═══════════════════════════════════════════════════════════════ */
.ng-bottom-info {
    position: absolute;
    bottom: calc(var(--nav-h) + var(--safe-bottom) + 16px);
    left: 0;
    right: calc(var(--sidebar-w) + 20px);
    z-index: 20;
    padding: 0 16px 10px;
    color: var(--c-white);
    pointer-events: none;
}

.ng-credit {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 13px;
    font-weight: 500;
    color: var(--c-accent);
    font-family: var(--f-display);
    letter-spacing: 0.02em;
    margin-bottom: 4px;
    pointer-events: all;
}

.ng-credit-icon {
    opacity: 0.7;
}

.ng-video-title {
    font-family: var(--f-display);
    font-size: clamp(16px, 4vw, 22px);
    font-weight: 700;
    line-height: 1.25;
    margin-bottom: 8px;
    text-shadow: 0 2px 12px rgba(0,0,0,0.6);
    pointer-events: all;
}

.ng-description {
    font-size: 13px;
    line-height: 1.5;
    color: rgba(255,255,255,0.80);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    transition: all var(--dur-base) var(--ease-out);
    pointer-events: all;
}

.ng-description.is-expanded {
    -webkit-line-clamp: unset;
    overflow: visible;
}

.ng-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 8px;
    pointer-events: all;
}

.ng-tag {
    display: inline-flex;
    font-size: 12px;
    font-weight: 500;
    padding: 3px 10px;
    border-radius: 99px;
    transition: opacity var(--dur-fast);
    pointer-events: all;
}
.ng-tag:active { opacity: 0.7; }

.ng-tag--category {
    background: rgba(224,64,251,0.20);
    color: var(--c-accent);
    border: 1px solid rgba(224,64,251,0.35);
}
.ng-tag--label {
    background: rgba(0,229,255,0.12);
    color: var(--c-accent-2);
    border: 1px solid rgba(0,229,255,0.25);
}


/* ═══════════════════════════════════════════════════════════════
   BOTTOM NAVIGATION BAR — Glassmorphism
   ═══════════════════════════════════════════════════════════════ */
.ng-bottom-nav {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 100;
    height: calc(var(--nav-h) + var(--safe-bottom));
    padding-bottom: var(--safe-bottom);

    display: flex;
    align-items: flex-start;
    justify-content: space-around;

    /* Glassmorphism */
    background: rgba(8,8,15,0.60);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    border-top: 1px solid var(--glass-border);

    /* Subtle glow on top edge */
    box-shadow: 0 -1px 0 rgba(224,64,251,0.15),
                0 -20px 60px rgba(0,0,0,0.5);
}

.ng-nav-item {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding-top: 10px;
    height: var(--nav-h);
    color: var(--c-text-muted);
    font-family: var(--f-body);
    font-size: 10px;
    font-weight: 500;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    transition: color var(--dur-base), transform var(--dur-base) var(--ease-spring);
    -webkit-tap-highlight-color: transparent;
    position: relative;
}

.ng-nav-item:active {
    transform: scale(0.90);
}

.ng-nav-item.is-active {
    color: var(--c-white);
}

/* Active indicator dot */
.ng-nav-item.is-active::before {
    content: '';
    position: absolute;
    top: 4px;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: var(--c-accent);
    box-shadow: 0 0 8px var(--c-accent);
    animation: ng-dot-appear var(--dur-base) var(--ease-spring);
}
@keyframes ng-dot-appear {
    from { transform: scale(0); }
    to   { transform: scale(1); }
}

.ng-nav-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
}

.ng-nav-icon svg {
    width: 22px;
    height: 22px;
    stroke: currentColor;
    fill: none;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
    transition: stroke var(--dur-base);
}

.ng-nav-item.is-active .ng-nav-icon svg {
    stroke: var(--c-white);
    filter: drop-shadow(0 0 6px rgba(224,64,251,0.5));
}

.ng-nav-label {
    font-size: 9px;
    letter-spacing: 0.06em;
}


/* ═══════════════════════════════════════════════════════════════
   SHARE SHEET — Slide-up modal
   ═══════════════════════════════════════════════════════════════ */
.ng-backdrop {
    position: fixed;
    inset: 0;
    z-index: 200;
    background: rgba(0,0,0,0.6);
    backdrop-filter: blur(4px);
    animation: ng-fade-in var(--dur-base);
}

.ng-share-sheet {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 210;
    background: var(--c-surface);
    border-radius: 24px 24px 0 0;
    border: 1px solid var(--c-border);
    padding: 20px 20px calc(var(--safe-bottom) + 20px);
    animation: ng-slide-up var(--dur-slow) var(--ease-out);
}

.ng-share-sheet__title {
    font-family: var(--f-display);
    font-size: 16px;
    font-weight: 700;
    text-align: center;
    margin-bottom: 20px;
    color: var(--c-text-muted);
}

.ng-share-sheet__actions {
    display: flex;
    justify-content: space-around;
    gap: 12px;
    margin-bottom: 20px;
}

.ng-share-option {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 14px 8px;
    background: var(--c-surface-2);
    border-radius: 16px;
    border: 1px solid var(--c-border);
    color: var(--c-text);
    font-size: 12px;
    transition: transform var(--dur-fast) var(--ease-spring), background var(--dur-fast);
}

.ng-share-option:active {
    transform: scale(0.93);
    background: rgba(255,255,255,0.05);
}

.ng-share-icon {
    font-size: 24px;
    line-height: 1;
}

.ng-share-sheet__close {
    display: block;
    width: 100%;
    padding: 14px;
    background: var(--c-surface-2);
    border-radius: 14px;
    border: 1px solid var(--c-border);
    color: var(--c-text-muted);
    font-size: 15px;
    font-weight: 500;
    text-align: center;
    transition: background var(--dur-fast);
}

.ng-share-sheet__close:active {
    background: rgba(255,255,255,0.06);
}

@keyframes ng-slide-up {
    from { transform: translateY(100%); }
    to   { transform: translateY(0); }
}

@keyframes ng-fade-in {
    from { opacity: 0; }
    to   { opacity: 1; }
}


/* ═══════════════════════════════════════════════════════════════
   INFINITE SCROLL SENTINEL / SPINNER
   ═══════════════════════════════════════════════════════════════ */
.ng-sentinel {
    width: 100%;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--dur-base);
}

.ng-sentinel.is-loading {
    opacity: 1;
}

.ng-spinner {
    display: flex;
    gap: 6px;
}

.ng-spinner span {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--c-accent);
    animation: ng-bounce 1.2s ease-in-out infinite;
}

.ng-spinner span:nth-child(2) { animation-delay: 0.15s; }
.ng-spinner span:nth-child(3) { animation-delay: 0.30s; }

@keyframes ng-bounce {
    0%, 80%, 100% { transform: scale(0.6); opacity: 0.4; }
    40%            { transform: scale(1.0); opacity: 1; }
}


/* ═══════════════════════════════════════════════════════════════
   EMPTY STATE
   ═══════════════════════════════════════════════════════════════ */
.ng-empty-state {
    position: fixed;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    color: var(--c-text-muted);
    font-family: var(--f-display);
}

.ng-empty-icon {
    font-size: 48px;
    line-height: 1;
}


/* ═══════════════════════════════════════════════════════════════
   PAGE TEMPLATES — Discover & About
   ═══════════════════════════════════════════════════════════════ */
.ng-page-wrap {
    position: fixed;
    inset: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 24px 16px calc(var(--nav-h) + var(--safe-bottom) + 24px);
    scrollbar-width: none;
}
.ng-page-wrap::-webkit-scrollbar { display: none; }

.ng-page-heading {
    font-family: var(--f-display);
    font-size: clamp(26px, 7vw, 38px);
    font-weight: 800;
    letter-spacing: -0.02em;
    margin-bottom: 24px;
    background: linear-gradient(135deg, var(--c-white) 40%, var(--c-accent));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Category Grid (Discover) */
.ng-category-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
}

.ng-category-card {
    aspect-ratio: 1 / 0.9;
    border-radius: 18px;
    overflow: hidden;
    position: relative;
    display: flex;
    align-items: flex-end;
    padding: 14px;
    background: var(--c-surface-2);
    border: 1px solid var(--c-border);
    transition: transform var(--dur-base) var(--ease-spring), box-shadow var(--dur-base);
    -webkit-tap-highlight-color: transparent;
}

.ng-category-card:active {
    transform: scale(0.95);
}

.ng-category-card__bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.45;
}

.ng-category-card__label {
    position: relative;
    z-index: 1;
    font-family: var(--f-display);
    font-size: 15px;
    font-weight: 700;
    color: var(--c-white);
    text-shadow: 0 2px 8px rgba(0,0,0,0.6);
}

/* About Page */
.ng-about-prose {
    max-width: 600px;
    color: var(--c-text-muted);
    line-height: 1.7;
}

.ng-about-prose h2 {
    font-family: var(--f-display);
    font-size: 20px;
    font-weight: 700;
    color: var(--c-text);
    margin: 28px 0 10px;
}

.ng-about-prose p {
    margin-bottom: 14px;
    font-size: 15px;
}


/* ═══════════════════════════════════════════════════════════════
   DESKTOP ADAPTATIONS (≥ 600px)
   ═══════════════════════════════════════════════════════════════ */
@media (min-width: 600px) {
    /* Feed: fixed-position, so margin:auto does nothing — use left+transform */
    .ng-feed {
        left: 50%;
        right: auto;
        width: 420px;
        transform: translateX(-50%);
    }

    .ng-video-card {
        /* Cards already fill .ng-feed which is 420px wide */
        max-width: 420px;
    }

    .ng-bottom-nav {
        max-width: 420px;
        left: 50%;
        transform: translateX(-50%);
        border-radius: 0;
    }

    .ng-share-sheet {
        max-width: 420px;
        left: 50%;
        transform: translateX(-50%);
        border-radius: 24px 24px 0 0;
    }

    .ng-page-wrap {
        max-width: 420px;
        left: 50%;
        transform: translateX(-50%);
    }
}


/* ═══════════════════════════════════════════════════════════════
   REDUCED MOTION
   ═══════════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        transition-duration: 0.01ms !important;
    }
}


/* ═══════════════════════════════════════════════════════════════
   v2 ADDITIONS
   ═══════════════════════════════════════════════════════════════ */

/* ─── BOTTOM SCRIM — tall gradient for text readability ──────── */
.ng-bottom-scrim {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    /*
     * Must cover: nav bar + safe area + info text + sidebar
     * clamp: never less than 280px, grows on taller phones
     */
    height: clamp(280px, 50vh, 420px);
    background: linear-gradient(
        to top,
        rgba(6, 6, 12, 0.95) 0%,
        rgba(6, 6, 12, 0.70) 30%,
        rgba(6, 6, 12, 0.30) 65%,
        transparent 100%
    );
    z-index: 5;
    pointer-events: none;
}

/* ─── BOTTOM INFO — v2 override: ensure nothing overlaps nav ─── */
/* The key is using a large-enough bottom offset so text is always
   above the nav bar even on iPhone with home indicator */
.ng-bottom-info {
    bottom: calc(var(--nav-h) + var(--safe-bottom) + 20px);
    right: calc(var(--sidebar-w) + 16px);
    padding: 0 14px 8px;
    pointer-events: none;
}
/* Re-enable pointer events only on interactive children */
.ng-bottom-info .ng-credit,
.ng-bottom-info .ng-credit-link,
.ng-bottom-info .ng-tag {
    pointer-events: all;
}

/* Description always visible, not collapsed */
.ng-description {
    font-size: 13px;
    color: rgba(240, 240, 245, 0.80);
    line-height: 1.5;
    margin-top: 6px;
    /* Allow up to 3 lines, tap to expand handled by JS if needed */
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Credit link */
.ng-credit-link {
    color: var(--c-white);
    font-weight: 700;
    font-size: 14px;
    display: inline-flex;
    align-items: center;
    gap: 2px;
    padding: 2px 4px;
    border-radius: 6px;
    transition: background var(--dur-fast), color var(--dur-fast);
    text-decoration: none;
}
.ng-credit-link:hover,
.ng-credit-link:focus-visible {
    background: rgba(224, 64, 251, 0.18);
    color: var(--c-accent);
    outline: none;
}
.ng-credit-link:active {
    transform: scale(0.96);
}

/* ─── SIDEBAR — vertically center to available space ─────────── */
.ng-sidebar {
    /* Keep it above the info overlay */
    z-index: 25;
}

/* ── Download / Pack button — cyan accent matching screenshot ── */
.ng-download-btn {
    text-decoration: none;
    color: var(--c-accent-2); /* cyan */
}
.ng-download-btn .ng-btn-icon {
    /* Slightly brighter bg to make cyan pop */
    background: rgba(0, 20, 28, 0.80);
    border-color: rgba(0, 229, 255, 0.20);
}
.ng-download-btn .ng-icon {
    stroke: var(--c-accent-2);
    width: 28px;
    height: 28px;
    stroke-width: 2;
}
.ng-download-btn .ng-action-label {
    color: var(--c-accent-2);
    font-weight: 700;
    letter-spacing: 0.08em;
}
.ng-download-btn:hover .ng-btn-icon,
.ng-download-btn:focus-visible .ng-btn-icon {
    border-color: rgba(0, 229, 255, 0.45);
    background: rgba(0, 229, 255, 0.10);
}


/* ═══════════════════════════════════════════════════════════════
   CREATOR PROFILE PAGE
   ═══════════════════════════════════════════════════════════════ */
.ng-creator-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 200;
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 16px;
    padding-top: calc(14px + env(safe-area-inset-top, 0px));
    background: rgba(8, 8, 15, 0.85);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    border-bottom: 1px solid var(--glass-border);
}

.ng-creator-back {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--c-surface-2);
    border: 1px solid var(--glass-border);
    color: var(--c-text);
    flex-shrink: 0;
    transition: background var(--dur-fast), transform var(--dur-fast);
}
.ng-creator-back:hover { background: rgba(255,255,255,0.1); }
.ng-creator-back:active { transform: scale(0.90); }

.ng-creator-avatar {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--c-accent), var(--c-accent-2));
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--f-display);
    font-weight: 800;
    font-size: 20px;
    color: var(--c-white);
    flex-shrink: 0;
    box-shadow: 0 0 20px rgba(224,64,251,0.4);
}

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

.ng-creator-name {
    font-family: var(--f-display);
    font-size: 17px;
    font-weight: 800;
    color: var(--c-white);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    letter-spacing: -0.01em;
}

.ng-creator-count {
    font-size: 12px;
    color: var(--c-text-muted);
    margin-top: 1px;
}

/* On creator page, push feed down below header */
body.ng-body #ng-feed[data-context="creator"] {
    padding-top: 80px;
}

/* First card on creator page snaps to after header */
body.ng-body #ng-feed[data-context="creator"] .ng-video-card:first-child {
    scroll-margin-top: 80px;
}


/* ═══════════════════════════════════════════════════════════════
   DISCOVER PAGE — Full search UI
   ═══════════════════════════════════════════════════════════════ */

/* Root wrapper */
.ng-disc-root {
    position: fixed;
    inset: 0;
    overflow-y: auto;
    overflow-x: hidden;
    overscroll-behavior: contain;
    padding-bottom: calc(var(--nav-h) + var(--safe-bottom) + 16px);
    scrollbar-width: none;
}
.ng-disc-root::-webkit-scrollbar { display: none; }

/* ── Sticky Search Bar ──────────────────────────────────── */
.ng-disc-search-bar {
    position: sticky;
    top: 0;
    z-index: 50;
    padding: calc(env(safe-area-inset-top, 0px) + 12px) 14px 12px;
    background: rgba(8, 8, 15, 0.82);
    backdrop-filter: saturate(180%) blur(20px);
    -webkit-backdrop-filter: saturate(180%) blur(20px);
    border-bottom: 1px solid rgba(255,255,255,0.06);
}

.ng-disc-search-inner {
    position: relative;
    display: flex;
    align-items: center;
}

.ng-disc-search-ico {
    position: absolute;
    left: 13px;
    color: var(--c-text-muted);
    pointer-events: none;
    flex-shrink: 0;
    z-index: 1;
}

.ng-disc-input {
    width: 100%;
    padding: 12px 38px 12px 40px;
    background: var(--c-surface-2);
    border: 1.5px solid rgba(255,255,255,0.08);
    border-radius: 14px;
    color: var(--c-text);
    font-family: var(--f-body);
    font-size: 15px;
    outline: none;
    -webkit-appearance: none;
    appearance: none;
    transition: border-color var(--dur-base), box-shadow var(--dur-base);
}
.ng-disc-input::placeholder { color: var(--c-text-muted); }
.ng-disc-input:focus {
    border-color: rgba(224, 64, 251, 0.50);
    box-shadow: 0 0 0 3px rgba(224, 64, 251, 0.10);
}
.ng-disc-input::-webkit-search-decoration,
.ng-disc-input::-webkit-search-cancel-button { display: none; }

.ng-disc-clear {
    position: absolute;
    right: 10px;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--c-surface);
    border: 1px solid rgba(255,255,255,0.10);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--c-text-muted);
    transition: background var(--dur-fast), color var(--dur-fast);
}
.ng-disc-clear:hover { background: rgba(255,255,255,0.10); color: var(--c-white); }

/* ── Default Content ────────────────────────────────────── */
.ng-disc-heading-row {
    padding: 20px 16px 6px;
}

.ng-disc-section {
    padding: 18px 0 4px;
}

.ng-disc-section-title {
    font-family: var(--f-display);
    font-size: 15px;
    font-weight: 700;
    color: var(--c-text);
    letter-spacing: 0.01em;
    padding: 0 16px 10px;
    display: flex;
    align-items: center;
    gap: 6px;
}

.ng-disc-section-icon {
    font-size: 16px;
    line-height: 1;
}

/* ── Trending Tags (horizontal scroll) ─────────────────── */
.ng-disc-tags-scroll {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    padding: 0 16px 4px;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
}
.ng-disc-tags-scroll::-webkit-scrollbar { display: none; }

.ng-disc-tag-pill {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 7px 14px;
    border-radius: 50px;
    background: var(--c-surface-2);
    border: 1px solid rgba(255,255,255,0.10);
    color: var(--c-text);
    font-size: 13px;
    font-weight: 600;
    white-space: nowrap;
    text-decoration: none;
    transition: background var(--dur-fast), border-color var(--dur-fast), transform var(--dur-fast) var(--ease-spring);
    flex-shrink: 0;
}
.ng-disc-tag-pill:hover {
    background: rgba(224,64,251,0.12);
    border-color: rgba(224,64,251,0.30);
    color: var(--c-accent);
}
.ng-disc-tag-pill:active { transform: scale(0.94); }

.ng-disc-tag-count {
    font-size: 11px;
    color: var(--c-text-muted);
    font-weight: 400;
}

/* ── Recent Videos Horizontal Strip ────────────────────── */
.ng-disc-videos-scroll {
    display: flex;
    gap: 10px;
    overflow-x: auto;
    padding: 0 16px 8px;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
}
.ng-disc-videos-scroll::-webkit-scrollbar { display: none; }

.ng-disc-video-card {
    flex-shrink: 0;
    width: 110px;
    text-decoration: none;
    color: var(--c-text);
    display: flex;
    flex-direction: column;
    gap: 6px;
    transition: transform var(--dur-fast) var(--ease-spring);
}
.ng-disc-video-card:active { transform: scale(0.94); }

.ng-disc-video-thumb {
    position: relative;
    width: 110px;
    height: 156px; /* 9:16-ish */
    border-radius: 10px;
    overflow: hidden;
    background: var(--c-surface-2);
    border: 1px solid rgba(255,255,255,0.06);
}
.ng-disc-video-thumb img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.ng-disc-video-thumb__placeholder {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--c-text-muted);
}

.ng-disc-video-play {
    position: absolute;
    bottom: 6px;
    right: 6px;
    font-size: 11px;
    background: rgba(0,0,0,0.55);
    border-radius: 50%;
    width: 22px;
    height: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--c-white);
    padding-left: 1px;
}

.ng-disc-video-title {
    font-size: 11px;
    font-weight: 600;
    color: var(--c-text);
    line-height: 1.3;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.ng-disc-video-credit {
    font-size: 10px;
    color: var(--c-accent);
    font-weight: 500;
}

/* ── Category Grid 2-col ────────────────────────────────── */
.ng-disc-cat-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
    padding: 0 14px;
}

.ng-disc-cat-card {
    position: relative;
    aspect-ratio: 1 / 0.7;
    border-radius: 14px;
    overflow: hidden;
    background: var(--c-surface-2);
    border: 1px solid rgba(255,255,255,0.07);
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 12px;
    text-decoration: none;
    transition: transform var(--dur-base) var(--ease-spring), box-shadow var(--dur-base);
}
.ng-disc-cat-card:active { transform: scale(0.95); }

.ng-disc-cat-card__bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.50;
    transition: opacity var(--dur-base), transform 0.5s var(--ease-out);
}
.ng-disc-cat-card:hover .ng-disc-cat-card__bg { opacity: 0.65; transform: scale(1.04); }

.ng-disc-cat-card__overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(0,0,0,0.75) 0%, transparent 60%);
}

.ng-disc-cat-card__name {
    position: relative;
    z-index: 2;
    font-family: var(--f-display);
    font-size: 14px;
    font-weight: 700;
    color: var(--c-white);
    text-shadow: 0 1px 4px rgba(0,0,0,0.5);
}

.ng-disc-cat-card__count {
    position: relative;
    z-index: 2;
    font-size: 11px;
    color: rgba(255,255,255,0.60);
    font-weight: 400;
    margin-top: 2px;
}

/* ── Search Results ─────────────────────────────────────── */
.ng-disc-results {
    padding: 8px 0;
}
.ng-disc-results-inner {
    display: flex;
    flex-direction: column;
}

.ng-disc-loading {
    display: flex;
    justify-content: center;
    padding: 40px 0;
}

.ng-disc-no-results {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    padding: 48px 20px;
    text-align: center;
    color: var(--c-text-muted);
    font-size: 15px;
}
.ng-disc-no-results__sub {
    font-size: 13px;
    color: var(--c-text-muted);
    opacity: 0.7;
}

/* Creator chips row */
.ng-disc-res-creators {
    display: flex;
    gap: 10px;
    padding: 12px 14px 4px;
    overflow-x: auto;
    scrollbar-width: none;
}
.ng-disc-res-creators::-webkit-scrollbar { display: none; }

.ng-disc-creator-chip {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    text-decoration: none;
    color: var(--c-text);
    flex-shrink: 0;
    width: 70px;
    transition: transform var(--dur-fast) var(--ease-spring);
}
.ng-disc-creator-chip:active { transform: scale(0.92); }

.ng-disc-creator-chip__av-wrap {
    width: 54px;
    height: 54px;
    border-radius: 50%;
    overflow: hidden;
    background: linear-gradient(135deg, var(--c-accent), var(--c-accent-2));
    border: 2px solid rgba(224,64,251,0.40);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.ng-disc-creator-chip__avatar {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.ng-disc-creator-chip__initials {
    font-family: var(--f-display);
    font-size: 18px;
    font-weight: 800;
    color: var(--c-white);
}

.ng-disc-creator-chip__name {
    font-size: 11px;
    color: var(--c-text-muted);
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    width: 100%;
    font-weight: 500;
}

/* Result label */
.ng-disc-res-label {
    font-size: 11px;
    font-weight: 600;
    color: var(--c-text-muted);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    padding: 12px 16px 6px;
}

/* Result video list (reuse ng-sr-* from previous) */
.ng-disc-res-list {
    display: flex;
    flex-direction: column;
}

/* ── Empty state ────────────────────────────────────────── */
.ng-disc-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    padding: 60px 20px;
    color: var(--c-text-muted);
    font-size: 14px;
    text-align: center;
}

/* Desktop */
@media (min-width: 600px) {
    .ng-disc-root {
        max-width: 420px;
        left: 50%;
        transform: translateX(-50%);
    }
}

/* ═══════════════════════════════════════════════════════════════
   CREATOR PROFILE PAGE
   ═══════════════════════════════════════════════════════════════ */
.ng-creator-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 200;
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 16px;
    padding-top: calc(14px + env(safe-area-inset-top, 0px));
    background: rgba(8, 8, 15, 0.85);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    border-bottom: 1px solid var(--glass-border);
}

.ng-creator-back {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--c-surface-2);
    border: 1px solid var(--glass-border);
    color: var(--c-text);
    flex-shrink: 0;
    transition: background var(--dur-fast), transform var(--dur-fast);
}
.ng-creator-back:hover { background: rgba(255,255,255,0.1); }
.ng-creator-back:active { transform: scale(0.90); }

.ng-creator-avatar {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--c-accent), var(--c-accent-2));
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--f-display);
    font-weight: 800;
    font-size: 20px;
    color: var(--c-white);
    flex-shrink: 0;
    box-shadow: 0 0 20px rgba(224,64,251,0.4);
}

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

.ng-creator-name {
    font-family: var(--f-display);
    font-size: 17px;
    font-weight: 800;
    color: var(--c-white);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    letter-spacing: -0.01em;
}

.ng-creator-count {
    font-size: 12px;
    color: var(--c-text-muted);
    margin-top: 1px;
}

/* On creator page, push feed down below header */
body.ng-body #ng-feed[data-context="creator"] {
    padding-top: 80px;
}

/* First card on creator page snaps to after header */
body.ng-body #ng-feed[data-context="creator"] .ng-video-card:first-child {
    scroll-margin-top: 80px;
}


/* ═══════════════════════════════════════════════════════════════
   DISCOVER SEARCH
   ═══════════════════════════════════════════════════════════════ */
.ng-search-wrap {
    margin-bottom: 20px;
}

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

.ng-search-icon {
    position: absolute;
    left: 14px;
    width: 18px;
    height: 18px;
    color: var(--c-text-muted);
    pointer-events: none;
    flex-shrink: 0;
}

.ng-search-input {
    width: 100%;
    padding: 13px 40px 13px 42px;
    background: var(--c-surface-2);
    border: 1px solid var(--glass-border);
    border-radius: 14px;
    color: var(--c-text);
    font-family: var(--f-body);
    font-size: 15px;
    outline: none;
    transition: border-color var(--dur-base), box-shadow var(--dur-base);
    -webkit-appearance: none;
    appearance: none;
}

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

.ng-search-input:focus {
    border-color: rgba(224, 64, 251, 0.5);
    box-shadow: 0 0 0 3px rgba(224, 64, 251, 0.12);
}

/* Remove browser search decoration */
.ng-search-input::-webkit-search-decoration,
.ng-search-input::-webkit-search-cancel-button { display: none; }

.ng-search-clear {
    position: absolute;
    right: 12px;
    width: 26px;
    height: 26px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--c-surface);
    border: 1px solid var(--glass-border);
    color: var(--c-text-muted);
    transition: background var(--dur-fast), color var(--dur-fast);
}
.ng-search-clear:hover { background: rgba(255,255,255,0.1); color: var(--c-white); }

/* Section label */
.ng-section-label {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--c-text-muted);
    margin-bottom: 12px;
}

/* Search results list */
.ng-search-results {
    margin-bottom: 12px;
}

.ng-search-results__inner {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.ng-sr-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    background: var(--c-surface-2);
    border-radius: 14px;
    border: 1px solid var(--glass-border);
    color: var(--c-text);
    text-decoration: none;
    transition: background var(--dur-fast), transform var(--dur-fast) var(--ease-spring);
}
.ng-sr-item:active { transform: scale(0.98); background: rgba(255,255,255,0.05); }

.ng-sr-thumb {
    width: 48px;
    height: 64px;
    border-radius: 8px;
    object-fit: cover;
    flex-shrink: 0;
    background: var(--c-surface);
}
.ng-sr-thumb--placeholder {
    background: linear-gradient(135deg, var(--c-surface), var(--c-surface-2));
}

.ng-sr-info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.ng-sr-title {
    font-family: var(--f-display);
    font-size: 14px;
    font-weight: 700;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: var(--c-text);
}

.ng-sr-creator {
    font-size: 12px;
    color: var(--c-accent);
    font-weight: 500;
}

.ng-sr-arrow {
    flex-shrink: 0;
    color: var(--c-text-muted);
}

.ng-search-loading,
.ng-search-empty {
    padding: 16px;
    text-align: center;
    color: var(--c-text-muted);
    font-size: 14px;
}


/* ═══════════════════════════════════════════════════════════════
   AD SPOT CARD
   ═══════════════════════════════════════════════════════════════ */
.ng-ad-card {
    position: relative;
    width: 100%;
    height: 100dvh;
    height: 100vh;
    scroll-snap-align: start;
    scroll-snap-stop: always;
    overflow: hidden;
    background: var(--c-surface);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}

.ng-ad-card__badge {
    position: absolute;
    top: 16px;
    right: 16px;
    background: rgba(255,255,255,0.12);
    border: 1px solid rgba(255,255,255,0.20);
    border-radius: 6px;
    padding: 3px 8px;
    font-size: 10px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--c-text-muted);
    z-index: 10;
}

.ng-ad-card__content {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.ng-ad-card__content iframe,
.ng-ad-card__content img,
.ng-ad-card__content video {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

/* Desktop media query updates */
@media (min-width: 600px) {
    .ng-creator-header {
        max-width: 420px;
        left: 50%;
        transform: translateX(-50%);
    }
}


/* ═══════════════════════════════════════════════════════════════
   CREATOR PROFILE PAGE — FikFap-style (v2 rebuild)
   ═══════════════════════════════════════════════════════════════ */

.ng-cp-root {
    position: fixed;
    inset: 0;
    overflow-y: auto;
    overflow-x: hidden;
    overscroll-behavior: contain;
    background: var(--c-bg);
    scrollbar-width: none;
    /* Space for bottom nav */
    padding-bottom: calc(var(--nav-h) + var(--safe-bottom) + 16px);
}
.ng-cp-root::-webkit-scrollbar { display: none; }

/* ── Cover Banner ─────────────────────────────────────────── */
.ng-cp-cover {
    position: relative;
    width: 100%;
    height: 190px;
    background: linear-gradient(135deg, #1a0a2e 0%, #0f1a2e 50%, #0a1a1a 100%);
    overflow: hidden;
    flex-shrink: 0;
}

.ng-cp-cover__img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.55;
    filter: blur(2px) saturate(1.3);
    transform: scale(1.06);
}

.ng-cp-cover__scrim {
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom, rgba(8,8,15,0.20) 0%, rgba(8,8,15,0.80) 100%);
}

/* Back button */
.ng-cp-back {
    position: absolute;
    top: calc(14px + env(safe-area-inset-top, 0px));
    left: 14px;
    z-index: 10;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: rgba(0,0,0,0.45);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255,255,255,0.15);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--c-white);
    text-decoration: none;
    transition: background var(--dur-fast), transform var(--dur-fast) var(--ease-spring);
}
.ng-cp-back:hover  { background: rgba(255,255,255,0.15); }
.ng-cp-back:active { transform: scale(0.88); }

/* ── Profile Section ─────────────────────────────────────── */
.ng-cp-profile {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0 20px 20px;
    text-align: center;
}

/* Avatar */
.ng-cp-avatar-wrap {
    margin-top: -48px;
    margin-bottom: 12px;
    position: relative;
    z-index: 5;
}

.ng-cp-avatar {
    width: 96px;
    height: 96px;
    border-radius: 50%;
    border: 3px solid var(--c-bg);
    box-shadow: 0 0 0 2px rgba(224,64,251,0.55), 0 8px 28px rgba(0,0,0,0.6);
    object-fit: cover;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.ng-cp-avatar--initials {
    background: linear-gradient(135deg, var(--c-accent) 0%, var(--c-accent-2) 100%);
    font-family: var(--f-display);
    font-size: 34px;
    font-weight: 800;
    color: var(--c-white);
    letter-spacing: -0.02em;
}

.ng-cp-name {
    font-family: var(--f-display);
    font-size: clamp(20px, 5.5vw, 26px);
    font-weight: 800;
    color: var(--c-white);
    letter-spacing: -0.02em;
    margin-bottom: 3px;
    line-height: 1.1;
}

.ng-cp-handle {
    font-size: 13px;
    color: var(--c-text-muted);
    font-weight: 400;
    margin-bottom: 18px;
}

/* ── Stats Row ──────────────────────────────────────────── */
.ng-cp-stats {
    display: flex;
    align-items: center;
    margin-bottom: 16px;
    background: var(--c-surface-2);
    border: 1px solid var(--glass-border);
    border-radius: 18px;
    padding: 13px 20px;
    width: 100%;
    max-width: 300px;
}

.ng-cp-stat {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
}

.ng-cp-stat__num {
    font-family: var(--f-display);
    font-size: 19px;
    font-weight: 800;
    color: var(--c-white);
    letter-spacing: -0.02em;
    line-height: 1;
}

.ng-cp-stat__label {
    font-size: 10px;
    color: var(--c-text-muted);
    font-weight: 500;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.ng-cp-stat-divider {
    width: 1px;
    height: 30px;
    background: var(--glass-border);
    flex-shrink: 0;
    margin: 0 4px;
}

/* ── Download Pack CTA ───────────────────────────────────── */
.ng-cp-download-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 11px 24px;
    margin-bottom: 16px;
    border-radius: 50px;
    background: linear-gradient(135deg, var(--c-accent) 0%, #7b2fff 100%);
    color: var(--c-white);
    font-family: var(--f-display);
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.01em;
    text-decoration: none;
    transition: transform var(--dur-fast) var(--ease-spring), box-shadow var(--dur-fast), opacity var(--dur-fast);
    box-shadow: 0 4px 20px rgba(224,64,251,0.35);
}
.ng-cp-download-btn:hover {
    box-shadow: 0 6px 28px rgba(224,64,251,0.5);
    opacity: 0.92;
}
.ng-cp-download-btn:active { transform: scale(0.95); }

/* ── Bio ─────────────────────────────────────────────────── */
.ng-cp-bio {
    font-size: 13px;
    color: var(--c-text-muted);
    line-height: 1.6;
    max-width: 280px;
}

/* ── Grid Header ────────────────────────────────────────── */
.ng-cp-grid-wrap {
    padding: 0 3px;
}

.ng-cp-grid-header {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 0 12px 10px;
    font-family: var(--f-display);
    font-size: 13px;
    font-weight: 700;
    color: var(--c-text-muted);
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.ng-cp-grid-count {
    margin-left: auto;
    font-size: 11px;
    font-weight: 500;
    color: var(--c-text-muted);
    background: var(--c-surface-2);
    border: 1px solid var(--glass-border);
    border-radius: 20px;
    padding: 2px 8px;
}

/* ── Video Grid ─────────────────────────────────────────── */
.ng-cp-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2px;
}

.ng-cp-tile {
    position: relative;
    aspect-ratio: 9 / 16;
    overflow: hidden;
    background: var(--c-surface-2);
    display: block;
    text-decoration: none;
    animation: ng-tile-in var(--dur-slow) var(--ease-out) both;
}

@keyframes ng-tile-in {
    from { opacity: 0; transform: scale(0.96); }
    to   { opacity: 1; transform: scale(1); }
}

.ng-cp-tile__thumb {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.35s var(--ease-out), filter 0.35s;
}

.ng-cp-tile:hover .ng-cp-tile__thumb,
.ng-cp-tile:focus-visible .ng-cp-tile__thumb {
    transform: scale(1.04);
    filter: brightness(0.7);
}

.ng-cp-tile__placeholder {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--c-surface), var(--c-surface-2));
    color: var(--c-text-muted);
}

.ng-cp-tile__play {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0.7);
    opacity: 0;
    width: 44px;
    height: 44px;
    background: rgba(0,0,0,0.55);
    backdrop-filter: blur(8px);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--c-white);
    z-index: 3;
    transition: opacity 0.25s, transform 0.25s var(--ease-spring);
    pointer-events: none;
}

.ng-cp-tile:hover .ng-cp-tile__play,
.ng-cp-tile:focus-visible .ng-cp-tile__play {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
}

@media (hover: none) {
    .ng-cp-tile__play {
        opacity: 0.45;
        transform: translate(-50%, -50%) scale(0.85);
    }
}

.ng-cp-tile__label {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 2;
    padding: 18px 5px 5px;
    font-size: 9.5px;
    font-weight: 600;
    color: rgba(255,255,255,0.90);
    background: linear-gradient(to top, rgba(0,0,0,0.80) 0%, transparent 100%);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    letter-spacing: 0.01em;
    line-height: 1.3;
    pointer-events: none;
}

/* ── Load More ──────────────────────────────────────────── */
.ng-cp-load-more {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px 0 8px;
}

/* ── Empty State ────────────────────────────────────────── */
.ng-cp-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    padding: 60px 20px;
    color: var(--c-text-muted);
    font-size: 15px;
    text-align: center;
}
.ng-cp-empty__icon { font-size: 48px; line-height: 1; }

/* ═══════════════════════════════════════════════════════════════
   INLINE PREVIEW — fixed card that anchors to tapped tile
   ═══════════════════════════════════════════════════════════════ */

/* Dim overlay behind the preview card */
.ng-pv-backdrop {
    position: fixed;
    inset: 0;
    z-index: 200;
    background: rgba(0,0,0,0.70);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    opacity: 0;
    transition: opacity 0.22s var(--ease-out);
    pointer-events: none;
}
.ng-pv-backdrop.is-open {
    opacity: 1;
    pointer-events: all;
}

/* The preview card — fixed, 9:16, centered on screen */
.ng-pv-overlay {
    position: fixed;
    /* Centered in viewport */
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0.88);
    /* 9:16 card, max height = 88vh so it never clips nav */
    width: min(340px, 90vw);
    height: min(604px, 88vh);
    border-radius: 18px;
    overflow: hidden;
    background: #000;
    z-index: 210;
    opacity: 0;
    transition:
        opacity 0.25s var(--ease-out),
        transform 0.28s var(--ease-spring);
    box-shadow: 0 24px 80px rgba(0,0,0,0.8),
                0 0 0 1px rgba(255,255,255,0.08);
}
.ng-pv-overlay.is-open {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
}

/* Video fills the card */
.ng-pv-video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 0;
    border-radius: 0; /* contained by parent overflow:hidden */
}

/* Close button — top-left of preview card */
.ng-pv-close {
    position: absolute;
    top: 12px;
    left: 12px;
    z-index: 30;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: rgba(0,0,0,0.55);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255,255,255,0.18);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--c-white);
    transition: background var(--dur-fast), transform var(--dur-fast) var(--ease-spring);
    -webkit-tap-highlight-color: transparent;
}
.ng-pv-close:hover  { background: rgba(255,255,255,0.15); }
.ng-pv-close:active { transform: scale(0.85); }

/* Sidebar — right edge, above the info text */
.ng-pv-sidebar {
    position: absolute;
    right: 8px;
    bottom: 70px;
    z-index: 20;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
}

/* Scale buttons down for the smaller card */
.ng-pv-sidebar .ng-action-btn {
    width: 46px;
}
.ng-pv-sidebar .ng-btn-icon {
    width: 44px;
    height: 44px;
    border-radius: 12px;
}
.ng-pv-sidebar .ng-icon {
    width: 22px;
    height: 22px;
}
.ng-pv-sidebar .ng-action-label {
    font-size: 9px;
    letter-spacing: 0.04em;
}
.ng-pv-sidebar .ng-creator-circle {
    width: 44px;
    height: 44px;
}
.ng-pv-sidebar .ng-creator-circle__img {
    width: 44px;
    height: 44px;
    border-width: 2px;
}
.ng-pv-sidebar .ng-creator-circle__initial {
    width: 44px;
    height: 44px;
    font-size: 18px;
    border-width: 2px;
}

/* Bottom info — sits above bottom edge, left of sidebar */
.ng-pv-info {
    position: absolute;
    bottom: 12px;
    left: 0;
    /* right stops before the sidebar (46px wide + 8px gap + 8px margin) */
    right: 62px;
    z-index: 20;
    padding: 0 12px 8px;
    /* Clicks work on links, rest is passthrough */
    pointer-events: none;
}
.ng-pv-info .ng-credit { font-size: 12px; margin-bottom: 3px; }
.ng-pv-info .ng-credit-link { font-size: 12px; font-weight: 700; }
.ng-pv-info .ng-video-title {
    font-size: 13px;
    font-weight: 700;
    line-height: 1.25;
    margin-bottom: 3px;
    color: var(--c-white);
}
.ng-pv-info .ng-description {
    font-size: 11px;
    color: rgba(240,240,245,0.75);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin-top: 2px;
}
.ng-pv-info .ng-tags { margin-top: 4px; gap: 4px; }
.ng-pv-info .ng-tag  { font-size: 10px; padding: 2px 7px; }
.ng-pv-info .ng-credit,
.ng-pv-info .ng-credit-link,
.ng-pv-info .ng-tag { pointer-events: all; }

/* Scrim gradient */
.ng-pv-overlay .ng-bottom-scrim {
    height: 60%;
}

/* Tap-to-pause — full card, below sidebar/close */
.ng-pv-tap {
    z-index: 10;
}

/* On very small screens, make card a bit narrower */
@media (max-width: 360px) {
    .ng-pv-overlay {
        width: 92vw;
    }
}

/* ═══════════════════════════════════════════════════════════════
   v3 — AUTO-THUMBNAIL SHIMMER STATE
   ═══════════════════════════════════════════════════════════════ */

/* Tile while thumbnail is being captured — pulsing shimmer */
.ng-cp-tile.is-capturing .ng-cp-tile__placeholder {
    background: linear-gradient(
        90deg,
        var(--c-surface)   0%,
        var(--c-surface-2) 40%,
        var(--c-surface)   80%
    );
    background-size: 200% 100%;
    animation: ng-shimmer 1.4s ease-in-out infinite;
}

@keyframes ng-shimmer {
    0%   { background-position: 200% center; }
    100% { background-position: -200% center; }
}

/* Hide the SVG play icon inside placeholder while capturing */
.ng-cp-tile.is-capturing .ng-cp-tile__placeholder svg {
    opacity: 0;
    transition: opacity .2s;
}

/* ── Preview active tile highlight ──────────────────────────── */
.ng-cp-tile--expanded {
    box-shadow: 0 0 0 2px var(--c-accent), 0 0 16px rgba(224,64,251,0.3);
    z-index: 2;
    border-radius: 4px;
}

/* ── Fix sound icon visibility in preview sidebar ──────────── */
/* These need to override the base ng-sound-btn rules */
.ng-pv-sidebar .ng-sound-btn .icon-sound  { display: block; }
.ng-pv-sidebar .ng-sound-btn .icon-muted  { display: none; }
.ng-pv-sidebar .ng-sound-btn.is-muted .icon-sound { display: none; }
.ng-pv-sidebar .ng-sound-btn.is-muted .icon-muted { display: block; }


/* ═══════════════════════════════════════════════════════════════
   SITE LOGO — top-left of feed, desktop-aware
   ═══════════════════════════════════════════════════════════════ */
.ng-logo {
    position: fixed;
    top: calc(env(safe-area-inset-top, 0px) + 14px);
    left: 14px;
    z-index: 80;
    pointer-events: none;
    animation: ng-fade-in var(--dur-slow) var(--ease-out) both;
}
.ng-logo__img {
    height: 28px;
    width: auto;
    object-fit: contain;
    filter: drop-shadow(0 2px 8px rgba(0,0,0,0.6));
}
.ng-logo__text {
    font-family: var(--f-display);
    font-size: 17px;
    font-weight: 800;
    color: var(--c-white);
    letter-spacing: -0.02em;
    text-shadow: 0 2px 10px rgba(0,0,0,0.7);
    background: linear-gradient(90deg, #fff 0%, var(--c-accent) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* ═══════════════════════════════════════════════════════════════
   PULL-TO-REFRESH
   ═══════════════════════════════════════════════════════════════ */
.ng-ptr {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 90;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    transform: translateY(-100%);
    transition: transform 0.25s var(--ease-out);
    pointer-events: none;
    padding-bottom: 10px;
    padding-top: calc(env(safe-area-inset-top, 0px) + 6px);
}
.ng-ptr.is-pulling  { transform: translateY(0); }
.ng-ptr.is-refreshing { transform: translateY(0); }

.ng-ptr__inner {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    background: rgba(10,10,20,0.88);
    backdrop-filter: saturate(180%) blur(16px);
    -webkit-backdrop-filter: saturate(180%) blur(16px);
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 50px;
    color: var(--c-white);
    box-shadow: 0 4px 20px rgba(0,0,0,0.4);
}
.ng-ptr__spinner {
    flex-shrink: 0;
    color: var(--c-accent);
    stroke: var(--c-accent);
    transition: transform 0.3s;
}
.ng-ptr.is-refreshing .ng-ptr__spinner {
    animation: ng-spin 0.8s linear infinite;
}
.ng-ptr.is-ready .ng-ptr__spinner {
    transform: rotate(180deg);
}
@keyframes ng-spin {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}
.ng-ptr__label {
    font-family: var(--f-body);
    font-size: 13px;
    font-weight: 500;
    color: rgba(255,255,255,0.85);
    white-space: nowrap;
}

/* ═══════════════════════════════════════════════════════════════
   DESKTOP FEED FRAME — centered phone view on wide screens
   ═══════════════════════════════════════════════════════════════ */
@media (min-width: 600px) {
    /* Dark flanks */
    body.ng-body {
        background: #000;
    }

    /* Feed stays centered, fixed width */
    .ng-feed {
        left: 50%;
        right: auto;
        width: 420px;
        transform: translateX(-50%);
        box-shadow: 0 0 0 1px rgba(255,255,255,0.06),
                    -40px 0 80px rgba(0,0,0,0.6),
                    40px 0 80px rgba(0,0,0,0.6);
    }

    /* Cards fill the feed width */
    .ng-video-card {
        max-width: 420px;
        margin: 0 auto;
    }

    /* Logo aligns to left edge of the feed */
    .ng-logo {
        left: calc(50% - 210px + 14px);
    }

    /* PTR pill stays above the feed */
    .ng-ptr {
        max-width: 420px;
        left: 50%;
        transform: translateX(-50%) translateY(-100%);
    }
    .ng-ptr.is-pulling,
    .ng-ptr.is-refreshing {
        transform: translateX(-50%) translateY(0);
    }
}

/* ═══════════════════════════════════════════════════════════════
   CREATOR CIRCLE SIDEBAR BUTTON (main feed + preview)
   ═══════════════════════════════════════════════════════════════ */

.ng-creator-btn {
    text-decoration: none;
    color: var(--c-white);
}

/* The circle container */
.ng-creator-circle {
    position: relative;
    width: 52px;
    height: 52px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Photo avatar */
.ng-creator-circle__img {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    object-fit: cover;
    border: 2.5px solid var(--c-white);
    display: block;
    position: relative;
    z-index: 2;
}

/* Initial letter fallback */
.ng-creator-circle__initial {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--c-accent) 0%, #7b2fff 100%);
    border: 2.5px solid rgba(255,255,255,0.8);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--f-display);
    font-size: 22px;
    font-weight: 800;
    color: var(--c-white);
    position: relative;
    z-index: 2;
}

/* Animated purple glow ring when card is active/playing */
.ng-creator-circle__ring {
    position: absolute;
    inset: -4px;
    border-radius: 50%;
    border: 2.5px solid var(--c-accent);
    opacity: 0;
    transform: scale(0.85);
    transition: opacity var(--dur-base), transform var(--dur-base) var(--ease-spring);
    z-index: 1;
    box-shadow: 0 0 12px rgba(224,64,251,0.6);
}

/* Show ring when the card is playing */
.ng-video-card.is-active .ng-creator-circle__ring {
    opacity: 1;
    transform: scale(1);
    animation: ng-ring-pulse 2.4s ease-in-out infinite;
}

@keyframes ng-ring-pulse {
    0%, 100% { box-shadow: 0 0 10px rgba(224,64,251,0.5); }
    50%       { box-shadow: 0 0 22px rgba(224,64,251,0.9); }
}

.ng-creator-btn:active .ng-creator-circle__img,
.ng-creator-btn:active .ng-creator-circle__initial {
    transform: scale(0.90);
    transition: transform 0.1s;
}

/* Download button — cyan accent */
.ng-download-btn {
    text-decoration: none;
    color: var(--c-accent-2);
}
.ng-download-btn .ng-btn-icon {
    background: rgba(0,20,28,0.80);
    border-color: rgba(0,229,255,0.20);
}
.ng-download-btn .ng-icon {
    stroke: var(--c-accent-2);
    width: 28px;
    height: 28px;
    stroke-width: 2;
}
.ng-download-btn .ng-action-label {
    color: var(--c-accent-2);
    font-weight: 700;
    letter-spacing: 0.08em;
}
.ng-download-btn:hover .ng-btn-icon,
.ng-download-btn:focus-visible .ng-btn-icon {
    border-color: rgba(0,229,255,0.45);
    background: rgba(0,229,255,0.10);
}

/* Like btn liked state */
.ng-like-btn.is-liked .ng-action-label { color: var(--c-like); }

/* ── Preview tile highlight (active tile in grid) ──────── */
.ng-cp-tile--expanded {
    box-shadow: 0 0 0 2px var(--c-accent), 0 0 16px rgba(224,64,251,0.3);
    z-index: 2;
    border-radius: 4px;
    /* Keep the tile itself at normal size — the overlay is fixed-position */
}

/* ── Preview sidebar sound icon fix ───────────────────── */
.ng-pv-sidebar .ng-sound-btn .icon-sound  { display: block; }
.ng-pv-sidebar .ng-sound-btn .icon-muted  { display: none; }
.ng-pv-sidebar .ng-sound-btn.is-muted .icon-sound { display: none; }
.ng-pv-sidebar .ng-sound-btn.is-muted .icon-muted { display: block; }

/* ── Shimmer for auto-thumbnail capture ────────────────── */
.ng-cp-tile.is-capturing .ng-cp-tile__placeholder {
    background: linear-gradient(
        90deg,
        var(--c-surface)   0%,
        var(--c-surface-2) 40%,
        var(--c-surface)   80%
    );
    background-size: 200% 100%;
    animation: ng-shimmer 1.4s ease-in-out infinite;
}
@keyframes ng-shimmer {
    0%   { background-position: 200% center; }
    100% { background-position: -200% center; }
}
.ng-cp-tile.is-capturing .ng-cp-tile__placeholder svg {
    opacity: 0;
}