/* Reset and Base Styles */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

:root {
    --primary-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    --secondary-gradient: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
    --accent-gradient: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
    --glass-bg: rgba(255, 255, 255, 0.1);
    --glass-border: rgba(255, 255, 255, 0.2);
    --text-primary: #ffffff;
    --text-secondary: rgba(255, 255, 255, 0.7);
    --text-muted: rgba(255, 255, 255, 0.5);
    --shadow-xl: 0 20px 40px rgba(0, 0, 0, 0.3);
    --shadow-lg: 0 10px 25px rgba(0, 0, 0, 0.2);
    --shadow-md: 0 5px 15px rgba(0, 0, 0, 0.1);
}

body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    background: #0a0a0a;
    color: var(--text-primary);
    overflow-x: hidden;
    height: 100vh;
    position: relative;
    margin: 0;
    padding: 0;
    touch-action: manipulation;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    user-select: none;
}

/* Background Animation */
.background {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: -1;
    background: linear-gradient(135deg, #1e1e2e 0%, #2d1b69 50%, #0f0f23 100%);
    margin: 0;
    padding: 0;
}

.gradient-orbs {
    position: absolute;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.orb {
    position: absolute;
    border-radius: 50%;
    filter: blur(80px);
    opacity: 0.6;
    animation: float 20s infinite ease-in-out;
}

.orb-1 {
    width: 400px;
    height: 400px;
    background: linear-gradient(135deg, #667eea, #764ba2);
    top: -100px;
    left: -100px;
    animation-delay: 0s;
}

.orb-2 {
    width: 350px;
    height: 350px;
    background: linear-gradient(135deg, #f093fb, #f5576c);
    bottom: -100px;
    right: -100px;
    animation-delay: 5s;
}

.orb-3 {
    width: 300px;
    height: 300px;
    background: linear-gradient(135deg, #4facfe, #00f2fe);
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    animation-delay: 10s;
}

.noise-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)' opacity='0.05'/%3E%3C/svg%3E");
    opacity: 0.3;
    pointer-events: none;
}

@keyframes float {
    0%, 100% { transform: translate(0, 0) scale(1); }
    25% { transform: translate(50px, -50px) scale(1.1); }
    50% { transform: translate(-30px, 30px) scale(0.9); }
    75% { transform: translate(-50px, -30px) scale(1.05); }
}

/* Screen Management */
.screen {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);
    margin: 0;
    padding: 0;
}

.screen.hidden {
    opacity: 0;
    transform: scale(0.9);
    pointer-events: none;
}

/* Login Screen */
.login-screen {
    background: transparent;
}

.login-container {
    text-align: center;
    max-width: 600px;
    width: 90%;
    padding: 2rem;
}

.logo-section {
    margin-bottom: 3rem;
    animation: logoFloat 6s cubic-bezier(0.4, 0, 0.2, 1) infinite;
    position: relative;
    opacity: 0;
    transform: scale(0.8) rotate(-5deg);
    animation: logoEntrance 1.5s cubic-bezier(0.34, 1.56, 0.64, 1) forwards, logoFloat 6s cubic-bezier(0.4, 0, 0.2, 1) 1.5s infinite;
}

.logo-section::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 200px;
    height: 200px;
    background: radial-gradient(circle, rgba(102, 126, 234, 0.15) 0%, rgba(240, 147, 251, 0.1) 50%, transparent 70%);
    border-radius: 50%;
    animation: logoGlow 4s ease-in-out infinite 1.5s;
    z-index: -1;
}

.logo-section::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 250px;
    height: 250px;
    background: radial-gradient(circle, rgba(79, 172, 254, 0.08) 0%, transparent 60%);
    border-radius: 50%;
    animation: logoGlow 5s ease-in-out infinite 2s reverse;
    z-index: -2;
}

.logo {
    display: inline-block;
    margin-bottom: 1rem;
}

.logo-icon {
    background: var(--primary-gradient);
    color: white;
    font-size: 3rem;
    font-weight: 700;
    padding: 1.5rem 2rem;
    border-radius: 20px;
    box-shadow: var(--shadow-xl);
    backdrop-filter: blur(20px);
    border: 1px solid var(--glass-border);
}

.app-title {
    font-size: 2.5rem;
    font-weight: 700;
    margin-bottom: 0.5rem;
    background: linear-gradient(270deg, #667eea, #f093fb, #4facfe, #667eea);
    background-size: 400% 400%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    position: relative;
    animation: gradientShift 4s ease-in-out infinite, titleReveal 2s cubic-bezier(0.4, 0, 0.2, 1) forwards;
    opacity: 0;
    transform: translateY(30px) scale(0.9);
    filter: blur(2px);
    text-shadow: 0 0 40px rgba(102, 126, 234, 0.4);
}

.app-title::before {
    content: '';
    position: absolute;
    top: -15px;
    left: -15px;
    right: -15px;
    bottom: -15px;
    background: linear-gradient(270deg, #667eea, #f093fb, #4facfe, #667eea);
    background-size: 400% 400%;
    border-radius: 25px;
    opacity: 0;
    filter: blur(25px);
    animation: gradientShift 4s ease-in-out infinite, titleGlow 3s ease-in-out infinite;
    z-index: -1;
}


.app-subtitle {
    font-size: 1.1rem;
    font-weight: 400;
    opacity: 0;
    transform: translateY(20px) scale(0.95);
    animation: subtitleReveal 1.5s cubic-bezier(0.4, 0, 0.2, 1) 0.8s forwards;
    position: relative;
    background: linear-gradient(90deg, var(--text-secondary), #4facfe, var(--text-secondary));
    background-size: 200% 100%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: subtitleReveal 1.5s cubic-bezier(0.4, 0, 0.2, 1) 0.8s forwards, subtitleGradient 3s ease-in-out infinite 2s;
}

.app-subtitle::before {
    content: '';
    position: absolute;
    bottom: -10px;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 3px;
    background: linear-gradient(90deg, transparent, #4facfe, #667eea, #f093fb, transparent);
    background-size: 300% 100%;
    border-radius: 2px;
    animation: underlineExpand 2.5s cubic-bezier(0.4, 0, 0.2, 1) 1.5s forwards, underlineGradient 4s ease-in-out infinite 3s;
    box-shadow: 0 2px 10px rgba(79, 172, 254, 0.4);
}

/* Users Grid */
.users-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 1.5rem;
    margin-bottom: 2rem;
    animation: fadeInUp 0.8s ease-out 0.2s both;
}

.user-card {
    background: var(--glass-bg);
    backdrop-filter: blur(20px);
    border: 1px solid var(--glass-border);
    border-radius: 20px;
    padding: 1.5rem 1rem;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
    text-decoration: none;
    color: inherit;
}

.user-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.1) 0%, transparent 100%);
    opacity: 0;
    transition: opacity 0.3s ease;
}

.user-card:hover {
    transform: translateY(-5px) scale(1.02);
    box-shadow: var(--shadow-xl);
    border-color: rgba(255, 255, 255, 0.3);
}

.user-card:hover::before {
    opacity: 1;
}

.user-avatar {
    width: 60px;
    height: 60px;
    margin: 0 auto 1rem;
    position: relative;
    border-radius: 50%;
    overflow: hidden;
}

.avatar-gradient {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.avatar-1 { background: var(--primary-gradient); }
.avatar-2 { background: var(--secondary-gradient); }
.avatar-3 { background: var(--accent-gradient); }
.avatar-4 { background: linear-gradient(135deg, #fa709a 0%, #fee140 100%); }
.avatar-5 { background: linear-gradient(135deg, #30cfd0 0%, #330867 100%); }
.avatar-6 { background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%); }

.user-initial {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: white;
    font-size: 1.5rem;
    font-weight: 600;
    z-index: 1;
}

.user-name {
    font-size: 1.1rem;
    font-weight: 600;
    margin-bottom: 0.25rem;
    color: var(--text-primary);
}

.user-status {
    font-size: 0.9rem;
    color: var(--text-muted);
}

.user-badge {
    font-size: 0.7rem;
    font-weight: 600;
    color: #ffd700;
    background: rgba(255, 215, 0, 0.1);
    border: 1px solid rgba(255, 215, 0, 0.3);
    border-radius: 12px;
    padding: 4px 8px;
    margin-top: 8px;
    text-align: center;
    backdrop-filter: blur(10px);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}


/* Login Footer */
.login-footer {
    margin-top: 2rem;
    animation: fadeInUp 0.8s ease-out 0.4s both;
}

.version {
    color: var(--text-muted);
    font-size: 0.9rem;
}

/* Dashboard Screen */
.dashboard-screen {
    background: transparent;
    padding: 2rem;
    align-items: flex-start;
    justify-content: flex-start;
}

.dashboard-screen.animate-entrance .dashboard-container {
    animation: dashboardDramaticEntrance 0.8s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

.dashboard-screen.animate-entrance .dashboard-header {
    animation: headerDramaticDrop 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) 0.1s both;
}

.dashboard-screen.animate-entrance .quick-actions {
    animation: cardDramaticFloat 0.7s cubic-bezier(0.34, 1.56, 0.64, 1) 0.2s both;
}

.dashboard-screen.animate-entrance .family-activity {
    animation: cardDramaticFloat 0.7s cubic-bezier(0.34, 1.56, 0.64, 1) 0.35s both;
}

.dashboard-screen.animate-entrance .action-card:nth-child(1) {
    animation: actionCardPop 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) 0.3s both;
}

.dashboard-screen.animate-entrance .action-card:nth-child(2) {
    animation: actionCardPop 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) 0.4s both;
}

.dashboard-screen.animate-entrance .action-card:nth-child(3) {
    animation: actionCardPop 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) 0.5s both;
}

.dashboard-screen.animate-entrance .action-card:nth-child(4) {
    animation: actionCardPop 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) 0.6s both;
}

.dashboard-container {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
}

.dashboard-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 2rem;
    margin-top: env(safe-area-inset-top);
    padding: 1rem 1.5rem;
    background: var(--glass-bg);
    backdrop-filter: blur(20px);
    border: 1px solid var(--glass-border);
    border-radius: 20px;
    animation: fadeInDown 0.6s ease-out;
}

.header-left {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.logo-small {
    background: var(--primary-gradient);
    color: white;
    font-weight: 700;
    padding: 0.5rem 1rem;
    border-radius: 10px;
    font-size: 0.9rem;
}

.dashboard-title {
    font-size: 1.5rem;
    font-weight: 600;
}

.header-right {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.coin-display {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    background: rgba(255, 215, 0, 0.1);
    border: 1px solid rgba(255, 215, 0, 0.3);
    padding: 0.5rem 1rem;
    border-radius: 15px;
    backdrop-filter: blur(10px);
}

.coin-icon {
    font-size: 1.2rem;
    color: #ffd700;
    filter: drop-shadow(0 0 4px rgba(255, 215, 0, 0.5));
}

.coin-amount {
    font-size: 1.1rem;
    font-weight: 600;
    color: #ffd700;
    text-shadow: 0 0 8px rgba(255, 215, 0, 0.3);
}

.user-info {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.user-avatar-small {
    width: 35px;
    height: 35px;
    position: relative;
    border-radius: 50%;
    overflow: hidden;
}

.user-initial-small {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: white;
    font-size: 0.9rem;
    font-weight: 600;
    z-index: 1;
}

.current-user {
    font-weight: 500;
}

.logout-btn {
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: white;
    padding: 0.5rem 1rem;
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.3s ease;
    font-size: 0.9rem;
}

.logout-btn:hover {
    background: rgba(255, 255, 255, 0.2);
    transform: translateY(-2px);
}

/* Challenges Button */
.challenges-btn {
    position: relative;
    background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
    border: none;
    color: white;
    padding: 0.6rem;
    border-radius: 12px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    box-shadow: 0 4px 15px rgba(79, 172, 254, 0.3);
}

.challenges-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(79, 172, 254, 0.4);
}

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

.challenges-badge {
    position: absolute;
    top: -8px;
    right: -8px;
    background: #ef4444;
    color: white;
    font-size: 0.75rem;
    font-weight: 700;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid #1e1e2e;
    animation: badgePulse 2s infinite;
}

@keyframes badgePulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.1); }
}


/* Clear Cache Button */
.clear-cache-btn {
    position: relative;
    background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
    border: none;
    color: white;
    padding: 0.6rem;
    border-radius: 12px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    box-shadow: 0 4px 15px rgba(245, 87, 108, 0.3);
}

.clear-cache-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(245, 87, 108, 0.4);
}

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

/* Challenges Modal Styles */
.challenges-list {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    max-height: 60vh;
    overflow-y: auto;
    padding-right: 0.5rem;
}

.challenges-list::-webkit-scrollbar {
    width: 6px;
}

.challenges-list::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.05);
    border-radius: 3px;
}

.challenges-list::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.2);
    border-radius: 3px;
}

.challenge-section {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.challenge-section-title {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 0.25rem;
}

.challenge-card {
    display: flex;
    align-items: center;
    gap: 1rem;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    padding: 1rem;
    transition: all 0.2s ease;
}

.challenge-card:hover {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.2);
    transform: translateX(4px);
}

.challenge-card.completed {
    opacity: 0.7;
    background: rgba(16, 185, 129, 0.05);
    border-color: rgba(16, 185, 129, 0.2);
}

.challenge-icon {
    font-size: 1.75rem;
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    flex-shrink: 0;
}

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

.challenge-info h5 {
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0 0 0.25rem 0;
}

.challenge-info p {
    font-size: 0.875rem;
    color: var(--text-muted);
    margin: 0;
    line-height: 1.4;
}

.challenge-reward {
    display: inline-block;
    font-size: 0.75rem;
    color: #fbbf24;
    font-weight: 600;
    margin-top: 0.25rem;
    padding: 0.125rem 0.5rem;
    background: rgba(251, 191, 36, 0.1);
    border-radius: 4px;
    border: 1px solid rgba(251, 191, 36, 0.2);
}

.challenge-progress {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-top: 0.5rem;
}

.progress-bar {
    flex: 1;
    height: 6px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 3px;
    overflow: hidden;
}

.progress-fill {
    height: 100%;
    background: linear-gradient(90deg, #10b981, #34d399);
    border-radius: 3px;
    transition: width 0.3s ease;
}

.challenge-card.completed .progress-fill {
    background: linear-gradient(90deg, #10b981, #10b981);
}

.progress-text {
    font-size: 0.75rem;
    color: var(--text-muted);
    font-weight: 500;
    white-space: nowrap;
}

.challenge-status {
    font-size: 0.75rem;
    color: #10b981;
    font-weight: 600;
}

.challenge-btn {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border: none;
    color: white;
    padding: 0.5rem 1rem;
    border-radius: 8px;
    font-size: 0.875rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    flex-shrink: 0;
}

.challenge-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
}

.challenge-btn:disabled,
.challenge-btn.claimed {
    background: rgba(255, 255, 255, 0.1);
    color: var(--text-muted);
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

/* Dashboard Main */
.dashboard-main {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
}

.section-title {
    font-size: 1.3rem;
    font-weight: 600;
    margin-bottom: 1.5rem;
    color: var(--text-primary);
}

/* Quick Actions */
.quick-actions {
    background: var(--glass-bg);
    backdrop-filter: blur(20px);
    border: 1px solid var(--glass-border);
    border-radius: 20px;
    padding: 2rem;
    animation: fadeInUp 0.6s ease-out 0.2s both;
}

.actions-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
}

.action-card {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 15px;
    padding: 1.5rem;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    text-align: center;
}

.action-card:hover {
    transform: translateY(-3px);
    background: rgba(255, 255, 255, 0.1);
    box-shadow: var(--shadow-md);
}

.action-icon {
    font-size: 2rem;
    margin-bottom: 0.5rem;
    color: var(--text-primary);
}

.action-card h4 {
    font-size: 1.1rem;
    font-weight: 600;
    margin-bottom: 0.25rem;
}

.action-card p {
    font-size: 0.9rem;
    color: var(--text-secondary);
}

/* Family Activity */
.family-activity {
    background: var(--glass-bg);
    backdrop-filter: blur(20px);
    border: 1px solid var(--glass-border);
    border-radius: 20px;
    padding: 2rem;
    animation: fadeInUp 0.6s ease-out 0.4s both;
}

.activity-feed {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.activity-item {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 12px;
    transition: all 0.3s ease;
}

.activity-item:hover {
    background: rgba(255, 255, 255, 0.08);
}

.activity-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    flex-shrink: 0;
}

.activity-content {
    flex: 1;
}

.activity-content p {
    margin-bottom: 0.25rem;
    font-size: 0.95rem;
}

.activity-time {
    font-size: 0.85rem;
    color: var(--text-muted);
}

/* Animations */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes gradientShift {
    0% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
    100% {
        background-position: 0% 50%;
    }
}

@keyframes titleReveal {
    0% {
        opacity: 0;
        transform: translateY(30px) scale(0.9);
        filter: blur(2px);
    }
    50% {
        opacity: 0.8;
        transform: translateY(-5px) scale(1.05);
        filter: blur(0px);
    }
    100% {
        opacity: 1;
        transform: translateY(0) scale(1);
        filter: blur(0px);
    }
}

@keyframes titleGlow {
    0%, 100% {
        opacity: 0;
        transform: scale(0.8);
    }
    50% {
        opacity: 0.4;
        transform: scale(1.2);
    }
}

@keyframes subtitleReveal {
    0% {
        opacity: 0;
        transform: translateY(20px) scale(0.95);
    }
    100% {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

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

@keyframes underlineExpand {
    0% {
        width: 0;
        opacity: 0;
        transform: translateX(-50%) scaleX(0);
    }
    100% {
        width: 120px;
        opacity: 1;
        transform: translateX(-50%) scaleX(1);
    }
}

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

@keyframes logoEntrance {
    0% {
        opacity: 0;
        transform: scale(0.8) rotate(-5deg);
    }
    50% {
        opacity: 0.8;
        transform: scale(1.1) rotate(3deg);
    }
    100% {
        opacity: 1;
        transform: scale(1) rotate(0deg);
    }
}

@keyframes logoFloat {
    0%, 100% {
        transform: translateY(0px) rotate(0deg);
    }
    25% {
        transform: translateY(-8px) rotate(1deg);
    }
    75% {
        transform: translateY(-5px) rotate(-1deg);
    }
}

@keyframes logoGlow {
    0%, 100% {
        opacity: 0.1;
        transform: scale(1);
    }
    50% {
        opacity: 0.25;
        transform: scale(1.15);
    }
}

/* Dramatic Dashboard Entrance Animations */
@keyframes dashboardDramaticEntrance {
    0% {
        opacity: 0;
        transform: scale(0.8) translateY(50px);
        filter: blur(10px);
    }
    60% {
        opacity: 0.8;
        transform: scale(1.02) translateY(-10px);
        filter: blur(2px);
    }
    100% {
        opacity: 1;
        transform: scale(1) translateY(0);
        filter: blur(0);
    }
}

@keyframes headerDramaticDrop {
    0% {
        opacity: 0;
        transform: translateY(-60px) scale(0.9);
        filter: blur(8px);
    }
    50% {
        opacity: 0.5;
        transform: translateY(10px) scale(1.01);
    }
    100% {
        opacity: 1;
        transform: translateY(0) scale(1);
        filter: blur(0);
    }
}

@keyframes cardDramaticFloat {
    0% {
        opacity: 0;
        transform: translateY(80px) scale(0.85) rotateX(10deg);
        filter: blur(12px);
    }
    50% {
        opacity: 0.7;
        transform: translateY(-15px) scale(1.02) rotateX(-2deg);
    }
    100% {
        opacity: 1;
        transform: translateY(0) scale(1) rotateX(0);
        filter: blur(0);
    }
}

@keyframes actionCardPop {
    0% {
        opacity: 0;
        transform: scale(0) rotate(-10deg);
    }
    60% {
        opacity: 1;
        transform: scale(1.1) rotate(2deg);
    }
    80% {
        transform: scale(0.95) rotate(-1deg);
    }
    100% {
        opacity: 1;
        transform: scale(1) rotate(0);
    }
}

@keyframes fadeInDown {
    from {
        opacity: 0;
        transform: translateY(-30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Responsive Design */
@media (max-width: 768px) {
    .dashboard-main {
        grid-template-columns: 1fr;
    }
    
    .actions-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 1rem;
    }
    
    .users-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .dashboard-header {
        flex-direction: column;
        gap: 1rem;
        text-align: center;
    }
    
    .app-title {
        font-size: 2rem;
    }
    
    .logo-icon {
        font-size: 2.5rem;
        padding: 1rem 1.5rem;
    }
}

@media (max-width: 480px) {
    .login-screen {
        padding: 1rem 0.5rem;
        align-items: flex-start;
    }
    
    .login-container {
        padding: 1rem;
        width: 100%;
        max-width: 100%;
    }
    
    .users-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 1rem;
        padding: 0.5rem;
    }
    
    .actions-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 0.8rem;
    }
    
    .dashboard-screen {
        padding: 1rem;
    }
    
    /* Marketplace tabs mobile fix */
    .tab-navigation {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        flex-wrap: nowrap;
        gap: 0.25rem;
        padding: 0.25rem;
    }
    
    .tab-btn {
        flex: 0 0 auto;
        padding: 0.5rem 0.75rem;
        font-size: 0.85rem;
        white-space: nowrap;
        min-width: 60px;
        display: flex;
        align-items: center;
        justify-content: center;
    }
}

/* Password Modal */
.password-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    animation: fadeIn 0.3s ease-out;
}

.login-screen {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    min-height: 100vh;
    padding: 2rem 1rem;
    position: relative;
    z-index: 10;
    overflow-y: auto;
}

.password-modal.hidden {
    display: none;
}

.modal-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(10px);
}

.modal-content {
    position: relative;
    background: rgba(255, 255, 255, 0.03);
    backdrop-filter: blur(25px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 24px;
    padding: 0;
    width: 90%;
    max-width: 400px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
    animation: modalSlideIn 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    overflow: hidden;
}

.modal-content::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
    z-index: 1;
}

.modal-content::after {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 50% 50%, rgba(102, 126, 234, 0.05) 0%, transparent 70%);
    pointer-events: none;
    z-index: 0;
}

.modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.8rem 2.2rem 1.2rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(255, 255, 255, 0.02);
    position: relative;
    z-index: 2;
}

.modal-title {
    font-size: 1.4rem;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0;
    background: linear-gradient(135deg, #ffffff 0%, #667eea 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    position: relative;
}

.modal-close {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.08);
    color: var(--text-secondary);
    font-size: 1.3rem;
    cursor: pointer;
    padding: 0.5rem;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
}

.modal-close::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.1) 0%, transparent 100%);
    opacity: 0;
    transition: opacity 0.3s ease;
}

.modal-close:hover {
    background: rgba(255, 255, 255, 0.1);
    color: var(--text-primary);
    transform: scale(1.05);
    border-color: rgba(255, 255, 255, 0.15);
}

.modal-close:hover::before {
    opacity: 1;
}

.modal-body {
    padding: 1.8rem 2.2rem;
    position: relative;
    z-index: 2;
}

.password-user-info {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1.8rem;
    padding: 1.2rem;
    background: rgba(255, 255, 255, 0.04);
    border-radius: 16px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    position: relative;
    overflow: hidden;
}

.password-user-info::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
    opacity: 0.5;
}

.password-avatar {
    width: 50px;
    height: 50px;
    position: relative;
    border-radius: 50%;
    overflow: hidden;
}

.password-user-initial {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: white;
    font-size: 1.2rem;
    font-weight: 600;
    z-index: 1;
}

.password-user-name {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0;
}

.password-input-group {
    position: relative;
    margin-bottom: 1rem;
}

.password-input {
    width: 100%;
    padding: 0.75rem 3rem 0.75rem 1rem;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 12px;
    color: var(--text-primary);
    font-size: 1rem;
    transition: all 0.3s ease;
    outline: none;
}

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

.password-input:focus {
    border-color: rgba(255, 255, 255, 0.4);
    background: rgba(255, 255, 255, 0.08);
    box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.1);
}

.password-toggle {
    position: absolute;
    right: 0.75rem;
    top: 50%;
    transform: translateY(-50%);
    cursor: pointer;
    color: var(--text-secondary);
    transition: color 0.2s ease;
    user-select: none;
}

.password-toggle:hover {
    color: var(--text-primary);
}

.password-error {
    color: #f87171;
    font-size: 0.9rem;
    margin-top: 0.5rem;
    padding: 0.5rem;
    background: rgba(248, 113, 113, 0.1);
    border-radius: 8px;
    border: 1px solid rgba(248, 113, 113, 0.2);
}

.password-error.hidden {
    display: none;
}

.modal-footer {
    display: flex;
    gap: 1rem;
    justify-content: flex-end;
    padding: 1rem 2rem 1.5rem;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.btn {
    padding: 0.75rem 1.5rem;
    border-radius: 10px;
    font-size: 0.95rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s ease;
    border: none;
    outline: none;
}

.btn-secondary {
    background: rgba(255, 255, 255, 0.1);
    color: var(--text-primary);
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.btn-secondary:hover {
    background: rgba(255, 255, 255, 0.15);
    transform: translateY(-2px);
}

.btn-primary {
    background: var(--primary-gradient);
    color: white;
    border: none;
}

.btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

.btn-primary:active {
    transform: translateY(0);
}

.btn-warning {
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
    color: white;
    border: none;
}

.btn-warning:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

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

@keyframes modalSlideIn {
    from {
        opacity: 0;
        transform: translateY(30px) scale(0.9);
        filter: blur(2px);
    }
    50% {
        opacity: 0.8;
        transform: translateY(-5px) scale(1.02);
        filter: blur(0px);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
        filter: blur(0px);
    }
}

/* Full-Screen App Styles */
.app-screen {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    background: transparent;
    transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);
    margin: 0;
    padding: 0;
    z-index: 10;
}

/* Aura Flow app keeps its background */
#auraFlowScreen {
    background: linear-gradient(180deg, #0f0f23 0%, #1a1a2e 100%);
}

.app-screen.hidden {
    opacity: 0;
    transform: scale(0.9);
    pointer-events: none;
}

.app-container {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    background: transparent;
}

.app-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 2rem;
    margin: 1rem;
    margin-top: calc(1rem + env(safe-area-inset-top));
    background: var(--glass-bg);
    backdrop-filter: blur(20px);
    border: 1px solid var(--glass-border);
    border-radius: 20px;
    animation: fadeInDown 0.6s ease-out;
}

.app-header .header-left {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.app-header .header-right {
    display: flex;
    align-items: center;
}

.app-header .app-title {
    font-size: 1.1rem;
    font-weight: 600;
}

.back-btn {
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: var(--text-primary);
    padding: 0.4rem 0.8rem;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.3s ease;
    font-size: 0.85rem;
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.back-btn:hover {
    background: rgba(255, 255, 255, 0.2);
    transform: translateY(-2px);
}

.settings-btn {
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: var(--text-primary);
    padding: 0.4rem;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.3s ease;
    font-size: 0.9rem;
}

/* Hide the question mark button specifically */
.settings-btn[title="Debug Info"] {
    display: none;
}

.settings-btn:hover {
    background: rgba(255, 255, 255, 0.2);
    transform: translateY(-2px);
}

.daily-status {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    margin-right: 1rem;
    padding: 0.5rem 1rem;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 10px;
    min-width: 100px;
}

.daily-net {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--text-primary);
}

.daily-limits {
    font-size: 0.8rem;
    color: var(--text-secondary);
    font-weight: 500;
}

.refresh-btn {
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-primary);
    cursor: pointer;
    transition: all 0.3s ease;
    margin-right: 0.3rem;
}

.refresh-btn:hover {
    background: rgba(255, 255, 255, 0.2);
    transform: rotate(90deg);
}

.refresh-btn svg {
    transition: transform 0.3s ease;
}

.activity-btn {
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
    margin-right: 0.3rem;
}

.activity-btn:hover {
    background: rgba(255, 255, 255, 0.2);
    transform: scale(1.1);
}

.activity-btn svg {
    transition: transform 0.3s ease;
}

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

.app-main {
    flex: 1;
    padding: 2rem;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2rem;
}

/* Enable scrolling only on desktop */
@media (min-width: 1024px) {
    .app-main {
        overflow-y: auto;
    }
}

