/* Font Awesome for icons */
@import url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css');

/* =====================================================
   NAVESAGRAM - Neon Noir Theme
   Holographic Social Feed for Navesa
   ===================================================== */

/* ═══════════════════════════════════════════════════════
   CSS VARIABLES - NEON NOIR PALETTE
   ═══════════════════════════════════════════════════════ */

.navesagram-view {
    /* Core Noir Colors - Deep Abyss */
    --ng-void-deep: #050510;
    --ng-void-dark: #0a0a18;
    --ng-void-medium: #0f0f20;
    --ng-void-light: #1a1a2e;
    --ng-void-glow: #252540;

    /* Primary - Neon Pink/Magenta */
    --ng-arcane: #ff00aa;
    --ng-arcane-light: #ff44bb;
    --ng-arcane-bright: #ff77cc;
    --ng-arcane-dark: #cc0088;
    --ng-arcane-deep: #990066;

    /* Secondary - Electric Cyan */
    --ng-ethereal: #00ffff;
    --ng-ethereal-light: #44ffff;
    --ng-ethereal-bright: #88ffff;
    --ng-ethereal-dark: #00cccc;

    /* Accent - Holographic Purple */
    --ng-holy: #9d00ff;
    --ng-holy-light: #b344ff;
    --ng-holy-bright: #cc77ff;
    --ng-holy-dark: #7700cc;

    /* Accent 2 - Void Pink (same as primary for cohesion) */
    --ng-voidpink: #ff00aa;
    --ng-voidpink-light: #ff44bb;
    --ng-voidpink-dark: #cc0088;

    /* UI Colors - Glassmorphism */
    --ng-card-bg: rgba(5, 5, 16, 0.7);
    --ng-card-border: rgba(255, 0, 170, 0.15);
    --ng-card-border-hover: rgba(255, 0, 170, 0.4);

    --ng-text: #ffffff;
    --ng-text-secondary: #e0e0f0;
    --ng-text-muted: rgba(255, 255, 255, 0.5);
    --ng-text-dim: rgba(255, 255, 255, 0.35);
    --ng-text-arcane: #ff77cc;

    /* Gradients - Neon Noir */
    --ng-gradient-void: linear-gradient(135deg, #050510 0%, #0a0a18 50%, #050510 100%);
    --ng-gradient-arcane: linear-gradient(135deg, #ff00aa 0%, #cc0088 100%);
    --ng-gradient-ethereal: linear-gradient(135deg, #00ffff 0%, #00cccc 100%);
    --ng-gradient-holy: linear-gradient(135deg, #9d00ff 0%, #7700cc 100%);
    --ng-gradient-epic: linear-gradient(135deg, #ff00aa 0%, #00ffff 50%, #9d00ff 100%);
    --ng-gradient-card: linear-gradient(180deg, rgba(255, 0, 170, 0.08) 0%, rgba(5, 5, 16, 0.9) 100%);
    --ng-gradient-holo: linear-gradient(135deg, #ff00aa, #00ffff, #9d00ff, #ff00aa);

    /* Glows - Neon Noir */
    --ng-glow-arcane: 0 0 20px rgba(255, 0, 170, 0.4), 0 0 40px rgba(255, 0, 170, 0.2);
    --ng-glow-ethereal: 0 0 20px rgba(0, 255, 255, 0.4), 0 0 40px rgba(0, 255, 255, 0.2);
    --ng-glow-holy: 0 0 20px rgba(157, 0, 255, 0.4), 0 0 40px rgba(157, 0, 255, 0.2);
    --ng-glow-intense: 0 0 30px rgba(255, 0, 170, 0.6), 0 0 60px rgba(255, 0, 170, 0.3);
}

/* ═══════════════════════════════════════════════════════
   MAIN CONTAINER
   ═══════════════════════════════════════════════════════ */

.navesagram-view {
    position: relative;
    min-height: 100vh;
    max-height: 100vh;
    height: 100vh;
    background: var(--ng-gradient-void);
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    color: var(--ng-text);
    overflow-x: hidden;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    padding-bottom: 75px; /* Bottom nav height */
    /* Hide scrollbar to maintain symmetric button alignment */
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* IE/Edge */
}

/* Hide scrollbar for Chrome/Safari/Opera */
.navesagram-view::-webkit-scrollbar {
    display: none;
}

/* Neon Noir Background - Animated Gradient Mesh */
.ng-void-bg {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: var(--ng-void-deep);
    z-index: 0;
    pointer-events: none;
}

/* Animated gradient mesh orbs */
.ng-void-bg::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background:
        radial-gradient(ellipse at 20% 20%, rgba(157, 0, 255, 0.2) 0%, transparent 50%),
        radial-gradient(ellipse at 80% 80%, rgba(255, 0, 170, 0.2) 0%, transparent 50%),
        radial-gradient(ellipse at 50% 50%, rgba(0, 255, 255, 0.12) 0%, transparent 50%);
    animation: ng-meshMove 12s ease-in-out infinite;
}

/* Secondary mesh layer for depth */
.ng-void-bg::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background:
        radial-gradient(ellipse at 70% 30%, rgba(255, 0, 170, 0.15) 0%, transparent 40%),
        radial-gradient(ellipse at 30% 70%, rgba(0, 255, 255, 0.1) 0%, transparent 40%);
    animation: ng-meshMove 12s ease-in-out infinite reverse;
    animation-delay: -6s;
}

@keyframes ng-meshMove {
    0%, 100% {
        opacity: 0.8;
        transform: scale(1) rotate(0deg);
    }
    33% {
        opacity: 1;
        transform: scale(1.05) rotate(2deg);
    }
    66% {
        opacity: 0.9;
        transform: scale(1.02) rotate(-1deg);
    }
}

/* Particles Container */
.ng-particles {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 1;
    overflow: hidden;
}

.ng-particle {
    position: absolute;
    border-radius: 50%;
    animation: ng-floatUp 20s infinite ease-in-out;
}

.ng-particle.orb {
    width: 6px;
    height: 6px;
    background: var(--ng-arcane-light);
    box-shadow: 0 0 10px var(--ng-arcane), 0 0 20px var(--ng-arcane);
}

.ng-particle.wisp {
    width: 4px;
    height: 4px;
    background: var(--ng-ethereal);
    box-shadow: 0 0 8px var(--ng-ethereal);
}

.ng-particle.spark {
    width: 3px;
    height: 3px;
    background: var(--ng-holy-light);
    box-shadow: 0 0 6px var(--ng-holy);
}

@keyframes ng-floatUp {
    0% { transform: translateY(100vh) scale(0); opacity: 0; }
    10% { opacity: 0.8; transform: translateY(80vh) scale(1); }
    90% { opacity: 0.8; transform: translateY(10vh) scale(1); }
    100% { transform: translateY(-10vh) scale(0); opacity: 0; }
}

/* ═══════════════════════════════════════════════════════
   HEADER - NEON NOIR GLASSMORPHISM
   ═══════════════════════════════════════════════════════ */

.ng-header {
    position: sticky;
    top: 0;
    left: 0;
    right: 0;
    min-height: 72px !important;
    height: 72px !important;
    background: rgba(5, 5, 16, 0.85);
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 20px !important;
    z-index: 100;
    border-bottom: 1px solid rgba(255, 0, 170, 0.2);
}

/* Subtle glow accent */
.ng-header-glow {
    position: absolute;
    top: 50%;
    left: 15%;
    width: 120px;
    height: 120px;
    background: radial-gradient(circle, rgba(255, 0, 170, 0.2) 0%, transparent 70%);
    transform: translateY(-50%);
    filter: blur(40px);
    pointer-events: none;
    z-index: 0;
}

/* Bottom gradient line - holographic */
.ng-header::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg,
        transparent 5%,
        var(--ng-arcane) 25%,
        var(--ng-ethereal) 50%,
        var(--ng-holy) 75%,
        transparent 95%);
    opacity: 0.6;
}

.ng-logo {
    display: flex;
    align-items: center;
    gap: 12px;
    position: relative;
    z-index: 1;
}

/* Logo icon - holographic border */
.ng-logo-icon {
    width: 46px;
    height: 46px;
    background: rgba(5, 5, 16, 0.8);
    border: 2px solid transparent;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    box-shadow: 0 0 20px rgba(255, 0, 170, 0.3);
}

/* Gradient border effect */
.ng-logo-icon::before {
    content: '';
    position: absolute;
    inset: -2px;
    border-radius: 16px;
    padding: 2px;
    background: var(--ng-gradient-epic);
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
}

.ng-logo-icon i {
    font-size: 20px;
    background: var(--ng-gradient-epic);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    filter: drop-shadow(0 0 8px rgba(255, 0, 170, 0.5));
}

/* Logo text - gradient */
.ng-logo-text {
    font-family: 'Audiowide', 'Sora', sans-serif;
    font-size: 22px;
    font-weight: 400;
    background: linear-gradient(90deg, var(--ng-arcane), var(--ng-ethereal));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    filter: drop-shadow(0 0 12px rgba(255, 0, 170, 0.4));
    letter-spacing: 1px;
}

.ng-logo-text .highlight {
    background: var(--ng-gradient-epic);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Header actions */
.ng-header-actions {
    display: flex;
    gap: 10px;
    position: relative;
    z-index: 1;
}

.ng-header-btn {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 0, 170, 0.2);
    color: rgba(255, 255, 255, 0.6);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 19px;
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;
}

.ng-header-btn:hover {
    background: rgba(255, 0, 170, 0.1);
    border-color: var(--ng-arcane);
    color: var(--ng-arcane);
    box-shadow: 0 0 20px rgba(255, 0, 170, 0.3);
}

.ng-header-btn:active {
    transform: scale(0.95);
    background: var(--ng-arcane);
    color: #fff;
    box-shadow: var(--ng-glow-arcane);
}

.ng-header-btn .badge {
    position: absolute;
    top: -4px;
    right: -4px;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    background: var(--ng-gradient-ethereal);
    border-radius: 8px;
    font-size: 10px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--ng-void-deep);
    box-shadow: 0 0 10px rgba(0, 255, 255, 0.5);
}

/* ═══════════════════════════════════════════════════════
   HOLOGRAPHIC STATS PANEL (Group Stats)
   ═══════════════════════════════════════════════════════ */

.ng-stats-section {
    padding: 12px 16px 12px;
    position: relative;
    z-index: 2;
}

/* Holographic Panel - Glassmorphism with gradient border */
.ng-cyber-strip {
    background: linear-gradient(135deg,
        rgba(255, 0, 170, 0.08) 0%,
        rgba(0, 255, 255, 0.04) 50%,
        rgba(157, 0, 255, 0.08) 100%);
    border: 1px solid transparent;
    border-radius: 16px;
    padding: 16px 20px 18px;
    position: relative;
    overflow: hidden;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

/* Gradient border using mask technique */
.ng-cyber-strip::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 16px;
    padding: 1px;
    background: linear-gradient(135deg, var(--ng-arcane), var(--ng-ethereal), var(--ng-holy));
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
}

/* Holographic shimmer effect */
.ng-cyber-strip::after {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: linear-gradient(
        45deg,
        transparent 30%,
        rgba(255, 255, 255, 0.04) 50%,
        transparent 70%
    );
    animation: holoShimmer 4s ease-in-out infinite;
    pointer-events: none;
}

@keyframes holoShimmer {
    0% { transform: translateX(-100%) rotate(45deg); }
    100% { transform: translateX(100%) rotate(45deg); }
}

/* Hide old cyberpunk corners */
.ng-cyber-corner {
    display: none;
}

/* Hide scan lines - replaced with shimmer */
.ng-cyber-scan {
    display: none;
}

/* Header - Refined */
.ng-cyber-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 14px;
    padding-bottom: 10px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    position: relative;
    z-index: 1;
}

.ng-cyber-label {
    font-family: 'Exo 2', 'Rajdhani', sans-serif;
    font-size: 0.7rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.6);
    letter-spacing: 2px;
    text-transform: uppercase;
}

.ng-cyber-status {
    display: flex;
    align-items: center;
    gap: 6px;
    font-family: 'Exo 2', sans-serif;
    font-size: 0.6rem;
    font-weight: 500;
    color: var(--ng-ethereal);
    letter-spacing: 1px;
}

.ng-cyber-dot {
    width: 6px;
    height: 6px;
    background: var(--ng-ethereal);
    border-radius: 50%;
    box-shadow: 0 0 8px var(--ng-ethereal);
    animation: holoPulse 2s ease-in-out infinite;
}

@keyframes holoPulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.5; transform: scale(0.9); }
}

/* Stats Grid */
.ng-cyber-stats {
    display: flex;
    justify-content: space-around;
    position: relative;
    z-index: 1;
}

.ng-cyber-stat {
    text-align: center;
    position: relative;
}

.ng-cyber-num {
    font-family: 'Orbitron', monospace;
    font-size: 2rem;
    font-weight: 700;
    line-height: 1;
    letter-spacing: 2px;
    display: block;
    transition: all 0.3s ease;
}

.ng-cyber-num:hover {
    transform: scale(1.1);
}

/* Gradient text for stats */
.ng-cyber-num.cyan {
    background: linear-gradient(180deg, #fff 0%, var(--ng-ethereal) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    filter: drop-shadow(0 0 15px rgba(0, 255, 255, 0.5));
}

.ng-cyber-num.magenta {
    background: linear-gradient(180deg, #fff 0%, var(--ng-arcane) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    filter: drop-shadow(0 0 15px rgba(255, 0, 170, 0.5));
}

.ng-cyber-num.violet {
    background: linear-gradient(180deg, #fff 0%, var(--ng-holy) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    filter: drop-shadow(0 0 15px rgba(157, 0, 255, 0.5));
}

/* Hide animated bars - cleaner look */
.ng-cyber-bar {
    display: none;
}

.ng-cyber-stat-label {
    font-family: 'Exo 2', sans-serif;
    font-size: 0.65rem;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.4);
    text-transform: uppercase;
    letter-spacing: 2px;
    margin-top: 6px;
}

/* ═══════════════════════════════════════════════════════
   PHOTO CHALLENGE - HOLOGRAPHIC CARD
   ═══════════════════════════════════════════════════════ */

.ng-challenge-section {
    padding: 0 16px 12px;
    position: relative;
    z-index: 2;
}

/* Holographic Challenge Card */
.ng-challenge-card {
    background: linear-gradient(135deg,
        rgba(0, 255, 255, 0.06) 0%,
        rgba(255, 0, 170, 0.04) 50%,
        rgba(157, 0, 255, 0.06) 100%);
    border: 1px solid transparent;
    border-radius: 16px;
    padding: 16px 18px;
    position: relative;
    overflow: hidden;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

/* Gradient border */
.ng-challenge-card::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 16px;
    padding: 1px;
    background: linear-gradient(135deg, var(--ng-ethereal), var(--ng-arcane), var(--ng-holy));
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
}

/* Shimmer effect */
.ng-challenge-card::after {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: linear-gradient(
        45deg,
        transparent 30%,
        rgba(255, 255, 255, 0.03) 50%,
        transparent 70%
    );
    animation: holoShimmer 5s ease-in-out infinite;
    animation-delay: -2s;
    pointer-events: none;
}

/* Hide old scan line */
.ng-challenge-scan {
    display: none;
}

.ng-challenge-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
    position: relative;
    z-index: 1;
}

.ng-challenge-label {
    font-family: 'Exo 2', sans-serif;
    font-size: 0.65rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: rgba(255, 255, 255, 0.5);
}

.ng-challenge-label::before {
    display: none;
}

.ng-challenge-timer {
    font-family: 'Orbitron', monospace;
    font-size: 0.85rem;
    background: linear-gradient(90deg, var(--ng-arcane), var(--ng-ethereal));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    filter: drop-shadow(0 0 8px rgba(255, 0, 170, 0.4));
}

.ng-challenge-title {
    font-family: 'Audiowide', 'Exo 2', sans-serif;
    font-size: 1.1rem;
    font-weight: 400;
    margin-bottom: 6px;
    background: linear-gradient(90deg, var(--ng-arcane), var(--ng-ethereal));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    filter: drop-shadow(0 0 10px rgba(255, 0, 170, 0.3));
    position: relative;
    z-index: 1;
}

.ng-challenge-desc {
    font-family: 'Exo 2', sans-serif;
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.5);
    margin-bottom: 14px;
    position: relative;
    z-index: 1;
}

.ng-challenge-stats {
    display: flex;
    gap: 28px;
    position: relative;
    z-index: 1;
}

.ng-challenge-stat {
    display: flex;
    flex-direction: column;
}

.ng-challenge-stat-value {
    font-family: 'Orbitron', monospace;
    font-size: 1.2rem;
    font-weight: 700;
    background: linear-gradient(180deg, #fff 0%, var(--ng-ethereal) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    filter: drop-shadow(0 0 10px rgba(0, 255, 255, 0.4));
}

.ng-challenge-stat:nth-child(2) .ng-challenge-stat-value {
    background: linear-gradient(180deg, #fff 0%, var(--ng-holy) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    filter: drop-shadow(0 0 10px rgba(157, 0, 255, 0.4));
}

.ng-challenge-stat-label {
    font-family: 'Exo 2', sans-serif;
    font-size: 0.6rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: rgba(255, 255, 255, 0.4);
    margin-top: 2px;
}

/* Challenge hidden state */
.ng-challenge-section.hidden {
    display: none;
}

/* ═══════════════════════════════════════════════════════
   STORIES SECTION (Legacy - Hidden)
   ═══════════════════════════════════════════════════════ */

.ng-stories {
    display: none; /* Hidden - replaced by stats */
    padding: 14px 0;
    border-bottom: 1px solid var(--ng-card-border);
    position: relative;
    z-index: 2;
}

.ng-stories::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--ng-arcane), var(--ng-ethereal), var(--ng-arcane), transparent);
    opacity: 0.3;
}

.ng-stories-scroll {
    display: flex;
    gap: 12px;
    overflow-x: auto;
    padding: 0 16px;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
}

.ng-stories-scroll::-webkit-scrollbar { display: none; }

.ng-story-item {
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    cursor: pointer;
}

.ng-story-ring {
    width: 68px;
    height: 68px;
    border-radius: 50%;
    padding: 3px;
    background: var(--ng-gradient-epic);
    position: relative;
    transition: all 0.3s ease;
}

.ng-story-ring.viewed {
    background: var(--ng-void-light);
}

.ng-story-ring::before {
    content: '';
    position: absolute;
    inset: -2px;
    border-radius: 50%;
    background: var(--ng-gradient-epic);
    opacity: 0;
    filter: blur(8px);
    transition: opacity 0.3s ease;
    z-index: -1;
}

.ng-story-item:active .ng-story-ring::before {
    opacity: 0.6;
}

.ng-story-ring.add-story {
    background: var(--ng-void-light);
    border: 2px dashed var(--ng-arcane);
    padding: 1px;
}

.ng-story-avatar {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
    border: 3px solid var(--ng-void-deep);
}

.ng-story-ring .add-icon {
    position: absolute;
    bottom: -2px;
    right: -2px;
    width: 24px;
    height: 24px;
    background: var(--ng-gradient-arcane);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    color: white;
    border: 2px solid var(--ng-void-deep);
    box-shadow: var(--ng-glow-arcane);
}

.ng-story-name {
    font-size: 11px;
    color: var(--ng-text-muted);
    max-width: 68px;
    text-align: center;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ═══════════════════════════════════════════════════════
   FEED
   ═══════════════════════════════════════════════════════ */

.ng-feed {
    position: relative;
    z-index: 2;
    padding: 8px 0 20px;
    flex: 1;
    display: flex;
    flex-direction: column;
}

/* ═══════════════════════════════════════════════════════
   POST CARD - NEON NOIR HOLOGRAPHIC
   ═══════════════════════════════════════════════════════ */

.ng-post {
    background: rgba(255, 255, 255, 0.02);
    margin: 12px 16px;
    border-radius: 20px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    position: relative;
    overflow: hidden;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

/* Subtle gradient border */
.ng-post::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 20px;
    padding: 1px;
    background: var(--element-gradient, linear-gradient(135deg, rgba(255, 0, 170, 0.4), rgba(0, 255, 255, 0.3), rgba(157, 0, 255, 0.4)));
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    opacity: 0.6;
    z-index: 0;
    pointer-events: none;
}

/* Soft glow effect */
.ng-post::after {
    content: '';
    position: absolute;
    inset: -20px;
    background: var(--element-glow, radial-gradient(circle, rgba(255, 0, 170, 0.1) 0%, transparent 70%));
    filter: blur(25px);
    opacity: 0.5;
    z-index: -1;
    pointer-events: none;
}

/* Type indicator - Morphing Pill Menu */
.ng-type-indicator {
    position: absolute;
    top: 12px;
    right: 12px;
    min-width: 44px;
    height: 44px;
    border-radius: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 12px;
    gap: 0;
    font-size: 16px;
    color: white;
    z-index: 10;
    background: var(--element-gradient, var(--ng-gradient-arcane));
    box-shadow: var(--element-shadow, 0 0 20px rgba(139, 92, 246, 0.5));
    cursor: pointer;
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.ng-type-indicator:active {
    transform: scale(0.95);
}

.ng-type-indicator .ng-menu-icon {
    transition: all 0.3s ease;
    flex-shrink: 0;
}

.ng-type-indicator .ng-menu-items {
    display: flex;
    align-items: center;
    gap: 6px;
    max-width: 0;
    opacity: 0;
    overflow: hidden;
    pointer-events: none;
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.ng-type-indicator.open {
    min-width: 220px;
    gap: 10px;
    padding: 0 6px 0 14px;
    z-index: 100;
}

.ng-type-indicator.open .ng-menu-items {
    max-width: 200px;
    opacity: 1;
    overflow: visible;
    pointer-events: auto;
}

.ng-type-indicator.open .ng-menu-icon {
    transform: rotate(90deg);
}

.ng-menu-btn {
    width: 36px !important;
    height: 36px !important;
    min-width: 36px !important;
    min-height: 36px !important;
    border-radius: 50% !important;
    background: rgba(255, 255, 255, 0.2) !important;
    border: none !important;
    color: white !important;
    cursor: pointer !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 13px !important;
    transition: all 0.2s ease;
    flex-shrink: 0;
    padding: 0 !important;
    margin: 0 !important;
    line-height: 1 !important;
    pointer-events: auto !important;
    position: relative;
    z-index: 10;
}

.ng-menu-btn:active {
    transform: scale(0.85);
    background: rgba(255, 255, 255, 0.4);
}

.ng-menu-btn.danger {
    background: rgba(239, 68, 68, 0.4);
}

/* Menu backdrop */
.ng-menu-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.3);
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
    z-index: 5;
    pointer-events: none;
}

.ng-menu-backdrop.show {
    opacity: 1;
    visibility: visible;
}

/* ═══════════════════════════════════════════════════════
   EDIT POST MODAL
   ═══════════════════════════════════════════════════════ */

.ng-edit-modal {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.ng-edit-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.85);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.ng-edit-container {
    position: relative;
    width: 100%;
    max-width: 500px;
    background: linear-gradient(180deg, rgba(30, 20, 50, 0.98) 0%, rgba(15, 10, 30, 0.98) 100%);
    border-radius: 20px;
    border: 1px solid rgba(139, 92, 246, 0.3);
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5),
                0 0 40px rgba(139, 92, 246, 0.2);
    overflow: hidden;
    animation: editModalSlideUp 0.3s ease;
}

@keyframes editModalSlideUp {
    from {
        opacity: 0;
        transform: translateY(30px) scale(0.95);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.ng-edit-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    border-bottom: 1px solid rgba(139, 92, 246, 0.2);
    background: rgba(139, 92, 246, 0.1);
}

.ng-edit-title {
    font-family: 'Playfair Display', serif;
    font-size: 18px;
    font-weight: 500;
    color: #fff;
}

.ng-edit-cancel {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.1);
    border: none;
    color: rgba(255, 255, 255, 0.7);
    font-size: 16px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
}

.ng-edit-cancel:active {
    transform: scale(0.9);
    background: rgba(255, 255, 255, 0.2);
}