.notification-container {
    position: fixed;
    top: 100px;
    right: -320px;
    z-index: 1000;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    transition: right 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.notification-container.show {
    right: 20px;
}

.aura-notification {
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 12px;
    padding: 1rem;
    min-width: 250px;
    max-width: 300px;
    opacity: 0;
    transform: translateX(20px);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    pointer-events: auto;
}

.aura-notification.show {
    opacity: 1;
    transform: translateX(0);
}

.aura-notification.error {
    border-color: rgba(248, 113, 113, 0.3);
    background: rgba(248, 113, 113, 0.1);
}

.aura-notification.warning {
    border-color: rgba(251, 191, 36, 0.3);
    background: rgba(251, 191, 36, 0.1);
}

.aura-notification.info {
    border-color: rgba(59, 130, 246, 0.3);
    background: rgba(59, 130, 246, 0.1);
}

.aura-notification h4 {
    margin: 0 0 0.5rem 0;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--text-primary);
}

.aura-notification p {
    margin: 0;
    font-size: 0.8rem;
    color: var(--text-secondary);
}

/* Modern People Grid */
.people-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
    padding: 1rem 0;
    width: 100%;
    max-width: 1000px;
    margin: 0 auto;
}

@media (min-width: 768px) {
    .people-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 1.5rem;
    }
}

@media (min-width: 1024px) {
    .people-grid {
        grid-template-columns: repeat(5, 1fr);
        gap: 1.5rem;
    }
}

/* Modern Person Card */
.person-card {
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.08) 0%, rgba(255, 255, 255, 0.03) 100%);
    backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 24px;
    padding: 1.25rem 1rem 3.5rem;
    cursor: pointer;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    text-align: center;
    position: relative;
    overflow: hidden;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
}

.person-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 4px;
    background: linear-gradient(90deg, #667eea 0%, #f093fb 50%, #4facfe 100%);
    opacity: 0;
    transition: opacity 0.3s ease;
}

.person-card::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: radial-gradient(circle at 50% 100%, rgba(102, 126, 234, 0.15) 0%, transparent 70%);
    opacity: 0;
    transition: opacity 0.4s ease;
    pointer-events: none;
}

.person-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 12px 40px rgba(102, 126, 234, 0.25);
    border-color: rgba(102, 126, 234, 0.4);
}

.person-card:hover::before {
    opacity: 1;
}

.person-card:hover::after {
    opacity: 1;
}

/* Avatar with gradient ring */
.person-avatar {
    width: 70px;
    height: 70px;
    margin: 0 auto 1rem;
    position: relative;
    border-radius: 50%;
    overflow: hidden;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    padding: 3px;
}

.person-avatar::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: linear-gradient(135deg, #667eea 0%, #f093fb 50%, #4facfe 100%);
    animation: avatarGlow 3s ease-in-out infinite;
}

@keyframes avatarGlow {
    0%, 100% { filter: brightness(1); }
    50% { filter: brightness(1.2); }
}

.person-initial {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: white;
    font-size: 1.6rem;
    font-weight: 700;
    z-index: 1;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
}

/* Modern Name Styling */
.person-name {
    font-size: 1.1rem;
    font-weight: 600;
    margin: 0 0 0.75rem;
    color: white;
    letter-spacing: 0.5px;
}

/* Card Middle Section */
.card-middle {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin: 0.5rem 0;
    padding: 0.5rem;
    background: rgba(0, 0, 0, 0.2);
    border-radius: 16px;
    border: 1px solid rgba(255, 255, 255, 0.05);
}

.aura-text {
    font-size: 0.75rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.6);
    margin-bottom: 0.2rem;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.aura-number {
    font-size: 2rem;
    font-weight: 800;
    background: linear-gradient(270deg, #667eea, #f093fb, #4facfe, #667eea);
    background-size: 300% 300%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    line-height: 1;
    transition: transform 0.3s ease;
    animation: auraNumberGradient 3s ease infinite;
    filter: drop-shadow(0 0 8px rgba(102, 126, 234, 0.3));
}

@keyframes auraNumberGradient {
    0% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
    100% {
        background-position: 0% 50%;
    }
}

.person-card:hover .aura-number {
    transform: scale(1.1);
}

.card-limit {
    font-size: 0.7rem;
    color: rgba(255, 255, 255, 0.4);
    font-weight: 500;
    text-align: center;
    margin-top: 0.25rem;
}

/* Modern Card Controls */
.card-controls {
    position: absolute;
    bottom: 1rem;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 0.75rem;
    align-items: center;
}

.card-btn {
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0.05) 100%);
    border: 1px solid rgba(255, 255, 255, 0.15);
    color: white;
    font-size: 1.1rem;
    font-weight: 700;
    width: 2.2rem;
    height: 2.2rem;
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

.card-btn-minus {
    background: linear-gradient(145deg, rgba(239, 68, 68, 0.2) 0%, rgba(239, 68, 68, 0.1) 100%);
    border-color: rgba(239, 68, 68, 0.3);
}

.card-btn-minus:hover {
    background: linear-gradient(145deg, rgba(239, 68, 68, 0.4) 0%, rgba(239, 68, 68, 0.2) 100%);
    transform: scale(1.1);
    box-shadow: 0 4px 15px rgba(239, 68, 68, 0.3);
}

.card-btn-plus {
    background: linear-gradient(145deg, rgba(34, 197, 94, 0.2) 0%, rgba(34, 197, 94, 0.1) 100%);
    border-color: rgba(34, 197, 94, 0.3);
}

.card-btn-plus:hover {
    background: linear-gradient(145deg, rgba(34, 197, 94, 0.4) 0%, rgba(34, 197, 94, 0.2) 100%);
    transform: scale(1.1);
    box-shadow: 0 4px 15px rgba(34, 197, 94, 0.3);
}

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

/* Mobile optimizations for touch devices */
@media (hover: none) and (pointer: coarse) {
    .person-card {
        transition: transform 0.2s ease, box-shadow 0.2s ease;
    }
    
    .person-card:hover {
        transform: none;
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
        border-color: rgba(255, 255, 255, 0.12);
    }
    
    .person-card:hover::before,
    .person-card:hover::after {
        opacity: 0;
    }
    
    .person-card:active {
        transform: scale(0.98);
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
    }
    
    .person-card:active::before {
        opacity: 1;
    }
    
    .person-card:hover .aura-number {
        transform: none;
    }
    
    .card-btn:hover {
        transform: none;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
    }
    
    .card-btn-minus:hover,
    .card-btn-plus:hover {
        transform: none;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
    }
    
    .card-btn:active {
        transform: scale(0.9);
    }
    
    /* Aura Flow Mobile Optimizations */
    .post-card {
        transition: transform 0.2s ease, box-shadow 0.2s ease;
    }
    
    .post-card:hover {
        transform: none;
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
        border-color: rgba(255, 255, 255, 0.1);
    }
    
    .post-card:hover::before {
        opacity: 0;
    }
    
    .post-card:active {
        transform: scale(0.98);
        box-shadow: 0 2px 15px rgba(0, 0, 0, 0.2);
    }
    
    .story-avatar:hover {
        transform: none;
    }
    
    .story-avatar:active {
        transform: scale(0.95);
    }
    
    .refresh-feed-btn:hover {
        transform: none;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
    }
    
    .refresh-feed-btn:active {
        transform: scale(0.9) rotate(180deg);
    }
    
    .plus-btn:hover {
        transform: none;
        box-shadow: 0 4px 20px rgba(102, 126, 234, 0.5);
    }
    
    .plus-btn:active {
        transform: scale(0.95);
    }
    
    .nav-btn:hover {
        background: none;
        color: rgba(255, 255, 255, 0.5);
    }
    
    .nav-btn:active {
        background: rgba(255, 255, 255, 0.1);
        color: white;
    }
    
}

.aura-updated {
    animation: auraPulse 0.6s ease-out;
}

@keyframes auraPulse {
    0% {
        transform: scale(1);
        border-color: rgba(255, 255, 255, 0.3);
        box-shadow: none;
    }
    50% {
        transform: scale(1.02);
        border-color: rgba(100, 255, 100, 0.4);
        box-shadow: 0 0 15px rgba(100, 255, 100, 0.2);
    }
    100% {
        transform: scale(1);
        border-color: var(--glass-border);
        box-shadow: none;
    }
}

/* Aura Control Styles */
.aura-control h4 {
    margin: 0 0 1rem 0;
    color: var(--text-primary);
    font-size: 1.2rem;
}

.reset-section {
    text-align: center;
    padding: 2rem 1rem;
}

.reset-description {
    color: var(--text-secondary);
    font-size: 1rem;
    margin-bottom: 2rem;
    line-height: 1.5;
}

.control-actions {
    display: flex;
    gap: 1rem;
    justify-content: center;
    flex-wrap: wrap;
}

.account-actions {
    display: flex;
    gap: 0.75rem;
    justify-content: flex-end;
}

/* Modern Marketplace Styles */
.marketplace-modal {
    max-width: 700px;
    max-height: 90vh;
    width: 92%;
    display: flex;
    flex-direction: column;
    background: linear-gradient(145deg, rgba(26, 26, 46, 0.98) 0%, rgba(15, 15, 35, 0.99) 100%);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 24px;
    box-shadow: 0 25px 80px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(255, 255, 255, 0.05);
    overflow: hidden;
    animation: marketplaceSlideIn 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

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

.modal-title-container {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.gem-counter {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    background: linear-gradient(145deg, rgba(255, 215, 0, 0.2) 0%, rgba(255, 215, 0, 0.08) 100%);
    padding: 0.5rem 1rem;
    border-radius: 20px;
    border: 1px solid rgba(255, 215, 0, 0.3);
    backdrop-filter: blur(15px);
    box-shadow: 0 4px 15px rgba(255, 215, 0, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

.gem-counter svg {
    color: #ffd700;
    filter: drop-shadow(0 0 6px rgba(255, 215, 0, 0.6));
}

.gem-counter span {
    color: #ffd700;
    font-weight: 700;
    font-size: 1rem;
    text-shadow: 0 0 8px rgba(255, 215, 0, 0.3);
}

.marketplace-modal .modal-body {
    flex: 1;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    padding: 0 1.5rem;
    min-height: 0;
}

.marketplace-tabs {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    min-height: 0;
}

.tab-navigation {
    display: flex;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    margin-bottom: 1.5rem;
    flex-shrink: 0;
    background: rgba(255, 255, 255, 0.02);
    border-radius: 12px;
    padding: 0.5rem;
    gap: 0.5rem;
}

.tab-btn {
    background: transparent;
    border: none;
    color: var(--text-secondary);
    padding: 0.6rem 1.2rem;
    cursor: pointer;
    font-size: 0.95rem;
    font-weight: 500;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    border-radius: 8px;
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}

.tab-btn:hover {
    color: var(--text-primary);
    background: rgba(255, 255, 255, 0.05);
}

.tab-btn.active {
    color: white;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    box-shadow: 0 4px 15px rgba(102, 126, 234, 0.3);
}

.tab-content {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    padding-right: 0.5rem;
    padding-bottom: 1rem;
    max-height: calc(85vh - 200px);
}

/* Custom scrollbar for webkit browsers */
.tab-content::-webkit-scrollbar {
    width: 8px;
}

.tab-content::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.1);
    border-radius: 4px;
}

.tab-content::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.3);
    border-radius: 4px;
}

.tab-content::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.5);
}

.tab-pane {
    display: none;
    height: 100%;
}

.tab-pane.active {
    display: block;
    animation: tabFadeIn 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    height: 100%;
}

@keyframes tabFadeIn {
    from { opacity: 0; transform: translateY(15px) scale(0.98); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

.tab-pane h4 {
    color: var(--text-primary);
    font-size: 1.2rem;
    font-weight: 600;
    margin-bottom: 1.5rem;
    background: linear-gradient(135deg, #ffffff 0%, #a0a0a0 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.background-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
    padding-bottom: 2rem;
}

.badges-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
    padding: 1rem;
    padding-bottom: 2rem;
}

.badge-item {
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.06) 0%, rgba(255, 255, 255, 0.02) 100%);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 16px;
    padding: 1.25rem 1rem;
    text-align: center;
    cursor: pointer;
    transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
}

.badge-item::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
    opacity: 0;
    transition: opacity 0.3s ease;
}

.badge-item:hover {
    transform: translateY(-5px) scale(1.02);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.3);
    border-color: rgba(255, 255, 255, 0.2);
}

.badge-item:hover::before {
    opacity: 1;
}

.badge-item.owned {
    background: linear-gradient(145deg, rgba(76, 175, 80, 0.12) 0%, rgba(76, 175, 80, 0.04) 100%);
    border-color: rgba(76, 175, 80, 0.4);
}

.badge-item.equipped {
    background: linear-gradient(145deg, rgba(255, 193, 7, 0.15) 0%, rgba(255, 193, 7, 0.05) 100%);
    border-color: rgba(255, 193, 7, 0.5);
    box-shadow: 0 0 25px rgba(255, 193, 7, 0.25);
}

.badge-icon {
    font-size: 2rem;
    margin-bottom: 0.5rem;
    display: block;
}

.badge-name {
    font-size: 0.9rem;
    font-weight: 600;
    margin-bottom: 0.5rem;
    color: var(--text-primary);
}

.badge-price {
    font-size: 0.8rem;
    color: var(--text-secondary);
    margin-bottom: 0.5rem;
}

.badge-actions {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.badge-btn {
    padding: 0.5rem 1rem;
    border: none;
    border-radius: 8px;
    font-size: 0.8rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s ease;
}

.badge-btn.primary {
    background: var(--primary-gradient);
    color: white;
}

.badge-btn.secondary {
    background: var(--glass-bg);
    color: var(--text-primary);
    border: 1px solid var(--glass-border);
}

.badge-btn.success {
    background: linear-gradient(135deg, #4caf50, #45a049);
    color: white;
}

.badge-btn:hover {
    transform: translateY(-1px);
    box-shadow: var(--shadow-md);
}

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

/* Marketplace Frames Grid */
.frames-marketplace-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 1rem;
}

.marketplace-frame-item {
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.06) 0%, rgba(255, 255, 255, 0.02) 100%);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 16px;
    padding: 1.25rem 1rem;
    text-align: center;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.marketplace-frame-item:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-lg);
    border-color: rgba(255, 255, 255, 0.2);
}

.marketplace-frame-item.owned {
    background: rgba(76, 175, 80, 0.08);
    border-color: rgba(76, 175, 80, 0.3);
}

.marketplace-frame-item.equipped {
    background: rgba(255, 193, 7, 0.1);
    border-color: rgba(255, 193, 7, 0.5);
    box-shadow: 0 0 25px rgba(255, 193, 7, 0.25);
}

.marketplace-frame-preview {
    margin-bottom: 0.75rem;
}

.marketplace-frame-name {
    font-size: 0.9rem;
    font-weight: 600;
    margin-bottom: 0.5rem;
    color: var(--text-primary);
}

.marketplace-frame-price {
    font-size: 0.8rem;
    color: var(--text-secondary);
    margin-bottom: 0.75rem;
}

.marketplace-frame-actions {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    width: 100%;
    margin-top: auto;
}

.marketplace-frame-btn {
    padding: 0.5rem 1rem;
    border: none;
    border-radius: 8px;
    font-size: 0.8rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s ease;
}

.marketplace-frame-btn.primary {
    background: var(--primary-gradient);
    color: white;
}

.marketplace-frame-btn.primary:hover {
    transform: scale(1.05);
}

.marketplace-frame-btn.success {
    background: linear-gradient(135deg, #4caf50, #45a049);
    color: white;
}

.marketplace-frame-btn.success:hover {
    transform: scale(1.05);
}

.marketplace-frame-btn.secondary {
    background: var(--glass-bg);
    color: var(--text-primary);
    border: 1px solid var(--glass-border);
}

/* Marketplace Backgrounds Grid */
.backgrounds-marketplace-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 1rem;
}

.marketplace-bg-item {
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.06) 0%, rgba(255, 255, 255, 0.02) 100%);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 16px;
    padding: 1.25rem 1rem;
    text-align: center;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.marketplace-bg-item:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-lg);
    border-color: rgba(255, 255, 255, 0.2);
}

.marketplace-bg-item.owned {
    background: rgba(76, 175, 80, 0.08);
    border-color: rgba(76, 175, 80, 0.3);
}

.marketplace-bg-item.equipped {
    background: rgba(255, 193, 7, 0.1);
    border-color: rgba(255, 193, 7, 0.5);
    box-shadow: 0 0 25px rgba(255, 193, 7, 0.25);
}

.marketplace-bg-preview {
    width: 70px;
    height: 50px;
    border-radius: 12px;
    margin-bottom: 0.75rem;
    position: relative;
}

.marketplace-bg-name {
    font-size: 0.9rem;
    font-weight: 600;
    margin-bottom: 0.5rem;
    color: var(--text-primary);
}

.marketplace-bg-price {
    font-size: 0.8rem;
    color: var(--text-secondary);
    margin-bottom: 0.75rem;
}

.marketplace-bg-actions {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    width: 100%;
    margin-top: auto;
}

.marketplace-bg-btn {
    padding: 0.5rem 1rem;
    border: none;
    border-radius: 8px;
    font-size: 0.8rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s ease;
}

.marketplace-bg-btn.primary {
    background: var(--primary-gradient);
    color: white;
}

.marketplace-bg-btn.primary:hover {
    transform: scale(1.05);
}

.marketplace-bg-btn.success {
    background: linear-gradient(135deg, #4caf50, #45a049);
    color: white;
}

.marketplace-bg-btn.success:hover {
    transform: scale(1.05);
}

.marketplace-bg-btn.secondary {
    background: var(--glass-bg);
    color: var(--text-primary);
    border: 1px solid var(--glass-border);
}

.bg-option {
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.06) 0%, rgba(255, 255, 255, 0.02) 100%);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 16px;
    padding: 0.875rem;
    text-align: center;
    cursor: pointer;
    transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
}

.bg-option::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
    opacity: 0;
    transition: opacity 0.3s ease;
}

.bg-option:hover {
    transform: translateY(-6px) scale(1.02);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.3), 0 0 0 1px rgba(102, 126, 234, 0.15);
    border-color: rgba(255, 255, 255, 0.2);
}

.bg-option:hover::before {
    opacity: 1;
}

.bg-option.owned {
    border-color: rgba(76, 175, 80, 0.4);
    background: linear-gradient(145deg, rgba(76, 175, 80, 0.12) 0%, rgba(76, 175, 80, 0.04) 100%);
}

.bg-option.owned::after {
    content: '✓';
    position: absolute;
    top: 8px;
    right: 8px;
    width: 22px;
    height: 22px;
    background: linear-gradient(135deg, #4caf50 0%, #45a049 100%);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    color: white;
    box-shadow: 0 2px 8px rgba(76, 175, 80, 0.4);
}

.bg-preview {
    width: 100%;
    aspect-ratio: 16 / 10;
    border-radius: 12px;
    margin-bottom: 0.75rem;
    position: relative;
    overflow: hidden;
    transition: transform 0.3s ease;
}

.bg-option:hover .bg-preview {
    transform: scale(1.05);
}

.bg-option p {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0 0 0.25rem;
}

.bg-option .price {
    font-size: 0.75rem;
    color: #ffd700;
    font-weight: 600;
    background: rgba(255, 215, 0, 0.12);
    padding: 0.25rem 0.6rem;
    border-radius: 10px;
    display: inline-block;
    border: 1px solid rgba(255, 215, 0, 0.2);
}

.gradient-preview-1 {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

.gradient-preview-2 {
    background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
}

.gradient-preview-3 {
    background: linear-gradient(135deg, #1b5e20 0%, #004d40 100%);
}

.gradient-preview-4 {
    background: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%);
}

.gradient-preview-5 {
    background: linear-gradient(135deg, #fa709a 0%, #fee140 100%);
}

.gradient-preview-6 {
    background: linear-gradient(135deg, #30cfd0 0%, #330867 100%);
}

.gradient-preview-7 {
    background: linear-gradient(135deg, #4a148c 0%, #880e4f 100%);
}

.gradient-preview-8 {
    background: linear-gradient(135deg, #ff9a56 0%, #ff6a88 100%);
}

.gradient-preview-9 {
    background: linear-gradient(135deg, #01579b 0%, #004d40 100%);
}

.gradient-preview-10 {
    background: linear-gradient(135deg, #b71c1c 0%, #880e4f 100%);
}

.gradient-preview-11 {
    background: linear-gradient(135deg, #1b5e20 0%, #004d40 100%);
}

.gradient-preview-12 {
    background: linear-gradient(135deg, #a8caba 0%, #5d4157 100%);
}

.gradient-preview-13 {
    background: linear-gradient(135deg, #ff6f00 0%, #bf360c 100%);
}

.gradient-preview-14 {
    background: linear-gradient(135deg, #1a237e 0%, #283593 100%);
}

.gradient-preview-15 {
    background: linear-gradient(135deg, #667db6 0%, #0082c8 100%);
}

.gradient-preview-16 {
    background: linear-gradient(135deg, #f83600 0%, #f9d423 100%);
}

.gradient-preview-17 {
    background: linear-gradient(135deg, #0f0c29 0%, #302b63 50%, #24243e 100%);
}

.gradient-preview-18 {
    background: linear-gradient(135deg, #bf360c 0%, #e65100 100%);
}

.gradient-preview-19 {
    background: linear-gradient(135deg, #0d47a1 0%, #1565c0 100%);
}

.gradient-preview-20 {
    background: linear-gradient(135deg, #f6d365 0%, #fda085 100%);
}

.gradient-preview-21 {
    background: linear-gradient(135deg, #134e5e 0%, #71b280 100%);
}

.gradient-preview-22 {
    background: linear-gradient(135deg, #870000 0%, #190a05 100%);
}

.gradient-preview-23 {
    background: linear-gradient(135deg, #0d47a1 0%, #01579b 100%);
}

.gradient-preview-24 {
    background: linear-gradient(135deg, #8e2de2 0%, #4a00e0 100%);
}

.gradient-preview-25 {
    background: linear-gradient(135deg, #ff6b35 0%, #f77737 100%);
}

.gradient-preview-26 {
    background: linear-gradient(135deg, #ff9a9e 0%, #fecfef 100%);
}

.gradient-preview-27 {
    background: linear-gradient(135deg, #434343 0%, #000000 100%);
}

.gradient-preview-28 {
    background: linear-gradient(135deg, #1b5e20 0%, #2e7d32 100%);
}

.gradient-preview-29 {
    background: linear-gradient(135deg, #ff0084 0%, #33001b 100%);
}

.gradient-preview-30 {
    background: linear-gradient(135deg, #004d40 0%, #00695c 100%);
}

/* Animated Background Previews */
.animated-bg-1 {
    animation: gradientShift1 8s ease infinite;
    background-size: 200% 200%;
}

.animated-bg-2 {
    animation: gradientShift2 10s ease infinite;
    background-size: 200% 200%;
}

.animated-bg-3 {
    animation: gradientShift3 12s ease infinite;
    background-size: 200% 200%;
}

.animated-bg-4 {
    animation: gradientShift4 9s ease infinite;
    background-size: 200% 200%;
}

.animated-bg-5 {
    animation: gradientShift5 11s ease infinite;
    background-size: 200% 200%;
}

.animated-bg-6 {
    animation: gradientShift6 7s ease infinite;
    background-size: 200% 200%;
}

.animated-bg-7 {
    animation: gradientShift7 13s ease infinite;
    background-size: 200% 200%;
}

.animated-bg-8 {
    animation: gradientShift8 8s ease infinite;
    background-size: 200% 200%;
}

.animated-bg-9 {
    animation: gradientShift9 10s ease infinite;
    background-size: 200% 200%;
}

.animated-bg-10 {
    animation: gradientShift10 14s ease infinite;
    background-size: 200% 200%;
}

.animated-bg-11 {
    animation: gradientShift11 9s ease infinite;
    background-size: 200% 200%;
}

.animated-bg-12 {
    animation: gradientShift12 11s ease infinite;
    background-size: 200% 200%;
}

.animated-bg-13 {
    animation: gradientShift13 8s ease infinite;
    background-size: 200% 200%;
}

.animated-bg-14 {
    animation: gradientShift14 12s ease infinite;
    background-size: 200% 200%;
}

.animated-bg-15 {
    animation: gradientShift15 10s ease infinite;
    background-size: 200% 200%;
}

.animated-bg-16 {
    animation: gradientShift16 7s ease infinite;
    background-size: 200% 200%;
}

.animated-bg-17 {
    animation: gradientShift17 15s ease infinite;
    background-size: 200% 200%;
}

.animated-bg-18 {
    animation: gradientShift18 9s ease infinite;
    background-size: 200% 200%;
}

.animated-bg-19 {
    animation: gradientShift19 8s ease infinite;
    background-size: 200% 200%;
}

.animated-bg-20 {
    animation: gradientShift20 11s ease infinite;
    background-size: 200% 200%;
}

.animated-bg-21 {
    animation: gradientShift21 13s ease infinite;
    background-size: 200% 200%;
}

.animated-bg-22 {
    animation: gradientShift22 10s ease infinite;
    background-size: 200% 200%;
}

.animated-bg-23 {
    animation: gradientShift23 8s ease infinite;
    background-size: 200% 200%;
}

.animated-bg-24 {
    animation: gradientShift24 14s ease infinite;
    background-size: 200% 200%;
}

.animated-bg-25 {
    animation: gradientShift25 9s ease infinite;
    background-size: 200% 200%;
}

.animated-bg-26 {
    animation: gradientShift26 12s ease infinite;
    background-size: 200% 200%;
}

.animated-bg-27 {
    animation: gradientShift27 7s ease infinite;
    background-size: 200% 200%;
}

.animated-bg-28 {
    animation: gradientShift28 10s ease infinite;
    background-size: 200% 200%;
}

.animated-bg-29 {
    animation: gradientShift29 11s ease infinite;
    background-size: 200% 200%;
}

.animated-bg-30 {
    animation: gradientShift30 8s ease infinite;
    background-size: 200% 200%;
}

/* Gradient Animation Keyframes */
@keyframes gradientShift1 {
    0%, 100% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
}

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

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

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

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

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

@keyframes gradientShift7 {
    0%, 100% { background-position: 0% 25%; }
    50% { background-position: 100% 75%; }
}

@keyframes gradientShift8 {
    0%, 100% { background-position: 25% 0%; }
    50% { background-position: 75% 100%; }
}

@keyframes gradientShift9 {
    0%, 100% { background-position: 75% 25%; }
    50% { background-position: 25% 75%; }
}

@keyframes gradientShift10 {
    0%, 100% { background-position: 0% 75%; }
    50% { background-position: 100% 25%; }
}

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

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

@keyframes gradientShift13 {
    0%, 100% { background-position: 25% 50%; }
    50% { background-position: 75% 50%; }
}

@keyframes gradientShift14 {
    0%, 100% { background-position: 50% 25%; }
    50% { background-position: 50% 75%; }
}

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

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

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

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

@keyframes gradientShift19 {
    0%, 100% { background-position: 75% 0%; }
    50% { background-position: 25% 100%; }
}

@keyframes gradientShift20 {
    0%, 100% { background-position: 25% 25%; }
    50% { background-position: 75% 75%; }
}

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

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

@keyframes gradientShift23 {
    0%, 100% { background-position: 50% 75%; }
    50% { background-position: 50% 25%; }
}

@keyframes gradientShift24 {
    0%, 100% { background-position: 75% 75%; }
    50% { background-position: 25% 25%; }
}

@keyframes gradientShift25 {
    0%, 100% { background-position: 0% 25%; }
    50% { background-position: 100% 75%; }
}

@keyframes gradientShift26 {
    0%, 100% { background-position: 25% 75%; }
    50% { background-position: 75% 25%; }
}

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

@keyframes gradientShift28 {
    0%, 100% { background-position: 0% 75%; }
    50% { background-position: 100% 25%; }
}

@keyframes gradientShift29 {
    0%, 100% { background-position: 75% 50%; }
    50% { background-position: 25% 50%; }
}

@keyframes gradientShift30 {
    0%, 100% { background-position: 100% 25%; }
    50% { background-position: 0% 75%; }
}

.bg-option p {
    color: var(--text-primary);
    font-weight: 500;
    margin: 0.5rem 0;
}

.price {
    color: #4ade80;
    font-weight: 600;
    font-size: 0.9rem;
}

.empty-section {
    text-align: center;
    padding: 3rem 1rem;
    color: var(--text-secondary);
}

.empty-section p {
    font-size: 1.1rem;
    margin: 0.5rem 0;
}

/* User Info Button Styles */
.user-info-btn {
    background: none;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.5rem;
    border-radius: 12px;
    transition: all 0.2s ease;
    color: var(--text-primary);
}

.user-info-btn:hover {
    background: var(--glass-bg);
    transform: translateY(-1px);
}

.user-info-btn:active {
    transform: translateY(0);
}

/* Activity Modal Styles */
.activity-container {
    padding: 1rem;
}

.activity-list {
    max-height: 400px;
    overflow-y: auto;
    margin-top: 1rem;
}

.activity-item {
    display: flex;
    align-items: center;
    padding: 1rem;
    margin-bottom: 0.5rem;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 8px;
    border-left: 4px solid;
    transition: all 0.3s ease;
}

.activity-item.increment {
    border-left-color: #4ade80;
}

.activity-item.decrement {
    border-left-color: #f87171;
}

.activity-item:hover {
    background: rgba(255, 255, 255, 0.1);
}

.activity-icon {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    font-size: 1.2rem;
    margin-right: 1rem;
    flex-shrink: 0;
}

.activity-item.increment .activity-icon {
    background: rgba(74, 222, 128, 0.2);
    color: #4ade80;
}

.activity-item.decrement .activity-icon {
    background: rgba(248, 113, 113, 0.2);
    color: #f87171;
}

.activity-content {
    flex: 1;
}

.activity-text {
    font-size: 0.9rem;
    line-height: 1.4;
    color: var(--text-primary);
}

.activity-time {
    font-size: 0.8rem;
    color: var(--text-secondary);
    margin-top: 0.25rem;
}

.empty-activity {
    text-align: center;
    padding: 2rem;
    color: var(--text-secondary);
}

.empty-activity-icon {
    font-size: 3rem;
    margin-bottom: 1rem;
    opacity: 0.5;
}

.empty-activity h4 {
    margin-bottom: 0.5rem;
    color: var(--text-primary);
}

.empty-activity p {
    font-size: 0.9rem;
}

/* User Edit Modal Styles */
.user-edit-container {
    max-height: 55vh;
    overflow-y: auto;
}

.user-edit-container h4 {
    margin-bottom: 1rem;
    color: var(--text-primary);
    font-weight: 600;
}

.users-edit-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 1rem;
}

.user-edit-card {
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    border-radius: 12px;
    padding: 1rem;
    backdrop-filter: blur(10px);
    transition: all 0.2s ease;
}

.user-edit-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-lg);
}

.user-edit-header {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 0.75rem;
}

.user-edit-name {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0;
}

.user-edit-fields {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.field-group {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.field-group label {
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--text-secondary);
}

.field-group input {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    padding: 0.75rem;
    color: var(--text-primary);
    font-size: 1rem;
    transition: all 0.2s ease;
}

.field-group input:focus {
    outline: none;
    border-color: var(--accent-gradient);
    background: rgba(255, 255, 255, 0.08);
}

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

/* Purchased background styling */
.bg-option.owned {
    position: relative;
    opacity: 0.8;
}

.bg-option.owned::after {
    content: '✓';
    position: absolute;
    top: 8px;
    right: 8px;
    background: linear-gradient(135deg, #4caf50, #45a049);
    color: white;
    border-radius: 50%;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: bold;
}

.bg-option.owned {
    background: rgba(255, 215, 0, 0.05);
    position: relative;
}

.bg-option.owned::before {
    content: '';
    position: absolute;
    top: -2px;
    left: -2px;
    right: -2px;
    bottom: -2px;
    background: rgba(255, 215, 0, 0.05);
    border-radius: 12px;
    z-index: -1;
}


.bg-option.owned:hover {
    transform: none;
    cursor: default;
}

/* Locker Styles */
.locker-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 1.5rem;
    padding: 1rem;
}

.locker-tabs {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
}

.locker-tab-navigation {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 1.5rem;
    background: rgba(255, 255, 255, 0.02);
    border-radius: 10px;
    padding: 0.4rem;
}

.locker-tab-btn {
    background: transparent;
    border: none;
    color: var(--text-secondary);
    padding: 0.5rem 1rem;
    cursor: pointer;
    font-size: 0.9rem;
    font-weight: 500;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    border-radius: 8px;
    flex: 1;
}

.locker-tab-btn:hover {
    color: var(--text-primary);
    background: rgba(255, 255, 255, 0.05);
}

.locker-tab-btn.active {
    color: white;
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.8) 0%, rgba(118, 75, 162, 0.8) 100%);
    box-shadow: 0 4px 12px rgba(102, 126, 234, 0.25);
}

.locker-tab-content {
    flex: 1;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, 0.3);
}

.locker-tab-pane {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 1rem 0;
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, 0.3) transparent;
    min-height: 0;
}

.tab-pane::-webkit-scrollbar {
    width: 6px;
}

.tab-pane::-webkit-scrollbar-track {
    background: transparent;
}

.tab-pane::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.3);
    border-radius: 3px;
}

.tab-pane::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.5);
}

.locker-tab-pane {
    display: none;
}

.locker-tab-pane.active {
    display: block;
}

.owned-badges-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 1.5rem;
    padding: 1rem;
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, 0.3);
}

.owned-badge-item {
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    border-radius: 12px;
    padding: 1.5rem;
    text-align: center;
    transition: all 0.3s ease;
    backdrop-filter: blur(10px);
    position: relative;
}

.owned-badge-item:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-lg);
    border-color: rgba(255, 255, 255, 0.3);
}

.owned-badge-item.equipped {
    background: rgba(255, 193, 7, 0.1);
    border-color: rgba(255, 193, 7, 0.5);
    box-shadow: 0 0 20px rgba(255, 193, 7, 0.3);
}

.owned-badge-icon {
    font-size: 3rem;
    margin-bottom: 1rem;
    display: block;
}

.owned-badge-name {
    font-size: 1rem;
    font-weight: 600;
    margin-bottom: 1rem;
    color: var(--text-primary);
}

/* Owned Frame Items - Modern style matching badges */
.owned-frame-item {
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    border-radius: 12px;
    padding: 1.5rem;
    text-align: center;
    transition: all 0.3s ease;
    backdrop-filter: blur(10px);
    position: relative;
}

.owned-frame-item:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-lg);
    border-color: rgba(255, 255, 255, 0.3);
}

.owned-frame-item.equipped {
    background: rgba(255, 193, 7, 0.1);
    border-color: rgba(255, 193, 7, 0.5);
    box-shadow: 0 0 20px rgba(255, 193, 7, 0.3);
}

.owned-frame-preview {
    margin: 0 auto 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

.owned-frame-name {
    font-size: 1rem;
    font-weight: 600;
    margin-bottom: 1rem;
    color: var(--text-primary);
}

.owned-badge-actions {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.owned-badge-btn {
    padding: 0.75rem 1.5rem;
    border: none;
    border-radius: 8px;
    font-size: 0.9rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s ease;
}

.owned-badge-btn.primary {
    background: var(--primary-gradient);
    color: white;
}

.owned-badge-btn.secondary {
    background: var(--glass-bg);
    color: var(--text-primary);
    border: 1px solid var(--glass-border);
}

.owned-badge-btn.success {
    background: linear-gradient(135deg, #4caf50, #45a049);
    color: white;
}

.owned-badge-btn:hover {
    transform: translateY(-1px);
    box-shadow: var(--shadow-md);
}

.owned-badge-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none;
}

.locker-item {
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    border-radius: 16px;
    padding: 1rem;
    backdrop-filter: blur(10px);
    transition: all 0.2s ease;
    cursor: pointer;
    text-align: center;
    position: relative;
}

.locker-item:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-lg);
}

.locker-preview {
    width: 100%;
    height: 80px;
    border-radius: 8px;
    margin-bottom: 0.75rem;
}

.locker-item p {
    color: var(--text-primary);
    font-weight: 500;
    margin: 0.5rem 0;
}

.owned-badge {
    position: absolute;
    top: 10px;
    right: 10px;
    background: #4ade80;
    color: white;
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 0.7rem;
    font-weight: 600;
}

/* Modern Aura Flow Styles */
.aura-flow-main {
    flex: 1;
    display: flex;
    flex-direction: column;
    position: relative;
    padding-bottom: 80px;
    overflow: hidden;
}

.flow-view {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    transform: translateX(100%);
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.3s ease;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

.flow-view.active {
    opacity: 1;
    transform: translateX(0);
}

/* Modern Feed Styles */
.feed-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 1.25rem;
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.08) 0%, rgba(255, 255, 255, 0.03) 100%);
    backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 20px;
    margin: 1rem;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
}

.feed-header h3 {
    font-size: 1.3rem;
    font-weight: 700;
    background: linear-gradient(135deg, #667eea 0%, #f093fb 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin: 0;
}

.refresh-feed-btn {
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0.05) 100%);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 12px;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

.refresh-feed-btn:hover {
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.2) 0%, rgba(255, 255, 255, 0.1) 100%);
    transform: scale(1.1) rotate(180deg);
    box-shadow: 0 4px 15px rgba(102, 126, 234, 0.3);
}

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

.feed-container {
    padding: 0 1rem 1rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

/* Modern Post Styles */
.post-card {
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.06) 0%, rgba(255, 255, 255, 0.02) 100%);
    backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 24px;
    padding: 1.5rem;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
    position: relative;
    overflow: hidden;
}

.post-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 3px;
    background: linear-gradient(90deg, #667eea 0%, #f093fb 100%);
    opacity: 0;
    transition: opacity 0.3s ease;
}

.post-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 40px rgba(102, 126, 234, 0.15);
    border-color: rgba(102, 126, 234, 0.3);
}

.post-card:hover::before {
    opacity: 1;
}

.post-header {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1rem;
}

.post-avatar {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-weight: 700;
    font-size: 1rem;
    box-shadow: 0 2px 10px rgba(102, 126, 234, 0.4);
    border: 2px solid rgba(255, 255, 255, 0.2);
}

.post-user-info {
    flex: 1;
}

.post-username {
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 0.2rem;
}

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

.post-content {
    margin-bottom: 1rem;
}

.post-text {
    color: var(--text-primary);
    line-height: 1.5;
    margin-bottom: 1rem;
}

.post-image {
    width: 100%;
    border-radius: 15px;
    margin-bottom: 1rem;
    object-fit: cover;
    max-height: 400px;
}

.post-poll {
    background: rgba(255, 255, 255, 0.05);
    border-radius: 12px;
    padding: 1rem;
    margin-bottom: 1rem;
}

.poll-question {
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 1rem;
}

.poll-option {
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 8px;
    padding: 0.75rem;
    margin-bottom: 0.5rem;
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

.poll-option:hover {
    background: rgba(255, 255, 255, 0.15);
}

.poll-option.selected {
    background: rgba(74, 222, 128, 0.2);
    border-color: rgba(74, 222, 128, 0.4);
}

.poll-bar {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    background: rgba(74, 222, 128, 0.3);
    border-radius: 8px;
    transition: width 0.3s ease;
}

.poll-text {
    position: relative;
    z-index: 1;
    color: var(--text-primary);
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    padding-right: 1rem;
}

.poll-text span:first-child {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.poll-percentage {
    position: static;
    right: auto;
    top: auto;
    transform: none;
    color: var(--text-secondary);
    font-size: 0.9rem;
    font-weight: 600;
    flex-shrink: 0;
    background: rgba(255, 255, 255, 0.1);
    padding: 0.25rem 0.5rem;
    border-radius: 4px;
    margin-left: auto;
}

.post-actions {
    display: flex;
    gap: 1rem;
    padding-top: 1rem;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.post-action-btn {
    background: none;
    border: none;
    color: var(--text-secondary);
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem;
    border-radius: 8px;
    transition: all 0.3s ease;
    font-size: 0.9rem;
}

.post-action-btn:hover {
    background: rgba(255, 255, 255, 0.1);
    color: var(--text-primary);
}

.post-action-btn.liked {
    color: #ef4444;
}

/* Shorts Styles */
.shorts-container {
    height: 100%;
    position: relative;
    overflow: hidden;
}

.short-video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.short-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to bottom, transparent 0%, rgba(0, 0, 0, 0.7) 100%);
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 2rem;
    color: white;
}

.short-info {
    margin-bottom: 1rem;
}

.short-username {
    font-weight: 600;
    font-size: 1.1rem;
    margin-bottom: 0.5rem;
}

.short-caption {
    font-size: 0.9rem;
    line-height: 1.4;
    opacity: 0.9;
}

.short-actions {
    position: absolute;
    right: 1rem;
    bottom: 2rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.short-action-btn {
    background: rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 50%;
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    cursor: pointer;
    transition: all 0.3s ease;
}

.short-action-btn:hover {
    background: rgba(255, 255, 255, 0.3);
    transform: scale(1.1);
}

.short-action-btn.liked {
    background: rgba(239, 68, 68, 0.8);
    border-color: rgba(239, 68, 68, 0.9);
}

/* Modern Bottom Navigation */
.flow-nav {
    position: fixed;
    bottom: 10px;
    left: 10px;
    right: 10px;
    background: linear-gradient(180deg, rgba(26, 26, 46, 0.95) 0%, rgba(15, 15, 35, 0.98) 100%);
    backdrop-filter: blur(25px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 24px;
    display: flex;
    justify-content: space-around;
    align-items: center;
    padding: 0.75rem 0;
    z-index: 100;
    padding-bottom: calc(0.75rem + env(safe-area-inset-bottom));
    box-shadow: 0 -4px 30px rgba(0, 0, 0, 0.4), 0 4px 20px rgba(0, 0, 0, 0.3);
}

.nav-btn {
    background: none;
    border: none;
    color: rgba(255, 255, 255, 0.5);
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.3rem;
    padding: 0.5rem 1.25rem;
    border-radius: 16px;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    min-width: 70px;
}

.nav-btn:hover {
    background: rgba(255, 255, 255, 0.08);
    color: rgba(255, 255, 255, 0.8);
}

.nav-btn.active {
    color: white;
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.3) 0%, rgba(240, 147, 251, 0.2) 100%);
    box-shadow: 0 4px 15px rgba(102, 126, 234, 0.3);
}

.nav-btn svg {
    width: 26px;
    height: 26px;
    transition: transform 0.2s ease;
}

.nav-btn:active svg {
    transform: scale(0.9);
}

.nav-btn span {
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.5px;
}

.plus-btn {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 50%, #f093fb 100%);
    border-radius: 18px;
    width: 52px;
    height: 52px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 20px rgba(102, 126, 234, 0.5);
    transform: scale(1);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    border: 2px solid rgba(255, 255, 255, 0.2);
}

.plus-btn:hover {
    transform: scale(1.08) rotate(90deg);
    box-shadow: 0 6px 25px rgba(102, 126, 234, 0.6);
}

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

.plus-icon {
    color: white;
    font-size: 1.8rem;
    font-weight: 300;
    line-height: 1;
}

/* Create Modal */
.create-modal {
    max-width: 400px;
}

.create-options {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.create-option {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 15px;
    padding: 1.5rem;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    text-align: center;
}

.create-option:hover {
    background: rgba(255, 255, 255, 0.1);
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

.create-icon {
    font-size: 2.5rem;
    margin-bottom: 1rem;
}

.create-option h4 {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 0.5rem;
}

.create-option p {
    font-size: 0.9rem;
    color: var(--text-secondary);
}

/* Post Creation Modal */
.post-creation-modal {
    max-width: 600px;
    max-height: 90vh;
    overflow-y: auto;
}

.post-type-selector {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 1.5rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.post-type-btn {
    flex: 1;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 10px;
    padding: 0.75rem;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    color: var(--text-secondary);
}

.post-type-btn:hover {
    background: rgba(255, 255, 255, 0.1);
    color: var(--text-primary);
}

.post-type-btn.active {
    background: var(--primary-gradient);
    border-color: transparent;
    color: white;
}

.post-type-btn span:first-child {
    font-size: 1.5rem;
}

.post-type-btn span:last-child {
    font-size: 0.9rem;
    font-weight: 500;
}

.post-content-section {
    display: none;
    margin-bottom: 1.5rem;
}

.post-content-section.active {
    display: block;
    animation: fadeIn 0.3s ease;
}

.post-text-input {
    width: 100%;
    min-height: 120px;
    padding: 1rem;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 12px;
    color: var(--text-primary);
    font-family: inherit;
    font-size: 1rem;
    resize: vertical;
    outline: none;
    transition: all 0.3s ease;
}

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

.post-text-input:focus {
    border-color: rgba(255, 255, 255, 0.4);
    background: rgba(255, 255, 255, 0.08);
    box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.1);
}

.char-count {
    text-align: right;
    margin-top: 0.5rem;
    color: var(--text-muted);
    font-size: 0.85rem;
}

.image-upload-area {
    margin-top: 1rem;
}

/* Poll Styles */
.poll-options-container {
    margin-top: 1rem;
}

.poll-option {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
}

.poll-option-input {
    flex: 1;
    padding: 0.75rem 1rem;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 8px;
    color: var(--text-primary);
    font-family: inherit;
    font-size: 0.95rem;
    outline: none;
    transition: all 0.3s ease;
}

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

.poll-option-input:focus {
    border-color: rgba(255, 255, 255, 0.4);
    background: rgba(255, 255, 255, 0.08);
    box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.1);
}

.remove-option-btn {
    width: 32px;
    height: 32px;
    border: none;
    background: rgba(255, 67, 54, 0.2);
    color: #ff4336;
    border-radius: 6px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    font-weight: bold;
    transition: all 0.2s ease;
}

.remove-option-btn:hover {
    background: rgba(255, 67, 54, 0.3);
    transform: scale(1.05);
}

.add-option-btn {
    width: 100%;
    padding: 0.75rem;
    margin-top: 1rem;
    background: rgba(255, 255, 255, 0.05);
    border: 2px dashed rgba(255, 255, 255, 0.3);
    border-radius: 8px;
    color: var(--text-secondary);
    font-family: inherit;
    font-size: 0.9rem;
    cursor: pointer;
    transition: all 0.3s ease;
    outline: none;
}

.add-option-btn:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.5);
    color: var(--text-primary);
}

/* Poll Display Styles */
.post-poll {
    margin-top: 1rem;
}

.poll-question {
    font-size: 1.1rem;
    font-weight: 600;
    margin-bottom: 1rem;
    color: var(--text-primary);
}

.post-poll .poll-option {
    position: relative;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 8px;
    margin-bottom: 0.75rem;
    cursor: pointer;
    transition: all 0.3s ease;
    overflow: hidden;
}

.post-poll .poll-option:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.4);
    transform: translateY(-1px);
}

.post-poll .poll-option.selected {
    background: rgba(102, 126, 234, 0.2);
    border-color: rgba(102, 126, 234, 0.5);
}

.poll-bar {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    background: linear-gradient(90deg, rgba(102, 126, 234, 0.3), rgba(118, 75, 162, 0.3));
    border-radius: 8px;
    transition: width 0.5s ease;
    z-index: 1;
}

.poll-total-votes {
    text-align: center;
    margin-top: 0.75rem;
    color: var(--text-secondary);
    font-size: 0.85rem;
    font-weight: 500;
}

.upload-placeholder {
    border: 2px dashed rgba(255, 255, 255, 0.3);
    border-radius: 12px;
    padding: 2rem;
    text-align: center;
    cursor: pointer;
    transition: all 0.3s ease;
    background: rgba(255, 255, 255, 0.02);
}

.upload-placeholder:hover {
    border-color: rgba(255, 255, 255, 0.5);
    background: rgba(255, 255, 255, 0.05);
}

.upload-icon {
    font-size: 2rem;
    display: block;
    margin-bottom: 0.5rem;
}

.image-preview {
    position: relative;
    margin-top: 1rem;
    border-radius: 12px;
    overflow: hidden;
}

.image-preview img {
    width: 100%;
    max-height: 300px;
    object-fit: cover;
    border-radius: 12px;
}

.remove-image-btn {
    position: absolute;
    top: 0.5rem;
    right: 0.5rem;
    background: rgba(0, 0, 0, 0.8);
    border: none;
    color: white;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    transition: all 0.3s ease;
}

.remove-image-btn:hover {
    background: rgba(255, 0, 0, 0.8);
}

.poll-question-input {
    width: 100%;
    padding: 1rem;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 12px;
    color: var(--text-primary);
    font-family: inherit;
    font-size: 1rem;
    margin-bottom: 1rem;
    outline: none;
    transition: all 0.3s ease;
}

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

.poll-question-input:focus {
    border-color: rgba(255, 255, 255, 0.4);
    background: rgba(255, 255, 255, 0.08);
    box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.1);
}

.poll-options-container {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    margin-bottom: 1rem;
}

.poll-option-input {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.poll-option-field {
    flex: 1;
    padding: 0.75rem;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 8px;
    color: var(--text-primary);
    font-family: inherit;
    font-size: 0.95rem;
    outline: none;
    transition: all 0.3s ease;
}

.poll-option-field::placeholder {
    color: var(--text-muted);
}

.poll-option-field:focus {
    border-color: rgba(255, 255, 255, 0.4);
    background: rgba(255, 255, 255, 0.08);
}

.remove-option-btn {
    background: rgba(255, 100, 100, 0.2);
    border: 1px solid rgba(255, 100, 100, 0.4);
    color: #ff6464;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.8rem;
    transition: all 0.3s ease;
}

.remove-option-btn:hover {
    background: rgba(255, 100, 100, 0.3);
    transform: scale(1.1);
}

.add-option-btn {
    background: rgba(74, 222, 128, 0.1);
    border: 1px solid rgba(74, 222, 128, 0.3);
    color: #4ade80;
    padding: 0.75rem 1rem;
    border-radius: 8px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.9rem;
    font-weight: 500;
    transition: all 0.3s ease;
    margin-top: 0.5rem;
}

.add-option-btn:hover {
    background: rgba(74, 222, 128, 0.2);
    transform: translateY(-1px);
}

.post-actions {
    display: flex;
    gap: 1rem;
    justify-content: flex-end;
    padding-top: 1.5rem;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    margin-top: 1.5rem;
}

/* Empty States */
.empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 3rem 2rem;
    text-align: center;
    color: var(--text-secondary);
}

.empty-icon {
    font-size: 3rem;
    margin-bottom: 1rem;
    opacity: 0.6;
}

.empty-state h4 {
    font-size: 1.2rem;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 0.5rem;
}

.empty-state p {
    font-size: 0.9rem;
    color: var(--text-muted);
}

/* Responsive Design for Aura Flow */
@media (max-width: 768px) {
    .flow-nav {
        padding: 0.75rem 0;
    }
    
    .nav-btn {
        padding: 0.4rem 0.8rem;
        min-width: 50px;
    }
    
    .nav-btn svg {
        width: 20px;
        height: 20px;
    }
    
    .nav-btn span {
        font-size: 0.7rem;
    }
    
    .plus-btn {
        width: 48px;
        height: 48px;
    }
    
    .plus-icon {
        font-size: 1.5rem;
    }
    
    .post-card {
        padding: 1rem;
    }
    
    .short-overlay {
        padding: 1rem;
    }
    
    .short-actions {
        right: 0.5rem;
        bottom: 1rem;
    }
    
    .short-action-btn {
        width: 40px;
        height: 40px;
    }
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .users-edit-grid {
        grid-template-columns: 1fr;
    }
    
    .user-edit-modal .modal-content {
        max-width: 95vw !important;
        margin: 1rem;
    }
    
    .locker-grid {
        grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    }
}

/* Mobile locker and marketplace grids - 2 columns for PWA */
@media (max-width: 480px) {
    .locker-grid,
    #ownedFramesGrid,
    #ownedBadgesGrid,
    .frames-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 0.75rem;
    }
    
    .locker-item,
    .frame-option,
    .owned-badge-item,
    .owned-frame-item {
        padding: 0.75rem;
    }
    
    .owned-frame-preview {
        margin-bottom: 0.5rem;
    }
    
    .owned-frame-name {
        font-size: 0.9rem;
    }
    
    .card-demo-mini {
        width: 45px;
        height: 35px;
        border-radius: 10px;
    }
    
    .card-demo-mini .card-demo-name {
        font-size: 5px;
    }
    
    .card-demo-mini .card-demo-aura {
        font-size: 8px;
    }
}

/* Comments Modal Styles */
.comments-modal {
    max-width: 600px;
    max-height: 80vh;
    overflow: hidden;
}

.comments-modal .modal-body {
    padding: 0;
    display: flex;
    flex-direction: column;
    max-height: 60vh;
}

.comments-container {
    flex: 1;
    overflow-y: auto;
    padding: 1rem;
    max-height: 400px;
}

.comment {
    display: flex;
    gap: 0.75rem;
    margin-bottom: 1rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.comment:last-child {
    border-bottom: none;
}

.comment-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: 14px;
    flex-shrink: 0;
}

.comment-content {
    flex: 1;
}

.comment-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.25rem;
}

.comment-username {
    font-weight: 600;
    font-size: 14px;
}

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

.comment-text {
    font-size: 14px;
    line-height: 1.4;
    color: var(--text-primary);
}

.add-comment {
    padding: 1rem;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.comment-input-group {
    display: flex;
    gap: 0.75rem;
    align-items: flex-end;
}

.comment-input {
    flex: 1;
    padding: 0.75rem;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 8px;
    color: var(--text-primary);
    font-family: inherit;
    font-size: 14px;
    resize: none;
    min-height: 60px;
    max-height: 120px;
}

.comment-input:focus {
    outline: none;
    border-color: rgba(255, 255, 255, 0.4);
    background: rgba(255, 255, 255, 0.08);
}

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

.add-comment .btn {
    padding: 0.75rem 1rem;
    font-size: 14px;
    white-space: nowrap;
}

.empty-comments {
    text-align: center;
    padding: 2rem;
    color: var(--text-muted);
}

.empty-comments-icon {
    font-size: 2rem;
    margin-bottom: 0.5rem;
}

/* Compact Image Modal Styles */
.image-modal-content {
    max-width: 500px;
    max-height: 80vh;
}

.image-modal-content .modal-image {
    width: 100%;
    max-height: 50vh;
    object-fit: contain;
    border-radius: 12px;
    background: rgba(0, 0, 0, 0.2);
    padding: 0.5rem;
}

.image-modal-content .modal-body {
    padding: 1rem;
    display: flex;
    justify-content: center;
    align-items: center;
}

.image-modal-content .modal-footer {
    padding: 1rem 1.5rem;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

/* Make post images clickable with subtle hover */
.post-image {
    cursor: pointer;
    transition: all 0.2s ease;
    border-radius: 12px;
}

.post-image:hover {
    transform: scale(1.01);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

/* Shorts User Avatars */
.shorts-users-row {
    padding: 1.5rem;
    background: rgba(255, 255, 255, 0.03);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.shorts-section-title {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--text-secondary);
    margin-bottom: 1rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.shorts-avatars-scroll {
    display: flex;
    gap: 1.5rem;
    overflow-x: auto;
    padding-bottom: 0.5rem;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.shorts-avatars-scroll::-webkit-scrollbar {
    display: none;
}

.shorts-user-avatar {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    cursor: pointer;
    transition: transform 0.2s ease;
    flex-shrink: 0;
}

.shorts-user-avatar:hover {
    transform: scale(1.05);
}

.shorts-user-avatar:active {
    transform: scale(0.95);
}

.shorts-avatar-ring {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    padding: 3px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 50%, #f093fb 100%);
    display: flex;
    align-items: center;
    justify-content: center;
}

.shorts-avatar-inner {
    width: 66px;
    height: 66px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    font-weight: 700;
    color: white;
    border: 3px solid #1a1a2e;
}

.shorts-avatar-name {
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--text-primary);
    text-align: center;
}

.shorts-coming-soon {
    padding: 3rem 1.5rem;
}

/* User Profile Modal */
.user-profile-modal {
    max-width: 450px;
}

.profile-container {
    padding: 0.5rem 0;
}

.profile-header-row {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1.5rem;
}

.profile-left {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.profile-right {
    display: flex;
    align-items: flex-start;
}

.profile-avatar-medium {
    margin-bottom: 0.75rem;
}

.profile-avatar-medium .profile-avatar-inner {
    width: 70px;
    height: 70px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.75rem;
    font-weight: 700;
    color: white;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
}

.profile-avatar-initial {
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

.profile-name {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 0.25rem;
    text-align: left;
}

.profile-name-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
}

.profile-badge {
    font-size: 0.85rem;
    font-weight: 600;
    color: #ffd700;
    background: rgba(255, 215, 0, 0.15);
    padding: 0.25rem 0.5rem;
    border-radius: 6px;
    border: 1px solid rgba(255, 215, 0, 0.3);
}

.profile-bio {
    font-size: 0.95rem;
    color: var(--text-secondary);
    font-style: italic;
    text-align: left;
    margin-bottom: 0.5rem;
}

.profile-stats-compact {
    display: flex;
    gap: 1rem;
}

.profile-stat-compact {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.5rem 0.75rem;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.profile-stat-compact .profile-stat-icon {
    font-size: 1rem;
}

.profile-stat-value {
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-primary);
}

.profile-stat-label {
    font-size: 0.8rem;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.profile-aura-value,
.profile-coins-value {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--text-primary);
}

/* Profile Edit Mode Styles */
.profile-edit-field {
    width: 100%;
    max-width: 280px;
    margin-bottom: 1rem;
}

.profile-edit-field label {
    display: block;
    font-size: 0.8rem;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 0.5rem;
    text-align: left;
}

.profile-edit-input {
    width: 100%;
    padding: 0.75rem 1rem;
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    background: rgba(255, 255, 255, 0.1);
    color: var(--text-primary);
    font-size: 1rem;
    font-family: inherit;
    outline: none;
    transition: all 0.2s ease;
}

.profile-edit-input:focus {
    border-color: rgba(255, 255, 255, 0.4);
    background: rgba(255, 255, 255, 0.15);
}

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

.profile-stat-input {
    width: 60px;
    text-align: center;
    font-size: 0.9rem;
    font-weight: 600;
    padding: 0.35rem;
    border-radius: 8px;
}

/* Edit mode within compact stats */
.profile-stat-compact .profile-edit-input {
    margin-left: 0.25rem;
}

/* Bio edit field positioning */
.profile-left .profile-edit-field {
    margin-top: 0.5rem;
}

/* Hide number input arrows */
.profile-stat-input::-webkit-outer-spin-button,
.profile-stat-input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.profile-stat-input[type=number] {
    -moz-appearance: textfield;
    appearance: textfield;
}

.btn-success {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
    color: white;
    border: none;
}

.btn-success:hover {
    background: linear-gradient(135deg, #34d399 0%, #10b981 100%);
}

/* Profile Tabs */
.profile-tabs {
    display: flex;
    gap: 0.5rem;
    margin-top: 1.5rem;
    padding: 0 1.5rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.profile-tab {
    flex: 1;
    padding: 0.75rem 1rem;
    background: transparent;
    border: none;
    border-bottom: 2px solid transparent;
    color: var(--text-muted);
    font-size: 0.95rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
}

.profile-tab:hover {
    color: var(--text-secondary);
    background: rgba(255, 255, 255, 0.03);
}

.profile-tab.active {
    color: var(--text-primary);
    border-bottom-color: var(--primary-gradient);
    background: rgba(255, 255, 255, 0.05);
}

.profile-tab-content {
    min-height: 200px;
    max-height: 300px;
    overflow-y: auto;
    padding: 1rem 1.5rem;
}

.profile-pane {
    display: none;
}

.profile-pane.active {
    display: block;
}

/* Profile Content List */
.profile-content-list {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.profile-post-item {
    padding: 1rem;
    background: rgba(255, 255, 255, 0.03);
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.05);
}

.profile-post-header {
    display: flex;
    justify-content: space-between;
    margin-bottom: 0.5rem;
}

.profile-post-time {
    font-size: 0.8rem;
    color: var(--text-muted);
}

.profile-post-text {
    font-size: 0.95rem;
    color: var(--text-primary);
    line-height: 1.5;
    margin-bottom: 0.75rem;
}

.profile-post-image {
    width: 100%;
    max-height: 200px;
    object-fit: cover;
    border-radius: 8px;
    margin-bottom: 0.75rem;
}

.profile-post-stats {
    display: flex;
    gap: 1rem;
    font-size: 0.85rem;
    color: var(--text-muted);
}

.profile-empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 3rem 1rem;
    text-align: center;
}

.profile-empty-icon {
    font-size: 3rem;
    margin-bottom: 1rem;
    opacity: 0.5;
}

.profile-empty-state p {
    color: var(--text-secondary);
    font-size: 1rem;
}

.profile-empty-sub {
    font-size: 0.85rem;
    color: var(--text-muted);
    margin-top: 0.5rem;
}

/* Short Creation Modal */
.short-creation-modal {
    max-width: 500px;
}

.short-step {
    padding: 1rem 0;
}

.short-step.hidden {
    display: none;
}

.short-step-title {
    text-align: center;
    font-size: 1.1rem;
    color: var(--text-secondary);
    margin-bottom: 1.5rem;
    font-weight: 500;
}

.short-options {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
}

.short-options.single-option {
    grid-template-columns: 1fr;
    max-width: 300px;
    margin: 0 auto;
}


.short-option {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 2rem 1.5rem;
    background: rgba(255, 255, 255, 0.03);
    border-radius: 16px;
    border: 2px solid rgba(255, 255, 255, 0.1);
    cursor: pointer;
    transition: all 0.2s ease;
    text-align: center;
}

.short-option:hover {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.2);
    transform: translateY(-2px);
}

.short-option-icon {
    font-size: 3rem;
    margin-bottom: 1rem;
}

.short-option h4 {
    font-size: 1.2rem;
    color: var(--text-primary);
    margin-bottom: 0.5rem;
}

.short-option p {
    font-size: 0.85rem;
    color: var(--text-muted);
    line-height: 1.4;
}

/* Camera Recording */
.camera-container {
    position: relative;
    background: #000;
    border-radius: 12px;
    overflow: hidden;
    aspect-ratio: 9/16;
    max-height: 70vh;
}

#cameraPreview {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.camera-controls {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 1.5rem;
    background: linear-gradient(transparent, rgba(0,0,0,0.8));
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
}

.camera-btn {
    width: 70px;
    height: 70px;
    border-radius: 50%;
    border: 4px solid rgba(255, 255, 255, 0.3);
    background: rgba(255, 255, 255, 0.1);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
}

.camera-btn:hover {
    background: rgba(255, 255, 255, 0.2);
    transform: scale(1.05);
}

.record-icon {
    width: 50px;
    height: 50px;
    background: #ff4444;
    border-radius: 50%;
    transition: all 0.2s ease;
}

.camera-btn.recording .record-icon {
    width: 30px;
    height: 30px;
    border-radius: 4px;
    background: #ff0000;
}

.camera-hint {
    color: rgba(255, 255, 255, 0.8);
    font-size: 0.9rem;
}

.record-timer {
    color: #ff4444;
    font-size: 1.2rem;
    font-weight: 700;
    font-family: monospace;
}

/* Short Preview */
.short-preview-container {
    background: #000;
    border-radius: 12px;
    overflow: hidden;
    aspect-ratio: 9/16;
    max-height: 350px;
    margin-bottom: 1rem;
}

#shortPreviewVideo {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.short-caption-input {
    padding: 0 0.5rem;
}

.short-caption-input label {
    display: block;
    font-size: 0.85rem;
    color: var(--text-muted);
    margin-bottom: 0.5rem;
}

.short-caption-input textarea {
    width: 100%;
    padding: 0.75rem 1rem;
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    background: rgba(255, 255, 255, 0.05);
    color: var(--text-primary);
    font-family: inherit;
    font-size: 1rem;
    resize: none;
    height: 80px;
}

.short-caption-input textarea:focus {
    outline: none;
    border-color: rgba(255, 255, 255, 0.4);
}

.short-caption-input .char-count {
    display: block;
    text-align: right;
    font-size: 0.8rem;
    color: var(--text-muted);
    margin-top: 0.5rem;
}

/* Profile Short Items */
.profile-short-item {
    background: rgba(255, 255, 255, 0.03);
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.05);
    overflow: hidden;
}

.profile-short-video-container {
    position: relative;
    width: 100%;
    max-width: 280px;
    margin: 0 auto;
    aspect-ratio: 9/16;
    background: #000;
}

.profile-short-video {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.profile-short-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.3);
    cursor: pointer;
    transition: opacity 0.2s ease;
}

.profile-short-overlay:hover {
    background: rgba(0, 0, 0, 0.1);
}

.play-icon {
    font-size: 3rem;
    opacity: 0.9;
}

.profile-short-info {
    padding: 1rem;
}

.profile-short-caption {
    font-size: 0.95rem;
    color: var(--text-primary);
    margin-bottom: 0.75rem;
    line-height: 1.4;
}

.profile-short-stats {
    display: flex;
    gap: 1rem;
    font-size: 0.85rem;
    color: var(--text-muted);
}

.profile-short-time {
    margin-left: auto;
    font-size: 0.8rem;
}

/* Modern Stories Header */
.stories-header {
    padding: 1.25rem 1rem;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.03) 0%, transparent 100%);
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.stories-scroll {
    display: flex;
    gap: 1rem;
    overflow-x: auto;
    padding: 0.5rem 0.5rem 0.75rem;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

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

.story-avatar {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    cursor: pointer;
    flex-shrink: 0;
    transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.story-avatar:hover {
    transform: scale(1.08);
}

.story-avatar:active {
    transform: scale(0.92);
}

.story-avatar-ring {
    width: 70px;
    height: 70px;
    border-radius: 50%;
    padding: 3px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
    transition: box-shadow 0.3s ease;
}

.story-avatar:hover .story-avatar-ring {
    box-shadow: 0 6px 25px rgba(102, 126, 234, 0.4);
}

.story-avatar-ring.avatar-1-ring {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 50%, #f093fb 100%);
}

.story-avatar-ring.avatar-2-ring {
    background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
}

.story-avatar-ring.avatar-3-ring {
    background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
}

.story-avatar-ring.avatar-4-ring {
    background: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%);
}

.story-avatar-ring.avatar-5-ring {
    background: linear-gradient(135deg, #fa709a 0%, #fee140 100%);
}

.story-avatar-inner {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    font-weight: 700;
    color: white;
    border: 3px solid #1a1a2e;
}

.story-avatar-name {
    font-size: 0.8rem;
    font-weight: 500;
    color: var(--text-primary);
    text-align: center;
}

/* Shorts Hero */
.shorts-hero {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 400px;
    padding: 2rem;
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.1) 0%, rgba(118, 75, 162, 0.1) 100%);
    border-radius: 16px;
    margin: 1rem;
}

.shorts-hero-content {
    text-align: center;
}

.shorts-hero-icon {
    font-size: 4rem;
    margin-bottom: 1rem;
}

.shorts-hero h3 {
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 0.5rem;
}

.shorts-hero p {
    font-size: 1rem;
    color: var(--text-secondary);
    margin-bottom: 1.5rem;
}

.shorts-hero-buttons {
    display: flex;
    gap: 0.75rem;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
}

.shorts-watch-btn {
    padding: 0.875rem 2rem;
    font-size: 1.1rem;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

.shorts-refresh-btn {
    padding: 0.875rem 1.5rem;
    font-size: 1rem;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: var(--text-primary);
}

.shorts-refresh-btn:hover {
    background: rgba(255, 255, 255, 0.15);
}

.shorts-count {
    display: block;
    margin-top: 1rem;
    font-size: 0.9rem;
    color: var(--text-muted);
}

/* Full-Screen Shorts Feed */
.shorts-feed-modal {
    position: fixed;
    inset: 0;
    background: #000;
    z-index: 2000;
    display: flex;
    flex-direction: column;
}

.shorts-feed-modal.hidden {
    display: none;
}

.shorts-feed-header {
    position: absolute;
    top: 50px;
    left: 0;
    right: 0;
    padding: 1rem 1.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10;
}

.shorts-feed-close {
    position: absolute;
    left: 1rem;
    background: rgba(255, 255, 255, 0.2);
    border: none;
    color: white;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 0.2s ease;
}

.shorts-feed-close:hover {
    background: rgba(255, 255, 255, 0.3);
}

.shorts-feed-title {
    display: none;
}

.shorts-feed-container {
    flex: 1;
    overflow-y: auto;
    scroll-snap-type: y mandatory;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.shorts-feed-container::-webkit-scrollbar {
    display: none;
}

.shorts-feed-item {
    height: 100vh;
    min-height: 100vh;
    width: 100vw;
    position: relative;
    scroll-snap-align: start;
    background: #000;
    overflow: hidden;
}

.shorts-feed-video {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.shorts-feed-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 2rem;
    background: linear-gradient(to top, rgba(0,0,0,0.7) 0%, transparent 50%);
    pointer-events: none;
}

.shorts-feed-info {
    pointer-events: auto;
    margin-bottom: 2rem;
}

.shorts-feed-user {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 0.75rem;
}

.shorts-feed-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    font-weight: 700;
    color: white;
}

.shorts-feed-avatar.max {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

.shorts-feed-avatar.gigi {
    background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
}

.shorts-feed-avatar.marco {
    background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
}

.shorts-feed-avatar.dezi {
    background: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%);
}

.shorts-feed-avatar.sevi {
    background: linear-gradient(135deg, #fa709a 0%, #fee140 100%);
}

.shorts-feed-username {
    font-size: 1rem;
    font-weight: 600;
    color: white;
}

.shorts-feed-caption {
    font-size: 0.95rem;
    color: rgba(255, 255, 255, 0.9);
    line-height: 1.5;
    max-width: 300px;
}

.shorts-feed-actions {
    position: absolute;
    right: 1rem;
    bottom: 30%;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    pointer-events: auto;
}

.shorts-action-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.25rem;
    background: rgba(255, 255, 255, 0.1);
    border: none;
    color: white;
    padding: 0.75rem;
    border-radius: 12px;
    cursor: pointer;
    transition: background 0.2s ease;
}

.shorts-action-btn:hover {
    background: rgba(255, 255, 255, 0.2);
}

.shorts-action-icon {
    font-size: 1.5rem;
}

.shorts-action-count {
    font-size: 0.8rem;
    font-weight: 500;
}

/* Shorts Feed Navigation Arrows - Left Side Center */
.shorts-feed-nav {
    position: absolute;
    left: 1rem;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    flex-direction: column;
    gap: 1rem;
    z-index: 100;
    pointer-events: auto;
}

.shorts-nav-btn {
    background: rgba(255, 255, 255, 0.15);
    border: none;
    color: white;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
    backdrop-filter: blur(4px);
}

.shorts-nav-btn:hover {
    background: rgba(255, 255, 255, 0.3);
    transform: scale(1.05);
}

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

.shorts-nav-btn:disabled {
    opacity: 0.3;
    cursor: not-allowed;
}

.shorts-nav-btn svg {
    width: 24px;
    height: 24px;
}

.shorts-video-error {
    display: none;
    align-items: center;
    justify-content: center;
    height: 100%;
    color: white;
    flex-direction: column;
    background: rgba(0, 0, 0, 0.8);
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}

.shorts-video-error span {
    font-size: 3rem;
    margin-bottom: 1rem;
}

.profile-short-error {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    color: white;
    font-size: 0.9rem;
    background: rgba(0, 0, 0, 0.8);
    border-radius: 8px;
}

.shorts-feed-empty {
    height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: white;
    padding: 2rem;
}

.shorts-feed-empty-icon {
    font-size: 5rem;
    margin-bottom: 1.5rem;
    opacity: 0.5;
}

.shorts-feed-empty h3 {
    font-size: 1.5rem;
    margin-bottom: 0.5rem;
}

.shorts-feed-empty p {
    font-size: 1rem;
    opacity: 0.7;
    margin-bottom: 2rem;
}

/* Announcement Modal Styles */
.announcement-container {
    padding: 1rem 0;
}

.announcement-info {
    color: var(--text-secondary);
    font-size: 0.9rem;
    margin-bottom: 1.5rem;
    line-height: 1.5;
}

.announcement-textarea {
    width: 100%;
    padding: 0.75rem 1rem;
    border: 1px solid var(--glass-border);
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.05);
    color: var(--text-primary);
    font-family: inherit;
    font-size: 1rem;
    resize: vertical;
    min-height: 100px;
    transition: all 0.2s ease;
}

.announcement-textarea:focus {
    outline: none;
    border-color: rgba(102, 126, 234, 0.5);
    background: rgba(255, 255, 255, 0.08);
    box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
}

.announcement-textarea::placeholder {
    color: var(--text-muted);
}

.char-count {
    text-align: right;
    font-size: 0.8rem;
    color: var(--text-muted);
    margin-top: 0.5rem;
}

/* Button warning style */
.btn-warning {
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
    color: white;
    border: none;
}

.btn-warning:hover {
    background: linear-gradient(135deg, #fbbf24 0%, #f59e0b 100%);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(245, 158, 11, 0.3);
}

/* Aura Studio Styles */
.studio-container {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

/* Editing Buttons */
.editing-buttons {
    display: flex;
    gap: 1rem;
    justify-content: center;
    padding: 1rem;
    background: var(--glass-bg);
    backdrop-filter: blur(20px);
    border: 1px solid var(--glass-border);
    border-radius: 15px;
    animation: fadeInUp 0.6s ease-out 0.3s both;
}

.edit-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    padding: 1rem 1.5rem;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    color: var(--text-primary);
    cursor: pointer;
    transition: all 0.3s ease;
    min-width: 80px;
}

.edit-btn:hover {
    background: rgba(255, 255, 255, 0.1);
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.2);
}

.btn-icon {
    font-size: 1.5rem;
}

.btn-text {
    font-size: 0.8rem;
    font-weight: 500;
}

/* Slide-up Panels */
.slide-panel {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: var(--glass-bg);
    backdrop-filter: blur(20px);
    border: 1px solid var(--glass-border);
    border-radius: 20px 20px 0 0;
    transform: translateY(100%);
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 1000;
    max-height: 70vh;
    overflow-y: auto;
}

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

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

.panel-header h3 {
    margin: 0;
    color: var(--text-primary);
    font-size: 1.1rem;
    font-weight: 600;
}

.close-btn {
    background: none;
    border: none;
    color: var(--text-secondary);
    font-size: 1.5rem;
    cursor: pointer;
    padding: 0.25rem;
    border-radius: 50%;
    transition: all 0.2s ease;
}

.close-btn:hover {
    background: rgba(255, 255, 255, 0.1);
    color: var(--text-primary);
}

.panel-content {
    padding: 1.5rem;
}

/* Panel Specific Styles */
.text-input {
    width: 100%;
    padding: 0.75rem;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 8px;
    color: var(--text-primary);
    font-size: 0.9rem;
    margin-bottom: 1rem;
}

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

.text-controls {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.control-group {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.control-group label {
    color: var(--text-secondary);
    font-size: 0.8rem;
    font-weight: 500;
}

.slider {
    width: 100%;
    height: 6px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 3px;
    outline: none;
    -webkit-appearance: none;
    appearance: none;
}

.slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 16px;
    height: 16px;
    background: var(--primary-gradient);
    border-radius: 50%;
    cursor: pointer;
}

.slider::-moz-range-thumb {
    width: 16px;
    height: 16px;
    background: var(--primary-gradient);
    border-radius: 50%;
    cursor: pointer;
    border: none;
}

.slider-value {
    color: var(--text-secondary);
    font-size: 0.8rem;
    text-align: center;
}

.color-picker {
    width: 100%;
    height: 40px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 8px;
    cursor: pointer;
    background: transparent;
}

.select {
    padding: 0.5rem;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 8px;
    color: var(--text-primary);
    font-size: 0.8rem;
}

/* Connection Status */
.connection-status {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 8px;
    margin-bottom: 1rem;
}

.status-indicator {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #ef4444;
}

.status-indicator.online {
    background: #10b981;
}

.status-text {
    color: var(--text-secondary);
    font-size: 0.8rem;
}

/* Music Browser */
.music-browser {
    margin-top: 1rem;
}

.search-input {
    width: 100%;
    padding: 0.75rem;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 8px;
    color: var(--text-primary);
    font-size: 0.8rem;
    margin-bottom: 1rem;
}

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

.music-list {
    max-height: 200px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.music-track {
    padding: 0.75rem;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.music-track:hover {
    background: rgba(255, 255, 255, 0.1);
    transform: translateX(4px);
}

.track-info {
    flex: 1;
}

.track-title {
    font-size: 0.8rem;
    color: var(--text-primary);
    font-weight: 500;
}

.track-artist {
    font-size: 0.7rem;
    color: var(--text-muted);
}

.track-duration {
    font-size: 0.7rem;
    color: var(--text-muted);
}

/* Effects Grid */
.effects-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
}

.effect-btn {
    padding: 1.5rem;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
}

.effect-btn:hover {
    background: rgba(255, 255, 255, 0.1);
    transform: translateY(-2px);
}

.effect-btn.active {
    background: rgba(139, 92, 246, 0.3);
    border-color: rgba(139, 92, 246, 0.6);
    box-shadow: 0 0 15px rgba(139, 92, 246, 0.3);
}

.effect-btn.active .effect-name {
    color: white;
}

.effect-icon {
    font-size: 1.5rem;
}

.effect-name {
    font-size: 0.7rem;
    color: var(--text-secondary);
    font-weight: 500;
}

/* Effect Controls */
.effect-controls {
    margin-top: 1.5rem;
    padding-top: 1.5rem;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.effect-intensity {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.effect-intensity label {
    font-size: 0.85rem;
    color: var(--text-secondary);
    font-weight: 500;
}

#effectIntensity {
    width: 100%;
    height: 6px;
    -webkit-appearance: none;
    appearance: none;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 3px;
    outline: none;
}

#effectIntensity::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 18px;
    height: 18px;
    background: linear-gradient(135deg, #8b5cf6 0%, #6366f1 100%);
    border-radius: 50%;
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(139, 92, 246, 0.4);
    transition: transform 0.2s ease;
}

#effectIntensity::-webkit-slider-thumb:hover {
    transform: scale(1.1);
}

#effectIntensity::-moz-range-thumb {
    width: 18px;
    height: 18px;
    background: linear-gradient(135deg, #8b5cf6 0%, #6366f1 100%);
    border-radius: 50%;
    cursor: pointer;
    border: none;
    box-shadow: 0 2px 8px rgba(139, 92, 246, 0.4);
}

.clear-effects-btn {
    width: 100%;
    padding: 0.75rem;
    background: rgba(239, 68, 68, 0.1);
    border: 1px solid rgba(239, 68, 68, 0.3);
    color: #ef4444;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
    font-size: 0.85rem;
}

.clear-effects-btn:hover {
    background: rgba(239, 68, 68, 0.2);
    border-color: rgba(239, 68, 68, 0.5);
}

/* Publish Modal */
.modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1000;
    display: none;
    align-items: center;
    justify-content: center;
}

.modal.active {
    display: flex;
}

.modal-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(5px);
}

.modal-content {
    position: relative;
    background: linear-gradient(135deg, rgba(30, 30, 40, 0.95) 0%, rgba(20, 20, 30, 0.95) 100%);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 16px;
    width: 90%;
    max-width: 480px;
    max-height: 90vh;
    overflow: hidden;
    animation: modalSlideIn 0.3s ease;
}

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

.modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.25rem 1.5rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.modal-header h3 {
    margin: 0;
    font-size: 1.2rem;
    font-weight: 600;
    color: white;
}

.modal-body {
    padding: 1.5rem;
    overflow-y: auto;
    max-height: 60vh;
}

.modal-footer {
    display: flex;
    justify-content: flex-end;
    gap: 0.75rem;
    padding: 1rem 1.5rem;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.publish-preview {
    margin-bottom: 1.5rem;
}

.publish-video {
    width: 100%;
    max-height: 300px;
    border-radius: 12px;
    background: rgba(0, 0, 0, 0.3);
    object-fit: contain;
}

.publish-info {
    margin-top: 0.75rem;
    padding: 0.75rem;
    background: rgba(139, 92, 246, 0.1);
    border: 1px solid rgba(139, 92, 246, 0.2);
    border-radius: 8px;
}

.publish-info p {
    margin: 0;
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.8);
    text-align: center;
}

.caption-input-group {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.caption-input-group label {
    font-size: 0.9rem;
    font-weight: 500;
    color: white;
}

#shortCaption {
    width: 100%;
    min-height: 80px;
    padding: 0.75rem 1rem;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 10px;
    color: white;
    font-size: 0.95rem;
    resize: vertical;
    font-family: inherit;
}

#shortCaption:focus {
    outline: none;
    border-color: rgba(139, 92, 246, 0.5);
    background: rgba(255, 255, 255, 0.08);
}