.ng-edit-save {
    padding: 8px 20px;
    border-radius: 20px;
    background: linear-gradient(135deg, #8B5CF6 0%, #6D28D9 100%);
    border: none;
    color: #fff;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

.ng-edit-save:active {
    transform: scale(0.95);
}

.ng-edit-save:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

.ng-edit-body {
    padding: 20px;
}

.ng-edit-textarea {
    width: 100%;
    min-height: 150px;
    padding: 16px;
    border-radius: 12px;
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(139, 92, 246, 0.2);
    color: #fff;
    font-family: 'Inter', sans-serif;
    font-size: 16px;
    line-height: 1.5;
    resize: vertical;
    transition: border-color 0.2s ease;
}

.ng-edit-textarea:focus {
    outline: none;
    border-color: rgba(139, 92, 246, 0.5);
    box-shadow: 0 0 20px rgba(139, 92, 246, 0.15);
}

.ng-edit-textarea::placeholder {
    color: rgba(255, 255, 255, 0.4);
}

/* Corner accents */
.ng-corner-accent {
    position: absolute;
    width: 50px;
    height: 50px;
    z-index: 0;
    pointer-events: none;
}

.ng-corner-accent.top-left {
    top: 0;
    left: 0;
    border-top: 2px solid var(--element-primary, var(--ng-arcane));
    border-left: 2px solid var(--element-primary, var(--ng-arcane));
    border-radius: 20px 0 0 0;
    opacity: 0.4;
}

.ng-corner-accent.bottom-right {
    bottom: 0;
    right: 0;
    border-bottom: 2px solid var(--element-primary, var(--ng-arcane));
    border-right: 2px solid var(--element-primary, var(--ng-arcane));
    border-radius: 0 0 20px 0;
    opacity: 0.4;
}

/* Element particles container */
.ng-element-particles {
    position: absolute;
    inset: 0;
    pointer-events: none;
    overflow: hidden;
    border-radius: 20px;
    z-index: 0;
}

.ng-element-particle {
    position: absolute;
    border-radius: 50%;
    background: var(--element-primary, var(--ng-arcane));
    box-shadow: 0 0 10px var(--element-primary, var(--ng-arcane));
    animation: ng-particle-float 4s ease-in-out infinite;
    opacity: 0.6;
}

@keyframes ng-particle-float {
    0%, 100% { transform: translateY(0) scale(1); opacity: 0.6; }
    50% { transform: translateY(-15px) scale(1.2); opacity: 0.3; }
}

/* ═══════════════════════════════════════════════════════
   PHOTO POST - Water/Ice Element (Cyan)
   ═══════════════════════════════════════════════════════ */

.ng-post.type-photo {
    --element-gradient: linear-gradient(135deg, #06B6D4, #0891B2, #22D3EE);
    --element-glow: radial-gradient(circle, rgba(6, 182, 212, 0.25) 0%, transparent 70%);
    --element-primary: #06B6D4;
    --element-secondary: #22D3EE;
    --element-shadow: 0 0 20px rgba(6, 182, 212, 0.5);
}

.ng-post.type-photo .ng-post-avatar-ring {
    background: linear-gradient(135deg, #06B6D4, #0891B2);
}

.ng-post.type-photo .ng-post-tag {
    background: rgba(6, 182, 212, 0.2);
    color: #22D3EE;
    border: 1px solid rgba(6, 182, 212, 0.3);
}

.ng-post.type-photo .ng-post-media {
    border: 2px solid rgba(6, 182, 212, 0.3);
    box-shadow: inset 0 0 30px rgba(6, 182, 212, 0.1);
}

.ng-post.type-photo .hashtag { color: #22D3EE; }

/* ═══════════════════════════════════════════════════════
   VIDEO POST - Arcane/Void Element (Purple)
   ═══════════════════════════════════════════════════════ */

.ng-post.type-video {
    --element-gradient: linear-gradient(135deg, #8B5CF6, #7C3AED, #A78BFA);
    --element-glow: radial-gradient(circle, rgba(139, 92, 246, 0.25) 0%, transparent 70%);
    --element-primary: #8B5CF6;
    --element-secondary: #A78BFA;
    --element-shadow: 0 0 20px rgba(139, 92, 246, 0.5);
}

.ng-post.type-video .ng-post-avatar-ring {
    background: linear-gradient(135deg, #8B5CF6, #7C3AED);
}

.ng-post.type-video .ng-post-tag {
    background: rgba(139, 92, 246, 0.2);
    color: #A78BFA;
    border: 1px solid rgba(139, 92, 246, 0.3);
}

.ng-post.type-video .ng-post-media {
    border: 2px solid rgba(139, 92, 246, 0.3);
    box-shadow: inset 0 0 30px rgba(139, 92, 246, 0.1);
}

.ng-post.type-video .ng-video-play-overlay {
    background: rgba(139, 92, 246, 0.9);
    box-shadow: 0 0 40px rgba(139, 92, 246, 0.6);
}

.ng-post.type-video .hashtag { color: #A78BFA; }

/* ═══════════════════════════════════════════════════════
   VOICE POST - Fire/Holy Element (Gold)
   ═══════════════════════════════════════════════════════ */

.ng-post.type-voice {
    --element-gradient: linear-gradient(135deg, #F59E0B, #D97706, #FBBF24);
    --element-glow: radial-gradient(circle, rgba(245, 158, 11, 0.25) 0%, transparent 70%);
    --element-primary: #F59E0B;
    --element-secondary: #FBBF24;
    --element-shadow: 0 0 20px rgba(245, 158, 11, 0.5);
}

.ng-post.type-voice .ng-post-avatar-ring {
    background: linear-gradient(135deg, #F59E0B, #D97706);
}

.ng-post.type-voice .ng-post-tag {
    background: rgba(245, 158, 11, 0.2);
    color: #FBBF24;
    border: 1px solid rgba(245, 158, 11, 0.3);
}

.ng-post.type-voice .ng-voice-container {
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.15), rgba(217, 119, 6, 0.1));
    border: 2px solid rgba(245, 158, 11, 0.3);
    box-shadow: inset 0 0 30px rgba(245, 158, 11, 0.1);
    border-radius: 16px;
    margin: 0 16px;
    padding: 16px;
}

.ng-post.type-voice .ng-voice-play-btn {
    background: linear-gradient(135deg, #F59E0B, #D97706);
    box-shadow: 0 0 25px rgba(245, 158, 11, 0.5);
}

.ng-post.type-voice .ng-wave-bar {
    background: linear-gradient(180deg, #FBBF24, #F59E0B);
}

.ng-post.type-voice .hashtag { color: #FBBF24; }

/* ═══════════════════════════════════════════════════════
   TEXT POST - Soul/Spirit Element (Pink)
   ═══════════════════════════════════════════════════════ */

.ng-post.type-text {
    --element-gradient: linear-gradient(135deg, #EC4899, #DB2777, #F472B6);
    --element-glow: radial-gradient(circle, rgba(236, 72, 153, 0.25) 0%, transparent 70%);
    --element-primary: #EC4899;
    --element-secondary: #F472B6;
    --element-shadow: 0 0 20px rgba(236, 72, 153, 0.5);
}

.ng-post.type-text .ng-post-avatar-ring {
    background: linear-gradient(135deg, #EC4899, #DB2777);
}

.ng-post.type-text .ng-post-tag {
    background: rgba(236, 72, 153, 0.2);
    color: #F472B6;
    border: 1px solid rgba(236, 72, 153, 0.3);
}

.ng-post.type-text .ng-text-content {
    background: linear-gradient(135deg, rgba(236, 72, 153, 0.1), rgba(219, 39, 119, 0.05));
    border-left: 3px solid #EC4899;
    padding: 16px 20px;
    margin: 0 16px 12px;
    border-radius: 0 12px 12px 0;
    font-size: 15px;
    line-height: 1.6;
}

.ng-post.type-text .hashtag { color: #F472B6; }

/* Post Header */
.ng-post-header {
    display: flex;
    align-items: center;
    padding: 12px 16px;
    gap: 12px;
}

.ng-post-avatar-ring {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    padding: 2px;
    background: var(--ng-gradient-arcane);
    flex-shrink: 0;
}

.ng-post-avatar {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid var(--ng-void-deep);
}

.ng-post-user-info {
    flex: 1;
    min-width: 0;
}

.ng-post-username {
    font-size: 14px;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 6px;
}

.ng-verified-badge {
    width: 16px;
    height: 16px;
    background: var(--ng-gradient-ethereal);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 8px;
    color: var(--ng-void-deep);
}

.ng-post-meta {
    font-size: 12px;
    color: var(--ng-text-muted);
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 2px;
}

.ng-post-tag {
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 10px;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.ng-post-tag.gossip {
    background: rgba(236, 72, 153, 0.2);
    color: var(--ng-voidpink-light);
    border: 1px solid rgba(236, 72, 153, 0.3);
}

.ng-post-tag.news {
    background: rgba(6, 182, 212, 0.2);
    color: var(--ng-ethereal-light);
    border: 1px solid rgba(6, 182, 212, 0.3);
}

.ng-post-tag.fun {
    background: rgba(245, 158, 11, 0.2);
    color: var(--ng-holy-light);
    border: 1px solid rgba(245, 158, 11, 0.3);
}

.ng-post-tag.general {
    background: rgba(139, 92, 246, 0.2);
    color: var(--ng-arcane-light);
    border: 1px solid rgba(139, 92, 246, 0.3);
}

.ng-post-menu-btn {
    /* Hidden - replaced by morphing pill menu in type indicator */
    display: none;
}

.ng-post-menu-btn:active {
    background: rgba(139, 92, 246, 0.2);
    color: var(--ng-arcane-light);
}

/* Post Media */
.ng-post-media {
    position: relative;
    width: calc(100% - 32px);
    margin: 8px 16px;
    background: var(--ng-void-dark);
    overflow: hidden;
    border-radius: 12px;
}

.ng-post-media img,
.ng-post-media video {
    display: block;
    width: 100%;
    height: auto;
    max-height: 500px;
    object-fit: contain;
    border-radius: 12px;
}

/* Square variant (optional - for forced square crops) */
.ng-post-media.square {
    width: calc(100% - 32px);
}

.ng-post-media.square img,
.ng-post-media.square video {
    width: 100%;
    height: auto;
    max-height: 500px;
    object-fit: contain;
}

/* GIF in text posts */
.ng-post-media.gif {
    max-height: 400px;
    border-radius: 12px;
    margin: 8px 16px;
    width: calc(100% - 32px);
}

.ng-post-media.gif img {
    width: 100%;
    height: auto;
    max-height: 400px;
    object-fit: contain;
    border-radius: 12px;
}

/* Double Tap Heart */
.ng-double-tap-heart {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0);
    font-size: 100px;
    color: var(--ng-voidpink);
    pointer-events: none;
    z-index: 10;
    opacity: 0;
    filter: drop-shadow(0 0 30px var(--ng-voidpink));
}

.ng-double-tap-heart.animate {
    animation: ng-heartBurst 0.9s ease forwards;
}

@keyframes ng-heartBurst {
    0% { transform: translate(-50%, -50%) scale(0); opacity: 1; }
    50% { transform: translate(-50%, -50%) scale(1.2); opacity: 1; }
    100% { transform: translate(-50%, -50%) scale(1); opacity: 0; }
}

/* ═══════════════════════════════════════════════════════════════
   VOICE MESSAGE - NEON PULSE DESIGN (Mobile-First)
   Clean, contained design that fits within post cards
═══════════════════════════════════════════════════════════════ */

/* Neon Pulse Color Variables */
.ng-voice-message {
    --vp-solar-orange: #FF6B00;
    --vp-solar-gold: #FFB800;
    --vp-solar-flame: #FF4500;
    --vp-solar-core: #FFDD00;
}

.ng-voice-message {
    margin: 12px 16px;
    padding: 12px;
    background: rgba(20, 15, 25, 0.9);
    border: 1px solid rgba(255, 107, 0, 0.4);
    border-radius: 16px;
    position: relative;
    overflow: hidden;
    box-sizing: border-box;
}

/* Subtle inner glow */
.ng-voice-message::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at 30% 50%, rgba(255, 107, 0, 0.1) 0%, transparent 60%);
    pointer-events: none;
}

/* Player Container */
.ng-voice-player {
    display: flex;
    align-items: center;
    gap: 12px;
    position: relative;
    z-index: 1;
}

/* Play Button */
.ng-voice-play-btn {
    width: 44px;
    height: 44px;
    min-width: 44px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--vp-solar-orange), var(--vp-solar-flame));
    border: none;
    color: white;
    font-size: 16px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: all 0.2s ease;
    box-shadow: 0 0 15px rgba(255, 107, 0, 0.4);
}

.ng-voice-play-btn:hover {
    transform: scale(1.05);
    box-shadow: 0 0 20px rgba(255, 107, 0, 0.6);
}

.ng-voice-play-btn:active {
    transform: scale(0.95);
}

.ng-voice-play-btn.playing {
    background: linear-gradient(135deg, var(--vp-solar-gold), var(--vp-solar-orange));
}

/* Waveform Container - Flexible width */
.ng-voice-waveform {
    flex: 1;
    min-width: 0;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 2px;
    overflow: hidden;
}

/* Wave Bars */
.ng-wave-bar {
    width: 3px;
    min-width: 3px;
    flex-shrink: 0;
    border-radius: 2px;
    background: linear-gradient(to top, var(--vp-solar-orange), var(--vp-solar-gold));
    animation: voiceWaveBar 1.2s ease-in-out infinite;
}

@keyframes voiceWaveBar {
    0%, 100% { transform: scaleY(0.5); opacity: 0.6; }
    50% { transform: scaleY(1); opacity: 1; }
}

/* Staggered delays */
.ng-wave-bar:nth-child(1) { animation-delay: 0s; }
.ng-wave-bar:nth-child(2) { animation-delay: 0.1s; }
.ng-wave-bar:nth-child(3) { animation-delay: 0.05s; }
.ng-wave-bar:nth-child(4) { animation-delay: 0.15s; }
.ng-wave-bar:nth-child(5) { animation-delay: 0.08s; }
.ng-wave-bar:nth-child(6) { animation-delay: 0.12s; }
.ng-wave-bar:nth-child(7) { animation-delay: 0.03s; }
.ng-wave-bar:nth-child(8) { animation-delay: 0.18s; }
.ng-wave-bar:nth-child(9) { animation-delay: 0.07s; }
.ng-wave-bar:nth-child(10) { animation-delay: 0.14s; }
.ng-wave-bar:nth-child(11) { animation-delay: 0.02s; }
.ng-wave-bar:nth-child(12) { animation-delay: 0.11s; }
.ng-wave-bar:nth-child(13) { animation-delay: 0.06s; }
.ng-wave-bar:nth-child(14) { animation-delay: 0.16s; }
.ng-wave-bar:nth-child(15) { animation-delay: 0.09s; }

/* Playing state */
.ng-voice-message.playing .ng-wave-bar {
    animation-duration: 0.5s;
}

/* Duration */
.ng-voice-duration {
    font-family: 'JetBrains Mono', monospace;
    font-size: 13px;
    font-weight: 600;
    color: var(--vp-solar-gold);
    flex-shrink: 0;
    min-width: 36px;
    text-align: right;
}

/* Effect Badge - Inside container */
.ng-voice-effect-badge {
    position: absolute;
    top: 8px;
    right: 8px;
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 0.6rem;
    font-weight: 600;
    padding: 3px 8px;
    border-radius: 8px;
    text-transform: uppercase;
    background: rgba(255, 107, 0, 0.25);
    color: var(--vp-solar-gold);
    border: 1px solid rgba(255, 107, 0, 0.4);
    z-index: 2;
}

.ng-voice-effect-badge i {
    font-size: 0.6rem;
}

/* Voice Icon Badge (top right of post header) */
.ng-post.type-voice .ng-post-type-icon {
    background: linear-gradient(135deg, var(--vp-solar-orange), var(--vp-solar-flame));
    box-shadow: 0 0 10px rgba(255, 107, 0, 0.4);
}

/* Post Actions - Clean symmetric layout */
/* Post Actions - Fixed alignment */
.ng-post-actions {
    display: flex !important;
    padding: 14px 16px !important;
    gap: 18px !important;
    margin: 0 !important;
    border: none !important;
    background: transparent !important;
}

.ng-action-btn {
    background: none !important;
    border: none !important;
    padding: 0 !important;
    margin: 0 !important;
    /* CRITICAL: Override accessibility-fixes.css min-width: 44px */
    min-width: unset !important;
    min-height: unset !important;
    color: var(--ng-text);
    font-size: 26px;
    cursor: pointer;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    transition: all 0.2s ease;
}

.ng-action-btn i {
    line-height: 1;
    margin: 0 !important;
    padding: 0 !important;
}

.ng-action-count {
    font-size: 14px;
    font-weight: 600;
    margin: 0 !important;
    padding: 0 !important;
}

/* Push share button to the right */
.ng-action-share {
    margin-left: auto !important;
}

.ng-action-btn:active {
    transform: scale(0.9);
}

.ng-action-btn.liked {
    color: var(--ng-voidpink);
    filter: drop-shadow(0 0 8px var(--ng-voidpink));
}

.ng-action-btn.liked i {
    animation: ng-likePop 0.5s ease;
}

@keyframes ng-likePop {
    0% { transform: scale(1); }
    30% { transform: scale(1.4); }
    60% { transform: scale(0.9); }
    100% { transform: scale(1); }
}

.ng-action-count {
    font-size: 14px;
    font-weight: 600;
}

.ng-action-btn.saved {
    color: var(--ng-holy);
    filter: drop-shadow(0 0 8px var(--ng-holy));
}


/* Post Content */
.ng-post-content {
    padding: 0 16px 14px;
}

.ng-post-text {
    font-size: 14px;
    line-height: 1.6;
    word-wrap: break-word;
}

.ng-post-text .username {
    font-weight: 700;
    color: var(--ng-text);
}

.ng-post-text .hashtag {
    color: var(--ng-ethereal);
    font-weight: 500;
}

.ng-post-comments-link {
    font-size: 14px;
    color: var(--ng-text-muted);
    margin-top: 8px;
    cursor: pointer;
}

.ng-post-time {
    font-size: 11px;
    color: var(--ng-text-muted);
    margin-top: 6px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* ═══════════════════════════════════════════════════════
   CREATE BUTTON (FAB)
   ═══════════════════════════════════════════════════════ */

.ng-create-fab {
    position: fixed;
    bottom: 90px;
    right: 20px;
    width: 56px;
    height: 56px;
    border-radius: 16px;
    background: var(--ng-gradient-epic);
    border: none;
    color: white;
    font-size: 24px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: var(--ng-glow-intense);
    z-index: 50;
    transition: all 0.3s ease;
}

.ng-create-fab::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: linear-gradient(45deg, transparent 40%, rgba(255,255,255,0.15) 50%, transparent 60%);
    animation: ng-fabShine 4s infinite;
}

@keyframes ng-fabShine {
    0%, 100% { transform: translateX(-100%) rotate(45deg); }
    50% { transform: translateX(100%) rotate(45deg); }
}

.ng-create-fab:active {
    transform: scale(0.9);
}

/* ═══════════════════════════════════════════════════════
   CREATE MODAL - NEON GRID MATRIX THEME
   Cyberpunk grid with animated neon borders
   ═══════════════════════════════════════════════════════ */

/* CSS Custom Property for animated border rotation */
@property --ng-border-angle {
    syntax: '<angle>';
    initial-value: 0deg;
    inherits: false;
}

.ng-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background:
        repeating-linear-gradient(
            0deg,
            transparent 0px,
            transparent 60px,
            rgba(0, 255, 255, 0.03) 60px,
            rgba(0, 255, 255, 0.03) 61px
        ),
        repeating-linear-gradient(
            90deg,
            transparent 0px,
            transparent 60px,
            rgba(255, 0, 170, 0.03) 60px,
            rgba(255, 0, 170, 0.03) 61px
        ),
        linear-gradient(180deg, #050510 0%, #0a0518 100%);
    z-index: 200;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
    overflow: hidden;
}

.ng-modal-overlay.active {
    opacity: 1;
    visibility: visible;
}

/* ═══ NEON GRID BACKGROUND ═══ */
.ng-aurora-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background:
        radial-gradient(ellipse at 30% 20%, rgba(255, 0, 170, 0.08) 0%, transparent 50%),
        radial-gradient(ellipse at 70% 80%, rgba(0, 255, 255, 0.06) 0%, transparent 50%);
    overflow: hidden;
    pointer-events: none;
}

/* Fireflies - transformed to floating particles */
.ng-fireflies {
    position: absolute;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
}

.ng-firefly {
    position: absolute;
    width: 4px;
    height: 4px;
    background: var(--ng-ethereal);
    border-radius: 50%;
    box-shadow: 0 0 10px var(--ng-ethereal), 0 0 20px var(--ng-ethereal);
    animation: ng-particle-float 8s ease-in-out infinite;
}

.ng-firefly:nth-child(odd) {
    background: var(--ng-arcane);
    box-shadow: 0 0 10px var(--ng-arcane), 0 0 20px var(--ng-arcane);
}

@keyframes ng-particle-float {
    0%, 100% { transform: translate(0, 0) scale(0.5); opacity: 0.2; }
    25% { transform: translate(15px, -40px) scale(1); opacity: 0.8; }
    50% { transform: translate(-20px, -60px) scale(0.6); opacity: 0.5; }
    75% { transform: translate(25px, -30px) scale(0.9); opacity: 0.7; }
}

/* ═══ MODAL CONTAINER ═══ */
.ng-create-modal {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    position: relative;
    padding: 50px 16px 20px;
    box-sizing: border-box;
    overflow: hidden;
}

/* When Writer Pro is active - full screen layout */
.ng-create-modal.writer-pro-mode {
    padding: 0;
    overflow: visible;
}

/* ═══ CLOSE BUTTON - Neon Grid Theme ═══ */
.ng-modal-close {
    position: absolute;
    top: 16px;
    right: 16px;
    width: 40px;
    height: 40px;
    border-radius: 4px;
    background: rgba(255, 0, 170, 0.1);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 0, 170, 0.3);
    color: #ff00aa !important;
    font-size: 16px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10;
    transition: all 0.3s ease;
}

.ng-modal-close:hover {
    background: rgba(255, 0, 170, 0.2);
    border-color: #ff00aa;
    box-shadow: 0 0 20px rgba(255, 0, 170, 0.3);
}

.ng-modal-close:active {
    transform: scale(0.9);
    background: rgba(255, 0, 170, 0.3);
}

/* Hide default close button when Writer Pro is active */
.ng-create-modal.writer-pro-mode .ng-modal-close {
    display: none;
}

/* ═══ SWIPE HANDLE - Neon Grid Theme ═══ */
.ng-modal-handle {
    position: absolute;
    top: 10px;
    left: 50%;
    transform: translateX(-50%);
    width: 50px;
    height: 4px;
    background: linear-gradient(90deg, var(--ng-arcane), var(--ng-ethereal));
    border-radius: 2px;
    z-index: 10;
    box-shadow: 0 0 10px rgba(255, 0, 170, 0.3);
}

/* ═══ HEADER - Cyberpunk Terminal ═══ */
.ng-modal-header {
    text-align: center;
    margin-bottom: 30px;
    position: relative;
}

.ng-modal-header::after {
    content: '';
    position: absolute;
    bottom: -12px;
    left: 50%;
    transform: translateX(-50%);
    width: 120px;
    height: 2px;
    background: linear-gradient(90deg, transparent, #00ffff, transparent);
}

.ng-modal-header h2 {
    font-family: 'Syncopate', 'Orbitron', sans-serif;
    font-size: 18px;
    font-weight: 700;
    color: #00ffff !important;
    text-transform: uppercase;
    letter-spacing: 4px;
    text-shadow: 0 0 20px #00ffff, 0 0 40px #00ffff;
    margin: 0 0 8px 0;
    font-style: normal;
}

.ng-modal-header p {
    font-family: 'Orbitron', sans-serif;
    color: #ff00aa !important;
    font-size: 11px;
    letter-spacing: 3px;
    margin: 0;
}

/* ═══ CONTENT WRAPPER ═══ */
.ng-modal-content {
    display: flex;
    flex-direction: column;
    width: 100%;
    flex: 1;
}

/* When Writer Pro is active - full screen */
.ng-modal-content.writer-pro-active {
    max-width: 100%;
    height: 100%;
    flex: 1;
    justify-content: flex-start;
    align-items: stretch;
    padding: 0;
    overflow: visible;
}

/* ═══ TITLE (hidden in Forest theme, use header instead) ═══ */
.ng-modal-title {
    display: none;
}

/* ═══════════════════════════════════════════════════════
   NEON GRID MATRIX - Cyberpunk Cards
   ═══════════════════════════════════════════════════════ */

/* ═══ CARDS CONTAINER ═══ */
.ng-create-options {
    display: flex;
    flex-direction: column;
    gap: 16px;
    width: 100%;
}

/* ═══ NEON MATRIX CARD ═══ */
.ng-create-option {
    position: relative;
    border-radius: 4px;
    overflow: visible;
    cursor: pointer;
    background: rgba(10, 10, 26, 0.9);
    border: 1px solid rgba(255, 0, 170, 0.2);
    transition: all 0.3s ease;
}

/* Animated neon border - gradient glow */
.ng-create-option::before {
    content: '';
    position: absolute;
    inset: -2px;
    border-radius: 6px;
    background: linear-gradient(90deg, #ff00aa, #00ffff, #9d00ff, #ff00aa);
    background-size: 300% 100%;
    animation: ng-border-flow 3s linear infinite;
    opacity: 0.5;
    z-index: -1;
    filter: blur(2px);
}

@keyframes ng-border-flow {
    0% { background-position: 0% 50%; }
    100% { background-position: 300% 50%; }
}

.ng-create-option:hover {
    transform: translateX(10px);
    background: rgba(255, 0, 170, 0.05);
    border-color: #ff00aa;
}

.ng-create-option:hover::before {
    opacity: 1;
    filter: blur(4px);
}

.ng-create-option:active {
    transform: translateX(10px) scale(0.98);
}

/* Glitch scan effect on hover */
.ng-create-option::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(
        90deg,
        transparent 0%,
        rgba(255, 0, 170, 0.1) 50%,
        transparent 100%
    );
    opacity: 0;
    pointer-events: none;
    border-radius: 4px;
    z-index: 3;
}

.ng-create-option:hover::after {
    opacity: 1;
    animation: ng-glitch-scan 0.4s ease;
}

@keyframes ng-glitch-scan {
    0% { transform: translateX(-100%); }
    100% { transform: translateX(100%); }
}

/* Card Background - Used as accent bar */
.ng-create-option .card-bg {
    position: absolute;
    left: 0;
    top: 0;
    width: 6px;
    height: 100%;
    border-radius: 3px 0 0 3px;
    z-index: 2;
}

/* Accent colors per card type - ORIGINAL GRADIENTS PRESERVED */
.ng-create-option.photo .card-bg {
    background: linear-gradient(180deg, #134e5e, #71b280);
    box-shadow: 0 0 15px #71b280;
}

.ng-create-option.video .card-bg {
    background: linear-gradient(180deg, #4a1c6b, #8B5CF6);
    box-shadow: 0 0 15px #8B5CF6;
}

.ng-create-option.voice .card-bg {
    background: linear-gradient(180deg, #92400e, #f59e0b);
    box-shadow: 0 0 15px #f59e0b;
}

.ng-create-option.text .card-bg {
    background: linear-gradient(180deg, #831843, #ec4899);
    box-shadow: 0 0 15px #ec4899;
}

.ng-create-option.link .card-bg {
    background: linear-gradient(180deg, #4338ca, #6366F1);
    box-shadow: 0 0 15px #6366F1;
}

/* Card Content - Grid Layout */
.ng-create-option .card-content {
    position: relative;
    padding: 14px 16px 14px 22px;
    display: grid;
    grid-template-columns: 50px 1fr auto;
    align-items: center;
    gap: 14px;
    z-index: 1;
    background: rgba(10, 10, 26, 0.95);
    border-radius: 4px;
}

/* Card Icon - Gradient Background with Scan Effect */
.ng-create-option .card-icon {
    width: 50px;
    height: 50px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
}

/* Icon background colors - ORIGINAL GRADIENTS */
.ng-create-option.photo .card-icon {
    background: linear-gradient(135deg, #134e5e, #71b280);
}

.ng-create-option.video .card-icon {
    background: linear-gradient(135deg, #4a1c6b, #8B5CF6);
}

.ng-create-option.voice .card-icon {
    background: linear-gradient(135deg, #92400e, #f59e0b);
}

.ng-create-option.text .card-icon {
    background: linear-gradient(135deg, #831843, #ec4899);
}

.ng-create-option.link .card-icon {
    background: linear-gradient(135deg, #4338ca, #6366F1);
}

/* Scan line effect on icon */
.ng-create-option .card-icon::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(
        180deg,
        transparent 0%,
        rgba(255, 255, 255, 0.15) 50%,
        transparent 100%
    );
    animation: ng-icon-scan 2s linear infinite;
    pointer-events: none;
}

@keyframes ng-icon-scan {
    0% { transform: translateY(-100%); }
    100% { transform: translateY(100%); }
}

.ng-create-option .card-icon i {
    font-size: 20px;
    color: #fff;
    z-index: 1;
    position: relative;
}

/* Card Text - Orbitron Font */
.ng-create-option .card-text {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-width: 0;
}

.ng-create-option .card-text h3 {
    font-family: 'Orbitron', sans-serif;
    font-size: 14px;
    font-weight: 600;
    color: #fff;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin: 0;
    padding: 0;
    line-height: 1.3;
}

.ng-create-option .card-text p {
    font-family: 'Exo 2', sans-serif;
    font-size: 12px;
    color: rgba(255, 255, 255, 0.5);
    margin: 4px 0 0 0;
    padding: 0;
    line-height: 1.3;
}

/* Card Arrow - ENTER Button */
.ng-create-option .card-arrow {
    font-family: 'Orbitron', sans-serif;
    font-size: 10px;
    font-weight: 500;
    color: #00ffff !important;
    padding: 8px 12px;
    border: 1px solid rgba(0, 255, 255, 0.3);
    border-radius: 4px;
    background: rgba(0, 255, 255, 0.05);
    transition: all 0.3s ease;
    white-space: nowrap;
    flex-shrink: 0;
}

/* Hide the chevron icon, show ENTER text */
.ng-create-option .card-arrow i {
    display: none;
}

.ng-create-option .card-arrow::before {
    content: 'ENTER';
}

.ng-create-option:hover .card-arrow {
    background: rgba(0, 255, 255, 0.15);
    border-color: #00ffff;
    box-shadow: 0 0 20px rgba(0, 255, 255, 0.3);
}

/* Legacy support - hide old icon/span if present */
.ng-create-option > i,
.ng-create-option > span {
    display: none;
}

/* Category Tags */
.ng-category-section {
    margin-bottom: 24px;
}

.ng-category-label {
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 14px;
    color: #94A3B8;
}

.ng-category-tags {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

.ng-category-tag {
    padding: 12px 22px;
    border-radius: 20px;
    border: 2px solid rgba(139, 92, 246, 0.2);
    background: transparent;
    color: #F8FAFC;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    gap: 8px;
}

.ng-category-tag.active {
    border-color: #8B5CF6;
    background: linear-gradient(135deg, #8B5CF6 0%, #6D28D9 100%);
    color: white;
    box-shadow: 0 0 20px rgba(139, 92, 246, 0.4), 0 0 40px rgba(139, 92, 246, 0.2);
}

.ng-category-tag i {
    font-size: 14px;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    gap: 6px;
}

/* Voice Recording UI - EXACT from navesa-void-forge.html */
.ng-voice-record-ui {
    display: none;
    flex-direction: column;
    align-items: center;
    padding: 40px 20px;
    gap: 24px;
}

.ng-voice-record-ui.active {
    display: flex;
}

.ng-record-visualizer {
    width: 140px;
    height: 140px;
    border-radius: 50%;
    background: rgba(139, 92, 246, 0.15);
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

.ng-record-visualizer::before,
.ng-record-visualizer::after {
    content: '';
    position: absolute;
    border-radius: 50%;
    border: 2px solid #8B5CF6;
    opacity: 0.3;
}

.ng-record-visualizer::before {
    inset: -15px;
    animation: ng-recordRing 2s infinite ease-out;
}

.ng-record-visualizer::after {
    inset: -30px;
    animation: ng-recordRing 2s infinite ease-out 0.5s;
}

@keyframes ng-recordRing {
    0% { transform: scale(1); opacity: 0.3; }
    100% { transform: scale(1.3); opacity: 0; }
}

.ng-record-btn {
    width: 90px;
    height: 90px;
    border-radius: 50%;
    background: linear-gradient(135deg, #8B5CF6 0%, #6D28D9 100%);
    border: none;
    color: white;
    font-size: 36px;
    cursor: pointer;
    z-index: 1;
    box-shadow: 0 0 30px rgba(139, 92, 246, 0.6), 0 0 60px rgba(139, 92, 246, 0.3), 0 0 90px rgba(139, 92, 246, 0.1);
    transition: all 0.3s ease;
}

.ng-record-btn.recording {
    background: #EC4899;
    box-shadow: 0 0 40px #EC4899;
    animation: ng-recordPulse 1s infinite;
}

@keyframes ng-recordPulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.05); }
}

.ng-record-time {
    font-size: 32px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    background: linear-gradient(135deg, #8B5CF6 0%, #06B6D4 40%, #F59E0B 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.ng-record-hint {
    font-size: 15px;
    color: #94A3B8;
}

/* ═══════════════════════════════════════════════════════
   NEON STUDIO - Video Composer
   ═══════════════════════════════════════════════════════ */

.ng-video-composer {
    display: none;
    flex-direction: column;
    width: 100%;
    height: 100%;
    position: relative;
    z-index: 5;
    background: #0d0618;
    border-radius: 24px;
    overflow: hidden;
}

.ng-video-composer.active {
    display: flex;
}

/* Hide X button when video composer is active (has its own back button) */
.ng-video-composer.active ~ .ng-modal-close,
.ng-create-modal:has(.ng-video-composer.active) .ng-modal-close {
    display: none;
}

/* Animated neon border */
.ng-video-neon-border {
    position: absolute;
    inset: 0;
    border-radius: 24px;
    padding: 2px;
    background: linear-gradient(135deg, #8B5CF6, #EC4899, #8B5CF6);
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    animation: neon-border-rotate 4s linear infinite;
    pointer-events: none;
}

@keyframes neon-border-rotate {
    0% { filter: hue-rotate(0deg); }
    100% { filter: hue-rotate(360deg); }
}

.ng-video-content {
    padding: 20px;
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow-y: auto;
}

/* Video header */
.ng-video-header {
    display: flex;
    align-items: center;
    margin-bottom: 20px;
}

.ng-video-back {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: rgba(139, 92, 246, 0.2);
    border: 1px solid rgba(139, 92, 246, 0.3);
    color: #A78BFA;
    font-size: 16px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
}

.ng-video-back:active {
    transform: scale(0.95);
    background: rgba(139, 92, 246, 0.3);
}

.ng-video-title {
    flex: 1;
    text-align: center;
    font-size: 20px;
    font-weight: 700;
    background: linear-gradient(135deg, #C4B5FD 0%, #F0ABFC 50%, #C4B5FD 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    letter-spacing: 2px;
    margin-right: 40px;
}

/* Upload zone */
.ng-video-upload-zone {
    aspect-ratio: 16/9;
    background: linear-gradient(135deg, rgba(139, 92, 246, 0.1) 0%, rgba(236, 72, 153, 0.1) 100%);
    border-radius: 16px;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    overflow: hidden;
    border: 2px solid transparent;
    transition: all 0.3s ease;
}

.ng-video-upload-zone::before {
    content: '';
    position: absolute;
    inset: -2px;
    border-radius: 18px;
    background: linear-gradient(135deg, #8B5CF6 0%, #EC4899 50%, #8B5CF6 100%);
    z-index: -1;
    opacity: 0.5;
}

.ng-video-upload-zone::after {
    content: '';
    position: absolute;
    inset: 0;
    background: #0d0618;
    border-radius: 14px;
    z-index: -1;
}

.ng-video-upload-zone:active {
    transform: scale(0.98);
}

.ng-video-play-icon {
    width: 70px;
    height: 70px;
    border-radius: 50%;
    background: transparent;
    border: 3px solid #C4B5FD;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
    color: #C4B5FD;
    margin-bottom: 16px;
    position: relative;
    box-shadow: 0 0 30px rgba(139, 92, 246, 0.4),
                inset 0 0 30px rgba(139, 92, 246, 0.1);
}

.ng-video-play-icon::before {
    content: '';
    position: absolute;
    inset: -8px;
    border-radius: 50%;
    border: 1px solid rgba(139, 92, 246, 0.3);
    animation: video-pulse 2s ease-in-out infinite;
}

@keyframes video-pulse {
    0%, 100% { transform: scale(1); opacity: 1; }
    50% { transform: scale(1.2); opacity: 0; }
}

.ng-video-upload-text {
    color: #C4B5FD;
    font-size: 15px;
    font-weight: 500;
}

.ng-video-upload-hint {
    color: rgba(196, 181, 253, 0.5);
    font-size: 12px;
    margin-top: 4px;
}

/* Preview container */
.ng-video-preview-container {
    display: none;
}

.ng-video-preview {
    aspect-ratio: 16/9;
    background: #000;
    border-radius: 16px;
    overflow: hidden;
    position: relative;
}

.ng-video-preview video {
    width: 100%;
    height: 100%;
    object-fit: contain;
    border-radius: 16px;
}

.ng-video-remove-btn {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.7);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: white;
    font-size: 14px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10;
    transition: all 0.2s ease;
}

.ng-video-remove-btn:active {
    transform: scale(0.9);
    background: rgba(239, 68, 68, 0.8);
}

/* Meta info */
.ng-video-meta {
    display: flex;
    gap: 12px;
    margin-top: 16px;
}

.ng-video-meta-item {
    flex: 1;
    padding: 12px;
    background: rgba(139, 92, 246, 0.1);
    border-radius: 12px;
    text-align: center;
    border: 1px solid rgba(139, 92, 246, 0.2);
}

.ng-video-meta-label {
    font-size: 10px;
    color: rgba(255, 255, 255, 0.5);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.ng-video-meta-value {
    font-size: 16px;
    font-weight: 600;
    color: #A78BFA;
    margin-top: 4px;
}

/* Options */
.ng-video-options {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    margin-top: 20px;
}

.ng-video-option {
    padding: 16px 12px;
    background: rgba(139, 92, 246, 0.1);
    border: 1px solid rgba(139, 92, 246, 0.2);
    border-radius: 12px;
    text-align: center;
    cursor: pointer;
    transition: all 0.3s ease;
}

.ng-video-option:active {
    background: rgba(139, 92, 246, 0.2);
    border-color: rgba(139, 92, 246, 0.5);
    transform: scale(0.95);
}

.ng-video-option i {
    font-size: 20px;
    color: #A78BFA;
    margin-bottom: 8px;
    display: block;
}

.ng-video-option span {
    display: block;
    font-size: 11px;
    color: rgba(255, 255, 255, 0.7);
}

/* Caption */
.ng-video-caption {
    margin-top: 20px;
}

.ng-video-textarea {
    width: 100%;
    padding: 16px;
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(139, 92, 246, 0.2);
    border-radius: 12px;
    color: #fff;
    font-family: inherit;
    font-size: 14px;
    resize: none;
    height: 80px;
    transition: border-color 0.2s ease;
}

.ng-video-textarea::placeholder {
    color: rgba(255, 255, 255, 0.4);
}

.ng-video-textarea:focus {
    outline: none;
    border-color: rgba(139, 92, 246, 0.5);
    box-shadow: 0 0 20px rgba(139, 92, 246, 0.15);
}

/* Submit button */
.ng-video-submit {
    width: 100%;
    padding: 16px;
    margin-top: 20px;
    background: linear-gradient(135deg, #8B5CF6 0%, #7C3AED 100%);
    border: none;
    border-radius: 14px;
    color: white;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    box-shadow: 0 8px 32px rgba(139, 92, 246, 0.3);
    transition: all 0.3s ease;
}

.ng-video-submit:active {
    transform: scale(0.98);
}

.ng-video-submit:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

/* ═══════════════════════════════════════════════════════
   FOREST CARD - Photo/Video Composer
   ═══════════════════════════════════════════════════════ */

.ng-composer {
    display: none;
    flex-direction: column;
    width: 100%;
    height: 100%;
    position: relative;
    z-index: 5;
}

.ng-composer.active {
    display: flex;
}

/* Composer Header */
.ng-composer-header {
    display: flex;
    align-items: center;
    margin-bottom: 16px;
    flex-shrink: 0;
}

.ng-composer-back {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.1);
    border: none;
    color: #fff;
    font-size: 16px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s ease;
    z-index: 10;
}

.ng-composer-back:active {
    background: rgba(255, 255, 255, 0.2);
}

.ng-composer-title {
    flex: 1;
    text-align: center;
    font-family: 'Playfair Display', serif;
    font-size: 20px;
    font-style: italic;
    color: #fff;
    margin-right: 40px;
}

/* Photo Card */
.ng-photo-card {
    border-radius: 16px;
    overflow: hidden;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    margin-bottom: 16px;
    flex-shrink: 0;
}

.ng-composer-preview {
    width: 100%;
    max-height: 45vh;
    background: #120822;
    overflow: hidden;
    position: relative;
    display: none;
}

.ng-composer-preview.has-media {
    display: block;
}

.ng-composer-preview img,
.ng-composer-preview video {
    width: 100%;
    height: 100%;
    object-fit: contain;
    background: #000;
}

.ng-composer-preview .remove-btn {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(10px);
    border: none;
    color: white;
    font-size: 12px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10;
}

/* Card Caption Area */
.ng-card-caption {
    padding: 12px 14px;
}

.ng-composer-textarea {
    width: 100%;
    height: 50px;
    background: transparent;
    border: none;
    color: #fff;
    font-size: 14px;
    font-family: inherit;
    resize: none;
    line-height: 1.4;
    display: block;
}

.ng-composer-textarea:focus {
    outline: none;
}

.ng-composer-textarea::placeholder {
    color: rgba(255, 255, 255, 0.4);
}

/* Submit Button */
.ng-composer-submit {
    width: 100%;
    padding: 14px;
    border-radius: 12px;
    background: linear-gradient(135deg, #134e5e, #71b280);
    border: none;
    color: white;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    flex-shrink: 0;
}

.ng-composer-submit:active {
    transform: scale(0.98);
    opacity: 0.9;
}

.ng-composer-submit:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* ═══════════════════════════════════════════════════════
   CYBER DARKROOM - Photo Composer
   Green Neon Matrix Theme with Instagram-like features
   ═══════════════════════════════════════════════════════ */

/* Photo Composer Container */
.ng-photo-composer {
    display: none;
    flex-direction: column;
    width: 100%;
    height: 100%;
    position: fixed;
    inset: 0;
    z-index: 10000;
    background: #030508;
    overflow: hidden;
}

.ng-photo-composer.active {
    display: flex;
}

/* Matrix Grid Background */
.ng-photo-composer::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        repeating-linear-gradient(
            0deg,
            transparent 0px,
            transparent 40px,
            rgba(0, 255, 136, 0.02) 40px,
            rgba(0, 255, 136, 0.02) 41px
        ),
        repeating-linear-gradient(
            90deg,
            transparent 0px,
            transparent 40px,
            rgba(0, 255, 136, 0.02) 40px,
            rgba(0, 255, 136, 0.02) 41px
        ),
        radial-gradient(ellipse at 50% 0%, rgba(0, 255, 136, 0.08) 0%, transparent 50%);
    pointer-events: none;
    z-index: 0;
}

/* Photo Composer Header */
.ng-photo-header {
    position: relative;
    z-index: 10;
    padding: 14px 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: rgba(10, 15, 20, 0.95);
    border-bottom: 1px solid rgba(0, 255, 136, 0.2);
    backdrop-filter: blur(10px);
}

.ng-photo-back {
    width: 40px;
    height: 40px;
    border-radius: 8px;
    background: rgba(0, 255, 136, 0.1);
    border: 1px solid rgba(0, 255, 136, 0.3);
    color: #00ff88;
    font-size: 16px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
}

.ng-photo-back:hover,
.ng-photo-back:active {
    background: rgba(0, 255, 136, 0.2);
    box-shadow: 0 0 20px rgba(0, 255, 136, 0.4);
}

.ng-photo-title {
    text-align: center;
    flex: 1;
}

.ng-photo-title h2 {
    font-family: 'Orbitron', sans-serif;
    font-size: 13px;
    font-weight: 700;
    color: #00ff88;
    text-transform: uppercase;
    letter-spacing: 2px;
    text-shadow: 0 0 20px #00ff88;
    margin: 0 0 2px 0;
    line-height: 1.3;
}

.ng-photo-subtitle {
    font-family: 'JetBrains Mono', 'Courier New', monospace;
    font-size: 9px;
    color: rgba(255, 255, 255, 0.4);
    letter-spacing: 1px;
    display: block;
}

.ng-photo-reset {
    width: 40px;
    height: 40px;
    border-radius: 8px;
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: rgba(255, 255, 255, 0.5);
    font-size: 14px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
}

.ng-photo-reset:hover,
.ng-photo-reset:active {
    border-color: #00ff88;
    color: #00ff88;
}

/* Photo Composer Content */
.ng-photo-content {
    flex: 1;
    position: relative;
    z-index: 10;
    display: flex;
    flex-direction: column;
    padding: 12px;
    gap: 12px;
    overflow-y: auto;
}

/* ═══ PHOTO PREVIEW CARD ═══ */
.ng-photo-preview-card {
    position: relative;
    background: rgba(10, 15, 20, 0.8);
    border-radius: 12px;
    overflow: visible;
    border: 1px solid rgba(0, 255, 136, 0.3);
    box-shadow:
        0 0 20px rgba(0, 255, 136, 0.2),
        0 0 40px rgba(0, 255, 136, 0.1),
        inset 0 0 20px rgba(0, 255, 136, 0.05);
}

/* Neon border glow */
.ng-photo-preview-card::before {
    content: '';
    position: absolute;
    inset: -3px;
    border-radius: 15px;
    background: linear-gradient(135deg, #00ff88, #00ffff, #71b280, #00ff88);
    background-size: 300% 300%;
    animation: ng-photo-border-pulse 4s ease infinite;
    z-index: -1;
    opacity: 0.6;
    filter: blur(6px);
}

@keyframes ng-photo-border-pulse {
    0%, 100% { background-position: 0% 50%; opacity: 0.5; }
    50% { background-position: 100% 50%; opacity: 0.8; }
}

.ng-photo-container {
    position: relative;
    width: 100%;
    min-height: 280px;
    aspect-ratio: 1;
    overflow: hidden;
    background: #0a0f14;
    border-radius: 11px;
}

.ng-photo-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: filter 0.3s ease;
    display: block;
}

/* Scan line effect on photo */
.ng-photo-scan-effect {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        180deg,
        transparent 0%,
        rgba(0, 255, 136, 0.03) 50%,
        transparent 100%
    );
    animation: ng-photo-scan-move 3s linear infinite;
    pointer-events: none;
}

@keyframes ng-photo-scan-move {
    0% { transform: translateY(-100%); }
    100% { transform: translateY(100%); }
}

/* Corner brackets */
.ng-photo-corner {
    position: absolute;
    width: 24px;
    height: 24px;
    border: 2px solid #00ff88;
    pointer-events: none;
    opacity: 0.6;
    z-index: 10;
}

.ng-photo-corner.tl { top: 12px; left: 12px; border-right: none; border-bottom: none; }
.ng-photo-corner.tr { top: 12px; right: 12px; border-left: none; border-bottom: none; }
.ng-photo-corner.bl { bottom: 50px; left: 12px; border-right: none; border-top: none; }
.ng-photo-corner.br { bottom: 50px; right: 12px; border-left: none; border-top: none; }

/* Image meta info overlay */
.ng-photo-meta {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 10px 12px;
    background: linear-gradient(transparent, rgba(0, 0, 0, 0.85));
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
}

.ng-photo-meta-item {
    text-align: center;
}

.ng-photo-meta-label {
    font-family: 'JetBrains Mono', 'Courier New', monospace;
    color: rgba(255, 255, 255, 0.4);
    font-size: 8px;
    text-transform: uppercase;
    letter-spacing: 1px;
    display: block;
    margin-bottom: 2px;
}

.ng-photo-meta-value {
    font-family: 'JetBrains Mono', 'Courier New', monospace;
    font-size: 10px;
    color: #00ff88;
    text-shadow: 0 0 10px #00ff88;
}

/* Action buttons on photo */
.ng-photo-actions {
    position: absolute;
    top: 10px;
    right: 10px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.ng-photo-action-btn {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(0, 255, 136, 0.3);
    color: #00ff88;
    font-size: 14px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
}

.ng-photo-action-btn:hover,
.ng-photo-action-btn:active {
    background: rgba(0, 255, 136, 0.2);
    box-shadow: 0 0 15px rgba(0, 255, 136, 0.4);
}

/* ═══════════════════════════════════════════════════════
   FILTER LAB v3.0 - Enhanced Filter Section
   ═══════════════════════════════════════════════════════ */

/* Category Color Variables */
.ng-filters-section {
    --cat-vibrant: #ff6b35;
    --cat-moody: #a855f7;
    --cat-warm: #fbbf24;
    --cat-cold: #3b82f6;
    --cat-film: #f472b6;
    --cat-bw: #94a3b8;
}

.ng-filters-section {
    background: rgba(10, 15, 20, 0.8);
    border-radius: 12px;
    padding: 14px;
    border: 1px solid rgba(0, 255, 136, 0.1);
}

.ng-section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
}

.ng-section-title {
    font-family: 'Orbitron', sans-serif;
    font-size: 11px;
    font-weight: 600;
    color: #00ff88;
    text-transform: uppercase;
    letter-spacing: 2px;
    display: flex;
    align-items: center;
    gap: 6px;
}

.ng-section-title i {
    font-size: 12px;
}

.ng-section-badge {
    font-family: 'JetBrains Mono', 'Courier New', monospace;
    font-size: 8px;
    color: #00ffff;
    background: rgba(0, 255, 255, 0.1);
    padding: 4px 10px;
    border-radius: 10px;
    border: 1px solid rgba(0, 255, 255, 0.2);
}

/* ═══ CATEGORY PILLS ═══ */
.ng-category-pills {
    display: flex;
    gap: 6px;
    overflow-x: auto;
    padding-bottom: 12px;
    margin-bottom: 12px;
    scrollbar-width: none;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.ng-category-pills::-webkit-scrollbar {
    display: none;
}

.ng-category-pill {
    flex-shrink: 0;
    padding: 6px 12px;
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    font-family: 'Rajdhani', sans-serif;
    font-size: 11px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.5);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    gap: 5px;
}

.ng-category-pill i {
    font-size: 10px;
    opacity: 0.7;
}

.ng-category-pill:hover {
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(255, 255, 255, 0.15);
    color: #fff;
}

.ng-category-pill.active {
    color: #030508;
    border-color: transparent;
}

/* Category specific colors when active */
.ng-category-pill[data-category="all"].active {
    background: #00ff88;
    box-shadow: 0 0 15px rgba(0, 255, 136, 0.4);
}

.ng-category-pill[data-category="vibrant"].active {
    background: var(--cat-vibrant);
    box-shadow: 0 0 15px rgba(255, 107, 53, 0.4);
}

.ng-category-pill[data-category="moody"].active {
    background: var(--cat-moody);
    box-shadow: 0 0 15px rgba(168, 85, 247, 0.4);
}

.ng-category-pill[data-category="warm"].active {
    background: var(--cat-warm);
    box-shadow: 0 0 15px rgba(251, 191, 36, 0.4);
}

.ng-category-pill[data-category="cold"].active {
    background: var(--cat-cold);
    box-shadow: 0 0 15px rgba(59, 130, 246, 0.4);
}

.ng-category-pill[data-category="film"].active {
    background: var(--cat-film);
    box-shadow: 0 0 15px rgba(244, 114, 182, 0.4);
}

.ng-category-pill[data-category="bw"].active {
    background: var(--cat-bw);
    box-shadow: 0 0 15px rgba(148, 163, 184, 0.4);
}

/* ═══ FILTERS GRID (4x4) ═══ */
.ng-filters-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
}

.ng-filter-item {
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    animation: ngFilterFadeIn 0.4s ease forwards;
    opacity: 0;
}

@keyframes ngFilterFadeIn {
    from {
        opacity: 0;
        transform: scale(0.9) translateY(8px);
    }
    to {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

.ng-filter-item:nth-child(1) { animation-delay: 0.02s; }
.ng-filter-item:nth-child(2) { animation-delay: 0.04s; }
.ng-filter-item:nth-child(3) { animation-delay: 0.06s; }
.ng-filter-item:nth-child(4) { animation-delay: 0.08s; }
.ng-filter-item:nth-child(5) { animation-delay: 0.10s; }
.ng-filter-item:nth-child(6) { animation-delay: 0.12s; }
.ng-filter-item:nth-child(7) { animation-delay: 0.14s; }
.ng-filter-item:nth-child(8) { animation-delay: 0.16s; }

.ng-filter-item.hidden {
    display: none;
}

.ng-filter-item:hover {
    transform: translateY(-3px) scale(1.02);
}

.ng-filter-item.active .ng-filter-preview {
    border-color: #00ff88;
    box-shadow:
        0 0 0 2px #030508,
        0 0 0 4px #00ff88,
        0 0 15px rgba(0, 255, 136, 0.5);
}

.ng-filter-item.active .ng-filter-name {
    color: #00ff88;
    text-shadow: 0 0 8px #00ff88;
}

.ng-filter-preview {
    position: relative;
    width: 100%;
    aspect-ratio: 1;
    border-radius: 10px;
    overflow: hidden;
    border: 2px solid rgba(255, 255, 255, 0.08);
    margin-bottom: 5px;
    transition: all 0.3s ease;
    background: #0a0f14;
}

.ng-filter-preview img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Category indicator dot */
.ng-filter-preview::after {
    content: '';
    position: absolute;
    bottom: 5px;
    right: 5px;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    opacity: 0.8;
}

.ng-filter-item[data-category="vibrant"] .ng-filter-preview::after { background: var(--cat-vibrant); }
.ng-filter-item[data-category="moody"] .ng-filter-preview::after { background: var(--cat-moody); }
.ng-filter-item[data-category="warm"] .ng-filter-preview::after { background: var(--cat-warm); }
.ng-filter-item[data-category="cold"] .ng-filter-preview::after { background: var(--cat-cold); }
.ng-filter-item[data-category="film"] .ng-filter-preview::after { background: var(--cat-film); }
.ng-filter-item[data-category="bw"] .ng-filter-preview::after { background: var(--cat-bw); }
.ng-filter-item[data-category="all"] .ng-filter-preview::after { display: none; }

.ng-filter-name {
    font-family: 'JetBrains Mono', 'Courier New', monospace;
    font-size: 8px;
    text-align: center;
    color: rgba(255, 255, 255, 0.4);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    transition: all 0.3s ease;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ═══ INTENSITY SLIDER ═══ */
.ng-intensity-section {
    background: rgba(10, 15, 20, 0.8);
    border-radius: 12px;
    padding: 14px;
    border: 1px solid rgba(0, 255, 136, 0.1);
}

.ng-intensity-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
}

.ng-intensity-label {
    font-family: 'Rajdhani', sans-serif;
    font-size: 12px;
    font-weight: 600;
    color: #fff;
    text-transform: uppercase;
    letter-spacing: 1px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.ng-intensity-label i {
    color: #00ff88;
    font-size: 14px;
}

.ng-intensity-value {
    font-family: 'Orbitron', sans-serif;
    font-size: 16px;
    font-weight: 700;
    color: #00ff88;
    text-shadow: 0 0 10px #00ff88;
}

.ng-intensity-track {
    position: relative;
    height: 8px;
    background: rgba(255, 255, 255, 0.08);
    border-radius: 4px;
    overflow: visible;
}

.ng-intensity-fill {
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    background: linear-gradient(90deg, #134e5e, #71b280);
    border-radius: 4px;
    transition: width 0.15s ease;
}

.ng-intensity-input {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    opacity: 0;
    cursor: pointer;
    margin: 0;
}

.ng-intensity-thumb {
    position: absolute;
    top: 50%;
    width: 20px;
    height: 20px;
    background: #030508;
    border: 3px solid #00ff88;
    border-radius: 50%;
    transform: translate(-50%, -50%);
    box-shadow: 0 0 12px rgba(0, 255, 136, 0.5);
    pointer-events: none;
    transition: transform 0.15s ease;
}

.ng-intensity-track:hover .ng-intensity-thumb {
    transform: translate(-50%, -50%) scale(1.15);
}

/* ═══ COMPARE BUTTON ═══ */
.ng-compare-section {
    padding-top: 0;
}

.ng-compare-btn {
    width: 100%;
    padding: 12px 16px;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px dashed rgba(255, 255, 255, 0.15);
    font-family: 'Rajdhani', sans-serif;
    font-size: 12px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.5);
    text-transform: uppercase;
    letter-spacing: 1px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: all 0.3s ease;
}

.ng-compare-btn i {
    font-size: 14px;
}

.ng-compare-btn:hover {
    background: rgba(255, 255, 255, 0.05);
    border-color: #00ffff;
    color: #00ffff;
}

.ng-compare-btn:active,
.ng-compare-btn.comparing {
    background: rgba(0, 255, 255, 0.1);
    border-style: solid;
    border-color: #00ffff;
    color: #00ffff;
}

/* Mobile: 3 columns */
@media (max-width: 380px) {
    .ng-filters-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 8px;
    }

    .ng-category-pill {
        padding: 5px 10px;
        font-size: 10px;
    }

    .ng-filter-name {
        font-size: 7px;
    }
}

/* ═══ ADJUSTMENTS SECTION ═══ */
.ng-adjustments-section {
    background: rgba(10, 15, 20, 0.8);
    border-radius: 10px;
    padding: 12px;
    border: 1px solid rgba(0, 255, 136, 0.1);
}

.ng-adjustments-grid {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.ng-adjustment-row {
    display: flex;
    align-items: center;
    gap: 10px;
}

.ng-adjustment-icon {
    width: 32px;
    height: 32px;
    border-radius: 6px;
    background: rgba(0, 255, 136, 0.1);
    border: 1px solid rgba(0, 255, 136, 0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #00ff88;
    font-size: 12px;
    flex-shrink: 0;
}

.ng-adjustment-control {
    flex: 1;
}

.ng-adjustment-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 6px;
}

.ng-adjustment-label {
    font-family: 'Rajdhani', 'Exo 2', sans-serif;
    font-size: 11px;
    font-weight: 600;
    color: #fff;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.ng-adjustment-value {
    font-family: 'JetBrains Mono', 'Courier New', monospace;
    font-size: 10px;
    color: #00ff88;
    background: rgba(0, 255, 136, 0.1);
    padding: 2px 6px;
    border-radius: 4px;
}

/* Custom Slider */
.ng-slider-track {
    position: relative;
    height: 6px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 3px;
    overflow: visible;
}

.ng-slider-fill {
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    background: linear-gradient(90deg, #134e5e, #71b280);
    border-radius: 3px;
    transition: width 0.1s ease;
}

.ng-slider-input {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    opacity: 0;
    cursor: pointer;
    margin: 0;
}

.ng-slider-thumb {
    position: absolute;
    top: 50%;
    width: 16px;
    height: 16px;
    background: #030508;
    border: 2px solid #00ff88;
    border-radius: 50%;
    transform: translate(-50%, -50%);
    box-shadow: 0 0 10px rgba(0, 255, 136, 0.4);
    pointer-events: none;
    transition: transform 0.1s ease;
}

.ng-slider-track:hover .ng-slider-thumb {
    transform: translate(-50%, -50%) scale(1.2);
}

/* ═══ CAPTION SECTION ═══ */
.ng-photo-caption-section {
    background: rgba(10, 15, 20, 0.8);
    border-radius: 10px;
    padding: 12px;
    border: 1px solid rgba(0, 255, 136, 0.1);
}

.ng-caption-wrapper {
    position: relative;
}

.ng-photo-textarea {
    width: 100%;
    min-height: 80px;
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(0, 255, 136, 0.2);
    border-radius: 8px;
    padding: 12px;
    padding-right: 55px;
    font-family: 'Exo 2', sans-serif;
    font-size: 14px;
    color: #fff;
    resize: none;
    transition: all 0.3s ease;
}

.ng-photo-textarea::placeholder {
    color: rgba(255, 255, 255, 0.4);
}

.ng-photo-textarea:focus {
    outline: none;
    border-color: #00ff88;
    box-shadow: 0 0 0 2px rgba(0, 255, 136, 0.1);
}

/* Character Counter Ring */
.ng-photo-char-counter {
    position: absolute;
    bottom: 10px;
    right: 10px;
    width: 40px;
    height: 40px;
}

.ng-photo-char-ring {
    transform: rotate(-90deg);
}

.ng-photo-char-ring-bg {
    fill: none;
    stroke: rgba(255, 255, 255, 0.1);
    stroke-width: 3;
}

.ng-photo-char-ring-progress {
    fill: none;
    stroke: #00ff88;
    stroke-width: 3;
    stroke-linecap: round;
    stroke-dasharray: 113;
    stroke-dashoffset: 113;
    transition: stroke-dashoffset 0.3s ease, stroke 0.3s ease;
}

.ng-photo-char-ring-progress.warning {
    stroke: #f59e0b;
}

.ng-photo-char-ring-progress.danger {
    stroke: #ef4444;
}

.ng-photo-char-count {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'JetBrains Mono', 'Courier New', monospace;
    font-size: 9px;
    color: rgba(255, 255, 255, 0.5);
}

/* Quick tags */
.ng-quick-tags {
    display: flex;
    gap: 6px;
    margin-top: 10px;
    flex-wrap: wrap;
}

.ng-quick-tag {
    font-family: 'Exo 2', sans-serif;
    font-size: 11px;
    padding: 5px 10px;
    border-radius: 16px;
    background: rgba(0, 255, 136, 0.1);
    border: 1px solid rgba(0, 255, 136, 0.2);
    color: #71b280;
    cursor: pointer;
    transition: all 0.3s ease;
}

.ng-quick-tag:hover,
.ng-quick-tag:active {
    background: rgba(0, 255, 136, 0.2);
    border-color: #00ff88;
    color: #00ff88;
}

/* ═══ SUBMIT BUTTON ═══ */
.ng-photo-submit-section {
    padding: 12px;
    position: relative;
    z-index: 10;
}

.ng-photo-submit-btn {
    width: 100%;
    padding: 16px 20px;
    border-radius: 10px;
    background: linear-gradient(135deg, #134e5e 0%, #71b280 100%);
    border: none;
    font-family: 'Orbitron', sans-serif;
    font-size: 12px;
    font-weight: 700;
    color: #fff;
    text-transform: uppercase;
    letter-spacing: 3px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    position: relative;
    overflow: hidden;
    transition: all 0.3s ease;
}

.ng-photo-submit-btn::before {
    content: '';
    position: absolute;
    inset: -2px;
    border-radius: 12px;
    background: linear-gradient(135deg, #00ff88, #00ffff);
    z-index: -1;
    filter: blur(8px);
    opacity: 0.5;
    animation: ng-photo-submit-glow 2s ease infinite;
}

@keyframes ng-photo-submit-glow {
    0%, 100% { opacity: 0.5; filter: blur(8px); }
    50% { opacity: 0.8; filter: blur(12px); }
}

.ng-photo-submit-btn:hover {
    transform: translateY(-2px);
}

.ng-photo-submit-btn:active {
    transform: translateY(0) scale(0.98);
}

.ng-photo-submit-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none;
}

.ng-photo-submit-btn i {
    font-size: 14px;
}

/* Shine effect */
.ng-photo-submit-btn::after {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: linear-gradient(
        45deg,
        transparent 30%,
        rgba(255, 255, 255, 0.15) 50%,
        transparent 70%
    );
    animation: ng-photo-submit-shine 3s infinite;
}

@keyframes ng-photo-submit-shine {
    0% { transform: translateX(-100%) rotate(45deg); }
    100% { transform: translateX(100%) rotate(45deg); }
}

/* Hide close button when photo composer is active */
.ng-create-modal:has(.ng-photo-composer.active) .ng-modal-close {
    display: none;
}

/* ═══════════════════════════════════════════════════════
   COSMIC WRITER - Premium Text Composer
   ═══════════════════════════════════════════════════════ */

.ng-composer.text-mode {
    width: 100%;
    max-width: 360px;
    padding: 0;
    gap: 0;
}

/* Writer Header - User info */
.ng-writer-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 24px;
    padding: 16px 20px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 16px;
    border: 1px solid rgba(255, 255, 255, 0.08);
}

.ng-writer-avatar {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid transparent;
    background: linear-gradient(#0f0c29, #0f0c29) padding-box,
                linear-gradient(135deg, #8B5CF6, #06B6D4, #EC4899) border-box;
}

.ng-writer-info {
    flex: 1;
}

.ng-writer-name {
    font-size: 16px;
    font-weight: 600;
    color: #fff;
    margin-bottom: 2px;
}

.ng-writer-hint {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.5);
}

/* Textarea Container with animated border */
.ng-writer-container {
    position: relative;
    margin-bottom: 20px;
}

/* Animated gradient border */
.ng-writer-container::before {
    content: '';
    position: absolute;
    inset: -2px;
    border-radius: 22px;
    background: linear-gradient(135deg, #8B5CF6, #06B6D4, #EC4899, #F59E0B, #8B5CF6);
    background-size: 300% 300%;
    animation: ng-writerBorder 4s ease infinite;
    opacity: 0.6;
    z-index: -1;
}

.ng-writer-container:focus-within::before {
    opacity: 1;
    animation: ng-writerBorder 2s ease infinite;
}

@keyframes ng-writerBorder {
    0%, 100% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
}

/* Glow effect on focus */
.ng-writer-container::after {
    content: '';
    position: absolute;
    inset: -8px;
    border-radius: 28px;
    background: linear-gradient(135deg, rgba(139, 92, 246, 0.3), rgba(6, 182, 212, 0.2), rgba(236, 72, 153, 0.2));
    filter: blur(20px);
    opacity: 0;
    z-index: -2;
    transition: opacity 0.4s ease;
}

.ng-writer-container:focus-within::after {
    opacity: 1;
}

/* Premium Textarea */
.ng-composer.text-mode .ng-composer-textarea {
    width: 100%;
    min-height: 180px;
    background: rgba(15, 12, 41, 0.95);
    border: none;
    border-radius: 20px;
    padding: 24px;
    color: #F8FAFC;
    font-size: 18px;
    font-family: 'Inter', sans-serif;
    line-height: 1.6;
    resize: none;
    position: relative;
    z-index: 1;
}

.ng-composer.text-mode .ng-composer-textarea:focus {
    outline: none;
    box-shadow: none;
}

.ng-composer.text-mode .ng-composer-textarea::placeholder {
    color: rgba(255, 255, 255, 0.35);
    font-style: italic;
}

/* Character Counter Ring */
.ng-char-counter {
    position: absolute;
    bottom: 16px;
    right: 16px;
    width: 44px;
    height: 44px;
    z-index: 2;
}

.ng-char-ring {
    transform: rotate(-90deg);
}

.ng-char-ring-bg {
    fill: none;
    stroke: rgba(255, 255, 255, 0.1);
    stroke-width: 3;
}

.ng-char-ring-progress {
    fill: none;
    stroke: url(#charGradient);
    stroke-width: 3;
    stroke-linecap: round;
    stroke-dasharray: 113;
    stroke-dashoffset: 113;
    transition: stroke-dashoffset 0.3s ease;
}

.ng-char-count {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.7);
}

.ng-char-count.warning {
    color: #F59E0B;
}

.ng-char-count.danger {
    color: #EF4444;
}

/* Floating Orbs */
.ng-writer-orbs {
    position: absolute;
    inset: 0;
    pointer-events: none;
    overflow: hidden;
    border-radius: 20px;
    z-index: 0;
}

.ng-writer-orb {
    position: absolute;
    border-radius: 50%;
    filter: blur(30px);
    opacity: 0.15;
    animation: ng-orbFloat 8s ease-in-out infinite;
}

.ng-writer-orb:nth-child(1) {
    width: 80px;
    height: 80px;
    background: #8B5CF6;
    top: 10%;
    left: 10%;
    animation-delay: 0s;
}

.ng-writer-orb:nth-child(2) {
    width: 60px;
    height: 60px;
    background: #06B6D4;
    top: 60%;
    right: 15%;
    animation-delay: -2s;
}

.ng-writer-orb:nth-child(3) {
    width: 50px;
    height: 50px;
    background: #EC4899;
    bottom: 20%;
    left: 20%;
    animation-delay: -4s;
}

@keyframes ng-orbFloat {
    0%, 100% { transform: translate(0, 0) scale(1); }
    25% { transform: translate(10px, -15px) scale(1.1); }
    50% { transform: translate(-5px, 10px) scale(0.95); }
    75% { transform: translate(15px, 5px) scale(1.05); }
}

/* Mood Selector */
.ng-mood-selector {
    display: flex;
    gap: 8px;
    margin-bottom: 20px;
    justify-content: center;
}

.ng-mood-btn {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    font-size: 20px;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.ng-mood-btn:active {
    transform: scale(0.9);
}

.ng-mood-btn.active {
    background: rgba(139, 92, 246, 0.3);
    border-color: #8B5CF6;
    box-shadow: 0 0 20px rgba(139, 92, 246, 0.4);
}

/* Premium Submit Button */
.ng-composer.text-mode .ng-composer-submit {
    margin-top: 4px;
    padding: 20px;
    border-radius: 16px;
    font-size: 17px;
    background: linear-gradient(135deg, #8B5CF6 0%, #7C3AED 50%, #6D28D9 100%);
    box-shadow:
        0 4px 20px rgba(139, 92, 246, 0.4),
        0 8px 40px rgba(139, 92, 246, 0.2),
        inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

.ng-composer.text-mode .ng-composer-submit:active {
    transform: scale(0.98) translateY(2px);
    box-shadow:
        0 2px 10px rgba(139, 92, 246, 0.4),
        inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

/* Inspiring Prompts Animation */
@keyframes ng-placeholderFade {
    0%, 45% { opacity: 1; }
    50%, 95% { opacity: 0; }
    100% { opacity: 1; }
}

/* ═══════════════════════════════════════════════════════
   NAVESA WRITER PRO - Premium Text Composer
   ═══════════════════════════════════════════════════════ */

/* Full-height layout for text composer */
.ng-text-composer.text-mode {
    flex: 1;
    width: 100%;
    max-width: 100%;
    display: flex;
    flex-direction: column;
    padding: 0;
    position: relative;
}

/* When text composer is active, parent should fill screen */
.ng-text-composer.active {
    display: flex !important;
}

/* Header with user info and submit */
.ng-writer-pro-header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    flex-shrink: 0; /* Prevent header from shrinking */
}

.ng-writer-pro-back {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: transparent;
    border: none;
    color: rgba(255, 255, 255, 0.8);
    font-size: 18px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.ng-writer-pro-back:active {
    background: rgba(255, 255, 255, 0.1);
}

.ng-writer-pro-user {
    display: flex;
    align-items: center;
    flex: 1;
    gap: 10px;
}

.ng-writer-pro-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid rgba(139, 92, 246, 0.5);
}

.ng-writer-pro-name {
    font-size: 15px;
    font-weight: 600;
    color: #fff;
}

.ng-writer-pro-submit {
    padding: 10px 24px;
    border-radius: 20px;
    background: linear-gradient(135deg, #8B5CF6 0%, #6D28D9 100%);
    border: none;
    color: white;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
}

.ng-writer-pro-submit:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.ng-writer-pro-submit:not(:disabled):active {
    transform: scale(0.95);
}

/* Main content area */
.ng-writer-pro-content {
    flex: 1;
    overflow-y: auto;
    padding: 16px;
    padding-bottom: 84px; /* Space for fixed toolbar */
    display: flex;
    flex-direction: column;
    gap: 12px;
    min-height: 0; /* Allow flex item to shrink below content size */
}

/* Textarea */
.ng-writer-pro-textarea {
    width: 100%;
    min-height: 120px;
    max-height: 200px;
    background: transparent;
    border: none;
    color: #F8FAFC;
    font-size: 18px;
    font-family: 'Inter', sans-serif;
    line-height: 1.5;
    resize: none;
    outline: none;
}

.ng-writer-pro-textarea::placeholder {
    color: rgba(255, 255, 255, 0.4);
}

/* Character counter */
.ng-writer-pro-counter {
    font-size: 13px;
    color: rgba(255, 255, 255, 0.5);
    text-align: right;
}

.ng-writer-pro-counter.warning { color: #F59E0B; }
.ng-writer-pro-counter.danger { color: #EF4444; }

/* ═══ ATTACHMENTS PREVIEW ═══ */
.ng-writer-attachments {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* GIF Preview */
.ng-attachment-gif {
    position: relative;
    border-radius: 16px;
    overflow: hidden;
    background: rgba(0, 0, 0, 0.3);
}

.ng-attachment-gif img {
    width: 100%;
    max-height: 200px;
    object-fit: cover;
    display: block;
}

.ng-attachment-remove {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.7);
    border: none;
    color: white;
    font-size: 12px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Poll Preview */
.ng-attachment-poll {
    background: rgba(255, 255, 255, 0.05);
    border-radius: 16px;
    padding: 16px;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.ng-poll-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
}

.ng-poll-title {
    font-size: 14px;
    font-weight: 600;
    color: #fff;
    display: flex;
    align-items: center;
    gap: 8px;
}

.ng-poll-title i {
    color: #8B5CF6;
}

.ng-poll-options {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.ng-poll-option-input {
    display: flex;
    align-items: center;
    gap: 8px;
}

.ng-poll-option-input input {
    flex: 1;
    padding: 12px 16px;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: #fff;
    font-size: 14px;
    outline: none;
}

.ng-poll-option-input input:focus {
    border-color: #8B5CF6;
}

.ng-poll-option-input input::placeholder {
    color: rgba(255, 255, 255, 0.4);
}

.ng-poll-add-btn {
    padding: 10px;
    border-radius: 10px;
    background: rgba(139, 92, 246, 0.2);
    border: 1px dashed rgba(139, 92, 246, 0.4);
    color: #A78BFA;
    font-size: 13px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    margin-top: 4px;
}

.ng-poll-duration {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.ng-poll-duration label {
    font-size: 13px;
    color: rgba(255, 255, 255, 0.6);
}

.ng-poll-duration select {
    flex: 1;
    padding: 8px 12px;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: #fff;
    font-size: 13px;
    outline: none;
}

/* Theme Preview (background for text post) */
.ng-theme-preview {
    border-radius: 16px;
    padding: 20px;
    min-height: 100px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    font-size: 16px;
    color: #fff;
    font-weight: 500;
    line-height: 1.4;
}

/* ═══ BOTTOM TOOLBAR ═══ */
.ng-writer-toolbar {
    display: flex;
    align-items: center;
    padding: 12px 16px;
    gap: 4px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(15, 12, 41, 0.98);
    /* FIXED position - guaranteed at screen bottom */
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: 68px;
    box-sizing: border-box;
    z-index: 1000;
}

.ng-toolbar-btn {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: transparent;
    border: none;
    color: rgba(255, 255, 255, 0.7);
    font-size: 20px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    position: relative;
}

.ng-toolbar-btn:active {
    transform: scale(0.9);
    background: rgba(139, 92, 246, 0.2);
}

.ng-toolbar-btn.active {
    color: #8B5CF6;
    background: rgba(139, 92, 246, 0.15);
}

.ng-toolbar-btn i {
    pointer-events: none;
}

/* Toolbar spacer */
.ng-toolbar-spacer {
    flex: 1;
}

/* ═══ PICKER PANELS (slide up from bottom) ═══ */
.ng-picker-panel {
    position: fixed;
    bottom: 68px; /* Above toolbar (68px height) */
    left: 0;
    right: 0;
    background: rgba(15, 10, 35, 0.98);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 20px 20px 0 0;
    transform: translateY(100%);
    transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
    z-index: 999;
    /* Much taller panels for better content visibility */
    height: calc(65vh - 68px); /* 65% of viewport minus toolbar */
    max-height: 500px; /* Cap for very tall screens */
    min-height: 350px; /* Minimum for short screens */
    display: flex;
    flex-direction: column;
}

.ng-picker-panel.active {
    transform: translateY(0);
}

.ng-picker-header {
    display: flex;
    align-items: center;
    padding: 12px 16px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    gap: 12px;
    flex-shrink: 0;
}

.ng-picker-title {
    flex: 1;
    font-size: 16px;
    font-weight: 600;
    color: #fff;
}

.ng-picker-close {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.1);
    border: none;
    color: rgba(255, 255, 255, 0.7);
    font-size: 14px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

.ng-picker-search {
    margin: 8px 16px;
    padding: 10px 14px;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: #fff;
    font-size: 14px;
    outline: none;
    width: calc(100% - 32px);
    flex-shrink: 0;
}

.ng-picker-search::placeholder {
    color: rgba(255, 255, 255, 0.4);
}

.ng-picker-content {
    flex: 1;
    overflow-y: auto;
    padding: 12px 16px 16px;
    min-height: 0; /* Critical for flex overflow */
}

/* Smooth scrolling */
.ng-picker-content::-webkit-scrollbar {
    width: 4px;
}

.ng-picker-content::-webkit-scrollbar-track {
    background: transparent;
}

.ng-picker-content::-webkit-scrollbar-thumb {
    background: rgba(139, 92, 246, 0.3);
    border-radius: 2px;
}

.ng-picker-content::-webkit-scrollbar-thumb:hover {
    background: rgba(139, 92, 246, 0.5);
}

/* ═══ EMOJI PICKER ═══ */
.ng-emoji-categories {
    display: flex;
    gap: 4px;
    padding: 8px 12px;
    overflow-x: auto;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    flex-shrink: 0;
}

.ng-emoji-categories::-webkit-scrollbar {
    display: none;
}

.ng-emoji-cat-btn {
    width: 38px;
    height: 38px;
    padding: 0;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.05);
    border: none;
    color: rgba(255, 255, 255, 0.6);
    font-size: 20px;
    cursor: pointer;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.15s ease;
}

.ng-emoji-cat-btn:active {
    transform: scale(0.9);
}

.ng-emoji-cat-btn.active {
    background: rgba(139, 92, 246, 0.3);
    color: #fff;
}

.ng-emoji-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 6px;
    padding: 4px;
}

.ng-emoji-btn {
    aspect-ratio: 1;
    border-radius: 10px;
    background: transparent;
    border: none;
    font-size: 26px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.15s ease, background 0.15s ease;
}

.ng-emoji-btn:active {
    background: rgba(139, 92, 246, 0.3);
    transform: scale(1.2);
}

.ng-emoji-section-title {
    font-size: 12px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.5);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin: 16px 0 8px;
}

/* ═══ GIF PICKER ═══ */
.ng-gif-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
}

.ng-gif-item {
    border-radius: 10px;
    overflow: hidden;
    cursor: pointer;
    position: relative;
    aspect-ratio: 1; /* Square for better fit */
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    transition: transform 0.2s ease, border-color 0.2s ease;
}

.ng-gif-item:active {
    transform: scale(0.96);
    border-color: rgba(139, 92, 246, 0.5);
}

.ng-gif-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.ng-gif-item:active {
    transform: scale(0.95);
}

.ng-gif-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px;
    color: rgba(255, 255, 255, 0.5);
}

.ng-gif-categories {
    display: flex;
    gap: 6px;
    padding: 8px 12px;
    overflow-x: auto;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    flex-shrink: 0;
}

.ng-gif-categories::-webkit-scrollbar {
    display: none;
}

.ng-gif-cat-btn {
    padding: 8px 14px;
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.1);
    border: none;
    color: rgba(255, 255, 255, 0.85);
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    white-space: nowrap;
    flex-shrink: 0;
    transition: all 0.15s ease;
}

.ng-gif-cat-btn:active {
    transform: scale(0.95);
}

.ng-gif-cat-btn.active {
    background: #8B5CF6;
    color: #fff;
}

/* ═══ THEME PICKER ═══ */
.ng-theme-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
}

.ng-theme-option {
    aspect-ratio: 1;
    border-radius: 16px;
    cursor: pointer;
    border: 3px solid transparent;
    transition: all 0.2s ease;
    position: relative;
}

.ng-theme-option.active {
    border-color: #fff;
    transform: scale(1.05);
}

.ng-theme-option::after {
    content: '✓';
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    color: #fff;
    opacity: 0;
    transition: opacity 0.2s ease;
}

.ng-theme-option.active::after {
    opacity: 1;
}

/* Theme gradients */
.ng-theme-none { background: transparent; border: 2px dashed rgba(255,255,255,0.2); }
.ng-theme-aurora { background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); }
.ng-theme-sunset { background: linear-gradient(135deg, #fa709a 0%, #fee140 100%); }
.ng-theme-ocean { background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%); }
.ng-theme-forest { background: linear-gradient(135deg, #11998e 0%, #38ef7d 100%); }
.ng-theme-fire { background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%); }
.ng-theme-night { background: linear-gradient(135deg, #0c0c0c 0%, #434343 100%); }
.ng-theme-candy { background: linear-gradient(135deg, #a8edea 0%, #fed6e3 100%); }

/* ═══ LIVE PREVIEW CARD ═══ */
.ng-live-preview {
    background: rgba(255, 255, 255, 0.03);
    border-radius: 16px;
    padding: 16px;
    border: 1px solid rgba(255, 255, 255, 0.08);
}

.ng-preview-label {
    font-size: 11px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.4);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 12px;
}

.ng-preview-card {
    border-radius: 12px;
    overflow: hidden;
}

.ng-preview-header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px;
    background: rgba(0, 0, 0, 0.2);
}

.ng-preview-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    object-fit: cover;
}

.ng-preview-user {
    font-size: 14px;
    font-weight: 600;
    color: #fff;
}

.ng-preview-body {
    padding: 12px;
    font-size: 15px;
    color: #fff;
    line-height: 1.4;
    min-height: 60px;
}

.ng-preview-body.has-theme {
    padding: 24px 16px;
    text-align: center;
    font-size: 16px;
    font-weight: 500;
}

/* ═══════════════════════════════════════════════════════
   COMMENTS SHEET
   ═══════════════════════════════════════════════════════ */

/* Overlay backdrop */
.ng-comments-sheet {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 200;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

.ng-comments-sheet.active {
    opacity: 1;
    visibility: visible;
}

/* Comments container (slides up from bottom) */
.ng-comments-container {
    background: linear-gradient(180deg, #1a1025 0%, #0d0a14 100%);
    border-radius: 24px 24px 0 0;
    max-height: 80vh;
    min-height: 50vh;
    display: flex;
    flex-direction: column;
    transform: translateY(100%);
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    box-shadow: 0 -10px 40px rgba(0, 0, 0, 0.5);
}

.ng-comments-sheet.active .ng-comments-container {
    transform: translateY(0);
}

/* Drag handle */
.ng-comments-handle {
    width: 40px;
    height: 4px;
    background: rgba(255, 255, 255, 0.3);
    border-radius: 2px;
    margin: 12px auto 8px;
    flex-shrink: 0;
}

/* Header */
.ng-comments-header {
    display: flex;
    align-items: center;
    padding: 8px 16px 16px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    flex-shrink: 0;
}

.ng-comments-close {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.1);
    border: none;
    color: rgba(255, 255, 255, 0.8);
    font-size: 16px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
}

.ng-comments-close:active {
    transform: scale(0.9);
    background: rgba(255, 255, 255, 0.15);
}

.ng-comments-title {
    flex: 1;
    text-align: center;
    font-weight: 700;
    font-size: 16px;
    color: #fff;
    letter-spacing: 0.3px;
}

/* Comments list */
.ng-comments-list {
    flex: 1;
    overflow-y: auto;
    padding: 16px;
    min-height: 0;
}

.ng-comments-list::-webkit-scrollbar {
    width: 3px;
}

.ng-comments-list::-webkit-scrollbar-track {
    background: transparent;
}

.ng-comments-list::-webkit-scrollbar-thumb {
    background: rgba(139, 92, 246, 0.3);
    border-radius: 2px;
}

/* Empty state */
.ng-comments-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 48px 24px;
    text-align: center;
}

.ng-comments-empty-icon {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: rgba(139, 92, 246, 0.15);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 16px;
}

.ng-comments-empty-icon i {
    font-size: 28px;
    color: #8B5CF6;
}

.ng-comments-empty-title {
    font-size: 18px;
    font-weight: 600;
    color: #fff;
    margin-bottom: 8px;
}

.ng-comments-empty-text {
    font-size: 14px;
    color: rgba(255, 255, 255, 0.5);
}

/* =====================================================
   INSTAGRAM-STYLE COMMENTS (exact replica)
   ===================================================== */

/* Single comment row */
.ng-comment {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 16px;
    padding-right: 8px;
}

/* Small circular avatar */
.ng-comment-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}

/* Main content area (text + meta) */
.ng-comment-main {
    flex: 1;
    min-width: 0;
}

/* Text row: username + message inline */
.ng-comment-text-row {
    line-height: 1.4;
    word-wrap: break-word;
}

.ng-comment-author {
    font-size: 13px;
    font-weight: 600;
    color: #fff;
}

.ng-comment-message {
    font-size: 13px;
    font-weight: 400;
    color: rgba(255, 255, 255, 0.9);
}

/* Meta row: time, like, reply - all inline subtle text */
.ng-comment-meta {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 8px;
}

.ng-comment-ago {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.4);
}

.ng-comment-action {
    font-size: 12px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.4);
    cursor: pointer;
    transition: color 0.15s ease;
}

.ng-comment-action:active {
    color: rgba(255, 255, 255, 0.7);
}

.ng-comment-action.liked {
    color: #ED4956;
}

.ng-comment-delete {
    color: rgba(237, 73, 86, 0.6) !important;
}

.ng-comment-delete:active {
    color: #ED4956 !important;
}

/* Heart icon on the right */
.ng-comment-heart-icon {
    flex-shrink: 0;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    padding: 0;
    margin-top: 4px;
    color: rgba(255, 255, 255, 0.4);
    font-size: 12px;
    cursor: pointer;
    transition: all 0.15s ease;
}

.ng-comment-heart-icon:active {
    transform: scale(1.3);
}

.ng-comment-heart-icon.liked {
    color: #ED4956;
}

.ng-comment-heart-icon.liked i {
    animation: ngHeartPop 0.3s ease;
}

@keyframes ngHeartPop {
    0% { transform: scale(1); }
    50% { transform: scale(1.3); }
    100% { transform: scale(1); }
}

/* Input area */
.ng-comments-input {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    padding-bottom: calc(12px + env(safe-area-inset-bottom, 0));
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(10, 5, 20, 0.95);
    flex-shrink: 0;
}

.ng-comments-input-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
    border: 2px solid rgba(139, 92, 246, 0.3);
}

.ng-comments-input-wrapper {
    flex: 1;
    display: flex;
    align-items: center;
    background: rgba(255, 255, 255, 0.08);
    border-radius: 24px;
    padding: 4px 4px 4px 16px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    transition: border-color 0.2s ease;
}

.ng-comments-input-wrapper:focus-within {
    border-color: rgba(139, 92, 246, 0.5);
}

.ng-comments-input input {
    flex: 1;
    background: transparent;
    border: none;
    padding: 10px 0;
    color: #fff;
    font-size: 14px;
    outline: none;
}

.ng-comments-input input::placeholder {
    color: rgba(255, 255, 255, 0.4);
}

.ng-comments-send {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: linear-gradient(135deg, #8B5CF6 0%, #6D28D9 100%);
    border: none;
    color: white;
    font-size: 14px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    opacity: 0.5;
}

.ng-comments-send.active {
    opacity: 1;
}

.ng-comments-send:active {
    transform: scale(0.9);
}

/* Loading state */
.ng-comments-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px;
}

.ng-comments-loading i {
    font-size: 24px;
    color: #8B5CF6;
    animation: spin 1s linear infinite;
}

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

/* ═══════════════════════════════════════════════════════
   STORY VIEWER
   ═══════════════════════════════════════════════════════ */

.ng-story-viewer {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--ng-void-deep);
    z-index: 300;
    display: none;
}

.ng-story-viewer.active {
    display: flex;
    flex-direction: column;
}

.ng-story-progress {
    display: flex;
    gap: 4px;
    padding: 12px 16px 8px;
}

.ng-story-progress-bar {
    flex: 1;
    height: 3px;
    background: rgba(255, 255, 255, 0.3);
    border-radius: 2px;
    overflow: hidden;
}

.ng-story-progress-fill {
    height: 100%;
    background: white;
    border-radius: 2px;
    width: 0%;
    transition: width 0.1s linear;
}

.ng-story-header {
    display: flex;
    align-items: center;
    padding: 8px 16px;
    gap: 12px;
}

.ng-story-user-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    object-fit: cover;
}

.ng-story-user-name {
    flex: 1;
    font-size: 14px;
    font-weight: 600;
}

.ng-story-time {
    font-size: 12px;
    color: var(--ng-text-muted);
}

.ng-story-close {
    width: 36px;
    height: 36px;
    background: transparent;
    border: none;
    color: white;
    font-size: 24px;
    cursor: pointer;
}

.ng-story-content {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.ng-story-content img,
.ng-story-content video {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.ng-story-nav {
    position: absolute;
    top: 80px;
    bottom: 0;
    width: 30%;
    background: transparent;
    border: none;
    cursor: pointer;
}

.ng-story-nav.prev { left: 0; }
.ng-story-nav.next { right: 0; }

/* ═══════════════════════════════════════════════════════
   TOAST
   ═══════════════════════════════════════════════════════ */

.ng-toast {
    position: fixed;
    bottom: 100px;
    left: 50%;
    transform: translateX(-50%) translateY(100px);
    padding: 14px 24px;
    background: linear-gradient(135deg, rgba(139, 92, 246, 0.95) 0%, rgba(109, 40, 217, 0.95) 100%);
    border: 1px solid rgba(167, 139, 250, 0.4);
    border-radius: 50px;
    font-size: 14px;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 12px;
    opacity: 0;
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    z-index: 10000;
    box-shadow:
        0 8px 32px rgba(139, 92, 246, 0.4),
        0 4px 16px rgba(0, 0, 0, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.15);
    color: #fff;
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}

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

.ng-toast i {
    font-size: 18px;
    color: #fff;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.2));
}

/* ═══════════════════════════════════════════════════════
   LOADING STATES
   ═══════════════════════════════════════════════════════ */

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

.ng-spinner {
    width: 40px;
    height: 40px;
    border: 3px solid var(--ng-card-border);
    border-top-color: var(--ng-arcane);
    border-radius: 50%;
    animation: ng-spin 1s linear infinite;
}

@keyframes ng-spin {
    100% { transform: rotate(360deg); }
}

/* Empty State */
.ng-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 40px 20px;
    text-align: center;
    flex: 1;
    min-height: 200px;
}

.ng-empty-icon {
    font-size: 60px;
    margin-bottom: 20px;
    opacity: 0.5;
}

.ng-empty-title {
    font-size: 18px;
    font-weight: 600;
    margin-bottom: 8px;
}

.ng-empty-text {
    font-size: 14px;
    color: var(--ng-text-muted);
}

/* ═══════════════════════════════════════════════════════
   PULL TO REFRESH
   ═══════════════════════════════════════════════════════ */

.ng-pull-indicator {
    position: fixed;
    top: 56px;
    left: 50%;
    transform: translateX(-50%) translateY(-60px);
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--ng-void-light);
    border: 2px solid var(--ng-arcane);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 50;
    transition: transform 0.3s ease;
    box-shadow: var(--ng-glow-arcane);
}

.ng-pull-indicator i {
    color: var(--ng-arcane);
    font-size: 16px;
}

.ng-pull-indicator.active {
    transform: translateX(-50%) translateY(16px);
}

.ng-pull-indicator.active i {
    animation: ng-spin 1s linear infinite;
}

/* ═══════════════════════════════════════════════════════
   RESPONSIVE
   ═══════════════════════════════════════════════════════ */

@media (min-width: 768px) {
    .ng-feed {
        max-width: 600px;
        margin: 0 auto;
    }

    .ng-create-modal {
        max-width: 500px;
        margin: 0 auto;
        border-radius: 24px;
        margin-bottom: 20px;
    }
}

/* ═══════════════════════════════════════════════════════
   NAVESAGRAM BOTTOM NAVIGATION
   EXACT COPY from navesa-void-forge.html test file
   ═══════════════════════════════════════════════════════ */

.ng-bottom-nav {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: 75px;
    background: rgba(10, 5, 20, 0.98);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-top: 1px solid rgba(139, 92, 246, 0.2);
    display: flex;
    align-items: center;
    justify-content: space-around;
    padding: 0 10px;
    padding-bottom: env(safe-area-inset-bottom, 0);
    z-index: 100;
}

.ng-bottom-nav::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(135deg, #8B5CF6 0%, #06B6D4 40%, #F59E0B 100%);
    opacity: 0.4;
}

.ng-nav-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    color: #94A3B8;
    text-decoration: none;
    font-size: 24px;
    cursor: pointer;
    transition: all 0.3s ease;
    padding: 8px 12px;
    border-radius: 12px;
}

.ng-nav-item.active {
    color: #A78BFA;
    filter: drop-shadow(0 0 8px #8B5CF6);
}

.ng-nav-item span {
    font-size: 10px;
    font-weight: 500;
}

/* Special Create Button - EXACT from test file */
.ng-nav-create {
    width: 56px;
    height: 56px;
    border-radius: 18px;
    background: linear-gradient(135deg, #8B5CF6 0%, #06B6D4 40%, #F59E0B 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 26px;
    color: white;
    box-shadow: 0 0 30px rgba(139, 92, 246, 0.6), 0 0 60px rgba(139, 92, 246, 0.3), 0 0 90px rgba(139, 92, 246, 0.1);
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
    padding: 0;
    flex-direction: row;
    gap: 0;
}

/* Shine animation on create button */
.ng-nav-create::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: linear-gradient(45deg, transparent 40%, rgba(255,255,255,0.15) 50%, transparent 60%);
    animation: ngCreateShine 4s infinite;
}

@keyframes ngCreateShine {
    0%, 100% { transform: translateX(-100%) rotate(45deg); }
    50% { transform: translateX(100%) rotate(45deg); }
}

.ng-nav-create:active {
    transform: scale(0.9);
    box-shadow: 0 0 50px rgba(139, 92, 246, 0.8);
}

.ng-nav-create i {
    position: relative;
    z-index: 1;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3));
}

/* Hide main FAB when bottom nav is visible */
.navesagram-view .ng-create-fab {
    display: none;
}

/* Hide main app bottom nav when Navesagram nav is active */
body[data-view="navesagram"] .bottom-nav--main,
body[data-view="navesagram"] .bottom-nav--gaming {
    display: none !important;
}


/* ═══════════════════════════════════════════════════════════════════════════════
   🎬 VIDEO STUDIO - NEON GRID CYBERPUNK THEME
   Full-featured video editor with professional editing tools
   ═══════════════════════════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════
   VIDEO STUDIO VARIABLES
═══════════════════════════════════════════ */
.ng-video-studio {
    /* NEON GRID CYBERPUNK PALETTE */
    --vs-neon-cyan: #00f0ff;
    --vs-neon-pink: #ff00aa;
    --vs-neon-yellow: #f0ff00;
    --vs-neon-purple: #bf00ff;
    --vs-neon-orange: #ff6600;

    /* Glow variants */
    --vs-glow-cyan: 0 0 20px rgba(0, 240, 255, 0.5), 0 0 40px rgba(0, 240, 255, 0.3);
    --vs-glow-pink: 0 0 20px rgba(255, 0, 170, 0.5), 0 0 40px rgba(255, 0, 170, 0.3);
    --vs-glow-yellow: 0 0 20px rgba(240, 255, 0, 0.5), 0 0 40px rgba(240, 255, 0, 0.3);

    /* Dark backgrounds */
    --vs-bg-deep: #0a0a0f;
    --vs-bg-panel: #12121a;
    --vs-bg-card: #1a1a25;
    --vs-bg-elevated: #222230;

    /* Grid */
    --vs-grid-color: rgba(0, 240, 255, 0.08);

    /* Text */
    --vs-text-primary: #ffffff;
    --vs-text-secondary: rgba(255, 255, 255, 0.6);
    --vs-text-muted: rgba(255, 255, 255, 0.4);
}

/* ═══════════════════════════════════════════
   ANIMATED GRID BACKGROUND
═══════════════════════════════════════════ */
.ng-video-studio .vs-grid-bg {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background:
        linear-gradient(90deg, var(--vs-grid-color) 1px, transparent 1px),
        linear-gradient(var(--vs-grid-color) 1px, transparent 1px);
    background-size: 40px 40px;
    animation: vsGridMove 20s linear infinite;
    pointer-events: none;
    z-index: 0;
}

@keyframes vsGridMove {
    0% { transform: perspective(500px) rotateX(60deg) translateY(0); }
    100% { transform: perspective(500px) rotateX(60deg) translateY(40px); }
}

/* Horizon glow */
.ng-video-studio .vs-horizon-glow {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: 300px;
    background: linear-gradient(to top,
        rgba(0, 240, 255, 0.15) 0%,
        rgba(191, 0, 255, 0.1) 30%,
        transparent 100%);
    pointer-events: none;
    z-index: 0;
}

/* Scan lines overlay */
.ng-video-studio .vs-scanlines {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: repeating-linear-gradient(
        0deg,
        transparent,
        transparent 2px,
        rgba(0, 0, 0, 0.15) 2px,
        rgba(0, 0, 0, 0.15) 4px
    );
    pointer-events: none;
    z-index: 1000;
    opacity: 0.5;
}

/* ═══════════════════════════════════════════
   MAIN CONTAINER
═══════════════════════════════════════════ */
.ng-video-studio {
    position: fixed;
    inset: 0;
    z-index: 10001;
    background: var(--vs-bg-deep);
    font-family: 'Rajdhani', sans-serif;
    color: var(--vs-text-primary);
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-tap-highlight-color: transparent;
}

.ng-video-studio .vs-content {
    position: relative;
    z-index: 1;
    max-width: 420px;
    margin: 0 auto;
    min-height: 100vh;
    padding: 16px;
    padding-bottom: 100px;
}

/* ═══════════════════════════════════════════
   HEADER - CYBERPUNK HUD
═══════════════════════════════════════════ */
.ng-video-studio .vs-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 20px;
    padding: 16px 0;
}

.ng-video-studio .vs-back-btn {
    width: 40px;
    height: 40px;
    background: transparent;
    border: 2px solid var(--vs-neon-cyan);
    color: var(--vs-neon-cyan);
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
    flex-shrink: 0;
}

.ng-video-studio .vs-back-btn::before {
    content: '';
    position: absolute;
    inset: 0;
    background: var(--vs-neon-cyan);
    opacity: 0;
    transition: opacity 0.3s;
}

.ng-video-studio .vs-back-btn:hover::before {
    opacity: 0.2;
}

.ng-video-studio .vs-back-btn:hover {
    box-shadow: var(--vs-glow-cyan);
}

.ng-video-studio .vs-header-title {
    flex: 1;
    text-align: center;
    padding: 0 12px;
}

.ng-video-studio .vs-header-title h1 {
    font-family: 'Orbitron', sans-serif;
    font-size: 20px;
    font-weight: 800;
    letter-spacing: 3px;
    background: linear-gradient(90deg, var(--vs-neon-cyan), var(--vs-neon-pink));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    text-shadow: 0 0 30px rgba(0, 240, 255, 0.5);
    animation: vsTextGlitch 5s infinite;
}

@keyframes vsTextGlitch {
    0%, 90%, 100% { opacity: 1; transform: translateX(0); }
    92% { opacity: 0.8; transform: translateX(-2px); }
    94% { opacity: 1; transform: translateX(2px); }
    96% { opacity: 0.9; transform: translateX(-1px); }
}

.ng-video-studio .vs-header-title p {
    font-family: 'Share Tech Mono', monospace;
    font-size: 10px;
    color: var(--vs-neon-cyan);
    opacity: 0.7;
    letter-spacing: 1px;
    margin-top: 2px;
}

.ng-video-studio .vs-header-title p::before {
    content: '> ';
}

/* Status indicator */
.ng-video-studio .vs-status-indicator {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 6px;
    font-family: 'Share Tech Mono', monospace;
    font-size: 10px;
    color: var(--vs-neon-yellow);
    min-width: 60px;
    flex-shrink: 0;
}

.ng-video-studio .vs-status-dot {
    width: 8px;
    height: 8px;
    background: var(--vs-neon-yellow);
    border-radius: 50%;
    animation: vsPulse 1s ease infinite;
}

@keyframes vsPulse {
    0%, 100% { opacity: 1; box-shadow: 0 0 10px var(--vs-neon-yellow); }
    50% { opacity: 0.5; box-shadow: 0 0 5px var(--vs-neon-yellow); }
}

/* ═══════════════════════════════════════════
   VIDEO PREVIEW - HOLOGRAPHIC CINEMA SCREEN
═══════════════════════════════════════════ */
.ng-video-studio .vs-preview-container {
    position: relative;
    margin-bottom: 20px;
    padding: 12px;
    background: linear-gradient(135deg, rgba(0, 240, 255, 0.08) 0%, rgba(255, 0, 170, 0.08) 100%);
    border-radius: 20px;
    border: 1px solid rgba(0, 240, 255, 0.15);
}

/* Outer glow effect */
.ng-video-studio .vs-preview-container::before {
    content: '';
    position: absolute;
    inset: -2px;
    background: linear-gradient(135deg, var(--vs-neon-cyan), var(--vs-neon-pink));
    border-radius: 22px;
    z-index: -1;
    opacity: 0.3;
    filter: blur(8px);
}

/* Corner brackets - animated */
.ng-video-studio .vs-corner-bracket {
    position: absolute;
    width: 20px;
    height: 20px;
    z-index: 20;
    pointer-events: none;
}

.ng-video-studio .vs-corner-bracket::before,
.ng-video-studio .vs-corner-bracket::after {
    content: '';
    position: absolute;
    background: var(--vs-neon-cyan);
    box-shadow: 0 0 8px var(--vs-neon-cyan);
}

.ng-video-studio .vs-corner-bracket.tl { top: 8px; left: 8px; }
.ng-video-studio .vs-corner-bracket.tl::before { width: 16px; height: 2px; top: 0; left: 0; }
.ng-video-studio .vs-corner-bracket.tl::after { width: 2px; height: 16px; top: 0; left: 0; }

.ng-video-studio .vs-corner-bracket.tr { top: 8px; right: 8px; }
.ng-video-studio .vs-corner-bracket.tr::before { width: 16px; height: 2px; top: 0; right: 0; }
.ng-video-studio .vs-corner-bracket.tr::after { width: 2px; height: 16px; top: 0; right: 0; }

.ng-video-studio .vs-corner-bracket.bl { bottom: 8px; left: 8px; }
.ng-video-studio .vs-corner-bracket.bl::before { width: 16px; height: 2px; bottom: 0; left: 0; }
.ng-video-studio .vs-corner-bracket.bl::after { width: 2px; height: 16px; bottom: 0; left: 0; }

.ng-video-studio .vs-corner-bracket.br { bottom: 8px; right: 8px; }
.ng-video-studio .vs-corner-bracket.br::before { width: 16px; height: 2px; bottom: 0; right: 0; }
.ng-video-studio .vs-corner-bracket.br::after { width: 2px; height: 16px; bottom: 0; right: 0; }

/* Animate corner brackets */
.ng-video-studio .vs-corner-bracket::before,
.ng-video-studio .vs-corner-bracket::after {
    animation: vsCornerPulse 2s ease-in-out infinite;
}

.ng-video-studio .vs-corner-bracket.tr::before,
.ng-video-studio .vs-corner-bracket.tr::after { animation-delay: 0.5s; }
.ng-video-studio .vs-corner-bracket.bl::before,
.ng-video-studio .vs-corner-bracket.bl::after { animation-delay: 1s; }
.ng-video-studio .vs-corner-bracket.br::before,
.ng-video-studio .vs-corner-bracket.br::after { animation-delay: 1.5s; }

@keyframes vsCornerPulse {
    0%, 100% { opacity: 0.6; }
    50% { opacity: 1; }
}

.ng-video-studio .vs-preview {
    position: relative;
    aspect-ratio: 16/9;
    background: linear-gradient(180deg, #0d1520 0%, #1a2535 50%, #0d1520 100%);
    border-radius: 12px;
    overflow: hidden;
    border: 2px solid rgba(0, 240, 255, 0.4);
    box-shadow:
        inset 0 0 60px rgba(0, 0, 0, 0.5),
        0 0 30px rgba(0, 240, 255, 0.2);
}

/* CRT screen curvature effect */
.ng-video-studio .vs-preview::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at center, transparent 0%, rgba(0, 0, 0, 0.3) 100%);
    pointer-events: none;
    z-index: 6;
}

/* Animated scan line */
.ng-video-studio .vs-preview::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg,
        transparent 0%,
        rgba(0, 240, 255, 0.4) 50%,
        transparent 100%);
    animation: vsScanLine 3s linear infinite;
    z-index: 7;
    filter: blur(1px);
}

@keyframes vsScanLine {
    0% { top: -4px; opacity: 0; }
    10% { opacity: 1; }
    90% { opacity: 1; }
    100% { top: 100%; opacity: 0; }
}

/* Holographic shimmer overlay */
.ng-video-studio .vs-screen-overlay {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(135deg,
            rgba(0, 240, 255, 0.03) 0%,
            transparent 40%,
            transparent 60%,
            rgba(255, 0, 170, 0.03) 100%);
    pointer-events: none;
    z-index: 5;
}

/* Video element */
.ng-video-studio .vs-preview video {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Upload placeholder */
.ng-video-studio .vs-upload-placeholder {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    cursor: pointer;
    transition: all 0.3s ease;
    background: radial-gradient(ellipse at center, rgba(0, 240, 255, 0.05) 0%, transparent 70%);
}

.ng-video-studio .vs-upload-placeholder:hover {
    background: radial-gradient(ellipse at center, rgba(0, 240, 255, 0.1) 0%, transparent 70%);
}

.ng-video-studio .vs-upload-placeholder:hover .vs-upload-icon {
    transform: scale(1.1);
    box-shadow: var(--vs-glow-cyan);
}

.ng-video-studio .vs-upload-icon {
    width: 64px;
    height: 64px;
    background: linear-gradient(135deg, rgba(0, 240, 255, 0.2), rgba(255, 0, 170, 0.2));
    border: 2px solid var(--vs-neon-cyan);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    transition: all 0.3s ease;
}

.ng-video-studio .vs-upload-icon i {
    font-size: 24px;
    color: var(--vs-neon-cyan);
}

/* Rotating ring around icon */
.ng-video-studio .vs-upload-icon::before {
    content: '';
    position: absolute;
    inset: -10px;
    border: 2px solid transparent;
    border-top-color: var(--vs-neon-cyan);
    border-right-color: var(--vs-neon-pink);
    border-radius: 50%;
    animation: vsSpin 3s linear infinite;
}

.ng-video-studio .vs-upload-icon::after {
    content: '';
    position: absolute;
    inset: -6px;
    border: 1px dashed rgba(0, 240, 255, 0.3);
    border-radius: 50%;
    animation: vsSpin 8s linear infinite reverse;
}

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

.ng-video-studio .vs-upload-placeholder h3 {
    font-family: 'Orbitron', sans-serif;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 3px;
    color: var(--vs-text-primary);
    text-shadow: 0 0 20px rgba(0, 240, 255, 0.5);
}

.ng-video-studio .vs-upload-placeholder p {
    font-family: 'Share Tech Mono', monospace;
    font-size: 10px;
    color: var(--vs-text-muted);
    letter-spacing: 1px;
}

/* Recording options */
.ng-video-studio .vs-record-options {
    display: flex;
    gap: 12px;
    margin-top: 4px;
}

.ng-video-studio .vs-record-option {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    background: rgba(0, 240, 255, 0.1);
    border: 1px solid rgba(0, 240, 255, 0.3);
    border-radius: 20px;
    color: var(--vs-neon-cyan);
    font-size: 11px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
}

.ng-video-studio .vs-record-option:hover {
    background: rgba(0, 240, 255, 0.2);
    box-shadow: var(--vs-glow-cyan);
    transform: translateY(-2px);
}

.ng-video-studio .vs-record-option.record {
    background: rgba(255, 0, 170, 0.1);
    border-color: rgba(255, 0, 170, 0.3);
    color: var(--vs-neon-pink);
}

.ng-video-studio .vs-record-option.record:hover {
    background: rgba(255, 0, 170, 0.2);
    box-shadow: var(--vs-glow-pink);
}

/* Video info HUD overlay */
.ng-video-studio .vs-hud {
    position: absolute;
    top: 10px;
    left: 10px;
    right: 10px;
    display: none;
    justify-content: space-between;
    align-items: flex-start;
    z-index: 10;
}

.ng-video-studio .vs-preview.has-video .vs-hud {
    display: flex;
}

.ng-video-studio .vs-hud-info {
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(8px);
    border: 1px solid rgba(0, 240, 255, 0.4);
    border-radius: 6px;
    padding: 6px 10px;
    box-shadow: 0 0 15px rgba(0, 240, 255, 0.2);
}

.ng-video-studio .vs-hud-item {
    display: flex;
    align-items: center;
    gap: 5px;
    font-family: 'Share Tech Mono', monospace;
    font-size: 9px;
    color: var(--vs-neon-cyan);
    text-shadow: 0 0 10px var(--vs-neon-cyan);
}

.ng-video-studio .vs-hud-item + .vs-hud-item {
    margin-top: 3px;
}

.ng-video-studio .vs-hud-item i {
    font-size: 8px;
}

/* REC indicator */
.ng-video-studio .vs-rec-indicator {
    position: absolute;
    top: 10px;
    left: 50%;
    transform: translateX(-50%);
    display: none;
    align-items: center;
    gap: 6px;
    padding: 4px 12px;
    background: rgba(255, 0, 0, 0.2);
    border: 1px solid rgba(255, 0, 0, 0.5);
    border-radius: 4px;
    z-index: 15;
}

.ng-video-studio .vs-preview.has-video .vs-rec-indicator {
    display: flex;
}

.ng-video-studio .vs-rec-dot {
    width: 8px;
    height: 8px;
    background: #ff3333;
    border-radius: 50%;
    animation: vsRecBlink 1s ease infinite;
    box-shadow: 0 0 10px #ff3333;
}

@keyframes vsRecBlink {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.3; }
}

.ng-video-studio .vs-rec-text {
    font-family: 'Share Tech Mono', monospace;
    font-size: 10px;
    font-weight: 700;
    color: #ff3333;
    letter-spacing: 2px;
}

/* Demo video content */
.ng-video-studio .vs-preview.has-video .vs-upload-placeholder {
    display: none;
}

.ng-video-studio .vs-demo-content {
    display: none;
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse at 30% 20%, rgba(0, 240, 255, 0.15) 0%, transparent 50%),
        radial-gradient(ellipse at 70% 80%, rgba(255, 0, 170, 0.1) 0%, transparent 50%),
        linear-gradient(180deg, #0d1520 0%, #1a2a3f 40%, #0f1825 100%);
}

.ng-video-studio .vs-preview.has-video .vs-demo-content {
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Animated background particles */
.ng-video-studio .vs-demo-content::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image:
        radial-gradient(1px 1px at 20px 30px, rgba(0, 240, 255, 0.4), transparent),
        radial-gradient(1px 1px at 40px 70px, rgba(255, 0, 170, 0.3), transparent),
        radial-gradient(1px 1px at 50px 160px, rgba(0, 240, 255, 0.3), transparent),
        radial-gradient(1px 1px at 90px 40px, rgba(255, 0, 170, 0.4), transparent),
        radial-gradient(1px 1px at 130px 80px, rgba(0, 240, 255, 0.3), transparent),
        radial-gradient(1px 1px at 160px 120px, rgba(255, 0, 170, 0.3), transparent);
    background-repeat: repeat;
    background-size: 200px 200px;
    animation: vsParticleFloat 20s linear infinite;
    opacity: 0.6;
}

@keyframes vsParticleFloat {
    0% { transform: translateY(0); }
    100% { transform: translateY(-200px); }
}

.ng-video-studio .vs-play-btn {
    width: 60px;
    height: 60px;
    background: rgba(0, 0, 0, 0.4);
    backdrop-filter: blur(10px);
    border: 2px solid var(--vs-neon-cyan);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;
    z-index: 10;
}

/* Pulsing ring around play button */
.ng-video-studio .vs-play-btn::before {
    content: '';
    position: absolute;
    inset: -8px;
    border: 2px solid var(--vs-neon-cyan);
    border-radius: 50%;
    opacity: 0;
    animation: vsPlayPulse 2s ease-out infinite;
}

.ng-video-studio .vs-play-btn::after {
    content: '';
    position: absolute;
    inset: -16px;
    border: 1px solid var(--vs-neon-cyan);
    border-radius: 50%;
    opacity: 0;
    animation: vsPlayPulse 2s ease-out infinite 0.5s;
}

@keyframes vsPlayPulse {
    0% { transform: scale(0.8); opacity: 0.8; }
    100% { transform: scale(1.3); opacity: 0; }
}

.ng-video-studio .vs-play-btn:hover {
    background: rgba(0, 240, 255, 0.2);
    box-shadow: 0 0 30px rgba(0, 240, 255, 0.5);
    transform: scale(1.1);
    border-color: var(--vs-neon-pink);
}

.ng-video-studio .vs-play-btn:hover::before,
.ng-video-studio .vs-play-btn:hover::after {
    border-color: var(--vs-neon-pink);
}

.ng-video-studio .vs-play-btn i {
    font-size: 22px;
    color: var(--vs-neon-cyan);
    margin-left: 3px;
    transition: all 0.3s ease;
}

.ng-video-studio .vs-play-btn:hover i {
    color: var(--vs-neon-pink);
    text-shadow: 0 0 15px var(--vs-neon-pink);
}

/* ═══════════════════════════════════════════
   TIMELINE TRIMMER
═══════════════════════════════════════════ */
.ng-video-studio .vs-timeline-section {
    margin-bottom: 24px;
    display: none;
}

.ng-video-studio .vs-timeline-section.active {
    display: block;
    animation: vsSlideUp 0.3s ease;
}

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

.ng-video-studio .vs-section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
}

.ng-video-studio .vs-section-title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: 'Orbitron', sans-serif;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 2px;
    color: var(--vs-neon-cyan);
}

.ng-video-studio .vs-section-title i {
    font-size: 14px;
}

.ng-video-studio .vs-duration-display {
    font-family: 'Share Tech Mono', monospace;
    font-size: 12px;
    color: var(--vs-neon-yellow);
    padding: 4px 10px;
    background: rgba(240, 255, 0, 0.1);
    border: 1px solid rgba(240, 255, 0, 0.3);
    border-radius: 4px;
}

.ng-video-studio .vs-timeline-wrapper {
    background: var(--vs-bg-panel);
    border: 1px solid rgba(0, 240, 255, 0.2);
    border-radius: 12px;
    padding: 16px;
}

/* Thumbnail strip */
.ng-video-studio .vs-thumbnail-strip {
    height: 60px;
    background: var(--vs-bg-card);
    border-radius: 8px;
    overflow: hidden;
    position: relative;
    display: flex;
}

.ng-video-studio .vs-thumbnail-frame {
    flex: 1;
    height: 100%;
    background: linear-gradient(135deg, var(--vs-bg-elevated), var(--vs-bg-card));
    border-right: 1px solid rgba(255, 255, 255, 0.1);
}

.ng-video-studio .vs-thumbnail-frame:last-child {
    border-right: none;
}

/* Trim handles */
.ng-video-studio .vs-trim-overlay {
    position: absolute;
    inset: 0;
    display: flex;
}

.ng-video-studio .vs-trim-area-left,
.ng-video-studio .vs-trim-area-right {
    background: rgba(0, 0, 0, 0.7);
    transition: width 0.1s ease;
}

.ng-video-studio .vs-trim-area-left { width: 10%; }
.ng-video-studio .vs-trim-area-right { width: 15%; }

.ng-video-studio .vs-trim-handle {
    width: 16px;
    background: var(--vs-neon-cyan);
    cursor: ew-resize;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
}

.ng-video-studio .vs-trim-handle:hover {
    background: var(--vs-neon-pink);
    box-shadow: var(--vs-glow-pink);
}

.ng-video-studio .vs-trim-handle::after {
    content: '';
    width: 4px;
    height: 30px;
    background: repeating-linear-gradient(
        0deg,
        var(--vs-bg-deep) 0px,
        var(--vs-bg-deep) 4px,
        transparent 4px,
        transparent 8px
    );
    border-radius: 2px;
}

.ng-video-studio .vs-trim-active-area {
    flex: 1;
    position: relative;
}

/* Playhead */
.ng-video-studio .vs-playhead {
    position: absolute;
    top: -8px;
    bottom: -8px;
    width: 3px;
    background: var(--vs-neon-yellow);
    left: 30%;
    box-shadow: var(--vs-glow-yellow);
    z-index: 10;
}

.ng-video-studio .vs-playhead::before {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    border-top: 8px solid var(--vs-neon-yellow);
}

/* Time markers */
.ng-video-studio .vs-time-markers {
    display: flex;
    justify-content: space-between;
    margin-top: 8px;
    font-family: 'Share Tech Mono', monospace;
    font-size: 10px;
    color: var(--vs-text-muted);
}

/* ═══════════════════════════════════════════
   TOOL TABS - NEON STYLE
═══════════════════════════════════════════ */
.ng-video-studio .vs-tool-tabs {
    display: flex;
    gap: 8px;
    margin-bottom: 16px;
    overflow-x: auto;
    padding-bottom: 8px;
    scrollbar-width: none;
}

.ng-video-studio .vs-tool-tabs::-webkit-scrollbar {
    display: none;
}

.ng-video-studio .vs-tool-tab {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 12px 16px;
    min-width: 70px;
    background: var(--vs-bg-panel);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    color: var(--vs-text-secondary);
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

.ng-video-studio .vs-tool-tab::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, var(--vs-neon-cyan), var(--vs-neon-pink));
    opacity: 0;
    transition: opacity 0.3s ease;
}

.ng-video-studio .vs-tool-tab:hover {
    border-color: var(--vs-neon-cyan);
    color: var(--vs-text-primary);
}

.ng-video-studio .vs-tool-tab.active {
    border-color: var(--vs-neon-cyan);
    color: var(--vs-neon-cyan);
    box-shadow: var(--vs-glow-cyan);
}

.ng-video-studio .vs-tool-tab.active::before {
    opacity: 0.1;
}

.ng-video-studio .vs-tool-tab i {
    font-size: 20px;
    position: relative;
    z-index: 1;
}

.ng-video-studio .vs-tool-tab span {
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 1px;
    position: relative;
    z-index: 1;
}

/* Tool badge */
.ng-video-studio .vs-tool-badge {
    position: absolute;
    top: 6px;
    right: 6px;
    width: 8px;
    height: 8px;
    background: var(--vs-neon-pink);
    border-radius: 50%;
    animation: vsPulse 1s ease infinite;
}

/* ═══════════════════════════════════════════
   TOOL PANELS
═══════════════════════════════════════════ */
.ng-video-studio .vs-tool-panel {
    display: none;
    background: var(--vs-bg-panel);
    border: 1px solid rgba(0, 240, 255, 0.2);
    border-radius: 16px;
    padding: 20px;
    margin-bottom: 20px;
    animation: vsPanelFade 0.3s ease;
}

.ng-video-studio .vs-tool-panel.active {
    display: block;
}

@keyframes vsPanelFade {
    from { opacity: 0; transform: scale(0.98); }
    to { opacity: 1; transform: scale(1); }
}

/* ═══════════════════════════════════════════
   SPEED CONTROL
═══════════════════════════════════════════ */
.ng-video-studio .vs-speed-options {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 8px;
}

.ng-video-studio .vs-speed-btn {
    padding: 14px 8px;
    background: var(--vs-bg-card);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 10px;
    color: var(--vs-text-secondary);
    font-family: 'Orbitron', sans-serif;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    text-align: center;
}

.ng-video-studio .vs-speed-btn:hover {
    border-color: var(--vs-neon-cyan);
    color: var(--vs-neon-cyan);
}

.ng-video-studio .vs-speed-btn.active {
    background: linear-gradient(135deg, rgba(0, 240, 255, 0.2), rgba(255, 0, 170, 0.2));
    border-color: var(--vs-neon-cyan);
    color: var(--vs-neon-cyan);
    box-shadow: var(--vs-glow-cyan);
}

/* ═══════════════════════════════════════════
   VIDEO FILTERS - PRO CINEMA GRADE
═══════════════════════════════════════════ */

/* Filter category tabs */
.ng-video-studio .vs-filter-categories {
    display: flex;
    gap: 8px;
    margin-bottom: 16px;
    overflow-x: auto;
    overflow-y: hidden;
    padding-bottom: 8px;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    margin-left: -20px;
    margin-right: -20px;
    padding-left: 20px;
    padding-right: 20px;
}

.ng-video-studio .vs-filter-categories::-webkit-scrollbar {
    display: none;
}

.ng-video-studio .vs-filter-cat-btn {
    padding: 8px 14px;
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 20px;
    color: var(--vs-text-muted);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 1px;
    white-space: nowrap;
    flex-shrink: 0;
    cursor: pointer;
    transition: all 0.3s ease;
}

.ng-video-studio .vs-filter-cat-btn:hover {
    border-color: rgba(0, 240, 255, 0.5);
    color: var(--vs-text-secondary);
}

.ng-video-studio .vs-filter-cat-btn.active {
    background: linear-gradient(135deg, rgba(0, 240, 255, 0.2), rgba(255, 0, 170, 0.2));
    border-color: var(--vs-neon-cyan);
    color: var(--vs-neon-cyan);
}

.ng-video-studio .vs-filters-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
}

.ng-video-studio .vs-filter-item {
    aspect-ratio: 1;
    background: var(--vs-bg-card);
    border: 2px solid transparent;
    border-radius: 10px;
    overflow: hidden;
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;
}

/* Filter preview backgrounds */
.ng-video-studio .vs-filter-item .vs-filter-preview {
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, #3a6186 0%, #89253e 100%);
    transition: transform 0.3s ease;
}

.ng-video-studio .vs-filter-item:hover .vs-filter-preview {
    transform: scale(1.1);
}

/* ═══════════════════════════════════════════
   PROFESSIONAL VIDEO FILTERS (16 Total)
   Based on CapCut, TikTok & Cinematic LUTs
═══════════════════════════════════════════ */

/* 1. ORIGINAL - No filter */
.ng-video-studio .vs-filter-item[data-filter="original"] .vs-filter-preview {
    background: linear-gradient(135deg, #3a6186 0%, #89253e 100%);
    filter: none;
}

/* ═══ CINEMATIC CATEGORY ═══ */

/* 2. TEAL & ORANGE - Hollywood Blockbuster */
.ng-video-studio .vs-filter-item[data-filter="teal-orange"] .vs-filter-preview {
    background: linear-gradient(135deg, #008080 0%, #ff8c00 50%, #1a4a5e 100%);
    filter: contrast(1.15) saturate(1.3);
}

/* 3. CINEMATIC - Deep shadows, film look */
.ng-video-studio .vs-filter-item[data-filter="cinematic"] .vs-filter-preview {
    background: linear-gradient(135deg, #1a1a2e 0%, #4a3f55 50%, #0f0f1a 100%);
    filter: contrast(1.2) saturate(0.9) brightness(0.95);
}

/* 4. FILM NOIR - High contrast B&W dramatic */
.ng-video-studio .vs-filter-item[data-filter="film-noir"] .vs-filter-preview {
    background: linear-gradient(135deg, #ffffff 0%, #555555 40%, #000000 100%);
    filter: grayscale(1) contrast(1.4) brightness(1.05);
}

/* 5. BLOCKBUSTER - Vivid action movie style */
.ng-video-studio .vs-filter-item[data-filter="blockbuster"] .vs-filter-preview {
    background: linear-gradient(135deg, #ff6b35 0%, #004e92 50%, #1a1a2e 100%);
    filter: contrast(1.25) saturate(1.4) brightness(1.05);
}

/* ═══ TRENDING CATEGORY (CapCut/TikTok) ═══ */

/* 6. ENHANCE - CapCut's #1 filter */
.ng-video-studio .vs-filter-item[data-filter="enhance"] .vs-filter-preview {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 50%, #f093fb 100%);
    filter: contrast(1.1) saturate(1.25) brightness(1.08);
}

/* 7. BERLIN - Dark cinematic (CapCut trending) */
.ng-video-studio .vs-filter-item[data-filter="berlin"] .vs-filter-preview {
    background: linear-gradient(135deg, #0f2027 0%, #203a43 50%, #2c5364 100%);
    filter: contrast(1.15) saturate(0.85) brightness(0.92);
}

/* 8. FRESH LIME - Social media trendy */
.ng-video-studio .vs-filter-item[data-filter="fresh-lime"] .vs-filter-preview {
    background: linear-gradient(135deg, #a8e063 0%, #56ab2f 50%, #2d5016 100%);
    filter: saturate(1.35) brightness(1.1) contrast(1.05);
}

/* 9. VIVID VERSE - Pro color grading */
.ng-video-studio .vs-filter-item[data-filter="vivid-verse"] .vs-filter-preview {
    background: linear-gradient(135deg, #fc466b 0%, #3f5efb 100%);
    filter: saturate(1.45) contrast(1.1) brightness(1.05);
}

/* ═══ VINTAGE CATEGORY ═══ */

/* 10. VHS - Retro video tape look */
.ng-video-studio .vs-filter-item[data-filter="vhs"] .vs-filter-preview {
    background: linear-gradient(135deg, #c9d6ff 0%, #e2e2e2 30%, #ffd89b 70%, #19547b 100%);
    filter: saturate(0.8) contrast(1.1) sepia(0.15) brightness(1.05);
}

/* 11. KODAK - Classic film stock */
.ng-video-studio .vs-filter-item[data-filter="kodak"] .vs-filter-preview {
    background: linear-gradient(135deg, #ffecd2 0%, #fcb69f 50%, #8b5a2b 100%);
    filter: sepia(0.25) saturate(1.2) contrast(1.05) brightness(1.02);
}

/* 12. POLAROID - Instant camera aesthetic */
.ng-video-studio .vs-filter-item[data-filter="polaroid"] .vs-filter-preview {
    background: linear-gradient(135deg, #fdfcfb 0%, #e2d1c3 50%, #a89078 100%);
    filter: sepia(0.2) saturate(0.9) contrast(1.1) brightness(1.08);
}

/* 13. 70s - Warm vintage tones */
.ng-video-studio .vs-filter-item[data-filter="70s"] .vs-filter-preview {
    background: linear-gradient(135deg, #f5af19 0%, #f12711 50%, #5c1a1b 100%);
    filter: sepia(0.35) saturate(1.15) hue-rotate(-10deg) contrast(1.05);
}

/* ═══ MOOD CATEGORY ═══ */

/* 14. DREAMY - Soft ethereal glow */
.ng-video-studio .vs-filter-item[data-filter="dreamy"] .vs-filter-preview {
    background: linear-gradient(135deg, #fbc2eb 0%, #a6c1ee 50%, #d4a5ff 100%);
    filter: saturate(0.85) brightness(1.15) contrast(0.95);
}

/* 15. GOLDEN HOUR - Warm sunset magic */
.ng-video-studio .vs-filter-item[data-filter="golden-hour"] .vs-filter-preview {
    background: linear-gradient(135deg, #f7971e 0%, #ffd200 50%, #ff6b6b 100%);
    filter: saturate(1.2) brightness(1.1) hue-rotate(5deg) contrast(1.05);
}

/* 16. MIDNIGHT - Cool mysterious blue */
.ng-video-studio .vs-filter-item[data-filter="midnight"] .vs-filter-preview {
    background: linear-gradient(135deg, #0f0c29 0%, #302b63 50%, #24243e 100%);
    filter: saturate(0.9) brightness(0.9) hue-rotate(-15deg) contrast(1.15);
}

.ng-video-studio .vs-filter-item:hover {
    transform: scale(1.05);
    border-color: var(--vs-neon-cyan);
}

.ng-video-studio .vs-filter-item.active {
    border-color: var(--vs-neon-pink);
    box-shadow: var(--vs-glow-pink);
}

/* Category indicator dot */
.ng-video-studio .vs-filter-item::before {
    content: '';
    position: absolute;
    top: 6px;
    right: 6px;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    z-index: 3;
    opacity: 0.8;
}

/* Cinematic = Gold */
.ng-video-studio .vs-filter-item[data-cat="cinematic"]::before { background: #ffd700; }
/* Trending = Pink */
.ng-video-studio .vs-filter-item[data-cat="trending"]::before { background: #ff00aa; }
/* Vintage = Orange */
.ng-video-studio .vs-filter-item[data-cat="vintage"]::before { background: #ff8c00; }
/* Mood = Cyan */
.ng-video-studio .vs-filter-item[data-cat="mood"]::before { background: #00f0ff; }

.ng-video-studio .vs-filter-name {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 6px 4px;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.95), rgba(0, 0, 0, 0.6) 60%, transparent);
    font-size: 8px;
    font-weight: 700;
    text-align: center;
    letter-spacing: 0.5px;
    z-index: 2;
    text-transform: uppercase;
}

/* ═══════════════════════════════════════════
   MUSIC PANEL - FILE PICKER
═══════════════════════════════════════════ */
.ng-video-studio .vs-music-upload-area {
    border: 2px dashed rgba(0, 240, 255, 0.3);
    border-radius: 16px;
    padding: 32px 20px;
    text-align: center;
    cursor: pointer;
    transition: all 0.3s ease;
    background: var(--vs-bg-card);
    margin-bottom: 16px;
}

.ng-video-studio .vs-music-upload-area:hover {
    border-color: var(--vs-neon-cyan);
    background: rgba(0, 240, 255, 0.05);
}

.ng-video-studio .vs-music-upload-area.has-file {
    border-style: solid;
    border-color: var(--vs-neon-pink);
    background: rgba(255, 0, 170, 0.1);
}

.ng-video-studio .vs-music-upload-icon {
    width: 60px;
    height: 60px;
    margin: 0 auto 16px;
    background: linear-gradient(135deg, var(--vs-neon-cyan), var(--vs-neon-pink));
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.ng-video-studio .vs-music-upload-icon i {
    font-size: 24px;
    color: var(--vs-bg-deep);
}

.ng-video-studio .vs-music-upload-area h4 {
    font-family: 'Orbitron', sans-serif;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 2px;
    margin-bottom: 8px;
    color: var(--vs-text-primary);
}

.ng-video-studio .vs-music-upload-area p {
    font-size: 12px;
    color: var(--vs-text-muted);
}

.ng-video-studio .vs-music-file-input {
    display: none;
}

/* Selected music track display */
.ng-video-studio .vs-selected-music-track {
    display: none;
    align-items: center;
    gap: 12px;
    padding: 16px;
    background: var(--vs-bg-card);
    border: 1px solid var(--vs-neon-cyan);
    border-radius: 12px;
    margin-bottom: 16px;
    box-shadow: var(--vs-glow-cyan);
}

.ng-video-studio .vs-selected-music-track.active {
    display: flex;
}

.ng-video-studio .vs-selected-track-art {
    width: 50px;
    height: 50px;
    background: linear-gradient(135deg, var(--vs-neon-cyan), var(--vs-neon-pink));
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

.ng-video-studio .vs-selected-track-art i {
    font-size: 20px;
    color: var(--vs-bg-deep);
}

/* Playing animation */
.ng-video-studio .vs-selected-track-art::after {
    content: '';
    position: absolute;
    inset: -4px;
    border: 2px solid var(--vs-neon-cyan);
    border-radius: 14px;
    animation: vsMusicPulse 1.5s ease-in-out infinite;
}

@keyframes vsMusicPulse {
    0%, 100% { opacity: 0.3; transform: scale(1); }
    50% { opacity: 0.8; transform: scale(1.05); }
}

.ng-video-studio .vs-selected-track-info {
    flex: 1;
}

.ng-video-studio .vs-selected-track-name {
    font-weight: 600;
    font-size: 14px;
    margin-bottom: 4px;
    color: var(--vs-text-primary);
}

.ng-video-studio .vs-selected-track-details {
    font-family: 'Share Tech Mono', monospace;
    font-size: 11px;
    color: var(--vs-neon-cyan);
}

.ng-video-studio .vs-remove-music-btn {
    width: 36px;
    height: 36px;
    background: rgba(255, 60, 60, 0.2);
    border: 1px solid rgba(255, 60, 60, 0.4);
    border-radius: 8px;
    color: #ff4444;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.ng-video-studio .vs-remove-music-btn:hover {
    background: rgba(255, 60, 60, 0.3);
    border-color: #ff4444;
}

/* Volume slider */
.ng-video-studio .vs-music-volume-section {
    display: none;
}

.ng-video-studio .vs-music-volume-section.active {
    display: block;
}

.ng-video-studio .vs-volume-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
}

.ng-video-studio .vs-volume-label {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    color: var(--vs-text-secondary);
}

.ng-video-studio .vs-volume-label i {
    color: var(--vs-neon-cyan);
}

.ng-video-studio .vs-volume-value {
    font-family: 'Share Tech Mono', monospace;
    font-size: 12px;
    color: var(--vs-neon-yellow);
}

.ng-video-studio .vs-volume-slider-track {
    height: 8px;
    background: var(--vs-bg-elevated);
    border-radius: 4px;
    position: relative;
    cursor: pointer;
}

.ng-video-studio .vs-volume-slider-fill {
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    width: 80%;
    background: linear-gradient(90deg, var(--vs-neon-cyan), var(--vs-neon-pink));
    border-radius: 4px;
}

.ng-video-studio .vs-volume-slider-thumb {
    position: absolute;
    top: 50%;
    left: 80%;
    transform: translate(-50%, -50%);
    width: 18px;
    height: 18px;
    background: white;
    border-radius: 50%;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
    cursor: grab;
}

/* ═══════════════════════════════════════════
   CAPTIONS PANEL
═══════════════════════════════════════════ */
.ng-video-studio .vs-captions-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px;
    background: var(--vs-bg-card);
    border-radius: 12px;
    margin-bottom: 16px;
}

.ng-video-studio .vs-captions-toggle-info h4 {
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 4px;
}

.ng-video-studio .vs-captions-toggle-info p {
    font-size: 12px;
    color: var(--vs-text-muted);
}

/* Toggle switch */
.ng-video-studio .vs-toggle-switch {
    width: 52px;
    height: 28px;
    background: var(--vs-bg-elevated);
    border-radius: 14px;
    position: relative;
    cursor: pointer;
    transition: all 0.3s ease;
}

.ng-video-studio .vs-toggle-switch.active {
    background: linear-gradient(90deg, var(--vs-neon-cyan), var(--vs-neon-pink));
}

.ng-video-studio .vs-toggle-switch::after {
    content: '';
    position: absolute;
    width: 22px;
    height: 22px;
    background: white;
    border-radius: 50%;
    top: 3px;
    left: 3px;
    transition: all 0.3s ease;
}

.ng-video-studio .vs-toggle-switch.active::after {
    left: 27px;
}

.ng-video-studio .vs-caption-styles {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
}

.ng-video-studio .vs-caption-style {
    padding: 16px;
    background: var(--vs-bg-card);
    border: 2px solid transparent;
    border-radius: 12px;
    text-align: center;
    cursor: pointer;
    transition: all 0.3s ease;
}

.ng-video-studio .vs-caption-style:hover {
    border-color: rgba(0, 240, 255, 0.3);
}

.ng-video-studio .vs-caption-style.active {
    border-color: var(--vs-neon-cyan);
    box-shadow: var(--vs-glow-cyan);
}

.ng-video-studio .vs-caption-preview {
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 8px;
    padding: 8px;
    border-radius: 6px;
}

.ng-video-studio .vs-caption-style[data-style="minimal"] .vs-caption-preview {
    color: white;
}

.ng-video-studio .vs-caption-style[data-style="boxed"] .vs-caption-preview {
    background: rgba(0, 0, 0, 0.8);
    color: white;
}

.ng-video-studio .vs-caption-style[data-style="neon"] .vs-caption-preview {
    color: var(--vs-neon-cyan);
    text-shadow: 0 0 10px var(--vs-neon-cyan);
}

.ng-video-studio .vs-caption-style[data-style="gradient"] .vs-caption-preview {
    background: linear-gradient(90deg, var(--vs-neon-cyan), var(--vs-neon-pink));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.ng-video-studio .vs-caption-style-name {
    font-size: 11px;
    color: var(--vs-text-muted);
    letter-spacing: 1px;
}

/* ═══════════════════════════════════════════
   COVER FRAME SELECTOR
═══════════════════════════════════════════ */
.ng-video-studio .vs-cover-frames {
    display: flex;
    gap: 10px;
    overflow-x: auto;
    padding-bottom: 8px;
}

.ng-video-studio .vs-cover-frame-option {
    width: 70px;
    height: 100px;
    background: var(--vs-bg-card);
    border: 2px solid transparent;
    border-radius: 8px;
    flex-shrink: 0;
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

.ng-video-studio .vs-cover-frame-option::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, var(--vs-bg-elevated), var(--vs-bg-card));
}

.ng-video-studio .vs-cover-frame-option:hover {
    border-color: rgba(0, 240, 255, 0.5);
}

.ng-video-studio .vs-cover-frame-option.active {
    border-color: var(--vs-neon-yellow);
    box-shadow: var(--vs-glow-yellow);
}

.ng-video-studio .vs-cover-frame-option.active::after {
    content: '\f00c';
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: var(--vs-neon-yellow);
    font-size: 18px;
    z-index: 1;
}

/* ═══════════════════════════════════════════
   ASPECT RATIO SELECTOR
═══════════════════════════════════════════ */
.ng-video-studio .vs-aspect-options {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
    padding: 0 4px;
}

.ng-video-studio .vs-aspect-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 14px 8px;
    background: var(--vs-bg-card);
    border: 2px solid transparent;
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.ng-video-studio .vs-aspect-btn:hover {
    border-color: rgba(0, 240, 255, 0.3);
}

.ng-video-studio .vs-aspect-btn.active {
    border-color: var(--vs-neon-cyan);
    box-shadow: var(--vs-glow-cyan);
}

.ng-video-studio .vs-aspect-icon {
    width: 32px;
    height: 42px;
    border: 2px solid var(--vs-text-secondary);
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
}

.ng-video-studio .vs-aspect-btn.active .vs-aspect-icon {
    border-color: var(--vs-neon-cyan);
}

.ng-video-studio .vs-aspect-btn[data-ratio="1:1"] .vs-aspect-icon {
    width: 32px;
    height: 32px;
}

.ng-video-studio .vs-aspect-btn[data-ratio="4:5"] .vs-aspect-icon {
    width: 32px;
    height: 40px;
}

.ng-video-studio .vs-aspect-btn[data-ratio="16:9"] .vs-aspect-icon {
    width: 42px;
    height: 24px;
}

.ng-video-studio .vs-aspect-label {
    font-size: 11px;
    font-weight: 600;
    color: var(--vs-text-secondary);
    letter-spacing: 0.5px;
}

.ng-video-studio .vs-aspect-btn.active .vs-aspect-label {
    color: var(--vs-neon-cyan);
}

/* ═══════════════════════════════════════════
   EFFECTS PANEL
═══════════════════════════════════════════ */
.ng-video-studio .vs-effects-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
}

.ng-video-studio .vs-effect-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 16px 12px;
    background: var(--vs-bg-card);
    border: 1px solid transparent;
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.ng-video-studio .vs-effect-item:hover {
    border-color: rgba(0, 240, 255, 0.3);
    transform: translateY(-2px);
}

.ng-video-studio .vs-effect-item.active {
    border-color: var(--vs-neon-pink);
    box-shadow: var(--vs-glow-pink);
}

.ng-video-studio .vs-effect-icon {
    width: 44px;
    height: 44px;
    background: linear-gradient(135deg, var(--vs-bg-elevated), var(--vs-bg-panel));
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    transition: all 0.3s ease;
}

.ng-video-studio .vs-effect-item:hover .vs-effect-icon {
    background: linear-gradient(135deg, rgba(0, 240, 255, 0.2), rgba(255, 0, 170, 0.2));
}

.ng-video-studio .vs-effect-item[data-effect="glitch"] .vs-effect-icon { color: var(--vs-neon-cyan); }
.ng-video-studio .vs-effect-item[data-effect="vhs"] .vs-effect-icon { color: var(--vs-neon-pink); }
.ng-video-studio .vs-effect-item[data-effect="neon"] .vs-effect-icon { color: var(--vs-neon-yellow); }
.ng-video-studio .vs-effect-item[data-effect="rgb"] .vs-effect-icon { color: var(--vs-neon-purple); }
.ng-video-studio .vs-effect-item[data-effect="retro"] .vs-effect-icon { color: var(--vs-neon-orange); }
.ng-video-studio .vs-effect-item[data-effect="cinema"] .vs-effect-icon { color: var(--vs-neon-cyan); }

.ng-video-studio .vs-effect-name {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 1px;
    color: var(--vs-text-secondary);
}

.ng-video-studio .vs-effect-item.active .vs-effect-name {
    color: var(--vs-neon-pink);
}

/* ═══════════════════════════════════════════
   DESCRIPTION INPUT
═══════════════════════════════════════════ */
.ng-video-studio .vs-description-section {
    margin-bottom: 24px;
}

.ng-video-studio .vs-description-wrapper {
    background: var(--vs-bg-panel);
    border: 1px solid rgba(0, 240, 255, 0.2);
    border-radius: 16px;
    padding: 16px;
    transition: all 0.3s ease;
}

.ng-video-studio .vs-description-wrapper:focus-within {
    border-color: var(--vs-neon-cyan);
    box-shadow: var(--vs-glow-cyan);
}

.ng-video-studio .vs-description-input {
    width: 100%;
    min-height: 80px;
    background: transparent;
    border: none;
    color: var(--vs-text-primary);
    font-family: 'Rajdhani', sans-serif;
    font-size: 15px;
    line-height: 1.5;
    resize: none;
    outline: none;
}

.ng-video-studio .vs-description-input::placeholder {
    color: var(--vs-text-muted);
}

.ng-video-studio .vs-description-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.ng-video-studio .vs-char-counter {
    font-family: 'Share Tech Mono', monospace;
    font-size: 11px;
    color: var(--vs-text-muted);
}

.ng-video-studio .vs-char-counter .current {
    color: var(--vs-neon-cyan);
}

.ng-video-studio .vs-add-hashtag-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    background: rgba(0, 240, 255, 0.1);
    border: 1px solid rgba(0, 240, 255, 0.3);
    border-radius: 6px;
    color: var(--vs-neon-cyan);
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
}

.ng-video-studio .vs-add-hashtag-btn:hover {
    background: rgba(0, 240, 255, 0.2);
}

/* ═══════════════════════════════════════════
   PUBLISH BUTTON - NEON GLOW
═══════════════════════════════════════════ */
.ng-video-studio .vs-publish-section {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 16px;
    background: linear-gradient(to top, var(--vs-bg-deep) 60%, transparent);
    z-index: 100;
}

.ng-video-studio .vs-publish-btn {
    width: 100%;
    max-width: 420px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 18px 32px;
    background: linear-gradient(90deg, var(--vs-neon-cyan), var(--vs-neon-pink));
    border: none;
    border-radius: 16px;
    color: var(--vs-bg-deep);
    font-family: 'Orbitron', sans-serif;
    font-size: 16px;
    font-weight: 700;
    letter-spacing: 3px;
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

.ng-video-studio .vs-publish-btn::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, var(--vs-neon-pink), var(--vs-neon-cyan));
    opacity: 0;
    transition: opacity 0.3s ease;
}

.ng-video-studio .vs-publish-btn:hover::before {
    opacity: 1;
}

.ng-video-studio .vs-publish-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 40px rgba(0, 240, 255, 0.4), 0 10px 40px rgba(255, 0, 170, 0.4);
}

.ng-video-studio .vs-publish-btn span,
.ng-video-studio .vs-publish-btn i {
    position: relative;
    z-index: 1;
}

/* Animated border */
.ng-video-studio .vs-publish-btn::after {
    content: '';
    position: absolute;
    inset: -3px;
    background: linear-gradient(90deg, var(--vs-neon-cyan), var(--vs-neon-pink), var(--vs-neon-yellow), var(--vs-neon-cyan));
    background-size: 300% 100%;
    border-radius: 18px;
    z-index: -1;
    animation: vsBorderGlow 3s linear infinite;
}

@keyframes vsBorderGlow {
    0% { background-position: 0% 50%; }
    100% { background-position: 300% 50%; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   VIDEO EFFECTS - Applied to video element via class
   ═══════════════════════════════════════════════════════════════════════════ */

/* Glitch Effect */
.ng-video-studio #vs-video.vs-effect-glitch {
    animation: vsGlitchEffect 0.3s infinite;
}

@keyframes vsGlitchEffect {
    0% {
        transform: translate(0);
        filter: hue-rotate(0deg);
    }
    20% {
        transform: translate(-3px, 2px);
        filter: hue-rotate(90deg);
    }
    40% {
        transform: translate(3px, -2px);
        filter: hue-rotate(180deg);
    }
    60% {
        transform: translate(-2px, -1px);
        filter: hue-rotate(270deg);
    }
    80% {
        transform: translate(2px, 1px);
        filter: hue-rotate(360deg);
    }
    100% {
        transform: translate(0);
        filter: hue-rotate(0deg);
    }
}

/* VHS Effect */
.ng-video-studio #vs-video.vs-effect-vhs {
    animation: vsVHSEffect 0.1s infinite;
    filter: saturate(0.8) contrast(1.15) brightness(1.1);
}

.ng-video-studio #vs-video.vs-effect-vhs::before {
    content: '';
    position: absolute;
    inset: 0;
    background: repeating-linear-gradient(
        0deg,
        transparent,
        transparent 2px,
        rgba(0, 0, 0, 0.1) 2px,
        rgba(0, 0, 0, 0.1) 4px
    );
    pointer-events: none;
    animation: vsVHSScanlines 0.5s linear infinite;
}

@keyframes vsVHSEffect {
    0%, 100% { transform: translateX(0); }
    25% { transform: translateX(-1px); }
    50% { transform: translateX(1px); }
    75% { transform: translateX(-0.5px); }
}

@keyframes vsVHSScanlines {
    0% { transform: translateY(0); }
    100% { transform: translateY(4px); }
}

/* Neon Effect */
.ng-video-studio #vs-video.vs-effect-neon {
    filter: saturate(1.8) contrast(1.3) brightness(1.15);
    animation: vsNeonPulse 1.5s ease-in-out infinite;
}

@keyframes vsNeonPulse {
    0%, 100% {
        filter: saturate(1.8) contrast(1.3) brightness(1.15);
        box-shadow: 0 0 20px rgba(0, 240, 255, 0.5), 0 0 40px rgba(255, 0, 170, 0.3);
    }
    50% {
        filter: saturate(2.2) contrast(1.4) brightness(1.25);
        box-shadow: 0 0 40px rgba(0, 240, 255, 0.8), 0 0 80px rgba(255, 0, 170, 0.5);
    }
}

/* RGB Split Effect */
.ng-video-studio #vs-video.vs-effect-rgb {
    animation: vsRGBSplit 0.05s infinite;
}

@keyframes vsRGBSplit {
    0% {
        text-shadow:
            -2px 0 0 rgba(255, 0, 0, 0.5),
            2px 0 0 rgba(0, 255, 255, 0.5);
        filter: drop-shadow(-3px 0 0 rgba(255, 0, 0, 0.3)) drop-shadow(3px 0 0 rgba(0, 255, 255, 0.3));
    }
    50% {
        text-shadow:
            2px 0 0 rgba(255, 0, 0, 0.5),
            -2px 0 0 rgba(0, 255, 255, 0.5);
        filter: drop-shadow(3px 0 0 rgba(255, 0, 0, 0.3)) drop-shadow(-3px 0 0 rgba(0, 255, 255, 0.3));
    }
    100% {
        text-shadow:
            -2px 0 0 rgba(255, 0, 0, 0.5),
            2px 0 0 rgba(0, 255, 255, 0.5);
        filter: drop-shadow(-3px 0 0 rgba(255, 0, 0, 0.3)) drop-shadow(3px 0 0 rgba(0, 255, 255, 0.3));
    }
}

/* Retro Effect - 8-bit pixelated look */
.ng-video-studio #vs-video.vs-effect-retro {
    filter: saturate(1.5) contrast(1.2) sepia(0.3);
    image-rendering: pixelated;
    animation: vsRetroFlicker 0.15s infinite;
}

@keyframes vsRetroFlicker {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.97; }
}

/* Cinema Effect - Letterbox + Film Grain */
.ng-video-studio #vs-video.vs-effect-cinema {
    filter: contrast(1.15) saturate(0.9) brightness(0.95);
}

.ng-video-studio .vs-preview:has(#vs-video.vs-effect-cinema)::before,
.ng-video-studio .vs-preview:has(#vs-video.vs-effect-cinema)::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    height: 12%;
    background: #000;
    z-index: 10;
    pointer-events: none;
}

.ng-video-studio .vs-preview:has(#vs-video.vs-effect-cinema)::before {
    top: 0;
}

.ng-video-studio .vs-preview:has(#vs-video.vs-effect-cinema)::after {
    bottom: 0;
}

/* Volume Slider Interactivity */
.ng-video-studio .vs-volume-slider-track {
    cursor: pointer;
}

.ng-video-studio .vs-volume-slider-thumb {
    cursor: grab;
    transition: transform 0.1s ease;
}

.ng-video-studio .vs-volume-slider-thumb:active {
    cursor: grabbing;
    transform: translateY(-50%) scale(1.2);
}

/* Trim Handles Interactivity */
.ng-video-studio .vs-trim-handle {
    cursor: ew-resize;
    transition: transform 0.1s ease, background 0.2s ease;
}

.ng-video-studio .vs-trim-handle:hover {
    transform: scaleY(1.1);
    background: linear-gradient(180deg, var(--vs-neon-cyan), var(--vs-neon-pink));
}

.ng-video-studio .vs-trim-handle:active {
    transform: scaleY(1.15);
}

/* Timeline Thumbnails with video frames */
.ng-video-studio .vs-thumbnail-frame {
    background-color: rgba(0, 240, 255, 0.1);
    background-repeat: no-repeat;
    transition: transform 0.2s ease;
}

/* Cover Frame Thumbnails with video frames */
.ng-video-studio .vs-cover-frame-option {
    background-color: rgba(0, 240, 255, 0.1);
    background-repeat: no-repeat;
    cursor: pointer;
}


/* ═══════════════════════════════════════════════════════════════════════════
   VOICE STUDIO - Solar Flare Cyberpunk Theme
   "Soundwave Forge" - Where Voice Becomes Art
   ═══════════════════════════════════════════════════════════════════════════ */

.ng-voice-studio {
    --vs-solar-orange: #FF6B00;
    --vs-solar-gold: #FFB800;
    --vs-solar-amber: #FFA500;
    --vs-solar-flame: #FF4500;
    --vs-solar-ember: #FF8C00;
    --vs-bg-void: #0a0806;
    --vs-bg-volcanic: #0f0c08;
    --vs-bg-obsidian: #1a1510;
    --vs-text-primary: #fff8f0;
    --vs-text-secondary: rgba(255, 248, 240, 0.7);
    --vs-border-glow: rgba(255, 107, 0, 0.3);

    position: fixed;
    inset: 0;
    z-index: 10001;
    background: var(--vs-bg-void);
    font-family: 'Rajdhani', 'Share Tech Mono', monospace;
    display: none;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

/* Solar Grid Background */
.ng-voice-studio .vs-solar-grid {
    position: fixed;
    inset: 0;
    background:
        linear-gradient(transparent 0%, transparent 49%, rgba(255, 107, 0, 0.03) 50%, transparent 51%),
        linear-gradient(90deg, transparent 0%, transparent 49%, rgba(255, 107, 0, 0.03) 50%, transparent 51%);
    background-size: 40px 40px;
    animation: vsSolarGridMove 20s linear infinite;
    pointer-events: none;
}

@keyframes vsSolarGridMove {
    0% { transform: perspective(500px) rotateX(60deg) translateY(0); }
    100% { transform: perspective(500px) rotateX(60deg) translateY(40px); }
}

/* Horizon Glow */
.ng-voice-studio .vs-horizon-glow {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: 300px;
    background: radial-gradient(ellipse at center bottom,
        rgba(255, 107, 0, 0.15) 0%,
        rgba(255, 184, 0, 0.08) 30%,
        transparent 70%
    );
    pointer-events: none;
}

/* Floating Embers */
.ng-voice-studio .vs-embers {
    position: fixed;
    inset: 0;
    pointer-events: none;
    overflow: hidden;
}

.ng-voice-studio .vs-ember {
    position: absolute;
    width: 4px;
    height: 4px;
    background: var(--vs-solar-gold);
    border-radius: 50%;
    opacity: 0;
    animation: vsEmberFloat 8s ease-in-out infinite;
}

.ng-voice-studio .vs-ember:nth-child(1) { left: 10%; animation-delay: 0s; }
.ng-voice-studio .vs-ember:nth-child(2) { left: 25%; animation-delay: 1.5s; }
.ng-voice-studio .vs-ember:nth-child(3) { left: 40%; animation-delay: 3s; }
.ng-voice-studio .vs-ember:nth-child(4) { left: 55%; animation-delay: 4.5s; }
.ng-voice-studio .vs-ember:nth-child(5) { left: 70%; animation-delay: 6s; }
.ng-voice-studio .vs-ember:nth-child(6) { left: 85%; animation-delay: 7.5s; }
.ng-voice-studio .vs-ember:nth-child(7) { left: 95%; animation-delay: 2s; }

@keyframes vsEmberFloat {
    0% { bottom: -10px; opacity: 0; transform: translateX(0); }
    10% { opacity: 0.8; }
    90% { opacity: 0.3; }
    100% { bottom: 100vh; opacity: 0; transform: translateX(30px); }
}

/* Content Container */
.ng-voice-studio .vs-content {
    position: relative;
    z-index: 1;
    max-width: 480px;
    margin: 0 auto;
    padding: 20px;
    padding-bottom: 100px;
}

/* Header */
.ng-voice-studio .vs-header {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 16px 0;
    border-bottom: 1px solid var(--vs-border-glow);
    margin-bottom: 24px;
}

.ng-voice-studio .vs-back-btn {
    width: 44px;
    height: 44px;
    background: rgba(255, 107, 0, 0.1);
    border: 1px solid var(--vs-border-glow);
    border-radius: 12px;
    color: var(--vs-solar-gold);
    font-size: 18px;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.ng-voice-studio .vs-back-btn:hover {
    background: rgba(255, 107, 0, 0.2);
    transform: translateX(-2px);
}

.ng-voice-studio .vs-header-title {
    flex: 1;
}

.ng-voice-studio .vs-header-title h1 {
    font-family: 'Orbitron', monospace;
    font-size: 18px;
    font-weight: 700;
    color: var(--vs-solar-gold);
    margin: 0;
    letter-spacing: 2px;
    text-shadow: 0 0 20px rgba(255, 184, 0, 0.5);
}

.ng-voice-studio .vs-header-title p {
    font-size: 10px;
    color: var(--vs-text-secondary);
    margin: 4px 0 0;
    letter-spacing: 1px;
}

.ng-voice-studio .vs-status {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    background: rgba(255, 107, 0, 0.1);
    border: 1px solid var(--vs-border-glow);
    border-radius: 20px;
    font-size: 10px;
    color: var(--vs-solar-gold);
}

.ng-voice-studio .vs-status-dot {
    width: 6px;
    height: 6px;
    background: var(--vs-solar-gold);
    border-radius: 50%;
    animation: vsStatusPulse 2s ease-in-out infinite;
}

@keyframes vsStatusPulse {
    0%, 100% { opacity: 0.5; box-shadow: none; }
    50% { opacity: 1; box-shadow: 0 0 10px var(--vs-solar-gold); }
}

.ng-voice-studio .vs-status.processing .vs-status-dot {
    background: var(--vs-solar-flame);
    animation: vsProcessingPulse 0.5s ease-in-out infinite;
}

@keyframes vsProcessingPulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.3); }
}

.ng-voice-studio .vs-status.has-effect {
    border-color: var(--vs-solar-orange);
    background: rgba(255, 107, 0, 0.15);
}

/* Waveform Container */
.ng-voice-studio .vs-waveform-container {
    background: linear-gradient(135deg, var(--vs-bg-volcanic) 0%, var(--vs-bg-obsidian) 100%);
    border: 1px solid var(--vs-border-glow);
    border-radius: 16px;
    padding: 20px;
    margin-bottom: 24px;
    position: relative;
}

.ng-voice-studio .vs-waveform-container::before {
    content: '';
    position: absolute;
    top: -1px;
    left: 20%;
    right: 20%;
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--vs-solar-gold), transparent);
}

/* Recording Indicator */
.ng-voice-studio .vs-recording-indicator {
    position: absolute;
    top: 12px;
    left: 12px;
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    background: rgba(255, 69, 0, 0.2);
    border: 1px solid rgba(255, 69, 0, 0.5);
    border-radius: 4px;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.ng-voice-studio .vs-recording-indicator.active {
    opacity: 1;
}

.ng-voice-studio .vs-rec-dot {
    width: 8px;
    height: 8px;
    background: var(--vs-solar-flame);
    border-radius: 50%;
    animation: vsRecBlink 1s ease-in-out infinite;
}

@keyframes vsRecBlink {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.3; }
}

.ng-voice-studio .vs-rec-text {
    font-family: 'Share Tech Mono', monospace;
    font-size: 10px;
    color: var(--vs-solar-flame);
    letter-spacing: 2px;
}

/* Waveform Display */
.ng-voice-studio .vs-waveform-display {
    height: 120px;
    background: linear-gradient(180deg,
        rgba(255, 107, 0, 0.05) 0%,
        rgba(10, 8, 6, 0.8) 50%,
        rgba(255, 107, 0, 0.05) 100%
    );
    border-radius: 12px;
    position: relative;
    overflow: hidden;
    margin-bottom: 16px;
}

.ng-voice-studio .vs-waveform-display.seekable {
    cursor: pointer;
}

.ng-voice-studio .vs-waveform-display.seekable:hover {
    background: linear-gradient(180deg,
        rgba(255, 107, 0, 0.08) 0%,
        rgba(10, 8, 6, 0.85) 50%,
        rgba(255, 107, 0, 0.08) 100%
    );
}

.ng-voice-studio #vsWaveformCanvas {
    width: 100%;
    height: 100%;
    display: block;
}

.ng-voice-studio .vs-waveform-center-line {
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg,
        transparent 0%,
        rgba(255, 184, 0, 0.5) 20%,
        rgba(255, 184, 0, 0.5) 80%,
        transparent 100%
    );
    transform: translateY(-50%);
}

/* Playback Progress */
.ng-voice-studio .vs-playback-progress {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: rgba(255, 107, 0, 0.2);
    border-radius: 2px;
    overflow: hidden;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.ng-voice-studio .vs-playback-progress.active {
    opacity: 1;
}

.ng-voice-studio .vs-playback-progress-fill {
    height: 100%;
    width: 0%;
    background: linear-gradient(90deg, var(--vs-solar-orange), var(--vs-solar-gold));
    border-radius: 2px;
    transition: width 0.1s linear;
    position: relative;
}

.ng-voice-studio .vs-playback-progress-fill::after {
    content: '';
    position: absolute;
    right: 0;
    top: 50%;
    width: 10px;
    height: 10px;
    background: var(--vs-solar-gold);
    border-radius: 50%;
    transform: translate(50%, -50%);
    box-shadow: 0 0 10px var(--vs-solar-gold);
}

/* Timer Display */
.ng-voice-studio .vs-timer-display {
    display: flex;
    justify-content: center;
}

.ng-voice-studio .vs-timer-value {
    font-family: 'Orbitron', monospace;
    font-size: 28px;
    font-weight: 700;
    color: var(--vs-solar-gold);
    text-shadow: 0 0 20px rgba(255, 184, 0, 0.5);
    letter-spacing: 4px;
}

/* Record Section */
.ng-voice-studio .vs-record-section {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    margin-bottom: 24px;
}

.ng-voice-studio .vs-record-btn-container {
    position: relative;
    width: 100px;
    height: 100px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.ng-voice-studio .vs-orbital-ring {
    position: absolute;
    border-radius: 50%;
    border: 1px solid transparent;
}

.ng-voice-studio .vs-ring-1 {
    width: 100%;
    height: 100%;
    border-color: rgba(255, 107, 0, 0.3);
    animation: vsOrbitSpin 8s linear infinite;
}

.ng-voice-studio .vs-ring-2 {
    width: 85%;
    height: 85%;
    border-color: rgba(255, 184, 0, 0.2);
    animation: vsOrbitSpin 6s linear infinite reverse;
}

.ng-voice-studio .vs-ring-3 {
    width: 70%;
    height: 70%;
    border-color: rgba(255, 140, 0, 0.15);
    animation: vsOrbitSpin 4s linear infinite;
}

@keyframes vsOrbitSpin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.ng-voice-studio .vs-record-btn {
    width: 70px;
    height: 70px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--vs-solar-orange), var(--vs-solar-flame));
    border: 3px solid var(--vs-solar-gold);
    color: white;
    font-size: 28px;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 0 30px rgba(255, 107, 0, 0.5);
    position: relative;
    z-index: 1;
}

.ng-voice-studio .vs-record-btn:hover {
    transform: scale(1.05);
    box-shadow: 0 0 50px rgba(255, 107, 0, 0.7);
}

.ng-voice-studio .vs-record-btn.recording {
    background: linear-gradient(135deg, var(--vs-solar-flame), #cc0000);
    animation: vsRecordPulse 1s ease-in-out infinite;
}

@keyframes vsRecordPulse {
    0%, 100% { box-shadow: 0 0 30px rgba(255, 69, 0, 0.5); }
    50% { box-shadow: 0 0 60px rgba(255, 69, 0, 0.8); }
}

.ng-voice-studio .vs-record-label {
    font-family: 'Share Tech Mono', monospace;
    font-size: 12px;
    color: var(--vs-text-secondary);
    letter-spacing: 2px;
}

/* Playback Controls */
.ng-voice-studio .vs-playback-controls {
    display: flex;
    justify-content: center;
    gap: 16px;
    margin-bottom: 32px;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
}

.ng-voice-studio .vs-playback-controls.active {
    opacity: 1;
    pointer-events: auto;
}

.ng-voice-studio .vs-playback-btn {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: rgba(255, 107, 0, 0.1);
    border: 1px solid var(--vs-border-glow);
    color: var(--vs-solar-gold);
    font-size: 18px;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.ng-voice-studio .vs-playback-btn:hover {
    background: rgba(255, 107, 0, 0.2);
    transform: scale(1.1);
}

.ng-voice-studio .vs-play-btn {
    width: 60px;
    height: 60px;
    background: linear-gradient(135deg, var(--vs-solar-orange), var(--vs-solar-gold));
    border: 2px solid var(--vs-solar-gold);
    color: white;
    font-size: 22px;
}

.ng-voice-studio .vs-play-btn:hover {
    box-shadow: 0 0 30px rgba(255, 184, 0, 0.5);
}

/* Effects Section */
.ng-voice-studio .vs-effects-section {
    margin-bottom: 24px;
}

.ng-voice-studio .vs-section-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 16px;
}

.ng-voice-studio .vs-section-icon {
    width: 36px;
    height: 36px;
    background: linear-gradient(135deg, var(--vs-solar-orange), var(--vs-solar-gold));
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 16px;
}

.ng-voice-studio .vs-section-title {
    font-family: 'Orbitron', monospace;
    font-size: 14px;
    font-weight: 600;
    color: var(--vs-solar-gold);
    letter-spacing: 2px;
}

/* Effect Tabs */
.ng-voice-studio .vs-effect-tabs {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    padding-bottom: 12px;
    margin-bottom: 16px;
    scrollbar-width: none;
}

.ng-voice-studio .vs-effect-tabs::-webkit-scrollbar {
    display: none;
}

.ng-voice-studio .vs-effect-tab {
    flex-shrink: 0;
    padding: 10px 16px;
    background: rgba(255, 107, 0, 0.08);
    border: 1px solid var(--vs-border-glow);
    border-radius: 25px;
    color: var(--vs-text-secondary);
    font-family: 'Rajdhani', sans-serif;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 1px;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
}

.ng-voice-studio .vs-effect-tab i {
    font-size: 12px;
}

.ng-voice-studio .vs-effect-tab:hover {
    background: rgba(255, 107, 0, 0.15);
    color: var(--vs-solar-gold);
}

.ng-voice-studio .vs-effect-tab.active {
    background: linear-gradient(135deg, var(--vs-solar-orange), var(--vs-solar-gold));
    border-color: var(--vs-solar-gold);
    color: white;
    box-shadow: 0 0 20px rgba(255, 107, 0, 0.4);
}

/* Effects Panel */
.ng-voice-studio .vs-effects-panel {
    display: none;
}

.ng-voice-studio .vs-effects-panel.active {
    display: block;
}

/* Effects Grid */
.ng-voice-studio .vs-effects-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
}

.ng-voice-studio .vs-effect-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 14px 8px;
    background: rgba(255, 107, 0, 0.05);
    border: 1px solid var(--vs-border-glow);
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.ng-voice-studio .vs-effect-item:hover {
    background: rgba(255, 107, 0, 0.12);
    transform: translateY(-2px);
}

.ng-voice-studio .vs-effect-item.active {
    background: linear-gradient(135deg, rgba(255, 107, 0, 0.2), rgba(255, 184, 0, 0.15));
    border-color: var(--vs-solar-gold);
    box-shadow: 0 0 20px rgba(255, 107, 0, 0.3);
}

.ng-voice-studio .vs-effect-icon {
    width: 40px;
    height: 40px;
    background: rgba(255, 107, 0, 0.1);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    color: var(--vs-solar-gold);
    transition: all 0.3s ease;
}

.ng-voice-studio .vs-effect-item.active .vs-effect-icon {
    background: linear-gradient(135deg, var(--vs-solar-orange), var(--vs-solar-gold));
    color: white;
    box-shadow: 0 0 15px rgba(255, 107, 0, 0.5);
}

.ng-voice-studio .vs-effect-name {
    font-size: 10px;
    color: var(--vs-text-secondary);
    text-align: center;
    letter-spacing: 0.5px;
}

.ng-voice-studio .vs-effect-item.active .vs-effect-name {
    color: var(--vs-solar-gold);
}

/* Audio Controls */
.ng-voice-studio .vs-audio-controls {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin-bottom: 24px;
}

.ng-voice-studio .vs-control-card {
    background: rgba(255, 107, 0, 0.05);
    border: 1px solid var(--vs-border-glow);
    border-radius: 12px;
    padding: 16px;
}

.ng-voice-studio .vs-control-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
}

.ng-voice-studio .vs-control-label {
    font-family: 'Share Tech Mono', monospace;
    font-size: 11px;
    color: var(--vs-text-secondary);
    letter-spacing: 1px;
}

.ng-voice-studio .vs-control-value {
    font-family: 'Orbitron', monospace;
    font-size: 14px;
    font-weight: 600;
    color: var(--vs-solar-gold);
}

/* Slider */
.ng-voice-studio .vs-slider-track {
    height: 6px;
    background: rgba(255, 107, 0, 0.15);
    border-radius: 3px;
    position: relative;
    cursor: pointer;
    margin-bottom: 12px;
}

.ng-voice-studio .vs-slider-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--vs-solar-orange), var(--vs-solar-gold));
    border-radius: 3px;
}

.ng-voice-studio .vs-slider-thumb {
    position: absolute;
    top: 50%;
    width: 16px;
    height: 16px;
    background: var(--vs-solar-gold);
    border: 2px solid white;
    border-radius: 50%;
    transform: translate(-50%, -50%);
    box-shadow: 0 0 10px rgba(255, 184, 0, 0.5);
    cursor: grab;
}

.ng-voice-studio .vs-slider-thumb:active {
    cursor: grabbing;
    transform: translate(-50%, -50%) scale(1.2);
}

/* Preset Buttons */
.ng-voice-studio .vs-preset-btns {
    display: flex;
    gap: 6px;
}

.ng-voice-studio .vs-preset-btn {
    flex: 1;
    padding: 6px;
    background: rgba(255, 107, 0, 0.1);
    border: 1px solid var(--vs-border-glow);
    border-radius: 6px;
    color: var(--vs-text-secondary);
    font-family: 'Share Tech Mono', monospace;
    font-size: 10px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.ng-voice-studio .vs-preset-btn:hover {
    background: rgba(255, 107, 0, 0.2);
    color: var(--vs-solar-gold);
}

.ng-voice-studio .vs-preset-btn.active {
    background: var(--vs-solar-orange);
    border-color: var(--vs-solar-gold);
    color: white;
}

/* Publish Section */
.ng-voice-studio .vs-publish-section {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 10002;
    background: linear-gradient(transparent, var(--vs-bg-void) 30%);
    padding: 20px;
}

.ng-voice-studio .vs-publish-container {
    max-width: 480px;
    margin: 0 auto;
}

.ng-voice-studio .vs-publish-btn {
    width: 100%;
    padding: 16px 32px;
    background: linear-gradient(135deg, var(--vs-solar-orange), var(--vs-solar-gold));
    border: 2px solid var(--vs-solar-gold);
    border-radius: 12px;
    color: white;
    font-family: 'Orbitron', monospace;
    font-size: 16px;
    font-weight: 700;
    letter-spacing: 3px;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    box-shadow: 0 0 30px rgba(255, 107, 0, 0.4);
}

.ng-voice-studio .vs-publish-btn:hover:not(:disabled) {
    transform: translateY(-2px);
    box-shadow: 0 0 50px rgba(255, 107, 0, 0.6);
}

.ng-voice-studio .vs-publish-btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

/* Mobile Responsive */
@media (max-width: 400px) {
    .ng-voice-studio .vs-effects-grid {
        grid-template-columns: repeat(3, 1fr);
    }

    .ng-voice-studio .vs-effect-item {
        padding: 12px 6px;
    }

    .ng-voice-studio .vs-effect-icon {
        width: 36px;
        height: 36px;
        font-size: 16px;
    }

    .ng-voice-studio .vs-audio-controls {
        grid-template-columns: 1fr;
    }
}

/* ═══════════════════════════════════════════════════════════════════════════
   TEXT CREATOR - NEON SYNTHWAVE THEME
   "Digital Canvas" - Where Thoughts Become Art
═══════════════════════════════════════════════════════════════════════════ */

.ng-text-studio {
    --nt-neon-magenta: #E91E8C;
    --nt-neon-pink: #FF2D95;
    --nt-neon-hot-pink: #FF006E;
    --nt-neon-cyan: #00D9FF;
    --nt-neon-purple: #8B5CF6;
    --nt-neon-yellow: #FACC15;
    --nt-bg-void: #0a0a0f;
    --nt-bg-dark: #0f0f18;
    --nt-bg-card: #161622;
    --nt-bg-glass: rgba(22, 22, 34, 0.8);
    --nt-text-primary: #ffffff;
    --nt-text-secondary: rgba(255, 255, 255, 0.7);
    --nt-text-muted: rgba(255, 255, 255, 0.4);

    position: fixed;
    inset: 0;
    z-index: 9999;
    background: var(--nt-bg-void);
    opacity: 0;
    transition: opacity 0.3s ease;
}

.ng-text-studio.active {
    opacity: 1;
}

/* Background Effects */
.ng-text-studio .nt-bg-grid {
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(233, 30, 140, 0.03) 1px, transparent 1px),
        linear-gradient(90deg, rgba(233, 30, 140, 0.03) 1px, transparent 1px);
    background-size: 50px 50px;
    pointer-events: none;
}

.ng-text-studio .nt-bg-gradient {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse at 20% 0%, rgba(233, 30, 140, 0.15) 0%, transparent 50%),
        radial-gradient(ellipse at 80% 100%, rgba(139, 92, 246, 0.1) 0%, transparent 50%);
    pointer-events: none;
}

.ng-text-studio .nt-scanlines {
    position: absolute;
    inset: 0;
    background: repeating-linear-gradient(
        0deg,
        transparent 0px,
        transparent 2px,
        rgba(0, 0, 0, 0.1) 2px,
        rgba(0, 0, 0, 0.1) 4px
    );
    pointer-events: none;
    opacity: 0.3;
    z-index: 0;
}

/* Main Container */
.ng-text-studio .nt-container {
    position: relative;
    z-index: 10;
    height: 100%;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* Header */
.ng-text-studio .nt-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 16px;
    background: var(--nt-bg-glass);
    backdrop-filter: blur(20px);
    border-bottom: 1px solid rgba(233, 30, 140, 0.2);
    flex-shrink: 0;
}

.ng-text-studio .nt-header-left {
    display: flex;
    align-items: center;
    gap: 14px;
}

.ng-text-studio .nt-back-btn {
    width: 40px;
    height: 40px;
    border-radius: 12px;
    background: transparent;
    border: 1px solid rgba(233, 30, 140, 0.3);
    color: var(--nt-neon-magenta);
    font-size: 16px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
}

.ng-text-studio .nt-back-btn:hover {
    background: rgba(233, 30, 140, 0.1);
    border-color: var(--nt-neon-magenta);
    box-shadow: 0 0 20px rgba(233, 30, 140, 0.4);
}

.ng-text-studio .nt-header-title h1 {
    font-family: 'Orbitron', sans-serif;
    font-size: 1rem;
    font-weight: 700;
    background: linear-gradient(135deg, var(--nt-neon-magenta), var(--nt-neon-pink));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    letter-spacing: 2px;
    margin: 0;
}

.ng-text-studio .nt-header-title span {
    font-size: 0.7rem;
    color: var(--nt-text-muted);
    letter-spacing: 1px;
}

.ng-text-studio .nt-char-counter {
    font-family: 'Share Tech Mono', monospace;
    font-size: 0.8rem;
    color: var(--nt-text-secondary);
    padding: 6px 12px;
    background: rgba(233, 30, 140, 0.1);
    border: 1px solid rgba(233, 30, 140, 0.2);
    border-radius: 8px;
}

.ng-text-studio .nt-char-counter.warning {
    color: var(--nt-neon-yellow);
    border-color: rgba(250, 204, 21, 0.3);
    background: rgba(250, 204, 21, 0.1);
}

.ng-text-studio .nt-char-counter.danger {
    color: #ef4444;
    border-color: rgba(239, 68, 68, 0.3);
    background: rgba(239, 68, 68, 0.1);
}

/* Content */
.ng-text-studio .nt-content {
    flex: 1;
    overflow-y: auto;
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* Section Title */
.ng-text-studio .nt-section-title {
    font-family: 'Orbitron', sans-serif;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--nt-neon-magenta);
    letter-spacing: 2px;
    text-transform: uppercase;
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.ng-text-studio .nt-section-title span {
    width: 3px;
    height: 14px;
    background: linear-gradient(180deg, var(--nt-neon-magenta), var(--nt-neon-purple));
    border-radius: 2px;
}

/* Text Input */
.ng-text-studio .nt-input-wrapper {
    position: relative;
    background: var(--nt-bg-card);
    border-radius: 16px;
    padding: 2px;
}

.ng-text-studio .nt-input-wrapper::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 16px;
    padding: 2px;
    background: linear-gradient(135deg,
        var(--nt-neon-magenta),
        var(--nt-neon-purple),
        var(--nt-neon-cyan),
        var(--nt-neon-magenta));
    background-size: 300% 300%;
    animation: ntBorderGlow 4s ease infinite;
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    opacity: 0.5;
    transition: opacity 0.3s ease;
}

.ng-text-studio .nt-input-wrapper:focus-within::before {
    opacity: 1;
}

@keyframes ntBorderGlow {
    0%, 100% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
}

.ng-text-studio .nt-input-inner {
    background: var(--nt-bg-dark);
    border-radius: 14px;
    padding: 16px;
    position: relative;
    z-index: 2;
}

.ng-text-studio .nt-textarea {
    width: 100%;
    min-height: 120px;
    max-height: 250px;
    background: transparent;
    border: none;
    outline: none;
    color: var(--nt-text-primary);
    font-family: 'Rajdhani', sans-serif;
    font-size: 1.05rem;
    line-height: 1.5;
    resize: none;
    caret-color: var(--nt-neon-magenta);
}

.ng-text-studio .nt-textarea::placeholder {
    color: var(--nt-text-muted);
}

/* Toolbar */
.ng-text-studio .nt-toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 12px;
    background: var(--nt-bg-glass);
    backdrop-filter: blur(10px);
    border-radius: 14px;
    border: 1px solid rgba(233, 30, 140, 0.15);
}

.ng-text-studio .nt-toolbar-group {
    display: flex;
    gap: 4px;
    padding-right: 10px;
    border-right: 1px solid rgba(255, 255, 255, 0.1);
}

.ng-text-studio .nt-toolbar-group:last-child {
    border-right: none;
    padding-right: 0;
}

.ng-text-studio .nt-format-btn {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: var(--nt-text-secondary);
    font-size: 13px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
}

.ng-text-studio .nt-format-btn:hover {
    background: rgba(233, 30, 140, 0.15);
    border-color: rgba(233, 30, 140, 0.4);
    color: var(--nt-neon-magenta);
}

.ng-text-studio .nt-format-btn.active {
    background: rgba(233, 30, 140, 0.2);
    border-color: var(--nt-neon-magenta);
    color: var(--nt-neon-magenta);
    box-shadow: 0 0 12px rgba(233, 30, 140, 0.3);
}

.ng-text-studio .nt-font-selector select {
    appearance: none;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    color: var(--nt-text-secondary);
    font-family: 'Rajdhani', sans-serif;
    font-size: 0.85rem;
    padding: 8px 28px 8px 10px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.ng-text-studio .nt-font-selector select:hover {
    border-color: rgba(233, 30, 140, 0.4);
    background: rgba(233, 30, 140, 0.1);
}

.ng-text-studio .nt-font-selector {
    position: relative;
}

.ng-text-studio .nt-font-selector::after {
    content: '\f078';
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--nt-text-muted);
    font-size: 9px;
    pointer-events: none;
}

/* Mood Selector */
.ng-text-studio .nt-mood-selector {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.ng-text-studio .nt-mood-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    background: var(--nt-bg-card);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 20px;
    color: var(--nt-text-secondary);
    font-family: 'Rajdhani', sans-serif;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
}

.ng-text-studio .nt-mood-btn:hover {
    background: rgba(233, 30, 140, 0.1);
    border-color: rgba(233, 30, 140, 0.3);
}

.ng-text-studio .nt-mood-btn.active {
    border-color: var(--nt-neon-magenta);
    box-shadow: 0 0 15px rgba(233, 30, 140, 0.3);
}

.ng-text-studio .nt-mood-btn[data-mood="hype"].active {
    background: linear-gradient(135deg, rgba(255, 45, 149, 0.2), rgba(239, 68, 68, 0.2));
}

.ng-text-studio .nt-mood-btn[data-mood="deep"].active {
    background: linear-gradient(135deg, rgba(139, 92, 246, 0.2), rgba(59, 130, 246, 0.2));
    border-color: var(--nt-neon-purple);
}

.ng-text-studio .nt-mood-btn[data-mood="chill"].active {
    background: linear-gradient(135deg, rgba(0, 217, 255, 0.2), rgba(34, 197, 94, 0.2));
    border-color: var(--nt-neon-cyan);
}

.ng-text-studio .nt-mood-btn[data-mood="fun"].active {
    background: linear-gradient(135deg, rgba(250, 204, 21, 0.2), rgba(255, 45, 149, 0.2));
    border-color: var(--nt-neon-yellow);
}

.ng-text-studio .nt-mood-btn[data-mood="sad"].active {
    background: linear-gradient(135deg, rgba(139, 92, 246, 0.2), rgba(107, 114, 128, 0.2));
    border-color: var(--nt-neon-purple);
}

.ng-text-studio .nt-mood-emoji {
    font-size: 1.1rem;
}

/* Background Picker */
.ng-text-studio .nt-bg-picker-section {
    background: var(--nt-bg-card);
    border-radius: 16px;
    padding: 16px;
    border: 1px solid rgba(233, 30, 140, 0.1);
}

.ng-text-studio .nt-bg-grid-picker {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 8px;
}

.ng-text-studio .nt-bg-option {
    aspect-ratio: 1;
    border-radius: 10px;
    cursor: pointer;
    border: 2px solid transparent;
    transition: all 0.3s ease;
    position: relative;
}

.ng-text-studio .nt-bg-option:hover {
    transform: scale(1.08);
    border-color: rgba(255, 255, 255, 0.3);
}

.ng-text-studio .nt-bg-option.active {
    border-color: var(--nt-neon-magenta);
    box-shadow: 0 0 15px rgba(233, 30, 140, 0.5);
}

.ng-text-studio .nt-bg-option.active::after {
    content: '\f00c';
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.4);
    color: white;
    font-size: 1rem;
    border-radius: 8px;
}

.ng-text-studio .nt-bg-opt-1 { background: linear-gradient(135deg, #E91E8C, #8B5CF6); }
.ng-text-studio .nt-bg-opt-2 { background: linear-gradient(135deg, #00D9FF, #3B82F6); }
.ng-text-studio .nt-bg-opt-3 { background: linear-gradient(135deg, #FF2D95, #FF6B35); }
.ng-text-studio .nt-bg-opt-4 { background: linear-gradient(135deg, #8B5CF6, #06B6D4); }
.ng-text-studio .nt-bg-opt-5 { background: linear-gradient(135deg, #22C55E, #00D9FF); }
.ng-text-studio .nt-bg-opt-6 { background: linear-gradient(135deg, #FACC15, #FF2D95); }
.ng-text-studio .nt-bg-opt-7 { background: linear-gradient(135deg, #1a1a2e, #E91E8C 150%); }
.ng-text-studio .nt-bg-opt-8 { background: linear-gradient(180deg, #0f0f18, #1a1a2e); }
.ng-text-studio .nt-bg-opt-9 { background: repeating-linear-gradient(0deg, rgba(233, 30, 140, 0.15) 0px, transparent 2px, transparent 4px), linear-gradient(135deg, #0f0f18, #1a1a2e); }
.ng-text-studio .nt-bg-opt-10 { background: linear-gradient(rgba(233, 30, 140, 0.08) 1px, transparent 1px), linear-gradient(90deg, rgba(233, 30, 140, 0.08) 1px, transparent 1px), #0f0f18; background-size: 15px 15px; }

/* Quick Actions */
.ng-text-studio .nt-quick-actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.ng-text-studio .nt-quick-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 10px 14px;
    background: var(--nt-bg-card);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    color: var(--nt-text-secondary);
    font-family: 'Rajdhani', sans-serif;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
}

.ng-text-studio .nt-quick-btn i {
    font-size: 1rem;
}

.ng-text-studio .nt-quick-btn:hover {
    background: rgba(233, 30, 140, 0.1);
    border-color: rgba(233, 30, 140, 0.3);
    color: var(--nt-neon-magenta);
}

.ng-text-studio .nt-quick-btn.emoji-btn:hover {
    border-color: var(--nt-neon-yellow);
    color: var(--nt-neon-yellow);
}

.ng-text-studio .nt-quick-btn.hashtag-btn:hover {
    border-color: var(--nt-neon-cyan);
    color: var(--nt-neon-cyan);
}

.ng-text-studio .nt-quick-btn.mention-btn:hover {
    border-color: var(--nt-neon-purple);
    color: var(--nt-neon-purple);
}

/* Hashtag Suggestions */
.ng-text-studio .nt-hashtag-suggestions {
    display: none;
    flex-wrap: wrap;
    gap: 6px;
    padding: 12px;
    background: var(--nt-bg-card);
    border-radius: 12px;
    border: 1px solid rgba(0, 217, 255, 0.2);
    margin-top: 10px;
}

.ng-text-studio .nt-hashtag-suggestions.active {
    display: flex;
}

.ng-text-studio .nt-hashtag-chip {
    padding: 5px 12px;
    background: rgba(0, 217, 255, 0.1);
    border: 1px solid rgba(0, 217, 255, 0.3);
    border-radius: 16px;
    color: var(--nt-neon-cyan);
    font-size: 0.8rem;
    cursor: pointer;
    transition: all 0.2s ease;
}

.ng-text-studio .nt-hashtag-chip:hover {
    background: rgba(0, 217, 255, 0.2);
    transform: scale(1.05);
}

/* Preview */
.ng-text-studio .nt-preview-section {
    background: var(--nt-bg-card);
    border-radius: 16px;
    padding: 16px;
    border: 1px solid rgba(233, 30, 140, 0.1);
}

.ng-text-studio .nt-preview-card {
    border-radius: 14px;
    overflow: hidden;
}

.ng-text-studio .nt-preview-bg {
    min-height: 180px;
    padding: 24px 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    background: linear-gradient(135deg, #E91E8C, #8B5CF6);
    transition: background 0.4s ease;
}

.ng-text-studio .nt-preview-bg.scanlines {
    position: relative;
}

.ng-text-studio .nt-preview-bg.scanlines::after {
    content: '';
    position: absolute;
    inset: 0;
    background: repeating-linear-gradient(0deg, rgba(233, 30, 140, 0.1) 0px, transparent 2px, transparent 4px);
    pointer-events: none;
}

.ng-text-studio .nt-preview-bg.grid-pattern {
    background-image: linear-gradient(rgba(233, 30, 140, 0.08) 1px, transparent 1px),
                      linear-gradient(90deg, rgba(233, 30, 140, 0.08) 1px, transparent 1px);
    background-size: 15px 15px;
    background-color: #0f0f18;
}

.ng-text-studio .nt-preview-text {
    font-size: 1.15rem;
    font-weight: 600;
    line-height: 1.5;
    color: white;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
    max-width: 100%;
    word-break: break-word;
}

.ng-text-studio .nt-preview-text.empty {
    color: rgba(255, 255, 255, 0.5);
    font-style: italic;
}

.ng-text-studio .nt-preview-text.font-fancy {
    font-family: 'Audiowide', cursive;
}

.ng-text-studio .nt-preview-text.font-mono {
    font-family: 'Share Tech Mono', monospace;
}

.ng-text-studio .nt-preview-text.font-tech {
    font-family: 'Orbitron', sans-serif;
}

.ng-text-studio .nt-preview-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 14px;
    background: var(--nt-bg-dark);
}

.ng-text-studio .nt-preview-author {
    display: flex;
    align-items: center;
    gap: 8px;
}

.ng-text-studio .nt-preview-avatar {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--nt-neon-magenta), var(--nt-neon-purple));
}

.ng-text-studio .nt-preview-name {
    font-weight: 600;
    font-size: 0.85rem;
}

.ng-text-studio .nt-preview-category {
    font-size: 0.7rem;
    padding: 4px 10px;
    background: rgba(233, 30, 140, 0.2);
    border-radius: 8px;
    color: var(--nt-neon-magenta);
}

/* Category Selector */
.ng-text-studio .nt-category-selector {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.ng-text-studio .nt-category-btn {
    padding: 8px 16px;
    background: var(--nt-bg-card);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 10px;
    color: var(--nt-text-secondary);
    font-family: 'Rajdhani', sans-serif;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
}

.ng-text-studio .nt-category-btn:hover {
    border-color: rgba(233, 30, 140, 0.3);
    background: rgba(233, 30, 140, 0.1);
}

.ng-text-studio .nt-category-btn.active {
    background: linear-gradient(135deg, rgba(233, 30, 140, 0.2), rgba(139, 92, 246, 0.2));
    border-color: var(--nt-neon-magenta);
    color: var(--nt-text-primary);
}

/* Publish Section */
.ng-text-studio .nt-publish-section {
    padding: 16px;
    background: var(--nt-bg-glass);
    backdrop-filter: blur(20px);
    border-top: 1px solid rgba(233, 30, 140, 0.2);
    flex-shrink: 0;
}

.ng-text-studio .nt-publish-btn {
    width: 100%;
    padding: 16px;
    background: linear-gradient(135deg, var(--nt-neon-magenta), var(--nt-neon-hot-pink));
    border: none;
    border-radius: 14px;
    color: white;
    font-family: 'Orbitron', sans-serif;
    font-size: 0.9rem;
    font-weight: 700;
    letter-spacing: 2px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    transition: all 0.3s ease;
    box-shadow: 0 0 25px rgba(233, 30, 140, 0.4);
}

.ng-text-studio .nt-publish-btn:hover:not(:disabled) {
    transform: translateY(-2px);
    box-shadow: 0 0 40px rgba(233, 30, 140, 0.6);
}

.ng-text-studio .nt-publish-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    box-shadow: none;
}

.ng-text-studio .nt-publish-btn i {
    margin-right: 8px;
}

/* Emoji Picker */
.ng-text-studio .nt-emoji-picker {
    display: none;
    position: fixed;
    bottom: 90px;
    left: 50%;
    transform: translateX(-50%);
    width: calc(100% - 32px);
    max-width: 340px;
    background: var(--nt-bg-card);
    border: 1px solid rgba(233, 30, 140, 0.3);
    border-radius: 16px;
    padding: 14px;
    z-index: 200;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
}

.ng-text-studio .nt-emoji-picker.active {
    display: block;
    animation: ntSlideUp 0.3s ease;
}

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

.ng-text-studio .nt-emoji-grid {
    display: grid;
    grid-template-columns: repeat(8, 1fr);
    gap: 6px;
}

.ng-text-studio .nt-emoji-item {
    font-size: 1.3rem;
    padding: 6px;
    background: transparent;
    border: none;
    cursor: pointer;
    border-radius: 6px;
    transition: all 0.2s ease;
}

.ng-text-studio .nt-emoji-item:hover {
    background: rgba(233, 30, 140, 0.2);
    transform: scale(1.15);
}

/* ═══════════════════════════════════════════════════════════════════════════
   TEXT POST CARD IN FEED - Neon Synthwave Style
   Beautiful gradient cards with mood badges
═══════════════════════════════════════════════════════════════════════════ */

.ng-text-post-card {
    position: relative;
    margin: 0;
    border-radius: 0;
    overflow: hidden;
}

/* Background with gradient image */
.ng-text-post-bg {
    position: relative;
    aspect-ratio: 1;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
}

/* Subtle overlay for better text readability */
.ng-text-post-bg::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at center, transparent 0%, rgba(0, 0, 0, 0.15) 100%);
    pointer-events: none;
}

/* Text content */
.ng-text-post-content {
    position: relative;
    z-index: 1;
    font-size: 1.25rem;
    font-weight: 600;
    line-height: 1.5;
    color: white;
    text-align: center;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.4),
                 0 0 30px rgba(0, 0, 0, 0.2);
    max-width: 90%;
    word-break: break-word;
}

/* Font variants */
.ng-text-post-content.font-fancy {
    font-family: 'Audiowide', cursive;
    font-size: 1.15rem;
}

.ng-text-post-content.font-mono {
    font-family: 'Share Tech Mono', monospace;
    font-size: 1.1rem;
    letter-spacing: 1px;
}

.ng-text-post-content.font-tech {
    font-family: 'Orbitron', sans-serif;
    font-size: 1.1rem;
    letter-spacing: 2px;
    text-transform: uppercase;
}

/* Mood Badge */
.ng-text-mood-badge {
    position: absolute;
    top: 12px;
    right: 12px;
    z-index: 10;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(8px);
    border: 2px solid rgba(255, 255, 255, 0.2);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
    animation: moodPulse 2s ease-in-out infinite;
}

.ng-text-mood-badge .mood-emoji {
    font-size: 1.3rem;
}

@keyframes moodPulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.1); }
}

/* Mood-specific colors */
.ng-text-mood-badge[data-mood="hype"] {
    background: linear-gradient(135deg, rgba(255, 45, 149, 0.7), rgba(239, 68, 68, 0.7));
    border-color: rgba(255, 45, 149, 0.5);
    box-shadow: 0 0 20px rgba(255, 45, 149, 0.4);
}

.ng-text-mood-badge[data-mood="deep"] {
    background: linear-gradient(135deg, rgba(139, 92, 246, 0.7), rgba(59, 130, 246, 0.7));
    border-color: rgba(139, 92, 246, 0.5);
    box-shadow: 0 0 20px rgba(139, 92, 246, 0.4);
}

.ng-text-mood-badge[data-mood="chill"] {
    background: linear-gradient(135deg, rgba(0, 217, 255, 0.7), rgba(34, 197, 94, 0.7));
    border-color: rgba(0, 217, 255, 0.5);
    box-shadow: 0 0 20px rgba(0, 217, 255, 0.4);
}

.ng-text-mood-badge[data-mood="fun"] {
    background: linear-gradient(135deg, rgba(250, 204, 21, 0.7), rgba(255, 45, 149, 0.7));
    border-color: rgba(250, 204, 21, 0.5);
    box-shadow: 0 0 20px rgba(250, 204, 21, 0.4);
}

.ng-text-mood-badge[data-mood="sad"] {
    background: linear-gradient(135deg, rgba(139, 92, 246, 0.7), rgba(107, 114, 128, 0.7));
    border-color: rgba(139, 92, 246, 0.5);
    box-shadow: 0 0 20px rgba(139, 92, 246, 0.4);
}

/* Double tap heart for text posts */
.ng-text-post-card .ng-double-tap-heart {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0);
    font-size: 80px;
    color: white;
    opacity: 0;
    pointer-events: none;
    z-index: 20;
    text-shadow: 0 0 30px rgba(233, 30, 140, 0.8);
    transition: none;
}

.ng-text-post-card .ng-double-tap-heart.animate {
    animation: doubleHeartPop 0.8s ease-out forwards;
}

@keyframes doubleHeartPop {
    0% { transform: translate(-50%, -50%) scale(0); opacity: 0; }
    15% { transform: translate(-50%, -50%) scale(1.3); opacity: 1; }
    30% { transform: translate(-50%, -50%) scale(1); opacity: 1; }
    80% { transform: translate(-50%, -50%) scale(1); opacity: 1; }
    100% { transform: translate(-50%, -50%) scale(1.2); opacity: 0; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   LINK STUDIO - LINK::PORTAL - Electric Indigo Cyberpunk Theme
   "Connect to the Grid. Share the Signal."
   ═══════════════════════════════════════════════════════════════════════════ */

.ng-link-studio {
    --nl-indigo: #6366F1;
    --nl-indigo-bright: #818CF8;
    --nl-indigo-dim: #4F46E5;
    --nl-cyan: #22D3EE;
    --nl-purple: #A855F7;
    --nl-pink: #EC4899;
    --nl-green: #10B981;
    --nl-red: #EF4444;
    --nl-void: #030305;
    --nl-surface: #0C0C12;
    --nl-card: #101018;
    --nl-text: #F1F5F9;
    --nl-text-muted: #64748B;
    --nl-glow-sm: 0 0 10px;
    --nl-glow-md: 0 0 20px;

    position: fixed;
    inset: 0;
    z-index: 9999;
    background: var(--nl-void);
    display: flex;
    flex-direction: column;
    opacity: 0;
    transform: scale(0.95);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    font-family: 'Exo 2', 'Inter', sans-serif;
}

.ng-link-studio.active {
    opacity: 1;
    transform: scale(1);
}

/* Background Effects */
.ng-link-studio .nl-bg-hex {
    position: absolute;
    inset: 0;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='49' viewBox='0 0 28 49'%3E%3Cg fill-rule='evenodd'%3E%3Cg fill='%236366F1' fill-opacity='0.03'%3E%3Cpath d='M13.99 9.25l13 7.5v15l-13 7.5L1 31.75v-15l12.99-7.5zM3 17.9v12.7l10.99 6.34 11-6.35V17.9l-11-6.34L3 17.9z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
    pointer-events: none;
}

.ng-link-studio .nl-bg-gradient {
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at top right, rgba(99, 102, 241, 0.12) 0%, transparent 50%),
                radial-gradient(ellipse at bottom left, rgba(34, 211, 238, 0.08) 0%, transparent 50%);
    pointer-events: none;
}

.ng-link-studio .nl-scanlines {
    position: absolute;
    inset: 0;
    background: repeating-linear-gradient(0deg, transparent, transparent 2px, rgba(0, 0, 0, 0.1) 2px, rgba(0, 0, 0, 0.1) 4px);
    pointer-events: none;
    opacity: 0.3;
}

.ng-link-studio .nl-particles {
    position: absolute;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
}

.ng-link-studio .nl-particle {
    position: absolute;
    width: 3px;
    height: 3px;
    background: var(--nl-cyan);
    border-radius: 50%;
    opacity: 0;
    animation: nlParticleFloat 8s linear infinite;
}

@keyframes nlParticleFloat {
    0% { transform: translateY(100vh) scale(0); opacity: 0; }
    10% { opacity: 0.8; transform: translateY(80vh) scale(1); }
    90% { opacity: 0.4; transform: translateY(10vh) scale(0.6); }
    100% { transform: translateY(-10vh) scale(0); opacity: 0; }
}

/* Container */
.ng-link-studio .nl-container {
    position: relative;
    z-index: 10;
    display: flex;
    flex-direction: column;
    height: 100%;
}

/* Header */
.ng-link-studio .nl-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    background: linear-gradient(180deg, rgba(99, 102, 241, 0.08) 0%, transparent 100%);
    border-bottom: 1px solid rgba(99, 102, 241, 0.2);
    position: relative;
}

.ng-link-studio .nl-header::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--nl-indigo) 20%, var(--nl-cyan) 50%, var(--nl-indigo) 80%, transparent);
    animation: nlHeaderGlow 3s ease-in-out infinite;
}

@keyframes nlHeaderGlow {
    0%, 100% { opacity: 0.5; }
    50% { opacity: 1; }
}

.ng-link-studio .nl-header-left {
    display: flex;
    align-items: center;
    gap: 16px;
}

.ng-link-studio .nl-back-btn {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: transparent;
    border: 1px solid rgba(99, 102, 241, 0.3);
    color: var(--nl-indigo-bright);
    font-size: 16px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.ng-link-studio .nl-back-btn:hover {
    border-color: var(--nl-indigo);
    box-shadow: var(--nl-glow-sm) var(--nl-indigo);
    transform: translateX(-3px);
}

.ng-link-studio .nl-header-title h1 {
    font-family: 'Orbitron', monospace;
    font-size: 18px;
    font-weight: 700;
    letter-spacing: 3px;
    background: linear-gradient(135deg, var(--nl-indigo-bright), var(--nl-cyan));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin: 0;
}

.ng-link-studio .nl-header-title span {
    font-family: 'JetBrains Mono', monospace;
    font-size: 10px;
    color: var(--nl-text-muted);
    letter-spacing: 2px;
}

.ng-link-studio .nl-char-counter {
    font-family: 'JetBrains Mono', monospace;
    font-size: 11px;
    color: var(--nl-text-muted);
    padding: 6px 12px;
    background: rgba(99, 102, 241, 0.1);
    border-radius: 20px;
    border: 1px solid rgba(99, 102, 241, 0.2);
}

.ng-link-studio .nl-char-counter.warning { color: #FBBF24; border-color: rgba(251, 191, 36, 0.4); }
.ng-link-studio .nl-char-counter.danger { color: #EF4444; border-color: rgba(239, 68, 68, 0.4); }

/* Content */
.ng-link-studio .nl-content {
    flex: 1;
    overflow-y: auto;
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

/* Section Base */
.ng-link-studio .nl-section {
    position: relative;
    background: var(--nl-surface);
    border-radius: 16px;
    padding: 20px;
    border: 1px solid rgba(99, 102, 241, 0.15);
}

/* Corner Brackets */
.ng-link-studio .nl-corner-tl,
.ng-link-studio .nl-corner-tr,
.ng-link-studio .nl-corner-bl,
.ng-link-studio .nl-corner-br {
    position: absolute;
    width: 16px;
    height: 16px;
    border: 2px solid var(--nl-indigo);
    opacity: 0.5;
    transition: all 0.3s ease;
    pointer-events: none;
}

.ng-link-studio .nl-corner-tl { top: -1px; left: -1px; border-right: none; border-bottom: none; border-radius: 16px 0 0 0; }
.ng-link-studio .nl-corner-tr { top: -1px; right: -1px; border-left: none; border-bottom: none; border-radius: 0 16px 0 0; }
.ng-link-studio .nl-corner-bl { bottom: -1px; left: -1px; border-right: none; border-top: none; border-radius: 0 0 0 16px; }
.ng-link-studio .nl-corner-br { bottom: -1px; right: -1px; border-left: none; border-top: none; border-radius: 0 0 16px 0; }

.ng-link-studio .nl-section:hover .nl-corner-tl,
.ng-link-studio .nl-section:hover .nl-corner-tr,
.ng-link-studio .nl-section:hover .nl-corner-bl,
.ng-link-studio .nl-section:hover .nl-corner-br {
    opacity: 1;
    width: 24px;
    height: 24px;
    filter: drop-shadow(var(--nl-glow-sm) var(--nl-indigo));
}

.ng-link-studio .nl-section-label {
    font-family: 'Orbitron', monospace;
    font-size: 10px;
    font-weight: 600;
    color: var(--nl-indigo-bright);
    letter-spacing: 2px;
    text-transform: uppercase;
    margin-bottom: 14px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.ng-link-studio .nl-section-label i {
    font-size: 12px;
    opacity: 0.8;
}

.ng-link-studio .nl-section-label::after {
    content: '';
    flex: 1;
    height: 1px;
    background: linear-gradient(90deg, rgba(99, 102, 241, 0.4), transparent);
}

/* URL Section */
.ng-link-studio .nl-url-section {
    background: linear-gradient(135deg, var(--nl-surface) 0%, rgba(99, 102, 241, 0.05) 100%);
}

.ng-link-studio .nl-url-row {
    display: flex;
    gap: 12px;
}

.ng-link-studio .nl-url-wrapper {
    flex: 1;
}

.ng-link-studio .nl-url-input {
    width: 100%;
    height: 56px;
    background: var(--nl-void);
    border: 2px solid rgba(99, 102, 241, 0.3);
    border-radius: 12px;
    padding: 0 16px;
    font-family: 'JetBrains Mono', monospace;
    font-size: 13px;
    color: var(--nl-text);
    transition: all 0.3s ease;
}

.ng-link-studio .nl-url-input::placeholder {
    color: var(--nl-text-muted);
    font-family: 'Exo 2', sans-serif;
}

.ng-link-studio .nl-url-input:focus {
    outline: none;
    border-color: var(--nl-indigo);
    box-shadow: var(--nl-glow-md) var(--nl-indigo), inset 0 0 30px rgba(99, 102, 241, 0.1);
}

.ng-link-studio .nl-paste-btn {
    width: 56px;
    height: 56px;
    border-radius: 12px;
    background: linear-gradient(135deg, var(--nl-card), rgba(99, 102, 241, 0.1));
    border: 2px solid rgba(99, 102, 241, 0.4);
    color: var(--nl-indigo-bright);
    font-size: 18px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.ng-link-studio .nl-paste-btn:hover {
    border-color: var(--nl-indigo);
    transform: scale(1.05);
    box-shadow: var(--nl-glow-md) var(--nl-indigo);
}

/* Platform Detection */
.ng-link-studio .nl-detection {
    margin-top: 14px;
    display: none;
    animation: nlSlideReveal 0.4s ease;
}

.ng-link-studio .nl-detection.active {
    display: block;
}

@keyframes nlSlideReveal {
    from { opacity: 0; transform: translateY(-15px) scale(0.95); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

.ng-link-studio .nl-connection-card {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 18px;
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.12) 0%, rgba(34, 211, 238, 0.05) 100%);
    border-radius: 12px;
    border: 1px solid rgba(99, 102, 241, 0.3);
    position: relative;
    overflow: hidden;
}

.ng-link-studio .nl-connection-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.08), transparent);
    animation: nlShimmer 2s ease-in-out infinite;
}

@keyframes nlShimmer {
    0% { left: -100%; }
    100% { left: 100%; }
}

.ng-link-studio .nl-platform-ring {
    position: relative;
    width: 50px;
    height: 50px;
}

.ng-link-studio .nl-platform-ring::before {
    content: '';
    position: absolute;
    inset: -3px;
    border-radius: 14px;
    background: conic-gradient(from 0deg, var(--nl-indigo), transparent 60%, var(--nl-indigo));
    animation: nlRingSpin 2s linear infinite;
    opacity: 0.8;
}

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

.ng-link-studio .nl-platform-icon {
    position: relative;
    width: 100%;
    height: 100%;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    color: white;
    z-index: 1;
}

.ng-link-studio .nl-platform-icon.youtube { background: linear-gradient(135deg, #FF0000, #CC0000); }
.ng-link-studio .nl-platform-icon.tiktok { background: linear-gradient(135deg, #EE1D52, #69C9D0); }
.ng-link-studio .nl-platform-icon.instagram { background: linear-gradient(135deg, #F58529, #DD2A7B, #8134AF); }
.ng-link-studio .nl-platform-icon.twitter { background: #000; border: 1px solid rgba(255,255,255,0.2); }
.ng-link-studio .nl-platform-icon.facebook { background: linear-gradient(135deg, #1877F2, #0C5DC7); }
.ng-link-studio .nl-platform-icon.vimeo { background: linear-gradient(135deg, #1AB7EA, #0D8DC2); }
.ng-link-studio .nl-platform-icon.twitch { background: linear-gradient(135deg, #9146FF, #6441A5); }
.ng-link-studio .nl-platform-icon.spotify { background: linear-gradient(135deg, #1DB954, #169C46); }

.ng-link-studio .nl-platform-info {
    flex: 1;
}

.ng-link-studio .nl-platform-name {
    font-family: 'Orbitron', monospace;
    font-size: 15px;
    font-weight: 600;
    color: var(--nl-text);
}

.ng-link-studio .nl-platform-id {
    font-family: 'JetBrains Mono', monospace;
    font-size: 10px;
    color: var(--nl-cyan);
    opacity: 0.8;
    margin-top: 2px;
}

.ng-link-studio .nl-status-badge {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 5px 10px;
    background: rgba(16, 185, 129, 0.15);
    border: 1px solid rgba(16, 185, 129, 0.4);
    border-radius: 16px;
    font-family: 'Orbitron', monospace;
    font-size: 8px;
    font-weight: 600;
    color: var(--nl-green);
    letter-spacing: 1px;
}

.ng-link-studio .nl-status-dot {
    width: 5px;
    height: 5px;
    background: var(--nl-green);
    border-radius: 50%;
    animation: nlStatusPulse 1.5s ease-in-out infinite;
}

@keyframes nlStatusPulse {
    0%, 100% { opacity: 1; box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.7); }
    50% { opacity: 0.7; box-shadow: 0 0 0 5px rgba(16, 185, 129, 0); }
}

/* Platforms Grid */
.ng-link-studio .nl-platforms-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
}

.ng-link-studio .nl-platform-node {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 14px 8px;
    background: var(--nl-card);
    border-radius: 12px;
    border: 1px solid rgba(99, 102, 241, 0.1);
    cursor: pointer;
    transition: all 0.3s ease;
}

.ng-link-studio .nl-platform-node:hover {
    border-color: rgba(99, 102, 241, 0.5);
    transform: translateY(-3px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3), var(--nl-glow-sm) var(--nl-indigo);
}

.ng-link-studio .nl-platform-node.selected {
    border-color: var(--nl-indigo);
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.15), var(--nl-card));
}

.ng-link-studio .nl-node-icon {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    color: white;
    transition: all 0.3s ease;
}

.ng-link-studio .nl-platform-node:hover .nl-node-icon {
    transform: scale(1.1);
}

.ng-link-studio .nl-node-icon.youtube { background: #FF0000; }
.ng-link-studio .nl-node-icon.tiktok { background: linear-gradient(135deg, #EE1D52, #69C9D0); }
.ng-link-studio .nl-node-icon.instagram { background: linear-gradient(135deg, #F58529, #DD2A7B, #8134AF); }
.ng-link-studio .nl-node-icon.twitter { background: #000; border: 1px solid rgba(255,255,255,0.2); }
.ng-link-studio .nl-node-icon.facebook { background: #1877F2; }
.ng-link-studio .nl-node-icon.vimeo { background: #1AB7EA; }
.ng-link-studio .nl-node-icon.twitch { background: #9146FF; }
.ng-link-studio .nl-node-icon.spotify { background: #1DB954; }

.ng-link-studio .nl-node-name {
    font-family: 'JetBrains Mono', monospace;
    font-size: 8px;
    font-weight: 500;
    color: var(--nl-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Preview Section */
.ng-link-studio .nl-preview-section {
    display: none;
}

.ng-link-studio .nl-preview-section.active {
    display: block;
    animation: nlSlideReveal 0.4s ease;
}

.ng-link-studio .nl-preview-frame {
    position: relative;
    background: var(--nl-void);
    border-radius: 14px;
    overflow: hidden;
}

/* Holographic Corners */
.ng-link-studio .nl-holo-corner {
    position: absolute;
    width: 30px;
    height: 30px;
    z-index: 10;
    pointer-events: none;
}

.ng-link-studio .nl-holo-corner::before,
.ng-link-studio .nl-holo-corner::after {
    content: '';
    position: absolute;
    background: var(--nl-cyan);
    box-shadow: var(--nl-glow-sm) var(--nl-cyan);
}

.ng-link-studio .nl-holo-corner.tl { top: 0; left: 0; }
.ng-link-studio .nl-holo-corner.tl::before { width: 24px; height: 2px; top: 0; left: 0; }
.ng-link-studio .nl-holo-corner.tl::after { width: 2px; height: 24px; top: 0; left: 0; }

.ng-link-studio .nl-holo-corner.tr { top: 0; right: 0; }
.ng-link-studio .nl-holo-corner.tr::before { width: 24px; height: 2px; top: 0; right: 0; }
.ng-link-studio .nl-holo-corner.tr::after { width: 2px; height: 24px; top: 0; right: 0; }

.ng-link-studio .nl-holo-corner.bl { bottom: 0; left: 0; }
.ng-link-studio .nl-holo-corner.bl::before { width: 24px; height: 2px; bottom: 0; left: 0; }
.ng-link-studio .nl-holo-corner.bl::after { width: 2px; height: 24px; bottom: 0; left: 0; }

.ng-link-studio .nl-holo-corner.br { bottom: 0; right: 0; }
.ng-link-studio .nl-holo-corner.br::before { width: 24px; height: 2px; bottom: 0; right: 0; }
.ng-link-studio .nl-holo-corner.br::after { width: 2px; height: 24px; bottom: 0; right: 0; }

.ng-link-studio .nl-preview-container {
    position: relative;
    aspect-ratio: 16/9;
}

.ng-link-studio .nl-preview-container.vertical {
    aspect-ratio: 9/16;
    max-height: 400px;
}

.ng-link-studio .nl-preview-container iframe {
    width: 100%;
    height: 100%;
    border: none;
}

/* Loader */
.ng-link-studio .nl-preview-loader {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: var(--nl-void);
    gap: 16px;
}

.ng-link-studio .nl-preview-loader.hidden {
    display: none;
}

.ng-link-studio .nl-scanner-ring {
    width: 60px;
    height: 60px;
    border: 2px solid rgba(99, 102, 241, 0.2);
    border-top-color: var(--nl-indigo);
    border-radius: 50%;
    animation: nlScannerSpin 1s linear infinite;
    position: relative;
}

.ng-link-studio .nl-scanner-ring::before {
    content: '';
    position: absolute;
    inset: 6px;
    border: 2px solid rgba(34, 211, 238, 0.2);
    border-top-color: var(--nl-cyan);
    border-radius: 50%;
    animation: nlScannerSpin 0.8s linear infinite reverse;
}

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

.ng-link-studio .nl-loader-text {
    font-family: 'JetBrains Mono', monospace;
    font-size: 11px;
    color: var(--nl-text-muted);
    letter-spacing: 2px;
}

/* Link Card Fallback */
.ng-link-studio .nl-link-card {
    display: none;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 36px 24px;
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.1) 0%, rgba(34, 211, 238, 0.05) 50%, rgba(168, 85, 247, 0.1) 100%);
    border-radius: 14px;
    border: 1px solid rgba(99, 102, 241, 0.3);
    text-align: center;
    gap: 16px;
    min-height: 260px;
}

.ng-link-studio .nl-link-card.active {
    display: flex;
}

.ng-link-studio .nl-link-card-icon {
    width: 70px;
    height: 70px;
    border-radius: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 32px;
    color: white;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
}

.ng-link-studio .nl-link-card-icon.youtube { background: linear-gradient(135deg, #FF0000, #CC0000); }
.ng-link-studio .nl-link-card-icon.tiktok { background: linear-gradient(135deg, #EE1D52, #69C9D0); }
.ng-link-studio .nl-link-card-icon.instagram { background: linear-gradient(135deg, #F58529, #DD2A7B, #8134AF); }
.ng-link-studio .nl-link-card-icon.twitter { background: #000; border: 1px solid rgba(255,255,255,0.2); }
.ng-link-studio .nl-link-card-icon.facebook { background: linear-gradient(135deg, #1877F2, #0C5DC7); }
.ng-link-studio .nl-link-card-icon.vimeo { background: linear-gradient(135deg, #1AB7EA, #0D8DC2); }
.ng-link-studio .nl-link-card-icon.twitch { background: linear-gradient(135deg, #9146FF, #6441A5); }
.ng-link-studio .nl-link-card-icon.spotify { background: linear-gradient(135deg, #1DB954, #169C46); }

.ng-link-studio .nl-link-card-platform {
    font-family: 'Orbitron', monospace;
    font-size: 16px;
    font-weight: 600;
    color: var(--nl-text);
}

.ng-link-studio .nl-link-card-id {
    font-family: 'JetBrains Mono', monospace;
    font-size: 11px;
    color: var(--nl-cyan);
    padding: 6px 14px;
    background: rgba(0, 0, 0, 0.3);
    border-radius: 6px;
    border: 1px solid rgba(34, 211, 238, 0.3);
}

.ng-link-studio .nl-link-card-action {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 24px;
    background: linear-gradient(135deg, var(--nl-indigo), var(--nl-purple));
    border: none;
    border-radius: 24px;
    font-family: 'Exo 2', sans-serif;
    font-size: 13px;
    font-weight: 600;
    color: white;
    text-decoration: none;
    cursor: pointer;
    transition: all 0.3s ease;
}

.ng-link-studio .nl-link-card-action:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(99, 102, 241, 0.4);
}

.ng-link-studio .nl-link-card-note {
    font-size: 10px;
    color: var(--nl-text-muted);
    max-width: 240px;
    line-height: 1.5;
}

/* Caption Input */
.ng-link-studio .nl-caption-input {
    width: 100%;
    min-height: 80px;
    background: var(--nl-void);
    border: 2px solid rgba(99, 102, 241, 0.2);
    border-radius: 12px;
    padding: 14px;
    font-family: 'Exo 2', sans-serif;
    font-size: 14px;
    color: var(--nl-text);
    resize: none;
    transition: all 0.3s ease;
    line-height: 1.5;
}

.ng-link-studio .nl-caption-input::placeholder {
    color: var(--nl-text-muted);
}

.ng-link-studio .nl-caption-input:focus {
    outline: none;
    border-color: var(--nl-indigo);
    box-shadow: var(--nl-glow-sm) var(--nl-indigo), inset 0 0 16px rgba(99, 102, 241, 0.05);
}

.ng-link-studio .nl-caption-toolbar {
    display: flex;
    justify-content: flex-start;
    margin-top: 10px;
}

.ng-link-studio .nl-caption-actions {
    display: flex;
    gap: 6px;
}

.ng-link-studio .nl-action-btn {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    background: var(--nl-card);
    border: 1px solid rgba(99, 102, 241, 0.2);
    color: var(--nl-text-muted);
    font-size: 14px;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.ng-link-studio .nl-action-btn:hover {
    border-color: var(--nl-indigo);
    color: var(--nl-indigo-bright);
    background: rgba(99, 102, 241, 0.1);
}

/* Category Pills */
.ng-link-studio .nl-category-pills {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.ng-link-studio .nl-category-pill {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 10px 16px;
    background: var(--nl-card);
    border: 2px solid rgba(99, 102, 241, 0.15);
    border-radius: 24px;
    cursor: pointer;
    transition: all 0.3s ease;
    font-family: 'Exo 2', sans-serif;
    font-size: 12px;
    font-weight: 500;
    color: var(--nl-text-muted);
}

.ng-link-studio .nl-category-pill:hover {
    border-color: rgba(99, 102, 241, 0.4);
    color: var(--nl-text);
}

.ng-link-studio .nl-category-pill.selected {
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.2), rgba(34, 211, 238, 0.1));
    border-color: var(--nl-indigo);
    color: var(--nl-text);
    box-shadow: var(--nl-glow-sm) var(--nl-indigo);
}

.ng-link-studio .nl-category-pill i {
    font-size: 12px;
    opacity: 0.7;
}

.ng-link-studio .nl-category-pill.selected i {
    opacity: 1;
    color: var(--nl-cyan);
}

/* Publish Section */
.ng-link-studio .nl-publish-section {
    padding: 16px 20px 32px;
}

.ng-link-studio .nl-publish-btn {
    width: 100%;
    height: 56px;
    border-radius: 14px;
    background: linear-gradient(135deg, var(--nl-indigo-dim), var(--nl-indigo), var(--nl-purple));
    background-size: 200% 200%;
    border: none;
    font-family: 'Orbitron', monospace;
    font-size: 14px;
    font-weight: 700;
    color: white;
    letter-spacing: 3px;
    cursor: pointer;
    transition: all 0.4s ease;
    animation: nlPublishGradient 4s ease infinite;
    position: relative;
    overflow: hidden;
}

@keyframes nlPublishGradient {
    0%, 100% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
}

.ng-link-studio .nl-publish-btn::before {
    content: '';
    position: absolute;
    inset: -2px;
    border-radius: 16px;
    background: linear-gradient(135deg, var(--nl-indigo), var(--nl-cyan), var(--nl-purple), var(--nl-indigo));
    background-size: 300% 300%;
    z-index: -1;
    opacity: 0;
    transition: opacity 0.4s ease;
    animation: nlBorderGlow 3s ease infinite;
    filter: blur(6px);
}

@keyframes nlBorderGlow {
    0%, 100% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
}

.ng-link-studio .nl-publish-btn:hover::before {
    opacity: 1;
}

.ng-link-studio .nl-publish-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 32px rgba(99, 102, 241, 0.4);
}

.ng-link-studio .nl-publish-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
    transform: none;
    animation: none;
}

.ng-link-studio .nl-publish-btn:disabled::before {
    display: none;
}

.ng-link-studio .nl-publish-btn i {
    margin-right: 10px;
}

/* ═══════════════════════════════════════════════════════════════════════════
   LINK POST TYPE IN FEED - Platform-Specific Cyberpunk Themes
   "Every stream has its signature. Every feed has its soul."
   ═══════════════════════════════════════════════════════════════════════════ */

/* Platform color variables */
.ng-post.type-link {
    --yt-red: #FF0000;
    --tt-pink: #EE1D52;
    --tt-cyan: #69C9D0;
    --fb-blue: #1877F2;
    --ig-orange: #F58529;
    --ig-pink: #DD2A7B;
    --ig-purple: #8134AF;
    --tw-black: #000000;
    --vm-blue: #1AB7EA;
    --twitch-purple: #9146FF;
    --sp-green: #1DB954;
    --holo-cyan: #00f0ff;
}

/* Base Link Media Container */
.ng-link-media {
    position: relative;
    width: 100%;
    overflow: hidden;
    border-radius: 12px;
    background: #030305;
}

.ng-link-media iframe {
    width: 100%;
    aspect-ratio: 16/9;
    border: none;
    display: block;
}

/* Platform Badge */
.ng-link-badge {
    position: absolute;
    top: 12px;
    left: 12px;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 12px;
    border-radius: 20px;
    font-family: 'Orbitron', monospace;
    font-size: 9px;
    font-weight: 600;
    letter-spacing: 2px;
    z-index: 20;
    backdrop-filter: blur(10px);
    color: white;
}

/* Tech Label */
.ng-link-tech-label {
    position: absolute;
    bottom: 12px;
    right: 12px;
    font-family: 'JetBrains Mono', monospace;
    font-size: 8px;
    letter-spacing: 2px;
    padding: 4px 10px;
    border-radius: 4px;
    z-index: 20;
    backdrop-filter: blur(10px);
}

/* Holographic Corners */
.ng-link-holo-corner {
    position: absolute;
    width: 20px;
    height: 20px;
    z-index: 15;
    pointer-events: none;
}

.ng-link-holo-corner::before,
.ng-link-holo-corner::after {
    content: '';
    position: absolute;
}

.ng-link-holo-corner.tl { top: 8px; left: 8px; }
.ng-link-holo-corner.tr { top: 8px; right: 8px; }
.ng-link-holo-corner.bl { bottom: 8px; left: 8px; }
.ng-link-holo-corner.br { bottom: 8px; right: 8px; }

.ng-link-holo-corner.tl::before { width: 16px; height: 2px; top: 0; left: 0; }
.ng-link-holo-corner.tl::after { width: 2px; height: 16px; top: 0; left: 0; }
.ng-link-holo-corner.tr::before { width: 16px; height: 2px; top: 0; right: 0; }
.ng-link-holo-corner.tr::after { width: 2px; height: 16px; top: 0; right: 0; }
.ng-link-holo-corner.bl::before { width: 16px; height: 2px; bottom: 0; left: 0; }
.ng-link-holo-corner.bl::after { width: 2px; height: 16px; bottom: 0; left: 0; }
.ng-link-holo-corner.br::before { width: 16px; height: 2px; bottom: 0; right: 0; }
.ng-link-holo-corner.br::after { width: 2px; height: 16px; bottom: 0; right: 0; }

/* Scanlines Overlay */
.ng-link-scanlines {
    position: absolute;
    inset: 0;
    background: repeating-linear-gradient(
        0deg,
        transparent,
        transparent 2px,
        rgba(0, 0, 0, 0.15) 2px,
        rgba(0, 0, 0, 0.15) 4px
    );
    pointer-events: none;
    z-index: 10;
    opacity: 0.4;
}

/* ═══════════════════════════════════════════════════════════════
   YOUTUBE - SURVEILLANCE_STREAM
   ═══════════════════════════════════════════════════════════════ */

.ng-post.type-link[data-platform="youtube"] {
    --element-gradient: linear-gradient(135deg, #FF0000, #CC0000);
    --element-primary: #FF0000;
    border-color: rgba(255, 0, 0, 0.3);
    box-shadow: 0 0 30px rgba(255, 0, 0, 0.15), inset 0 0 60px rgba(255, 0, 0, 0.03);
}

.ng-post.type-link[data-platform="youtube"]:hover {
    box-shadow: 0 0 50px rgba(255, 0, 0, 0.25), inset 0 0 80px rgba(255, 0, 0, 0.05);
}

.ng-post.type-link[data-platform="youtube"] .ng-link-media::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 50% 50%, transparent 0%, transparent 30%, rgba(255, 0, 0, 0.08) 100%);
    z-index: 5;
    pointer-events: none;
}

/* Radar sweep effect */
.ng-post.type-link[data-platform="youtube"] .ng-link-media::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 200%;
    height: 200%;
    background: conic-gradient(from 0deg, transparent 0%, transparent 25%, rgba(255, 0, 0, 0.15) 30%, transparent 35%);
    transform: translate(-50%, -50%);
    animation: ytRadarSweep 4s linear infinite;
    z-index: 6;
    pointer-events: none;
    opacity: 0.5;
}

@keyframes ytRadarSweep {
    to { transform: translate(-50%, -50%) rotate(360deg); }
}

.ng-post.type-link[data-platform="youtube"] .ng-link-badge {
    background: linear-gradient(135deg, rgba(255, 0, 0, 0.9), rgba(204, 0, 0, 0.9));
    box-shadow: 0 0 20px rgba(255, 0, 0, 0.5);
}

.ng-post.type-link[data-platform="youtube"] .ng-link-tech-label {
    background: rgba(255, 0, 0, 0.2);
    color: #FF0000;
    border: 1px solid rgba(255, 0, 0, 0.4);
}

.ng-post.type-link[data-platform="youtube"] .ng-link-holo-corner::before,
.ng-post.type-link[data-platform="youtube"] .ng-link-holo-corner::after {
    background: #FF0000;
    box-shadow: 0 0 8px #FF0000;
}

/* ═══════════════════════════════════════════════════════════════
   TIKTOK - VIRAL_GLITCH
   ═══════════════════════════════════════════════════════════════ */

.ng-post.type-link[data-platform="tiktok"] {
    --element-gradient: linear-gradient(135deg, #EE1D52, #69C9D0);
    --element-primary: #EE1D52;
    border-color: rgba(238, 29, 82, 0.3);
    box-shadow: -3px 0 20px rgba(238, 29, 82, 0.2), 3px 0 20px rgba(105, 201, 208, 0.2);
}

.ng-post.type-link[data-platform="tiktok"]:hover {
    box-shadow: -5px 0 35px rgba(238, 29, 82, 0.3), 5px 0 35px rgba(105, 201, 208, 0.3);
}

.ng-post.type-link[data-platform="tiktok"] .ng-link-media iframe {
    aspect-ratio: 9/16;
    max-height: 450px;
}

/* Glitch split effect */
.ng-post.type-link[data-platform="tiktok"] .ng-link-media::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg,
        rgba(238, 29, 82, 0.08) 0%,
        transparent 30%,
        transparent 70%,
        rgba(105, 201, 208, 0.08) 100%);
    z-index: 5;
    pointer-events: none;
    animation: ttGlitchShift 0.5s ease-in-out infinite alternate;
}

@keyframes ttGlitchShift {
    0% { transform: translateX(-2px); }
    100% { transform: translateX(2px); }
}

/* Musical notes */
.ng-tiktok-notes {
    position: absolute;
    inset: 0;
    overflow: hidden;
    z-index: 8;
    pointer-events: none;
}

.ng-tiktok-note {
    position: absolute;
    font-size: 14px;
    opacity: 0;
    animation: ttNoteFloat 3s ease-in-out infinite;
}

.ng-tiktok-note:nth-child(1) { left: 10%; animation-delay: 0s; color: #EE1D52; }
.ng-tiktok-note:nth-child(2) { left: 30%; animation-delay: 0.6s; color: #69C9D0; }
.ng-tiktok-note:nth-child(3) { left: 50%; animation-delay: 1.2s; color: #EE1D52; }
.ng-tiktok-note:nth-child(4) { left: 70%; animation-delay: 1.8s; color: #69C9D0; }
.ng-tiktok-note:nth-child(5) { left: 90%; animation-delay: 2.4s; color: #EE1D52; }

@keyframes ttNoteFloat {
    0% { transform: translateY(100%) rotate(0deg); opacity: 0; }
    20% { opacity: 0.8; }
    80% { opacity: 0.6; }
    100% { transform: translateY(-100%) rotate(360deg); opacity: 0; }
}

.ng-post.type-link[data-platform="tiktok"] .ng-link-badge {
    background: linear-gradient(135deg, #EE1D52, #69C9D0);
    box-shadow: -2px 0 15px rgba(238, 29, 82, 0.5), 2px 0 15px rgba(105, 201, 208, 0.5);
}

.ng-post.type-link[data-platform="tiktok"] .ng-link-tech-label {
    background: rgba(238, 29, 82, 0.2);
    color: #EE1D52;
    border: 1px solid rgba(238, 29, 82, 0.4);
}

.ng-post.type-link[data-platform="tiktok"] .ng-link-holo-corner::before {
    background: #EE1D52;
    box-shadow: 0 0 8px #EE1D52;
}

.ng-post.type-link[data-platform="tiktok"] .ng-link-holo-corner::after {
    background: #69C9D0;
    box-shadow: 0 0 8px #69C9D0;
}

/* ═══════════════════════════════════════════════════════════════
   VIMEO - CINEMA_FEED
   ═══════════════════════════════════════════════════════════════ */

.ng-post.type-link[data-platform="vimeo"] {
    --element-gradient: linear-gradient(135deg, #1AB7EA, #0D8DC2);
    --element-primary: #1AB7EA;
    border-color: rgba(26, 183, 234, 0.3);
    box-shadow: 0 0 30px rgba(26, 183, 234, 0.15);
}

.ng-post.type-link[data-platform="vimeo"]:hover {
    box-shadow: 0 0 50px rgba(26, 183, 234, 0.25);
}

/* Film grain */
.ng-post.type-link[data-platform="vimeo"] .ng-link-media::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
    opacity: 0.04;
    z-index: 5;
    pointer-events: none;
    mix-blend-mode: overlay;
}

/* Cinematic bars */
.ng-vimeo-bar {
    position: absolute;
    left: 0;
    right: 0;
    height: 24px;
    background: #000;
    z-index: 8;
}

.ng-vimeo-bar.top { top: 0; }
.ng-vimeo-bar.bottom { bottom: 0; }

.ng-post.type-link[data-platform="vimeo"] .ng-link-badge {
    background: linear-gradient(135deg, #1AB7EA, #0D8DC2);
    box-shadow: 0 0 20px rgba(26, 183, 234, 0.5);
}

.ng-post.type-link[data-platform="vimeo"] .ng-link-tech-label {
    background: rgba(26, 183, 234, 0.2);
    color: #1AB7EA;
    border: 1px solid rgba(26, 183, 234, 0.4);
}

.ng-post.type-link[data-platform="vimeo"] .ng-link-holo-corner::before,
.ng-post.type-link[data-platform="vimeo"] .ng-link-holo-corner::after {
    background: #1AB7EA;
    box-shadow: 0 0 8px #1AB7EA;
}

/* ═══════════════════════════════════════════════════════════════
   TWITCH - LIVE_STREAM
   ═══════════════════════════════════════════════════════════════ */

.ng-post.type-link[data-platform="twitch"] {
    --element-gradient: linear-gradient(135deg, #9146FF, #6441A5);
    --element-primary: #9146FF;
    border-color: rgba(145, 70, 255, 0.3);
    box-shadow: 0 0 30px rgba(145, 70, 255, 0.2);
}

.ng-post.type-link[data-platform="twitch"]:hover {
    box-shadow: 0 0 50px rgba(145, 70, 255, 0.35);
}

/* Gaming HUD frame */
.ng-post.type-link[data-platform="twitch"] .ng-link-media::before {
    content: '';
    position: absolute;
    inset: 8px;
    border: 2px solid rgba(145, 70, 255, 0.35);
    border-radius: 4px;
    z-index: 8;
    pointer-events: none;
}

/* Live badge */
.ng-twitch-live {
    position: absolute;
    top: 16px;
    right: 16px;
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 4px 12px;
    background: #eb0400;
    border-radius: 4px;
    font-family: 'Orbitron', monospace;
    font-size: 9px;
    font-weight: 700;
    color: white;
    z-index: 20;
    animation: twitchLivePulse 1.5s ease-in-out infinite;
}

.ng-twitch-live::before {
    content: '';
    width: 6px;
    height: 6px;
    background: white;
    border-radius: 50%;
}

@keyframes twitchLivePulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.7; }
}

.ng-post.type-link[data-platform="twitch"] .ng-link-badge {
    background: linear-gradient(135deg, #9146FF, #6441A5);
    box-shadow: 0 0 20px rgba(145, 70, 255, 0.5);
}

.ng-post.type-link[data-platform="twitch"] .ng-link-tech-label {
    background: rgba(145, 70, 255, 0.2);
    color: #9146FF;
    border: 1px solid rgba(145, 70, 255, 0.4);
}

.ng-post.type-link[data-platform="twitch"] .ng-link-holo-corner::before,
.ng-post.type-link[data-platform="twitch"] .ng-link-holo-corner::after {
    background: #9146FF;
    box-shadow: 0 0 8px #9146FF;
}

/* ═══════════════════════════════════════════════════════════════
   SPOTIFY - AUDIO_PULSE
   ═══════════════════════════════════════════════════════════════ */

.ng-post.type-link[data-platform="spotify"] {
    --element-gradient: linear-gradient(135deg, #1DB954, #169C46);
    --element-primary: #1DB954;
    border-color: rgba(29, 185, 84, 0.3);
    box-shadow: 0 0 30px rgba(29, 185, 84, 0.15);
}

.ng-post.type-link[data-platform="spotify"]:hover {
    box-shadow: 0 0 50px rgba(29, 185, 84, 0.25);
}

/* ═══════════════════════════════════════════════════════════════
   LINK CARDS (Facebook, Instagram, Twitter - no iframe)
   ═══════════════════════════════════════════════════════════════ */

.ng-link-card {
    position: relative;
    padding: 32px 20px;
    min-height: 180px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    overflow: hidden;
    border-radius: 12px;
}

.ng-link-card-icon {
    width: 70px;
    height: 70px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 30px;
    color: white;
    margin-bottom: 16px;
    position: relative;
    z-index: 5;
    animation: linkIconGlow 2s ease-in-out infinite;
}

@keyframes linkIconGlow {
    0%, 100% { box-shadow: 0 0 25px currentColor; }
    50% { box-shadow: 0 0 45px currentColor, 0 0 70px currentColor; }
}

.ng-link-card-title {
    font-family: 'Orbitron', monospace;
    font-size: 15px;
    font-weight: 600;
    color: white;
    margin-bottom: 12px;
    position: relative;
    z-index: 5;
}

.ng-link-card-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 22px;
    border: none;
    border-radius: 22px;
    color: white;
    font-family: 'Exo 2', sans-serif;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    position: relative;
    z-index: 5;
    transition: all 0.3s ease;
    text-decoration: none;
}

.ng-link-card-btn:hover {
    transform: scale(1.05);
}

/* FACEBOOK Card */
.ng-post.type-link[data-platform="facebook"] {
    --element-gradient: linear-gradient(135deg, #1877F2, #0C5DC7);
    --element-primary: #1877F2;
    border-color: rgba(24, 119, 242, 0.3);
    box-shadow: 0 0 30px rgba(24, 119, 242, 0.15);
}

.ng-post.type-link[data-platform="facebook"] .ng-link-card {
    background: linear-gradient(135deg, rgba(24, 119, 242, 0.08) 0%, rgba(12, 93, 199, 0.04) 100%);
}

/* Data matrix background */
.ng-post.type-link[data-platform="facebook"] .ng-link-card::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none'%3E%3Cg fill='%231877F2' fill-opacity='0.06'%3E%3Ccircle cx='30' cy='30' r='2'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
    animation: fbMatrixScroll 20s linear infinite;
}

@keyframes fbMatrixScroll {
    to { background-position: 60px 60px; }
}

.ng-post.type-link[data-platform="facebook"] .ng-link-card-icon {
    background: linear-gradient(135deg, #1877F2, #0C5DC7);
    color: #1877F2;
}

.ng-post.type-link[data-platform="facebook"] .ng-link-card-btn {
    background: linear-gradient(135deg, #1877F2, #0C5DC7);
}

.ng-post.type-link[data-platform="facebook"] .ng-link-card-btn:hover {
    box-shadow: 0 0 25px rgba(24, 119, 242, 0.6);
}

.ng-post.type-link[data-platform="facebook"] .ng-link-badge {
    background: linear-gradient(135deg, #1877F2, #0C5DC7);
    box-shadow: 0 0 20px rgba(24, 119, 242, 0.5);
}

.ng-post.type-link[data-platform="facebook"] .ng-link-tech-label {
    background: rgba(24, 119, 242, 0.2);
    color: #1877F2;
    border: 1px solid rgba(24, 119, 242, 0.4);
}

.ng-post.type-link[data-platform="facebook"] .ng-link-holo-corner::before,
.ng-post.type-link[data-platform="facebook"] .ng-link-holo-corner::after {
    background: #1877F2;
    box-shadow: 0 0 8px #1877F2;
}

/* INSTAGRAM Card */
.ng-post.type-link[data-platform="instagram"] {
    --element-gradient: linear-gradient(135deg, #F58529, #DD2A7B, #8134AF);
    --element-primary: #DD2A7B;
    border: 2px solid transparent;
    background: linear-gradient(var(--ng-void-deep, #050510), var(--ng-void-deep, #050510)) padding-box,
                linear-gradient(135deg, #F58529, #DD2A7B, #8134AF) border-box;
    box-shadow: 0 0 30px rgba(221, 42, 123, 0.15);
}

.ng-post.type-link[data-platform="instagram"] .ng-link-card {
    background: transparent;
}

/* Holographic shimmer */
.ng-post.type-link[data-platform="instagram"] .ng-link-card::before {
    content: '';
    position: absolute;
    inset: -50%;
    background: conic-gradient(
        from 0deg,
        transparent 0%,
        rgba(245, 133, 41, 0.2) 10%,
        transparent 20%,
        rgba(221, 42, 123, 0.2) 30%,
        transparent 40%,
        rgba(129, 52, 175, 0.2) 50%,
        transparent 60%
    );
    animation: igHoloSpin 8s linear infinite;
    opacity: 0.4;
}

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

.ng-post.type-link[data-platform="instagram"] .ng-link-card-icon {
    background: linear-gradient(135deg, #F58529, #DD2A7B, #8134AF);
    border-radius: 18px;
    color: #DD2A7B;
}

.ng-post.type-link[data-platform="instagram"] .ng-link-card-title {
    background: linear-gradient(135deg, #F58529, #DD2A7B);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.ng-post.type-link[data-platform="instagram"] .ng-link-card-btn {
    background: linear-gradient(135deg, #F58529, #DD2A7B, #8134AF);
}

.ng-post.type-link[data-platform="instagram"] .ng-link-card-btn:hover {
    box-shadow: 0 0 25px rgba(221, 42, 123, 0.6);
}

.ng-post.type-link[data-platform="instagram"] .ng-link-badge {
    background: linear-gradient(135deg, #F58529, #DD2A7B, #8134AF);
    box-shadow: 0 0 20px rgba(221, 42, 123, 0.5);
}

.ng-post.type-link[data-platform="instagram"] .ng-link-tech-label {
    background: rgba(221, 42, 123, 0.2);
    color: #DD2A7B;
    border: 1px solid rgba(221, 42, 123, 0.4);
}

.ng-post.type-link[data-platform="instagram"] .ng-link-holo-corner::before {
    background: #F58529;
    box-shadow: 0 0 8px #F58529;
}

.ng-post.type-link[data-platform="instagram"] .ng-link-holo-corner::after {
    background: #8134AF;
    box-shadow: 0 0 8px #8134AF;
}

/* TWITTER/X Card */
.ng-post.type-link[data-platform="twitter"] {
    --element-gradient: linear-gradient(135deg, #000, #222);
    --element-primary: #ffffff;
    border-color: rgba(255, 255, 255, 0.2);
    box-shadow: 0 0 30px rgba(255, 255, 255, 0.05);
}

.ng-post.type-link[data-platform="twitter"] .ng-link-card {
    background: #000;
}

/* Signal waves */
.ng-post.type-link[data-platform="twitter"] .ng-link-card::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 250px;
    height: 250px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 50%;
    transform: translate(-50%, -50%);
    animation: twSignalExpand 3s ease-out infinite;
}

.ng-post.type-link[data-platform="twitter"] .ng-link-card::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 250px;
    height: 250px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 50%;
    transform: translate(-50%, -50%);
    animation: twSignalExpand 3s ease-out infinite 1s;
}

@keyframes twSignalExpand {
    0% { width: 80px; height: 80px; opacity: 0.6; }
    100% { width: 350px; height: 350px; opacity: 0; }
}

.ng-post.type-link[data-platform="twitter"] .ng-link-card-icon {
    background: #000;
    border: 2px solid white;
    color: white;
}

.ng-post.type-link[data-platform="twitter"] .ng-link-card-btn {
    background: white;
    color: black;
}

.ng-post.type-link[data-platform="twitter"] .ng-link-card-btn:hover {
    box-shadow: 0 0 25px rgba(255, 255, 255, 0.4);
}

.ng-post.type-link[data-platform="twitter"] .ng-link-badge {
    background: #000;
    border: 1px solid rgba(255, 255, 255, 0.3);
}

.ng-post.type-link[data-platform="twitter"] .ng-link-tech-label {
    background: rgba(255, 255, 255, 0.1);
    color: white;
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.ng-post.type-link[data-platform="twitter"] .ng-link-holo-corner::before,
.ng-post.type-link[data-platform="twitter"] .ng-link-holo-corner::after {
    background: white;
    box-shadow: 0 0 8px rgba(255, 255, 255, 0.5);
}

/* Responsive */
@media (max-width: 400px) {
    .ng-link-studio .nl-platforms-grid {
        gap: 6px;
    }

    .ng-link-studio .nl-platform-node {
        padding: 10px 4px;
    }

    .ng-link-studio .nl-node-icon {
        width: 34px;
        height: 34px;
        font-size: 15px;
    }

    .ng-link-studio .nl-header-title h1 {
        font-size: 15px;
        letter-spacing: 2px;
    }

    .ng-link-studio .nl-category-pills {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
    }

    .ng-link-card {
        padding: 24px 16px;
        min-height: 160px;
    }

    .ng-link-card-icon {
        width: 60px;
        height: 60px;
        font-size: 26px;
    }
}


/* =====================================================
   NAVESAGRAM PROFILE PAGE - CYBERPUNK THEME
   ===================================================== */

/* Theme Color Variables */
.ng-profile-view[data-theme="cyan"] { --ng-profile-primary: #00F0FF; --ng-profile-primary-dim: rgba(0, 240, 255, 0.3); }
.ng-profile-view[data-theme="magenta"] { --ng-profile-primary: #FF00FF; --ng-profile-primary-dim: rgba(255, 0, 255, 0.3); }
.ng-profile-view[data-theme="green"] { --ng-profile-primary: #10B981; --ng-profile-primary-dim: rgba(16, 185, 129, 0.3); }
.ng-profile-view[data-theme="orange"] { --ng-profile-primary: #F97316; --ng-profile-primary-dim: rgba(249, 115, 22, 0.3); }
.ng-profile-view[data-theme="purple"] { --ng-profile-primary: #A855F7; --ng-profile-primary-dim: rgba(168, 85, 247, 0.3); }

.ng-profile-view {
    --ng-profile-primary: #00F0FF;
    --ng-profile-primary-dim: rgba(0, 240, 255, 0.3);
    --ng-profile-void: #050510;
    --ng-profile-void-light: #0a0a1a;
    --ng-profile-void-lighter: #12122a;
    --ng-profile-gold: #FFD700;

    min-height: 100vh;
    padding: 20px;
    padding-bottom: 100px;
    position: relative;
    background: var(--ng-profile-void);
}

/* Background Circuit Grid */
.ng-profile-bg-circuit {
    position: fixed;
    inset: 0;
    background-image:
        linear-gradient(90deg, rgba(0, 240, 255, 0.03) 1px, transparent 1px),
        linear-gradient(rgba(0, 240, 255, 0.03) 1px, transparent 1px);
    background-size: 50px 50px;
    pointer-events: none;
    z-index: 0;
}

/* Particles */
.ng-profile-particles {
    position: fixed;
    inset: 0;
    pointer-events: none;
    overflow: hidden;
    z-index: 0;
}

.ng-profile-particle {
    position: absolute;
    width: 3px;
    height: 3px;
    background: var(--ng-profile-primary);
    border-radius: 50%;
    opacity: 0.5;
    animation: ngProfileParticleFloat 15s linear infinite;
}

@keyframes ngProfileParticleFloat {
    0% { transform: translateY(100vh) rotate(0deg); opacity: 0; }
    10% { opacity: 0.5; }
    90% { opacity: 0.5; }
    100% { transform: translateY(-100vh) rotate(720deg); opacity: 0; }
}

/* Profile Header Card */
.ng-profile-header {
    position: relative;
    padding: 30px 20px;
    background: linear-gradient(180deg, var(--ng-profile-void-lighter) 0%, var(--ng-profile-void) 100%);
    border: 1px solid var(--ng-profile-primary-dim);
    border-radius: 20px;
    margin-bottom: 20px;
    overflow: hidden;
    z-index: 1;
}

.ng-profile-header::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--ng-profile-primary), #FF00FF, transparent);
}

.ng-profile-tech-label {
    position: absolute;
    top: 10px;
    left: 15px;
    font-family: 'Share Tech Mono', 'Courier New', monospace;
    font-size: 10px;
    color: var(--ng-profile-primary);
    opacity: 0.5;
    letter-spacing: 2px;
}

/* Corner Brackets */
.ng-profile-corner {
    position: absolute;
    width: 20px;
    height: 20px;
    border: 2px solid var(--ng-profile-primary);
    opacity: 0.6;
}
.ng-profile-corner.tl { top: 5px; left: 5px; border-right: none; border-bottom: none; }
.ng-profile-corner.tr { top: 5px; right: 5px; border-left: none; border-bottom: none; }
.ng-profile-corner.bl { bottom: 5px; left: 5px; border-right: none; border-top: none; }
.ng-profile-corner.br { bottom: 5px; right: 5px; border-left: none; border-top: none; }

/* Avatar */
.ng-profile-avatar-container {
    position: relative;
    width: 120px;
    height: 120px;
    margin: 0 auto 20px;
}

.ng-profile-avatar-glow {
    position: absolute;
    inset: -15px;
    border-radius: 50%;
    background: radial-gradient(circle, var(--ng-profile-primary) 0%, transparent 70%);
    opacity: 0.3;
    animation: ngProfileAvatarPulse 2s ease-in-out infinite;
}

@keyframes ngProfileAvatarPulse {
    0%, 100% { transform: scale(1); opacity: 0.3; }
    50% { transform: scale(1.1); opacity: 0.5; }
}

.ng-profile-avatar-ring {
    position: absolute;
    inset: -5px;
    border-radius: 50%;
    background: conic-gradient(from 0deg, var(--ng-profile-primary), #FF00FF, #A855F7, var(--ng-profile-primary));
    animation: ngProfileRingRotate 4s linear infinite;
    opacity: 0.8;
}

.ng-profile-avatar-ring::before {
    content: '';
    position: absolute;
    inset: 3px;
    background: var(--ng-profile-void);
    border-radius: 50%;
}

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

.ng-profile-avatar-image {
    position: relative;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    overflow: hidden;
    border: 3px solid var(--ng-profile-void);
    z-index: 2;
}

.ng-profile-avatar-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.ng-profile-avatar-image::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, transparent 0%, rgba(0, 240, 255, 0.2) 25%, rgba(255, 0, 255, 0.2) 50%, transparent 75%);
    background-size: 200% 200%;
    animation: ngProfileHoloShimmer 3s ease-in-out infinite;
}

@keyframes ngProfileHoloShimmer {
    0% { background-position: 200% 200%; }
    100% { background-position: -200% -200%; }
}

/* Online Status */
.ng-profile-online {
    position: absolute;
    bottom: 5px;
    right: 5px;
    width: 24px;
    height: 24px;
    background: var(--ng-profile-void);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 3;
}

.ng-profile-online-dot {
    width: 14px;
    height: 14px;
    background: #10B981;
    border-radius: 50%;
    animation: ngProfileOnlinePulse 1.5s ease-in-out infinite;
    box-shadow: 0 0 10px #10B981;
}

@keyframes ngProfileOnlinePulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.2); }
}

/* Username */
.ng-profile-username-container {
    text-align: center;
    margin-bottom: 10px;
}

.ng-profile-username {
    font-family: 'Orbitron', sans-serif;
    font-size: 24px;
    font-weight: 700;
    color: #E0E0E0;
    letter-spacing: 2px;
}

.ng-profile-handle {
    font-family: 'Share Tech Mono', monospace;
    font-size: 14px;
    color: var(--ng-profile-primary);
    opacity: 0.8;
}

/* Bio */
.ng-profile-bio {
    text-align: center;
    margin-bottom: 20px;
    padding: 0 20px;
}

.ng-profile-bio p {
    font-size: 14px;
    color: rgba(255, 255, 255, 0.6);
    line-height: 1.5;
}

/* Edit Button */
.ng-profile-edit-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin: 0 auto;
    padding: 10px 25px;
    background: transparent;
    border: 1px solid var(--ng-profile-primary);
    border-radius: 25px;
    color: var(--ng-profile-primary);
    font-family: 'Orbitron', sans-serif;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 2px;
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

.ng-profile-edit-btn::before {
    content: '';
    position: absolute;
    inset: 0;
    background: var(--ng-profile-primary);
    transform: translateX(-100%);
    transition: transform 0.3s ease;
    z-index: -1;
}

.ng-profile-edit-btn:hover::before {
    transform: translateX(0);
}

.ng-profile-edit-btn:hover {
    color: var(--ng-profile-void);
}

/* Stats Bar */
.ng-profile-stats-bar {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
    margin-bottom: 20px;
    position: relative;
    z-index: 1;
}

.ng-profile-stat-card {
    background: linear-gradient(135deg, var(--ng-profile-void-light) 0%, var(--ng-profile-void-lighter) 100%);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 15px;
    padding: 15px 10px;
    text-align: center;
    position: relative;
    overflow: hidden;
    transition: all 0.3s ease;
}

.ng-profile-stat-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: var(--ng-profile-primary);
    opacity: 0.5;
}

.ng-profile-stat-card:hover {
    transform: translateY(-3px);
    border-color: var(--ng-profile-primary);
    box-shadow: 0 5px 20px var(--ng-profile-primary-dim);
}

.ng-profile-stat-icon {
    font-size: 18px;
    color: var(--ng-profile-primary);
    margin-bottom: 8px;
}

.ng-profile-stat-value {
    font-family: 'Orbitron', sans-serif;
    font-size: 20px;
    font-weight: 700;
    color: #E0E0E0;
    line-height: 1;
}

.ng-profile-stat-label {
    font-size: 10px;
    color: rgba(255, 255, 255, 0.5);
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-top: 5px;
}

/* Level Section */
.ng-profile-level-section {
    background: linear-gradient(135deg, var(--ng-profile-void-light) 0%, var(--ng-profile-void-lighter) 100%);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 15px;
    padding: 20px;
    margin-bottom: 20px;
    position: relative;
    z-index: 1;
}

.ng-profile-level-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 15px;
}

.ng-profile-level-badge {
    display: flex;
    align-items: center;
    gap: 12px;
}

.ng-profile-level-icon {
    width: 50px;
    height: 50px;
    background: conic-gradient(from 0deg, var(--ng-profile-gold), #F97316, var(--ng-profile-gold));
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Orbitron', sans-serif;
    font-size: 20px;
    font-weight: 900;
    color: var(--ng-profile-void);
    animation: ngProfileLevelPulse 2s ease-in-out infinite;
}

@keyframes ngProfileLevelPulse {
    0%, 100% { box-shadow: 0 0 20px rgba(255, 215, 0, 0.3); }
    50% { box-shadow: 0 0 30px rgba(255, 215, 0, 0.6); }
}

.ng-profile-level-info h3 {
    font-family: 'Orbitron', sans-serif;
    font-size: 14px;
    font-weight: 600;
    color: #E0E0E0;
    margin: 0 0 3px 0;
}

.ng-profile-level-rank {
    font-family: 'Share Tech Mono', monospace;
    font-size: 11px;
    color: var(--ng-profile-gold);
    letter-spacing: 1px;
}

.ng-profile-level-reward {
    text-align: right;
}

.ng-profile-reward-label {
    font-size: 10px;
    color: rgba(255, 255, 255, 0.5);
    margin-bottom: 3px;
}

.ng-profile-reward-item {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 5px;
    font-size: 12px;
    color: #A855F7;
}

/* XP Bar */
.ng-profile-xp-container {
    position: relative;
}

.ng-profile-xp-bar {
    height: 8px;
    background: var(--ng-profile-void);
    border-radius: 4px;
    overflow: hidden;
}

.ng-profile-xp-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--ng-profile-primary), #FF00FF);
    border-radius: 4px;
    position: relative;
    transition: width 0.5s ease;
}

.ng-profile-xp-fill::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
    animation: ngProfileXpShine 2s ease-in-out infinite;
}

@keyframes ngProfileXpShine {
    0% { transform: translateX(-100%); }
    100% { transform: translateX(100%); }
}

.ng-profile-xp-text {
    display: flex;
    justify-content: space-between;
    margin-top: 8px;
    font-family: 'Share Tech Mono', monospace;
    font-size: 11px;
    color: rgba(255, 255, 255, 0.5);
}

/* Achievements Section */
.ng-profile-achievements {
    margin-bottom: 20px;
    position: relative;
    z-index: 1;
}

.ng-profile-section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 15px;
}

.ng-profile-section-title {
    font-family: 'Orbitron', sans-serif;
    font-size: 12px;
    font-weight: 600;
    color: #E0E0E0;
    letter-spacing: 2px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.ng-profile-section-title i {
    color: var(--ng-profile-primary);
}

.ng-profile-section-more {
    font-size: 12px;
    color: var(--ng-profile-primary);
    cursor: pointer;
    transition: opacity 0.3s;
}

.ng-profile-section-more:hover {
    opacity: 0.7;
}

.ng-profile-badges-grid {
    display: flex;
    gap: 12px;
    overflow-x: auto;
    padding: 10px 0;
    scrollbar-width: none;
}

.ng-profile-badges-grid::-webkit-scrollbar {
    display: none;
}

.ng-profile-badge {
    flex-shrink: 0;
    width: 70px;
    text-align: center;
    cursor: pointer;
    transition: transform 0.3s ease;
}

.ng-profile-badge:hover {
    transform: scale(1.1);
}

.ng-profile-badge-icon {
    width: 60px;
    height: 60px;
    border-radius: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    margin: 0 auto 8px;
    position: relative;
    overflow: hidden;
    background: var(--ng-profile-void-light);
    border: 2px solid rgba(255, 255, 255, 0.1);
    color: rgba(255, 255, 255, 0.2);
}

.ng-profile-badge.unlocked .ng-profile-badge-icon {
    background: linear-gradient(135deg, var(--ng-profile-void-lighter) 0%, var(--ng-profile-void-light) 100%);
}

.ng-profile-badge.unlocked.cyan .ng-profile-badge-icon { border-color: #00F0FF; box-shadow: 0 0 15px rgba(0, 240, 255, 0.3); color: #00F0FF; }
.ng-profile-badge.unlocked.magenta .ng-profile-badge-icon { border-color: #FF00FF; box-shadow: 0 0 15px rgba(255, 0, 255, 0.3); color: #FF00FF; }
.ng-profile-badge.unlocked.orange .ng-profile-badge-icon { border-color: #F97316; box-shadow: 0 0 15px rgba(249, 115, 22, 0.3); color: #F97316; }
.ng-profile-badge.unlocked.green .ng-profile-badge-icon { border-color: #10B981; box-shadow: 0 0 15px rgba(16, 185, 129, 0.3); color: #10B981; }
.ng-profile-badge.unlocked.purple .ng-profile-badge-icon { border-color: #A855F7; box-shadow: 0 0 15px rgba(168, 85, 247, 0.3); color: #A855F7; }
.ng-profile-badge.unlocked.gold .ng-profile-badge-icon { border-color: #FFD700; box-shadow: 0 0 15px rgba(255, 215, 0, 0.3); color: #FFD700; }

.ng-profile-badge.locked .ng-profile-badge-icon::after {
    content: '\f023';
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
    position: absolute;
    font-size: 12px;
    bottom: 5px;
    right: 5px;
    color: rgba(255, 255, 255, 0.3);
}

.ng-profile-badge-name {
    font-size: 10px;
    color: rgba(255, 255, 255, 0.5);
    line-height: 1.2;
}

/* Vibe Section */
.ng-profile-vibe {
    background: linear-gradient(135deg, var(--ng-profile-void-light) 0%, var(--ng-profile-void-lighter) 100%);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 15px;
    padding: 15px 20px;
    margin-bottom: 20px;
    position: relative;
    z-index: 1;
}

.ng-profile-vibe-current {
    display: flex;
    align-items: center;
    gap: 12px;
    cursor: pointer;
}

.ng-profile-vibe-emoji {
    font-size: 30px;
    animation: ngProfileVibeBounce 2s ease-in-out infinite;
}

@keyframes ngProfileVibeBounce {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-5px); }
}

.ng-profile-vibe-text {
    font-size: 14px;
    color: #E0E0E0;
}

.ng-profile-vibe-label {
    font-size: 10px;
    color: rgba(255, 255, 255, 0.5);
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* Content Tabs */
.ng-profile-tabs {
    display: flex;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    margin-bottom: 15px;
    position: relative;
    z-index: 1;
}

.ng-profile-tab-btn {
    flex: 1;
    padding: 15px 10px;
    background: transparent;
    border: none;
    color: rgba(255, 255, 255, 0.5);
    font-family: 'Orbitron', sans-serif;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 1px;
    cursor: pointer;
    position: relative;
    transition: color 0.3s ease;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
}

.ng-profile-tab-btn i {
    font-size: 16px;
}

.ng-profile-tab-btn.active {
    color: var(--ng-profile-primary);
}

.ng-profile-tab-btn::after {
    content: '';
    position: absolute;
    bottom: -1px;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 2px;
    background: var(--ng-profile-primary);
    transition: width 0.3s ease;
}

.ng-profile-tab-btn.active::after {
    width: 60%;
}

/* Tab Content */
.ng-profile-tab-content {
    position: relative;
    z-index: 1;
    animation: ngProfileFadeIn 0.3s ease;
}

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

/* Posts Grid */
.ng-profile-posts-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 3px;
}

.ng-profile-post-thumb {
    aspect-ratio: 1;
    position: relative;
    overflow: hidden;
    cursor: pointer;
    background: var(--ng-profile-void-light);
}

.ng-profile-post-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.ng-profile-post-thumb:hover img {
    transform: scale(1.1);
}

.ng-profile-post-thumb::before {
    content: '';
    position: absolute;
    inset: 0;
    border: 2px solid transparent;
    transition: all 0.3s ease;
    z-index: 2;
    pointer-events: none;
}

.ng-profile-post-thumb:hover::before {
    border-color: var(--ng-profile-primary);
    box-shadow: inset 0 0 20px var(--ng-profile-primary-dim);
}

.ng-profile-post-type {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 24px;
    height: 24px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    z-index: 3;
}

.ng-profile-post-type.photo { background: #00F0FF; color: #050510; }
.ng-profile-post-type.video { background: #A855F7; color: white; }
.ng-profile-post-type.voice { background: #F97316; color: white; }
.ng-profile-post-type.text { background: #EC4899; color: white; }
.ng-profile-post-type.link { background: #6366F1; color: white; }

.ng-profile-post-stats {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 8px;
    background: linear-gradient(transparent, rgba(0, 0, 0, 0.8));
    display: flex;
    gap: 12px;
    font-size: 12px;
    opacity: 0;
    transform: translateY(10px);
    transition: all 0.3s ease;
    color: white;
}

/* Link Post Placeholder */
.ng-profile-link-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #1a1a2e 0%, #0f0f1a 100%);
    position: relative;
    overflow: hidden;
}

.ng-profile-link-placeholder::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at center, var(--platform-color, #6366F1) 0%, transparent 70%);
    opacity: 0.3;
}

.ng-profile-link-placeholder i {
    font-size: 32px;
    color: var(--platform-color, #6366F1);
    filter: drop-shadow(0 0 15px var(--platform-color, #6366F1));
    z-index: 1;
    transition: transform 0.3s ease;
}

.ng-profile-post-thumb:hover .ng-profile-link-placeholder i {
    transform: scale(1.2);
}

/* Platform colors */
.ng-profile-link-placeholder.youtube { --platform-color: #FF0000; }
.ng-profile-link-placeholder.tiktok { --platform-color: #EE1D52; }
.ng-profile-link-placeholder.instagram { --platform-color: #E4405F; }
.ng-profile-link-placeholder.facebook { --platform-color: #1877F2; }
.ng-profile-link-placeholder.twitter { --platform-color: #1DA1F2; }
.ng-profile-link-placeholder.vimeo { --platform-color: #1AB7EA; }
.ng-profile-link-placeholder.twitch { --platform-color: #9146FF; }
.ng-profile-link-placeholder.spotify { --platform-color: #1DB954; }
.ng-profile-link-placeholder.link { --platform-color: #6366F1; }

/* Text Post Placeholder */
.ng-profile-text-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #2d1f3d 0%, #1a1025 100%);
    padding: 12px;
    text-align: center;
    gap: 8px;
}

.ng-profile-text-placeholder i {
    font-size: 20px;
    color: #EC4899;
    filter: drop-shadow(0 0 10px #EC4899);
}

.ng-profile-text-placeholder span {
    font-size: 10px;
    color: rgba(255, 255, 255, 0.8);
    line-height: 1.3;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
}

/* Voice Post Placeholder */
.ng-profile-voice-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #2d1a0d 0%, #1a0f06 100%);
    gap: 12px;
}

.ng-profile-voice-placeholder i {
    font-size: 24px;
    color: #F97316;
    filter: drop-shadow(0 0 12px #F97316);
}

.ng-profile-voice-bars {
    display: flex;
    align-items: center;
    gap: 3px;
    height: 24px;
}

.ng-profile-voice-bars .bar {
    width: 4px;
    background: #F97316;
    border-radius: 2px;
    animation: ng-voice-bar 0.8s ease-in-out infinite;
}

.ng-profile-voice-bars .bar:nth-child(1) { height: 30%; animation-delay: 0s; }
.ng-profile-voice-bars .bar:nth-child(2) { height: 60%; animation-delay: 0.1s; }
.ng-profile-voice-bars .bar:nth-child(3) { height: 100%; animation-delay: 0.2s; }
.ng-profile-voice-bars .bar:nth-child(4) { height: 60%; animation-delay: 0.3s; }
.ng-profile-voice-bars .bar:nth-child(5) { height: 30%; animation-delay: 0.4s; }

@keyframes ng-voice-bar {
    0%, 100% { transform: scaleY(0.5); opacity: 0.5; }
    50% { transform: scaleY(1); opacity: 1; }
}

.ng-profile-post-thumb:hover .ng-profile-post-stats {
    opacity: 1;
    transform: translateY(0);
}

.ng-profile-post-stats span {
    display: flex;
    align-items: center;
    gap: 4px;
}

/* Activity Timeline */
.ng-profile-activity-timeline {
    position: relative;
    padding-left: 30px;
}

.ng-profile-activity-timeline::before {
    content: '';
    position: absolute;
    left: 8px;
    top: 0;
    bottom: 0;
    width: 2px;
    background: linear-gradient(180deg, var(--ng-profile-primary), #FF00FF, transparent);
}

.ng-profile-activity-item {
    position: relative;
    padding: 15px;
    background: var(--ng-profile-void-light);
    border-radius: 12px;
    margin-bottom: 15px;
    border: 1px solid rgba(255, 255, 255, 0.05);
    display: flex;
    align-items: center;
    gap: 12px;
    transition: all 0.3s ease;
}

.ng-profile-activity-item:hover {
    border-color: var(--ng-profile-primary);
    transform: translateX(5px);
}

.ng-profile-activity-item::before {
    content: '';
    position: absolute;
    left: -26px;
    top: 50%;
    transform: translateY(-50%);
    width: 12px;
    height: 12px;
    background: var(--ng-profile-primary);
    border-radius: 50%;
    border: 3px solid var(--ng-profile-void);
}

.ng-profile-activity-icon {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    flex-shrink: 0;
}

.ng-profile-activity-icon.post { background: var(--ng-profile-primary-dim); color: var(--ng-profile-primary); }
.ng-profile-activity-icon.like { background: rgba(236, 72, 153, 0.2); color: #EC4899; }
.ng-profile-activity-icon.comment { background: rgba(168, 85, 247, 0.2); color: #A855F7; }

.ng-profile-activity-text {
    flex: 1;
    font-size: 14px;
    color: #E0E0E0;
}

.ng-profile-activity-time {
    font-family: 'Share Tech Mono', monospace;
    font-size: 11px;
    color: rgba(255, 255, 255, 0.5);
    flex-shrink: 0;
}

/* Customize Toggle */
.ng-profile-customize-toggle {
    width: 100%;
    padding: 15px;
    background: linear-gradient(135deg, var(--ng-profile-void-light) 0%, var(--ng-profile-void-lighter) 100%);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    color: #E0E0E0;
    font-family: 'Orbitron', sans-serif;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 2px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin-bottom: 15px;
    transition: all 0.3s ease;
    position: relative;
    z-index: 1;
}

.ng-profile-customize-toggle:hover {
    border-color: var(--ng-profile-primary);
}

.ng-profile-customize-toggle i:last-child {
    transition: transform 0.3s ease;
}

.ng-profile-customize-toggle.open i:last-child {
    transform: rotate(180deg);
}

/* Customize Panel */
.ng-profile-customize-panel {
    background: var(--ng-profile-void-light);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 15px;
    padding: 0;
    margin-bottom: 20px;
    overflow: hidden;
    max-height: 0;
    opacity: 0;
    transition: all 0.3s ease;
    position: relative;
    z-index: 1;
}

.ng-profile-customize-panel.open {
    padding: 20px;
    max-height: 300px;
    opacity: 1;
}

.ng-profile-customize-group {
    margin-bottom: 20px;
}

.ng-profile-customize-group:last-child {
    margin-bottom: 0;
}

.ng-profile-customize-label {
    font-family: 'Orbitron', sans-serif;
    font-size: 11px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.5);
    letter-spacing: 1px;
    margin-bottom: 12px;
    display: block;
}

.ng-profile-color-picker {
    display: flex;
    gap: 12px;
}

.ng-profile-color-option {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    cursor: pointer;
    border: 3px solid transparent;
    transition: all 0.3s ease;
}

.ng-profile-color-option:hover {
    transform: scale(1.15);
}

.ng-profile-color-option.active {
    border-color: white;
    box-shadow: 0 0 15px currentColor;
}

.ng-profile-color-option.cyan { background: #00F0FF; }
.ng-profile-color-option.magenta { background: #FF00FF; }
.ng-profile-color-option.green { background: #10B981; }
.ng-profile-color-option.orange { background: #F97316; }
.ng-profile-color-option.purple { background: #A855F7; }

/* Empty State */
.ng-profile-empty {
    text-align: center;
    padding: 60px 20px;
    color: rgba(255, 255, 255, 0.5);
}

.ng-profile-empty i {
    font-size: 48px;
    margin-bottom: 15px;
    opacity: 0.3;
}

.ng-profile-empty p {
    font-size: 14px;
}

/* Vibe Selector Modal */
.ng-vibe-selector-modal {
    position: fixed;
    inset: 0;
    background: rgba(5, 5, 16, 0.95);
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    animation: ngProfileFadeIn 0.3s ease;
}

.ng-vibe-selector-content {
    background: var(--ng-profile-void-lighter);
    border: 1px solid var(--ng-profile-primary-dim);
    border-radius: 20px;
    padding: 20px;
    max-width: 400px;
    width: 100%;
}

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

.ng-vibe-selector-header h3 {
    font-family: 'Orbitron', sans-serif;
    font-size: 16px;
    color: #E0E0E0;
}

.ng-vibe-selector-header button {
    background: transparent;
    border: none;
    color: rgba(255, 255, 255, 0.5);
    font-size: 20px;
    cursor: pointer;
}

.ng-vibe-selector-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
}

.ng-vibe-option {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 15px;
    background: var(--ng-profile-void-light);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.ng-vibe-option:hover {
    border-color: var(--ng-profile-primary);
    transform: translateY(-2px);
}

.ng-vibe-option-emoji {
    font-size: 24px;
}

.ng-vibe-option-text {
    font-size: 13px;
    color: #E0E0E0;
}

/* Responsive */
@media (max-width: 400px) {
    .ng-profile-stats-bar {
        grid-template-columns: repeat(2, 1fr);
    }

    .ng-profile-stat-value {
        font-size: 18px;
    }

    .ng-profile-level-header {
        flex-direction: column;
        gap: 15px;
        text-align: center;
    }

    .ng-profile-level-reward {
        text-align: center;
    }

    .ng-profile-level-badge {
        justify-content: center;
    }

    .ng-profile-reward-item {
        justify-content: center;
    }
}

/* ============================================== */
/* EDIT PROFILE MODAL                             */
/* Cyberpunk-themed profile customization         */
/* ============================================== */

/* CSS Variables for Edit Profile */
.ng-edit-overlay {
    --ng-edit-void: #050510;
    --ng-edit-void-light: #0a0a1a;
    --ng-edit-void-lighter: #12122a;
    --ng-edit-cyan: #00F0FF;
    --ng-edit-cyan-dim: rgba(0, 240, 255, 0.3);
    --ng-edit-cyan-glow: rgba(0, 240, 255, 0.6);
    --ng-edit-magenta: #FF00FF;
    --ng-edit-magenta-dim: rgba(255, 0, 255, 0.3);
    --ng-edit-purple: #A855F7;
    --ng-edit-green: #00FF88;
    --ng-edit-orange: #FF6B00;
    --ng-edit-red: #FF3366;
    --ng-edit-red-dim: rgba(255, 51, 102, 0.2);
    --ng-edit-text: #E0E0E0;
    --ng-edit-text-dim: #808080;
    --ng-edit-card-bg: rgba(10, 10, 26, 0.95);
    --ng-edit-input-bg: rgba(5, 5, 16, 0.9);
}

/* Overlay */
.ng-edit-overlay {
    position: fixed;
    inset: 0;
    z-index: 10000;
    background: var(--ng-edit-void);
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
    overflow-y: auto;
}

.ng-edit-overlay.active {
    opacity: 1;
    visibility: visible;
}

/* Container */
.ng-edit-container {
    max-width: 480px;
    margin: 0 auto;
    padding: 0 16px 100px;
    padding-top: env(safe-area-inset-top);
}

/* Header */
.ng-edit-header {
    position: sticky;
    top: 0;
    z-index: 100;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 0;
    background: linear-gradient(to bottom, var(--ng-edit-void) 60%, transparent);
    backdrop-filter: blur(10px);
}

.ng-edit-back-btn {
    width: 44px;
    height: 44px;
    border: 1px solid var(--ng-edit-cyan-dim);
    border-radius: 12px;
    background: var(--ng-edit-card-bg);
    color: var(--ng-edit-cyan);
    font-size: 18px;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.ng-edit-back-btn:hover {
    background: var(--ng-edit-cyan-dim);
    box-shadow: 0 0 20px var(--ng-edit-cyan-dim);
    transform: translateX(-3px);
}

.ng-edit-title {
    font-family: 'Orbitron', sans-serif;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 3px;
    color: var(--ng-edit-cyan);
}

.ng-edit-save-btn {
    padding: 10px 20px;
    border: none;
    border-radius: 8px;
    background: linear-gradient(135deg, var(--ng-edit-cyan) 0%, var(--ng-edit-purple) 100%);
    color: var(--ng-edit-void);
    font-family: 'Orbitron', sans-serif;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 2px;
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

.ng-edit-save-btn:hover {
    box-shadow: 0 0 30px var(--ng-edit-cyan-glow), 0 0 60px var(--ng-edit-cyan-dim);
    transform: scale(1.05);
}

.ng-edit-save-btn.saving {
    background: var(--ng-edit-orange);
    animation: ngEditPulse 0.5s ease infinite;
}

.ng-edit-save-btn.saved {
    background: var(--ng-edit-green);
}

@keyframes ngEditPulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.7; }
}

/* Cards */
.ng-edit-card {
    background: var(--ng-edit-card-bg);
    border: 1px solid rgba(0, 240, 255, 0.15);
    border-radius: 16px;
    padding: 20px;
    margin-bottom: 16px;
    position: relative;
    overflow: hidden;
    animation: ngEditCardSlide 0.6s ease backwards;
}

.ng-edit-card:nth-child(2) { animation-delay: 0.1s; }
.ng-edit-card:nth-child(3) { animation-delay: 0.2s; }
.ng-edit-card:nth-child(4) { animation-delay: 0.3s; }
.ng-edit-card:nth-child(5) { animation-delay: 0.4s; }
.ng-edit-card:nth-child(6) { animation-delay: 0.5s; }
.ng-edit-card:nth-child(7) { animation-delay: 0.6s; }

@keyframes ngEditCardSlide {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
}

/* Corner Brackets */
.ng-edit-corner {
    position: absolute;
    width: 12px;
    height: 12px;
    border-color: var(--ng-edit-cyan);
    border-style: solid;
    opacity: 0.6;
}

.ng-edit-corner.tl { top: 8px; left: 8px; border-width: 2px 0 0 2px; }
.ng-edit-corner.tr { top: 8px; right: 8px; border-width: 2px 2px 0 0; }
.ng-edit-corner.bl { bottom: 8px; left: 8px; border-width: 0 0 2px 2px; }
.ng-edit-corner.br { bottom: 8px; right: 8px; border-width: 0 2px 2px 0; }

.ng-edit-corner.danger { border-color: var(--ng-edit-red); }

/* Tech Label */
.ng-edit-tech-label {
    position: absolute;
    top: 8px;
    right: 40px;
    font-family: 'Share Tech Mono', monospace;
    font-size: 8px;
    color: var(--ng-edit-cyan);
    opacity: 0.5;
    letter-spacing: 1px;
}

.ng-edit-tech-label.danger { color: var(--ng-edit-red); }

/* Section Header */
.ng-edit-section-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 16px;
}

.ng-edit-section-icon {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: linear-gradient(135deg, var(--ng-edit-cyan-dim), transparent);
    border: 1px solid var(--ng-edit-cyan-dim);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--ng-edit-cyan);
    font-size: 14px;
}

.ng-edit-section-icon.danger {
    background: var(--ng-edit-red-dim);
    border-color: var(--ng-edit-red-dim);
    color: var(--ng-edit-red);
}

.ng-edit-section-title {
    font-family: 'Orbitron', sans-serif;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 2px;
    color: var(--ng-edit-text);
}

/* Avatar Section */
.ng-edit-avatar-section {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 30px 20px;
}

.ng-edit-avatar-container {
    position: relative;
    margin-bottom: 20px;
}

.ng-edit-avatar-ring {
    position: absolute;
    inset: -8px;
    border-radius: 50%;
    border: 3px solid var(--ng-edit-cyan);
    animation: ngEditRingPulse 2s ease infinite;
}

.ng-edit-avatar-ring.hexagon {
    border-radius: 0;
    clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
}

.ng-edit-avatar-ring.diamond {
    border-radius: 0;
    transform: rotate(45deg);
    inset: -4px;
}

.ng-edit-avatar-ring.octagon {
    border-radius: 0;
    clip-path: polygon(30% 0%, 70% 0%, 100% 30%, 100% 70%, 70% 100%, 30% 100%, 0% 70%, 0% 30%);
}

.ng-edit-avatar-ring.rotate {
    animation: ngEditRingRotate 4s linear infinite;
}

.ng-edit-avatar-ring.breathe {
    animation: ngEditRingBreathe 3s ease-in-out infinite;
}

.ng-edit-avatar-ring.glitch {
    animation: ngEditRingGlitch 3s linear infinite;
}

@keyframes ngEditRingPulse {
    0%, 100% { box-shadow: 0 0 20px var(--ng-edit-cyan-dim), inset 0 0 20px var(--ng-edit-cyan-dim); opacity: 1; }
    50% { box-shadow: 0 0 40px var(--ng-edit-cyan-glow), inset 0 0 30px var(--ng-edit-cyan-dim); opacity: 0.8; }
}

@keyframes ngEditRingRotate {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

@keyframes ngEditRingBreathe {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.05); }
}

@keyframes ngEditRingGlitch {
    0%, 90%, 100% { opacity: 1; transform: translate(0); }
    91% { opacity: 0.5; transform: translate(-2px, 1px); }
    93% { opacity: 0.8; transform: translate(2px, -1px); }
    95% { opacity: 0.5; transform: translate(-1px, 2px); }
}

.ng-edit-avatar-image {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    overflow: hidden;
    border: 3px solid var(--ng-edit-void-lighter);
}

.ng-edit-avatar-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.ng-edit-change-avatar-btn {
    padding: 12px 24px;
    border: 2px solid var(--ng-edit-cyan-dim);
    border-radius: 10px;
    background: transparent;
    color: var(--ng-edit-cyan);
    font-family: 'Rajdhani', sans-serif;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 20px;
}

.ng-edit-change-avatar-btn:hover {
    background: var(--ng-edit-cyan-dim);
    box-shadow: 0 0 20px var(--ng-edit-cyan-dim);
}

/* Selector Groups */
.ng-edit-selector-group {
    width: 100%;
    margin-bottom: 16px;
}

.ng-edit-selector-label {
    display: block;
    font-family: 'Share Tech Mono', monospace;
    font-size: 10px;
    color: var(--ng-edit-text-dim);
    letter-spacing: 1px;
    margin-bottom: 8px;
}

.ng-edit-selector-options {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.ng-edit-selector-option {
    min-width: 44px;
    height: 44px;
    padding: 0 12px;
    border: 2px solid var(--ng-edit-void-lighter);
    border-radius: 10px;
    background: var(--ng-edit-input-bg);
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--ng-edit-text-dim);
    font-family: 'Share Tech Mono', monospace;
    font-size: 11px;
    letter-spacing: 1px;
    white-space: nowrap;
}

.ng-edit-selector-option.icon-only {
    width: 44px;
    padding: 0;
}

.ng-edit-selector-option:hover {
    border-color: var(--ng-edit-cyan-dim);
    color: var(--ng-edit-cyan);
}

.ng-edit-selector-option.active {
    border-color: var(--ng-edit-cyan);
    background: var(--ng-edit-cyan-dim);
    color: var(--ng-edit-cyan);
    box-shadow: 0 0 15px var(--ng-edit-cyan-dim);
}

/* Color Swatches */
.ng-edit-selector-option.color {
    width: 36px;
    height: 36px;
    min-width: 36px;
    padding: 0;
    border-radius: 50%;
}

.ng-edit-selector-option.color.cyan { background: #00F0FF; }
.ng-edit-selector-option.color.magenta { background: #FF00FF; }
.ng-edit-selector-option.color.purple { background: #A855F7; }
.ng-edit-selector-option.color.green { background: #00FF88; }
.ng-edit-selector-option.color.orange { background: #FF6B00; }
.ng-edit-selector-option.color.rainbow {
    background: conic-gradient(#00F0FF, #FF00FF, #A855F7, #00FF88, #FF6B00, #00F0FF);
}

.ng-edit-selector-option.color.active {
    transform: scale(1.15);
    box-shadow: 0 0 20px currentColor;
}

/* Input Groups */
.ng-edit-input-group {
    margin-bottom: 16px;
}

.ng-edit-input-label {
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: 'Share Tech Mono', monospace;
    font-size: 10px;
    color: var(--ng-edit-cyan);
    letter-spacing: 1px;
    margin-bottom: 8px;
}

.ng-edit-input {
    width: 100%;
    padding: 14px 16px;
    border: 2px solid var(--ng-edit-void-lighter);
    border-radius: 10px;
    background: var(--ng-edit-input-bg);
    color: var(--ng-edit-cyan);
    font-family: 'Share Tech Mono', monospace;
    font-size: 14px;
    transition: all 0.3s ease;
}

.ng-edit-input:focus {
    outline: none;
    border-color: var(--ng-edit-cyan);
    box-shadow: 0 0 20px var(--ng-edit-cyan-dim);
}

.ng-edit-input.readonly {
    color: var(--ng-edit-text-dim);
    cursor: not-allowed;
}

.ng-edit-input-with-btn {
    display: flex;
    gap: 8px;
}

.ng-edit-input-with-btn .ng-edit-input {
    flex: 1;
}

.ng-edit-input-btn {
    width: 50px;
    border: 2px solid var(--ng-edit-void-lighter);
    border-radius: 10px;
    background: var(--ng-edit-input-bg);
    color: var(--ng-edit-cyan);
    cursor: pointer;
    transition: all 0.3s ease;
}

.ng-edit-input-btn:hover {
    background: var(--ng-edit-cyan-dim);
}

.ng-edit-textarea {
    width: 100%;
    min-height: 100px;
    padding: 14px 16px;
    border: 2px solid var(--ng-edit-void-lighter);
    border-radius: 10px;
    background: var(--ng-edit-input-bg);
    color: var(--ng-edit-text);
    font-family: 'Rajdhani', sans-serif;
    font-size: 14px;
    resize: vertical;
    transition: all 0.3s ease;
}

.ng-edit-textarea:focus {
    outline: none;
    border-color: var(--ng-edit-cyan);
    box-shadow: 0 0 20px var(--ng-edit-cyan-dim);
}

.ng-edit-char-counter {
    text-align: right;
    font-family: 'Share Tech Mono', monospace;
    font-size: 10px;
    color: var(--ng-edit-text-dim);
    margin-top: 4px;
}

.ng-edit-char-counter.warning { color: var(--ng-edit-orange); }
.ng-edit-char-counter.error { color: var(--ng-edit-red); }

.ng-edit-select {
    width: 100%;
    padding: 14px 16px;
    border: 2px solid var(--ng-edit-void-lighter);
    border-radius: 10px;
    background: var(--ng-edit-input-bg);
    color: var(--ng-edit-text);
    font-family: 'Rajdhani', sans-serif;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.3s ease;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%2300F0FF'%3E%3Cpath d='M7 10l5 5 5-5z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 20px;
}

.ng-edit-select:focus {
    outline: none;
    border-color: var(--ng-edit-cyan);
    box-shadow: 0 0 20px var(--ng-edit-cyan-dim);
}

/* Slider */
.ng-edit-slider-container {
    padding-top: 8px;
}

.ng-edit-slider-labels {
    display: flex;
    justify-content: space-between;
    font-family: 'Share Tech Mono', monospace;
    font-size: 9px;
    color: var(--ng-edit-text-dim);
    margin-bottom: 8px;
}

.ng-edit-slider {
    width: 100%;
    height: 6px;
    border-radius: 3px;
    background: var(--ng-edit-void-lighter);
    appearance: none;
    cursor: pointer;
}

.ng-edit-slider::-webkit-slider-thumb {
    appearance: none;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--ng-edit-cyan);
    box-shadow: 0 0 15px var(--ng-edit-cyan-glow);
    cursor: pointer;
    transition: transform 0.2s ease;
}

.ng-edit-slider::-webkit-slider-thumb:hover {
    transform: scale(1.2);
}

/* Preview Box */
.ng-edit-preview {
    width: 100%;
    height: 100px;
    border-radius: 12px;
    background: var(--ng-edit-void);
    border: 1px solid var(--ng-edit-void-lighter);
    margin-top: 12px;
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

.ng-edit-preview-label {
    position: absolute;
    top: 8px;
    left: 8px;
    font-family: 'Share Tech Mono', monospace;
    font-size: 8px;
    color: var(--ng-edit-text-dim);
    letter-spacing: 1px;
    z-index: 10;
}

.ng-edit-preview-avatar {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    border: 2px solid var(--ng-edit-cyan);
    overflow: hidden;
    position: relative;
    z-index: 5;
    box-shadow: 0 0 20px var(--ng-edit-cyan-dim);
}

.ng-edit-preview-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.ng-edit-preview-glow {
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at center, var(--ng-edit-cyan-dim) 0%, transparent 70%);
    opacity: 0;
    transition: opacity 0.3s ease;
}

.ng-edit-preview-glow.low { opacity: 0.2; }
.ng-edit-preview-glow.medium { opacity: 0.4; }
.ng-edit-preview-glow.high { opacity: 0.6; }
.ng-edit-preview-glow.maximum { opacity: 0.9; animation: ngEditGlowPulse 1s ease infinite; }

@keyframes ngEditGlowPulse {
    0%, 100% { opacity: 0.9; }
    50% { opacity: 0.6; }
}

.ng-edit-preview-particles,
.ng-edit-preview-scanlines,
.ng-edit-preview-matrix,
.ng-edit-preview-circuit {
    position: absolute;
    inset: 0;
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
}

.ng-edit-preview-particles.active,
.ng-edit-preview-scanlines.active,
.ng-edit-preview-matrix.active,
.ng-edit-preview-circuit.active {
    opacity: 1;
}

.ng-edit-preview-particle {
    position: absolute;
    background: var(--ng-edit-cyan);
    border-radius: 50%;
    animation: ngEditFloatParticle 3s ease-in-out infinite;
}

@keyframes ngEditFloatParticle {
    0%, 100% { transform: translateY(0) scale(1); opacity: 0.6; }
    50% { transform: translateY(-15px) scale(0.5); opacity: 0.3; }
}

.ng-edit-preview-scanlines {
    background: repeating-linear-gradient(
        0deg,
        transparent,
        transparent 2px,
        rgba(0, 0, 0, 0.2) 2px,
        rgba(0, 0, 0, 0.2) 4px
    );
}

.ng-edit-preview-matrix span {
    position: absolute;
    color: var(--ng-edit-cyan);
    font-family: 'Share Tech Mono', monospace;
    font-size: 10px;
    opacity: 0.5;
    animation: ngEditMatrixFall 2s linear infinite;
}

@keyframes ngEditMatrixFall {
    0% { top: -20px; opacity: 0; }
    10% { opacity: 0.5; }
    90% { opacity: 0.5; }
    100% { top: 100%; opacity: 0; }
}

.ng-edit-preview-circuit {
    background-image: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5 5h50v50H5z' fill='none' stroke='%2300F0FF' stroke-width='0.5'/%3E%3Cpath d='M15 5v10h15v15h15v15h10' fill='none' stroke='%2300F0FF' stroke-width='0.5'/%3E%3Ccircle cx='15' cy='15' r='2' fill='%2300F0FF'/%3E%3Ccircle cx='30' cy='30' r='2' fill='%2300F0FF'/%3E%3C/svg%3E");
    opacity: 0;
}

.ng-edit-preview-circuit.active {
    opacity: 0.3;
}

/* Emoji Grid */
.ng-edit-emoji-grid {
    display: grid;
    grid-template-columns: repeat(8, 1fr);
    gap: 8px;
}

.ng-edit-emoji-option {
    aspect-ratio: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    border: 2px solid var(--ng-edit-void-lighter);
    border-radius: 10px;
    background: var(--ng-edit-input-bg);
    cursor: pointer;
    transition: all 0.3s ease;
}

.ng-edit-emoji-option:hover {
    border-color: var(--ng-edit-cyan-dim);
    transform: scale(1.1);
}

.ng-edit-emoji-option.active {
    border-color: var(--ng-edit-cyan);
    background: var(--ng-edit-cyan-dim);
    box-shadow: 0 0 15px var(--ng-edit-cyan-dim);
}

/* Toggle Groups */
.ng-edit-toggle-group {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 0;
    border-bottom: 1px solid var(--ng-edit-void-lighter);
}

.ng-edit-toggle-group:last-child {
    border-bottom: none;
}

.ng-edit-toggle-info {
    display: flex;
    align-items: center;
    gap: 12px;
}

.ng-edit-toggle-icon {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    background: var(--ng-edit-void-lighter);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--ng-edit-cyan);
    font-size: 12px;
}

.ng-edit-toggle-text {
    font-family: 'Rajdhani', sans-serif;
    font-size: 14px;
    color: var(--ng-edit-text);
}

.ng-edit-toggle {
    width: 50px;
    height: 28px;
    border-radius: 14px;
    background: var(--ng-edit-void-lighter);
    cursor: pointer;
    position: relative;
    transition: all 0.3s ease;
}

.ng-edit-toggle::after {
    content: '';
    position: absolute;
    top: 4px;
    left: 4px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--ng-edit-text-dim);
    transition: all 0.3s ease;
}

.ng-edit-toggle.active {
    background: var(--ng-edit-cyan);
    box-shadow: 0 0 15px var(--ng-edit-cyan-dim);
}

.ng-edit-toggle.active::after {
    left: 26px;
    background: var(--ng-edit-void);
}

/* Danger Card */
.ng-edit-danger-card {
    border-color: var(--ng-edit-red-dim);
}

.ng-edit-danger-btn {
    width: 100%;
    padding: 14px;
    border: 1px solid var(--ng-edit-red-dim);
    border-radius: 10px;
    background: transparent;
    color: var(--ng-edit-red);
    font-family: 'Rajdhani', sans-serif;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.ng-edit-danger-btn:last-child {
    margin-bottom: 0;
}

.ng-edit-danger-btn:hover {
    background: var(--ng-edit-red-dim);
    box-shadow: 0 0 20px var(--ng-edit-red-dim);
}

.ng-edit-danger-btn.critical {
    background: var(--ng-edit-red-dim);
}

.ng-edit-danger-btn.critical:hover {
    background: var(--ng-edit-red);
    color: white;
}

/* Unsaved Indicator */
.ng-edit-unsaved-indicator {
    position: fixed;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    padding: 10px 20px;
    background: var(--ng-edit-orange);
    color: var(--ng-edit-void);
    font-family: 'Share Tech Mono', monospace;
    font-size: 11px;
    border-radius: 20px;
    display: none;
    align-items: center;
    gap: 8px;
    z-index: 10001;
    animation: ngEditBounce 1s ease infinite;
}

.ng-edit-unsaved-indicator.show {
    display: flex;
}

@keyframes ngEditBounce {
    0%, 100% { transform: translateX(-50%) translateY(0); }
    50% { transform: translateX(-50%) translateY(-5px); }
}

/* Deactivate Modal */
.ng-edit-modal {
    position: fixed;
    inset: 0;
    background: rgba(5, 5, 16, 0.9);
    backdrop-filter: blur(10px);
    z-index: 10002;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.ng-edit-modal.show {
    display: flex;
}

.ng-edit-modal-content {
    background: var(--ng-edit-card-bg);
    border: 1px solid var(--ng-edit-red);
    border-radius: 16px;
    padding: 24px;
    max-width: 340px;
    width: 100%;
    text-align: center;
    animation: ngEditModalSlide 0.3s ease;
}

@keyframes ngEditModalSlide {
    from { opacity: 0; transform: scale(0.9); }
}

.ng-edit-modal-icon {
    width: 60px;
    height: 60px;
    margin: 0 auto 16px;
    background: var(--ng-edit-red-dim);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
    color: var(--ng-edit-red);
}

.ng-edit-modal-title {
    font-family: 'Orbitron', sans-serif;
    font-size: 16px;
    color: var(--ng-edit-red);
    margin-bottom: 12px;
}

.ng-edit-modal-text {
    color: var(--ng-edit-text-dim);
    font-size: 14px;
    margin-bottom: 24px;
    line-height: 1.5;
}

.ng-edit-modal-buttons {
    display: flex;
    gap: 12px;
}

.ng-edit-modal-btn {
    flex: 1;
    padding: 14px;
    border-radius: 10px;
    font-family: 'Rajdhani', sans-serif;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
}

.ng-edit-modal-btn.cancel {
    background: var(--ng-edit-void-lighter);
    border: 1px solid var(--ng-edit-void-lighter);
    color: var(--ng-edit-text);
}

.ng-edit-modal-btn.cancel:hover {
    border-color: var(--ng-edit-text-dim);
}

.ng-edit-modal-btn.confirm {
    background: var(--ng-edit-red);
    border: none;
    color: white;
}

.ng-edit-modal-btn.confirm:hover {
    box-shadow: 0 0 25px var(--ng-edit-red-dim);
}

/* Responsive */
@media (max-width: 400px) {
    .ng-edit-emoji-grid {
        grid-template-columns: repeat(4, 1fr);
    }

    .ng-edit-selector-options {
        justify-content: center;
    }
}