#shortCaption::placeholder {
    color: rgba(255, 255, 255, 0.4);
}

.char-count {
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.5);
    text-align: right;
}

.modal-footer .btn {
    padding: 0.75rem 1.5rem;
    font-size: 0.9rem;
}

.modal-footer .btn-success {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

/* Upload Progress Modal */
.upload-modal .modal-overlay {
    cursor: not-allowed;
}

.upload-content {
    max-width: 360px;
    text-align: center;
}

.upload-progress-container {
    padding: 2rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.5rem;
}

.circular-progress {
    position: relative;
    width: 120px;
    height: 120px;
}

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

.progress-ring-bg {
    fill: none;
    stroke: rgba(255, 255, 255, 0.1);
    stroke-width: 8;
}

.progress-ring-fill {
    fill: none;
    stroke: url(#progressGradient);
    stroke-width: 8;
    stroke-linecap: round;
    stroke-dasharray: 339.292;
    stroke-dashoffset: 339.292;
    transition: stroke-dashoffset 0.3s ease;
}

.progress-text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.progress-percent {
    font-size: 1.5rem;
    font-weight: 600;
    color: white;
}

#uploadStatus {
    font-size: 1.1rem;
    font-weight: 500;
    color: white;
    margin: 0;
}

.upload-message {
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.6);
    margin: 0;
}

/* Add gradient definition for progress ring */
.upload-content::before {
    content: '';
    position: absolute;
    width: 0;
    height: 0;
}

/* Export Buttons */
.export-btn {
    width: 100%;
    padding: 1rem;
    display: flex;
    align-items: center;
    gap: 1rem;
    text-align: left;
    margin-bottom: 1rem;
}

.export-icon {
    font-size: 1.5rem;
}

.export-details {
    flex: 1;
}

.export-title {
    display: block;
    font-size: 0.9rem;
    font-weight: 600;
    color: white;
}

.export-desc {
    display: block;
    font-size: 0.7rem;
    color: rgba(255, 255, 255, 0.7);
    margin-top: 0.25rem;
}

/* Mobile Responsive */
@media (max-width: 768px) {
    .editing-buttons {
        gap: 0.5rem;
        padding: 0.75rem;
    }
    
    .edit-btn {
        padding: 0.75rem 1rem;
        min-width: 70px;
    }
    
    .btn-icon {
        font-size: 1.2rem;
    }
    
    .btn-text {
        font-size: 0.7rem;
    }
    
    .panel-content {
        padding: 1rem;
    }
    
    .effects-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 0.75rem;
    }
    
    .effect-btn {
        padding: 1rem;
    }
}

@media (max-width: 480px) {
    .editing-buttons {
        gap: 0.25rem;
        padding: 0.5rem;
    }
    
    .edit-btn {
        padding: 0.5rem 0.75rem;
        min-width: 60px;
    }
    
    .btn-icon {
        font-size: 1rem;
    }
    
    .btn-text {
        font-size: 0.65rem;
    }
    
    .panel-header {
        padding: 0.75rem 1rem;
    }
    
    .panel-content {
        padding: 0.75rem;
    }
    
    .effects-grid {
        grid-template-columns: 1fr;
        gap: 0.5rem;
    }
}

/* Video Preview Section */
.video-preview-section {
    background: var(--glass-bg);
    backdrop-filter: blur(20px);
    border: 1px solid var(--glass-border);
    border-radius: 20px;
    padding: 1.5rem;
    animation: fadeInUp 0.6s ease-out 0.2s both;
}

.preview-container {
    position: relative;
    width: 100%;
    aspect-ratio: 16/9;
    background: #000;
    border-radius: 12px;
    overflow: hidden;
}

.video-preview {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* Hide video controls and force inline playback */
.video-preview::-webkit-media-controls {
    display: none !important;
}

.video-preview::-webkit-media-controls-panel {
    display: none !important;
}

.video-preview::-webkit-media-controls-play-button {
    display: none !important;
}

/* Force inline playback on iOS */
.video-preview {
    appearance: none;
    -webkit-appearance: none;
    user-select: none;
    -webkit-user-select: none;
    -webkit-touch-callout: none;
}

/* Prevent iOS video fullscreen */
.video-preview::-webkit-media-controls-start-playback-button {
    display: none !important;
}

.video-preview::-webkit-media-controls-fullscreen-button {
    display: none !important;
}

.text-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 10;
}

.overlay-text {
    position: absolute;
    font-weight: 600;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8);
    white-space: nowrap;
    pointer-events: auto;
    transition: transform 0.2s ease;
}

.overlay-text:hover {
    transform: scale(1.05);
}

.preview-placeholder {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, rgba(0,0,0,0.8), rgba(0,0,0,0.6));
}

.placeholder-content {
    text-align: center;
    color: white;
    max-width: 400px;
    padding: 2rem;
}

.placeholder-icon {
    font-size: 4rem;
    margin-bottom: 1rem;
    animation: float 3s ease-in-out infinite;
}

.placeholder-content h3 {
    font-size: 1.5rem;
    margin-bottom: 0.5rem;
    font-weight: 600;
}

.placeholder-content p {
    font-size: 1rem;
    color: var(--text-secondary);
    margin-bottom: 2rem;
}

/* Editor Controls */
.editor-controls {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    animation: fadeInUp 0.6s ease-out 0.4s both;
}

.editor-controls > div {
    background: var(--glass-bg);
    backdrop-filter: blur(20px);
    border: 1px solid var(--glass-border);
    border-radius: 20px;
    padding: 1rem;
}

/* Remove timeline box */
.editor-controls > div:first-child {
    background: transparent;
    backdrop-filter: none;
    border: none;
    padding: 0.5rem 0;
}

.editor-controls h4 {
    margin: 0 0 0.5rem 0;
    color: var(--text-primary);
    font-size: 1rem;
    font-weight: 600;
}

/* Timeline Section */
.timeline-controls {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
    justify-content: center;
}

.timeline-btn {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0.05) 100%);
    border: 1px solid rgba(255, 255, 255, 0.3);
    color: white;
    width: 40px;
    height: 40px;
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    backdrop-filter: blur(10px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
    position: relative;
    overflow: hidden;
}

.timeline-btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent);
    transition: left 0.5s ease;
}

.timeline-btn:hover {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.25) 0%, rgba(255, 255, 255, 0.1) 100%);
    transform: translateY(-2px) scale(1.05);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3);
    border-color: rgba(255, 255, 255, 0.5);
}

.timeline-btn:hover::before {
    left: 100%;
}

.timeline-btn:active {
    transform: translateY(0) scale(0.98);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

.timeline {
    position: relative;
}

.timeline-track {
    position: relative;
    height: 6px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 3px;
    overflow: hidden;
}

.timeline-progress {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    background: var(--primary-gradient);
    width: 0%;
    transition: width 0.05s linear;
}

.timeline-slider {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
    z-index: 2;
}

/* Text Controls */
.text-input-group {
    display: flex;
    gap: 1rem;
    margin-bottom: 1rem;
}

.text-input {
    flex: 1;
    padding: 0.75rem 1rem;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 10px;
    color: var(--text-primary);
    font-size: 1rem;
    transition: all 0.3s ease;
}

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

.text-input:focus {
    border-color: rgba(255, 255, 255, 0.4);
    background: rgba(255, 255, 255, 0.08);
    outline: none;
}

.text-style-controls {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1rem;
}

.style-group {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.style-group label {
    font-size: 0.9rem;
    color: var(--text-secondary);
    font-weight: 500;
}

.style-slider {
    width: 100%;
    height: 6px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 3px;
    outline: none;
    -webkit-appearance: none;
    appearance: none;
}

.style-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 18px;
    height: 18px;
    background: var(--primary-gradient);
    border-radius: 50%;
    cursor: pointer;
}

.style-slider::-moz-range-thumb {
    width: 18px;
    height: 18px;
    background: var(--primary-gradient);
    border-radius: 50%;
    cursor: pointer;
    border: none;
}

.color-picker {
    width: 100%;
    height: 40px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 8px;
    cursor: pointer;
    background: transparent;
}

.position-select {
    padding: 0.5rem;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 8px;
    color: var(--text-primary);
    font-size: 0.9rem;
}

/* Music Controls */
.navidrome-connection {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
}

.connection-status {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.status-indicator {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #ef4444;
}

.status-indicator.online {
    background: #10b981;
}

.status-text {
    font-size: 0.9rem;
    color: var(--text-secondary);
}

.music-browser {
    margin-top: 1rem;
}

.music-search {
    width: 100%;
    padding: 0.75rem 1rem;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 10px;
    color: var(--text-primary);
    font-size: 1rem;
    margin-bottom: 1rem;
}

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

.music-list {
    max-height: 200px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.music-track {
    padding: 0.75rem 1rem;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.music-track:hover {
    background: rgba(255, 255, 255, 0.1);
    transform: translateX(4px);
}

.track-info {
    flex: 1;
}

.track-title {
    font-size: 0.9rem;
    color: var(--text-primary);
    font-weight: 500;
}

.track-artist {
    font-size: 0.8rem;
    color: var(--text-secondary);
}

.track-duration {
    font-size: 0.8rem;
    color: var(--text-muted);
}

/* Export Controls */
.export-buttons {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
}

.export-buttons .btn {
    flex: 1;
    min-width: 150px;
}

/* Mobile Optimization for Aura Studio */
@media (max-width: 768px) {
    .studio-container {
        gap: 1rem;
        padding: 0 1rem;
    }
    
    .preview-container {
        aspect-ratio: 9/16;
    }
    
    .text-input-group {
        flex-direction: column;
    }
    
    .text-style-controls {
        grid-template-columns: 1fr;
    }
    
    .navidrome-connection {
        flex-direction: column;
        align-items: stretch;
        gap: 1rem;
    }
    
    .export-buttons {
        flex-direction: column;
    }
    
    .timeline-header {
        flex-direction: column;
        align-items: stretch;
        gap: 1rem;
    }
    
    .timeline-controls {
        justify-content: center;
    }
}

@media (max-width: 480px) {
    .editor-controls > div {
        padding: 1rem;
    }
    
    .placeholder-content {
        padding: 1rem;
    }
    
    .placeholder-icon {
        font-size: 3rem;
    }
    
    .placeholder-content h3 {
        font-size: 1.2rem;
    }
}

/* Aura Graph Modal Styles */
.aura-graph-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(4px);
    z-index: 1000;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    opacity: 1;
    transition: opacity 0.3s ease;
}

.aura-graph-modal.hidden {
    opacity: 0;
    pointer-events: none;
}

.aura-graph-modal.hidden .aura-graph-content {
    transform: translateY(100%);
}

.aura-graph-content {
    background: linear-gradient(180deg, #1e1e2e 0%, #2d1b69 100%);
    border-radius: 24px 24px 0 0;
    width: 100%;
    max-width: 500px;
    max-height: 80vh;
    transform: translateY(0);
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 -10px 40px rgba(0, 0, 0, 0.4);
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.aura-graph-header {
    position: relative;
    padding: 1.25rem 1.5rem 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.aura-graph-handle {
    position: absolute;
    top: 8px;
    left: 50%;
    transform: translateX(-50%);
    width: 40px;
    height: 4px;
    background: rgba(255, 255, 255, 0.3);
    border-radius: 2px;
}

.aura-graph-header h3 {
    margin: 0;
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--text-primary);
}

.aura-graph-close {
    position: absolute;
    right: 1rem;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(255, 255, 255, 0.1);
    border: none;
    color: var(--text-primary);
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
}

.aura-graph-close:hover {
    background: rgba(255, 255, 255, 0.2);
}

.aura-graph-body {
    padding: 1.5rem;
    overflow-y: auto;
}

.aura-stats-row {
    display: flex;
    justify-content: space-around;
    margin-bottom: 1.5rem;
    padding: 0 0.5rem;
}

.aura-stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.25rem;
}

.aura-stat-label {
    font-size: 0.75rem;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.aura-stat-value {
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--text-primary);
}

.aura-stat:nth-child(1) .aura-stat-value {
    color: #10b981;
}

.aura-stat:nth-child(3) .aura-stat-value {
    color: #ef4444;
}

.aura-graph-canvas-container {
    background: rgba(255, 255, 255, 0.05);
    border-radius: 16px;
    padding: 1rem;
    margin-bottom: 1rem;
}

.aura-graph-canvas-container canvas {
    width: 100%;
    height: auto;
    display: block;
}

.aura-graph-legend {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.875rem;
    color: var(--text-secondary);
}

.legend-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.legend-color {
    width: 24px;
    height: 4px;
    border-radius: 2px;
}

/* Profile Frames Styles */
.frames-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 1rem;
    padding: 1rem;
}

.frame-option {
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.06) 0%, rgba(255, 255, 255, 0.02) 100%);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 16px;
    padding: 0.875rem;
    text-align: center;
    cursor: pointer;
    transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
}

.frame-option::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
    opacity: 0;
    transition: opacity 0.3s ease;
}

.frame-option:hover {
    transform: translateY(-3px) scale(1.02);
    box-shadow: var(--shadow-lg);
    border-color: rgba(255, 255, 255, 0.2);
}

.frame-option:hover::before {
    opacity: 1;
}

.frame-option.owned {
    opacity: 0.8;
}

.frame-option.owned::after {
    content: '✓';
    position: absolute;
    top: 8px;
    right: 8px;
    background: linear-gradient(135deg, #4caf50, #45a049);
    color: white;
    border-radius: 50%;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: bold;
}

.frame-option.equipped {
    border-color: #ffd700;
    box-shadow: 0 0 20px rgba(255, 215, 0, 0.3);
}

.frame-option.equipped::before {
    content: 'EQUIPPED';
    position: absolute;
    top: 8px;
    left: 8px;
    background: linear-gradient(135deg, #ffd700, #ffb300);
    color: #1a1a2e;
    font-size: 9px;
    font-weight: bold;
    padding: 2px 6px;
    border-radius: 8px;
}

.frame-preview {
    width: 80px;
    height: 80px;
    margin: 0 auto 0.75rem;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

.user-avatar-demo {
    width: 50px;
    height: 50px;
    position: relative;
    border-radius: 50%;
    overflow: hidden;
    border: 3px solid #1a1a2e;
}

.user-avatar-demo .avatar-gradient {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.user-avatar-demo .user-initial {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: white;
    font-weight: bold;
    font-size: 18px;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

/* Card Demo for Frame Previews */
.card-demo {
    width: 70px;
    height: 55px;
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.08) 0%, rgba(255, 255, 255, 0.03) 100%);
    border-radius: 16px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    position: relative;
    border: 2px solid rgba(255, 255, 255, 0.12);
}

/* Mini card demo for locker frames */
.card-demo-mini {
    width: 55px;
    height: 40px;
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.08) 0%, rgba(255, 255, 255, 0.03) 100%);
    border-radius: 12px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    position: relative;
    border: 2px solid rgba(255, 255, 255, 0.12);
}

.card-demo-mini .card-demo-name {
    font-size: 6px;
}

.card-demo-mini .card-demo-aura {
    font-size: 10px;
}

.card-demo-name {
    font-size: 8px;
    color: var(--text-primary);
    font-weight: 600;
}

.card-demo-aura {
    font-size: 12px;
    color: var(--text-primary);
    font-weight: bold;
}

/* Card Demo Frame Styles */
.card-demo-gold {
    border: 2px solid #ffd700;
    box-shadow: 0 0 15px rgba(255, 215, 0, 0.5);
    animation: cardDemoGoldGlow 2s ease-in-out infinite;
}

.card-demo-neon {
    border: 2px solid #00ffff;
    box-shadow: 0 0 15px rgba(0, 255, 255, 0.6);
    animation: cardDemoNeonPulse 1.5s ease-in-out infinite;
}

.card-demo-rainbow {
    border: 2px solid transparent;
    border-image: linear-gradient(135deg, #ff0000, #ff7f00, #ffff00, #00ff00, #0000ff, #4b0082, #9400d3) 1;
    box-shadow: 0 0 15px rgba(255, 0, 255, 0.4);
    animation: cardDemoRainbowRotate 3s linear infinite;
}

.card-demo-fire {
    border: 2px solid #ff4500;
    box-shadow: 0 0 15px rgba(255, 69, 0, 0.6);
    animation: cardDemoFireFlicker 0.5s ease-in-out infinite;
}

.card-demo-ice {
    border: 2px solid #00ffff;
    box-shadow: 0 0 15px rgba(0, 255, 255, 0.4);
    animation: cardDemoIceShimmer 2s ease-in-out infinite;
}

.card-demo-galaxy {
    border: 2px solid #8a2be2;
    box-shadow: 0 0 15px rgba(138, 43, 226, 0.5);
    animation: cardDemoGalaxySwirl 4s ease-in-out infinite;
}

.card-demo-shadow {
    border: 2px solid #16213e;
    box-shadow: 0 0 15px rgba(15, 52, 96, 0.8);
    animation: cardDemoShadowPulse 3s ease-in-out infinite;
}

@keyframes cardDemoGoldGlow {
    0%, 100% { box-shadow: 0 0 15px rgba(255, 215, 0, 0.5); }
    50% { box-shadow: 0 0 20px rgba(255, 215, 0, 0.8); }
}

@keyframes cardDemoNeonPulse {
    0%, 100% { box-shadow: 0 0 15px rgba(0, 255, 255, 0.6); }
    50% { box-shadow: 0 0 25px rgba(0, 255, 255, 0.9); }
}

@keyframes cardDemoRainbowRotate {
    0% { border-image: linear-gradient(0deg, #ff0000, #ff7f00, #ffff00, #00ff00, #0000ff, #4b0082, #9400d3) 1; }
    100% { border-image: linear-gradient(360deg, #ff0000, #ff7f00, #ffff00, #00ff00, #0000ff, #4b0082, #9400d3) 1; }
}

@keyframes cardDemoFireFlicker {
    0%, 100% { box-shadow: 0 0 15px rgba(255, 69, 0, 0.6); }
    50% { box-shadow: 0 0 20px rgba(255, 140, 0, 0.8); }
}

@keyframes cardDemoIceShimmer {
    0%, 100% { box-shadow: 0 0 15px rgba(0, 255, 255, 0.4); }
    50% { box-shadow: 0 0 20px rgba(135, 206, 235, 0.7); }
}

@keyframes cardDemoGalaxySwirl {
    0%, 100% { box-shadow: 0 0 15px rgba(138, 43, 226, 0.5); }
    50% { box-shadow: 0 0 25px rgba(75, 0, 130, 0.8); }
}

@keyframes cardDemoShadowPulse {
    0%, 100% { box-shadow: 0 0 15px rgba(15, 52, 96, 0.8); }
    50% { box-shadow: 0 0 20px rgba(22, 33, 62, 0.9); }
}

/* New Card Demo Frame Styles */
.card-demo-electric {
    border: 2px solid #ffeb3b;
    box-shadow: 0 0 15px rgba(255, 215, 0, 0.6);
    animation: cardDemoElectricSpark 0.3s ease-in-out infinite;
}

@keyframes cardDemoElectricSpark {
    0%, 100% { box-shadow: 0 0 15px rgba(255, 215, 0, 0.6); }
    50% { box-shadow: 0 0 25px rgba(255, 255, 0, 0.9); }
}

.card-demo-cosmic {
    border: 2px solid #4a148c;
    box-shadow: 0 0 20px rgba(138, 43, 226, 0.5);
    animation: cardDemoCosmicDrift 5s ease-in-out infinite;
}

@keyframes cardDemoCosmicDrift {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.02); }
}

.card-demo-magma {
    border: 2px solid #ff5722;
    box-shadow: 0 0 15px rgba(255, 87, 34, 0.6);
    animation: cardDemoMagmaFlow 3s ease-in-out infinite;
}

@keyframes cardDemoMagmaFlow {
    0%, 100% { box-shadow: 0 0 15px rgba(255, 87, 34, 0.6); }
    50% { box-shadow: 0 0 25px rgba(255, 140, 0, 0.8); }
}

.card-demo-frost {
    border: 2px solid #b3e5fc;
    box-shadow: 0 0 15px rgba(179, 229, 252, 0.5);
    animation: cardDemoFrostBite 2s ease-in-out infinite;
}

@keyframes cardDemoFrostBite {
    0%, 100% { box-shadow: 0 0 15px rgba(179, 229, 252, 0.5); }
    50% { box-shadow: 0 0 25px rgba(225, 245, 254, 0.8); }
}

.card-demo-toxic {
    border: 2px solid #76ff03;
    box-shadow: 0 0 15px rgba(118, 255, 3, 0.5);
    animation: cardDemoToxicPulse 2s ease-in-out infinite;
}

@keyframes cardDemoToxicPulse {
    0%, 100% { filter: brightness(1); }
    50% { filter: brightness(1.3); }
}

.card-demo-royal {
    border: 2px solid #ffd700;
    box-shadow: 0 0 20px rgba(255, 215, 0, 0.6);
    animation: cardDemoRoyalShine 3s ease-in-out infinite;
}

@keyframes cardDemoRoyalShine {
    0%, 100% { box-shadow: 0 0 20px rgba(255, 215, 0, 0.6); }
    50% { box-shadow: 0 0 30px rgba(255, 143, 0, 0.8); }
}

.card-demo-stealth {
    border: 2px solid #424242;
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.8);
    animation: cardDemoStealthFade 4s ease-in-out infinite;
}

@keyframes cardDemoStealthFade {
    0%, 100% { opacity: 0.8; }
    50% { opacity: 1; }
}

.card-demo-bubble {
    border: 2px solid #ce93d8;
    box-shadow: 0 0 15px rgba(225, 190, 231, 0.5);
    animation: cardDemoBubbleFloat 2s ease-in-out infinite;
}

@keyframes cardDemoBubbleFloat {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-3px); }
}

.card-demo-cyber {
    border: 2px solid #00e5ff;
    box-shadow: 0 0 15px rgba(0, 229, 255, 0.5);
    animation: cardDemoCyberGlitch 1.5s ease-in-out infinite;
}

@keyframes cardDemoCyberGlitch {
    0%, 100% { transform: translateX(0); }
    50% { transform: translateX(2px); }
}

.card-demo-nature {
    border: 2px solid #4caf50;
    box-shadow: 0 0 15px rgba(76, 175, 80, 0.5);
    animation: cardDemoNatureGrow 3s ease-in-out infinite;
}

@keyframes cardDemoNatureGrow {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.02); }
}

.card-demo-ocean {
    border: 2px solid #0288d1;
    box-shadow: 0 0 15px rgba(2, 136, 209, 0.5);
    animation: cardDemoOceanWave 3s ease-in-out infinite;
}

@keyframes cardDemoOceanWave {
    0%, 100% { box-shadow: 0 0 15px rgba(2, 136, 209, 0.5); }
    50% { box-shadow: 0 0 25px rgba(41, 182, 246, 0.7); }
}

.card-demo-sunset {
    border: 2px solid #ff8f00;
    box-shadow: 0 0 15px rgba(255, 143, 0, 0.5);
    animation: cardDemoSunsetGlow 3s ease-in-out infinite;
}

@keyframes cardDemoSunsetGlow {
    0%, 100% { filter: hue-rotate(0deg); }
    50% { filter: hue-rotate(10deg); }
}

.card-demo-midnight {
    border: 2px solid #1565c0;
    box-shadow: 0 0 15px rgba(21, 101, 192, 0.5);
    animation: cardDemoMidnightShimmer 3s ease-in-out infinite;
}

@keyframes cardDemoMidnightShimmer {
    0%, 100% { opacity: 0.9; }
    50% { opacity: 1; }
}

.card-demo-cherry {
    border: 2px solid #e91e63;
    box-shadow: 0 0 15px rgba(233, 30, 99, 0.5);
    animation: cardDemoCherryBloom 2s ease-in-out infinite;
}

@keyframes cardDemoCherryBloom {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.01); }
}

.card-demo-storm {
    border: 2px solid #546e7a;
    box-shadow: 0 0 15px rgba(84, 110, 122, 0.6);
    animation: cardDemoStormFlash 0.5s ease-in-out infinite;
}

@keyframes cardDemoStormFlash {
    0%, 100% { box-shadow: 0 0 15px rgba(84, 110, 122, 0.6); }
    50% { box-shadow: 0 0 25px rgba(255, 255, 255, 0.3); }
}

.card-demo-matrix {
    border: 2px solid #00e676;
    box-shadow: 0 0 15px rgba(0, 230, 118, 0.5);
    animation: cardDemoMatrixRain 1s linear infinite;
}

@keyframes cardDemoMatrixRain {
    0% { background-position: 0% 0%; }
    100% { background-position: 0% 100%; }
}

.card-demo-lava {
    border: 2px solid #ff3d00;
    box-shadow: 0 0 15px rgba(255, 61, 0, 0.5);
    animation: cardDemoLavaDrip 3s ease-in-out infinite;
}

@keyframes cardDemoLavaDrip {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(3px); }
}

.card-demo-prism {
    border: 2px solid transparent;
    border-image: linear-gradient(135deg, #ff4081, #7c4dff, #448aff, #00b0ff, #00e5ff) 1;
    box-shadow: 0 0 20px rgba(255, 64, 129, 0.4);
    animation: cardDemoPrismShift 2s linear infinite;
}

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

.card-demo-ghost {
    border: 2px solid rgba(255, 255, 255, 0.3);
    box-shadow: 0 0 15px rgba(255, 255, 255, 0.3);
    animation: cardDemoGhostFade 2s ease-in-out infinite;
}

@keyframes cardDemoGhostFade {
    0%, 100% { opacity: 0.5; }
    50% { opacity: 0.8; }
}

.card-demo-holo {
    border: 2px solid #ff00cc;
    box-shadow: 0 0 20px rgba(255, 0, 204, 0.4);
    animation: cardDemoHoloShift 2s ease-in-out infinite;
}

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

.card-demo-vintage {
    border: 2px solid #a1887f;
    box-shadow: 0 0 15px rgba(141, 110, 99, 0.5);
    animation: cardDemoVintageAge 4s ease-in-out infinite;
}

@keyframes cardDemoVintageAge {
    0%, 100% { filter: sepia(0); }
    50% { filter: sepia(0.3); }
}

.card-demo-neonpink {
    border: 2px solid #ff00ff;
    box-shadow: 0 0 15px rgba(255, 0, 255, 0.5);
    animation: cardDemoNeonPinkPulse 1s ease-in-out infinite;
}

@keyframes cardDemoNeonPinkPulse {
    0%, 100% { box-shadow: 0 0 15px rgba(255, 0, 255, 0.5); }
    50% { box-shadow: 0 0 25px rgba(255, 20, 147, 0.8); }
}

.card-demo-neongreen {
    border: 2px solid #39ff14;
    box-shadow: 0 0 15px rgba(57, 255, 20, 0.5);
    animation: cardDemoNeonGreenPulse 1s ease-in-out infinite;
}

@keyframes cardDemoNeonGreenPulse {
    0%, 100% { box-shadow: 0 0 15px rgba(57, 255, 20, 0.5); }
    50% { box-shadow: 0 0 25px rgba(0, 255, 0, 0.8); }
}

.card-demo-crimson {
    border: 2px solid #c62828;
    box-shadow: 0 0 15px rgba(198, 40, 40, 0.5);
    animation: cardDemoCrimsonGlow 2s ease-in-out infinite;
}

@keyframes cardDemoCrimsonGlow {
    0%, 100% { box-shadow: 0 0 15px rgba(198, 40, 40, 0.5); }
    50% { box-shadow: 0 0 25px rgba(211, 47, 47, 0.7); }
}

.card-demo-amethyst {
    border: 2px solid #ab47bc;
    box-shadow: 0 0 15px rgba(171, 71, 188, 0.5);
    animation: cardDemoAmethystSparkle 2.5s ease-in-out infinite;
}

@keyframes cardDemoAmethystSparkle {
    0%, 100% { opacity: 0.9; }
    50% { opacity: 1; }
}

.card-demo-emerald {
    border: 2px solid #2e7d32;
    box-shadow: 0 0 15px rgba(46, 125, 50, 0.5);
    animation: cardDemoEmeraldShine 3s ease-in-out infinite;
}

@keyframes cardDemoEmeraldShine {
    0%, 100% { box-shadow: 0 0 15px rgba(46, 125, 50, 0.5); }
    50% { box-shadow: 0 0 25px rgba(56, 142, 60, 0.7); }
}

.card-demo-sapphire {
    border: 2px solid #1565c0;
    box-shadow: 0 0 15px rgba(21, 101, 192, 0.5);
    animation: cardDemoSapphireGlint 2s ease-in-out infinite;
}

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

.card-demo-ruby {
    border: 2px solid #d32f2f;
    box-shadow: 0 0 15px rgba(211, 47, 47, 0.5);
    animation: cardDemoRubyPulse 2s ease-in-out infinite;
}

@keyframes cardDemoRubyPulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.01); }
}

.card-demo-diamond {
    border: 2px solid #bbdefb;
    box-shadow: 0 0 20px rgba(187, 222, 251, 0.7), inset 0 0 10px rgba(255, 255, 255, 0.5);
    animation: cardDemoDiamondSparkle 1.5s ease-in-out infinite;
}

@keyframes cardDemoDiamondSparkle {
    0%, 100% { box-shadow: 0 0 20px rgba(187, 222, 251, 0.7); }
    50% { box-shadow: 0 0 30px rgba(255, 255, 255, 0.9); }
}

.card-demo-obsidian {
    border: 2px solid #212121;
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.8), inset 0 0 8px rgba(255, 255, 255, 0.1);
    animation: cardDemoObsidianSheen 3s ease-in-out infinite;
}

@keyframes cardDemoObsidianSheen {
    0%, 100% { filter: brightness(1); }
    50% { filter: brightness(1.2); }
}

.card-demo-quartz {
    border: 2px solid #f5f5f5;
    box-shadow: 0 0 15px rgba(255, 255, 255, 0.5);
    animation: cardDemoQuartzGlow 2s ease-in-out infinite;
}

@keyframes cardDemoQuartzGlow {
    0%, 100% { box-shadow: 0 0 15px rgba(255, 255, 255, 0.5); }
    50% { box-shadow: 0 0 25px rgba(255, 255, 255, 0.7); }
}

.card-demo-pearl {
    border: 2px solid #ffe0b2;
    box-shadow: 0 0 15px rgba(255, 224, 178, 0.5), inset 0 0 8px rgba(255, 255, 255, 0.5);
    animation: cardDemoPearlLuster 3s ease-in-out infinite;
}

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

.card-demo-jade {
    border: 2px solid #1de9b6;
    box-shadow: 0 0 15px rgba(29, 233, 182, 0.5);
    animation: cardDemoJadeGlow 2s ease-in-out infinite;
}

@keyframes cardDemoJadeGlow {
    0%, 100% { box-shadow: 0 0 15px rgba(29, 233, 182, 0.5); }
    50% { box-shadow: 0 0 25px rgba(100, 255, 218, 0.7); }
}

.card-demo-topaz {
    border: 2px solid #ff8f00;
    box-shadow: 0 0 15px rgba(255, 143, 0, 0.5);
    animation: cardDemoTopazFlare 2s ease-in-out infinite;
}

@keyframes cardDemoTopazFlare {
    0%, 100% { transform: rotate(0deg); }
    50% { transform: rotate(1deg); }
}

/* Frame Styles */
.frame-preview-none {
    background: transparent;
    border: 2px solid rgba(255, 255, 255, 0.1);
}

.frame-preview-gold {
    background: linear-gradient(135deg, #ffd700, #ffb300, #ffd700);
    box-shadow: 0 0 20px rgba(255, 215, 0, 0.5);
    animation: goldGlow 2s ease-in-out infinite;
}

@keyframes goldGlow {
    0%, 100% { box-shadow: 0 0 20px rgba(255, 215, 0, 0.5); }
    50% { box-shadow: 0 0 30px rgba(255, 215, 0, 0.8); }
}

.frame-preview-neon {
    background: linear-gradient(135deg, #00ffff, #ff00ff, #00ffff);
    box-shadow: 0 0 25px rgba(0, 255, 255, 0.6);
    animation: neonPulse 1.5s ease-in-out infinite;
}

@keyframes neonPulse {
    0%, 100% { 
        box-shadow: 0 0 25px rgba(0, 255, 255, 0.6);
        transform: scale(1);
    }
    50% { 
        box-shadow: 0 0 35px rgba(0, 255, 255, 0.9);
        transform: scale(1.05);
    }
}

.frame-preview-rainbow {
    background: linear-gradient(135deg, #ff0000, #ff7f00, #ffff00, #00ff00, #0000ff, #4b0082, #9400d3);
    box-shadow: 0 0 30px rgba(255, 0, 255, 0.4);
    animation: rainbowRotate 3s linear infinite;
}

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

.frame-preview-fire {
    background: linear-gradient(135deg, #ff4500, #ff6347, #ff8c00, #ffa500);
    box-shadow: 0 0 25px rgba(255, 69, 0, 0.6);
    animation: fireFlicker 0.5s ease-in-out infinite;
}

@keyframes fireFlicker {
    0%, 100% { 
        box-shadow: 0 0 25px rgba(255, 69, 0, 0.6);
        transform: scale(1);
    }
    50% { 
        box-shadow: 0 0 35px rgba(255, 140, 0, 0.8);
        transform: scale(1.02);
    }
}

.frame-preview-ice {
    background: linear-gradient(135deg, #00ffff, #87ceeb, #b0e0e6, #add8e6);
    box-shadow: 0 0 20px rgba(0, 255, 255, 0.4);
    animation: iceShimmer 2s ease-in-out infinite;
}

@keyframes iceShimmer {
    0%, 100% { 
        box-shadow: 0 0 20px rgba(0, 255, 255, 0.4);
        filter: brightness(1);
    }
    50% { 
        box-shadow: 0 0 30px rgba(135, 206, 235, 0.6);
        filter: brightness(1.2);
    }
}

.frame-preview-galaxy {
    background: linear-gradient(135deg, #4b0082, #8a2be2, #9400d3, #dda0dd);
    box-shadow: 0 0 30px rgba(138, 43, 226, 0.5);
    animation: galaxySwirl 4s ease-in-out infinite;
}

@keyframes galaxySwirl {
    0%, 100% { 
        box-shadow: 0 0 30px rgba(138, 43, 226, 0.5);
        transform: rotate(0deg);
    }
    50% { 
        box-shadow: 0 0 40px rgba(148, 0, 211, 0.7);
        transform: rotate(5deg);
    }
}

.frame-preview-shadow {
    background: linear-gradient(135deg, #1a1a2e, #16213e, #0f3460);
    box-shadow: 0 0 25px rgba(15, 52, 96, 0.8), inset 0 0 15px rgba(0, 0, 0, 0.5);
    animation: shadowPulse 3s ease-in-out infinite;
}

@keyframes shadowPulse {
    0%, 100% { 
        box-shadow: 0 0 25px rgba(15, 52, 96, 0.8), inset 0 0 15px rgba(0, 0, 0, 0.5);
    }
    50% { 
        box-shadow: 0 0 35px rgba(22, 33, 62, 0.9), inset 0 0 20px rgba(0, 0, 0, 0.7);
    }
}

/* Login Screen Frame Application */
.login-screen .user-avatar {
    position: relative;
}

.login-screen .user-avatar.frame-gold {
    background: linear-gradient(135deg, #ffd700, #ffb300, #ffd700);
    box-shadow: 0 0 20px rgba(255, 215, 0, 0.5);
    animation: goldGlow 2s ease-in-out infinite;
}

.login-screen .user-avatar.frame-neon {
    background: linear-gradient(135deg, #00ffff, #ff00ff, #00ffff);
    box-shadow: 0 0 25px rgba(0, 255, 255, 0.6);
    animation: neonPulse 1.5s ease-in-out infinite;
}

.login-screen .user-avatar.frame-rainbow {
    background: linear-gradient(135deg, #ff0000, #ff7f00, #ffff00, #00ff00, #0000ff, #4b0082, #9400d3);
    box-shadow: 0 0 30px rgba(255, 0, 255, 0.4);
    animation: rainbowRotate 3s linear infinite;
}

.login-screen .user-avatar.frame-fire {
    background: linear-gradient(135deg, #ff4500, #ff6347, #ff8c00, #ffa500);
    box-shadow: 0 0 25px rgba(255, 69, 0, 0.6);
    animation: fireFlicker 0.5s ease-in-out infinite;
}

.login-screen .user-avatar.frame-ice {
    background: linear-gradient(135deg, #00ffff, #87ceeb, #b0e0e6, #add8e6);
    box-shadow: 0 0 20px rgba(0, 255, 255, 0.4);
    animation: iceShimmer 2s ease-in-out infinite;
}

.login-screen .user-avatar.frame-galaxy {
    background: linear-gradient(135deg, #4b0082, #8a2be2, #9400d3, #dda0dd);
    box-shadow: 0 0 30px rgba(138, 43, 226, 0.5);
    animation: galaxySwirl 4s ease-in-out infinite;
}

.login-screen .user-avatar.frame-shadow {
    background: linear-gradient(135deg, #1a1a2e, #16213e, #0f3460);
    box-shadow: 0 0 25px rgba(15, 52, 96, 0.8), inset 0 0 15px rgba(0, 0, 0, 0.5);
    animation: shadowPulse 3s ease-in-out infinite;
}

/* Aura Tracker Person Card Frames */
#auraTrackerScreen .person-card {
    position: relative;
}

#auraTrackerScreen .person-card.frame-gold {
    border: 3px solid #ffd700;
    border-radius: 24px;
    box-shadow: 0 0 20px rgba(255, 215, 0, 0.5), inset 0 0 10px rgba(255, 215, 0, 0.2);
    animation: cardGoldGlow 2s ease-in-out infinite;
}

#auraTrackerScreen .person-card.frame-neon {
    border: 3px solid #00ffff;
    border-radius: 24px;
    box-shadow: 0 0 25px rgba(0, 255, 255, 0.6), inset 0 0 10px rgba(255, 0, 255, 0.2);
    animation: cardNeonPulse 1.5s ease-in-out infinite;
}

#auraTrackerScreen .person-card.frame-rainbow {
    border: 3px solid transparent;
    border-radius: 24px;
    background: linear-gradient(#1a1a2e, #1a1a2e) padding-box,
                linear-gradient(135deg, #ff0000, #ff7f00, #ffff00, #00ff00, #0000ff, #4b0082, #9400d3) border-box;
    box-shadow: 0 0 30px rgba(255, 0, 255, 0.4);
    animation: cardRainbowGlow 3s ease-in-out infinite;
}

#auraTrackerScreen .person-card.frame-fire {
    border: 3px solid #ff4500;
    border-radius: 24px;
    box-shadow: 0 0 25px rgba(255, 69, 0, 0.6), inset 0 0 10px rgba(255, 140, 0, 0.2);
    animation: cardFireFlicker 0.5s ease-in-out infinite;
}

#auraTrackerScreen .person-card.frame-ice {
    border: 3px solid #00ffff;
    border-radius: 24px;
    box-shadow: 0 0 20px rgba(0, 255, 255, 0.4), inset 0 0 10px rgba(135, 206, 235, 0.2);
    animation: cardIceShimmer 2s ease-in-out infinite;
}

#auraTrackerScreen .person-card.frame-galaxy {
    border: 3px solid #8a2be2;
    border-radius: 24px;
    box-shadow: 0 0 30px rgba(138, 43, 226, 0.5), inset 0 0 10px rgba(148, 0, 211, 0.2);
    animation: cardGalaxySwirl 4s ease-in-out infinite;
}

#auraTrackerScreen .person-card.frame-shadow {
    border: 3px solid #16213e;
    border-radius: 24px;
    box-shadow: 0 0 25px rgba(15, 52, 96, 0.8), inset 0 0 15px rgba(0, 0, 0, 0.5);
    animation: cardShadowPulse 3s ease-in-out infinite;
}

/* Card Frame Styles for New Frames */
#auraTrackerScreen .person-card.frame-electric {
    border: 3px solid #ffeb3b;
    border-radius: 24px;
    box-shadow: 0 0 25px rgba(255, 215, 0, 0.6), inset 0 0 10px rgba(255, 235, 59, 0.2);
    animation: cardElectricSpark 0.3s ease-in-out infinite;
}

#auraTrackerScreen .person-card.frame-cosmic {
    border: 3px solid #4a148c;
    border-radius: 24px;
    box-shadow: 0 0 30px rgba(138, 43, 226, 0.5), inset 0 0 15px rgba(74, 20, 140, 0.2);
    animation: cardCosmicDrift 5s ease-in-out infinite;
}

#auraTrackerScreen .person-card.frame-magma {
    border: 3px solid #ff5722;
    border-radius: 24px;
    box-shadow: 0 0 25px rgba(255, 87, 34, 0.6), inset 0 0 10px rgba(255, 87, 34, 0.2);
    animation: cardMagmaFlow 3s ease-in-out infinite;
}

#auraTrackerScreen .person-card.frame-frost {
    border: 3px solid #b3e5fc;
    border-radius: 24px;
    box-shadow: 0 0 20px rgba(179, 229, 252, 0.5), inset 0 0 10px rgba(179, 229, 252, 0.2);
    animation: cardFrostBite 2s ease-in-out infinite;
}

#auraTrackerScreen .person-card.frame-toxic {
    border: 3px solid #76ff03;
    border-radius: 24px;
    box-shadow: 0 0 25px rgba(118, 255, 3, 0.5), inset 0 0 10px rgba(118, 255, 3, 0.2);
    animation: cardToxicPulse 2s ease-in-out infinite;
}

#auraTrackerScreen .person-card.frame-royal {
    border: 3px solid #ffd700;
    border-radius: 24px;
    box-shadow: 0 0 30px rgba(255, 215, 0, 0.6), inset 0 0 15px rgba(255, 143, 0, 0.2);
    animation: cardRoyalShine 3s ease-in-out infinite;
}

#auraTrackerScreen .person-card.frame-stealth {
    border: 3px solid #424242;
    border-radius: 24px;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.8), inset 0 0 10px rgba(66, 66, 66, 0.3);
    animation: cardStealthFade 4s ease-in-out infinite;
}

#auraTrackerScreen .person-card.frame-bubble {
    border: 3px solid #ce93d8;
    border-radius: 24px;
    box-shadow: 0 0 20px rgba(225, 190, 231, 0.5), inset 0 0 10px rgba(206, 147, 216, 0.2);
    animation: cardBubbleFloat 2s ease-in-out infinite;
}

#auraTrackerScreen .person-card.frame-cyber {
    border: 3px solid #00e5ff;
    border-radius: 24px;
    box-shadow: 0 0 25px rgba(0, 229, 255, 0.5), inset 0 0 10px rgba(213, 0, 249, 0.2);
    animation: cardCyberGlitch 1.5s ease-in-out infinite;
}

#auraTrackerScreen .person-card.frame-nature {
    border: 3px solid #4caf50;
    border-radius: 24px;
    box-shadow: 0 0 20px rgba(76, 175, 80, 0.5), inset 0 0 10px rgba(139, 195, 74, 0.2);
    animation: cardNatureGrow 3s ease-in-out infinite;
}

#auraTrackerScreen .person-card.frame-ocean {
    border: 3px solid #0288d1;
    border-radius: 24px;
    box-shadow: 0 0 25px rgba(2, 136, 209, 0.5), inset 0 0 10px rgba(41, 182, 246, 0.2);
    animation: cardOceanWave 3s ease-in-out infinite;
}

#auraTrackerScreen .person-card.frame-sunset {
    border: 3px solid #ff8f00;
    border-radius: 24px;
    box-shadow: 0 0 25px rgba(255, 143, 0, 0.5), inset 0 0 10px rgba(255, 193, 7, 0.2);
    animation: cardSunsetGlow 3s ease-in-out infinite;
}

#auraTrackerScreen .person-card.frame-midnight {
    border: 3px solid #1565c0;
    border-radius: 24px;
    box-shadow: 0 0 25px rgba(21, 101, 192, 0.5), inset 0 0 10px rgba(25, 118, 210, 0.2);
    animation: cardMidnightShimmer 3s ease-in-out infinite;
}

#auraTrackerScreen .person-card.frame-cherry {
    border: 3px solid #e91e63;
    border-radius: 24px;
    box-shadow: 0 0 20px rgba(233, 30, 99, 0.5), inset 0 0 10px rgba(244, 143, 177, 0.2);
    animation: cardCherryBloom 2s ease-in-out infinite;
}

#auraTrackerScreen .person-card.frame-storm {
    border: 3px solid #546e7a;
    border-radius: 24px;
    box-shadow: 0 0 25px rgba(84, 110, 122, 0.6), inset 0 0 10px rgba(120, 144, 156, 0.2);
    animation: cardStormFlash 0.5s ease-in-out infinite;
}

#auraTrackerScreen .person-card.frame-matrix {
    border: 3px solid #00e676;
    border-radius: 24px;
    box-shadow: 0 0 20px rgba(0, 230, 118, 0.5), inset 0 0 10px rgba(0, 200, 83, 0.2);
    animation: cardMatrixRain 1s linear infinite;
}

#auraTrackerScreen .person-card.frame-lava {
    border: 3px solid #ff3d00;
    border-radius: 24px;
    box-shadow: 0 0 25px rgba(255, 61, 0, 0.5), inset 0 0 10px rgba(255, 109, 0, 0.2);
    animation: cardLavaDrip 3s ease-in-out infinite;
}

#auraTrackerScreen .person-card.frame-prism {
    border: 3px solid transparent;
    border-radius: 24px;
    background: linear-gradient(#1a1a2e, #1a1a2e) padding-box,
                linear-gradient(135deg, #ff4081, #7c4dff, #448aff, #00b0ff, #00e5ff) border-box;
    box-shadow: 0 0 30px rgba(255, 64, 129, 0.4);
    animation: cardPrismShift 2s linear infinite;
}

#auraTrackerScreen .person-card.frame-ghost {
    border: 3px solid rgba(255, 255, 255, 0.3);
    border-radius: 24px;
    box-shadow: 0 0 20px rgba(255, 255, 255, 0.3), inset 0 0 15px rgba(255, 255, 255, 0.1);
    animation: cardGhostFade 2s ease-in-out infinite;
}

#auraTrackerScreen .person-card.frame-holo {
    border: 3px solid #ff00cc;
    border-radius: 24px;
    box-shadow: 0 0 30px rgba(255, 0, 204, 0.4), inset 0 0 15px rgba(0, 255, 255, 0.2);
    animation: cardHoloShift 2s ease-in-out infinite;
}

#auraTrackerScreen .person-card.frame-vintage {
    border: 3px solid #a1887f;
    border-radius: 24px;
    box-shadow: 0 0 20px rgba(141, 110, 99, 0.5), inset 0 0 10px rgba(161, 136, 127, 0.2);
    animation: cardVintageAge 4s ease-in-out infinite;
}

#auraTrackerScreen .person-card.frame-neonpink {
    border: 3px solid #ff00ff;
    border-radius: 24px;
    box-shadow: 0 0 25px rgba(255, 0, 255, 0.5), inset 0 0 10px rgba(255, 20, 147, 0.2);
    animation: cardNeonPinkPulse 1s ease-in-out infinite;
}

#auraTrackerScreen .person-card.frame-neongreen {
    border: 3px solid #39ff14;
    border-radius: 24px;
    box-shadow: 0 0 25px rgba(57, 255, 20, 0.5), inset 0 0 10px rgba(0, 255, 0, 0.2);
    animation: cardNeonGreenPulse 1s ease-in-out infinite;
}

#auraTrackerScreen .person-card.frame-crimson {
    border: 3px solid #c62828;
    border-radius: 24px;
    box-shadow: 0 0 25px rgba(198, 40, 40, 0.5), inset 0 0 10px rgba(211, 47, 47, 0.2);
    animation: cardCrimsonGlow 2s ease-in-out infinite;
}

#auraTrackerScreen .person-card.frame-amethyst {
    border: 3px solid #ab47bc;
    border-radius: 24px;
    box-shadow: 0 0 25px rgba(171, 71, 188, 0.5), inset 0 0 10px rgba(186, 104, 200, 0.2);
    animation: cardAmethystSparkle 2.5s ease-in-out infinite;
}

#auraTrackerScreen .person-card.frame-emerald {
    border: 3px solid #2e7d32;
    border-radius: 24px;
    box-shadow: 0 0 25px rgba(46, 125, 50, 0.5), inset 0 0 10px rgba(56, 142, 60, 0.2);
    animation: cardEmeraldShine 3s ease-in-out infinite;
}

#auraTrackerScreen .person-card.frame-sapphire {
    border: 3px solid #1565c0;
    border-radius: 24px;
    box-shadow: 0 0 25px rgba(21, 101, 192, 0.5), inset 0 0 10px rgba(25, 118, 210, 0.2);
    animation: cardSapphireGlint 2s ease-in-out infinite;
}

#auraTrackerScreen .person-card.frame-ruby {
    border: 3px solid #d32f2f;
    border-radius: 24px;
    box-shadow: 0 0 25px rgba(211, 47, 47, 0.5), inset 0 0 10px rgba(244, 67, 54, 0.2);
    animation: cardRubyPulse 2s ease-in-out infinite;
}

#auraTrackerScreen .person-card.frame-diamond {
    border: 3px solid #bbdefb;
    border-radius: 24px;
    box-shadow: 0 0 30px rgba(187, 222, 251, 0.7), inset 0 0 20px rgba(255, 255, 255, 0.3);
    animation: cardDiamondSparkle 1.5s ease-in-out infinite;
}

#auraTrackerScreen .person-card.frame-obsidian {
    border: 3px solid #212121;
    border-radius: 24px;
    box-shadow: 0 0 25px rgba(0, 0, 0, 0.8), inset 0 0 15px rgba(33, 33, 33, 0.3);
    animation: cardObsidianSheen 3s ease-in-out infinite;
}

#auraTrackerScreen .person-card.frame-quartz {
    border: 3px solid #f5f5f5;
    border-radius: 24px;
    box-shadow: 0 0 20px rgba(255, 255, 255, 0.5), inset 0 0 10px rgba(238, 238, 238, 0.3);
    animation: cardQuartzGlow 2s ease-in-out infinite;
}

#auraTrackerScreen .person-card.frame-pearl {
    border: 3px solid #ffe0b2;
    border-radius: 24px;
    box-shadow: 0 0 20px rgba(255, 224, 178, 0.5), inset 0 0 10px rgba(255, 204, 128, 0.3);
    animation: cardPearlLuster 3s ease-in-out infinite;
}

#auraTrackerScreen .person-card.frame-jade {
    border: 3px solid #1de9b6;
    border-radius: 24px;
    box-shadow: 0 0 25px rgba(29, 233, 182, 0.5), inset 0 0 10px rgba(100, 255, 218, 0.2);
    animation: cardJadeGlow 2s ease-in-out infinite;
}

#auraTrackerScreen .person-card.frame-topaz {
    border: 3px solid #ff8f00;
    border-radius: 24px;
    box-shadow: 0 0 25px rgba(255, 143, 0, 0.5), inset 0 0 10px rgba(255, 160, 0, 0.2);
    animation: cardTopazFlare 2s ease-in-out infinite;
}

/* Electric */
.frame-preview-electric {
    background: linear-gradient(135deg, #ffeb3b, #ff9800, #ffeb3b);
    box-shadow: 0 0 25px rgba(255, 215, 0, 0.6);
    animation: electricSpark 0.3s ease-in-out infinite;
}

@keyframes electricSpark {
    0%, 100% { box-shadow: 0 0 25px rgba(255, 215, 0, 0.6); }
    50% { box-shadow: 0 0 35px rgba(255, 255, 0, 0.9); }
}

/* Cosmic */
.frame-preview-cosmic {
    background: linear-gradient(135deg, #1a237e, #4a148c, #880e4f);
    box-shadow: 0 0 30px rgba(138, 43, 226, 0.5), inset 0 0 20px rgba(255, 255, 255, 0.1);
    animation: cosmicDrift 5s ease-in-out infinite;
}

@keyframes cosmicDrift {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.02); }
}

/* Magma */
.frame-preview-magma {
    background: linear-gradient(135deg, #bf360c, #ff5722, #bf360c);
    box-shadow: 0 0 25px rgba(255, 87, 34, 0.6);
    animation: magmaFlow 3s ease-in-out infinite;
}

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

/* Frost */
.frame-preview-frost {
    background: linear-gradient(135deg, #e1f5fe, #b3e5fc, #81d4fa);
    box-shadow: 0 0 20px rgba(179, 229, 252, 0.5);
    animation: frostBite 2s ease-in-out infinite;
}

@keyframes frostBite {
    0%, 100% { box-shadow: 0 0 20px rgba(179, 229, 252, 0.5); }
    50% { box-shadow: 0 0 30px rgba(225, 245, 254, 0.8); }
}

/* Toxic */
.frame-preview-toxic {
    background: linear-gradient(135deg, #76ff03, #64dd17, #33691e);
    box-shadow: 0 0 25px rgba(118, 255, 3, 0.5);
    animation: toxicPulse 2s ease-in-out infinite;
}

@keyframes toxicPulse {
    0%, 100% { filter: brightness(1); }
    50% { filter: brightness(1.3); }
}

/* Royal */
.frame-preview-royal {
    background: linear-gradient(135deg, #ffd700, #ff8f00, #ffd700);
    box-shadow: 0 0 30px rgba(255, 215, 0, 0.6);
    animation: royalShine 3s ease-in-out infinite;
}

@keyframes royalShine {
    0%, 100% { box-shadow: 0 0 30px rgba(255, 215, 0, 0.6); }
    50% { box-shadow: 0 0 40px rgba(255, 143, 0, 0.8); }
}

/* Stealth */
.frame-preview-stealth {
    background: linear-gradient(135deg, #212121, #424242, #212121);
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.8);
    animation: stealthFade 4s ease-in-out infinite;
}

@keyframes stealthFade {
    0%, 100% { opacity: 0.8; }
    50% { opacity: 1; }
}

/* Bubble */
.frame-preview-bubble {
    background: linear-gradient(135deg, #e1bee7, #ce93d8, #ba68c8);
    box-shadow: 0 0 20px rgba(225, 190, 231, 0.5);
    animation: bubbleFloat 2s ease-in-out infinite;
}

@keyframes bubbleFloat {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-3px); }
}

/* Cyber */
.frame-preview-cyber {
    background: linear-gradient(135deg, #00e5ff, #2979ff, #d500f9);
    box-shadow: 0 0 25px rgba(0, 229, 255, 0.5);
    animation: cyberGlitch 1.5s ease-in-out infinite;
}

@keyframes cyberGlitch {
    0%, 100% { transform: translateX(0); }
    50% { transform: translateX(2px); }
}

/* Nature */
.frame-preview-nature {
    background: linear-gradient(135deg, #4caf50, #8bc34a, #cddc39);
    box-shadow: 0 0 20px rgba(76, 175, 80, 0.5);
    animation: natureGrow 3s ease-in-out infinite;
}

@keyframes natureGrow {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.02); }
}

/* Ocean */
.frame-preview-ocean {
    background: linear-gradient(135deg, #0277bd, #0288d1, #29b6f6);
    box-shadow: 0 0 25px rgba(2, 136, 209, 0.5);
    animation: oceanWave 3s ease-in-out infinite;
}

@keyframes oceanWave {
    0%, 100% { box-shadow: 0 0 25px rgba(2, 136, 209, 0.5); }
    50% { box-shadow: 0 0 35px rgba(41, 182, 246, 0.7); }
}

/* Sunset */
.frame-preview-sunset {
    background: linear-gradient(135deg, #ff6f00, #ff8f00, #ffc107);
    box-shadow: 0 0 25px rgba(255, 143, 0, 0.5);
    animation: sunsetGlow 3s ease-in-out infinite;
}

@keyframes sunsetGlow {
    0%, 100% { filter: hue-rotate(0deg); }
    50% { filter: hue-rotate(10deg); }
}

/* Midnight */
.frame-preview-midnight {
    background: linear-gradient(135deg, #0d47a1, #1565c0, #1976d2);
    box-shadow: 0 0 25px rgba(21, 101, 192, 0.5);
    animation: midnightShimmer 3s ease-in-out infinite;
}

@keyframes midnightShimmer {
    0%, 100% { opacity: 0.9; }
    50% { opacity: 1; }
}

/* Cherry */
.frame-preview-cherry {
    background: linear-gradient(135deg, #c2185b, #e91e63, #f48fb1);
    box-shadow: 0 0 20px rgba(233, 30, 99, 0.5);
    animation: cherryBloom 2s ease-in-out infinite;
}

@keyframes cherryBloom {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.01); }
}

/* Storm */
.frame-preview-storm {
    background: linear-gradient(135deg, #37474f, #546e7a, #78909c);
    box-shadow: 0 0 25px rgba(55, 71, 79, 0.6);
    animation: stormFlash 0.5s ease-in-out infinite;
}

@keyframes stormFlash {
    0%, 100% { box-shadow: 0 0 25px rgba(55, 71, 79, 0.6); }
    50% { box-shadow: 0 0 35px rgba(255, 255, 255, 0.3); }
}

/* Matrix */
.frame-preview-matrix {
    background: linear-gradient(135deg, #00e676, #00c853);
    box-shadow: 0 0 20px rgba(0, 230, 118, 0.5);
    animation: matrixRain 1s linear infinite;
}

@keyframes matrixRain {
    0% { background-position: 0% 0%; }
    100% { background-position: 0% 100%; }
}

/* Lava */
.frame-preview-lava {
    background: linear-gradient(135deg, #dd2c00, #ff3d00, #ff6d00);
    box-shadow: 0 0 25px rgba(255, 61, 0, 0.5);
    animation: lavaDrip 3s ease-in-out infinite;
}

@keyframes lavaDrip {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(3px); }
}

/* Prism */
.frame-preview-prism {
    background: linear-gradient(135deg, #ff4081, #7c4dff, #448aff, #00b0ff, #00e5ff);
    box-shadow: 0 0 30px rgba(255, 64, 129, 0.4);
    animation: prismShift 2s linear infinite;
}

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

/* Ghost */
.frame-preview-ghost {
    background: linear-gradient(135deg, rgba(255,255,255,0.1), rgba(255,255,255,0.3));
    box-shadow: 0 0 20px rgba(255, 255, 255, 0.3);
    animation: ghostFade 2s ease-in-out infinite;
}

@keyframes ghostFade {
    0%, 100% { opacity: 0.5; }
    50% { opacity: 0.8; }
}

/* Holo */
.frame-preview-holo {
    background: linear-gradient(135deg, #ff00cc, #333399, #00ffff);
    box-shadow: 0 0 30px rgba(255, 0, 204, 0.4);
    animation: holoShift 2s ease-in-out infinite;
}

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

/* Vintage */
.frame-preview-vintage {
    background: linear-gradient(135deg, #8d6e63, #a1887f, #bcaaa4);
    box-shadow: 0 0 20px rgba(141, 110, 99, 0.5);
    animation: vintageAge 4s ease-in-out infinite;
}

@keyframes vintageAge {
    0%, 100% { filter: sepia(0); }
    50% { filter: sepia(0.3); }
}

/* Neon Pink */
.frame-preview-neonpink {
    background: linear-gradient(135deg, #ff00ff, #ff69b4, #ff1493);
    box-shadow: 0 0 25px rgba(255, 0, 255, 0.5);
    animation: neonPinkPulse 1s ease-in-out infinite;
}

@keyframes neonPinkPulse {
    0%, 100% { box-shadow: 0 0 25px rgba(255, 0, 255, 0.5); }
    50% { box-shadow: 0 0 35px rgba(255, 20, 147, 0.8); }
}

/* Neon Green */
.frame-preview-neongreen {
    background: linear-gradient(135deg, #39ff14, #00ff00, #7fff00);
    box-shadow: 0 0 25px rgba(57, 255, 20, 0.5);
    animation: neonGreenPulse 1s ease-in-out infinite;
}

@keyframes neonGreenPulse {
    0%, 100% { box-shadow: 0 0 25px rgba(57, 255, 20, 0.5); }
    50% { box-shadow: 0 0 35px rgba(0, 255, 0, 0.8); }
}

/* Crimson */
.frame-preview-crimson {
    background: linear-gradient(135deg, #b71c1c, #c62828, #d32f2f);
    box-shadow: 0 0 25px rgba(183, 28, 28, 0.5);
    animation: crimsonGlow 2s ease-in-out infinite;
}

@keyframes crimsonGlow {
    0%, 100% { box-shadow: 0 0 25px rgba(183, 28, 28, 0.5); }
    50% { box-shadow: 0 0 35px rgba(211, 47, 47, 0.7); }
}

/* Amethyst */
.frame-preview-amethyst {
    background: linear-gradient(135deg, #9c27b0, #ab47bc, #ba68c8);
    box-shadow: 0 0 25px rgba(156, 39, 176, 0.5);
    animation: amethystSparkle 2.5s ease-in-out infinite;
}

@keyframes amethystSparkle {
    0%, 100% { opacity: 0.9; }
    50% { opacity: 1; }
}

/* Emerald */
.frame-preview-emerald {
    background: linear-gradient(135deg, #1b5e20, #2e7d32, #388e3c);
    box-shadow: 0 0 25px rgba(46, 125, 50, 0.5);
    animation: emeraldShine 3s ease-in-out infinite;
}

@keyframes emeraldShine {
    0%, 100% { box-shadow: 0 0 25px rgba(46, 125, 50, 0.5); }
    50% { box-shadow: 0 0 35px rgba(56, 142, 60, 0.7); }
}

/* Sapphire */
.frame-preview-sapphire {
    background: linear-gradient(135deg, #0d47a1, #1565c0, #1976d2);
    box-shadow: 0 0 25px rgba(21, 101, 192, 0.5);
    animation: sapphireGlint 2s ease-in-out infinite;
}

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

/* Ruby */
.frame-preview-ruby {
    background: linear-gradient(135deg, #b71c1c, #d32f2f, #f44336);
    box-shadow: 0 0 25px rgba(211, 47, 47, 0.5);
    animation: rubyPulse 2s ease-in-out infinite;
}

@keyframes rubyPulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.01); }
}

/* Diamond */
.frame-preview-diamond {
    background: linear-gradient(135deg, #e3f2fd, #bbdefb, #90caf9);
    box-shadow: 0 0 30px rgba(187, 222, 251, 0.7), inset 0 0 20px rgba(255, 255, 255, 0.5);
    animation: diamondSparkle 1.5s ease-in-out infinite;
}

@keyframes diamondSparkle {
    0%, 100% { box-shadow: 0 0 30px rgba(187, 222, 251, 0.7); }
    50% { box-shadow: 0 0 40px rgba(255, 255, 255, 0.9); }
}

/* Obsidian */
.frame-preview-obsidian {
    background: linear-gradient(135deg, #000000, #212121, #424242);
    box-shadow: 0 0 25px rgba(0, 0, 0, 0.8), inset 0 0 15px rgba(255, 255, 255, 0.1);
    animation: obsidianSheen 3s ease-in-out infinite;
}

@keyframes obsidianSheen {
    0%, 100% { filter: brightness(1); }
    50% { filter: brightness(1.2); }
}

/* Quartz */
.frame-preview-quartz {
    background: linear-gradient(135deg, #fafafa, #f5f5f5, #eeeeee);
    box-shadow: 0 0 20px rgba(255, 255, 255, 0.5);
    animation: quartzGlow 2s ease-in-out infinite;
}

@keyframes quartzGlow {
    0%, 100% { box-shadow: 0 0 20px rgba(255, 255, 255, 0.5); }
    50% { box-shadow: 0 0 30px rgba(255, 255, 255, 0.7); }
}

/* Pearl */
.frame-preview-pearl {
    background: linear-gradient(135deg, #fff3e0, #ffe0b2, #ffcc80);
    box-shadow: 0 0 20px rgba(255, 224, 178, 0.5), inset 0 0 10px rgba(255, 255, 255, 0.5);
    animation: pearlLuster 3s ease-in-out infinite;
}

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

/* Jade */
.frame-preview-jade {
    background: linear-gradient(135deg, #00bfa5, #1de9b6, #64ffda);
    box-shadow: 0 0 25px rgba(0, 191, 165, 0.5);
    animation: jadeGlow 2s ease-in-out infinite;
}

@keyframes jadeGlow {
    0%, 100% { box-shadow: 0 0 25px rgba(0, 191, 165, 0.5); }
    50% { box-shadow: 0 0 35px rgba(29, 233, 182, 0.7); }
}

/* Topaz */
.frame-preview-topaz {
    background: linear-gradient(135deg, #ff6f00, #ff8f00, #ffa000);
    box-shadow: 0 0 25px rgba(255, 111, 0, 0.5);
    animation: topazFlare 2s ease-in-out infinite;
}

@keyframes topazFlare {
    0%, 100% { transform: rotate(0deg); }
    50% { transform: rotate(1deg); }
}

/* Person Card Frame Animations */
@keyframes cardGoldGlow {
    0%, 100% { box-shadow: 0 0 20px rgba(255, 215, 0, 0.5), inset 0 0 10px rgba(255, 215, 0, 0.2); }
    50% { box-shadow: 0 0 30px rgba(255, 215, 0, 0.8), inset 0 0 15px rgba(255, 215, 0, 0.4); }
}

@keyframes cardNeonPulse {
    0%, 100% { box-shadow: 0 0 25px rgba(0, 255, 255, 0.6), inset 0 0 10px rgba(255, 0, 255, 0.2); }
    50% { box-shadow: 0 0 40px rgba(0, 255, 255, 0.9), inset 0 0 20px rgba(255, 0, 255, 0.4); }
}

@keyframes cardRainbowGlow {
    0%, 100% { box-shadow: 0 0 20px rgba(255, 0, 255, 0.4), inset 0 0 10px rgba(255, 0, 255, 0.1); }
    50% { box-shadow: 0 0 40px rgba(255, 0, 255, 0.7), inset 0 0 20px rgba(255, 100, 255, 0.2); }
}

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

@keyframes cardFireFlicker {
    0%, 100% { box-shadow: 0 0 25px rgba(255, 69, 0, 0.6), inset 0 0 10px rgba(255, 140, 0, 0.2); }
    50% { box-shadow: 0 0 35px rgba(255, 140, 0, 0.8), inset 0 0 15px rgba(255, 69, 0, 0.4); }
}

@keyframes cardIceShimmer {
    0%, 100% { box-shadow: 0 0 20px rgba(0, 255, 255, 0.4), inset 0 0 10px rgba(135, 206, 235, 0.2); }
    50% { box-shadow: 0 0 30px rgba(135, 206, 235, 0.7), inset 0 0 15px rgba(176, 224, 230, 0.4); }
}

@keyframes cardGalaxySwirl {
    0%, 100% { box-shadow: 0 0 30px rgba(138, 43, 226, 0.5), inset 0 0 10px rgba(148, 0, 211, 0.2); }
    50% { box-shadow: 0 0 45px rgba(75, 0, 130, 0.8), inset 0 0 20px rgba(221, 160, 221, 0.4); }
}

@keyframes cardShadowPulse {
    0%, 100% { box-shadow: 0 0 25px rgba(15, 52, 96, 0.8), inset 0 0 15px rgba(0, 0, 0, 0.5); }
    50% { box-shadow: 0 0 35px rgba(22, 33, 62, 0.9), inset 0 0 20px rgba(0, 0, 0, 0.7); }
}

/* New Card Frame Animations */
@keyframes cardElectricSpark {
    0%, 100% { box-shadow: 0 0 25px rgba(255, 215, 0, 0.6), inset 0 0 10px rgba(255, 235, 59, 0.2); }
    50% { box-shadow: 0 0 35px rgba(255, 255, 0, 0.9), inset 0 0 15px rgba(255, 235, 59, 0.4); }
}

@keyframes cardCosmicDrift {
    0%, 100% { box-shadow: 0 0 30px rgba(138, 43, 226, 0.5), inset 0 0 15px rgba(74, 20, 140, 0.2); }
    50% { box-shadow: 0 0 40px rgba(138, 43, 226, 0.7), inset 0 0 20px rgba(74, 20, 140, 0.4); }
}

@keyframes cardMagmaFlow {
    0%, 100% { box-shadow: 0 0 25px rgba(255, 87, 34, 0.6), inset 0 0 10px rgba(255, 87, 34, 0.2); }
    50% { box-shadow: 0 0 35px rgba(255, 87, 34, 0.8), inset 0 0 15px rgba(255, 87, 34, 0.4); }
}

@keyframes cardFrostBite {
    0%, 100% { box-shadow: 0 0 20px rgba(179, 229, 252, 0.5), inset 0 0 10px rgba(179, 229, 252, 0.2); }
    50% { box-shadow: 0 0 30px rgba(225, 245, 254, 0.8), inset 0 0 15px rgba(179, 229, 252, 0.4); }
}

@keyframes cardToxicPulse {
    0%, 100% { box-shadow: 0 0 25px rgba(118, 255, 3, 0.5), inset 0 0 10px rgba(118, 255, 3, 0.2); }
    50% { box-shadow: 0 0 35px rgba(118, 255, 3, 0.7), inset 0 0 15px rgba(118, 255, 3, 0.4); }
}

@keyframes cardRoyalShine {
    0%, 100% { box-shadow: 0 0 30px rgba(255, 215, 0, 0.6), inset 0 0 15px rgba(255, 143, 0, 0.2); }
    50% { box-shadow: 0 0 40px rgba(255, 143, 0, 0.8), inset 0 0 20px rgba(255, 143, 0, 0.4); }
}

@keyframes cardStealthFade {
    0%, 100% { box-shadow: 0 0 20px rgba(0, 0, 0, 0.8), inset 0 0 10px rgba(66, 66, 66, 0.3); }
    50% { box-shadow: 0 0 30px rgba(0, 0, 0, 0.9), inset 0 0 15px rgba(66, 66, 66, 0.5); }
}

@keyframes cardBubbleFloat {
    0%, 100% { box-shadow: 0 0 20px rgba(225, 190, 231, 0.5), inset 0 0 10px rgba(206, 147, 216, 0.2); }
    50% { box-shadow: 0 0 30px rgba(225, 190, 231, 0.7), inset 0 0 15px rgba(206, 147, 216, 0.4); }
}

@keyframes cardCyberGlitch {
    0%, 100% { box-shadow: 0 0 25px rgba(0, 229, 255, 0.5), inset 0 0 10px rgba(213, 0, 249, 0.2); }
    50% { box-shadow: 0 0 35px rgba(0, 229, 255, 0.7), inset 0 0 15px rgba(213, 0, 249, 0.4); }
}

@keyframes cardNatureGrow {
    0%, 100% { box-shadow: 0 0 20px rgba(76, 175, 80, 0.5), inset 0 0 10px rgba(139, 195, 74, 0.2); }
    50% { box-shadow: 0 0 30px rgba(76, 175, 80, 0.7), inset 0 0 15px rgba(139, 195, 74, 0.4); }
}

@keyframes cardOceanWave {
    0%, 100% { box-shadow: 0 0 25px rgba(2, 136, 209, 0.5), inset 0 0 10px rgba(41, 182, 246, 0.2); }
    50% { box-shadow: 0 0 35px rgba(41, 182, 246, 0.7), inset 0 0 15px rgba(41, 182, 246, 0.4); }
}

@keyframes cardSunsetGlow {
    0%, 100% { box-shadow: 0 0 25px rgba(255, 143, 0, 0.5), inset 0 0 10px rgba(255, 193, 7, 0.2); }
    50% { box-shadow: 0 0 35px rgba(255, 193, 7, 0.7), inset 0 0 15px rgba(255, 193, 7, 0.4); }
}

@keyframes cardMidnightShimmer {
    0%, 100% { box-shadow: 0 0 25px rgba(21, 101, 192, 0.5), inset 0 0 10px rgba(25, 118, 210, 0.2); }
    50% { box-shadow: 0 0 35px rgba(25, 118, 210, 0.7), inset 0 0 15px rgba(25, 118, 210, 0.4); }
}

@keyframes cardCherryBloom {
    0%, 100% { box-shadow: 0 0 20px rgba(233, 30, 99, 0.5), inset 0 0 10px rgba(244, 143, 177, 0.2); }
    50% { box-shadow: 0 0 30px rgba(244, 143, 177, 0.7), inset 0 0 15px rgba(244, 143, 177, 0.4); }
}

@keyframes cardStormFlash {
    0%, 100% { box-shadow: 0 0 25px rgba(84, 110, 122, 0.6), inset 0 0 10px rgba(120, 144, 156, 0.2); }
    50% { box-shadow: 0 0 35px rgba(255, 255, 255, 0.3), inset 0 0 15px rgba(120, 144, 156, 0.4); }
}

@keyframes cardMatrixRain {
    0%, 100% { box-shadow: 0 0 20px rgba(0, 230, 118, 0.5), inset 0 0 10px rgba(0, 200, 83, 0.2); }
    50% { box-shadow: 0 0 30px rgba(0, 230, 118, 0.7), inset 0 0 15px rgba(0, 200, 83, 0.4); }
}

@keyframes cardLavaDrip {
    0%, 100% { box-shadow: 0 0 25px rgba(255, 61, 0, 0.5), inset 0 0 10px rgba(255, 109, 0, 0.2); }
    50% { box-shadow: 0 0 35px rgba(255, 109, 0, 0.7), inset 0 0 15px rgba(255, 109, 0, 0.4); }
}

@keyframes cardPrismShift {
    0% { box-shadow: 0 0 30px rgba(255, 64, 129, 0.4); filter: hue-rotate(0deg); }
    100% { box-shadow: 0 0 40px rgba(255, 64, 129, 0.6); filter: hue-rotate(360deg); }
}

@keyframes cardGhostFade {
    0%, 100% { box-shadow: 0 0 20px rgba(255, 255, 255, 0.3), inset 0 0 15px rgba(255, 255, 255, 0.1); }
    50% { box-shadow: 0 0 30px rgba(255, 255, 255, 0.5), inset 0 0 20px rgba(255, 255, 255, 0.2); }
}

@keyframes cardHoloShift {
    0%, 100% { box-shadow: 0 0 30px rgba(255, 0, 204, 0.4), inset 0 0 15px rgba(0, 255, 255, 0.2); }
    50% { box-shadow: 0 0 40px rgba(0, 255, 255, 0.5), inset 0 0 20px rgba(255, 0, 204, 0.3); }
}

@keyframes cardVintageAge {
    0%, 100% { box-shadow: 0 0 20px rgba(141, 110, 99, 0.5), inset 0 0 10px rgba(161, 136, 127, 0.2); }
    50% { box-shadow: 0 0 30px rgba(161, 136, 127, 0.7), inset 0 0 15px rgba(161, 136, 127, 0.4); }
}

@keyframes cardNeonPinkPulse {
    0%, 100% { box-shadow: 0 0 25px rgba(255, 0, 255, 0.5), inset 0 0 10px rgba(255, 20, 147, 0.2); }
    50% { box-shadow: 0 0 35px rgba(255, 20, 147, 0.8), inset 0 0 15px rgba(255, 20, 147, 0.4); }
}

@keyframes cardNeonGreenPulse {
    0%, 100% { box-shadow: 0 0 25px rgba(57, 255, 20, 0.5), inset 0 0 10px rgba(0, 255, 0, 0.2); }
    50% { box-shadow: 0 0 35px rgba(0, 255, 0, 0.8), inset 0 0 15px rgba(0, 255, 0, 0.4); }
}

@keyframes cardCrimsonGlow {
    0%, 100% { box-shadow: 0 0 25px rgba(198, 40, 40, 0.5), inset 0 0 10px rgba(211, 47, 47, 0.2); }
    50% { box-shadow: 0 0 35px rgba(211, 47, 47, 0.7), inset 0 0 15px rgba(211, 47, 47, 0.4); }
}

@keyframes cardAmethystSparkle {
    0%, 100% { box-shadow: 0 0 25px rgba(171, 71, 188, 0.5), inset 0 0 10px rgba(186, 104, 200, 0.2); }
    50% { box-shadow: 0 0 35px rgba(186, 104, 200, 0.7), inset 0 0 15px rgba(186, 104, 200, 0.4); }
}

@keyframes cardEmeraldShine {
    0%, 100% { box-shadow: 0 0 25px rgba(46, 125, 50, 0.5), inset 0 0 10px rgba(56, 142, 60, 0.2); }
    50% { box-shadow: 0 0 35px rgba(56, 142, 60, 0.7), inset 0 0 15px rgba(56, 142, 60, 0.4); }
}

@keyframes cardSapphireGlint {
    0%, 100% { box-shadow: 0 0 25px rgba(21, 101, 192, 0.5), inset 0 0 10px rgba(25, 118, 210, 0.2); }
    50% { box-shadow: 0 0 35px rgba(25, 118, 210, 0.7), inset 0 0 15px rgba(25, 118, 210, 0.4); }
}

@keyframes cardRubyPulse {
    0%, 100% { box-shadow: 0 0 25px rgba(211, 47, 47, 0.5), inset 0 0 10px rgba(244, 67, 54, 0.2); }
    50% { box-shadow: 0 0 35px rgba(244, 67, 54, 0.7), inset 0 0 15px rgba(244, 67, 54, 0.4); }
}

@keyframes cardDiamondSparkle {
    0%, 100% { box-shadow: 0 0 30px rgba(187, 222, 251, 0.7), inset 0 0 20px rgba(255, 255, 255, 0.3); }
    50% { box-shadow: 0 0 40px rgba(255, 255, 255, 0.9), inset 0 0 25px rgba(255, 255, 255, 0.5); }
}

@keyframes cardObsidianSheen {
    0%, 100% { box-shadow: 0 0 25px rgba(0, 0, 0, 0.8), inset 0 0 15px rgba(33, 33, 33, 0.3); }
    50% { box-shadow: 0 0 35px rgba(33, 33, 33, 0.9), inset 0 0 20px rgba(255, 255, 255, 0.1); }
}

@keyframes cardQuartzGlow {
    0%, 100% { box-shadow: 0 0 20px rgba(255, 255, 255, 0.5), inset 0 0 10px rgba(238, 238, 238, 0.3); }
    50% { box-shadow: 0 0 30px rgba(255, 255, 255, 0.7), inset 0 0 15px rgba(255, 255, 255, 0.5); }
}

@keyframes cardPearlLuster {
    0%, 100% { box-shadow: 0 0 20px rgba(255, 224, 178, 0.5), inset 0 0 10px rgba(255, 204, 128, 0.3); }
    50% { box-shadow: 0 0 30px rgba(255, 224, 178, 0.7), inset 0 0 15px rgba(255, 224, 178, 0.5); }
}

@keyframes cardJadeGlow {
    0%, 100% { box-shadow: 0 0 25px rgba(29, 233, 182, 0.5), inset 0 0 10px rgba(100, 255, 218, 0.2); }
    50% { box-shadow: 0 0 35px rgba(100, 255, 218, 0.7), inset 0 0 15px rgba(100, 255, 218, 0.4); }
}

@keyframes cardTopazFlare {
    0%, 100% { box-shadow: 0 0 25px rgba(255, 143, 0, 0.5), inset 0 0 10px rgba(255, 160, 0, 0.2); }
    50% { box-shadow: 0 0 35px rgba(255, 160, 0, 0.7), inset 0 0 15px rgba(255, 160, 0, 0.4); }
}

/* Aurachat */
.aurachat-action-icon {
    width: 3rem;
    height: 3rem;
    margin: 0 auto 0.6rem;
    border-radius: 14px;
    background: transparent;
    color: #fff;
    display: grid;
    place-items: center;
    font-size: 2.2rem;
    font-weight: 900;
    letter-spacing: 0;
}

.aurachat-badge {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 16px;
    height: 16px;
    background: #ff3b30;
    border-radius: 50%;
    border: 2px solid #1a1a2e;
}

#aurachatScreen {
    position: fixed;
    top: 0;
    left: 0;
    background: #fffc00;
    height: 100dvh;
    z-index: 20;
}

.aurachat-shell {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
    background: #111;
    color: #fff;
    font-family: Inter, system-ui, sans-serif;
}

.aurachat-view {
    position: absolute;
    inset: 0;
    display: none;
}

.aurachat-view.active {
    display: flex;
}

.aurachat-camera-view {
    align-items: stretch;
    justify-content: center;
    background: #000;
}

.aurachat-camera-wrap {
    position: absolute;
    top: 50px;
    bottom: 110px;
    left: 0;
    right: 0;
    overflow: hidden;
    border-radius: 28px;
    z-index: 2;
}

.aurachat-camera {
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    transition: opacity 220ms ease;
}

.aurachat-camera.active {
    opacity: 1;
}

.aurachat-camera.mirror {
    transform: scaleX(-1);
}

.aurachat-camera {
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    transition: opacity 220ms ease;
    border-radius: 0;
}

.aurachat-camera.active {
    opacity: 1;
}

.aurachat-camera.mirror {
    transform: scaleX(-1);
}

.aurachat-camera-frame {
    position: absolute;
    top: 80px;
    bottom: 160px;
    left: 0;
    right: 0;
    overflow: hidden;
    z-index: 2;
    pointer-events: none;
}

.aurachat-camera-fallback {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    background:
        radial-gradient(circle at 50% 30%, rgba(255, 252, 0, 0.34), transparent 34%),
        linear-gradient(145deg, #202020, #050505);
    opacity: 0;
    transition: opacity 180ms ease;
}

.aurachat-camera-fallback.visible {
    opacity: 1;
}

.aurachat-fallback-avatar {
    width: min(34vw, 150px);
    aspect-ratio: 1;
    border-radius: 36px;
    background: #fffc00;
    color: #111;
    display: grid;
    place-items: center;
    font-size: clamp(3rem, 11vw, 5.4rem);
    font-weight: 900;
    box-shadow: 0 28px 70px rgba(255, 252, 0, 0.3);
}

.aurachat-camera-fallback span {
    color: #fff;
    font-weight: 800;
    font-size: clamp(1.5rem, 4vw, 2.2rem);
}

.aurachat-topbar,
.aurachat-capture-bar,
.aurachat-bottom-tabs,
.aurachat-side-tools {
    position: absolute;
    z-index: 4;
}

.aurachat-view:not(.active) .aurachat-capture-bar,
.aurachat-view:not(.active) .aurachat-side-tools,
.aurachat-view:not(.active) .aurachat-topbar {
    display: none !important;
}

.aurachat-topbar {
    top: calc(0.85rem + env(safe-area-inset-top));
    left: 0.85rem;
    right: 0.85rem;
    display: flex;
    align-items: center;
}

.aurachat-icon-btn,
.aurachat-tool-btn {
    border: 0;
    background: rgba(0, 0, 0, 0.46);
    color: #fff;
    min-width: 44px;
    height: 44px;
    border-radius: 999px;
    display: inline-grid;
    place-items: center;
    padding: 0 0.7rem;
    font-size: 0.72rem;
    font-weight: 800;
    cursor: pointer;
    backdrop-filter: blur(18px);
    transition: transform 180ms ease, background 180ms ease;
}

.aurachat-icon-btn:hover,
.aurachat-tool-btn:hover {
    transform: translateY(-1px);
    background: rgba(0, 0, 0, 0.62);
}

.aurachat-profile-btn {
    background: #fffc00;
    color: #111;
    font-size: 1.6rem;
}

.aurachat-search-pill {
    height: 44px;
    border-radius: 999px;
    background: rgba(0, 0, 0, 0.42);
    color: rgba(255, 255, 255, 0.86);
    display: flex;
    align-items: center;
    padding: 0 1rem;
    font-size: 0.95rem;
    font-weight: 700;
    backdrop-filter: blur(18px);
}

.aurachat-side-tools {
    top: calc(3.5rem + env(safe-area-inset-top));
    right: 0.8rem;
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
}

.aurachat-tool-btn {
    min-width: 52px;
    height: 42px;
    border-radius: 16px;
}


.aurachat-capture-bar {
    left: 0;
    right: 0;
    bottom: calc(8rem + env(safe-area-inset-bottom));
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0 1.3rem;
}

.aurachat-shutter {
    width: 72px;
    aspect-ratio: 1;
    border: 6px solid rgba(255, 255, 255, 0.9);
    border-radius: 50%;
    background: transparent;
    cursor: pointer;
    transition: transform 140ms ease;
    justify-self: center;
}

.aurachat-shutter:active {
    transform: scale(0.92);
}

.aurachat-gallery-btn {
    position: absolute;
    left: auto;
    right: calc(50% + 56px);
    background: none;
    border: none;
    color: rgba(255, 255, 255, 0.8);
    cursor: pointer;
    padding: 8px;
    border-radius: 50%;
    transition: transform 140ms ease, background 140ms ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.aurachat-gallery-btn svg {
    width: 28px;
    height: 28px;
}

.aurachat-gallery-btn:active {
    transform: scale(0.88);
    background: rgba(255, 255, 255, 0.1);
}

.aurachat-snap-preview {
    position: absolute;
    top: 50px;
    bottom: 110px;
    left: 0;
    right: 0;
    z-index: 12;
    display: grid;
    place-items: center;
    padding: 1rem;
    background: rgba(0, 0, 0, 0.72);
    backdrop-filter: blur(18px);
    border-radius: 28px;
    overflow: hidden;
}

.aurachat-snap-preview.hidden {
    display: none;
}

.aurachat-preview-card {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    border-radius: 28px;
    overflow: hidden;
}

.aurachat-preview-card::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 40%;
    background: linear-gradient(transparent, rgba(0,0,0,0.6));
    z-index: 1;
    pointer-events: none;
}

.aurachat-preview-card img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.aurachat-preview-close {
    position: absolute;
    top: 0.85rem;
    left: 0.85rem;
    z-index: 3;
    border: 0;
    background: none;
    color: #fff;
    cursor: pointer;
    padding: 0.3rem;
    line-height: 1;
    outline: none;
    -webkit-tap-highlight-color: transparent;
    box-shadow: none;
}

.aurachat-preview-text-btn {
    position: absolute;
    top: 0.85rem;
    right: 0.85rem;
    z-index: 3;
    border: 0;
    background: none;
    color: #fff;
    cursor: pointer;
    padding: 0.3rem;
    outline: none;
    -webkit-tap-highlight-color: transparent;
    box-shadow: none;
    opacity: 0.8;
}

.aurachat-preview-text-btn:hover {
    opacity: 1;
}

.aurachat-preview-text-btn.active {
    opacity: 1;
    color: #fffc00;
}

.aurachat-text-overlay {
    position: absolute;
    left: 0;
    right: 0;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0.5rem 1rem;
    min-height: 36px;
    max-height: 70%;
    cursor: grab;
    user-select: none;
    touch-action: none;
}

.aurachat-text-overlay::before {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(50, 50, 50, 0.75);
    border-radius: 0;
    backdrop-filter: blur(4px);
}

.aurachat-text-overlay.hidden {
    display: none;
}

.aurachat-text-overlay span {
    color: #fff;
    font-weight: 800;
    text-align: center;
    font-size: 1.1rem;
    word-break: break-word;
    max-width: 100%;
    line-height: 1.3;
    position: relative;
    z-index: 1;
    outline: none;
    min-width: 40px;
}

.aurachat-text-editable {
    background: transparent;
    border: 0;
    color: #fff;
    font-weight: 800;
    text-align: center;
    font-size: 1.1rem;
    font-family: inherit;
    width: 100%;
    max-height: 100%;
    outline: none;
    position: relative;
    z-index: 1;
    caret-color: #fff;
    padding: 0;
    white-space: pre-wrap;
    word-break: break-word;
    overflow-wrap: break-word;
    line-height: 1.3;
    overflow-y: auto;
    -webkit-user-modify: read-write;
    -webkit-tap-highlight-color: transparent;
}

.aurachat-text-editable:empty::before {
    content: attr(data-placeholder);
    color: rgba(255, 255, 255, 0.35);
    pointer-events: none;
}

.aurachat-text-toolbar {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 3;
    padding: 1rem;
    background: linear-gradient(transparent, rgba(0,0,0,0.6));
}

.aurachat-text-toolbar.hidden {
    display: none;
}

.aurachat-text-toolbar input {
    width: 100%;
    border: 0;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.95);
    color: #111;
    padding: 0.9rem 1.2rem;
    font: inherit;
    font-size: 1rem;
    outline: none;
    box-sizing: border-box;
}

.aurachat-preview-card input {
    position: relative;
    z-index: 2;
    border: 0;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.92);
    color: #111;
    padding: 0.9rem 1rem;
    font: inherit;
    outline: none;
    margin: auto 0 0 0;
}

.aurachat-preview-actions {
    display: grid;
    grid-template-columns: 1fr 1fr auto;
    gap: 0.5rem;
    position: relative;
    z-index: 2;
    padding-top: 0.75rem;
}

.aurachat-preview-actions button {
    border: 0;
    border-radius: 999px;
    background: #fffc00;
    color: #111;
    min-height: 44px;
    padding: 0 0.9rem;
    font-weight: 900;
    cursor: pointer;
}

.aurachat-preview-actions button:last-child {
    background: rgba(255, 255, 255, 0.18);
    color: #fff;
}

.aurachat-memory-btn,
.aurachat-chat-shortcut {
    justify-self: center;
    width: 52px;
    aspect-ratio: 1;
    border: 0;
    border-radius: 18px;
    background: rgba(0, 0, 0, 0.48);
    display: grid;
    place-items: center;
    cursor: pointer;
    backdrop-filter: blur(18px);
}

.aurachat-memory-btn span,
.aurachat-chat-shortcut span {
    width: 25px;
    height: 25px;
    border-radius: 9px;
    display: block;
}

.aurachat-memory-btn span {
    background: linear-gradient(135deg, #fffc00 0 48%, #fff 48% 52%, #28c76f 52%);
}

.aurachat-chat-shortcut span {
    background: #fff;
    border-radius: 50%;
    position: relative;
}

.aurachat-chat-shortcut span::after {
    content: "";
    position: absolute;
    right: 2px;
    bottom: -2px;
    width: 8px;
    height: 8px;
    background: #fff;
    transform: rotate(45deg);
}

.aurachat-bottom-tabs {
    left: 0;
    right: 0;
    bottom: 0;
    height: 100px;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0;
    padding: 0;
    background: #111;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    padding-bottom: env(safe-area-inset-bottom);
}

.aurachat-bottom-tabs.light {
    background: #1a1a1a;
}

.aurachat-preview-navbar {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 100px;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 0;
    padding: 0;
    background: #111;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    padding-bottom: env(safe-area-inset-bottom);
    z-index: 15;
}

.aurachat-preview-navbar.hidden {
    display: none;
}

.aurachat-preview-nav-btn {
    border: 0;
    border-radius: 0;
    background: transparent;
    color: rgba(255, 255, 255, 0.5);
    font-size: 0.65rem;
    font-weight: 700;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.25rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    position: relative;
}

.aurachat-preview-nav-btn svg {
    width: 26px;
    height: 26px;
}

.preview-nav-send {
    color: #fffc00;
}

.preview-nav-story {
    color: #28c76f;
}

.aurachat-tab {
    border: 0;
    border-radius: 0;
    background: transparent;
    color: rgba(255, 255, 255, 0.5);
    font-size: 0.65rem;
    font-weight: 700;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.25rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    position: relative;
}

.aurachat-tab svg {
    width: 26px;
    height: 26px;
}

.aurachat-tab.active svg {
    stroke: #fffc00;
}

.aurachat-tab.active {
    color: #fff;
}



.aurachat-panel-view {
    flex-direction: column;
    background: #fff;
    color: #111;
}

.aurachat-panel-header {
    min-height: 60px;
    padding: calc(0.5rem + env(safe-area-inset-top)) 0.75rem 0.5rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    background: #1a1a1a;
    color: #fff;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.aurachat-panel-header h2 {
    margin: 0;
    font-size: 1.3rem;
    font-weight: 800;
    flex: 1;
}

.aurachat-icon-btn.dark {
    background: transparent;
    color: #fff;
    min-width: 38px;
    height: 38px;
    padding: 0;
    font-size: 1.1rem;
}

.aurachat-icon-btn.dark:hover {
    background: rgba(255, 255, 255, 0.1);
}

.aurachat-chat-layout {
    flex: 1;
    min-height: 0;
    position: relative;
    overflow: hidden;
    background: #1a1a1a;
}

.aurachat-chat-layout.show-chat ~ .aurachat-bottom-tabs {
    display: none;
}

.aurachat-thread-list,
.aurachat-stories-grid {
    background: transparent;
    border: 0;
    box-shadow: none;
}

.aurachat-thread-list {
    position: absolute;
    inset: 0;
    overflow: auto;
    padding: 0.5rem 0;
    background: #1a1a1a;
}

.aurachat-chat-layout.show-chat .aurachat-thread-list {
    display: none;
}

.aurachat-chat-layout.show-chat .aurachat-thread-panel {
    display: flex;
}

.aurachat-thread {
    width: 100%;
    min-height: 72px;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: #fff;
    display: grid;
    grid-template-columns: 50px 1fr;
    align-items: center;
    gap: 0.7rem;
    padding: 0.4rem 1rem;
    text-align: left;
    cursor: pointer;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.aurachat-thread.active {
    background: rgba(255, 255, 255, 0.08);
}

.aurachat-thread:hover {
    background: rgba(255, 255, 255, 0.05);
}

.aurachat-bitmoji {
    width: 48px;
    aspect-ratio: 1;
    border-radius: 50%;
    color: #111;
    display: grid;
    place-items: center;
    font-weight: 900;
    font-size: 1.2rem;
    border: 2px solid rgba(255, 255, 255, 0.8);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    flex-shrink: 0;
}

.aurachat-bitmoji.blue { background: #74b9ff; }
.aurachat-bitmoji.pink { background: #ff8bc7; }
.aurachat-bitmoji.green { background: #7bed9f; }
.aurachat-bitmoji.orange { background: #ffb142; }
.aurachat-bitmoji.purple { background: #c56cf0; }
.aurachat-bitmoji.yellow { background: #fffc00; }

.aurachat-thread-copy {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
}

.aurachat-thread-copy strong,
.aurachat-thread-copy small {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.aurachat-thread-copy strong {
    font-size: 0.95rem;
    font-weight: 700;
    color: #fff;
}

.aurachat-thread-copy small {
    color: #999;
    font-size: 0.78rem;
    font-weight: 500;
}

.aurachat-streak {
    font-size: 0.7rem;
    font-weight: 800;
    color: #666;
    white-space: nowrap;
}

.aurachat-thread-panel {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background: #1a1a1a;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(100%);
    transition: transform 0.25s cubic-bezier(0.32, 0.72, 0, 1), visibility 0s 0.25s;
    z-index: 2;
}

.aurachat-chat-layout.show-chat .aurachat-thread-panel {
    visibility: visible;
    pointer-events: auto;
    transform: translateY(0);
    transition: transform 0.25s cubic-bezier(0.32, 0.72, 0, 1), visibility 0s 0s;
}

.aurachat-thread-header {
    padding: 0.5rem 0.75rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    min-height: 56px;
}

.aurachat-thread-header h3,
.aurachat-thread-header p {
    margin: 0;
}

.aurachat-thread-header h3 {
    font-size: 1.05rem;
    font-weight: 800;
    color: #fff;
}

.aurachat-thread-header p {
    color: #999;
    font-size: 0.75rem;
    font-weight: 500;
}

.aurachat-messages {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    padding: 0.75rem 1rem;
    background: #1a1a1a;
}

.aurachat-messages-inner {
    display: flex;
    flex-direction: column;
    gap: 0.7rem;
}

.aurachat-messages::-webkit-scrollbar {
    width: 4px;
}

.aurachat-messages::-webkit-scrollbar-track {
    background: transparent;
}

.aurachat-messages::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.15);
    border-radius: 2px;
}

.aurachat-empty-chat {
    margin: auto;
    color: #666;
    font-weight: 800;
}

.aurachat-bubble {
    display: flex;
    flex-direction: column;
    gap: 2px;
    width: fit-content;
    max-width: min(78%, 440px);
    padding-left: 12px;
    border-left: 3px solid;
    margin-left: 0.5rem;
}

.aurachat-bubble.mine {
    border-left-color: #ff3b30;
    align-self: flex-start;
}

.aurachat-bubble.theirs {
    border-left-color: #4a9eff;
    align-self: flex-start;
}

.aurachat-bubble-name {
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    opacity: 0.7;
}

.aurachat-bubble.mine .aurachat-bubble-name {
    color: #ff3b30;
}

.aurachat-bubble.theirs .aurachat-bubble-name {
    color: #4a9eff;
}

.aurachat-bubble-text {
    font-size: 0.93rem;
    line-height: 1.3;
    overflow-wrap: anywhere;
    color: #fff;
}

.aurachat-snap-message {
    padding: 0.35rem;
    display: grid;
    gap: 0.35rem;
    overflow: hidden;
}

.aurachat-snap-message img {
    width: min(260px, 62vw);
    aspect-ratio: 9 / 13;
    object-fit: cover;
    border-radius: 16px;
}

.aurachat-snap-message span {
    padding: 0.25rem 0.45rem 0.4rem;
    font-weight: 800;
    color: #fff;
}

.aurachat-snap-badge {
    width: 10px;
    height: 10px;
    background: #ff3b30;
    border-radius: 3px;
    display: inline-block;
    vertical-align: middle;
    margin-left: 5px;
    animation: aurachatSnapPulse 1.4s ease-in-out infinite;
}

@keyframes aurachatSnapPulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.6; transform: scale(1.15); }
}

.aurachat-snap-viewer {
    position: absolute;
    inset: 0;
    background: #000;
    z-index: 20;
    overflow: hidden;
}

.aurachat-snap-viewer.hidden {
    display: none;
}

.aurachat-snap-viewer-bg {
    position: absolute;
    inset: 0;
    background: #000;
    transition: opacity 0.3s ease;
}

.aurachat-snap-viewer.swiping .aurachat-snap-viewer-bg {
    opacity: calc(1 - var(--swipe-progress, 0) * 1.2);
}

.aurachat-snap-viewer-content {
    position: absolute;
    top: 50px;
    bottom: 110px;
    left: 0;
    right: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border-radius: 28px;
    transition: transform 0.35s cubic-bezier(0.32, 0.72, 0, 1);
    will-change: transform;
}

.aurachat-snap-viewer.swiping .aurachat-snap-viewer-content {
    transition: none;
}

.aurachat-snap-viewer-content img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.aurachat-snap-viewer-top {
    position: absolute;
    top: 20px;
    left: 0;
    right: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.2rem 1rem 0.4rem;
    background: linear-gradient(180deg, rgba(0,0,0,0.5) 0%, transparent 100%);
}

.aurachat-snap-viewer-user {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.aurachat-story-avatar {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    font-weight: 800;
    color: #fff;
    flex-shrink: 0;
}

.aurachat-snap-viewer-top span {
    color: #fff;
    font-weight: 800;
    font-size: 1rem;
}

.aurachat-snap-viewer-caption {
    position: absolute;
    bottom: calc(2rem + env(safe-area-inset-bottom));
    left: 1.5rem;
    right: 1.5rem;
    text-align: center;
    color: #fff;
    font-size: 0.95rem;
    font-weight: 600;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.6);
    word-break: break-word;
    overflow-wrap: break-word;
    white-space: pre-wrap;
    max-height: 40vh;
    overflow-y: auto;
}

@keyframes aurachatSnapZoomIn {
    from { transform: scale(0.82); opacity: 0; border-radius: 40px; }
    to { transform: scale(1); opacity: 1; border-radius: 28px; }
}

@keyframes aurachatSnapBgIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

.aurachat-snap-viewer.animating-in .aurachat-snap-viewer-content {
    animation: aurachatSnapZoomIn 0.4s cubic-bezier(0.32, 0.72, 0, 1) forwards;
}

.aurachat-snap-viewer.animating-in .aurachat-snap-viewer-bg {
    animation: aurachatSnapBgIn 0.3s ease-out forwards;
}

.aurachat-story-progress {
    position: absolute;
    top: 10px;
    left: 0.6rem;
    right: 0.6rem;
    display: flex;
    gap: 4px;
    z-index: 15;
    pointer-events: none;
}

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

.aurachat-story-progress-segment.watched {
    background: rgba(255,255,255,0.9);
}

.aurachat-story-progress-fill {
    height: 100%;
    background: #fff;
    width: 0%;
}

@keyframes aurachatProgressFill {
    from { width: 0%; }
    to { width: 100%; }
}

.aurachat-compose {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 0.75rem calc(1rem + env(safe-area-inset-bottom));
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    background: #1a1a1a;
}

.aurachat-compose input {
    flex: 1;
    min-width: 0;
    border: 0;
    border-radius: 20px;
    background: #2a2a2a;
    color: #fff;
    padding: 0.65rem 0.9rem;
    font: inherit;
    font-size: 0.9rem;
    outline: none;
}

.aurachat-compose input::placeholder {
    color: #666;
}

.aurachat-compose button {
    border: 0;
    border-radius: 50%;
    background: #fffc00;
    color: #111;
    width: 36px;
    height: 36px;
    display: grid;
    place-items: center;
    font-weight: 900;
    font-size: 1.1rem;
    cursor: pointer;
    flex-shrink: 0;
}

.aurachat-stories-view {
    background: #1a1a1a;
}

.aurachat-stories-grid {
    margin: 1rem;
    margin-bottom: calc(4.8rem + env(safe-area-inset-bottom));
    padding: 1rem;
    border-radius: 28px;
    flex: 1;
    min-height: 0;
    overflow: auto;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 0.9rem;
}

.aurachat-story-card {
    min-height: 190px;
    border: 0;
    border-radius: 24px;
    color: #fff;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: flex-start;
    gap: 0.2rem;
    padding: 1rem;
    text-align: left;
    cursor: pointer;
    overflow: hidden;
    position: relative;
    background: linear-gradient(145deg, #222, #555);
}

.aurachat-story-card::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, transparent 10%, rgba(0, 0, 0, 0.62) 100%);
}

.aurachat-story-card > * {
    position: relative;
    z-index: 1;
}

.aurachat-story-card.story-1 { background: linear-gradient(145deg, #00a8ff, #9c88ff); }
.aurachat-story-card.story-2 { background: linear-gradient(145deg, #ff9f43, #ee5253); }
.aurachat-story-card.story-3 { background: linear-gradient(145deg, #10ac84, #48dbfb); }
.aurachat-story-card.story-4 { background: linear-gradient(145deg, #5f27cd, #ff6bcb); }
.aurachat-story-card.story-5 { background: linear-gradient(145deg, #222f3e, #8395a7); }
.aurachat-story-card.story-6 { background: linear-gradient(145deg, #fffc00, #ff9f43); color: #111; }

.aurachat-story-card.has-image {
    background-size: cover;
    background-position: center;
}

.aurachat-empty-stories {
    grid-column: 1 / -1;
    min-height: 220px;
    display: grid;
    place-items: center;
    color: #999;
    font-weight: 900;
}

.aurachat-story-ring {
    width: 66px;
    aspect-ratio: 1;
    border-radius: 24px;
    display: grid;
    place-items: center;
    background: conic-gradient(#fffc00, #fff, #fffc00);
    padding: 3px;
    margin-bottom: auto;
}

.aurachat-story-card strong {
    font-size: 1rem;
    font-weight: 900;
}

.aurachat-story-card small {
    font-size: 0.78rem;
    font-weight: 800;
    opacity: 0.86;
}

@media (max-width: 760px) {
    .aurachat-thread-list {
        max-height: none;
    }

    .aurachat-side-tools {
        right: 0.55rem;
    }

    .aurachat-shutter {
        width: 76px;
    }


}

@media (max-width: 480px) {
    .aurachat-topbar {
        grid-template-columns: 42px 1fr 52px;
        gap: 0.45rem;
    }

    .aurachat-search-pill {
        font-size: 0.86rem;
        padding: 0 0.8rem;
    }

    .aurachat-icon-btn,
    .aurachat-tool-btn {
        font-size: 0.66rem;
    }

    .aurachat-profile-btn {
        font-size: 1.6rem;
    }

    .aurachat-side-tools {
        top: calc(3.5rem + env(safe-area-inset-top));
    }

    .aurachat-tool-btn {
        min-width: 46px;
        height: 38px;
    }

    .aurachat-capture-bar {
        padding: 0 0.85rem;
    }

    .aurachat-memory-btn,
    .aurachat-chat-shortcut {
        width: 48px;
        border-radius: 16px;
    }

    .aurachat-stories-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        margin: 0.75rem;
        margin-bottom: calc(4.6rem + env(safe-area-inset-bottom));
        padding: 0.75rem;
    }

    .aurachat-story-card {
        min-height: 165px;
    }
}

/* Contact picker modal */
.aurachat-contact-picker {
    position: fixed;
    inset: 0;
    z-index: 100;
    display: flex;
    align-items: flex-end;
    justify-content: center;
}

.aurachat-contact-picker.hidden {
    display: none;
}

.aurachat-contact-picker-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.5);
}

.aurachat-contact-picker-card {
    position: relative;
    width: 100%;
    max-width: 400px;
    background: #1a1a2e;
    border-radius: 20px 20px 0 0;
    padding-bottom: env(safe-area-inset-bottom, 16px);
    max-height: 60vh;
    display: flex;
    flex-direction: column;
}

.aurachat-contact-picker-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 1.25rem;
    border-bottom: 1px solid rgba(255,255,255,0.1);
}

.aurachat-contact-picker-header h3 {
    margin: 0;
    font-size: 1.1rem;
    font-weight: 700;
    color: #fff;
}

.aurachat-contact-picker-close {
    background: none;
    border: none;
    color: #fff;
    padding: 4px;
    cursor: pointer;
    opacity: 0.7;
}

.aurachat-contact-picker-close:hover {
    opacity: 1;
}

.aurachat-contact-picker-list {
    overflow-y: auto;
    padding: 0.5rem 0;
}

.aurachat-contact-picker-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 1.25rem;
    cursor: pointer;
    transition: background 0.15s;
    border: none;
    background: none;
    width: 100%;
    text-align: left;
    color: #fff;
    font-size: 1rem;
    font-family: inherit;
}

.aurachat-contact-picker-item:hover {
    background: rgba(255,255,255,0.08);
}

.aurachat-contact-picker-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    font-size: 1rem;
    flex-shrink: 0;
}

.aurachat-picker-check {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    border: 2px solid rgba(255,255,255,0.3);
    margin-left: auto;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.15s;
}

.aurachat-contact-picker-item.selected .aurachat-picker-check {
    background: #4a9eff;
    border-color: #4a9eff;
}

.aurachat-contact-picker-item.selected .aurachat-picker-check::after {
    content: '';
    width: 6px;
    height: 10px;
    border: solid #fff;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
    margin-top: -2px;
}

.aurachat-contact-picker-item.selected {
    background: rgba(74, 158, 255, 0.1);
}

.aurachat-contact-picker-footer {
    padding: 0.75rem 1.25rem;
    border-top: 1px solid rgba(255,255,255,0.1);
}

.aurachat-picker-send-btn {
    width: 100%;
    padding: 0.75rem;
    border: none;
    border-radius: 12px;
    background: #4a9eff;
    color: #fff;
    font-size: 1rem;
    font-weight: 700;
    cursor: pointer;
    transition: opacity 0.15s;
    font-family: inherit;
}

.aurachat-picker-send-btn:disabled {
    opacity: 0.35;
    cursor: default;
}

.aurachat-picker-send-btn:not(:disabled):hover {
    opacity: 0.85;
}

.aurachat-profile-modal {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
}

.aurachat-profile-modal-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(8px);
    animation: aurachat-modal-bg-in 0.25s ease-out;
}

@keyframes aurachat-modal-bg-in {
    from { opacity: 0; backdrop-filter: blur(0px); }
    to { opacity: 1; backdrop-filter: blur(8px); }
}

.aurachat-profile-modal-card {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    animation: aurachat-modal-card-in 0.3s ease-out;
}

@keyframes aurachat-modal-card-in {
    from { opacity: 0; transform: scale(0.85) translateY(20px); }
    to { opacity: 1; transform: scale(1) translateY(0); }
}

.aurachat-profile-modal-avatar {
    width: 160px;
    height: 160px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 4rem;
    font-weight: 700;
    color: #fff;
    box-shadow: 0 4px 20px rgba(0,0,0,0.3);
    margin-top: -260px;
}

.aurachat-profile-modal-name {
    font-size: 1.5rem;
    font-weight: 700;
    color: #fff;
    margin-top: 4px;
}

.aurachat-profile-modal-badge {
    font-size: 0.75rem;
    font-weight: 700;
    color: #ffd700;
    background: rgba(255, 215, 0, 0.12);
    padding: 0.2rem 0.7rem;
    border-radius: 20px;
    border: 1px solid rgba(255, 215, 0, 0.25);
    text-align: center;
    max-width: 200px;
    line-height: 1.3;
    margin-top: -4px;
    letter-spacing: 0.02em;
}

.aurachat-profile-modal-pills {
    display: flex;
    gap: 10px;
    align-self: flex-start;
    padding-left: 0;
}

.aurachat-profile-modal-snapscore {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    background: rgba(255,255,255,0.12);
    padding: 10px 28px;
    border-radius: 30px;
}

.aurachat-profile-modal-pill {
    background: rgba(255,255,255,0.12);
    padding: 10px 28px;
    border-radius: 30px;
    min-width: 60px;
}

.aurachat-profile-modal-score {
    font-size: 1.6rem;
    font-weight: 800;
    color: #fff;
}

.aurachat-profile-modal-score-label {
    font-size: 0.65rem;
    color: rgba(255,255,255,0.5);
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.aurachat-profile-modal-desc {
    font-size: 0.85rem;
    font-weight: 600;
    color: rgba(255,255,255,0.5);
    text-align: center;
    margin-top: 8px;
    max-width: 220px;
    line-height: 1.4;
}

.aurachat-profile-modal-album-bg {
    position: absolute;
    top: -80px;
    left: -80px;
    right: -80px;
    bottom: -80px;
    background-size: cover;
    background-position: center;
    filter: blur(30px) saturate(1.6);
    opacity: 0;
    transition: opacity 0.6s ease;
    pointer-events: none;
    z-index: 0;
}

.aurachat-profile-modal-album-bg.show {
    opacity: 1;
    animation: aurachatAlbumBgPulse 7s ease-in-out infinite;
}

.aurachat-profile-modal-album-bg.show + .aurachat-profile-modal-bg {
    background: rgba(0, 0, 0, 0.25);
}

@keyframes aurachatAlbumBgPulse {
    0%, 100% {
        transform: scale(1);
        filter: blur(30px) saturate(1.6);
    }
    50% {
        transform: scale(1.1);
        filter: blur(20px) saturate(1.9);
    }
}

.aurachat-profile-modal-x {
    position: absolute;
    top: 3.2rem;
    right: 1rem;
    background: none;
    border: none;
    color: rgba(255,255,255,0.8);
    font-size: 1.5rem;
    cursor: pointer;
    padding: 8px;
    border-radius: 50%;
    transition: background 0.15s;
    z-index: 10;
}

.aurachat-profile-modal-x:hover {
    background: rgba(255,255,255,0.1);
}

.aurachat-profile-modal-edit {
    position: absolute;
    top: 3.2rem;
    left: 1rem;
    background: none;
    border: none;
    color: rgba(255,255,255,0.6);
    cursor: pointer;
    padding: 8px;
    border-radius: 50%;
    transition: background 0.15s, color 0.15s;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
}

.aurachat-profile-modal-edit svg {
    width: 22px;
    height: 22px;
}

.aurachat-profile-modal-edit:hover {
    background: rgba(255,255,255,0.1);
    color: rgba(255,255,255,0.9);
}

.aurachat-profile-modal-edit.active {
    color: #ffdd00;
    background: rgba(255,221,0,0.15);
}

.aurachat-profile-modal-avatar.editable {
    cursor: pointer;
    box-shadow: 0 0 0 3px #ffdd00, 0 0 20px rgba(255,221,0,0.4);
    animation: aurachat-avatar-pulse 1.5s ease-in-out infinite;
}

@keyframes aurachat-avatar-pulse {
    0%, 100% { box-shadow: 0 0 0 3px #ffdd00, 0 0 20px rgba(255,221,0,0.4); }
    50% { box-shadow: 0 0 0 5px #ffdd00, 0 0 30px rgba(255,221,0,0.6); }
}

.aurachat-profile-modal-desc.editable {
    background: rgba(255,221,0,0.08);
    border-radius: 8px;
    padding: 8px 12px;
    outline: none;
    cursor: text;
    box-shadow: 0 0 0 2px #ffdd00, 0 0 16px rgba(255,221,0,0.35);
    animation: aurachat-avatar-pulse 1.5s ease-in-out infinite;
}

.aurachat-song-picker {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 10000;
    display: flex;
    align-items: flex-end;
    justify-content: center;
}

.aurachat-song-picker-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.5);
}

.aurachat-song-picker-sheet {
    position: relative;
    width: 100%;
    max-height: 70%;
    background: #1a1a2e;
    border-radius: 20px 20px 0 0;
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    animation: aurachat-sheet-up 0.25s ease-out;
}

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

.aurachat-song-picker-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.aurachat-song-picker-header h3 {
    color: #fff;
    margin: 0;
    font-size: 1.1rem;
}

.aurachat-song-picker-close {
    background: none;
    border: none;
    color: rgba(255,255,255,0.6);
    font-size: 1.3rem;
    cursor: pointer;
    padding: 4px 8px;
    border-radius: 50%;
}

.aurachat-song-input {
    width: 100%;
    padding: 10px 14px;
    border-radius: 10px;
    border: 1px solid rgba(255,255,255,0.15);
    background: rgba(255,255,255,0.08);
    color: #fff;
    font-size: 0.9rem;
    outline: none;
    box-sizing: border-box;
    font-family: inherit;
}

.aurachat-song-input::placeholder {
    color: rgba(255,255,255,0.35);
}

.aurachat-song-connect-btn {
    width: 100%;
    padding: 10px;
    border: none;
    border-radius: 10px;
    background: #4a9eff;
    color: #fff;
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    font-family: inherit;
}

.aurachat-song-picker-results {
    display: flex;
    flex-direction: column;
    gap: 6px;
    overflow-y: auto;
    flex: 1;
}

.aurachat-song-result {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 10px;
    border-radius: 10px;
    background: none;
    border: none;
    color: #fff;
    cursor: pointer;
    text-align: left;
    width: 100%;
    font-family: inherit;
    transition: background 0.15s;
}

.aurachat-song-result:hover {
    background: rgba(255,255,255,0.08);
}

.aurachat-song-result img {
    width: 44px;
    height: 44px;
    border-radius: 6px;
    object-fit: cover;
    flex-shrink: 0;
}

.aurachat-song-result-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.aurachat-song-result-title {
    font-size: 0.9rem;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.aurachat-song-result-artist {
    font-size: 0.75rem;
    color: rgba(255,255,255,0.5);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.aurachat-profile-modal-pill.song-selected {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 16px 6px 6px;
    cursor: pointer;
}

.aurachat-profile-modal-pill.editable {
    box-shadow: 0 0 0 2px #ffdd00, 0 0 16px rgba(255,221,0,0.35);
    border-radius: 20px;
    animation: aurachat-avatar-pulse 1.5s ease-in-out infinite;
}

.aurachat-profile-modal-pill.song-selected img {
    width: 28px;
    height: 28px;
    border-radius: 6px;
    object-fit: cover;
    flex-shrink: 0;
}

.aurachat-profile-modal-pill.song-selected .pill-song-info {
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
}

.aurachat-profile-modal-pill.song-selected .pill-song-title {
    font-size: 0.75rem;
    font-weight: 600;
    color: #fff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.aurachat-profile-modal-pill.song-selected .pill-song-artist {
    font-size: 0.6rem;
    color: rgba(255,255,255,0.5);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.aurachat-mini-player {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 20000;
    background: #1a1a2e;
    border-top: 1px solid rgba(255,255,255,0.1);
    padding: 16px 16px 20px;
    display: flex;
    gap: 16px;
    box-shadow: 0 -4px 20px rgba(0,0,0,0.4);
    align-items: center;
}

.aurachat-mini-player-close {
    position: absolute;
    top: 8px;
    right: 8px;
    background: none;
    border: none;
    color: rgba(255,255,255,0.4);
    cursor: pointer;
    font-size: 1.1rem;
    padding: 4px 8px;
    z-index: 1;
}

.aurachat-mini-player-close:hover {
    color: #fff;
}

.aurachat-mini-player-art {
    width: 72px;
    height: 72px;
    border-radius: 12px;
    background: rgba(255,255,255,0.08);
    flex-shrink: 0;
    background-size: cover;
    background-position: center;
}

.aurachat-mini-player-body {
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 12px;
}

.aurachat-mini-player-info {
    flex: 1;
    min-width: 0;
}

.aurachat-mini-player-title {
    color: #fff;
    font-size: 1rem;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-bottom: 2px;
}

.aurachat-mini-player-artist {
    color: rgba(255,255,255,0.5);
    font-size: 0.8rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.aurachat-mini-player-controls {
    flex-shrink: 0;
    display: flex;
    align-items: center;
}

.aurachat-mini-player-play {
    background: none;
    border: none;
    color: #fff;
    cursor: pointer;
    padding: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: background 0.2s;
}

.aurachat-mini-player-play:hover {
    background: rgba(255,255,255,0.1);
}