/**
 * Anime Portal Styles
 * Converted from TSX to CSS
 */

:root {
    --anime-bg: #0b0f1a;
    --anime-surface: #121420;
    --anime-primary: #7C3AED;
    --anime-secondary: #FBBF24;
    --anime-accent: #FB7185;
    --text-primary: #FFFFFF;
    --text-secondary: #E5E7EB;
    --text-muted: #9CA3AF;
    --border-color: rgba(255, 255, 255, 0.1);
}

.text-anime-primary {
    --tw-text-opacity: 1;
    color: rgb(124 58 237 / var(--tw-text-opacity, 1));
}

* {
    box-sizing: border-box;
}

/* Remove border from form inputs */
input[type=date],
input[type=email],
input[type=number],
input[type=password],
input[type=search],
input[type=tel],
input[type=text],
input[type=url],
select,
textarea {
    border: none !important;
}

.anime-portal-body {
    background-color: #0b0f1a !important;
    background-image: 
        radial-gradient(ellipse at top right, rgba(124, 58, 237, 0.1), transparent 50%),
        radial-gradient(ellipse at bottom left, rgba(251, 113, 133, 0.1), transparent 50%),
        linear-gradient(to bottom, #0b0f1a, #0b0f1a);
    background-attachment: fixed;
    background-size: 100% 100%, 100% 100%, 100% 100%;
    color: var(--text-secondary);
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    direction: rtl;
    margin: 0;
    padding: 0;
    min-height: 100vh;
}

/* Hide WordPress default title and description - AGGRESSIVE */
body.anime-portal-body .site-title,
body.anime-portal-body .site-description,
body.anime-portal-body .wp-site-blocks > header,
body.anime-portal-body h1.site-title,
body.anime-portal-body p.site-description,
body.anime-portal-body .entry-header h1:not(.hero-main-title):not(.series-title):not(.episode-title):not(.page-title),
body.anime-portal-body .page-title:not(.trending-title):not(.schedule-title):not(.top10-title):not(.cta-title):not(.news-mini-title),
.site-header,
.site-branding,
.site-title,
.site-description,
header:not(.anime-header),
footer:not(.anime-footer),
body .site-header,
body .site-branding,
body .site-title,
body .site-description {
    display: none !important;
    visibility: hidden !important;
    height: 0 !important;
    width: 0 !important;
    overflow: hidden !important;
    position: absolute !important;
    left: -9999px !important;
    opacity: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    font-size: 0 !important;
    line-height: 0 !important;
}

/* Hide any WordPress default content that might show site title/description */
body.anime-portal-body .site-header:not(.anime-header),
body.anime-portal-body header:not(.anime-header):not(.anime-footer),
body.anime-portal-body .site-branding:not(.logo-link) {
    display: none !important;
}

/* Hide WordPress sidebar and widgets on anime portal pages */
.anime-portal-container ~ aside,
.anime-portal-container ~ .sidebar,
body.anime-portal-body aside,
body.anime-portal-body .sidebar,
body.anime-portal-body .widget-area,
body.anime-portal-body #secondary,
body.anime-portal-body .elementor-sidebar {
    display: none !important;
}

/* Hide WordPress default site title and description */
body.anime-portal-body .site-title,
body.anime-portal-body .site-description,
body.anime-portal-body h1.site-title,
body.anime-portal-body p.site-description,
body.anime-portal-body .site-branding:not(.logo-link),
body.anime-portal-body .custom-logo-link + .site-title,
body.anime-portal-body .custom-logo-link + .site-description {
    display: none !important;
    visibility: hidden !important;
    height: 0 !important;
    width: 0 !important;
    overflow: hidden !important;
    position: absolute !important;
    left: -9999px !important;
    opacity: 0 !important;
}

/* Hide any default WordPress headers */
body.anime-portal-body .site-header:not(.anime-header),
body.anime-portal-body header:not(.anime-header):not(.anime-footer) {
    display: none !important;
}

/* Ensure full width layout */
.anime-portal-container {
    width: 100%;
    max-width: 100%;
    margin: 0;
    padding: 0;
    position: relative;
    background: #0b0f1a;
    background-image: 
        radial-gradient(ellipse at top right, rgba(124, 58, 237, 0.15), transparent 60%),
        radial-gradient(ellipse at bottom left, rgba(251, 113, 133, 0.15), transparent 60%),
        linear-gradient(180deg, #0b0f1a 0%, #0b0f1a 100%);
    background-attachment: fixed;
    min-height: 100vh;
}

/* Override any parent container constraints */
body.anime-portal-body .site,
body.anime-portal-body .site-content,
body.anime-portal-body .content-area,
body.anime-portal-body .main-content,
body.anime-portal-body .elementor-page {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Hide any default WordPress content wrappers */
body.anime-portal-body .site-main,
body.anime-portal-body article,
body.anime-portal-body .entry-content {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Hide admin bar on anime portal */
body.anime-portal-body #wpadminbar {
    display: none !important;
}

/* Ensure main content is full width */
.anime-main-content {
    width: 100%;
    max-width: 100%;
    margin: 0;
    padding: 0;
}

/* Fix for any Elementor or theme wrappers */
body.anime-portal-body .elementor-section,
body.anime-portal-body .elementor-container {
    max-width: 100% !important;
}

/* Remove any default padding/margins from theme */
body.anime-portal-body .site-inner,
body.anime-portal-body .wrap {
    max-width: 100% !important;
    padding: 0 !important;
}

.anime-portal-container {
    min-height: 100vh;
    position: relative;
}

/* Header Styles */
.anime-header {
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 50;
    background: linear-gradient(to bottom, var(--anime-bg), transparent);
    border-bottom: 1px solid transparent;
    padding: 20px 0;
    transition: all 0.3s ease;
}

.anime-header.scrolled {
    background: rgba(11, 15, 26, 0.95);
    backdrop-filter: blur(12px);
    border-bottom-color: var(--border-color);
    padding: 12px 0;
    box-shadow: 0 4px 20px rgba(124, 58, 237, 0.1);
}

.header-container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 24px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
}

@media (max-width: 767px) {
    .header-container {
        padding: 0 16px;
        gap: 12px;
    }
}

.header-left {
    display: flex;
    align-items: center;
    gap: 40px;
    flex: 1;
    min-width: 0;
}

@media (max-width: 767px) {
    .header-left {
        gap: 12px;
        flex: 0 0 auto;
    }
    
    .logo-link {
        min-width: 0;
    }
    
    .logo-text {
        font-size: 18px;
    }
    
    .logo-icon-wrapper {
        flex-shrink: 0;
    }
}

.logo-link {
    display: flex;
    align-items: center;
    gap: 8px;
    text-decoration: none;
    color: var(--text-primary);
}

.logo-icon {
    position: relative;
}

.logo-icon svg {
    color: var(--text-primary);
    filter: drop-shadow(0 0 10px rgba(124, 58, 237, 0.5));
}

.logo-text {
    font-size: 24px;
    font-weight: 900;
    font-style: italic;
    letter-spacing: -0.5px;
}

.logo-gradient {
    background: linear-gradient(to right, var(--anime-primary), var(--anime-accent));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.desktop-nav {
    display: none;
}

@media (min-width: 768px) {
    .desktop-nav {
        display: flex;
        gap: 4px;
    }
}

.nav-link {
    color: var(--text-muted);
    text-decoration: none;
    font-weight: 700;
    font-size: 14px;
    padding: 8px 16px;
    border-radius: 9999px;
    transition: all 0.3s;
}

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

/* Mega Menu Nav Item */
.nav-item-mega {
    position: relative;
}

.nav-link-mega {
    display: flex;
    align-items: center;
    gap: 4px;
}

.nav-chevron {
    transition: transform 0.3s ease;
    opacity: 0.6;
}

.nav-item-mega:hover .nav-chevron {
    transform: rotate(180deg);
    opacity: 1;
}

.nav-link-highlight {
    display: flex;
    align-items: center;
    gap: 6px;
    color: var(--anime-primary) !important;
}

.nav-link-highlight svg {
    color: #fbbf24;
}

/* ========================================
   MEGA MENU - CLEAN MINIMAL DESIGN
   ======================================== */

.mega-menu-dropdown {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    width: 680px;
    background: #12141f;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 16px;
    box-shadow: 
        0 20px 60px rgba(0, 0, 0, 0.5),
        0 0 1px rgba(255, 255, 255, 0.1);
    opacity: 0;
    visibility: hidden;
    transform: translateY(8px);
    transition: all 0.2s ease-out;
    z-index: 1000;
    overflow: hidden;
}

.nav-item-mega:hover .mega-menu-dropdown {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

/* Header Bar */
.mega-menu-dropdown::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, #7c3aed, #ec4899, #7c3aed);
    background-size: 200% 100%;
    animation: gradient-shift 3s ease infinite;
}

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

.mega-menu-container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    padding: 0;
}

.mega-menu-column {
    padding: 24px;
}

/* Right Column - Genres */
.mega-menu-genres {
    background: rgba(0, 0, 0, 0.2);
}

.mega-menu-heading {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    font-weight: 700;
    color: #9ca3af;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin: 0 0 16px 0;
}

.mega-menu-heading svg {
    color: var(--anime-primary);
}

.mega-menu-genres-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px;
}

.mega-menu-genre-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    color: #9ca3af;
    text-decoration: none;
    font-size: 13px;
    font-weight: 500;
    border-radius: 8px;
    transition: all 0.15s ease;
}

.mega-menu-genre-item:hover {
    background: rgba(124, 58, 237, 0.15);
    color: #fff;
}

.genre-icon {
    font-size: 16px;
}

.mega-menu-see-all {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    margin-top: 16px;
    padding: 12px 16px;
    background: var(--anime-primary);
    color: white;
    text-decoration: none;
    font-size: 13px;
    font-weight: 600;
    border-radius: 8px;
    transition: all 0.2s ease;
}

.mega-menu-see-all:hover {
    background: #6d28d9;
    transform: translateY(-1px);
}

/* Left Column - Latest Anime */
.mega-menu-latest {
    border-right: 1px solid rgba(255, 255, 255, 0.06);
}

.mega-menu-anime-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.mega-menu-anime-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px;
    border-radius: 10px;
    text-decoration: none;
    transition: all 0.15s ease;
}

.mega-menu-anime-item:hover {
    background: rgba(255, 255, 255, 0.05);
}

.mega-anime-poster {
    position: relative;
    width: 48px;
    height: 68px;
    border-radius: 6px;
    overflow: hidden;
    flex-shrink: 0;
}

.mega-anime-poster img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.mega-anime-rating {
    position: absolute;
    bottom: 3px;
    right: 3px;
    display: flex;
    align-items: center;
    gap: 2px;
    padding: 2px 5px;
    background: rgba(0, 0, 0, 0.85);
    border-radius: 4px;
    font-size: 10px;
    font-weight: 700;
    color: #fbbf24;
}

.mega-anime-rating svg {
    width: 9px;
    height: 9px;
}

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

.mega-anime-title {
    font-size: 13px;
    font-weight: 600;
    color: #fff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.mega-anime-date {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    color: #6b7280;
}

.mega-anime-date::before {
    content: '';
    width: 5px;
    height: 5px;
    background: #10b981;
    border-radius: 50%;
}

/* Quick Links - Hide if empty or show below */
.mega-menu-quick {
    display: none;
}

.mega-menu-quick-links {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.mega-quick-link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 12px;
    color: #9ca3af;
    text-decoration: none;
    font-size: 13px;
    font-weight: 500;
    border-radius: 8px;
    transition: all 0.15s ease;
}

.mega-quick-link:hover {
    background: rgba(255, 255, 255, 0.05);
    color: #fff;
}

.mega-quick-link.highlighted {
    background: rgba(124, 58, 237, 0.15);
    color: #fff;
}

.new-badge {
    padding: 3px 8px;
    background: #ec4899;
    color: white;
    font-size: 9px;
    font-weight: 700;
    border-radius: 10px;
    text-transform: uppercase;
}

/* Mobile Expandable Menu */
.mobile-nav-item-expandable {
    display: flex;
    flex-direction: column;
}

.mobile-nav-expandable {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    background: none;
    border: none;
    cursor: pointer;
    font-family: inherit;
}

.mobile-chevron {
    transition: transform 0.3s ease;
}

.mobile-nav-item-expandable.expanded .mobile-chevron {
    transform: rotate(180deg);
}

.mobile-submenu {
    display: none;
    flex-direction: column;
    padding: 8px 0 8px 16px;
    margin-top: 8px;
    border-right: 2px solid var(--anime-primary);
}

.mobile-nav-item-expandable.expanded .mobile-submenu {
    display: flex;
}

.mobile-submenu-link {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    color: var(--text-muted);
    text-decoration: none;
    font-size: 14px;
    border-radius: 8px;
    transition: all 0.2s ease;
}

.mobile-submenu-link:hover {
    background: rgba(124, 58, 237, 0.15);
    color: var(--text-primary);
}

.mobile-submenu-main {
    background: rgba(124, 58, 237, 0.1);
    color: var(--anime-primary);
    font-weight: 600;
    margin-bottom: 8px;
}

.mobile-submenu-heading {
    font-size: 11px;
    font-weight: 700;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 8px 16px 4px;
}

.mobile-submenu-divider {
    height: 1px;
    background: rgba(255, 255, 255, 0.08);
    margin: 8px 0;
}

.mobile-nav-highlight {
    background: linear-gradient(135deg, rgba(124, 58, 237, 0.2), rgba(236, 72, 153, 0.2)) !important;
    border: 1px solid rgba(124, 58, 237, 0.3);
}

.mobile-nav-highlight span {
    display: flex;
    align-items: center;
    color: var(--anime-primary);
}

.mobile-nav-divider {
    height: 1px;
    background: rgba(255, 255, 255, 0.1);
    margin: 16px 0;
}

.mobile-nav-section-title {
    font-size: 11px;
    font-weight: 700;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 8px 16px;
    margin-top: 8px;
}

.mobile-nav-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    background: var(--anime-primary);
    color: white;
    border-radius: 10px;
    font-size: 11px;
    font-weight: 700;
    margin-right: 8px;
}

.mobile-nav-admin {
    opacity: 0.8;
}

.mobile-nav-logout {
    color: #FCA5A5;
}

.mobile-nav-logout:hover {
    color: #EF4444;
    background: rgba(239, 68, 68, 0.1);
}

/* Mobile Menu Tabs */
.mobile-menu-tabs {
    display: flex;
    gap: 8px;
    margin: 16px 0;
    padding: 0 16px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.mobile-tab-btn {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 12px 16px;
    background: transparent;
    border: none;
    border-bottom: 2px solid transparent;
    color: var(--text-muted);
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s;
    position: relative;
}

.mobile-tab-btn svg {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
}

.mobile-tab-btn.active {
    color: var(--anime-primary);
    border-bottom-color: var(--anime-primary);
    background: rgba(124, 58, 237, 0.1);
}

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

.mobile-tab-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    background: var(--anime-primary);
    color: white;
    border-radius: 9px;
    font-size: 10px;
    font-weight: 700;
    margin-right: 4px;
}

.mobile-tab-content {
    display: flex;
    flex-direction: column;
    gap: 0;
}

/* Mobile Auth Buttons */
.mobile-auth-buttons {
    display: flex;
    gap: 12px;
    padding: 0 16px;
    margin: 16px 0;
}

.mobile-auth-buttons .btn {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 14px 20px;
    font-size: 16px;
    font-weight: 600;
    border-radius: 12px;
    text-decoration: none;
    transition: all 0.3s;
}

.mobile-auth-buttons .btn svg {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
}

/* Mobile Tab Content Links */
.mobile-tab-content .mobile-nav-link {
    margin: 0 16px;
    border-radius: 12px;
}

.mobile-tab-content .mobile-nav-link:first-child {
    margin-top: 8px;
}

.mobile-tab-content .mobile-nav-link:last-child {
    margin-bottom: 8px;
}

/* Update notification badge in tab */
#mobile-tab-notification-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    background: var(--anime-primary);
    color: white;
    border-radius: 9px;
    font-size: 10px;
    font-weight: 700;
    margin-right: 4px;
}

.header-right {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-shrink: 0;
}

@media (max-width: 767px) {
    .header-right {
        gap: 8px;
    }
    
    /* Hide all header actions in mobile except menu toggle */
    .header-right .search-container,
    .header-right .notifications-container,
    .header-right .user-menu-container,
    .header-right .btn-login {
        display: none !important;
    }
}

/* Search */
.search-container {
    position: relative;
    display: none;
}

@media (min-width: 768px) {
    .search-container {
        display: block;
    }
}

.search-box {
    display: flex;
    align-items: center;
    background: rgba(18, 20, 32, 0.5);
    border: 1px solid var(--border-color);
    border-radius: 9999px;
    padding: 10px 16px;
    width: 256px;
    transition: all 0.3s;
}

.search-box:focus-within {
    width: 320px;
    background: var(--anime-surface);
    border-color: var(--anime-primary);
}

.search-icon {
    color: var(--text-muted);
    margin-left: 8px;
}

.search-form {
    flex: 1;
    display: flex;
    align-items: center;
}

.search-input {
    background: transparent;
    border: none;
    outline: none;
    color: var(--text-primary);
    font-size: 14px;
    font-weight: 500;
    padding: 0 8px;
    width: 100%;
}

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

.search-results {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    width: 100%;
    background: var(--anime-surface);
    border: 1px solid var(--border-color);
    border-radius: 16px;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5);
    overflow: hidden;
    animation: fadeInUp 0.3s ease;
}

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

/* Buttons - Base Styles */
button,
.btn,
.anime-portal-container button,
.anime-portal-container .btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    padding: 10px 24px !important;
    border-radius: 12px !important;
    font-weight: 700 !important;
    font-size: 14px !important;
    text-decoration: none !important;
    border: none !important;
    cursor: pointer !important;
    transition: all 0.3s !important;
    font-family: inherit !important;
    line-height: 1.5 !important;
    box-sizing: border-box !important;
}

/* Ensure buttons are visible */
button:not([class]),
.btn:not([class]),
.anime-portal-container button:not([class]),
.anime-portal-container .btn:not([class]) {
    background: var(--anime-primary) !important;
    color: var(--text-primary) !important;
}

.btn-primary,
.anime-portal-container .btn-primary {
    background: var(--anime-primary) !important;
    color: var(--text-primary) !important;
    box-shadow: 0 0 20px rgba(124, 58, 237, 0.4) !important;
}

.btn-primary:hover,
.anime-portal-container .btn-primary:hover {
    background: #6D28D9 !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 0 30px rgba(124, 58, 237, 0.6) !important;
}

.btn-secondary,
.anime-portal-container .btn-secondary {
    background: rgba(255, 255, 255, 0.05) !important;
    color: var(--text-primary) !important;
    border: 1px solid var(--border-color) !important;
}

.btn-secondary:hover,
.anime-portal-container .btn-secondary:hover {
    background: rgba(255, 255, 255, 0.1) !important;
    border-color: rgba(255, 255, 255, 0.3) !important;
}

.btn-accent,
.anime-portal-container .btn-accent {
    background: var(--anime-accent) !important;
    color: var(--text-primary) !important;
    box-shadow: 0 0 30px rgba(251, 113, 133, 0.4) !important;
}

.btn-accent:hover,
.anime-portal-container .btn-accent:hover {
    background: #F43F5E !important;
    transform: scale(1.05) !important;
}

.btn-full {
    width: 100%;
}

.btn-small {
    padding: 6px 12px;
    font-size: 12px;
}

.btn-login {
    background: rgba(255, 255, 255, 0.05);
    color: var(--text-primary);
    border: 1px solid var(--border-color);
    padding: 10px 24px;
    border-radius: 9999px;
    font-weight: 700;
    font-size: 14px;
    text-decoration: none;
    display: none;
}

@media (min-width: 768px) {
    .btn-login {
        display: inline-flex;
    }
}

.btn-login:hover {
    background: var(--anime-primary);
    border-color: var(--anime-primary);
    box-shadow: 0 0 20px rgba(124, 58, 237, 0.4);
}

.btn-danger {
    background: #EF4444;
    color: var(--text-primary);
    box-shadow: 0 0 20px rgba(239, 68, 68, 0.4);
}

.btn-danger:hover {
    background: #DC2626;
    transform: translateY(-2px);
    box-shadow: 0 0 30px rgba(239, 68, 68, 0.6);
}

/* Tab Buttons */
.tab-btn,
.anime-portal-container .tab-btn {
    padding: 12px 24px !important;
    border-radius: 12px !important;
    font-weight: 700 !important;
    font-size: 14px !important;
    background: transparent !important;
    color: var(--text-muted) !important;
    border: none !important;
    cursor: pointer !important;
    transition: all 0.3s !important;
}

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

.tab-btn.active,
.anime-portal-container .tab-btn.active {
    color: var(--anime-primary) !important;
    border-bottom-color: var(--anime-primary) !important;
}

/* Action Buttons */
.action-btn,
.anime-portal-container .action-btn {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    background: none !important;
    border: none !important;
    color: var(--text-secondary) !important;
    font-weight: 700 !important;
    font-size: 14px !important;
    cursor: pointer !important;
    transition: color 0.3s !important;
    padding: 8px 0 !important;
}

.action-btn:hover,
.anime-portal-container .action-btn:hover {
    color: var(--text-primary) !important;
}

.action-btn svg,
.anime-portal-container .action-btn svg {
    width: 18px !important;
    height: 18px !important;
}

/* Poster Buttons */
.poster-buttons {
    display: flex;
    gap: 12px;
    margin-top: 12px;
}

.poster-buttons .btn {
    flex: 1;
}

.poster-buttons .btn:last-child {
    flex: 0 0 auto;
    padding: 10px;
    min-width: 48px;
}

/* Mark All Read Button */
.mark-all-read {
    background: rgba(255, 255, 255, 0.05);
    color: var(--text-secondary);
    border: 1px solid var(--border-color);
    padding: 8px 16px;
    border-radius: 8px;
    font-weight: 700;
    font-size: 12px;
    cursor: pointer;
    transition: all 0.3s;
}

.mark-all-read:hover {
    background: rgba(255, 255, 255, 0.1);
    color: var(--text-primary);
    border-color: rgba(255, 255, 255, 0.3);
}

/* User Avatar */
.user-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    overflow: hidden;
    border: 2px solid var(--anime-primary);
    padding: 2px;
    background: linear-gradient(135deg, var(--anime-primary), var(--anime-accent));
    text-decoration: none;
}

.avatar-circle {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: var(--anime-bg);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

/* Mobile Menu */
.mobile-menu-toggle {
    display: block;
    background: none;
    border: none;
    color: var(--text-primary);
    cursor: pointer;
    padding: 8px;
}

/* Hide on tablet and desktop */
@media (min-width: 768px) {
    .mobile-menu-toggle {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
        width: 0 !important;
        height: 0 !important;
        padding: 0 !important;
        margin: 0 !important;
        overflow: hidden !important;
        position: absolute !important;
        left: -9999px !important;
    }
}

/* Extra rule for desktop */
@media (min-width: 1024px) {
    .mobile-menu-toggle {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
        width: 0 !important;
        height: 0 !important;
        padding: 0 !important;
        margin: 0 !important;
        overflow: hidden !important;
        position: absolute !important;
        left: -9999px !important;
    }
}

.mobile-menu-overlay {
    position: fixed;
    inset: 0;
    z-index: 60;
    background: rgba(11, 15, 26, 0.98);
    backdrop-filter: blur(12px);
    transform: translateX(100%);
    transition: transform 0.3s ease;
    overflow: hidden;
}

.mobile-menu-overlay.open {
    transform: translateX(0);
}

/* Prevent body scroll when menu is open */
body.mobile-menu-open {
    overflow: hidden;
    position: fixed;
    width: 100%;
}

.mobile-menu-content {
    display: flex;
    flex-direction: column;
    height: 100vh;
    max-height: 100vh;
    padding: 20px 16px;
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
}

.mobile-menu-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 24px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--border-color);
    flex-shrink: 0;
}

.mobile-menu-header .logo-text {
    font-size: 20px;
    font-weight: 900;
}

.mobile-menu-close {
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    color: var(--text-primary);
    font-size: 24px;
    cursor: pointer;
    padding: 8px;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: all 0.3s ease;
}

.mobile-menu-close:hover {
    background: rgba(255, 255, 255, 0.15);
    border-color: var(--anime-primary);
    transform: rotate(90deg);
}

.mobile-menu-close svg {
    width: 20px;
    height: 20px;
    stroke-width: 2.5;
}

.mobile-search {
    background: var(--anime-surface);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 12px 16px;
    margin-bottom: 24px;
    display: flex;
    align-items: center;
    gap: 12px;
    flex-shrink: 0;
}

.mobile-search input {
    background: transparent;
    border: none;
    outline: none;
    color: var(--text-primary);
    font-size: 18px;
    width: 100%;
}

.mobile-nav {
    display: flex;
    flex-direction: column;
    gap: 8px;
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    min-height: 0;
}

.mobile-nav-link {
    color: var(--text-secondary);
    text-decoration: none;
    font-weight: 700;
    font-size: 18px;
    padding: 14px 16px;
    border-radius: 12px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition: all 0.3s;
    min-height: 52px;
    flex-shrink: 0;
    background: none;
    border: none;
    width: 100%;
    text-align: right;
    cursor: pointer;
    font-family: inherit;
}

.mobile-nav-link:hover {
    color: var(--text-primary);
    background: rgba(255, 255, 255, 0.05);
}

.mobile-nav-link span {
    display: flex;
    align-items: center;
    gap: 8px;
}

.mobile-menu-footer {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 24px;
    padding-top: 24px;
    border-top: 1px solid var(--border-color);
    flex-shrink: 0;
}

.mobile-menu-footer .btn {
    width: 100%;
    padding: 14px;
    font-size: 16px;
    font-weight: 700;
}

/* Main Content */
.anime-main-content {
    margin-top: 80px;
    min-height: calc(100vh - 80px);
    background: #0b0f1a;
    position: relative;
    z-index: 1;
}

.anime-main-content > * {
    position: relative;
    z-index: 1;
}

/* Hide WordPress site title and description */
body.anime-portal-body .site-title,
body.anime-portal-body .site-description,
body.anime-portal-body h1.site-title,
body.anime-portal-body p.site-description,
body.anime-portal-body .site-branding,
body.anime-portal-body .custom-logo-link + .site-title,
body.anime-portal-body .custom-logo-link + .site-description {
    display: none !important;
    visibility: hidden !important;
    height: 0 !important;
    width: 0 !important;
    overflow: hidden !important;
    position: absolute !important;
    left: -9999px !important;
}

/* Hide any WordPress default headers that might show site info */
body.anime-portal-body .site-header:not(.anime-header),
body.anime-portal-body header:not(.anime-header):not(.anime-footer) {
    display: none !important;
}

/* Hide entry titles that are not our custom titles */
body.anime-portal-body .entry-title:not(.hero-main-title):not(.series-title):not(.episode-title):not(.page-title):not(.trending-title):not(.schedule-title):not(.top10-title):not(.cta-title):not(.news-mini-title):not(.anime-card-title):not(.continue-watching-name):not(.schedule-name) {
    display: none !important;
}

/* Series View */
.series-view {
    padding-bottom: 80px;
}

.series-banner {
    position: relative;
    height: 600px;
    width: 100%;
    background-size: cover;
    background-position: top;
    background-repeat: no-repeat;
    overflow: hidden;
}

.banner-overlay-gradient {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(to bottom, #0b0f1a 0%, rgba(11, 15, 26, 0.8) 15%, rgba(11, 15, 26, 0.3) 30%, rgba(11, 15, 26, 0.3) 70%, rgba(11, 15, 26, 0.8) 85%, #0b0f1a 100%);
    z-index: 1;
    pointer-events: none;
}

.banner-overlay-blur {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    /* backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px); */
    z-index: 2;
    pointer-events: none;
}

.banner-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, var(--anime-bg), transparent);
    backdrop-filter: blur(2px);
}

.series-content {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 24px;
    position: relative;
    margin-top: -256px;
    z-index: 10;
}

.series-layout {
    display: flex;
    flex-direction: column;
    gap: 40px;
}

@media (max-width: 767px) {
    .series-layout {
        display: flex;
        align-items: center;
    }
}

@media (min-width: 768px) {
    .series-layout {
        flex-direction: row;
    }
}

.series-poster {
    width: 100%;
    max-width: 300px;
}

.poster-image {
    position: relative;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5);
    border: 4px solid var(--anime-surface);
}

.poster-image img {
    width: 100%;
    height: auto;
    display: block;
}

.poster-badge {
    position: absolute;
    top: 16px;
    left: 16px;
    background: var(--anime-accent);
    color: var(--text-primary);
    font-weight: 700;
    padding: 4px 12px;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(251, 113, 133, 0.3);
}

.poster-actions {
    margin-top: 24px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.poster-buttons {
    display: flex;
    gap: 12px;
}

.series-info {
    flex: 1;
    padding-top: 80px;
}

@media (min-width: 768px) {
    .series-info {
        padding-top: 200px;
    }
}

.series-title-wrapper {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 8px;
    flex-wrap: wrap;
}

.series-title {
    font-size: 48px;
    font-weight: 900;
    color: var(--text-primary);
    margin: 0;
    line-height: 1;
    flex: 1;
    min-width: 0;
}

@media (min-width: 768px) {
    .series-title {
        font-size: 64px;
    }
}

.btn-edit-post {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    background: rgba(124, 58, 237, 0.1);
    border: 1px solid rgba(124, 58, 237, 0.3);
    border-radius: 8px;
    color: var(--anime-primary);
    text-decoration: none;
    font-size: 14px;
    font-weight: 600;
    transition: all 0.3s;
    white-space: nowrap;
    flex-shrink: 0;
}

.btn-edit-post:hover {
    background: rgba(124, 58, 237, 0.2);
    border-color: var(--anime-primary);
    color: var(--anime-primary);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(124, 58, 237, 0.3);
}

.btn-edit-post svg {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
}

@media (max-width: 767px) {
    .btn-edit-post {
        padding: 8px 12px;
        font-size: 12px;
    }
}

.series-subtitle {
    font-size: 20px;
    color: var(--text-muted);
    font-weight: 500;
    margin: 0 0 24px 0;
}

.series-japanese {
    font-size: 16px;
    color: var(--text-muted);
    margin: 0 0 24px 0;
}

.series-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 32px;
}

.meta-badge {
    display: flex;
    align-items: center;
    gap: 6px;
    background: rgba(0, 0, 0, 0.4);
    padding: 6px 12px;
    border-radius: 8px;
    border: 1px solid var(--border-color);
    font-weight: 700;
    font-size: 14px;
}

.meta-badge svg {
    color: #FBBF24;
    fill: #FBBF24;
}

.series-description {
    color: var(--text-secondary);
    font-size: 18px;
    line-height: 1.75;
    margin-bottom: 32px;
    max-width: 768px;
}

.series-details {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
    padding: 24px;
    background: rgba(18, 20, 32, 0.5);
    border-radius: 12px;
    border: 1px solid var(--border-color);
    margin-bottom: 40px;
}

@media (min-width: 768px) {
    .series-details {
        grid-template-columns: repeat(4, 1fr);
    }
}

.detail-item {
    text-align: right;
}

.detail-label {
    font-size: 12px;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin-bottom: 4px;
}

.detail-value {
    font-weight: 700;
    color: var(--text-primary);
    font-size: 14px;
}

/* Tabs */
.series-tabs {
    display: flex;
    gap: 32px;
    border-bottom: 1px solid var(--border-color);
    margin-bottom: 32px;
}

.tab-btn {
    background: none;
    border: none;
    color: var(--text-muted);
    font-weight: 700;
    font-size: 14px;
    padding-bottom: 16px;
    cursor: pointer;
    border-bottom: 2px solid transparent;
    transition: all 0.3s;
}

.tab-btn:hover {
    color: var(--text-primary);
}

.tab-btn.active {
    color: var(--anime-primary);
    border-bottom-color: var(--anime-primary);
}

.tab-content {
    min-height: 200px;
}

/* Episodes List */
.episodes-list {
    display: grid;
    grid-template-columns: repeat(1, 1fr);
    gap: 16px;
}

@media (min-width: 768px) {
    .episodes-list {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 1024px) {
    .episodes-list {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* Watch View */
.watch-view {
    padding: 80px 0;
}

.watch-container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 24px;
}

.watch-layout {
    display: flex;
    flex-direction: column;
    gap: 24px;
    align-items: flex-start;
}

@media (min-width: 1024px) {
    .watch-layout {
        flex-direction: row;
        align-items: flex-start;
    }
}

.watch-player-section {
    flex: 1;
}

.back-to-series-btn-container {
    margin-bottom: 24px;
    width: 100%;
}

.back-to-series-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--text-muted);
    font-weight: 500;
    font-size: 0.875rem;
    text-decoration: none;
    transition: color 0.3s ease;
    padding: 8px 16px;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.back-to-series-btn:hover {
    color: var(--text-primary);
    background: rgba(255, 255, 255, 0.1);
}

.back-to-series-btn svg {
    width: 20px;
    height: 20px;
}

.video-player-container {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    background: #000;
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid var(--border-color);
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5);
}

.login-required-message {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, rgba(124, 58, 237, 0.1), rgba(251, 113, 133, 0.1));
    border-radius: 12px;
    z-index: 10;
}

.login-required-content {
    text-align: center;
    padding: 60px 40px;
    max-width: 500px;
}

.login-required-content svg {
    color: var(--anime-primary);
    margin-bottom: 24px;
}

.login-required-content h2 {
    font-size: 28px;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 12px;
}

.login-required-content p {
    font-size: 16px;
    color: var(--text-muted);
    margin-bottom: 32px;
    line-height: 1.6;
}

.login-required-buttons {
    display: flex;
    gap: 16px;
    justify-content: center;
    flex-wrap: wrap;
}

.btn-large {
    padding: 14px 32px;
    font-size: 16px;
    font-weight: 700;
    min-width: 160px;
}

.video-player {
    width: 100%;
    height: 100%;
    border: none;
}

.episode-info {
    background-color: rgb(26 29 46);
    border: 1px solid rgba(255, 255, 255, 0.05);
    padding: 24px;
    border-radius: 16px;
    margin-top: 24px;
    margin-bottom: 24px;
}

.episode-header-row {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-bottom: 24px;
}

@media (min-width: 768px) {
    .episode-header-row {
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
    }
}

.episode-title-section {
    flex: 1;
}

.episode-title-link {
    text-decoration: none;
    color: inherit;
    display: block;
    transition: color 0.3s;
}

.episode-title-link:hover {
    color: var(--anime-primary);
}

.episode-title-link .episode-title {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0 0 4px 0;
    line-height: 1.2;
    cursor: pointer;
    transition: color 0.3s;
}

.episode-title-link:hover .episode-title {
    color: var(--anime-primary);
}

.episode-series-link {
    text-decoration: none;
    color: inherit;
    display: block;
    transition: opacity 0.3s;
}

.episode-series-link:hover {
    opacity: 0.8;
}

.episode-series-link .episode-series {
    color: var(--anime-primary);
    font-weight: 700;
    font-size: 1.125rem;
    line-height: 1.5;
    margin: 0 0 12px 0;
    cursor: pointer;
    transition: color 0.3s;
}

.episode-series-link:hover .episode-series {
    color: var(--anime-accent);
}

.episode-views-counter {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--text-muted);
    font-size: 0.875rem;
    font-weight: 500;
}

.episode-views-counter svg {
    width: 16px;
    height: 16px;
    opacity: 0.7;
}

.episode-views-counter #episode-views-count {
    color: var(--text-secondary);
    font-weight: 600;
}

.episode-views-counter .views-label {
    color: var(--text-muted);
    font-weight: 400;
}

.episode-series a {
    color: var(--anime-primary);
    font-weight: 700;
    text-decoration: none;
}

.separator {
    color: var(--text-muted);
}

.episode-actions-top {
    display: flex;
    gap: 12px;
    align-items: center;
}

.episode-actions-top button {
    background-color: rgb(255 255 255 / 0.2) !important;
    padding: 0 !important;
    border-radius: 200px !important;
}

.action-btn-circle {
    background-color: rgb(255 255 255 / 0.2);
    border: none;
    color: var(--text-primary);
    width: 44px;
    height: 44px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
    padding: 12px;
    box-sizing: border-box;
}

.action-btn-circle:hover {
    background-color: rgb(255 255 255 / 0.3);
}

.action-btn-circle.liked {
    color: var(--anime-accent) !important;
}

.action-btn-circle svg {
    width: 20px;
    height: 20px;
}

.episode-nav-controls {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    margin-top: 24px;
    padding-top: 24px;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
}

.episode-nav-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    color: rgb(156 163 175);
    font-weight: 700;
    font-size: 0.875rem;
    line-height: 1.25rem;
    text-decoration: none;
    transition: color 0.3s ease;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
}

.episode-nav-btn:hover {
    color: var(--text-primary);
}

.episode-nav-prev {
    flex-direction: row;
}

.episode-nav-next {
    flex-direction: row;
}

.episode-nav-disabled {
    visibility: hidden;
    pointer-events: none;
}

.episode-nav-btn svg {
    width: 20px;
    height: 20px;
}

/* Episodes List Section */
.episodes-list-section {
    margin-top: 24px;
}

.episodes-list-title {
    color: var(--text-primary);
    font-weight: 700;
    margin-bottom: 16px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    padding-bottom: 16px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 1.125rem;
}

.episodes-count-badge {
    font-size: 0.75rem;
    background-color: rgb(124 58 237);
    color: white;
    padding: 4px 8px;
    border-radius: 4px;
    font-weight: 700;
}

.episodes-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.episode-list-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.3s ease;
    text-decoration: none;
    color: inherit;
    background: transparent;
}

.episode-list-item:hover {
    background: rgba(255, 255, 255, 0.05);
}

.episode-list-item.active {
    background-color: rgb(124 58 237);
    color: white;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
}

.episode-thumbnail-small {
    position: relative;
    width: 64px;
    height: 40px;
    background: black;
    border-radius: 4px;
    overflow: hidden;
    flex-shrink: 0;
}

.episode-thumbnail-small img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.episode-thumbnail-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top right, rgba(124, 58, 237, 0.2), transparent);
    pointer-events: none;
}

.episode-duration-small {
    position: absolute;
    bottom: 2px;
    right: 4px;
    font-size: 8px;
    font-weight: 700;
    color: white;
    background: rgba(0, 0, 0, 0.5);
    padding: 2px 4px;
    border-radius: 2px;
}

.episode-playing-indicator {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.4);
}

.play-bar {
    width: 4px;
    height: 12px;
    background: white;
    margin: 0 2px;
    border-radius: 2px;
    animation: bounce 1.4s infinite;
}

.play-bar.delay-75 {
    animation-delay: 0.1s;
}

.play-bar.delay-150 {
    animation-delay: 0.2s;
}

@keyframes bounce {
    0%, 80%, 100% {
        transform: scaleY(0.4);
        opacity: 0.5;
    }
    40% {
        transform: scaleY(1);
        opacity: 1;
    }
}

.episode-info-small {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.episode-name-small {
    font-size: 0.75rem;
    font-weight: 700;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.episode-file-name-small {
    font-size: 10px;
    opacity: 0.7;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.episode-list-item.active .episode-file-name-small {
    opacity: 0.9;
}

.episode-actions {
    display: none; /* Hide old actions bar */
}

.action-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    background: none;
    border: none;
    color: var(--text-secondary);
    font-weight: 700;
    font-size: 14px;
    cursor: pointer;
    transition: color 0.3s;
}

.action-btn:hover {
    color: var(--anime-primary);
}

.action-btn.liked {
    color: var(--anime-accent);
}

.action-btn.liked svg {
    fill: var(--anime-accent);
}

.action-btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

/* Comments */
.episode-comments {
    margin-top: 40px;
    padding: 25px;
    background-color: rgb(26 29 46 / var(--tw-bg-opacity, 1));
    border-radius: 30px;
}

@media (min-width: 768px) {
    .episode-comments {
        padding: 25px;
    }
}

.comments-title {
    font-size: 20px;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0 0 24px 0;
    padding-right: 12px;
    border-right: 4px solid var(--anime-secondary);
}

.comment-form-container {
    margin-bottom: 32px;
}

.comment-textarea {
    margin-bottom: 12px;
}

.comment-textarea textarea {
    width: 100%;
    background: var(--anime-surface);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 12px;
    color: var(--text-primary);
    font-size: 14px;
    min-height: 80px;
    resize: vertical;
    outline: none;
    transition: border-color 0.3s;
}

.comment-textarea textarea:focus {
    border-color: var(--anime-primary);
}

.comment-login-prompt {
    margin-bottom: 32px;
}

.comments-list {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.comment-item {
    display: flex;
    gap: 16px;
}

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

.comment-content {
    flex: 1;
}

.comment-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 4px;
}

.comment-author {
    font-weight: 700;
    font-size: 14px;
    color: var(--text-primary);
}

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

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

.spoiler-text {
    position: relative;
    filter: blur(8px);
    user-select: none;
    transition: filter 0.3s ease;
}

.spoiler-text.spoiler-visible,
.comment-text.spoiler-text.spoiler-visible {
    filter: none !important;
    user-select: auto !important;
}

.spoiler-text.spoiler-visible .spoiler-overlay {
    display: none !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

.spoiler-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 5;
    background: rgba(0, 0, 0, 0.3);
    cursor: pointer;
}

.spoiler-warning {
    background: rgba(239, 68, 68, 0.2);
    color: #FCA5A5;
    border: 1px solid rgba(239, 68, 68, 0.5);
    padding: 4px 12px;
    border-radius: 9999px;
    font-size: 12px;
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 8px;
    backdrop-filter: blur(4px);
}

/* Watch Sidebar */
.watch-sidebar {
    width: 100%;
}

@media (min-width: 1024px) {
    .watch-sidebar {
        width: 25%;
    }
}

.sidebar-card {
    background: rgba(18, 20, 32, 0.5);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 16px;
    position: sticky;
    top: 80px;
    max-height: calc(100vh - 100px);
    overflow-y: auto;
    display: flex;
    flex-direction: column;
}

.sidebar-card::-webkit-scrollbar {
    width: 6px;
}

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

.sidebar-card::-webkit-scrollbar-thumb {
    background: rgba(124, 58, 237, 0.5);
    border-radius: 3px;
}

.sidebar-card::-webkit-scrollbar-thumb:hover {
    background: rgba(124, 58, 237, 0.7);
}

.sidebar-title {
    font-size: 18px;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0 0 16px 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    padding-bottom: 16px;
}

.current-season-badge {
    display: inline-flex;
    align-items: center;
    padding: 4px 10px;
    margin-right: 8px;
    background: var(--anime-primary);
    color: white;
    font-size: 12px;
    font-weight: 600;
    border-radius: 20px;
}

/* Season Selector */
.season-selector {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 16px;
    padding-bottom: 16px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.season-label {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-muted);
    white-space: nowrap;
}

.season-tabs {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.season-tab {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 40px;
    height: 36px;
    padding: 0 12px;
    background: rgba(18, 20, 32, 0.8);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    color: var(--text-muted);
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.3s ease;
}

.season-tab:hover {
    background: rgba(124, 58, 237, 0.2);
    border-color: var(--anime-primary);
    color: var(--text-primary);
}

.season-tab.active {
    background: var(--anime-primary);
    border-color: var(--anime-primary);
    color: white;
    box-shadow: 0 4px 12px rgba(124, 58, 237, 0.4);
}

/* Season dropdown for many seasons */
.season-dropdown {
    position: relative;
}

.season-dropdown-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    background: rgba(18, 20, 32, 0.8);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    color: var(--text-primary);
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
}

.season-dropdown-btn:hover {
    border-color: var(--anime-primary);
}

.season-dropdown-btn svg {
    width: 16px;
    height: 16px;
    transition: transform 0.3s ease;
}

.season-dropdown.open .season-dropdown-btn svg {
    transform: rotate(180deg);
}

.season-dropdown-menu {
    position: absolute;
    top: calc(100% + 4px);
    right: 0;
    min-width: 150px;
    background: #1A1D2E;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 8px;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition: all 0.3s ease;
    z-index: 100;
    max-height: 300px;
    overflow-y: auto;
}

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

.season-dropdown-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 12px;
    color: var(--text-muted);
    text-decoration: none;
    border-radius: 6px;
    transition: all 0.2s ease;
}

.season-dropdown-item:hover {
    background: rgba(124, 58, 237, 0.2);
    color: var(--text-primary);
}

.season-dropdown-item.active {
    background: var(--anime-primary);
    color: white;
}

.season-dropdown-item .season-ep-count {
    font-size: 12px;
    opacity: 0.7;
}

.episodes-sidebar-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    overflow-x: hidden;
    padding-right: 8px;
}

.episodes-sidebar-list .episode-list-item {
    margin: 0;
}

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

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

.episodes-sidebar-list::-webkit-scrollbar-thumb {
    background: rgba(124, 58, 237, 0.5);
    border-radius: 3px;
}

.episodes-sidebar-list::-webkit-scrollbar-thumb:hover {
    background: rgba(124, 58, 237, 0.7);
}

.episode-sidebar-item {
    display: flex;
    gap: 12px;
    padding: 8px;
    border-radius: 8px;
    text-decoration: none;
    transition: background 0.3s;
}

.episode-sidebar-item:hover {
    background: rgba(255, 255, 255, 0.05);
}

.episode-sidebar-item.episode-watched {
    background: rgba(124, 58, 237, 0.22) !important;
    border-color: rgba(124, 58, 237, 0.3) !important;
}

.episode-sidebar-item.episode-watched:hover {
    background: rgba(124, 58, 237, 0.3) !important;
}

/* Hide WordPress "Logged in as" message */
.logged-in-as,
.comment-form .logged-in-as,
.comment-form-container .logged-in-as,
#respond .logged-in-as {
    display: none !important;
    visibility: hidden !important;
    height: 0 !important;
    width: 0 !important;
    overflow: hidden !important;
    position: absolute !important;
    left: -9999px !important;
    opacity: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
}

.episode-thumbnail {
    width: 96px;
    height: 96px;
    border-radius: 8px;
    overflow: hidden;
    position: relative;
    flex-shrink: 0;
    background: rgba(255, 255, 255, 0.05);
}

.episode-thumbnail img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.episode-thumbnail img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.episode-duration {
    position: absolute;
    bottom: 4px;
    right: 4px;
    background: rgba(0, 0, 0, 0.8);
    color: var(--text-primary);
    font-size: 10px;
    font-weight: 700;
    padding: 2px 4px;
    border-radius: 4px;
}

.episode-info-small {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-width: 0;
}

.episode-number {
    font-size: 12px;
    font-weight: 700;
    color: var(--text-muted);
    margin-bottom: 4px;
}

.episode-name-small {
    font-size: 14px;
    font-weight: 500;
    color: var(--text-secondary);
    margin: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Home View */
.home-view {
    padding-bottom: 80px;
}

/* Hero Slider Section - Complete Implementation with Splide */
.hero-slider-section {
    position: relative;
    height: 85vh;
    width: 100%;
    overflow: hidden;
    background: var(--anime-bg);
}

.hero-slider-track {
    position: relative;
    height: 100%;
    width: 100%;
}

.hero-slider-list {
    position: relative;
    height: 100%;
    width: 100%;
}

.hero-slide {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    visibility: hidden;
    transition: opacity 1s cubic-bezier(0.25, 1, 0.5, 1), visibility 1s;
    z-index: 1;
}

.hero-slide.active {
    opacity: 1;
    visibility: visible;
    z-index: 10;
}

.hero-slide-bg {
    position: absolute;
    inset: 0;
    z-index: 0;
}

.hero-bg-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.6;
    filter: blur(4px);
    transform: scale(1.05);
    position: relative;
    z-index: 0;
}

/* Complex Gradients for Premium Feel - Fixed z-index to not cover text */
.hero-gradient-1 {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, var(--anime-bg) 0%, rgba(11, 15, 26, 0.3) 40%, transparent 80%);
    z-index: 2;
    pointer-events: none;
}

.hero-gradient-2 {
    position: absolute;
    inset: 0;
    background: linear-gradient(to right, var(--anime-bg) 0%, rgba(11, 15, 26, 0.4) 40%, transparent 80%);
    z-index: 3;
    pointer-events: none;
}

.hero-gradient-3 {
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at center, rgba(124, 58, 237, 0.1), transparent 60%);
    z-index: 4;
    pointer-events: none;
}

.hero-container {
    position: relative;
    z-index: 30;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 24px;
}

.hero-layout {
    display: flex;
    flex-direction: column;
    width: 100%;
    position: relative;
    align-items: flex-end;
    justify-content: center;
    min-height: 100%;
}

@media (min-width: 1024px) {
    .hero-layout {
        flex-direction: row;
        align-items: center;
        justify-content: flex-end;
        width: 100%;
    }
}

.hero-text-content {
    width: 100%;
    position: absolute;
    top: 50%;
    right: 0;
    transform: translateY(-50%);
    z-index: 40;
    text-align: right;
    margin-top: 0;
    direction: rtl;
}

/* Ensure only one text content is visible at a time - use opacity for smooth transition */
.hero-layout .hero-text-content {
    display: block;
}

@media (min-width: 1024px) {
    .hero-text-content {
        width: 66.666%;
        position: absolute;
        top: 50%;
        right: 0;
        transform: translateY(-50%);
        direction: rtl;
    }
}

.hero-tags-row {
    display: flex;
    gap: 8px;
    margin-bottom: 24px;
    flex-wrap: wrap;
    position: relative;
    z-index: 42;
    justify-content: flex-start;
}

.tag-chip {
    padding: 4px 8px;
    border-radius: 6px;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.tag-chip-secondary {
    background: rgba(251, 191, 36, 0.2);
    color: var(--anime-secondary);
    border-color: rgba(251, 191, 36, 0.3);
}

.tag-chip-match {
    background: rgba(34, 197, 94, 0.2);
    color: #4ADE80;
    border-color: rgba(34, 197, 94, 0.3);
    display: flex;
    align-items: center;
    gap: 4px;
}

.hero-main-title {
    font-size: 64px;
    font-weight: 900;
    color: var(--text-primary);
    margin: 0 0 24px 0;
    line-height: 0.9;
    letter-spacing: -2px;
    text-shadow: 0 2px 20px rgba(0, 0, 0, 0.8), 0 0 40px rgba(0, 0, 0, 0.5);
    position: relative;
    z-index: 42;
}

@media (min-width: 768px) {
    .hero-main-title {
        font-size: 96px;
    }
}

.hero-subtitle {
    display: inline-block;
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    position: relative;
    z-index: 43;
    text-shadow: none;
    filter: drop-shadow(0 2px 10px rgba(0, 0, 0, 0.5));
}

.hero-subtitle-1 {
    background: linear-gradient(to right, var(--anime-primary), var(--anime-accent));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.hero-subtitle-2 {
    background: linear-gradient(to right, #9333EA, #3B82F6);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.hero-subtitle-3 {
    background: linear-gradient(to right, #EAB308, #EF4444);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.hero-subtitle-4 {
    background: linear-gradient(to right, #2563EB, #312E81);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* Support for any subtitle number */
[class*="hero-subtitle-"] {
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.hero-desc-text {
    font-size: 18px;
    color: var(--text-secondary);
    line-height: 1.75;
    margin-bottom: 40px;
    max-width: 640px;
    position: relative;
    z-index: 42;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.7);
}

.hero-actions-row {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    position: relative;
    z-index: 42;
    justify-content: flex-start;
}

.btn-hero {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 16px 32px;
    border-radius: 12px;
    font-weight: 700;
    font-size: 18px;
    text-decoration: none;
    border: none;
    cursor: pointer;
    transition: all 0.3s;
}

.btn-hero-accent {
    background: var(--anime-accent);
    color: var(--text-primary);
    box-shadow: 0 0 30px rgba(251, 113, 133, 0.4);
}

.btn-hero-accent:hover {
    background: #F43F5E;
    transform: scale(1.05);
}

.btn-hero-secondary {
    background: rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(8px);
    color: var(--text-primary);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.btn-hero-secondary:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.3);
}

/* Hero Slider Navigation Arrows - REMOVED */

/* Splide pagination customization */
.hero-slider-pagination {
    position: absolute;
    bottom: 40px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 12px;
    z-index: 50;
}

.hero-pagination-dot {
    width: 8px;
    height: 6px;
    border-radius: 9999px;
    background: rgba(255, 255, 255, 0.3);
    border: none;
    cursor: pointer;
    transition: all 0.3s ease;
    padding: 0;
    margin: 0;
}

.hero-pagination-dot:hover {
    background: rgba(255, 255, 255, 0.6);
    transform: scale(1.2);
}

.hero-pagination-dot.active {
    width: 32px;
    background: var(--anime-accent);
    box-shadow: 0 0 10px rgba(251, 113, 133, 0.5);
}

.hero-slider-controls {
    position: absolute;
    bottom: 40px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 12px;
    z-index: 30;
}

.hero-slider-dot {
    height: 6px;
    border-radius: 9999px;
    background: rgba(255, 255, 255, 0.3);
    border: none;
    cursor: pointer;
    transition: all 0.3s ease;
    padding: 0;
    width: 8px;
}

.hero-slider-dot:hover {
    background: rgba(255, 255, 255, 0.6);
    transform: scale(1.2);
}

.hero-slider-dot.active {
    width: 32px;
    background: var(--anime-accent);
    box-shadow: 0 0 10px rgba(251, 113, 133, 0.5);
}

.hero-content {
    position: relative;
    z-index: 20;
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 24px;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.hero-tags {
    display: flex;
    gap: 8px;
    margin-bottom: 24px;
}

.tag-chip {
    padding: 4px 8px;
    border-radius: 6px;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: rgba(251, 191, 36, 0.2);
    color: var(--anime-secondary);
}

.hero-title {
    font-size: 64px;
    font-weight: 900;
    color: var(--text-primary);
    margin: 0 0 24px 0;
    line-height: 0.9;
    letter-spacing: -2px;
}

@media (min-width: 768px) {
    .hero-title {
        font-size: 96px;
    }
}

.hero-description {
    font-size: 18px;
    color: var(--text-secondary);
    line-height: 1.75;
    margin-bottom: 40px;
    max-width: 640px;
}

.hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
}

.hero-controls {
    position: absolute;
    bottom: 40px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 12px;
    z-index: 30;
}

.hero-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.3);
    border: none;
    cursor: pointer;
    transition: all 0.3s;
    padding: 0;
}

.hero-dot.active {
    width: 32px;
    background: var(--anime-accent);
}

/* Trending Section - Complete Implementation */
.trending-section {
    padding: 48px 0;
}

.trending-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    margin-bottom: 32px;
}

.trending-title {
    font-size: 32px;
    font-weight: 900;
    color: var(--text-primary);
    margin: 0 0 8px 0;
    padding-right: 16px;
    border-right: 4px solid var(--anime-accent);
}

.trending-subtitle {
    font-size: 14px;
    color: var(--text-muted);
    font-weight: 500;
}

.trending-controls {
    display: flex;
    gap: 8px;
}

.trending-nav-btn {
    width: 40px;
    height: 40px;
    padding: 8px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    color: var(--text-primary);
    cursor: pointer;
    transition: all 0.3s;
    display: flex;
    align-items: center;
    justify-content: center;
}

.trending-nav-btn:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.3);
}

/* Clean anime-grid definition */
.anime-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
    width: 100%;
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 24px;
    align-items: start;
}

/* Trending section - same grid layout */
.trending-section .anime-grid {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 24px !important;
    overflow: visible !important;
    align-items: start !important;
}

.trending-section .anime-card-wrapper {
    width: 100% !important;
    min-width: 0 !important;
}

/* Responsive breakpoints */
@media (min-width: 768px) {
    .anime-grid {
        grid-template-columns: repeat(4, 1fr);
    }
    
    .trending-section .anime-grid {
        grid-template-columns: repeat(4, 1fr) !important;
    }
}

@media (min-width: 1024px) {
    .anime-grid {
        grid-template-columns: repeat(5, 1fr);
    }
    
    .trending-section .anime-grid {
        grid-template-columns: repeat(5, 1fr) !important;
    }
}

.anime-card-wrapper {
    position: relative;
    width: 100%;
    min-width: 0; /* Prevent grid overflow */
    isolation: isolate; /* Create new stacking context */
    contain: layout style paint; /* Prevent layout shift on hover */
}

.anime-card-link {
    display: block;
    text-decoration: none;
    color: inherit;
    width: 100%;
    height: 100%;
    position: relative;
    z-index: 1;
}

.anime-card {
    position: relative;
    width: 100%;
    height: 100%;
    transition: transform 0.3s ease;
}

.anime-card-wrapper:hover .anime-card {
    transform: translateY(-2px);
}

.anime-card-image {
    position: relative;
    aspect-ratio: 2 / 3;
    border-radius: 12px;
    overflow: hidden;
    margin-bottom: 12px;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.05);
    transition: box-shadow 0.3s ease, border-color 0.3s ease, transform 0.3s ease;
    cursor: pointer;
}

.anime-card-wrapper:hover .anime-card-image {
    box-shadow: 0 0 25px rgba(124, 58, 237, 0.4) !important;
    border-color: rgba(124, 58, 237, 0.5) !important;
    transform: translateY(-4px);
}

.anime-card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.5s ease;
    cursor: pointer;
}

.anime-card-wrapper:hover .anime-card-image img {
    transform: scale(1.1) !important;
}

.anime-rating {
    position: absolute;
    top: 8px;
    right: 8px;
    background: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(8px);
    color: var(--text-primary);
    font-size: 12px;
    font-weight: 700;
    padding: 4px 8px;
    border-radius: 6px;
    border: 1px solid var(--border-color);
    display: flex;
    align-items: center;
    gap: 4px;
}

.anime-rating svg {
    color: #FBBF24;
    fill: #FBBF24;
    width: 10px;
    height: 10px;
}

/* Clean single definition for overlay - no duplicates */
.anime-card-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 16px;
    gap: 8px;
    opacity: 0;
    pointer-events: none;
    z-index: 10;
    transition: opacity 0.3s ease;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0.4) 50%, transparent 100%);
}

.anime-card-wrapper:hover .anime-card-overlay {
    opacity: 1 !important;
    pointer-events: none; /* Don't block clicks on the link */
    z-index: 11;
}

/* Main card link - always clickable */
.anime-card-wrapper .anime-card-link {
    position: relative;
    z-index: 1;
    display: block;
    width: 100%;
    height: 100%;
    text-decoration: none;
    color: inherit;
    cursor: pointer;
}

/* When hovering, overlay buttons take priority but link should still work */
.anime-card-wrapper:hover .anime-card-link {
    z-index: 1;
}

/* Make the image clickable */
.anime-card-image {
    cursor: pointer;
    pointer-events: auto;
}

.anime-card-image img {
    cursor: pointer;
    pointer-events: auto;
}

/* Buttons in overlay should work */
.anime-card-overlay .btn-overlay {
    pointer-events: all;
    z-index: 12;
    position: relative;
}

/* Ensure the entire card area is clickable */
.top10-grid .anime-card-link {
    cursor: pointer !important;
}

.top10-grid .anime-card-image {
    cursor: pointer !important;
    pointer-events: auto !important;
}

.top10-grid .anime-card-image img {
    cursor: pointer !important;
    pointer-events: auto !important;
}

.btn-overlay {
    width: 100%;
    padding: 8px;
    border-radius: 8px;
    font-weight: 700;
    font-size: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    text-decoration: none;
    border: none;
    cursor: pointer;
    transition: all 0.3s ease;
    pointer-events: all;
    position: relative;
    z-index: 11;
}

.btn-overlay-primary {
    background: var(--anime-primary) !important;
    color: var(--text-primary) !important;
    box-shadow: 0 4px 12px rgba(124, 58, 237, 0.3);
}

.btn-overlay-primary:hover {
    background: var(--anime-accent) !important;
    transform: translateY(-2px);
}

.btn-overlay-secondary {
    background: rgba(255, 255, 255, 0.2) !important;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    color: var(--text-primary) !important;
    margin-top: 8px;
}

.btn-overlay-secondary:hover {
    background: rgba(255, 255, 255, 0.3) !important;
}

.anime-rating-badge {
    position: absolute;
    top: 8px;
    right: 8px;
    background: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(8px);
    color: var(--text-primary);
    font-size: 12px;
    font-weight: 700;
    padding: 4px 8px;
    border-radius: 6px;
    border: 1px solid var(--border-color);
    display: flex;
    align-items: center;
    gap: 4px;
    z-index: 2;
}

.anime-rating-badge svg {
    color: #FBBF24;
    fill: #FBBF24;
    width: 10px;
    height: 10px;
}

.anime-card-title-link {
    text-decoration: none;
    color: inherit;
    display: block;
    transition: color 0.3s;
}

.anime-card-title-link:hover {
    color: var(--anime-secondary);
}

.anime-card-title {
    font-size: 14px;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: color 0.3s;
    cursor: pointer;
}

.anime-card-title-link:hover .anime-card-title {
    color: var(--anime-secondary) !important;
}

.anime-card-wrapper:hover .anime-card-title-link .anime-card-title {
    color: var(--anime-secondary) !important;
}

.anime-card-meta {
    display: flex;
    justify-content: space-between;
    font-size: 12px;
    color: var(--text-muted);
    font-weight: 500;
    margin-top: 4px;
}

/* Section Subtitle */
.section-subtitle {
    font-size: 14px;
    color: var(--text-muted);
    font-weight: 500;
}

.episodes-timeline {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 24px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.episode-timeline-item {
    display: flex;
    align-items: center;
    gap: 24px;
    padding: 16px;
    background: #161b2e;
    border-radius: 16px;
    border: 1px solid var(--border-color);
    text-decoration: none;
    transition: all 0.3s;
}

.episode-timeline-item:hover {
    border-color: rgba(124, 58, 237, 0.5);
    background: #1a2036;
    transform: translateX(-4px);
}

.episode-time {
    font-family: monospace;
    font-size: 20px;
    font-weight: 700;
    color: var(--anime-secondary);
    width: 80px;
    text-align: center;
    background: rgba(0, 0, 0, 0.3);
    padding: 12px;
    border-radius: 12px;
    border: 1px solid var(--border-color);
}

.episode-thumb {
    width: 96px;
    height: 64px;
    border-radius: 12px;
    overflow: hidden;
    flex-shrink: 0;
}

.episode-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s;
}

.episode-timeline-item:hover .episode-thumb img {
    transform: scale(1.1);
}

.episode-info {
    flex: 1;
}

.episode-name {
    font-size: 18px;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0 0 4px 0;
    transition: color 0.3s;
}

.episode-timeline-item:hover .episode-name {
    color: var(--anime-primary);
}

.episode-meta {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 14px;
    color: var(--text-muted);
}

.episode-play-btn {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--anime-primary);
    color: var(--text-primary);
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    opacity: 0;
    transform: translateX(16px);
    transition: all 0.3s;
    box-shadow: 0 0 15px rgba(124, 58, 237, 0.3);
}

.episode-timeline-item:hover .episode-play-btn {
    opacity: 1;
    transform: translateX(0);
}

/* Auth Views */
.auth-view {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 80px 24px;
    position: relative;
    overflow: hidden;
}

.auth-background {
    position: absolute;
    inset: 0;
    z-index: 0;
}

.auth-glow {
    position: absolute;
    width: 500px;
    height: 500px;
    border-radius: 50%;
    filter: blur(120px);
    opacity: 0.2;
}

.auth-glow-1 {
    top: -10%;
    right: -10%;
    background: var(--anime-primary);
}

.auth-glow-2 {
    bottom: -10%;
    left: -10%;
    background: var(--anime-secondary);
}

.auth-container {
    position: relative;
    z-index: 10;
    background: var(--anime-surface);
    border: 1px solid var(--border-color);
    padding: 48px;
    border-radius: 24px;
    width: 100%;
    max-width: 448px;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5);
    animation: fadeInUp 0.3s ease;
}

@media (min-width: 768px) {
    .auth-container {
        padding: 48px;
    }
}

.auth-header {
    text-align: center;
    margin-bottom: 32px;
}

.auth-title {
    font-size: 32px;
    font-weight: 900;
    color: var(--text-primary);
    margin: 0 0 8px 0;
}

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

.auth-error {
    background: rgba(239, 68, 68, 0.1);
    border: 1px solid rgba(239, 68, 68, 0.3);
    color: #FCA5A5;
    padding: 12px;
    border-radius: 8px;
    margin-bottom: 24px;
    font-size: 14px;
    text-align: center;
}

.auth-success {
    background: rgba(34, 197, 94, 0.1);
    border: 1px solid rgba(34, 197, 94, 0.3);
    color: #86EFAC;
    padding: 24px;
    border-radius: 12px;
    margin-bottom: 24px;
    font-size: 14px;
    text-align: center;
    animation: fadeInUp 0.3s ease;
}

.auth-success svg {
    color: #22C55E;
    margin-bottom: 16px;
}

.auth-form {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.form-group {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.form-group-inline {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
}

.form-label {
    font-size: 12px;
    font-weight: 700;
    color: var(--text-muted);
}

.form-input {
    background: var(--anime-bg);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 12px 16px;
    color: var(--text-primary);
    font-size: 14px;
    outline: none;
    transition: border-color 0.3s;
}

.form-input:focus {
    border-color: var(--anime-primary);
}

.checkbox-label {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    color: var(--text-secondary);
    cursor: pointer;
}

.forgot-password-link {
    font-size: 14px;
    color: var(--anime-primary);
    text-decoration: none;
}

.forgot-password-link:hover {
    text-decoration: underline;
}

.auth-footer {
    margin-top: 24px;
    text-align: center;
    font-size: 14px;
    color: var(--text-muted);
}

.auth-footer a {
    color: var(--anime-accent);
    font-weight: 700;
    text-decoration: none;
}

.auth-footer a:hover {
    text-decoration: underline;
}

/* Dashboard View */
.dashboard-view {
    padding: 80px 0;
    max-width: 1400px;
    margin: 0 auto;
    padding-left: 24px;
    padding-right: 24px;
}

.dashboard-header {
    background: var(--anime-surface);
    border: 1px solid var(--border-color);
    border-radius: 24px;
    padding: 32px;
    margin-bottom: 32px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 32px;
    position: relative;
    overflow: hidden;
}

@media (min-width: 768px) {
    .dashboard-header {
        flex-direction: row;
        align-items: flex-end;
    }
}

.dashboard-header::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 128px;
    background: linear-gradient(to right, var(--anime-primary), var(--anime-secondary));
    opacity: 0.2;
    pointer-events: none;
    z-index: 0;
}

.header-actions {
    position: relative;
    z-index: 10;
}

.header-actions a,
.header-actions button {
    position: relative;
    z-index: 10;
}

.profile-avatar {
    position: relative;
    z-index: 10;
    width: 128px;
    height: 128px;
    border-radius: 50%;
    border: 4px solid var(--anime-bg);
    overflow: hidden;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5);
}

.profile-info {
    position: relative;
    z-index: 10;
    text-align: center;
    flex: 1;
}

@media (min-width: 768px) {
    .profile-info {
        text-align: right;
    }
}

.profile-name {
    font-size: 32px;
    font-weight: 900;
    color: var(--text-primary);
    margin: 0 0 8px 0;
}

.profile-meta {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
    font-size: 14px;
    color: var(--text-muted);
}

@media (min-width: 768px) {
    .profile-meta {
        justify-content: flex-start;
    }
}

.profile-actions {
    position: relative;
    z-index: 10;
    display: flex;
    gap: 12px;
}

.dashboard-stats {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
    margin-bottom: 48px;
}

@media (min-width: 768px) {
    .dashboard-stats {
        grid-template-columns: repeat(4, 1fr);
    }
}

.stat-card {
    background: var(--anime-surface);
    padding: 24px;
    border-radius: 16px;
    border: 1px solid var(--border-color);
    text-align: center;
}

.stat-value {
    font-size: 32px;
    font-weight: 900;
    margin-bottom: 4px;
}

.stat-card:nth-child(1) .stat-value {
    color: var(--anime-primary);
}

.stat-card:nth-child(2) .stat-value {
    color: var(--anime-secondary);
}

.stat-card:nth-child(3) .stat-value {
    color: #10B981;
}

.stat-card:nth-child(4) .stat-value {
    color: var(--anime-accent);
}

.stat-label {
    font-size: 12px;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

.dashboard-tabs {
    display: flex;
    gap: 32px;
    border-bottom: 1px solid var(--border-color);
    margin-bottom: 32px;
}

.dashboard-tabs .tab-btn {
    background: none;
    border: none;
    color: var(--text-muted);
    font-weight: 700;
    font-size: 14px;
    padding-bottom: 16px;
    cursor: pointer;
    border-bottom: 2px solid transparent;
    transition: all 0.3s;
}

.dashboard-tabs .tab-btn:hover {
    color: var(--text-primary);
}

.dashboard-tabs .tab-btn.active {
    color: var(--anime-primary);
    border-bottom-color: var(--anime-primary);
}

.dashboard-content {
    min-height: 400px;
}

.tab-pane {
    display: none;
}

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

.empty-state {
    text-align: center;
    color: var(--text-muted);
    padding: 80px 24px;
    font-size: 18px;
}

.empty-state-icon {
    width: 80px;
    height: 80px;
    margin: 0 auto 24px;
    background: rgba(124, 58, 237, 0.1);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--anime-primary);
}

.empty-state-icon-red {
    background: rgba(239, 68, 68, 0.1);
    color: #ef4444;
}

.empty-state-icon-blue {
    background: rgba(59, 130, 246, 0.1);
    color: #3b82f6;
}

.empty-state-icon-green {
    background: rgba(16, 185, 129, 0.1);
    color: #10b981;
}

.empty-state h3 {
    font-size: 20px;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0 0 8px 0;
}

.empty-state p {
    font-size: 14px;
    color: var(--text-muted);
    margin: 0 0 24px 0;
}

/* Dashboard Anime Grid */
.dashboard-anime-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
}

@media (min-width: 640px) {
    .dashboard-anime-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (min-width: 768px) {
    .dashboard-anime-grid {
        grid-template-columns: repeat(4, 1fr);
    }
}

@media (min-width: 1024px) {
    .dashboard-anime-grid {
        grid-template-columns: repeat(5, 1fr);
    }
}

@media (min-width: 1280px) {
    .dashboard-anime-grid {
        grid-template-columns: repeat(6, 1fr);
    }
}

.dashboard-anime-card {
    position: relative;
    background: var(--anime-surface);
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid var(--border-color);
    transition: all 0.3s ease;
}

.dashboard-anime-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
    border-color: rgba(124, 58, 237, 0.3);
}

.dashboard-card-link {
    display: block;
    text-decoration: none;
    color: inherit;
}

.dashboard-card-poster {
    position: relative;
    aspect-ratio: 2/3;
    overflow: hidden;
}

.dashboard-card-poster img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.dashboard-anime-card:hover .dashboard-card-poster img {
    transform: scale(1.05);
}

.dashboard-card-rating {
    position: absolute;
    top: 8px;
    left: 8px;
    background: rgba(0, 0, 0, 0.8);
    backdrop-filter: blur(4px);
    padding: 4px 8px;
    border-radius: 6px;
    font-size: 11px;
    font-weight: 700;
    color: #fbbf24;
    display: flex;
    align-items: center;
    gap: 4px;
    z-index: 2;
}

.dashboard-card-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.8) 0%, transparent 50%);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.dashboard-anime-card:hover .dashboard-card-overlay {
    opacity: 1;
}

.dashboard-card-overlay svg {
    width: 48px;
    height: 48px;
    color: white;
    filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.3));
}

.dashboard-card-info {
    padding: 12px;
}

.dashboard-card-title {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0 0 4px 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    line-height: 1.3;
}

.dashboard-card-episodes {
    font-size: 11px;
    color: var(--text-muted);
}

/* Remove Button */
.dashboard-card-remove {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 28px;
    height: 28px;
    background: rgba(239, 68, 68, 0.9);
    border: none;
    border-radius: 50%;
    color: white;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transform: scale(0.8);
    transition: all 0.2s ease;
    z-index: 10;
}

.dashboard-anime-card:hover .dashboard-card-remove {
    opacity: 1;
    transform: scale(1);
}

.dashboard-card-remove:hover {
    background: #dc2626;
    transform: scale(1.1) !important;
}

.dashboard-card-remove-red {
    background: rgba(239, 68, 68, 0.9);
}

/* Continue Watching Badge */
.continue-badge {
    position: absolute;
    bottom: 40px;
    left: 8px;
    background: var(--anime-primary);
    padding: 4px 10px;
    border-radius: 6px;
    font-size: 11px;
    font-weight: 700;
    color: white;
    z-index: 2;
}

.continue-progress-bar {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: rgba(255, 255, 255, 0.2);
}

.continue-progress-fill {
    height: 100%;
    background: var(--anime-primary);
    transition: width 0.3s ease;
}

/* Dashboard Tabs Enhanced */
.dashboard-tabs {
    display: flex;
    gap: 8px;
    border-bottom: 1px solid var(--border-color);
    margin-bottom: 32px;
    overflow-x: auto;
    padding-bottom: 0;
}

.dashboard-tabs .tab-btn {
    background: none;
    border: none;
    color: var(--text-muted);
    font-weight: 600;
    font-size: 14px;
    padding: 12px 20px;
    cursor: pointer;
    border-bottom: 3px solid transparent;
    transition: all 0.3s;
    display: flex;
    align-items: center;
    gap: 8px;
    white-space: nowrap;
}

.dashboard-tabs .tab-btn svg {
    flex-shrink: 0;
}

.dashboard-tabs .tab-btn:hover {
    color: var(--text-primary);
    background: rgba(124, 58, 237, 0.05);
}

.dashboard-tabs .tab-btn.active {
    color: var(--anime-primary);
    border-bottom-color: var(--anime-primary);
    background: rgba(124, 58, 237, 0.1);
}

.tab-count {
    background: rgba(124, 58, 237, 0.2);
    color: var(--anime-primary);
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 11px;
    font-weight: 700;
}

.dashboard-tabs .tab-btn.active .tab-count {
    background: var(--anime-primary);
    color: white;
}

/* Stat Cards Enhanced */
.stat-card {
    background: var(--anime-surface);
    padding: 20px;
    border-radius: 16px;
    border: 1px solid var(--border-color);
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}

.stat-icon {
    width: 40px;
    height: 40px;
    background: rgba(124, 58, 237, 0.1);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--anime-primary);
}

.stat-icon-red {
    background: rgba(239, 68, 68, 0.1);
    color: #ef4444;
}

.stat-icon-green {
    background: rgba(16, 185, 129, 0.1);
    color: #10b981;
}

.stat-icon-blue {
    background: rgba(59, 130, 246, 0.1);
    color: #3b82f6;
}

.stat-value {
    font-size: 28px;
    font-weight: 800;
    color: var(--text-primary);
    margin: 0;
}

.stat-label {
    font-size: 12px;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-weight: 600;
}

/* Footer */
.anime-footer {
    background: #080a12;
    color: var(--text-muted);
    padding: 80px 0 32px;
    border-top: 1px solid var(--border-color);
    position: relative;
    overflow: hidden;
}

.footer-glow {
    position: absolute;
    top: 0;
    left: 25%;
    width: 384px;
    height: 384px;
    background: var(--anime-primary);
    border-radius: 50%;
    filter: blur(128px);
    opacity: 0.05;
    pointer-events: none;
}

.footer-container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 24px;
    position: relative;
    z-index: 0;
}

.footer-stats {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
    margin-bottom: 64px;
    padding-bottom: 64px;
    border-bottom: 1px solid var(--border-color);
}

@media (min-width: 768px) {
    .footer-stats {
        grid-template-columns: repeat(4, 1fr);
    }
}

.stat-card {
    background: #0f121e;
    border: 1px solid var(--border-color);
    border-radius: 16px;
    padding: 24px;
    text-align: center;
    transition: all 0.3s;
}

.stat-card:hover {
    border-color: rgba(124, 58, 237, 0.3);
    transform: translateY(-4px);
}

.stat-label {
    font-size: 14px;
    font-weight: 700;
    color: var(--text-muted);
    margin-bottom: 8px;
    transition: color 0.3s;
}

.stat-card:hover .stat-label {
    color: var(--anime-secondary);
}

.stat-value {
    font-size: 32px;
    font-weight: 900;
    color: var(--text-primary);
    font-family: monospace;
    transition: color 0.3s;
}

.stat-card:hover .stat-value {
    color: var(--anime-primary);
}

.footer-content {
    display: grid;
    grid-template-columns: 1fr;
    gap: 48px;
    margin-bottom: 64px;
    text-align: center;
}

@media (min-width: 768px) {
    .footer-content {
        grid-template-columns: repeat(2, 1fr);
        text-align: right;
    }
}

@media (min-width: 1024px) {
    .footer-content {
        grid-template-columns: repeat(4, 1fr);
    }
}

.footer-column {
    display: flex;
    flex-direction: column;
}

.footer-title {
    font-size: 18px;
    font-weight: 900;
    color: var(--text-primary);
    margin: 0 0 24px 0;
    padding-right: 12px;
    border-right: 4px solid var(--anime-primary);
}

.footer-links {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.footer-links li {
    margin: 0;
}

.footer-links a {
    display: block;
    padding: 8px 16px;
    background: #0f121e;
    border-radius: 8px;
    border: 1px solid var(--border-color);
    color: var(--text-secondary);
    font-size: 14px;
    font-weight: 700;
    text-decoration: none;
    transition: all 0.3s;
}

.footer-links a:hover {
    background: var(--anime-primary);
    color: var(--text-primary);
    border-color: rgba(124, 58, 237, 0.5);
}

.footer-brand {
    align-items: center;
}

@media (min-width: 768px) {
    .footer-brand {
        align-items: flex-start;
    }
}

.footer-logo {
    font-size: 32px;
    font-weight: 900;
    font-style: italic;
    color: var(--text-primary);
    margin-bottom: 16px;
}

.footer-description {
    font-size: 14px;
    line-height: 1.75;
    color: var(--text-muted);
    margin-bottom: 32px;
    max-width: 320px;
}

.social-links {
    display: flex;
    gap: 16px;
    margin-bottom: 32px;
}

.social-link {
    width: 40px;
    height: 40px;
    border-radius: 8px;
    background: #0f121e;
    border: 1px solid var(--border-color);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-muted);
    text-decoration: none;
    transition: all 0.3s;
}

.social-link:hover {
    background: #1DA1F2;
    color: var(--text-primary);
    border-color: #1DA1F2;
}

.footer-contact {
    display: flex;
    flex-direction: column;
    gap: 8px;
    font-size: 14px;
    font-weight: 500;
}

.contact-item {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--text-muted);
    transition: color 0.3s;
    cursor: pointer;
}

.contact-item:hover {
    color: var(--text-primary);
}

.contact-item svg {
    color: var(--anime-primary);
}

.footer-bottom {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    padding-top: 32px;
    border-top: 1px solid var(--border-color);
    font-size: 12px;
    font-weight: 700;
    color: var(--text-muted);
}

@media (min-width: 768px) {
    .footer-bottom {
        flex-direction: row;
    }
}

.footer-links-bottom {
    display: flex;
    gap: 24px;
}

.footer-links-bottom a {
    color: var(--text-muted);
    text-decoration: none;
    transition: color 0.3s;
}

.footer-links-bottom a:hover {
    color: var(--text-primary);
}

/* Popups */
.anime-popup {
    position: fixed;
    inset: 0;
    z-index: 100;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
}

.popup-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.8);
    backdrop-filter: blur(4px);
}

.popup-content {
    position: relative;
    z-index: 10;
    background: var(--anime-surface);
    border: 1px solid rgba(124, 58, 237, 0.3);
    border-radius: 16px;
    width: 100%;
    max-width: 448px;
    overflow: hidden;
    box-shadow: 0 0 50px rgba(124, 58, 237, 0.3);
    animation: fadeInUp 0.3s ease;
}

.popup-close {
    position: absolute;
    top: 16px;
    left: 16px;
    z-index: 20;
    background: rgba(0, 0, 0, 0.3);
    border: none;
    color: rgba(255, 255, 255, 0.5);
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 20px;
    transition: all 0.3s;
}

.popup-close:hover {
    color: var(--text-primary);
    background: rgba(0, 0, 0, 0.5);
}

.popup-image {
    position: relative;
    height: 160px;
    overflow: hidden;
}

.popup-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.popup-image::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, var(--anime-surface), transparent);
}

.popup-body {
    padding: 24px;
    text-align: center;
}

.popup-body h3 {
    font-size: 24px;
    font-weight: 900;
    color: var(--text-primary);
    font-style: italic;
    margin: 0 0 24px 0;
}

.popup-body p {
    color: var(--text-secondary);
    font-size: 14px;
    line-height: 1.75;
    margin-bottom: 24px;
}

.popup-footer {
    margin-top: 16px;
    font-size: 12px;
    color: var(--text-muted);
}

.popup-footer a {
    color: var(--anime-secondary);
    font-weight: 700;
    text-decoration: none;
}

.popup-footer a:hover {
    text-decoration: underline;
}

.anime-cookies-popup {
    position: fixed;
    bottom: 16px;
    right: 16px;
    z-index: 90;
    max-width: 384px;
    animation: fadeInUp 0.3s ease;
}

.cookies-content {
    background: var(--anime-surface);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 16px;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5);
    display: flex;
    flex-direction: column;
    gap: 12px;
    position: relative;
}

.cookies-icon {
    background: rgba(251, 191, 36, 0.1);
    padding: 8px;
    border-radius: 8px;
    color: var(--anime-secondary);
    font-size: 24px;
    width: fit-content;
}

.cookies-content h4 {
    font-size: 14px;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0 0 4px 0;
}

.cookies-content p {
    font-size: 12px;
    color: var(--text-secondary);
    line-height: 1.75;
    margin: 0;
}

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

/* News View */
.news-view {
    padding: 80px 0;
    max-width: 1400px;
    margin: 0 auto;
    padding-left: 24px;
    padding-right: 24px;
}

.page-title {
    font-size: 32px;
    font-weight: 900;
    color: var(--text-primary);
    margin: 0 0 32px 0;
    padding-right: 16px;
    border-right: 4px solid var(--anime-primary);
}

.featured-news {
    display: block;
    margin-bottom: 48px;
    text-decoration: none;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5);
}

.featured-image {
    position: relative;
    height: 400px;
    background-size: cover;
    background-position: center;
}

.featured-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.95) 0%, rgba(0, 0, 0, 0.7) 40%, transparent 100%);
}

.featured-content {
    position: absolute;
    bottom: 0;
    right: 0;
    left: 0;
    padding: 48px;
    max-width: 768px;
}

.featured-meta {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 16px;
}

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

.featured-tag {
    background: var(--anime-primary);
    color: var(--text-primary);
    padding: 4px 12px;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    display: inline-block;
    margin-bottom: 16px;
}

.featured-title {
    font-size: 48px;
    font-weight: 900;
    color: var(--text-primary);
    margin: 0 0 16px 0;
    line-height: 1.2;
    transition: color 0.3s;
}

.featured-news:hover .featured-title {
    color: var(--anime-accent);
}

.featured-excerpt {
    color: var(--text-secondary);
    font-size: 18px;
    line-height: 1.75;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.news-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 24px;
}

@media (min-width: 640px) {
    .news-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 1024px) {
    .news-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

.news-card {
    text-decoration: none;
    color: inherit;
    background: var(--card-bg);
    border-radius: 16px;
    border: 1px solid var(--border-color);
    overflow: hidden;
    transition: all 0.3s ease;
}

.news-card:hover {
    transform: translateY(-4px);
    border-color: var(--anime-primary);
    box-shadow: 0 12px 40px rgba(124, 58, 237, 0.15);
}

.news-image {
    position: relative;
    aspect-ratio: 16 / 10;
    overflow: hidden;
}

.news-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.7s;
}

.news-card:hover .news-image img {
    transform: scale(1.1);
}

.news-badge {
    position: absolute;
    top: 12px;
    right: 12px;
    background: var(--anime-primary);
    backdrop-filter: blur(4px);
    padding: 6px 12px;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 700;
    color: white;
    text-transform: uppercase;
}

.news-title {
    font-size: 16px;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0 0 10px 0;
    padding: 16px 16px 0;
    line-height: 1.4;
    transition: color 0.3s;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.news-card:hover .news-title {
    color: var(--anime-primary);
}

.news-meta {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    color: var(--text-muted);
    padding: 0 16px 16px;
    flex-wrap: wrap;
}

/* Reviews View */
.reviews-view {
    padding: 80px 0;
    max-width: 1400px;
    margin: 0 auto;
    padding-left: 24px;
    padding-right: 24px;
}

.reviews-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 32px;
}

@media (min-width: 768px) {
    .reviews-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 1024px) {
    .reviews-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

.review-card {
    background: var(--anime-surface);
    border-radius: 16px;
    overflow: hidden;
    border: 1px solid var(--border-color);
    text-decoration: none;
    color: inherit;
    transition: all 0.3s;
}

.review-card:hover {
    border-color: rgba(124, 58, 237, 0.5);
    transform: translateY(-4px);
}

.review-image {
    position: relative;
    aspect-ratio: 16 / 9;
    overflow: hidden;
}

.review-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.7s;
}

.review-card:hover .review-image img {
    transform: scale(1.1);
}

.review-rating-badge {
    position: absolute;
    top: 16px;
    left: 16px;
    background: var(--anime-primary);
    color: var(--text-primary);
    font-weight: 900;
    font-size: 20px;
    padding: 6px 12px;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(124, 58, 237, 0.3);
    transform: rotate(3deg);
    transition: transform 0.3s;
}

.review-card:hover .review-rating-badge {
    transform: rotate(0deg);
}

.review-content {
    padding: 24px;
}

.review-author {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
    font-size: 12px;
    color: var(--text-muted);
}

.author-avatar-small {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    overflow: hidden;
}

.review-title {
    font-size: 20px;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0 0 12px 0;
    transition: color 0.3s;
}

.review-card:hover .review-title {
    color: var(--anime-primary);
}

.review-excerpt {
    color: var(--text-secondary);
    font-size: 14px;
    line-height: 1.75;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin-bottom: 16px;
}

.review-link {
    color: var(--anime-secondary);
    font-size: 14px;
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 4px;
    transition: all 0.3s;
}

.review-card:hover .review-link {
    text-decoration: underline;
}

/* ========================================
   TOP 100 PAGE - PREMIUM DESIGN
   ======================================== */
.top100-page {
    padding: 40px 0 80px;
    min-height: calc(100vh - 80px);
}

/* Hero Section */
.top100-hero {
    text-align: center;
    padding: 60px 0 40px;
    position: relative;
}

.top100-hero::before {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 400px;
    height: 400px;
    background: radial-gradient(circle, rgba(124, 58, 237, 0.15) 0%, transparent 70%);
    pointer-events: none;
}

.top100-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    background: linear-gradient(135deg, rgba(124, 58, 237, 0.2), rgba(236, 72, 153, 0.2));
    border: 1px solid rgba(124, 58, 237, 0.3);
    border-radius: 20px;
    color: var(--anime-primary);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 1px;
    margin-bottom: 16px;
}

.top100-badge svg {
    color: #fbbf24;
}

.top100-title {
    font-size: 2.5rem;
    font-weight: 800;
    color: #fff;
    margin: 0 0 12px 0;
}

.top100-subtitle {
    font-size: 1rem;
    color: #9ca3af;
    margin: 0;
}

/* Filters */
.top100-filters {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-bottom: 40px;
}

@media (min-width: 768px) {
    .top100-filters {
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
    }
}

.filter-tabs {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.filter-tab {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 10px 18px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 10px;
    color: #9ca3af;
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.2s ease;
}

.filter-tab:hover {
    background: rgba(255, 255, 255, 0.06);
    color: #fff;
}

.filter-tab.active {
    background: var(--anime-primary);
    border-color: var(--anime-primary);
    color: #fff;
}

.filter-type {
    display: flex;
    gap: 4px;
    background: rgba(255, 255, 255, 0.03);
    border-radius: 10px;
    padding: 4px;
}

.type-btn {
    padding: 8px 16px;
    background: transparent;
    border-radius: 8px;
    color: #9ca3af;
    font-size: 13px;
    font-weight: 500;
    text-decoration: none;
    transition: all 0.2s ease;
}

.type-btn:hover {
    color: #fff;
}

.type-btn.active {
    background: rgba(255, 255, 255, 0.1);
    color: #fff;
}

/* Top 3 Featured Cards */
.top3-featured {
    display: grid;
    grid-template-columns: 1fr;
    gap: 20px;
    margin-bottom: 48px;
}

@media (min-width: 768px) {
    .top3-featured {
        grid-template-columns: 1fr 1.3fr 1fr;
        align-items: end;
    }
}

.top3-card {
    position: relative;
    display: flex;
    flex-direction: column;
    background: #1a1d2e;
    border-radius: 20px;
    overflow: hidden;
    text-decoration: none;
    transition: all 0.3s ease;
}

.top3-card:hover {
    transform: translateY(-8px);
}

.top3-rank-1 {
    order: 2;
}

@media (min-width: 768px) {
    .top3-rank-1 {
        transform: scale(1.05);
    }
    .top3-rank-1:hover {
        transform: scale(1.05) translateY(-8px);
    }
}

.top3-rank-2 {
    order: 1;
}

.top3-rank-3 {
    order: 3;
}

.top3-rank-badge {
    position: absolute;
    top: 16px;
    right: 16px;
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    font-weight: 900;
    border-radius: 12px;
    z-index: 10;
}

.top3-rank-1 .top3-rank-badge {
    background: linear-gradient(135deg, #fbbf24, #f59e0b);
    color: #78350f;
    box-shadow: 0 8px 24px rgba(251, 191, 36, 0.4);
}

.top3-rank-2 .top3-rank-badge {
    background: linear-gradient(135deg, #d1d5db, #9ca3af);
    color: #374151;
    box-shadow: 0 8px 24px rgba(156, 163, 175, 0.3);
}

.top3-rank-3 .top3-rank-badge {
    background: linear-gradient(135deg, #d97706, #b45309);
    color: #fff;
    box-shadow: 0 8px 24px rgba(217, 119, 6, 0.3);
}

.top3-poster {
    position: relative;
    aspect-ratio: 3/4;
    overflow: hidden;
}

.top3-poster img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.top3-card:hover .top3-poster img {
    transform: scale(1.1);
}

.top3-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, #1a1d2e 0%, transparent 50%);
}

.top3-info {
    padding: 20px;
    position: relative;
    margin-top: -60px;
}

.top3-title {
    font-size: 16px;
    font-weight: 700;
    color: #fff;
    margin: 0 0 8px 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.top3-meta {
    display: flex;
    align-items: center;
    gap: 12px;
}

.top3-rating {
    display: flex;
    align-items: center;
    gap: 4px;
    color: #fbbf24;
    font-size: 14px;
    font-weight: 700;
}

.top3-episodes {
    color: #6b7280;
    font-size: 13px;
}

/* Rankings List */
.top100-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.top100-item {
    display: grid;
    grid-template-columns: 50px 60px 1fr auto auto;
    gap: 16px;
    align-items: center;
    padding: 16px;
    background: rgba(26, 29, 46, 0.5);
    border: 1px solid rgba(255, 255, 255, 0.04);
    border-radius: 12px;
    text-decoration: none;
    transition: all 0.2s ease;
}

.top100-item:hover {
    background: rgba(124, 58, 237, 0.1);
    border-color: rgba(124, 58, 237, 0.2);
}

@media (max-width: 768px) {
    .top100-item {
        grid-template-columns: 40px 50px 1fr auto;
    }
    .top100-action {
        display: none;
    }
}

.top100-rank {
    font-size: 18px;
    font-weight: 800;
    color: #4b5563;
    text-align: center;
}

.top100-rank.rank-gold {
    color: #fbbf24;
}

.top100-rank.rank-silver {
    color: #9ca3af;
}

.top100-rank.rank-bronze {
    color: #d97706;
}

.top100-poster {
    width: 60px;
    height: 80px;
    border-radius: 8px;
    overflow: hidden;
    flex-shrink: 0;
}

@media (max-width: 768px) {
    .top100-poster {
        width: 50px;
        height: 70px;
    }
}

.top100-poster img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.top100-details {
    min-width: 0;
}

.top100-name {
    font-size: 15px;
    font-weight: 600;
    color: #fff;
    margin: 0 0 6px 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.top100-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.meta-item {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 12px;
    color: #6b7280;
}

.meta-item svg {
    opacity: 0.6;
}

.top100-score {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 6px;
}

.score-value {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 16px;
    font-weight: 700;
    color: #fbbf24;
}

.score-value svg {
    width: 16px;
    height: 16px;
}

.status-badge {
    padding: 4px 10px;
    background: rgba(16, 185, 129, 0.15);
    color: #10b981;
    font-size: 10px;
    font-weight: 700;
    border-radius: 6px;
    text-transform: uppercase;
}

.status-badge.status-הושלם {
    background: rgba(16, 185, 129, 0.15);
    color: #10b981;
}

.status-badge.status-מתורגם {
    background: rgba(59, 130, 246, 0.15);
    color: #3b82f6;
}

.status-badge.status-בהמתנה {
    background: rgba(251, 191, 36, 0.15);
    color: #fbbf24;
}

.top100-action {
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--anime-primary);
    border-radius: 10px;
    color: #fff;
    opacity: 0;
    transform: translateX(10px);
    transition: all 0.2s ease;
}

.top100-item:hover .top100-action {
    opacity: 1;
    transform: translateX(0);
}

/* Footer */
.top100-footer {
    display: flex;
    justify-content: center;
    margin-top: 48px;
}

.back-to-top-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 24px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 10px;
    color: #9ca3af;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
}

.back-to-top-btn:hover {
    background: rgba(255, 255, 255, 0.1);
    color: #fff;
}

/* Post View */
.post-view {
    min-height: 100vh;
    background: var(--anime-bg);
}

.post-header {
    position: relative;
   
    width: 100%;
    background-size: cover;
    background-position: center;
}

.post-header-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, var(--anime-bg), rgba(11, 15, 26, 0.5), transparent);
}

.post-header-content {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    padding: 24px;
}

@media (min-width: 768px) {
    .post-header-content {
        padding: 80px;
    }
}

.post-header-content .container {
    max-width: 896px;
    margin: 0 auto;
}

.post-category {
    background: var(--anime-primary);
    color: var(--text-primary);
    padding: 4px 12px;
    border-radius: 4px;
    font-size: 12px;
    font-weight: 700;
    display: inline-block;
    margin-bottom: 16px;
}

.post-title {
    font-size: 48px;
    font-weight: 900;
    color: var(--text-primary);
    margin: 0 0 24px 0;
    line-height: 1.2;
    text-shadow: 0 2px 20px rgba(0, 0, 0, 0.5);
}

@media (min-width: 768px) {
    .post-title {
        font-size: 64px;
    }
}

.post-meta {
    display: flex;
    align-items: center;
    gap: 16px;
    font-size: 14px;
    color: var(--text-secondary);
}

.post-author {
    display: flex;
    align-items: center;
    gap: 8px;
}

.post-content {
    max-width: 896px;
    margin: 48px auto;
    padding: 0 24px;
}

.post-body {
    color: var(--text-secondary);
    font-size: 18px;
    line-height: 1.75;
}

.post-body p {
    margin-bottom: 24px;
}

.post-body h3 {
    font-size: 24px;
    font-weight: 700;
    color: var(--text-primary);
    margin: 40px 0 16px;
}

.post-body ul {
    padding-right: 24px;
    margin-bottom: 32px;
}

.post-body li {
    margin-bottom: 8px;
}

.post-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 48px;
    padding-top: 32px;
    border-top: 1px solid var(--border-color);
}

.tag-link {
    background: rgba(255, 255, 255, 0.05);
    color: var(--text-muted);
    padding: 6px 12px;
    border-radius: 9999px;
    font-size: 14px;
    text-decoration: none;
    transition: all 0.3s;
}

.tag-link:hover {
    background: rgba(255, 255, 255, 0.1);
    color: var(--text-primary);
}

.post-comments {
    margin-top: 64px;
    background: var(--anime-surface);
    border-radius: 16px;
    padding: 32px;
    border: 1px solid var(--border-color);
}

.no-comments,
.no-reviews {
    text-align: center;
    color: var(--text-muted);
    padding: 40px;
}

/* Responsive adjustments */
@media (max-width: 767px) {
    .anime-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 16px;
    }
    
    .series-title {
        font-size: 32px;
    }
    
    .hero-title {
        font-size: 48px;
    }
    
    .table-header,
    .table-row {
        grid-template-columns: 1fr;
        gap: 8px;
    }
    
    .table-col-rank {
        text-align: right;
    }
    
    .table-col-title {
        flex-direction: column;
        align-items: flex-start;
    }
}

/* Continue Watching Section - Complete Implementation */
.continue-watching-section {
    position: relative;
    z-index: 20;
    margin-top: 28px;
    padding-bottom: 48px;
    width: 100%;
    overflow: hidden;
}

@media (max-width: 767px) {
    .continue-watching-section {
        margin-top: 20px;
        padding-bottom: 32px;
    }
}

.continue-watching-title {
    font-size: 18px;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0 0 16px 0;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0;
    width: 100%;
    box-sizing: border-box;
}

@media (max-width: 767px) {
    .continue-watching-title {
        font-size: 16px;
        margin: 0 0 12px 0;
        padding: 0;
    }
}

.continue-watching-title svg {
    color: var(--anime-secondary);
}

.continue-watching-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 20px;
    width: 100%;
    box-sizing: border-box;
}

@media (max-width: 767px) {
    .continue-watching-grid {
        gap: 16px;
    }
}

@media (min-width: 640px) {
    .continue-watching-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 900px) {
    .continue-watching-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* Hidden items (for load more) */
.continue-watching-card.cw-hidden {
    display: none;
}

/* Load More Button */
.continue-watching-load-more {
    display: flex;
    justify-content: center;
    margin-top: 24px;
}

.continue-watching-load-more .btn-load-more {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 28px;
    background: rgba(124, 58, 237, 0.15);
    border: 1px solid rgba(124, 58, 237, 0.3);
    border-radius: 12px;
    color: var(--anime-primary);
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
}

.continue-watching-load-more .btn-load-more:hover {
    background: var(--anime-primary);
    color: white;
    border-color: var(--anime-primary);
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(124, 58, 237, 0.3);
}

.continue-watching-load-more .btn-load-more svg {
    transition: transform 0.3s ease;
}

.continue-watching-load-more .btn-load-more:hover svg {
    transform: translateY(2px);
}

/* Continue Watching Card with Remove Button */
.continue-watching-card {
    position: relative;
    width: 100%;
    box-sizing: border-box;
    overflow: hidden;
}

@media (max-width: 767px) {
    .continue-watching-card {
        max-width: 100%;
    }
}

.continue-watching-link {
    display: flex;
    gap: 16px;
    text-decoration: none;
    color: inherit;
    width: 100%;
    box-sizing: border-box;
    min-width: 0;
}

@media (max-width: 767px) {
    .continue-watching-link {
        gap: 12px;
    }
}

/* Remove Button */
.cw-remove-btn {
    position: absolute;
    top: 8px;
    left: 8px;
    width: 28px;
    height: 28px;
    background: rgba(239, 68, 68, 0.9);
    border: none;
    border-radius: 50%;
    color: white;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transform: scale(0.8);
    transition: all 0.2s ease;
    z-index: 10;
}

.continue-watching-card:hover .cw-remove-btn {
    opacity: 1;
    transform: scale(1);
}

.cw-remove-btn:hover {
    background: #dc2626;
    transform: scale(1.1) !important;
}

button.hero-pagination-dot,
button.cw-remove-btn,
button.notification-btn,
button.share-btn,
button.legal-popup-close,
button.btn-list-action,
button.btn-list-action.btn-list-delete,
button.btn-remove-from-list,
button.btn-add-to-list,
button.btn-follow-mini,
button.btn-send,
button.modal-close,
button.action-btn-circle,
button.timeline-icon {
    padding: 0 !important;
}

/* ========================================
   BLOG SINGLE PAGE STYLES
   ======================================== */

.blog-single-view {
    background: var(--anime-bg);
    min-height: 100vh;
}

/* Blog Hero */
.blog-hero {
    position: relative;
    height: 450px;
    background-size: cover;
    background-position: center;
    display: flex;
    align-items: flex-end;
}

.blog-hero-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, var(--anime-bg) 0%, transparent 60%, rgba(11, 15, 26, 0.5) 100%);
}

.blog-hero-content {
    position: relative;
    z-index: 2;
    padding: 40px;
    max-width: 900px;
}

.blog-category-badge {
    display: inline-block;
    background: var(--anime-primary);
    color: white;
    padding: 6px 14px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
    margin-bottom: 16px;
}

.blog-title {
    font-size: 2.5rem;
    font-weight: 700;
    color: white;
    margin-bottom: 16px;
    line-height: 1.3;
}

.blog-meta {
    display: flex;
    align-items: center;
    gap: 12px;
    color: var(--text-secondary);
    font-size: 14px;
    flex-wrap: wrap;
}

.blog-author {
    display: flex;
    align-items: center;
    gap: 8px;
}

.author-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    object-fit: cover;
}

.blog-separator {
    color: var(--text-muted);
}

.blog-views {
    display: flex;
    align-items: center;
    gap: 6px;
}

.blog-views svg {
    opacity: 0.7;
}

/* Blog Content Wrapper */
.blog-content-wrapper {
    display: grid;
    grid-template-columns: 1fr 320px;
    gap: 40px;
    max-width: 1400px;
    margin: 0 auto;
    padding: 40px;
}

@media (max-width: 1024px) {
    .blog-content-wrapper {
        grid-template-columns: 1fr;
        padding: 20px;
    }
}

/* Blog Main Content */
.blog-main-content {
    background: var(--card-bg);
    border-radius: 16px;
    padding: 32px;
    border: 1px solid var(--border-color);
}

/* Share Buttons */
.blog-share-buttons {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 24px;
    padding-bottom: 24px;
    border-bottom: 1px solid var(--border-color);
}

.blog-share-buttons span {
    color: var(--text-secondary);
    font-size: 14px;
}

.share-btn {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid var(--border-color);
    color: var(--text-secondary);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
}

.share-btn:hover {
    background: var(--anime-primary);
    color: white;
    border-color: var(--anime-primary);
    transform: translateY(-2px);
}

/* Blog Article */
.blog-article {
    color: var(--text-secondary);
    font-size: 17px;
    line-height: 1.8;
}

.blog-article h1,
.blog-article h2,
.blog-article h3,
.blog-article h4,
.blog-article h5,
.blog-article h6 {
    color: var(--text-primary);
    margin: 32px 0 16px;
    line-height: 1.4;
}

.blog-article h2 {
    font-size: 1.75rem;
}

.blog-article h3 {
    font-size: 1.5rem;
}

.blog-article p {
    margin-bottom: 20px;
}

.blog-article img {
    max-width: 100%;
    height: auto;
    border-radius: 12px;
    margin: 24px 0;
}

.blog-article a {
    color: var(--anime-primary);
    text-decoration: none;
}

.blog-article a:hover {
    text-decoration: underline;
}

.blog-article blockquote {
    border-right: 4px solid var(--anime-primary);
    padding: 16px 24px;
    margin: 24px 0;
    background: rgba(124, 58, 237, 0.05);
    border-radius: 0 12px 12px 0;
    font-style: italic;
    color: var(--text-secondary);
}

.blog-article ul,
.blog-article ol {
    margin: 20px 0;
    padding-right: 24px;
}

.blog-article li {
    margin-bottom: 12px;
}

.blog-article code {
    background: rgba(255, 255, 255, 0.05);
    padding: 2px 8px;
    border-radius: 4px;
    font-family: monospace;
}

.blog-article pre {
    background: rgba(0, 0, 0, 0.3);
    padding: 20px;
    border-radius: 12px;
    overflow-x: auto;
    margin: 24px 0;
}

/* Blog Tags */
.blog-tags {
    margin-top: 32px;
    padding-top: 24px;
    border-top: 1px solid var(--border-color);
}

.blog-tags h4 {
    color: var(--text-primary);
    font-size: 14px;
    margin-bottom: 12px;
}

.blog-tags .tags-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

/* Blog Comments */
.blog-comments {
    margin-top: 40px;
    padding-top: 32px;
    border-top: 1px solid var(--border-color);
}

/* Blog Sidebar */
.blog-sidebar {
    display: flex;
    flex-direction: column;
    gap: 24px;
    position: sticky;
    top: 100px;
    height: fit-content;
    align-self: start;
}

/* Related Posts */
.related-posts-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.related-post-item {
    display: flex;
    gap: 12px;
    padding: 12px;
    background: rgba(255, 255, 255, 0.02);
    border-radius: 10px;
    text-decoration: none;
    transition: all 0.3s ease;
}

.related-post-item:hover {
    background: rgba(124, 58, 237, 0.1);
    transform: translateX(-4px);
}

.related-post-image {
    width: 70px;
    height: 50px;
    object-fit: cover;
    border-radius: 6px;
    flex-shrink: 0;
}

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

.related-post-title {
    font-size: 13px;
    font-weight: 500;
    color: var(--text-primary);
    margin-bottom: 4px;
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.related-post-date {
    font-size: 11px;
    color: var(--text-muted);
}

/* News placeholder */
.news-placeholder {
    width: 100%;
    height: 180px;
    background: rgba(255, 255, 255, 0.03);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-muted);
}

/* ========================================
   BLOG ARCHIVE PAGE STYLES
   ======================================== */

.blog-archive-view {
    padding: 40px 20px;
    max-width: 1400px;
    margin: 0 auto;
}

.blog-archive-header {
    text-align: center;
    margin-bottom: 40px;
}

.blog-archive-header .page-title {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    font-size: 2rem;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 12px;
}

.blog-archive-header .page-title svg {
    color: var(--anime-primary);
}

.blog-archive-header .page-description {
    color: var(--text-secondary);
    font-size: 1.1rem;
}

.blog-archive-layout {
    display: grid;
    grid-template-columns: 1fr 320px;
    gap: 40px;
}

@media (max-width: 1024px) {
    .blog-archive-layout {
        grid-template-columns: 1fr;
    }
}

.blog-archive-main {
    display: flex;
    flex-direction: column;
    gap: 32px;
}

/* Blog Pagination */
.blog-pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-top: 40px;
}

.blog-pagination a,
.blog-pagination span {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 40px;
    height: 40px;
    padding: 0 12px;
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    color: var(--text-secondary);
    font-weight: 500;
    text-decoration: none;
    transition: all 0.3s ease;
}

.blog-pagination a:hover {
    background: var(--anime-primary);
    color: white;
    border-color: var(--anime-primary);
}

.blog-pagination .current {
    background: var(--anime-primary);
    color: white;
    border-color: var(--anime-primary);
}

.blog-pagination .prev,
.blog-pagination .next {
    padding: 0 8px;
}

.blog-pagination .dots {
    background: transparent;
    border: none;
    color: var(--text-muted);
}

/* ========================================
   BLOG COMMENTS STYLES
   ======================================== */

.blog-comments {
    margin-top: 40px;
    padding-top: 32px;
    border-top: 1px solid var(--border-color);
}

.comments-title {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 24px;
}

.comments-title svg {
    color: var(--anime-primary);
}

.comments-list {
    display: flex;
    flex-direction: column;
    gap: 20px;
    margin-bottom: 32px;
}

.comment-item {
    display: flex;
    gap: 16px;
    padding: 20px;
    background: rgba(255, 255, 255, 0.02);
    border-radius: 12px;
    border: 1px solid var(--border-color);
}

.comment-avatar img {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    object-fit: cover;
}

.comment-content {
    flex: 1;
}

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

.comment-author {
    font-weight: 600;
    color: var(--text-primary);
}

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

.comment-text {
    color: var(--text-secondary);
    line-height: 1.6;
    margin: 0;
}

.no-comments {
    color: var(--text-muted);
    text-align: center;
    padding: 40px;
    background: rgba(255, 255, 255, 0.02);
    border-radius: 12px;
    margin-bottom: 24px;
}

/* Comment Form */
.comment-form-wrapper {
    background: rgba(255, 255, 255, 0.02);
    border-radius: 12px;
    padding: 24px;
    border: 1px solid var(--border-color);
}

.comment-form-wrapper h4 {
    color: var(--text-primary);
    font-size: 1.1rem;
    margin-bottom: 16px;
}

.comment-form .form-group {
    margin-bottom: 16px;
}

.comment-form textarea {
    width: 100%;
    padding: 14px;
    background: rgba(0, 0, 0, 0.2);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    color: var(--text-primary);
    font-size: 15px;
    resize: vertical;
    min-height: 120px;
    transition: all 0.3s ease;
}

.comment-form textarea:focus {
    outline: none;
    border-color: var(--anime-primary);
    box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.1);
}

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

.comment-form button[type="submit"] {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* Login to comment */
.login-to-comment {
    text-align: center;
    padding: 24px;
}

.login-to-comment {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
}

.login-to-comment svg {
    color: var(--text-muted);
    opacity: 0.5;
}

.login-to-comment p {
    color: var(--text-secondary);
    margin: 0;
}

/* Comment as user */
.comment-as-user {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 16px;
    padding: 12px;
    background: rgba(124, 58, 237, 0.05);
    border-radius: 10px;
    border: 1px solid rgba(124, 58, 237, 0.1);
}

.comment-as-user img {
    width: 40px;
    height: 40px;
    border-radius: 50%;
}

.comment-as-user span {
    color: var(--text-secondary);
    font-size: 14px;
}

.comment-as-user strong {
    color: var(--anime-primary);
}

/* Submit comment button */
.btn-submit-comment {
    display: inline-flex !important;
    align-items: center;
    gap: 8px;
    background: var(--anime-primary) !important;
    color: white !important;
    padding: 12px 24px !important;
    border-radius: 10px !important;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
}

.btn-submit-comment:hover {
    background: var(--anime-secondary) !important;
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(124, 58, 237, 0.4);
}

/* Continue Watching Button */
.action-btn-continue {
    transition: all 0.3s ease;
}

.action-btn-continue.in-list {
    background: rgba(34, 197, 94, 0.2) !important;
    color: #22c55e !important;
    border-color: rgba(34, 197, 94, 0.3) !important;
}

.action-btn-continue.in-list svg {
    fill: #22c55e;
    stroke: #22c55e;
}

.action-btn-continue:hover:not(.in-list) {
    background: rgba(124, 58, 237, 0.2) !important;
    color: var(--anime-primary) !important;
}

/* ========================================
   LEGAL PAGES & POPUPS STYLES
   ======================================== */

/* Legal Page View */
.legal-page-view {
    padding: 40px 20px;
    min-height: calc(100vh - 80px);
}

.legal-page-container {
    max-width: 900px;
    margin: 0 auto;
    background: var(--card-bg);
    border-radius: 20px;
    border: 1px solid var(--border-color);
    overflow: hidden;
}

.legal-page-header {
    padding: 40px;
    background: linear-gradient(135deg, rgba(124, 58, 237, 0.1), rgba(168, 85, 247, 0.05));
    border-bottom: 1px solid var(--border-color);
}

.legal-back-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--text-muted);
    text-decoration: none;
    font-size: 14px;
    margin-bottom: 20px;
    transition: color 0.3s ease;
}

.legal-back-btn:hover {
    color: var(--anime-primary);
}

.legal-page-title {
    display: flex;
    align-items: center;
    gap: 16px;
    font-size: 2rem;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0 0 12px;
}

.legal-page-title svg {
    color: var(--anime-primary);
}

.legal-page-updated {
    color: var(--text-muted);
    font-size: 14px;
    margin: 0;
}

.legal-page-content {
    padding: 40px;
    color: var(--text-secondary);
    line-height: 1.8;
    font-size: 16px;
}

.legal-page-content h2 {
    color: var(--text-primary);
    font-size: 1.5rem;
    font-weight: 600;
    margin: 32px 0 16px;
    padding-bottom: 8px;
    border-bottom: 2px solid var(--anime-primary);
}

.legal-page-content h2:first-child {
    margin-top: 0;
}

.legal-page-content h3 {
    color: var(--text-primary);
    font-size: 1.2rem;
    font-weight: 600;
    margin: 24px 0 12px;
}

.legal-page-content p {
    margin-bottom: 16px;
}

.legal-page-content ul,
.legal-page-content ol {
    margin: 16px 0;
    padding-right: 24px;
}

.legal-page-content li {
    margin-bottom: 8px;
}

.legal-page-content strong {
    color: var(--text-primary);
}

.legal-page-footer {
    padding: 24px 40px;
    background: rgba(0, 0, 0, 0.2);
    display: flex;
    gap: 16px;
    justify-content: center;
    flex-wrap: wrap;
}

/* Legal Popups */
.legal-popup {
    position: fixed;
    inset: 0;
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
}

.legal-popup.active {
    opacity: 1;
    visibility: visible;
}

.legal-popup-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.8);
    backdrop-filter: blur(8px);
}

.legal-popup-content {
    position: relative;
    width: 90%;
    max-width: 800px;
    max-height: 85vh;
    background: var(--anime-surface);
    border-radius: 20px;
    border: 1px solid var(--border-color);
    display: flex;
    flex-direction: column;
    transform: scale(0.9) translateY(20px);
    transition: transform 0.3s ease;
    overflow: hidden;
}

.legal-popup.active .legal-popup-content {
    transform: scale(1) translateY(0);
}

.legal-popup-header {
    padding: 24px 32px;
    background: linear-gradient(135deg, rgba(124, 58, 237, 0.15), rgba(168, 85, 247, 0.05));
    border-bottom: 1px solid var(--border-color);
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.legal-popup-header h2 {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0;
}

.legal-popup-close {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid var(--border-color);
    color: var(--text-secondary);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    padding: 0 !important;
}

.legal-popup-close:hover {
    background: rgba(239, 68, 68, 0.2);
    border-color: rgba(239, 68, 68, 0.5);
    color: #ef4444;
}

.legal-popup-body {
    padding: 32px;
    overflow-y: auto;
    flex: 1;
    color: var(--text-secondary);
    line-height: 1.8;
}

.legal-popup-body h2,
.legal-popup-body .legal-heading-2 {
    color: var(--text-primary);
    font-size: 1.25rem;
    font-weight: 600;
    margin: 24px 0 12px;
    display: block;
}

.legal-popup-body h2:first-child,
.legal-popup-body .legal-heading-2:first-child {
    margin-top: 0;
}

.legal-popup-body h3,
.legal-popup-body .legal-heading-3 {
    color: var(--text-primary);
    font-size: 1.1rem;
    font-weight: 600;
    margin: 20px 0 10px;
    display: block;
}

.legal-popup-body .legal-heading-1 {
    color: var(--text-primary);
    font-size: 1.5rem;
    font-weight: 700;
    margin: 28px 0 16px;
    display: block;
}

.legal-popup-body .legal-heading-4 {
    color: var(--text-primary);
    font-size: 1rem;
    font-weight: 600;
    margin: 16px 0 8px;
    display: block;
}

.legal-popup-body .legal-heading-5 {
    color: var(--text-primary);
    font-size: 0.9rem;
    font-weight: 600;
    margin: 14px 0 6px;
    display: block;
}

.legal-popup-body .legal-heading-6 {
    color: var(--text-primary);
    font-size: 0.85rem;
    font-weight: 600;
    margin: 12px 0 6px;
    display: block;
}

.legal-popup-body p {
    margin-bottom: 12px;
}

.legal-popup-body ul,
.legal-popup-body ol {
    margin: 12px 0;
    padding-right: 20px;
}

.legal-popup-body li {
    margin-bottom: 6px;
}

.legal-popup-footer {
    padding: 20px 32px;
    background: rgba(0, 0, 0, 0.2);
    border-top: 1px solid var(--border-color);
    display: flex;
    justify-content: center;
}

/* Responsive */
@media (max-width: 768px) {
    .legal-page-header,
    .legal-page-content,
    .legal-page-footer {
        padding: 24px;
    }
    
    .legal-page-title {
        font-size: 1.5rem;
    }
    
    .legal-popup-content {
        width: 95%;
        max-height: 90vh;
    }
    
    .legal-popup-header,
    .legal-popup-body,
    .legal-popup-footer {
        padding: 20px;
    }
}

/* Animation for removal */
.continue-watching-card.removing {
    animation: fadeOutRemove 0.4s ease forwards;
}

@keyframes fadeOutRemove {
    0% {
        opacity: 1;
        transform: scale(1);
    }
    100% {
        opacity: 0;
        transform: scale(0.8);
        height: 0;
        padding: 0;
        margin: 0;
        overflow: hidden;
    }
}

.continue-watching-card {
    background: rgba(22, 27, 46, 0.9);
    backdrop-filter: blur(12px);
    border: 1px solid var(--border-color);
    border-radius: 16px;
    padding: 12px;
    display: flex;
    gap: 16px;
    text-decoration: none;
    color: inherit;
    transition: all 0.3s;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.3);
    cursor: pointer;
}

.continue-watching-card:hover {
    border-color: rgba(124, 58, 237, 0.5);
    transform: translateY(-4px);
}

.continue-watching-thumb {
    position: relative;
    width: 128px;
    height: 80px;
    border-radius: 12px;
    overflow: hidden;
    flex-shrink: 0;
}

@media (max-width: 767px) {
    .continue-watching-thumb {
        width: 100px;
        height: 64px;
        border-radius: 10px;
    }
}

.continue-watching-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s;
}

.continue-watching-card:hover .continue-watching-thumb img {
    transform: scale(1.1);
}

.continue-watching-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.4);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.3s;
}

.continue-watching-card:hover .continue-watching-overlay {
    opacity: 1;
}

.continue-watching-progress {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    background: rgba(0, 0, 0, 0.5);
    height: 4px;
}

.progress-bar {
    background: var(--anime-secondary);
    height: 100%;
    transition: width 0.3s;
}

.continue-watching-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-width: 0;
    overflow: hidden;
    width: 100%;
    box-sizing: border-box;
}

.continue-watching-name {
    font-size: 14px;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0 0 4px 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: color 0.3s;
    max-width: 100%;
    box-sizing: border-box;
}

@media (max-width: 767px) {
    .continue-watching-name {
        font-size: 13px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        max-width: 100%;
    }
}

.continue-watching-card:hover .continue-watching-name {
    color: var(--anime-primary);
}

.continue-watching-ep {
    font-size: 12px;
    color: var(--text-muted);
    margin: 0 0 4px 0;
    font-weight: 500;
}

.continue-watching-percent {
    font-size: 10px;
    color: var(--text-muted);
}

/* Schedule & News Section */
.schedule-news-section {
    padding: 80px 0;
    background: linear-gradient(to bottom, #0f121e, var(--anime-bg));
    border-top: 1px solid var(--border-color);
    border-bottom: 1px solid var(--border-color);
}

.schedule-news-layout {
    display: flex;
    flex-direction: column;
    gap: 64px;
}

@media (min-width: 1024px) {
    .schedule-news-layout {
        flex-direction: row;
    }
}

.schedule-section {
    width: 100%;
}

@media (min-width: 1024px) {
    .schedule-section {
        width: 66.666%;
    }
}

.schedule-title {
    font-size: 32px;
    font-weight: 900;
    color: var(--text-primary);
    margin: 0 0 32px 0;
    display: flex;
    align-items: center;
    gap: 12px;
}

.schedule-icon {
    background: rgba(251, 113, 133, 0.1);
    padding: 8px;
    border-radius: 8px;
    color: var(--anime-accent);
}

.schedule-list {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.schedule-item {
    display: flex;
    align-items: center;
    gap: 24px;
    padding: 16px;
    background: #161b2e;
    border-radius: 16px;
    border: 1px solid var(--border-color);
    text-decoration: none;
    color: inherit;
    transition: all 0.3s;
}

.schedule-item:hover {
    border-color: rgba(124, 58, 237, 0.5);
    background: #1a2036;
    transform: translateX(-4px);
}

.schedule-time {
    font-family: monospace;
    font-size: 20px;
    font-weight: 700;
    color: var(--anime-secondary);
    width: 80px;
    text-align: center;
    background: rgba(0, 0, 0, 0.3);
    padding: 12px;
    border-radius: 12px;
    border: 1px solid var(--border-color);
}

.schedule-thumb {
    width: 96px;
    height: 64px;
    border-radius: 12px;
    overflow: hidden;
    flex-shrink: 0;
}

.schedule-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s;
}

.schedule-item:hover .schedule-thumb img {
    transform: scale(1.1);
}

.schedule-info {
    flex: 1;
}

.schedule-name {
    font-size: 18px;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0 0 4px 0;
    transition: color 0.3s;
}

.schedule-item:hover .schedule-name {
    color: var(--anime-primary);
}

.schedule-meta {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 14px;
    color: var(--text-muted);
}

.schedule-lang {
    font-size: 12px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid var(--border-color);
    padding: 2px 8px;
    border-radius: 4px;
    color: var(--text-secondary);
}

.schedule-play-btn {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--anime-primary);
    color: var(--text-primary);
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    opacity: 0;
    transform: translateX(16px);
    transition: all 0.3s;
    box-shadow: 0 0 15px rgba(124, 58, 237, 0.3);
}

.schedule-item:hover .schedule-play-btn {
    opacity: 1;
    transform: translateX(0);
}

/* News Mini Section */
.news-mini-section {
    width: 100%;
}

@media (min-width: 1024px) {
    .news-mini-section {
        width: 33.333%;
    }
}

.news-mini-section-full {
    padding: 80px 0;
    background: linear-gradient(to bottom, #0f121e, var(--anime-bg));
    border-top: 1px solid var(--border-color);
    border-bottom: 1px solid var(--border-color);
}

.news-mini-section-full .news-mini-list {
    display: grid;
    grid-template-columns: repeat(1, 1fr);
    gap: 16px;
}

@media (min-width: 768px) {
    .news-mini-section-full .news-mini-list {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 1024px) {
    .news-mini-section-full .news-mini-list {
        grid-template-columns: repeat(4, 1fr);
    }
}

.news-mini-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 32px;
}

.news-mini-title {
    font-size: 24px;
    font-weight: 900;
    color: var(--text-primary);
    margin: 0;
}

.news-mini-link {
    font-size: 12px;
    color: var(--anime-secondary);
    font-weight: 700;
    text-decoration: none;
    transition: all 0.3s;
}

.news-mini-link:hover {
    text-decoration: underline;
}

.news-mini-list {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.news-mini-item {
    display: flex;
    gap: 16px;
    padding: 12px;
    border-radius: 16px;
    text-decoration: none;
    color: inherit;
    transition: all 0.3s;
    border: 1px solid transparent;
}

.news-mini-item:hover {
    background: rgba(255, 255, 255, 0.05);
    border-color: var(--border-color);
}

.news-mini-thumb {
    width: 80px;
    height: 120px;
    border-radius: 12px;
    overflow: hidden;
    flex-shrink: 0;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.news-mini-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s;
}

.news-mini-item:hover .news-mini-thumb img {
    transform: scale(1.1);
}

.news-mini-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-width: 0;
}

.news-mini-meta {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 4px;
}

.news-mini-tag {
    font-size: 10px;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 4px;
    border: 1px solid;
}

.news-mini-tag.tag-news {
    background: rgba(59, 130, 246, 0.1);
    color: #60A5FA;
    border-color: rgba(59, 130, 246, 0.2);
}

.news-mini-tag.tag-review {
    background: rgba(168, 85, 247, 0.1);
    color: #A78BFA;
    border-color: rgba(168, 85, 247, 0.2);
}

.news-mini-tag.tag-industry {
    background: rgba(34, 197, 94, 0.1);
    color: #4ADE80;
    border-color: rgba(34, 197, 94, 0.2);
}

.news-mini-headline {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0;
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}

.news-mini-date {
    font-size: 10px;
    color: var(--text-muted);
}

.news-mini-title {
    font-size: 14px;
    font-weight: 700;
    color: var(--text-secondary);
    margin: 0;
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    transition: color 0.3s;
}

.news-mini-item:hover .news-mini-title {
    color: var(--anime-accent);
}

/* Top 10 Section */
.top10-section {
    padding: 80px 0;
}

.top10-header {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 48px;
}

.top10-title {
    font-size: 32px;
    font-weight: 900;
    color: var(--text-primary);
    margin: 0 0 24px 0;
}

@media (min-width: 768px) {
    .top10-title {
        font-size: 48px;
    }
}

.top10-tabs {
    display: flex;
    background: #161b2e;
    padding: 6px;
    border-radius: 16px;
    border: 1px solid var(--border-color);
}

.top10-tab {
    padding: 12px 32px;
    border-radius: 12px;
    font-size: 14px;
    font-weight: 700;
    background: none;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    transition: all 0.3s;
}

.top10-tab:hover {
    color: var(--text-primary);
}

.top10-tab.active {
    background: var(--anime-primary);
    color: var(--text-primary);
    box-shadow: 0 4px 12px rgba(124, 58, 237, 0.3);
}

.top10-grid {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
    margin-bottom: 48px;
    min-height: auto;
    visibility: visible !important;
    opacity: 1 !important;
}

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

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

/* Ensure anime cards are visible in top10-grid */
.top10-grid {
    display: grid !important;
    visibility: visible !important;
    opacity: 1 !important;
    min-height: auto !important;
}

.top10-grid .anime-card-wrapper {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    position: relative !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
}

.top10-grid .anime-card-link {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    position: relative !important;
    width: 100% !important;
    height: auto !important;
    text-decoration: none !important;
    color: inherit !important;
}

.top10-grid .anime-card {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    position: relative !important;
    width: 100% !important;
    height: auto !important;
}

.top10-grid .anime-card-image {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    position: relative !important;
    width: 100% !important;
    height: auto !important;
    min-height: 200px !important;
}

.top10-grid .anime-card-image img {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    position: relative !important;
}

.top10-grid .anime-card-title {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    color: var(--text-primary) !important;
}

.top10-grid .anime-card-meta {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    color: var(--text-muted) !important;
}

.top10-grid .anime-rank-badge {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
}

.top10-grid .anime-rating-badge {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
}

.anime-rank-badge {
    position: absolute;
    top: 0;
    left: 0;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 900;
    font-size: 18px;
    border-radius: 0 0 12px 0;
    background: #374151;
    color: #9CA3AF;
    z-index: 3;
}

@media (min-width: 768px) {
    .anime-rank-badge {
        width: 40px;
        height: 40px;
        font-size: 20px;
    }
}

.anime-rank-badge.rank-top {
    background: var(--anime-accent) !important;
    color: white !important;
    box-shadow: 0 4px 12px rgba(251, 113, 133, 0.3);
}

.top10-footer {
    text-align: center;
    margin-top: 48px;
}

.btn-top100 {
    display: inline-block;
    padding: 14px 40px;
    border-radius: 12px;
    border: 1px solid var(--border-color);
    background: rgba(255, 255, 255, 0.05);
    color: var(--text-primary);
    font-weight: 700;
    text-decoration: none;
    transition: all 0.3s;
}

.btn-top100:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(124, 58, 237, 0.5);
}

/* CTA Section */
.cta-section {
    padding: 128px 24px;
    background: linear-gradient(to right, var(--anime-primary), #6B21A8, #000);
    text-align: center;
    position: relative;
    overflow: hidden;
    margin-top: 48px;
}

.cta-pattern {
    position: absolute;
    inset: 0;
    background-image: url('https://www.transparenttextures.com/patterns/carbon-fibre.png');
    opacity: 0.3;
    mix-blend-mode: overlay;
}

.cta-glow {
    position: absolute;
    top: 0;
    right: 0;
    width: 500px;
    height: 500px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 50%;
    filter: blur(100px);
    animation: pulse 3s ease-in-out infinite;
}

@keyframes pulse {
    0%, 100% {
        opacity: 0.5;
    }
    50% {
        opacity: 0.8;
    }
}

.cta-content {
    position: relative;
    z-index: 10;
    max-width: 896px;
    margin: 0 auto;
}

.cta-title {
    font-size: 48px;
    font-weight: 900;
    color: var(--text-primary);
    margin: 0 0 32px 0;
    line-height: 1.2;
    letter-spacing: -1px;
}

@media (min-width: 768px) {
    .cta-title {
        font-size: 96px;
    }
}

.cta-title-gradient {
    background: linear-gradient(to right, var(--text-primary), var(--text-muted));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    display: inline-block;
}

.cta-description {
    font-size: 20px;
    color: rgba(255, 255, 255, 0.9);
    line-height: 1.75;
    margin-bottom: 48px;
    max-width: 640px;
    margin-left: auto;
    margin-right: auto;
    font-weight: 300;
}

@media (min-width: 768px) {
    .cta-description {
        font-size: 20px;
    }
}

.cta-actions {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 24px;
}

@media (min-width: 640px) {
    .cta-actions {
        flex-direction: row;
        justify-content: center;
    }
}

.btn-cta {
    background: var(--text-primary);
    color: var(--anime-primary);
    padding: 20px 48px;
    border-radius: 16px;
    font-weight: 900;
    font-size: 20px;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 12px;
    transition: all 0.3s;
    box-shadow: 0 0 40px rgba(255, 255, 255, 0.3);
    border: none;
    cursor: pointer;
}

.btn-cta:hover {
    background: #F3F4F6;
    transform: translateY(-4px);
    box-shadow: 0 0 50px rgba(255, 255, 255, 0.4);
}

@media (min-width: 640px) {
    .btn-cta {
        font-size: 24px;
    }
}

/* Hero Subtitle Gradient */
.hero-subtitle-gradient {
    display: inline-block;
}

.tag-chip-match {
    background: rgba(34, 197, 94, 0.2) !important;
    color: #4ADE80 !important;
    border-color: rgba(34, 197, 94, 0.3) !important;
}

.section-controls {
    display: flex;
    gap: 8px;
}

.section-nav-btn {
    width: 40px;
    height: 40px;
    padding: 8px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    color: var(--text-primary);
    cursor: pointer;
    transition: all 0.3s;
    display: flex;
    align-items: center;
    justify-content: center;
}

.section-nav-btn:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.3);
}

/* Utility Classes */
.container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 24px;
    width: 100%;
    box-sizing: border-box;
}

@media (max-width: 767px) {
    .container {
        padding: 0 16px;
    }
}

.text-center {
    text-align: center;
}

.mt-4 {
    margin-top: 16px;
}

.mb-4 {
    margin-bottom: 16px;
}

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

.fade-in {
    animation: fadeIn 0.3s ease;
}

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

.animate-fade-in-up {
    animation: fadeInUp 0.5s ease;
}

/* Line Clamp Utilities */
.line-clamp-2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.line-clamp-3 {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Selection Styles */
::selection {
    background: var(--anime-primary);
    color: var(--text-primary);
}

::-moz-selection {
    background: var(--anime-primary);
    color: var(--text-primary);
}

/* Additional Hero Styles */
.hero-slider-section {
    position: relative;
}

/* Fix for Continue Watching positioning */
.continue-watching-section {
    position: relative;
    z-index: 20;
}

/* Schedule Section Icon Fix */
.schedule-icon {
    background: rgba(251, 113, 133, 0.1);
    padding: 8px;
    border-radius: 8px;
    color: var(--anime-accent);
    display: flex;
    align-items: center;
    justify-content: center;
}

/* News Mini Item Hover Fix */
.news-mini-item {
    transition: all 0.3s;
}

.news-mini-item:hover {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(255, 255, 255, 0.1);
}

/* Top 10 Tab Active State */
.top10-tab.active {
    background: var(--anime-primary);
    color: var(--text-primary);
    box-shadow: 0 4px 12px rgba(124, 58, 237, 0.3);
}

/* CTA Section Pattern Background */
.cta-pattern {
    position: absolute;
    inset: 0;
    background-image: url('https://www.transparenttextures.com/patterns/carbon-fibre.png');
    opacity: 0.3;
    mix-blend-mode: overlay;
    pointer-events: none;
}

/* Responsive Fixes */
@media (max-width: 767px) {
    .hero-main-title {
        font-size: 48px;
        line-height: 1.1;
    }
    
    .hero-desc-text {
        font-size: 16px;
    }
    
    .btn-hero {
        padding: 12px 24px;
        font-size: 16px;
    }
    
    .trending-title {
        font-size: 24px;
    }
    
    .schedule-title {
        font-size: 24px;
    }
    
    .top10-title {
        font-size: 32px;
    }
    
    .cta-title {
        font-size: 36px;
    }
    
    .cta-description {
        font-size: 18px;
    }
}

/* Fix for aspect ratio on anime cards */
.anime-card-image {
    position: relative;
    aspect-ratio: 2 / 3;
    border-radius: 12px;
    overflow: hidden;
    margin-bottom: 12px;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.05);
    transition: all 0.3s;
}

/* Ensure images fill container */
.anime-card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Fix for rank badge positioning */

/* Fix for schedule item hover */
.schedule-item {
    position: relative;
}

.schedule-play-btn {
    position: relative;
    z-index: 2;
}

/* Ensure proper z-index layering */
.hero-slide-bg {
    z-index: 0;
}

.hero-slide-bg.active {
    z-index: 10;
}

.hero-container {
    z-index: 20;
}

.hero-slider-controls {
    z-index: 30;
}

/* Loading states */
.anime-card-image img[loading="lazy"] {
    opacity: 1;
    transition: opacity 0.3s;
}

.anime-card-image img[loading="lazy"].loaded {
    opacity: 1;
}

/* Smooth scrolling */
html {
    scroll-behavior: smooth;
}

/* Focus styles for accessibility */
button:focus,
a:focus {
    outline: 2px solid var(--anime-primary);
    outline-offset: 2px;
}

/* Ensure all button types are styled */
button[type="submit"],
button[type="button"],
input[type="submit"],
input[type="button"] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px 24px;
    border-radius: 12px;
    font-weight: 700;
    font-size: 14px;
    text-decoration: none;
    border: none;
    cursor: pointer;
    transition: all 0.3s;
    font-family: inherit;
    line-height: 1.5;
}

/* Fix for buttons without classes */
.anime-portal-container button:not(.btn):not(.btn-primary):not(.btn-secondary):not(.btn-accent):not(.btn-hero):not(.btn-overlay):not(.tab-btn):not(.action-btn):not(.trending-nav-btn):not(.schedule-play-btn):not(.top10-tab):not(.hero-slider-dot):not(.mobile-menu-toggle):not(.mobile-menu-close):not(.popup-close) {
    background: var(--anime-primary);
    color: var(--text-primary);
    padding: 10px 24px;
    border-radius: 12px;
    font-weight: 700;
    font-size: 14px;
    border: none;
    cursor: pointer;
    transition: all 0.3s;
}

.anime-portal-container button:not(.btn):not(.btn-primary):not(.btn-secondary):not(.btn-accent):not(.btn-hero):not(.btn-overlay):not(.tab-btn):not(.action-btn):not(.trending-nav-btn):not(.schedule-play-btn):not(.top10-tab):not(.hero-slider-dot):not(.mobile-menu-toggle):not(.mobile-menu-close):not(.popup-close):hover {
    background: #6D28D9;
    transform: translateY(-2px);
    box-shadow: 0 0 30px rgba(124, 58, 237, 0.6);
}

/* Additional background layers for depth */
body.anime-portal-body::before {
    content: '';
    position: fixed;
    inset: 0;
    background-image: 
        radial-gradient(ellipse 1200px 800px at 20% 30%, rgba(124, 58, 237, 0.15), transparent 60%),
        radial-gradient(ellipse 1000px 700px at 80% 70%, rgba(251, 113, 133, 0.15), transparent 60%),
        linear-gradient(180deg, #0B0F1A 0%, #0a0d17 50%, #0B0F1A 100%);
    pointer-events: none;
    z-index: -1;
}

/* Add subtle noise texture */
body.anime-portal-body::after {
    content: '';
    position: fixed;
    inset: 0;
    background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIzMDAiIGhlaWdodD0iMzAwIj48ZmlsdGVyIGlkPSJhIiB4PSIwIiB5PSIwIj48ZmVUdXJidWxlbmNlIHR5cGU9ImZyYWN0YWxOb2lzZSIgYmFzZUZyZXF1ZW5jeT0iLjkiIG51bU9jdGF2ZXM9IjQiIHN0aXRjaFRpbGVzPSJzdGl0Y2giLz48L2ZpbHRlcj48L3N2Zz4=');
    opacity: 0.03;
    pointer-events: none;
    z-index: -1;
}

/* Header Logo Icon Glow Effect */
.logo-icon-wrapper {
    position: relative;
    cursor: pointer;
}

.logo-icon-glow {
    position: absolute;
    inset: 0;
    background: var(--anime-primary);
    filter: blur(16px);
    opacity: 0.5;
    transition: opacity 0.3s;
    border-radius: 50%;
}

.logo-link:hover .logo-icon-glow {
    opacity: 1;
}

.logo-link:hover .logo-icon {
    transform: scale(1.1);
}

.logo-icon {
    position: relative;
    z-index: 10;
    transition: transform 0.3s;
    color: white;
}

.logo-icon svg {
    filter: drop-shadow(0 0 10px rgba(124, 58, 237, 0.5));
}

/* Header Scroll Effect */
.anime-header {
    background: linear-gradient(to bottom, var(--anime-bg) 0%, rgba(11, 15, 26, 0.8) 50%, transparent 100%);
    border-bottom: 1px solid transparent;
}

.anime-header.scrolled {
    background: rgba(11, 15, 26, 0.95) !important;
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-bottom: 1px solid rgba(124, 58, 237, 0.3);
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.5);
    padding: 12px 0 !important;
}

/* Search Focus Effect */
.search-box:focus-within .search-icon {
    color: var(--anime-primary) !important;
}

.search-box:focus-within,
.search-box.focused {
    width: 320px !important;
    background: var(--anime-surface) !important;
    border-color: var(--anime-primary) !important;
}

/* Search Results Header */
.search-results-header {
    padding: 8px 16px;
    font-size: 12px;
    font-weight: 700;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    border-bottom: 1px solid var(--border-color);
}

/* ========================================
   NOTIFICATIONS - CLEAN DESIGN
   ======================================== */
.notifications-container {
    position: relative;
}

.notification-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    background: transparent;
    border: none;
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.2s ease;
    position: relative;
    color: #9ca3af;
}

.notification-btn:hover {
    background: rgba(255, 255, 255, 0.08);
    color: #fff;
}

.notification-badge {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 8px;
    height: 8px;
    background: #ef4444;
    border-radius: 50%;
    border: 2px solid #12141f;
}

.notifications-dropdown {
    position: absolute;
    top: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%) translateY(8px);
    width: 360px;
    max-height: 440px;
    background: #12141f;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 16px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
    overflow: hidden;
    z-index: 1000;
    opacity: 0;
    visibility: hidden;
    transition: all 0.2s ease-out;
}

.notifications-dropdown.show {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
}

.notifications-dropdown::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, #7c3aed, #ec4899);
}

.notifications-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.notifications-header span {
    font-size: 15px;
    font-weight: 700;
    color: #fff;
}

.notifications-header span::before {
    content: none;
}

.mark-all-read {
    padding: 6px 12px;
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 6px;
    color: #9ca3af;
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
}

.mark-all-read:hover {
    background: rgba(255, 255, 255, 0.05);
    color: #fff;
}

.notifications-list {
    max-height: 320px;
    overflow-y: auto;
    padding: 8px;
}

.notifications-list::-webkit-scrollbar {
    width: 4px;
}

.notifications-list::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.1);
    border-radius: 4px;
}

.notification-item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 12px;
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.15s ease;
    position: relative;
}

.notification-item:hover {
    background: rgba(255, 255, 255, 0.05);
}

.notification-item.unread {
    background: rgba(124, 58, 237, 0.08);
}

.notification-icon {
    width: 40px;
    height: 40px;
    background: rgba(124, 58, 237, 0.15);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 18px;
}

.notification-content {
    flex: 1;
    min-width: 0;
}

.notification-title {
    font-size: 13px;
    font-weight: 600;
    color: #fff;
    margin-bottom: 2px;
}

.notification-text {
    font-size: 12px;
    color: #9ca3af;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.notification-time {
    font-size: 11px;
    color: #6b7280;
    margin-top: 4px;
}

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

.notifications-empty-icon {
    width: 56px;
    height: 56px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 12px;
    font-size: 24px;
}

.notifications-empty p {
    color: #6b7280;
    font-size: 13px;
    margin: 0;
}

.notifications-footer {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: 100%;
    padding: 14px;
    font-size: 13px;
    font-weight: 600;
    color: var(--anime-primary);
    background: transparent;
    border: none;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    cursor: pointer;
    transition: all 0.2s ease;
}

.notifications-footer:hover {
    background: rgba(124, 58, 237, 0.1);
}

/* User Avatar Gradient Border */
.avatar-gradient-border {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: linear-gradient(to bottom right, var(--anime-primary), var(--anime-secondary));
    padding: 2px;
    transition: all 0.3s;
}

.avatar-gradient-border:hover {
    box-shadow: 0 0 15px rgba(124, 58, 237, 0.5);
}

.avatar-circle {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: var(--anime-bg);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

/* ========================================
   TOAST NOTIFICATIONS
   ======================================== */
.anime-toast {
    position: fixed;
    bottom: 24px;
    left: 50%;
    transform: translateX(-50%) translateY(100px);
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px 24px;
    background: #1a1d2e;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
    color: #fff;
    font-size: 14px;
    font-weight: 500;
    z-index: 10000;
    opacity: 0;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

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

.anime-toast svg {
    flex-shrink: 0;
}

.anime-toast-success {
    border-color: rgba(16, 185, 129, 0.3);
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.15), rgba(26, 29, 46, 0.95));
}

.anime-toast-success svg {
    color: #10b981;
}

.anime-toast-error {
    border-color: rgba(239, 68, 68, 0.3);
    background: linear-gradient(135deg, rgba(239, 68, 68, 0.15), rgba(26, 29, 46, 0.95));
}

.anime-toast-error svg {
    color: #ef4444;
}

.anime-toast-info {
    border-color: rgba(59, 130, 246, 0.3);
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.15), rgba(26, 29, 46, 0.95));
}

.anime-toast-info svg {
    color: #3b82f6;
}

/* Button States for Watchlist/Favorites */
.btn-hero-secondary.added,
.btn-overlay-secondary.added,
.watchlist-btn.added {
    background: rgba(16, 185, 129, 0.2) !important;
    border-color: rgba(16, 185, 129, 0.4) !important;
    color: #10b981 !important;
}

.btn-overlay-secondary.added svg {
    color: #10b981 !important;
}

.action-btn-circle.favorited {
    background: rgba(251, 191, 36, 0.2) !important;
    border-color: rgba(251, 191, 36, 0.4) !important;
}

.action-btn-circle.favorited svg {
    fill: #fbbf24;
    color: #fbbf24;
}

/* Footer Glow Effects */
.footer-glow-1 {
    position: absolute;
    top: 0;
    left: 25%;
    width: 384px;
    height: 384px;
    background: rgba(124, 58, 237, 0.05);
    border-radius: 50%;
    filter: blur(128px);
    pointer-events: none;
}

.footer-glow-2 {
    position: absolute;
    bottom: 0;
    right: 25%;
    width: 384px;
    height: 384px;
    background: rgba(251, 191, 36, 0.05);
    border-radius: 50%;
    filter: blur(128px);
    pointer-events: none;
}

/* Footer Stat Cards */
.footer-stat-card {
    background: #0f121e;
    border: 1px solid var(--border-color);
    border-radius: 16px;
    padding: 24px;
    text-align: center;
    transition: all 0.3s;
    cursor: pointer;
}

.footer-stat-card:hover {
    border-color: rgba(124, 58, 237, 0.3);
    transform: translateY(-4px);
}

.footer-stat-card:hover .stat-label {
    color: var(--anime-secondary);
}

.footer-stat-card:hover .stat-value {
    color: var(--anime-primary);
}

.stat-label {
    color: var(--text-muted);
    font-size: 14px;
    font-weight: 700;
    margin-bottom: 8px;
    transition: color 0.3s;
}

.stat-value {
    font-size: 32px;
    font-weight: 900;
    color: var(--text-primary);
    font-family: monospace;
    transition: color 0.3s;
}

/* Footer Links with Colors */
.footer-link-primary {
    display: block;
    padding: 8px 16px;
    background: #0f121e;
    border-radius: 8px;
    color: var(--text-secondary);
    text-decoration: none;
    font-size: 14px;
    font-weight: 700;
    border: 1px solid var(--border-color);
    transition: all 0.3s;
}

.footer-link-primary:hover {
    background: var(--anime-primary);
    color: white;
    border-color: rgba(124, 58, 237, 0.5);
}

.footer-link-secondary {
    display: block;
    padding: 8px 16px;
    background: #0f121e;
    border-radius: 8px;
    color: var(--text-secondary);
    text-decoration: none;
    font-size: 14px;
    font-weight: 700;
    border: 1px solid var(--border-color);
    transition: all 0.3s;
}

.footer-link-secondary:hover {
    background: var(--anime-secondary);
    color: black;
    border-color: rgba(251, 191, 36, 0.5);
}

.footer-link-accent {
    display: block;
    padding: 8px 16px;
    background: #0f121e;
    border-radius: 8px;
    color: var(--text-secondary);
    text-decoration: none;
    font-size: 14px;
    font-weight: 700;
    border: 1px solid var(--border-color);
    transition: all 0.3s;
}

.footer-link-accent:hover {
    background: var(--anime-accent);
    color: white;
    border-color: rgba(251, 113, 133, 0.5);
}

/* Footer Title Colors */
.footer-title-primary {
    border-right: 4px solid var(--anime-primary);
    padding-right: 12px;
}

.footer-title-secondary {
    border-right: 4px solid var(--anime-secondary);
    padding-right: 12px;
}

.footer-title-accent {
    border-right: 4px solid var(--anime-accent);
    padding-right: 12px;
}

/* Social Links with Hover Colors */
.social-twitter:hover {
    background: #1DA1F2 !important;
    color: white !important;
    border-color: #1DA1F2 !important;
}

.social-instagram:hover {
    background: #E1306C !important;
    color: white !important;
    border-color: #E1306C !important;
}

.social-youtube:hover {
    background: #FF0000 !important;
    color: white !important;
    border-color: #FF0000 !important;
}

.social-facebook:hover {
    background: #4267B2 !important;
    color: white !important;
    border-color: #4267B2 !important;
}

/* Series View - Meta Badges */
.series-meta-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    margin-bottom: 32px;
}

.meta-badge {
    display: flex;
    align-items: center;
    gap: 6px;
    background: rgba(0, 0, 0, 0.4);
    padding: 6px 12px;
    border-radius: 8px;
    border: 1px solid var(--border-color);
    font-size: 14px;
}

.meta-badge svg {
    width: 16px;
    height: 16px;
}

.meta-rating-value {
    font-weight: 700;
    color: var(--text-primary);
}

.meta-rating-votes {
    font-size: 12px;
    color: var(--text-muted);
}

/* Series View - Details Grid */
.series-details-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
    margin-bottom: 40px;
    padding: 24px;
    background: rgba(18, 20, 32, 0.5);
    border-radius: 12px;
    border: 1px solid var(--border-color);
}

@media (min-width: 768px) {
    .series-details-grid {
        grid-template-columns: repeat(4, 1fr);
    }
}

.detail-item {
    display: flex;
    flex-direction: column;
}

.detail-label {
    font-size: 12px;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin-bottom: 4px;
}

.detail-value {
    font-weight: 700;
    color: var(--text-primary);
    font-size: 14px;
}

/* Series View - Episodes Grid */
.episodes-grid {
    display: grid;
    grid-template-columns: repeat(1, 1fr);
    gap: 16px;
}

@media (min-width: 768px) {
    .episodes-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 1024px) {
    .episodes-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

.episode-card {
    display: flex;
    gap: 16px;
    padding: 12px;
    background: var(--anime-surface);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.3s;
    text-decoration: none;
    color: inherit;
}

.episode-card:hover {
    background: rgba(255, 255, 255, 0.05);
    border-color: var(--anime-primary);
}

.episode-thumb {
    width: 96px;
    height: 64px;
    border-radius: 8px;
    overflow: hidden;
    position: relative;
    flex-shrink: 0;
    background: black;
}

.episode-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s;
}

.episode-card:hover .episode-thumb img {
    transform: scale(1.1);
}

.episode-play-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.4);
    opacity: 0;
    transition: opacity 0.3s;
}

.episode-card:hover .episode-play-overlay {
    opacity: 1;
}

.episode-info-small {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-width: 0;
}

.episode-number {
    font-size: 12px;
    font-weight: 700;
    color: var(--anime-primary);
    margin-bottom: 4px;
}

.episode-name {
    font-weight: 700;
    color: var(--text-primary);
    font-size: 14px;
    margin-bottom: 4px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.episode-duration {
    font-size: 10px;
    color: var(--text-muted);
}

/* Series View - Characters Grid */
.characters-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
}

@media (min-width: 768px) {
    .characters-grid {
        grid-template-columns: repeat(4, 1fr);
    }
}

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

.character-card {
    text-align: center;
    cursor: pointer;
}

.character-avatar {
    width: 96px;
    height: 96px;
    margin: 0 auto 12px;
    border-radius: 50%;
    overflow: hidden;
    border: 2px solid transparent;
    transition: all 0.3s;
}

.character-card:hover .character-avatar {
    border-color: var(--anime-primary);
}

.character-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s;
}

.character-card:hover .character-avatar img {
    transform: scale(1.1);
}

.character-name {
    color: var(--text-primary);
    font-weight: 700;
    font-size: 14px;
    margin-bottom: 4px;
}

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

/* Series View - Staff Section */
.staff-section {
    margin-top: 24px;
}

.staff-section-title {
    color: var(--text-primary);
    font-weight: 700;
    font-size: 24px;
    margin-bottom: 20px;
}

.staff-grid {
    display: grid;
    grid-template-columns: repeat(1, 1fr);
    gap: 12px;
}

@media (min-width: 768px) {
    .staff-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

.staff-card {
    background: var(--anime-surface);
    padding: 16px;
    border-radius: 12px;
    border: 1px solid var(--border-color);
}

.staff-title {
    color: var(--text-primary);
    font-weight: 700;
    margin-bottom: 8px;
}

.staff-member {
    display: flex;
    align-items: center;
    gap: 12px;
}

.staff-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: #4B5563;
}

.staff-name {
    color: var(--text-secondary);
    font-size: 14px;
}

.staff-name-link {
    text-decoration: none;
    color: var(--text-secondary);
    transition: color 0.3s ease;
}

.staff-name-link:hover {
    color: var(--anime-primary);
}

.staff-name-link .staff-name {
    color: inherit;
}

.no-staff {
    color: var(--text-muted);
    text-align: center;
    padding: 40px 20px;
}

/* Watch View - Video Controls Overlay */
.video-player-wrapper {
    position: relative;
    aspect-ratio: 16/9;
    background: black;
    border-radius: 0;
    overflow: hidden;
    border: 1px solid var(--border-color);
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5);
}

@media (min-width: 768px) {
    .video-player-wrapper {
        border-radius: 12px;
    }
}

.video-controls-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    padding: 24px;
    background: linear-gradient(to top, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0.6) 50%, transparent 100%);
    opacity: 0;
    transition: opacity 0.3s;
    pointer-events: none;
}

.video-player-wrapper:hover .video-controls-overlay {
    opacity: 1;
    pointer-events: all;
}

.video-progress-bar {
    width: 100%;
    height: 6px;
    background: #4B5563;
    border-radius: 9999px;
    margin-bottom: 16px;
    cursor: pointer;
    overflow: hidden;
}

.video-progress-fill {
    height: 100%;
    background: var(--anime-primary);
    position: relative;
    border-radius: 9999px;
}

.video-progress-handle {
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 12px;
    height: 12px;
    background: white;
    border-radius: 50%;
    box-shadow: 0 0 4px rgba(0, 0, 0, 0.5);
}

.video-controls-bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: white;
}

.video-controls-left,
.video-controls-right {
    display: flex;
    align-items: center;
    gap: 16px;
}

.video-time {
    font-size: 14px;
    font-weight: 500;
}

.video-quality {
    font-size: 14px;
    font-weight: 700;
    background: rgba(255, 255, 255, 0.2);
    padding: 2px 8px;
    border-radius: 4px;
}

/* Watch View - Action Button Report */
.action-btn-report {
    margin-right: auto;
}

/* News View - Layout */
.news-layout {
    display: grid;
    grid-template-columns: 1fr;
    gap: 40px;
}

@media (min-width: 1024px) {
    .news-layout {
        grid-template-columns: 1fr 320px;
    }
}

.news-grid-section {
    min-width: 0;
}

.news-grid-section .news-grid {
    display: grid;
    grid-template-columns: repeat(1, 1fr);
    gap: 24px;
}

@media (min-width: 640px) {
    .news-grid-section .news-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

.news-sidebar {
    display: flex;
    flex-direction: column;
    gap: 32px;
}

.sidebar-card {
    background: var(--anime-surface);
    padding: 24px;
    border-radius: 16px;
    border: 1px solid var(--border-color);
}

.sidebar-title {
    color: var(--text-primary);
    font-size: 20px;
    font-weight: 700;
    margin-bottom: 16px;
}

.tags-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.tag-item {
    background: rgba(255, 255, 255, 0.05);
    color: var(--text-muted);
    padding: 6px 12px;
    border-radius: 8px;
    text-decoration: none;
    font-size: 14px;
    border: 1px solid var(--border-color);
    transition: all 0.3s;
}

.tag-item:hover {
    background: rgba(124, 58, 237, 0.2);
    color: var(--anime-primary);
    border-color: rgba(124, 58, 237, 0.5);
}

.most-read-list {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.most-read-item {
    display: flex;
    gap: 16px;
    cursor: pointer;
    text-decoration: none;
    color: inherit;
}

.most-read-number {
    font-size: 24px;
    font-weight: 900;
    color: #374151;
    font-style: italic;
    transition: color 0.3s;
}

.most-read-item:hover .most-read-number {
    color: var(--anime-accent);
}

.most-read-content {
    display: flex;
    flex-direction: column;
}

.most-read-title {
    font-size: 14px;
    font-weight: 700;
    color: var(--text-secondary);
    margin-bottom: 4px;
    transition: color 0.3s;
}

.most-read-item:hover .most-read-title {
    color: var(--text-primary);
}

.most-read-views {
    font-size: 12px;
    color: var(--text-muted);
}

/* Post View - Quote Box */
.post-quote-box {
    background: var(--anime-surface);
    border-right: 4px solid var(--anime-accent);
    padding: 24px;
    margin: 32px 0;
    border-radius: 0 8px 8px 0;
}

.post-quote-text {
    font-style: italic;
    color: var(--text-muted);
    font-size: 16px;
    line-height: 1.6;
    margin-bottom: 8px;
}

.post-quote-source {
    color: var(--text-muted);
    font-size: 14px;
    text-align: left;
}

/* Dashboard View - Header Gradient */
.dashboard-header-gradient {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 128px;
    background: linear-gradient(to right, var(--anime-primary), var(--anime-secondary));
    opacity: 0.2;
}

.dashboard-header {
    position: relative;
    overflow: hidden;
}

.profile-level {
    display: flex;
    align-items: center;
    gap: 4px;
}

.profile-level svg {
    color: #FBBF24;
}

.btn-icon {
    padding: 12px !important;
    min-width: auto !important;
}

/* Remove padding for specific buttons */
a.btn.btn-secondary.btn-icon,
a.btn.btn-danger.btn-icon,
button.dashboard-card-remove,
button.mobile-menu-close,
a.social-link.social-facebook,
a.social-link.social-discord {
    padding: 0 !important;
}

/* Watchlist Episode Badge */
.watchlist-episode-badge {
    position: absolute;
    top: 8px;
    left: 8px;
    background: rgba(0, 0, 0, 0.6);
    color: white;
    font-size: 12px;
    padding: 4px 8px;
    border-radius: 4px;
    font-weight: 700;
}

/* Print styles */
@media print {
    .anime-header,
    .anime-footer,
    .hero-slider-controls,
    .btn,
    button {
        display: none;
    }
}

/* Tag Page Styles */
.tag-page-container {
    padding: 40px 0 80px;
    min-height: calc(100vh - 80px);
}

.tag-page-header {
    margin-bottom: 40px;
    text-align: center;
}

.tag-page-title {
    font-size: 2.5rem;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0 0 16px 0;
}

.tag-page-description {
    font-size: 1.125rem;
    color: var(--text-muted);
    margin: 0;
}

.tag-filters-section {
    background: rgba(22, 27, 46, 0.9);
    backdrop-filter: blur(12px);
    border: 1px solid var(--border-color);
    border-radius: 16px;
    padding: 24px;
    margin-bottom: 32px;
}

.filters-grid {
    display: grid;
    grid-template-columns: repeat(1, 1fr);
    gap: 20px;
}

@media (min-width: 768px) {
    .filters-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 1024px) {
    .filters-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

.filter-group {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.filter-group.filter-buttons {
    flex-direction: row;
    align-items: flex-end;
    gap: 12px;
}

.filter-label {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--text-secondary);
}

.filter-input,
.filter-select {
    width: 100%;
    padding: 12px 16px;
    background: rgba(18, 20, 32, 0.8);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    color: var(--text-primary);
    font-size: 0.9375rem;
    transition: all 0.3s;
}

.filter-input:focus,
.filter-select:focus {
    outline: none;
    border-color: var(--anime-primary);
    box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.1);
}

.filter-submit-btn,
.filter-reset-btn {
    padding: 12px 24px;
    border-radius: 8px;
    font-weight: 600;
    font-size: 0.9375rem;
    cursor: pointer;
    transition: all 0.3s;
    border: none;
    text-decoration: none;
    display: inline-block;
}

.filter-submit-btn {
    background: var(--anime-primary);
    color: var(--text-primary);
}

.filter-submit-btn:hover {
    background: #6d28d9;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(124, 58, 237, 0.3);
}

.filter-reset-btn {
    background: rgba(18, 20, 32, 0.8);
    color: var(--text-secondary);
    border: 1px solid var(--border-color);
}

.filter-reset-btn:hover {
    background: rgba(18, 20, 32, 1);
    color: var(--text-primary);
}

.tag-results-count {
    margin-bottom: 24px;
    color: var(--text-muted);
    font-size: 0.9375rem;
}

.tag-results-count strong {
    color: var(--text-primary);
    font-weight: 700;
}

/* Tag page uses same grid as home page */
.tag-page-container .anime-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
    width: 100%;
    max-width: 1400px;
}

@media (min-width: 1024px) {
    .tag-page-container .anime-grid {
        grid-template-columns: repeat(5, 1fr);
    }
}

.tag-no-results {
    text-align: center;
    padding: 60px 20px;
    color: var(--text-muted);
    font-size: 1.125rem;
}

.tag-load-more-container {
    text-align: center;
    margin-top: 40px;
}

.tag-load-more-btn {
    padding: 14px 32px;
    background: var(--anime-primary);
    color: var(--text-primary);
    border: none;
    border-radius: 8px;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s;
}

.tag-load-more-btn:hover:not(:disabled) {
    background: #6d28d9;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(124, 58, 237, 0.3);
}

.tag-load-more-btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

/* Library Page Styles */
.library-page-container {
    padding: 40px 0 80px;
    min-height: calc(100vh - 80px);
}

.library-page-header {
    margin-bottom: 40px;
    text-align: center;
}

.library-page-title {
    font-size: 2.5rem;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0 0 16px 0;
}

.library-page-description {
    font-size: 1.125rem;
    color: var(--text-muted);
    margin: 0;
}

.library-filters-section {
    background: rgba(22, 27, 46, 0.9);
    backdrop-filter: blur(12px);
    border: 1px solid var(--border-color);
    border-radius: 16px;
    padding: 24px;
    margin-bottom: 32px;
}

.library-filters-form .filters-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
}

@media (min-width: 768px) {
    .library-filters-form .filters-grid {
        grid-template-columns: repeat(4, 1fr);
    }
}

@media (min-width: 1200px) {
    .library-filters-form .filters-grid {
        grid-template-columns: repeat(8, 1fr);
    }
}

.library-filters-form .filter-group {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.library-filters-form .filter-label {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--text-secondary);
}

.library-filters-form .filter-input,
.library-filters-form .filter-select {
    padding: 10px 14px;
    background: rgba(18, 20, 32, 0.8);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    color: var(--text-primary);
    font-size: 0.875rem;
    transition: all 0.3s;
}

.library-filters-form .filter-input:focus,
.library-filters-form .filter-select:focus {
    outline: none;
    border-color: var(--anime-primary);
    box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.2);
}

.library-filters-form .filter-input::placeholder {
    color: var(--text-muted);
}

.library-filters-form .filter-select option {
    background: #121420;
    color: var(--text-primary);
}

.library-filters-form .filter-buttons {
    display: flex;
    gap: 8px;
    align-items: flex-end;
}

.library-filters-form .filter-submit-btn {
    padding: 10px 20px;
    background: var(--anime-primary);
    color: var(--text-primary);
    border: none;
    border-radius: 8px;
    font-size: 0.875rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s;
}

.library-filters-form .filter-submit-btn:hover {
    background: #6d28d9;
}

.library-filters-form .filter-reset-btn {
    padding: 10px 20px;
    background: transparent;
    color: var(--text-muted);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    font-size: 0.875rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s;
    text-decoration: none;
}

.library-filters-form .filter-reset-btn:hover {
    background: rgba(255, 255, 255, 0.1);
    color: var(--text-primary);
}

.library-results-count {
    margin-bottom: 24px;
    color: var(--text-muted);
    font-size: 0.875rem;
}

.library-results-count strong {
    color: var(--text-primary);
    font-weight: 700;
}

/* Library page uses same grid as home page */
.library-page-container .anime-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
    width: 100%;
    max-width: 1400px;
}

@media (min-width: 1024px) {
    .library-page-container .anime-grid {
        grid-template-columns: repeat(5, 1fr);
    }
}

.library-no-results {
    text-align: center;
    padding: 60px 20px;
    color: var(--text-muted);
    font-size: 1.125rem;
    grid-column: 1 / -1;
}

.library-load-more-container {
    text-align: center;
    margin-top: 40px;
}

.library-load-more-btn {
    padding: 14px 32px;
    background: var(--anime-primary);
    color: var(--text-primary);
    border: none;
    border-radius: 8px;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s;
}

.library-load-more-btn:hover:not(:disabled) {
    background: #6d28d9;
    transform: translateY(-2px);
}

.library-load-more-btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

/* ========================================
   SETTINGS PAGE STYLES
   ======================================== */

.settings-view {
    padding: 0;
    min-height: 100vh;
}

.settings-container {
    max-width: 900px;
    margin: 0 auto;
}

/* Settings Header */
.settings-header {
    position: relative;
    height: 280px;
    background-size: cover;
    background-position: center;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 16px;
}

.settings-header-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom, rgba(11, 15, 26, 0.3), rgba(11, 15, 26, 0.95));
}

.settings-header-content {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 12px;
}

.settings-avatar-wrapper {
    position: relative;
}

.settings-avatar {
    width: 120px;
    height: 120px;
    border-radius: 50%;
    object-fit: cover;
    border: 4px solid var(--anime-primary);
    box-shadow: 0 0 30px rgba(124, 58, 237, 0.5);
}

.settings-level-badge {
    position: absolute;
    bottom: -5px;
    right: -5px;
    width: 40px;
    height: 40px;
    background: linear-gradient(135deg, var(--anime-primary), #9333ea);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 3px solid var(--anime-bg);
    box-shadow: 0 2px 10px rgba(124, 58, 237, 0.5);
}

.settings-level-badge .level-number {
    color: white;
    font-weight: 700;
    font-size: 1rem;
}

.settings-username {
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0;
}

.settings-xp-bar {
    width: 280px;
    height: 24px;
    background: rgba(0, 0, 0, 0.5);
    border-radius: 12px;
    position: relative;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.settings-xp-bar .xp-progress {
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, var(--anime-primary), #9333ea);
    border-radius: 12px;
    transition: width 0.5s ease;
}

.settings-xp-bar .xp-text {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    font-size: 0.75rem;
    font-weight: 600;
    color: white;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}

/* Settings Nav */
.settings-nav {
    padding: 16px 20px;
    background: var(--anime-surface);
    border-bottom: 1px solid var(--border-color);
}

.settings-nav-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--text-muted);
    text-decoration: none;
    font-size: 0.875rem;
    font-weight: 500;
    transition: all 0.2s;
}

.settings-nav-btn:hover {
    color: var(--anime-primary);
}

.settings-nav-btn svg {
    transform: rotate(180deg);
}

/* Settings Message */
.settings-message {
    margin: 20px;
    padding: 16px 20px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    gap: 12px;
    font-weight: 500;
}

.settings-message.success {
    background: rgba(34, 197, 94, 0.15);
    color: #22c55e;
    border: 1px solid rgba(34, 197, 94, 0.3);
}

.settings-message.error {
    background: rgba(239, 68, 68, 0.15);
    color: #ef4444;
    border: 1px solid rgba(239, 68, 68, 0.3);
}

/* Settings Form */
.settings-form {
    padding: 20px;
}

.settings-section {
    background: var(--anime-surface);
    border: 1px solid var(--border-color);
    border-radius: 16px;
    padding: 24px;
    margin-bottom: 24px;
}

.settings-section-title {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0 0 24px 0;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--border-color);
}

.settings-section-title svg {
    color: var(--anime-primary);
}

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

.settings-field:last-child {
    margin-bottom: 0;
}

.settings-field label {
    display: block;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--text-secondary);
    margin-bottom: 8px;
}

.settings-field input {
    width: 100%;
    padding: 14px 16px;
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid var(--border-color) !important;
    border-radius: 10px;
    color: var(--text-primary);
    font-size: 1rem;
    transition: all 0.2s;
}

.settings-field input:focus,
.settings-field textarea:focus {
    outline: none;
    border-color: var(--anime-primary) !important;
    box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.2);
}

.settings-field textarea {
    width: 100%;
    padding: 14px 16px;
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid var(--border-color) !important;
    border-radius: 10px;
    color: var(--text-primary);
    font-size: 1rem;
    resize: vertical;
    min-height: 80px;
}

/* Genres Selection */
.genres-selection {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.genre-checkbox {
    display: inline-flex;
    align-items: center;
    padding: 8px 16px;
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid var(--border-color);
    border-radius: 20px;
    cursor: pointer;
    transition: all 0.2s;
}

.genre-checkbox:hover {
    border-color: var(--anime-primary);
}

.genre-checkbox.selected,
.genre-checkbox:has(input:checked) {
    background: rgba(124, 58, 237, 0.2);
    border-color: var(--anime-primary);
}

.genre-checkbox input {
    display: none;
}

.genre-checkbox span {
    font-size: 0.875rem;
    color: var(--text-secondary);
}

.genre-checkbox:has(input:checked) span {
    color: var(--anime-primary);
    font-weight: 500;
}

.field-hint {
    font-size: 0.75rem;
    color: var(--text-muted);
    margin: 8px 0 0 0;
}

/* Level Info Grid */
.level-info-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    margin-bottom: 24px;
}

.level-info-card {
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 20px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
}

.level-info-icon {
    width: 60px;
    height: 60px;
    background: linear-gradient(135deg, var(--anime-primary), #9333ea);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
}

.level-info-icon.xp-icon {
    background: linear-gradient(135deg, #fbbf24, #f59e0b);
}

.level-info-icon.next-icon {
    background: linear-gradient(135deg, #22c55e, #16a34a);
}

.level-info-text {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.level-info-value {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--text-primary);
}

.level-info-label {
    font-size: 0.75rem;
    color: var(--text-muted);
}

/* XP Actions Info */
.xp-actions-info h3 {
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0 0 16px 0;
}

.xp-actions-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.xp-actions-list li {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    background: rgba(0, 0, 0, 0.2);
    border-radius: 8px;
    border: 1px solid var(--border-color);
}

.xp-action-icon {
    font-size: 1.25rem;
}

.xp-action-name {
    flex: 1;
    color: var(--text-secondary);
    font-size: 0.875rem;
}

.xp-action-points {
    font-weight: 700;
    color: var(--anime-primary);
    font-size: 0.875rem;
}

/* Settings Actions */
.settings-actions {
    text-align: center;
    padding: 20px 0;
}

.btn-save-settings {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 16px 40px;
    background: linear-gradient(135deg, var(--anime-primary), #9333ea);
    color: white;
    border: none;
    border-radius: 12px;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s;
    box-shadow: 0 4px 15px rgba(124, 58, 237, 0.4);
}

.btn-save-settings:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 25px rgba(124, 58, 237, 0.5);
}

/* Responsive for Settings */
@media (max-width: 768px) {
    .level-info-grid {
        grid-template-columns: 1fr;
    }
    
    .settings-header {
        height: 240px;
    }
    
    .settings-avatar {
        width: 100px;
        height: 100px;
    }
    
    .settings-xp-bar {
        width: 220px;
    }
}

/* ========================================
   DASHBOARD XP BAR STYLES
   ======================================== */

.profile-level-badge {
    position: absolute;
    bottom: -8px;
    right: -8px;
    width: 36px;
    height: 36px;
    background: linear-gradient(135deg, var(--anime-primary), #9333ea);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 3px solid var(--anime-bg);
    box-shadow: 0 2px 10px rgba(124, 58, 237, 0.5);
    font-weight: 700;
    color: white;
    font-size: 0.875rem;
}

.profile-avatar {
    position: relative;
}

.profile-avatar img {
    width: 128px;
    height: 128px;
    border-radius: 50%;
    object-fit: cover;
    border: 4px solid rgba(124, 58, 237, 0.5);
    box-shadow: 0 0 20px rgba(124, 58, 237, 0.3);
}

.profile-xp-bar {
    width: 200px;
    height: 18px;
    background: rgba(0, 0, 0, 0.5);
    border-radius: 9px;
    position: relative;
    overflow: hidden;
    margin-top: 8px;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.profile-xp-progress {
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, var(--anime-primary), #9333ea);
    border-radius: 9px;
    transition: width 0.5s ease;
}

.profile-xp-text {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    font-size: 0.65rem;
    font-weight: 600;
    color: white;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}

.dashboard-header {
    background-size: cover !important;
    background-position: center !important;
}

/* XP Toast Notification */
.xp-toast {
    position: fixed;
    top: 100px;
    left: 50%;
    transform: translateX(-50%) translateY(-20px);
    background: linear-gradient(135deg, var(--anime-primary), #9333ea);
    color: white;
    padding: 12px 24px;
    border-radius: 30px;
    font-weight: 600;
    font-size: 0.875rem;
    box-shadow: 0 4px 20px rgba(124, 58, 237, 0.5);
    z-index: 10001;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    gap: 8px;
}

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

.xp-toast .xp-amount {
    background: rgba(255, 255, 255, 0.2);
    padding: 4px 10px;
    border-radius: 15px;
}

.xp-toast.level-up {
    background: linear-gradient(135deg, #fbbf24, #f59e0b);
}

/* Header Level Badge */
.user-avatar-container {
    position: relative;
    display: inline-flex;
}

.header-level-badge {
    position: absolute;
    bottom: -4px;
    right: -4px;
    width: 20px;
    height: 20px;
    background: linear-gradient(135deg, var(--anime-primary), #9333ea);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.65rem;
    font-weight: 700;
    color: white;
    border: 2px solid var(--anime-bg);
    box-shadow: 0 2px 6px rgba(124, 58, 237, 0.5);
}

.avatar-circle img {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    object-fit: cover;
}

/* User Menu Dropdown */
.user-menu-container {
    position: relative;
}

.user-avatar-container {
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
}

.user-dropdown {
    position: absolute;
    top: calc(100% + 10px);
    left: 0;
    width: 260px;
    background: var(--anime-surface);
    border: 1px solid var(--border-color);
    border-radius: 16px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.4);
    z-index: 1000;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition: all 0.2s ease;
}

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

.user-dropdown-header {
    padding: 16px 20px;
    border-bottom: 1px solid var(--border-color);
    text-align: center;
}

.user-dropdown-name {
    display: block;
    font-weight: 600;
    color: var(--text-primary);
    font-size: 1rem;
    margin-bottom: 4px;
}

.user-dropdown-level {
    font-size: 0.75rem;
    color: var(--anime-primary);
    font-weight: 500;
}

.user-dropdown-links {
    padding: 8px 0;
}

.user-dropdown-link {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 20px;
    color: var(--text-secondary);
    text-decoration: none;
    transition: all 0.2s;
}

.user-dropdown-link:hover {
    background: rgba(124, 58, 237, 0.1);
    color: var(--anime-primary);
}

.user-dropdown-link svg {
    flex-shrink: 0;
}

.dropdown-badge {
    margin-right: auto;
    padding: 2px 8px;
    background: var(--anime-primary);
    border-radius: 10px;
    font-size: 0.7rem;
    font-weight: 600;
    color: white;
}

.user-dropdown-footer {
    padding: 8px;
    border-top: 1px solid var(--border-color);
}

.user-dropdown-logout {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px;
    background: rgba(239, 68, 68, 0.1);
    border-radius: 10px;
    color: #ef4444;
    text-decoration: none;
    font-weight: 500;
    transition: all 0.2s;
}

.user-dropdown-logout:hover {
    background: #ef4444;
    color: white;
}

/* ========================================
   COMMUNITY PROFILE STYLES - PREMIUM DESIGN
   ======================================== */

.community-profile {
    min-height: 100vh;
    background: var(--anime-bg);
}

/* Profile Banner - Premium */
.profile-banner {
    position: relative;
    height: 300px;
    background-size: cover;
    background-position: center;
}

.profile-banner-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, 
        rgba(11, 15, 26, 0) 0%,
        rgba(11, 15, 26, 0.8) 70%,
        rgba(11, 15, 26, 1) 100%);
}

/* Profile Info Card - Premium Glassmorphism */
.profile-info-card {
    position: relative;
    z-index: 10;
    max-width: 1100px;
    width: calc(100% - 40px);
    margin: -120px auto 0;
    background: linear-gradient(135deg, rgba(26, 29, 46, 0.95), rgba(17, 20, 32, 0.98));
    backdrop-filter: blur(20px);
    border: 1px solid rgba(124, 58, 237, 0.2);
    border-radius: 24px;
    padding: 32px;
    box-shadow: 
        0 25px 50px -12px rgba(0, 0, 0, 0.5),
        0 0 0 1px rgba(255, 255, 255, 0.05) inset,
        0 0 100px rgba(124, 58, 237, 0.1);
}

.profile-info-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(124, 58, 237, 0.5), transparent);
}

/* Profile Header Row */
.profile-header-row {
    display: flex;
    gap: 28px;
    align-items: flex-start;
}

.profile-avatar-section {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    flex-shrink: 0;
}

.profile-avatar-large {
    position: relative;
    width: 140px;
    height: 140px;
}

.profile-avatar-large::before {
    content: '';
    position: absolute;
    inset: -4px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--anime-primary), #ec4899, var(--anime-primary));
    animation: avatarGlow 3s ease-in-out infinite;
}

@keyframes avatarGlow {
    0%, 100% { opacity: 0.7; transform: scale(1); }
    50% { opacity: 1; transform: scale(1.02); }
}

.profile-avatar-large img {
    position: relative;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
    border: 4px solid var(--anime-bg);
}

.profile-level-badge-large {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 42px;
    height: 42px;
    background: linear-gradient(135deg, #fbbf24, #f59e0b);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    font-weight: 800;
    color: #1a1d2e;
    border: 3px solid var(--anime-bg);
    box-shadow: 0 4px 15px rgba(251, 191, 36, 0.4);
}

.edit-profile-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    background: rgba(124, 58, 237, 0.15);
    border: 1px solid rgba(124, 58, 237, 0.3);
    border-radius: 20px;
    color: var(--anime-primary);
    text-decoration: none;
    font-size: 0.8rem;
    font-weight: 500;
    transition: all 0.3s;
}

.edit-profile-btn:hover {
    background: var(--anime-primary);
    color: white;
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(124, 58, 237, 0.4);
}

/* Profile Details */
.profile-details {
    flex: 1;
    min-width: 0;
}

.profile-name-row {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 8px;
}

.profile-display-name {
    font-size: 2rem;
    font-weight: 800;
    color: var(--text-primary);
    margin: 0;
    background: linear-gradient(135deg, #fff, #a78bfa);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.profile-verified-badge {
    width: 24px;
    height: 24px;
    background: linear-gradient(135deg, #3b82f6, #8b5cf6);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.profile-verified-badge svg {
    width: 14px;
    height: 14px;
    color: white;
}

.profile-meta-row {
    display: flex;
    align-items: center;
    gap: 16px;
    color: var(--text-muted);
    font-size: 0.85rem;
    margin-bottom: 16px;
}

.profile-meta-item {
    display: flex;
    align-items: center;
    gap: 6px;
}

.profile-meta-item svg {
    color: var(--anime-primary);
    width: 14px;
    height: 14px;
}

/* XP Section - Premium */
.profile-xp-section {
    background: rgba(0, 0, 0, 0.3);
    border-radius: 16px;
    padding: 16px 20px;
    margin-bottom: 16px;
}

.profile-xp-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
}

.profile-xp-level {
    display: flex;
    align-items: center;
    gap: 8px;
}

.profile-xp-level-icon {
    width: 28px;
    height: 28px;
    background: linear-gradient(135deg, #fbbf24, #f59e0b);
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.85rem;
    font-weight: 700;
    color: #1a1d2e;
}

.profile-xp-level-text {
    font-weight: 600;
    color: var(--text-primary);
}

.profile-xp-amount {
    font-size: 0.85rem;
    color: var(--text-muted);
}

.profile-xp-bar-container {
    position: relative;
    margin: 0;
}

.profile-xp-bar {
    width: 100%;
    height: 10px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 5px;
    overflow: hidden;
}

.profile-xp-progress {
    height: 100%;
    background: linear-gradient(90deg, var(--anime-primary), #ec4899);
    border-radius: 5px;
    transition: width 0.8s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
}

.profile-xp-progress::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent);
    animation: xpShine 2s ease-in-out infinite;
}

@keyframes xpShine {
    0% { transform: translateX(-100%); }
    100% { transform: translateX(100%); }
}

.profile-xp-text {
    display: none;
}

/* Profile Bio - Premium */
.profile-bio {
    color: var(--text-secondary);
    font-size: 0.95rem;
    line-height: 1.7;
    margin: 0 0 16px 0;
    padding: 12px 16px;
    background: rgba(124, 58, 237, 0.05);
    border-right: 3px solid var(--anime-primary);
    border-radius: 0 12px 12px 0;
}

.profile-bio-empty {
    background: rgba(0, 0, 0, 0.2);
    border-right-color: var(--text-muted);
}

.profile-bio-empty a {
    color: var(--anime-primary);
    text-decoration: none;
    font-weight: 500;
}

.profile-bio-empty a:hover {
    text-decoration: underline;
}

/* Profile Genres - Premium Tags */
.profile-genres {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 0;
}

.genre-tag {
    padding: 6px 14px;
    background: linear-gradient(135deg, rgba(124, 58, 237, 0.15), rgba(236, 72, 153, 0.1));
    border: 1px solid rgba(124, 58, 237, 0.25);
    border-radius: 20px;
    color: #a78bfa;
    font-size: 0.8rem;
    font-weight: 500;
    transition: all 0.3s;
}

.genre-tag:hover {
    background: rgba(124, 58, 237, 0.25);
    transform: translateY(-2px);
}

/* Profile Stats - Premium Cards */
.profile-stats-section {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
    margin-top: 24px;
    padding-top: 24px;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
}

.profile-stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 16px 12px;
    background: rgba(0, 0, 0, 0.25);
    border-radius: 16px;
    border: 1px solid rgba(255, 255, 255, 0.03);
    transition: all 0.3s;
    cursor: pointer;
}

.profile-stat:hover {
    background: rgba(124, 58, 237, 0.1);
    border-color: rgba(124, 58, 237, 0.2);
    transform: translateY(-3px);
}

.profile-stat .stat-number {
    font-size: 1.75rem;
    font-weight: 800;
    color: var(--text-primary);
    line-height: 1;
    margin-bottom: 4px;
}

.profile-stat .stat-label {
    font-size: 0.75rem;
    color: var(--text-muted);
    font-weight: 500;
}

/* Remove old stats row */
.profile-stats-row {
    display: none;
}

/* Profile Actions - Premium */
.profile-actions {
    display: flex;
    gap: 12px;
    margin-top: 20px;
}

.btn-follow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 28px;
    background: linear-gradient(135deg, var(--anime-primary), #9333ea);
    border: none;
    border-radius: 12px;
    color: white;
    font-weight: 600;
    font-size: 0.95rem;
    cursor: pointer;
    transition: all 0.3s;
    box-shadow: 0 4px 15px rgba(124, 58, 237, 0.3);
}

.btn-follow:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 25px rgba(124, 58, 237, 0.4);
}

.btn-follow.following {
    background: transparent;
    border: 2px solid var(--anime-primary);
    box-shadow: none;
}

.btn-follow.following:hover {
    background: rgba(124, 58, 237, 0.1);
}

.btn-message {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 28px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    color: var(--text-secondary);
    font-weight: 600;
    font-size: 0.95rem;
    cursor: pointer;
    transition: all 0.3s;
}

.btn-message:hover {
    background: rgba(255, 255, 255, 0.1);
    color: white;
    transform: translateY(-3px);
}

/* Profile Content Layout */
.profile-content {
    display: grid;
    grid-template-columns: 1fr 320px;
    gap: 30px;
    max-width: 1200px;
    margin: 0 auto;
    padding: 30px 40px 60px;
}

@media (max-width: 767px) {
    .profile-content {
        grid-template-columns: 1fr;
        padding: 20px 16px 40px;
        gap: 20px;
    }
}

.profile-main {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

/* Profile Sections */
.profile-section {
    background: var(--anime-surface);
    border: 1px solid var(--border-color);
    border-radius: 16px;
    padding: 24px;
}

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

.section-header h3 {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0;
}

.section-header h3 svg {
    color: var(--anime-primary);
}

/* Currently Watching */
.watching-now-card {
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 16px;
    background: rgba(124, 58, 237, 0.1);
    border: 1px solid rgba(124, 58, 237, 0.2);
    border-radius: 12px;
}

.watching-now-image {
    width: 80px;
    height: 110px;
    object-fit: cover;
    border-radius: 8px;
}

.watching-now-info {
    flex: 1;
}

.watching-now-info h4 {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0 0 4px 0;
}

.watching-now-info p {
    color: var(--text-muted);
    font-size: 0.875rem;
    margin: 0 0 10px 0;
}

.watching-now-progress {
    display: flex;
    align-items: center;
    gap: 10px;
}

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

.watching-now-progress .progress-fill {
    height: 100%;
    background: var(--anime-primary);
    border-radius: 3px;
}

.watching-now-progress span {
    font-size: 0.75rem;
    color: var(--text-muted);
}

.btn-discuss {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 20px;
    background: var(--anime-primary);
    border-radius: 20px;
    color: white;
    text-decoration: none;
    font-size: 0.875rem;
    font-weight: 500;
    transition: all 0.2s;
    white-space: nowrap;
}

.btn-discuss:hover {
    background: #6d28d9;
    transform: translateY(-2px);
}

/* Pinned Review */
.pinned-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 12px;
    background: rgba(251, 191, 36, 0.2);
    border: 1px solid rgba(251, 191, 36, 0.3);
    border-radius: 20px;
    color: #fbbf24;
    font-size: 0.75rem;
    font-weight: 500;
}

.btn-unpin {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    background: rgba(239, 68, 68, 0.15);
    border: 1px solid rgba(239, 68, 68, 0.3);
    border-radius: 20px;
    color: #ef4444;
    font-size: 0.8rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s;
}

.btn-unpin:hover {
    background: #ef4444;
    color: white;
}

.pinned-review-card {
    background: rgba(251, 191, 36, 0.1);
    border: 1px solid rgba(251, 191, 36, 0.2);
    border-radius: 12px;
    padding: 20px;
}

.pinned-review-header {
    margin-bottom: 12px;
}

.pinned-review-anime {
    color: var(--anime-secondary);
    font-weight: 600;
    text-decoration: none;
}

.pinned-review-anime:hover {
    text-decoration: underline;
}

.pinned-review-content {
    color: var(--text-secondary);
    line-height: 1.6;
    margin: 0 0 12px 0;
}

.pinned-review-meta {
    font-size: 0.75rem;
    color: var(--text-muted);
}

/* Activity Timeline */
.activity-list {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.activity-item {
    display: flex;
    gap: 16px;
    padding: 16px;
    background: rgba(0, 0, 0, 0.2);
    border-radius: 12px;
    transition: all 0.2s;
}

.activity-item:hover {
    background: rgba(0, 0, 0, 0.3);
}

.activity-icon {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.activity-icon.comment { background: rgba(59, 130, 246, 0.2); color: #3b82f6; }
.activity-icon.favorite { background: rgba(251, 191, 36, 0.2); color: #fbbf24; }
.activity-icon.watchlist { background: rgba(124, 58, 237, 0.2); color: var(--anime-primary); }
.activity-icon.start_watching { background: rgba(34, 197, 94, 0.2); color: #22c55e; }
.activity-icon.complete_series { background: rgba(34, 197, 94, 0.2); color: #22c55e; }
.activity-icon.rating { background: rgba(251, 191, 36, 0.2); color: #fbbf24; }

.activity-content {
    flex: 1;
}

.activity-content p {
    color: var(--text-secondary);
    margin: 0 0 4px 0;
}

.activity-link {
    color: var(--anime-primary);
    text-decoration: none;
    font-weight: 500;
}

.activity-link:hover {
    text-decoration: underline;
}

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

.activity-empty {
    text-align: center;
    padding: 40px;
    color: var(--text-muted);
}

/* Recent Comments */
.comments-list {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.comment-item {
    padding: 16px;
    background: rgba(0, 0, 0, 0.2);
    border-radius: 12px;
}

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

.comment-anime-title {
    color: var(--anime-primary);
    font-weight: 500;
    text-decoration: none;
}

.comment-anime-title:hover {
    text-decoration: underline;
}

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

.comment-content {
    color: var(--text-secondary);
    line-height: 1.5;
    margin: 0;
}

.btn-pin-comment {
    margin-top: 10px;
    padding: 6px 12px;
    background: transparent;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    color: var(--text-muted);
    font-size: 0.75rem;
    cursor: pointer;
    transition: all 0.2s;
}

.btn-pin-comment:hover {
    background: rgba(251, 191, 36, 0.1);
    border-color: var(--anime-secondary);
    color: var(--anime-secondary);
}

/* Custom Lists - Premium */
.lists-count-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 22px;
    height: 22px;
    background: var(--anime-primary);
    border-radius: 11px;
    font-size: 0.75rem;
    font-weight: 600;
    color: white;
    margin-right: 8px;
}

.btn-create-list {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    background: linear-gradient(135deg, var(--anime-primary), #9333ea);
    border: none;
    border-radius: 20px;
    color: white;
    font-size: 0.8rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s;
    box-shadow: 0 4px 15px rgba(124, 58, 237, 0.3);
}

.btn-create-list:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(124, 58, 237, 0.4);
}

.lists-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
}

.list-card {
    position: relative;
    background: linear-gradient(135deg, rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.2));
    border: 1px solid var(--border-color);
    border-radius: 16px;
    transition: all 0.3s;
    overflow: hidden;
}

.list-card:hover {
    border-color: rgba(124, 58, 237, 0.4);
    transform: translateY(-4px);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
}

.list-card-link {
    display: block;
    padding: 20px;
    text-decoration: none;
}

.list-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
}

.list-card-header h4 {
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0;
}

.list-count {
    font-size: 0.7rem;
    color: var(--anime-primary);
    background: rgba(124, 58, 237, 0.15);
    padding: 4px 10px;
    border-radius: 10px;
}

.list-description {
    color: var(--text-muted);
    font-size: 0.85rem;
    margin: 0 0 12px 0;
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.list-preview {
    display: flex;
    gap: 8px;
}

.list-preview-img {
    width: 45px;
    height: 60px;
    object-fit: cover;
    border-radius: 6px;
    border: 2px solid transparent;
    transition: all 0.2s;
}

.list-card:hover .list-preview-img {
    border-color: var(--anime-primary);
}

.list-empty-preview {
    width: 100%;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.2);
    border-radius: 8px;
    color: var(--text-muted);
}

.list-card-actions {
    position: absolute;
    top: 12px;
    left: 12px;
    display: flex;
    gap: 6px;
    opacity: 0;
    transition: all 0.2s;
}

.list-card:hover .list-card-actions {
    opacity: 1;
}

.btn-list-action {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: var(--text-secondary);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s;
    padding: 0 !important;
}

.btn-list-action:hover {
    background: var(--anime-primary);
    color: white;
}

.btn-list-action.btn-list-delete:hover {
    background: #ef4444;
}

/* Add New List Card */
.list-card-add {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 160px;
    border: 2px dashed rgba(124, 58, 237, 0.3);
    background: transparent;
    cursor: pointer;
}

.list-card-add:hover {
    border-color: var(--anime-primary);
    background: rgba(124, 58, 237, 0.05);
}

.list-add-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    color: var(--text-muted);
    transition: all 0.2s;
}

.list-card-add:hover .list-add-content {
    color: var(--anime-primary);
}

.list-add-content svg {
    opacity: 0.5;
}

.list-card-add:hover .list-add-content svg {
    opacity: 1;
}

.lists-empty {
    grid-column: 1 / -1;
    text-align: center;
    padding: 50px;
    color: var(--text-muted);
}

.lists-empty svg {
    opacity: 0.3;
    margin-bottom: 16px;
}

.btn-create-list-empty {
    margin-top: 16px;
    padding: 12px 28px;
    background: linear-gradient(135deg, var(--anime-primary), #9333ea);
    border: none;
    border-radius: 25px;
    color: white;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s;
    box-shadow: 0 4px 15px rgba(124, 58, 237, 0.3);
}

.btn-create-list-empty:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(124, 58, 237, 0.4);
}

/* Checkbox Group */
.checkbox-group label {
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
}

.checkbox-group input[type="checkbox"] {
    width: 18px;
    height: 18px;
    accent-color: var(--anime-primary);
}

.checkbox-label {
    color: var(--text-secondary);
    font-size: 0.9rem;
}

/* Profile Sidebar */
.profile-sidebar {
    display: flex;
    flex-direction: column;
    gap: 24px;
    position: sticky;
    top: 100px;
    height: fit-content;
    align-self: flex-start;
    z-index: 10;
}

/* Fix for sticky sidebars overlapping */
.profile-content {
    align-items: flex-start;
}

.profile-main {
    min-width: 0; /* Prevent flex overflow */
}

.sidebar-section {
    background: var(--anime-surface);
    border: 1px solid var(--border-color);
    border-radius: 16px;
    padding: 20px;
}

.sidebar-section h4 {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0 0 16px 0;
}

.sidebar-section h4 svg {
    color: var(--anime-primary);
}

/* Badges */
.badges-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
}

.badge-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 12px 8px;
    background: rgba(0, 0, 0, 0.2);
    border-radius: 10px;
    text-align: center;
    transition: all 0.2s;
}

.badge-item.locked {
    opacity: 0.4;
    filter: grayscale(1);
}

.badge-item.unlocked:hover {
    background: rgba(124, 58, 237, 0.15);
    transform: translateY(-2px);
}

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

.badge-name {
    font-size: 0.7rem;
    color: var(--text-muted);
    line-height: 1.2;
}

/* Followers Preview */
.followers-preview {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.follower-avatar img {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid var(--anime-surface);
    transition: all 0.2s;
}

.follower-avatar:hover img {
    border-color: var(--anime-primary);
    transform: scale(1.1);
}

.followers-more {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: rgba(124, 58, 237, 0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    color: var(--anime-primary);
    font-weight: 600;
}

/* Common Anime */
.common-anime-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.common-anime-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px;
    background: rgba(0, 0, 0, 0.2);
    border-radius: 10px;
    text-decoration: none;
    transition: all 0.2s;
}

.common-anime-item:hover {
    background: rgba(124, 58, 237, 0.15);
}

.common-anime-item img {
    width: 40px;
    height: 55px;
    object-fit: cover;
    border-radius: 6px;
}

.common-anime-item span {
    color: var(--text-secondary);
    font-size: 0.875rem;
    font-weight: 500;
}

/* Quick Stats */
.quick-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
}

.quick-stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 12px;
    background: rgba(0, 0, 0, 0.2);
    border-radius: 10px;
}

.quick-stat-value {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--text-primary);
}

.quick-stat-label {
    font-size: 0.7rem;
    color: var(--text-muted);
}

/* Modals */
.modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.8);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10000;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s;
}

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

.modal-content {
    background: var(--anime-surface);
    border: 1px solid var(--border-color);
    border-radius: 16px;
    width: 90%;
    max-width: 500px;
    max-height: 90vh;
    overflow-y: auto;
}

.modal-content.modal-large {
    max-width: 700px;
}

.modal-body {
    padding: 24px;
}

/* Anime Search in Modal */
.anime-search-container {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.anime-search-box {
    position: relative;
}

.anime-search-box input {
    width: 100%;
    padding: 14px 20px 14px 48px;
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: 14px;
    color: var(--text-primary);
    font-size: 1rem;
    transition: all 0.3s;
}

.anime-search-box input:focus {
    outline: none;
    border-color: var(--anime-primary) !important;
    box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.15);
}

.anime-search-box svg {
    position: absolute;
    right: 16px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-muted);
}

.anime-search-results {
    max-height: 400px;
    overflow-y: auto;
}

.anime-results-grid {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.anime-result-card {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 12px 14px;
    background: rgba(0, 0, 0, 0.2);
    border: 1px solid transparent;
    border-radius: 14px;
    cursor: pointer;
    transition: all 0.3s;
}

.anime-result-card:hover {
    background: rgba(124, 58, 237, 0.1);
    border-color: rgba(124, 58, 237, 0.3);
}

.anime-result-card img {
    width: 50px;
    height: 70px;
    object-fit: cover;
    border-radius: 8px;
}

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

.anime-result-info h4 {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0 0 4px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.anime-result-info span {
    font-size: 0.8rem;
    color: var(--text-muted);
}

.btn-add-to-list {
    width: 36px;
    height: 36px;
    background: var(--anime-primary);
    border: none;
    border-radius: 50%;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s;
    flex-shrink: 0;
    padding: 0 !important;
}

.btn-add-to-list:hover {
    transform: scale(1.1);
    box-shadow: 0 4px 15px rgba(124, 58, 237, 0.4);
}

.search-hint, .search-loading, .search-no-results, .search-error {
    text-align: center;
    padding: 40px 20px;
    color: var(--text-muted);
}

/* List View Page - Premium */
.list-header .btn-add-anime {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    background: linear-gradient(135deg, var(--anime-primary), #9333ea);
    border: none;
    border-radius: 10px;
    color: white;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s;
    box-shadow: 0 4px 15px rgba(124, 58, 237, 0.3);
}

.list-header .btn-add-anime:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(124, 58, 237, 0.4);
}

.list-visibility-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    border-radius: 6px;
    font-size: 0.8rem;
}

.list-visibility-badge.public {
    background: rgba(16, 185, 129, 0.15);
    color: #10b981;
}

.list-visibility-badge.private {
    background: rgba(239, 68, 68, 0.15);
    color: #ef4444;
}

.list-header-actions {
    margin-top: 16px;
}

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

.modal-header h3 {
    margin: 0;
    font-size: 1.25rem;
    color: var(--text-primary);
}

.modal-close {
    background: none;
    border: none;
    color: var(--text-muted);
    font-size: 1.5rem;
    cursor: pointer;
    padding: 0;
    line-height: 1;
}

.modal-close:hover {
    color: var(--text-primary);
}

#create-list-form,
#message-form {
    padding: 24px;
}

.form-group {
    margin-bottom: 20px;
}

.form-group label {
    display: block;
    margin-bottom: 8px;
    color: var(--text-secondary);
    font-weight: 500;
}

.form-group input[type="text"],
.form-group input[type="url"],
.form-group textarea {
    width: 100%;
    padding: 12px 16px;
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid var(--border-color) !important;
    border-radius: 10px;
    color: var(--text-primary);
    font-size: 1rem;
}

.form-group input:focus,
.form-group textarea:focus {
    outline: none;
    border-color: var(--anime-primary) !important;
}

.form-group input[type="checkbox"] {
    width: auto;
    margin-left: 8px;
}

.modal-actions {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    padding-top: 10px;
}

.btn-secondary {
    padding: 10px 24px;
    background: transparent;
    border: 1px solid var(--border-color);
    border-radius: 25px;
    color: var(--text-secondary);
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
}

.btn-secondary:hover {
    background: rgba(255, 255, 255, 0.05);
}

.btn-primary {
    padding: 10px 24px;
    background: var(--anime-primary);
    border: none;
    border-radius: 25px;
    color: white;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
}

.btn-primary:hover {
    background: #6d28d9;
}

/* Responsive Profile */
@media (max-width: 1024px) {
    .profile-content {
        grid-template-columns: 1fr;
        padding: 20px;
    }
    
    .profile-sidebar {
        order: -1;
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 16px;
    }
}

@media (max-width: 768px) {
    .profile-banner {
        height: 280px;
        padding-bottom: 0;
    }
    
    .profile-info-card {
        flex-direction: column;
        align-items: center;
        text-align: center;
        padding: 0 20px;
        transform: translateY(60px);
    }
    
    .profile-avatar-large {
        width: 120px;
        height: 120px;
    }
    
    .profile-display-name {
        font-size: 1.5rem;
    }
    
    .profile-meta-row {
        justify-content: center;
        flex-wrap: wrap;
    }
    
    .profile-stats-row {
        justify-content: center;
    }
    
    .profile-actions {
        justify-content: center;
    }
    
    .profile-content {
        margin-top: 80px;
        padding: 20px 16px;
    }
    
    .profile-sidebar {
        grid-template-columns: 1fr;
        position: static !important;
        order: -1;
        top: auto !important;
        z-index: 1 !important;
    }
    
    .profile-main {
        width: 100%;
    }
    
    .lists-grid {
        grid-template-columns: 1fr;
    }
    
    .watching-now-card {
        flex-direction: column;
        text-align: center;
    }
}

/* ========================================
   FEED VIEW STYLES - PREMIUM DESIGN V2
   ======================================== */

.feed-view-premium {
    display: grid;
    grid-template-columns: 1fr 360px;
    gap: 28px;
    max-width: 1200px;
    margin: 0 auto;
    padding: 28px 20px 60px;
    min-height: 100vh;
    align-items: flex-start;
}

.feed-main {
    display: flex;
    flex-direction: column;
    gap: 24px;
    min-width: 0;
}

/* Feed Header Card - Premium Greeting */
.feed-header-card {
    position: relative;
    background: linear-gradient(135deg, rgba(26, 29, 46, 0.98), rgba(17, 20, 32, 0.95));
    border-radius: 24px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.05);
}

.feed-header-bg {
    position: absolute;
    inset: 0;
    background: 
        radial-gradient(ellipse at 20% 30%, rgba(124, 58, 237, 0.15) 0%, transparent 50%),
        radial-gradient(ellipse at 80% 70%, rgba(236, 72, 153, 0.1) 0%, transparent 50%);
}

.feed-header-content {
    position: relative;
    padding: 28px 32px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.feed-user-greeting {
    display: flex;
    align-items: center;
    gap: 16px;
}

.greeting-avatar {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    object-fit: cover;
    border: 3px solid var(--anime-primary);
    box-shadow: 0 0 20px rgba(124, 58, 237, 0.3);
}

.greeting-text {
    display: flex;
    flex-direction: column;
}

.greeting-hello {
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--text-primary);
}

.greeting-subtitle {
    font-size: 0.9rem;
    color: var(--text-muted);
    margin-top: 2px;
}

.feed-header-stats {
    display: flex;
    gap: 24px;
}

.header-stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 12px 20px;
    background: rgba(0, 0, 0, 0.3);
    border-radius: 14px;
}

.header-stat .stat-num {
    font-size: 1.5rem;
    font-weight: 800;
    color: var(--text-primary);
}

.header-stat .stat-txt {
    font-size: 0.75rem;
    color: var(--text-muted);
}

/* Feed Empty State */
.feed-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 60px 20px;
    background: var(--anime-surface);
    border: 1px solid var(--border-color);
    border-radius: 16px;
}

.feed-empty-icon {
    width: 100px;
    height: 100px;
    background: rgba(124, 58, 237, 0.1);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 24px;
}

.feed-empty-icon svg {
    color: var(--anime-primary);
}

.feed-empty h2 {
    font-size: 1.25rem;
    color: var(--text-primary);
    margin: 0 0 8px 0;
}

.feed-empty p {
    color: var(--text-muted);
    margin: 0 0 24px 0;
}

.btn-explore {
    padding: 12px 32px;
    background: var(--anime-primary);
    border-radius: 25px;
    color: white;
    text-decoration: none;
    font-weight: 600;
    transition: all 0.2s;
}

.btn-explore:hover {
    background: #6d28d9;
    transform: translateY(-2px);
}

/* Feed List */
.feed-list {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.feed-item {
    display: flex;
    gap: 16px;
    padding: 20px;
    background: var(--anime-surface);
    border: 1px solid var(--border-color);
    border-radius: 16px;
    transition: all 0.2s;
}

.feed-item:hover {
    border-color: rgba(124, 58, 237, 0.3);
}

.feed-item-avatar img {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid transparent;
    transition: all 0.2s;
}

.feed-item-avatar:hover img {
    border-color: var(--anime-primary);
}

.feed-item-content {
    flex: 1;
}

.feed-item-header {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 8px;
}

.feed-item-user {
    font-weight: 600;
    color: var(--text-primary);
    text-decoration: none;
}

.feed-item-user:hover {
    color: var(--anime-primary);
}

.feed-item-action {
    color: var(--text-secondary);
}

.feed-item-anime {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    background: rgba(0, 0, 0, 0.2);
    border-radius: 10px;
    text-decoration: none;
    margin-bottom: 8px;
    transition: all 0.2s;
}

.feed-item-anime:hover {
    background: rgba(124, 58, 237, 0.15);
}

.feed-item-anime-img {
    width: 35px;
    height: 48px;
    object-fit: cover;
    border-radius: 4px;
}

.feed-item-anime span {
    color: var(--anime-primary);
    font-weight: 500;
    font-size: 0.9rem;
}

.feed-item-time {
    display: block;
    font-size: 0.75rem;
    color: var(--text-muted);
}

.feed-item-icon {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.feed-item-icon.comment { background: rgba(59, 130, 246, 0.15); color: #3b82f6; }
.feed-item-icon.favorite { background: rgba(251, 191, 36, 0.15); color: #fbbf24; }
.feed-item-icon.watchlist { background: rgba(124, 58, 237, 0.15); color: var(--anime-primary); }
.feed-item-icon.start_watching { background: rgba(34, 197, 94, 0.15); color: #22c55e; }
.feed-item-icon.complete_series { background: rgba(34, 197, 94, 0.15); color: #22c55e; }
.feed-item-icon.follow { background: rgba(59, 130, 246, 0.15); color: #3b82f6; }
.feed-item-icon.create_list { background: rgba(124, 58, 237, 0.15); color: var(--anime-primary); }

/* Feed Load More */
.feed-load-more {
    text-align: center;
    padding: 20px 0;
}

.btn-load-more {
    padding: 12px 32px;
    background: transparent;
    border: 1px solid var(--anime-primary);
    border-radius: 25px;
    color: var(--anime-primary);
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
}

.btn-load-more:hover:not(:disabled) {
    background: var(--anime-primary);
    color: white;
}

.btn-load-more:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

/* Feed Empty State - Premium */
.feed-empty-premium {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 80px 40px;
    background: linear-gradient(135deg, rgba(26, 29, 46, 0.6), rgba(17, 20, 32, 0.6));
    border-radius: 24px;
    border: 1px solid rgba(255, 255, 255, 0.05);
}

.empty-illustration {
    position: relative;
    margin-bottom: 28px;
}

.empty-circle {
    position: absolute;
    inset: -20px;
    background: radial-gradient(circle, rgba(124, 58, 237, 0.15), transparent 70%);
    border-radius: 50%;
    animation: pulse 3s ease-in-out infinite;
}

.empty-illustration svg {
    position: relative;
    color: var(--anime-primary);
    opacity: 0.8;
}

.feed-empty-premium h2 {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0 0 10px;
}

.feed-empty-premium p {
    color: var(--text-muted);
    max-width: 300px;
    margin: 0 0 24px;
    line-height: 1.6;
}

.btn-discover {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 14px 28px;
    background: linear-gradient(135deg, var(--anime-primary), #9333ea);
    border-radius: 14px;
    color: white;
    text-decoration: none;
    font-weight: 600;
    transition: all 0.3s;
    box-shadow: 0 4px 20px rgba(124, 58, 237, 0.3);
}

.btn-discover:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 30px rgba(124, 58, 237, 0.4);
}

/* Feed Timeline - Premium */
.feed-timeline {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.timeline-item {
    display: flex;
    gap: 16px;
    position: relative;
    padding: 20px 0;
}

.timeline-item:first-child {
    padding-top: 0;
}

.timeline-connector {
    position: absolute;
    top: 70px;
    right: 23px;
    bottom: 0;
    width: 2px;
    background: linear-gradient(180deg, rgba(124, 58, 237, 0.3), rgba(124, 58, 237, 0.05));
}

.timeline-item:last-child .timeline-connector {
    display: none;
}

.timeline-avatar-wrapper {
    position: relative;
    flex-shrink: 0;
}

.timeline-avatar {
    display: block;
    width: 48px;
    height: 48px;
}

.timeline-avatar img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid rgba(255, 255, 255, 0.1);
    transition: all 0.3s;
}

.timeline-avatar:hover img {
    border-color: var(--anime-primary);
    box-shadow: 0 0 15px rgba(124, 58, 237, 0.3);
}

.timeline-icon {
    position: absolute;
    bottom: -4px;
    left: -4px;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid var(--anime-bg);
}

.timeline-icon.comment { background: #3b82f6; color: white; }
.timeline-icon.favorite { background: #f59e0b; color: white; }
.timeline-icon.watchlist { background: #10b981; color: white; }
.timeline-icon.start_watching { background: var(--anime-primary); color: white; }
.timeline-icon.complete_series { background: #22c55e; color: white; }
.timeline-icon.follow { background: #ec4899; color: white; }
.timeline-icon.create_list { background: #8b5cf6; color: white; }

.timeline-content {
    flex: 1;
    min-width: 0;
    background: linear-gradient(135deg, rgba(26, 29, 46, 0.8), rgba(17, 20, 32, 0.8));
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 16px;
    padding: 16px 20px;
    transition: all 0.3s;
}

.timeline-item:hover .timeline-content {
    border-color: rgba(124, 58, 237, 0.2);
    background: linear-gradient(135deg, rgba(26, 29, 46, 0.95), rgba(17, 20, 32, 0.95));
}

.timeline-header {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 8px;
}

.timeline-username {
    font-weight: 700;
    color: var(--text-primary);
    text-decoration: none;
    transition: color 0.2s;
}

.timeline-username:hover {
    color: var(--anime-primary);
}

.timeline-level {
    font-size: 0.7rem;
    padding: 2px 8px;
    background: linear-gradient(135deg, var(--anime-primary), #9333ea);
    border-radius: 10px;
    color: white;
    font-weight: 600;
}

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

.timeline-anime-card {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    background: rgba(0, 0, 0, 0.3);
    border-radius: 12px;
    text-decoration: none;
    margin: 10px 0;
    transition: all 0.3s;
}

.timeline-anime-card:hover {
    background: rgba(124, 58, 237, 0.15);
    transform: translateX(-4px);
}

.timeline-anime-card img {
    width: 45px;
    height: 60px;
    object-fit: cover;
    border-radius: 8px;
}

.anime-card-info {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.anime-card-title {
    font-weight: 600;
    color: var(--text-primary);
    font-size: 0.9rem;
}

.anime-card-cta {
    font-size: 0.75rem;
    color: var(--anime-primary);
}

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

/* Load More Button - Premium */
.feed-load-more {
    display: flex;
    justify-content: center;
    padding: 20px 0;
}

.btn-load-more-premium {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 14px 32px;
    background: transparent;
    border: 2px solid rgba(124, 58, 237, 0.3);
    border-radius: 14px;
    color: var(--anime-primary);
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s;
}

.btn-load-more-premium:hover {
    background: rgba(124, 58, 237, 0.1);
    border-color: var(--anime-primary);
    transform: translateY(-2px);
}

/* Feed Sidebar - Premium V2 */
.feed-sidebar-premium {
    display: flex;
    flex-direction: column;
    gap: 20px;
    position: sticky;
    top: 100px;
    height: fit-content;
    max-height: calc(100vh - 120px);
    overflow-y: auto;
    z-index: 10;
    align-self: flex-start;
}

.sidebar-premium-card {
    background: linear-gradient(135deg, rgba(26, 29, 46, 0.98), rgba(17, 20, 32, 0.98));
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 20px;
    padding: 22px;
    position: relative;
}

.sidebar-premium-card .card-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 18px;
}

.sidebar-premium-card .card-icon {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--anime-primary), #9333ea);
    color: white;
}

.sidebar-premium-card .card-icon.suggested {
    background: linear-gradient(135deg, #ec4899, #f472b6);
}

.sidebar-premium-card .card-icon.links {
    background: linear-gradient(135deg, #10b981, #34d399);
}

.sidebar-premium-card h3 {
    font-size: 1rem;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0;
}

/* Search Input - Premium */
.search-input-wrapper {
    position: relative;
}

.search-input-wrapper input {
    width: 100%;
    padding: 12px 16px 12px 42px;
    background: rgba(0, 0, 0, 0.4);
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    border-radius: 12px;
    color: var(--text-primary);
    font-size: 0.9rem;
    transition: all 0.3s;
}

.search-input-wrapper input:focus {
    outline: none;
    border-color: var(--anime-primary) !important;
    box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.15);
}

.search-input-wrapper .search-icon {
    position: absolute;
    right: 14px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-muted);
}

.user-search-results {
    margin-top: 12px;
    display: none;
}

.user-search-results.active {
    display: block;
}

.search-result-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px;
    border-radius: 10px;
    text-decoration: none;
    transition: all 0.2s;
}

.search-result-item:hover {
    background: rgba(124, 58, 237, 0.1);
}

.search-result-item img {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    object-fit: cover;
}

.result-info {
    display: flex;
    flex-direction: column;
}

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

.result-level {
    font-size: 0.75rem;
    color: var(--anime-primary);
}

.search-loading, .search-no-results, .search-error {
    padding: 16px;
    text-align: center;
    color: var(--text-muted);
    font-size: 0.9rem;
}

/* Suggested Users List - Premium */
.suggested-users-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.suggested-user-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 12px;
    background: rgba(0, 0, 0, 0.2);
    border-radius: 14px;
    transition: all 0.3s;
}

.suggested-user-item:hover {
    background: rgba(124, 58, 237, 0.1);
}

.suggested-user-item .user-link {
    display: flex;
    align-items: center;
    gap: 12px;
    text-decoration: none;
    flex: 1;
}

.user-avatar-wrapper {
    position: relative;
}

.user-avatar-wrapper img {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    object-fit: cover;
}

.user-level-badge {
    position: absolute;
    bottom: -2px;
    right: -2px;
    width: 18px;
    height: 18px;
    background: linear-gradient(135deg, #fbbf24, #f59e0b);
    border-radius: 50%;
    font-size: 0.65rem;
    font-weight: 700;
    color: #1a1d2e;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid var(--anime-bg);
}

.user-details {
    display: flex;
    flex-direction: column;
}

.user-display-name {
    font-weight: 600;
    color: var(--text-primary);
    font-size: 0.9rem;
}

.user-meta-info {
    font-size: 0.75rem;
    color: var(--text-muted);
}

.btn-follow-mini {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--anime-primary);
    border: none;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s;
    padding: 0 !important;
}

.btn-follow-mini:hover {
    transform: scale(1.1);
    box-shadow: 0 4px 15px rgba(124, 58, 237, 0.4);
}

.btn-follow-mini.following {
    background: #22c55e;
}

.no-suggestions-text {
    text-align: center;
    color: var(--text-muted);
    font-size: 0.9rem;
    padding: 20px;
}

/* Quick Links Grid - Premium */
.quick-links-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
}

.quick-link-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 16px 12px;
    background: rgba(0, 0, 0, 0.2);
    border-radius: 14px;
    text-decoration: none;
    transition: all 0.3s;
}

.quick-link-item:hover {
    background: rgba(124, 58, 237, 0.1);
    transform: translateY(-2px);
}

.quick-link-item .link-icon {
    width: 40px;
    height: 40px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s;
}

.link-icon.profile { background: rgba(124, 58, 237, 0.2); color: var(--anime-primary); }
.link-icon.dashboard { background: rgba(236, 72, 153, 0.2); color: #ec4899; }
.link-icon.messages { background: rgba(59, 130, 246, 0.2); color: #3b82f6; }
.link-icon.settings { background: rgba(16, 185, 129, 0.2); color: #10b981; }

.quick-link-item:hover .link-icon.profile { background: var(--anime-primary); color: white; }
.quick-link-item:hover .link-icon.dashboard { background: #ec4899; color: white; }
.quick-link-item:hover .link-icon.messages { background: #3b82f6; color: white; }
.quick-link-item:hover .link-icon.settings { background: #10b981; color: white; }

.quick-link-item span {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--text-secondary);
}

.quick-link-item:hover span {
    color: var(--text-primary);
}

/* Remove old feed styles */
.feed-view { display: none; }

/* User Search Box */
.user-search-box {
    position: relative;
}

.user-search-box input {
    width: 100%;
    padding: 12px 16px;
    padding-left: 40px;
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid var(--border-color) !important;
    border-radius: 10px;
    color: var(--text-primary);
    font-size: 0.9rem;
}

.user-search-box input:focus {
    outline: none;
    border-color: var(--anime-primary) !important;
}

.user-search-box > svg {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-muted);
    pointer-events: none;
}

.user-search-results {
    display: none;
    margin-top: 12px;
}

.user-search-results.active {
    display: block;
}

.search-result-user {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    background: rgba(0, 0, 0, 0.2);
    border-radius: 10px;
    text-decoration: none;
    margin-bottom: 8px;
    cursor: pointer;
    transition: all 0.2s;
}

.search-result-user:hover {
    background: rgba(124, 58, 237, 0.15);
}

.search-result-user img {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    object-fit: cover;
}

.search-result-info {
    flex: 1;
}

.search-result-name {
    display: block;
    font-weight: 500;
    color: var(--text-primary);
    font-size: 0.9rem;
}

.search-result-meta {
    display: block;
    font-size: 0.75rem;
    color: var(--text-muted);
}

.search-result-user > svg {
    color: var(--text-muted);
    flex-shrink: 0;
}

.search-result-user:hover > svg {
    color: var(--anime-primary);
}

.search-loading,
.search-no-results,
.search-error {
    padding: 16px;
    text-align: center;
    color: var(--text-muted);
    font-size: 0.85rem;
}

.search-users-card h3 {
    display: flex;
    align-items: center;
    gap: 8px;
}

.search-users-card h3 svg {
    color: var(--anime-primary);
}

.feed-sidebar .sidebar-card {
    background: linear-gradient(135deg, rgba(26, 29, 46, 0.95), rgba(17, 20, 32, 0.98));
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 20px;
    padding: 22px;
    position: relative;
    overflow: hidden;
}

.feed-sidebar .sidebar-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg, transparent, rgba(124, 58, 237, 0.5), transparent);
}

.feed-sidebar .sidebar-card h3 {
    font-size: 1rem;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0 0 18px 0;
    display: flex;
    align-items: center;
    gap: 10px;
}

.feed-sidebar .sidebar-card h3 svg {
    color: var(--anime-primary);
}

/* Suggested Users */
.suggested-users {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.suggested-user {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.suggested-user-info {
    display: flex;
    align-items: center;
    gap: 12px;
    text-decoration: none;
    flex: 1;
}

.suggested-user-info img {
    width: 45px;
    height: 45px;
    border-radius: 50%;
    object-fit: cover;
}

.suggested-user-name {
    display: block;
    font-weight: 500;
    color: var(--text-primary);
}

.suggested-user-meta {
    display: block;
    font-size: 0.75rem;
    color: var(--text-muted);
}

.btn-follow-small {
    padding: 6px 16px;
    background: var(--anime-primary);
    border: none;
    border-radius: 15px;
    color: white;
    font-size: 0.8rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
}

.btn-follow-small:hover {
    background: #6d28d9;
}

.btn-follow-small.following {
    background: transparent;
    border: 1px solid var(--anime-primary);
    color: var(--anime-primary);
}

.no-suggestions {
    color: var(--text-muted);
    font-size: 0.875rem;
    text-align: center;
    padding: 20px;
}

/* Quick Links */
.quick-links {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.quick-link {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px;
    background: rgba(0, 0, 0, 0.2);
    border-radius: 10px;
    text-decoration: none;
    color: var(--text-secondary);
    transition: all 0.2s;
}

.quick-link:hover {
    background: rgba(124, 58, 237, 0.15);
    color: var(--anime-primary);
}

.quick-link svg {
    color: var(--text-muted);
}

.quick-link:hover svg {
    color: var(--anime-primary);
}

/* Feed Responsive */
@media (max-width: 900px) {
    .feed-view {
        grid-template-columns: 1fr;
    }
    
    .feed-sidebar {
        order: -1;
    }
}

/* Feed View Premium - Mobile */
@media (max-width: 767px) {
    .feed-view-premium {
        grid-template-columns: 1fr;
        padding: 20px 16px 40px;
        gap: 20px;
    }
    
    .feed-sidebar-premium {
        position: static;
        order: -1;
        max-height: none;
        overflow: visible;
    }
    
    .feed-header-card {
        margin-bottom: 0;
    }
    
    .feed-main {
        gap: 16px;
    }
}

/* ========================================
   MESSAGES VIEW STYLES - PREMIUM DESIGN
   ======================================== */

.messages-view {
    display: grid;
    grid-template-columns: 380px 1fr;
    height: calc(100vh - 80px);
    max-width: 1300px;
    margin: 0 auto;
    background: var(--anime-bg);
}

/* Conversations List - Premium */
.conversations-list {
    background: linear-gradient(180deg, rgba(26, 29, 46, 0.98), rgba(17, 20, 32, 0.98));
    border-left: 1px solid rgba(255, 255, 255, 0.05);
    display: flex;
    flex-direction: column;
}

.conversations-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 24px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    background: rgba(0, 0, 0, 0.2);
}

.conversations-header h2 {
    font-size: 1.35rem;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0;
    display: flex;
    align-items: center;
    gap: 10px;
}

.conversations-header h2::before {
    content: '💬';
}

.btn-new-message {
    width: 36px;
    height: 36px;
    background: var(--anime-primary);
    border: none;
    border-radius: 50%;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s;
    padding: 0 !important;
}

.btn-new-message:hover {
    background: #6d28d9;
    transform: scale(1.05);
}

/* Messages Search Box */
.messages-search-box {
    position: relative;
    padding: 12px 16px;
    border-bottom: 1px solid var(--border-color);
}

.messages-search-box input {
    width: 100%;
    padding: 10px 14px;
    padding-left: 36px;
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid var(--border-color) !important;
    border-radius: 8px;
    color: var(--text-primary);
    font-size: 0.85rem;
}

.messages-search-box input:focus {
    outline: none;
    border-color: var(--anime-primary) !important;
}

.messages-search-box > svg {
    position: absolute;
    left: 28px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-muted);
    pointer-events: none;
}

.messages-search-results {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--anime-surface);
    border: 1px solid var(--border-color);
    border-top: none;
    border-radius: 0 0 12px 12px;
    max-height: 300px;
    overflow-y: auto;
    z-index: 100;
    display: none;
}

.messages-search-results.active {
    display: block;
}

.messages-search-results .search-result-user {
    margin: 0;
    border-radius: 0;
    padding: 12px 16px;
    border-bottom: 1px solid var(--border-color);
}

.messages-search-results .search-result-user:last-child {
    border-bottom: none;
}

.thread-start-message {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    color: var(--text-muted);
    font-size: 0.95rem;
}

.messages-count {
    padding: 4px 12px;
    background: var(--anime-primary);
    border-radius: 12px;
    font-size: 0.75rem;
    font-weight: 600;
    color: white;
}

.conversations-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 60px 20px;
    color: var(--text-muted);
    text-align: center;
}

.conversations-empty svg {
    margin-bottom: 16px;
    opacity: 0.5;
}

.conversations {
    flex: 1;
    overflow-y: auto;
}

.conversation-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px 20px;
    text-decoration: none;
    border-bottom: 1px solid var(--border-color);
    transition: all 0.2s;
}

.conversation-item:hover {
    background: rgba(255, 255, 255, 0.05);
}

.conversation-item.active {
    background: rgba(124, 58, 237, 0.1);
    border-right: 3px solid var(--anime-primary);
}

.conversation-item.unread {
    background: rgba(124, 58, 237, 0.05);
}

.conversation-avatar {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}

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

.conversation-header-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 4px;
}

.conversation-name {
    font-weight: 600;
    color: var(--text-primary);
}

.conversation-item.unread .conversation-name {
    color: var(--anime-primary);
}

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

.conversation-preview {
    color: var(--text-muted);
    font-size: 0.85rem;
    margin: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.conversation-item.unread .conversation-preview {
    color: var(--text-secondary);
    font-weight: 500;
}

.unread-badge {
    width: 22px;
    height: 22px;
    background: var(--anime-primary);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.7rem;
    font-weight: 700;
    color: white;
    flex-shrink: 0;
}

/* Message Thread - Premium */
.message-thread {
    display: flex;
    flex-direction: column;
    background: linear-gradient(180deg, rgba(11, 15, 26, 0.95), rgba(11, 15, 26, 1));
    height: 90vh;
}

.thread-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 28px;
    background: linear-gradient(135deg, rgba(26, 29, 46, 0.98), rgba(17, 20, 32, 0.98));
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.thread-user {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    text-decoration: none;
}

.thread-user img {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid var(--anime-primary);
    box-shadow: 0 0 15px rgba(124, 58, 237, 0.3);
}

.thread-user-info {
    display: flex;
    flex-direction: column;
}

.thread-user-name {
    font-weight: 600;
    color: var(--text-primary);
    font-size: 1.05rem;
}

.thread-user-level {
    font-size: 0.75rem;
    color: var(--anime-primary);
}

.thread-user:hover .thread-user-name {
    color: var(--anime-primary);
}

.btn-view-profile {
    width: 40px;
    height: 40px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-muted);
    transition: all 0.2s;
}

.btn-view-profile:hover {
    background: var(--anime-primary);
    color: white;
}

.thread-messages {
    flex: 1;
    overflow-y: auto;
    padding: 28px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    background: linear-gradient(180deg, rgba(11, 15, 26, 0.3), transparent);
}

.thread-message {
    display: flex;
    gap: 10px;
    max-width: 75%;
    animation: messageIn 0.3s ease;
    margin-bottom: 12px;
}

.thread-message.message-sending {
    opacity: 0.7;
}

.message-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
    border: 2px solid rgba(124, 58, 237, 0.3);
}

.message-date-separator {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 24px 0;
    position: relative;
}

.message-date-separator::before,
.message-date-separator::after {
    content: '';
    flex: 1;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent);
}

.message-date-separator span {
    padding: 6px 16px;
    background: rgba(26, 29, 46, 0.8);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 20px;
    font-size: 0.75rem;
    color: var(--text-muted);
    margin: 0 12px;
}

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

.thread-message.received {
    align-self: flex-start;
}

.thread-message.sent {
    align-self: flex-end;
}

.message-bubble {
    padding: 14px 18px;
    border-radius: 20px;
    position: relative;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
}

.thread-message.received .message-bubble {
    background: linear-gradient(135deg, rgba(26, 29, 46, 0.95), rgba(36, 39, 56, 0.95));
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-bottom-right-radius: 6px;
}

.thread-message.sent .message-bubble {
    background: linear-gradient(135deg, var(--anime-primary), #9333ea);
    border-bottom-left-radius: 6px;
    box-shadow: 0 4px 15px rgba(124, 58, 237, 0.3);
}

.message-bubble p {
    color: var(--text-secondary);
    line-height: 1.6;
    margin: 0 0 6px 0;
    font-size: 0.95rem;
}

.thread-message.sent .message-bubble p {
    color: white;
}

.message-time {
    font-size: 0.68rem;
    color: var(--text-muted);
    display: inline-block;
    margin-top: 4px;
    text-align: left;
}

.thread-message.sent .message-time {
    color: rgba(255, 255, 255, 0.7);
    text-align: right;
}

.message-status {
    display: inline-flex;
    align-items: center;
    margin-right: 4px;
    vertical-align: middle;
}

.message-status svg {
    width: 14px;
    height: 14px;
    color: rgba(255, 255, 255, 0.6);
}

.typing-indicator {
    padding: 12px 28px;
    display: flex;
    align-items: center;
    gap: 12px;
    color: var(--text-muted);
    font-size: 0.85rem;
}

.typing-dots {
    display: flex;
    gap: 4px;
    align-items: center;
}

.typing-dots span {
    width: 6px;
    height: 6px;
    background: var(--anime-primary);
    border-radius: 50%;
    animation: typingDot 1.4s infinite;
}

.typing-dots span:nth-child(2) {
    animation-delay: 0.2s;
}

.typing-dots span:nth-child(3) {
    animation-delay: 0.4s;
}

@keyframes typingDot {
    0%, 60%, 100% {
        transform: translateY(0);
        opacity: 0.5;
    }
    30% {
        transform: translateY(-8px);
        opacity: 1;
    }
}

/* Start Message */
.thread-start-message {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    text-align: center;
    color: var(--text-muted);
}

.start-message-icon {
    width: 80px;
    height: 80px;
    background: rgba(124, 58, 237, 0.1);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 16px;
}

.start-message-icon svg {
    color: var(--anime-primary);
}

.thread-start-message p {
    font-size: 1rem;
    margin: 0;
}

/* Thread Reply - Premium */
.thread-reply {
    padding: 20px 28px;
    background: linear-gradient(135deg, rgba(26, 29, 46, 0.98), rgba(17, 20, 32, 0.98));
    border-top: 1px solid rgba(255, 255, 255, 0.05);
}

.thread-reply form {
    display: flex;
    gap: 14px;
    align-items: flex-end;
}

.thread-reply textarea {
    flex: 1;
    padding: 14px 20px;
    background: rgba(0, 0, 0, 0.4);
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    border-radius: 24px;
    color: var(--text-primary);
    font-size: 0.95rem;
    resize: none;
    min-height: 48px;
    max-height: 120px;
    line-height: 1.4;
    transition: all 0.3s;
}

.thread-reply textarea:focus {
    outline: none;
    border-color: var(--anime-primary) !important;
    background: rgba(0, 0, 0, 0.5);
    box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.1);
}

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

.btn-send {
    width: 48px;
    height: 48px;
    background: linear-gradient(135deg, var(--anime-primary), #9333ea);
    border: none;
    border-radius: 50%;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s;
    flex-shrink: 0;
    box-shadow: 0 4px 15px rgba(124, 58, 237, 0.3);
}

.btn-send:hover {
    transform: scale(1.08) rotate(5deg);
    box-shadow: 0 6px 20px rgba(124, 58, 237, 0.4);
}

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

/* Thread Empty - Premium */
.thread-empty {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: var(--text-muted);
    text-align: center;
    background: linear-gradient(180deg, rgba(11, 15, 26, 0.3), transparent);
}

.thread-empty svg {
    margin-bottom: 20px;
    opacity: 0.2;
    color: var(--anime-primary);
}

.thread-empty h3 {
    font-size: 1.35rem;
    color: var(--text-primary);
    margin: 0 0 10px 0;
    font-weight: 600;
}

.thread-empty p {
    margin: 0;
    font-size: 0.95rem;
}

/* Messages Responsive */
@media (max-width: 768px) {
    .messages-view {
        grid-template-columns: 1fr;
        height: auto;
        min-height: calc(100vh - 80px);
    }
    
    .conversations-list {
        border-left: none;
        border-bottom: 1px solid var(--border-color);
        max-height: 300px;
        position: relative;
    }
    
    .message-thread {
        min-height: 400px;
        height: calc(100vh - 380px);
    }
    
    .thread-header {
        padding: 16px 20px;
    }
    
    .thread-messages {
        padding: 16px;
    }
    
    .thread-reply {
        padding: 16px 20px;
    }
    
    .conversations-header {
        padding: 16px 20px;
    }
    
    .messages-search-box {
        padding: 10px 16px;
    }
}

/* ========================================
   LIST VIEW PAGE STYLES
   ======================================== */

.list-view-page {
    min-height: 100vh;
    padding: 30px 20px 60px;
}

.list-container {
    max-width: 1000px;
    margin: 0 auto;
}

.list-not-found,
.list-private {
    text-align: center;
    padding: 100px 20px;
    color: var(--text-muted);
}

/* List Header */
.list-header {
    background: var(--anime-surface);
    border: 1px solid var(--border-color);
    border-radius: 16px;
    padding: 24px;
    margin-bottom: 24px;
}

.list-header-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
}

.list-owner {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    color: var(--text-muted);
    font-size: 0.9rem;
}

.list-owner img {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    object-fit: cover;
}

.list-owner:hover {
    color: var(--anime-primary);
}

.list-actions {
    display: flex;
    gap: 10px;
}

.btn-edit-list,
.btn-delete-list {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    border-radius: 20px;
    font-size: 0.85rem;
    cursor: pointer;
    transition: all 0.2s;
}

.btn-edit-list {
    background: rgba(124, 58, 237, 0.1);
    border: 1px solid var(--anime-primary);
    color: var(--anime-primary);
}

.btn-edit-list:hover {
    background: var(--anime-primary);
    color: white;
}

.btn-delete-list {
    background: rgba(239, 68, 68, 0.1);
    border: 1px solid #ef4444;
    color: #ef4444;
}

.btn-delete-list:hover {
    background: #ef4444;
    color: white;
}

.list-title {
    font-size: 2rem;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0 0 12px 0;
}

.list-description {
    color: var(--text-secondary);
    font-size: 1rem;
    line-height: 1.6;
    margin: 0 0 16px 0;
}

.list-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    color: var(--text-muted);
    font-size: 0.85rem;
    margin-bottom: 20px;
}

.list-meta span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.btn-share-list {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 20px;
    background: var(--anime-primary);
    border: none;
    border-radius: 20px;
    color: white;
    font-size: 0.9rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
}

.btn-share-list:hover {
    background: #6d28d9;
    transform: translateY(-2px);
}

/* List Empty */
.list-empty {
    text-align: center;
    padding: 80px 20px;
    background: var(--anime-surface);
    border: 1px solid var(--border-color);
    border-radius: 16px;
}

.list-empty svg {
    color: var(--text-muted);
    opacity: 0.3;
    margin-bottom: 20px;
}

.list-empty h3 {
    font-size: 1.25rem;
    color: var(--text-primary);
    margin: 0 0 8px 0;
}

.list-empty p {
    color: var(--text-muted);
    margin: 0;
}

/* List Anime Grid */
.list-anime-grid {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.list-anime-card {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 16px;
    background: var(--anime-surface);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    transition: all 0.2s;
}

.list-anime-card:hover {
    border-color: rgba(124, 58, 237, 0.3);
}

.list-anime-number {
    width: 32px;
    height: 32px;
    background: rgba(124, 58, 237, 0.15);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    color: var(--anime-primary);
    font-size: 0.9rem;
    flex-shrink: 0;
}

.list-anime-image img {
    width: 60px;
    height: 85px;
    object-fit: cover;
    border-radius: 8px;
    flex-shrink: 0;
}

.list-anime-info {
    flex: 1;
}

.list-anime-title {
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-primary);
    text-decoration: none;
    display: block;
    margin-bottom: 6px;
}

.list-anime-title:hover {
    color: var(--anime-primary);
}

.list-anime-meta {
    display: flex;
    gap: 12px;
    font-size: 0.8rem;
    color: var(--text-muted);
}

.anime-status {
    padding: 2px 8px;
    background: rgba(124, 58, 237, 0.15);
    border-radius: 4px;
    color: var(--anime-primary);
}

.btn-remove-from-list {
    width: 36px;
    height: 36px;
    background: transparent;
    border: 1px solid var(--border-color);
    border-radius: 50%;
    color: var(--text-muted);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: all 0.2s;
    flex-shrink: 0;
    padding: 0 !important;
}

.list-anime-card:hover .btn-remove-from-list {
    opacity: 1;
}

.btn-remove-from-list:hover {
    background: rgba(239, 68, 68, 0.1);
    border-color: #ef4444;
    color: #ef4444;
}

/* List Responsive */
@media (max-width: 640px) {
    .list-header-top {
        flex-direction: column;
        align-items: flex-start;
        gap: 16px;
    }
    
    .list-title {
        font-size: 1.5rem;
    }
    
    .list-anime-card {
        padding: 12px;
        gap: 12px;
    }
    
    .list-anime-number {
        display: none;
    }
    
    .btn-remove-from-list {
        opacity: 1;
    }
}

/* ========================================
   SUBTITLE GROUPS SYSTEM STYLES
   ======================================== */

/* Groups Listing Page */
.subs-groups-page {
    max-width: 1200px;
    margin: 0 auto;
    padding: 30px 20px 60px;
}

.subs-page-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 40px;
    padding: 32px;
    background: linear-gradient(135deg, rgba(26, 29, 46, 0.95), rgba(17, 20, 32, 0.98));
    border: 1px solid rgba(124, 58, 237, 0.2);
    border-radius: 24px;
    position: relative;
    overflow: hidden;
}

.subs-page-header::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--anime-primary), #ec4899, var(--anime-primary));
}

.subs-page-header .header-content h1 {
    display: flex;
    align-items: center;
    gap: 14px;
    font-size: 2rem;
    font-weight: 800;
    color: var(--text-primary);
    margin: 0 0 10px;
}

.subs-page-header .header-content h1 svg {
    color: var(--anime-primary);
}

.subs-page-header .header-content p {
    color: var(--text-muted);
    font-size: 1rem;
    margin: 0;
}

.btn-create-group {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 14px 28px;
    background: linear-gradient(135deg, var(--anime-primary), #9333ea);
    border: none;
    border-radius: 14px;
    color: white;
    font-weight: 600;
    font-size: 1rem;
    text-decoration: none;
    transition: all 0.3s;
    box-shadow: 0 4px 20px rgba(124, 58, 237, 0.3);
}

.btn-create-group:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 30px rgba(124, 58, 237, 0.4);
}

/* Sections */
.subs-section {
    margin-bottom: 40px;
}

.subs-section h2 {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0 0 24px;
}

.subs-section h2 svg {
    color: var(--anime-primary);
}

/* Search Bar */
.groups-search-bar {
    margin-bottom: 30px;
}

.groups-search-bar .search-input-wrapper {
    position: relative;
    max-width: 400px;
}

.groups-search-bar input {
    width: 100%;
    padding: 14px 20px 14px 50px;
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: 14px;
    color: var(--text-primary);
    font-size: 1rem;
}

.groups-search-bar input:focus {
    outline: none;
    border-color: var(--anime-primary) !important;
}

.groups-search-bar svg {
    position: absolute;
    right: 16px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-muted);
}

/* Groups Grid */
.groups-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 24px;
}

.my-groups-grid {
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
}

/* Group Card */
.group-card {
    position: relative;
    background: linear-gradient(135deg, rgba(26, 29, 46, 0.95), rgba(17, 20, 32, 0.98));
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 20px;
    overflow: hidden;
    text-decoration: none;
    transition: all 0.3s;
}

.group-card:hover {
    transform: translateY(-5px);
    border-color: rgba(124, 58, 237, 0.3);
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.3);
}

.group-card-banner {
    height: 100px;
    background-size: cover;
    background-position: center;
    position: relative;
}

.group-card-banner .banner-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, transparent, rgba(17, 20, 32, 0.9));
}

.group-card-logo {
    position: relative;
    width: 70px;
    height: 70px;
    margin: -35px auto 0;
    z-index: 2;
}

.group-card-logo img {
    width: 100%;
    height: 100%;
    border-radius: 16px;
    object-fit: cover;
    border: 3px solid var(--anime-bg);
}

.group-card-logo .logo-placeholder {
    width: 100%;
    height: 100%;
    border-radius: 16px;
    background: linear-gradient(135deg, var(--anime-primary), #9333ea);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    font-weight: 700;
    color: white;
    border: 3px solid var(--anime-bg);
}

.trusted-badge-small {
    position: absolute;
    bottom: -4px;
    right: -4px;
    width: 22px;
    height: 22px;
    background: #22c55e;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    border: 2px solid var(--anime-bg);
}

.group-card-content {
    padding: 16px 20px 20px;
    text-align: center;
}

.group-card-content h3 {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0 0 6px;
}

.group-card-content .group-desc {
    color: var(--text-muted);
    font-size: 0.85rem;
    margin: 0 0 14px;
    line-height: 1.4;
}

.group-card-stats {
    display: flex;
    justify-content: center;
    gap: 20px;
}

.group-card-stats span {
    font-size: 0.8rem;
    color: var(--text-muted);
}

.group-card-stats strong {
    color: var(--text-primary);
}

/* My Group Card */
.my-group-card {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 16px 20px;
}

.my-group-card .group-card-logo {
    width: 50px;
    height: 50px;
    margin: 0;
}

.my-group-card .group-card-logo img,
.my-group-card .group-card-logo .logo-placeholder {
    border-radius: 12px;
}

.my-group-card .group-card-info {
    flex: 1;
}

.my-group-card h3 {
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0 0 4px;
}

.my-group-card .my-role {
    font-size: 0.8rem;
    color: var(--anime-primary);
}

.my-group-card .manage-link {
    font-size: 0.85rem;
    color: var(--text-muted);
}

.my-group-card:hover .manage-link {
    color: var(--anime-primary);
}

/* Loading */
.loading-groups {
    grid-column: 1 / -1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    padding: 60px;
    color: var(--text-muted);
}

.loading-spinner {
    width: 40px;
    height: 40px;
    border: 3px solid rgba(124, 58, 237, 0.2);
    border-top-color: var(--anime-primary);
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

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

.no-groups {
    grid-column: 1 / -1;
    text-align: center;
    padding: 60px;
    color: var(--text-muted);
}

/* Load More */
.load-more-container {
    display: flex;
    justify-content: center;
    margin-top: 30px;
}

/* ========================================
   SUBTITLE GROUP PAGE STYLES
   ======================================== */

.subs-group-page {
    max-width: 1200px;
    margin: 0 auto;
}

/* Group Banner */
.group-banner {
    height: 280px;
    background-size: cover;
    background-position: center;
    position: relative;
}

.group-banner-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, 
        rgba(11, 15, 26, 0.3) 0%,
        rgba(11, 15, 26, 0.8) 60%,
        rgba(11, 15, 26, 1) 100%);
}

/* Group Header Card */
.group-header-card {
    position: relative;
    margin: -100px 20px 30px;
    background: linear-gradient(135deg, rgba(26, 29, 46, 0.98), rgba(17, 20, 32, 0.98));
    border: 1px solid rgba(124, 58, 237, 0.15);
    border-radius: 24px;
    padding: 32px;
    z-index: 10;
}

.group-header-content {
    display: flex;
    gap: 28px;
    align-items: flex-start;
}

.group-logo {
    position: relative;
    width: 120px;
    height: 120px;
    flex-shrink: 0;
}

.group-logo img {
    width: 100%;
    height: 100%;
    border-radius: 20px;
    object-fit: cover;
    border: 3px solid var(--anime-primary);
}

.group-logo-placeholder {
    width: 100%;
    height: 100%;
    border-radius: 20px;
    background: linear-gradient(135deg, var(--anime-primary), #9333ea);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2.5rem;
    font-weight: 800;
    color: white;
}

.group-logo .trusted-badge {
    position: absolute;
    bottom: -8px;
    right: -8px;
    width: 36px;
    height: 36px;
    background: #22c55e;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    border: 3px solid var(--anime-bg);
}

.group-info {
    flex: 1;
}

.group-name-row {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 10px;
}

.group-name-row h1 {
    font-size: 2rem;
    font-weight: 800;
    color: var(--text-primary);
    margin: 0;
}

.trusted-tag {
    padding: 4px 12px;
    background: rgba(34, 197, 94, 0.15);
    border: 1px solid rgba(34, 197, 94, 0.3);
    border-radius: 20px;
    color: #22c55e;
    font-size: 0.8rem;
    font-weight: 600;
}

.group-description {
    color: var(--text-secondary);
    font-size: 1rem;
    line-height: 1.6;
    margin: 0 0 16px;
}

.group-stats {
    display: flex;
    gap: 24px;
    margin-bottom: 16px;
}

.group-stats .stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 12px 20px;
    background: rgba(0, 0, 0, 0.2);
    border-radius: 12px;
}

.group-stats .stat-number {
    font-size: 1.5rem;
    font-weight: 800;
    color: var(--text-primary);
}

.group-stats .stat-label {
    font-size: 0.75rem;
    color: var(--text-muted);
}

.group-links {
    display: flex;
    gap: 10px;
}

.social-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 10px;
    color: var(--text-secondary);
    text-decoration: none;
    font-size: 0.85rem;
    transition: all 0.3s;
}

.social-link:hover {
    background: rgba(255, 255, 255, 0.1);
    color: white;
}

.social-link.discord:hover { background: rgba(88, 101, 242, 0.2); color: #5865f2; }
.social-link.telegram:hover { background: rgba(0, 136, 204, 0.2); color: #0088cc; }

.group-actions {
    display: flex;
    flex-direction: column;
    gap: 10px;
    align-items: flex-end;
}

.btn-follow-group {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 28px;
    background: linear-gradient(135deg, var(--anime-primary), #9333ea);
    border: none;
    border-radius: 12px;
    color: white;
    font-weight: 600;
    font-size: 0.95rem;
    cursor: pointer;
    transition: all 0.3s;
    text-decoration: none;
    box-shadow: 0 4px 15px rgba(124, 58, 237, 0.3);
}

.btn-follow-group:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(124, 58, 237, 0.4);
}

.btn-follow-group.following {
    background: transparent;
    border: 2px solid var(--anime-primary);
    box-shadow: none;
}

.btn-manage-group {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 20px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 10px;
    color: var(--text-secondary);
    font-weight: 500;
    font-size: 0.9rem;
    text-decoration: none;
    transition: all 0.3s;
}

.btn-manage-group:hover {
    background: rgba(255, 255, 255, 0.1);
    color: white;
}

/* Group Content Layout */
.group-content {
    display: grid;
    grid-template-columns: 1fr 340px;
    gap: 30px;
    padding: 0 20px 60px;
}

.group-main {
    display: flex;
    flex-direction: column;
    gap: 30px;
}

.group-section {
    background: linear-gradient(135deg, rgba(26, 29, 46, 0.8), rgba(17, 20, 32, 0.8));
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 20px;
    padding: 24px;
}

.group-section h2 {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0 0 20px;
}

.group-section h2 svg {
    color: var(--anime-primary);
}

/* Projects Grid */
.projects-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 16px;
}

.project-card {
    background: rgba(0, 0, 0, 0.2);
    border: 1px solid transparent;
    border-radius: 14px;
    overflow: hidden;
    text-decoration: none;
    transition: all 0.3s;
}

.project-card:hover {
    border-color: var(--anime-primary);
    transform: translateY(-4px);
}

.project-image {
    position: relative;
    aspect-ratio: 3/4;
}

.project-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.language-badge {
    position: absolute;
    top: 8px;
    right: 8px;
    padding: 4px 10px;
    background: var(--anime-primary);
    border-radius: 6px;
    color: white;
    font-size: 0.7rem;
    font-weight: 700;
}

.project-info {
    padding: 12px;
}

.project-info h3 {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0 0 4px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.release-count {
    font-size: 0.75rem;
    color: var(--text-muted);
}

/* Releases List */
.releases-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.release-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 14px 16px;
    background: rgba(0, 0, 0, 0.2);
    border-radius: 12px;
    transition: all 0.2s;
}

.release-item:hover {
    background: rgba(124, 58, 237, 0.1);
}

.release-info {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.release-title {
    font-weight: 600;
    color: var(--text-primary);
    text-decoration: none;
}

.release-title:hover {
    color: var(--anime-primary);
}

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

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

.empty-message {
    text-align: center;
    padding: 40px;
    color: var(--text-muted);
}

/* Group Sidebar */
.group-sidebar {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.group-sidebar .sidebar-card {
    background: linear-gradient(135deg, rgba(26, 29, 46, 0.9), rgba(17, 20, 32, 0.9));
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 16px;
    padding: 20px;
}

.group-sidebar .sidebar-card h3 {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 1rem;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0 0 16px;
}

.group-sidebar .sidebar-card h3 svg {
    color: var(--anime-primary);
}

.members-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.member-item {
    display: flex;
    align-items: center;
}

.member-link {
    display: flex;
    align-items: center;
    gap: 12px;
    text-decoration: none;
    width: 100%;
    padding: 8px 10px;
    border-radius: 10px;
    transition: all 0.2s;
}

.member-link:hover {
    background: rgba(124, 58, 237, 0.1);
}

.member-link img {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    object-fit: cover;
}

.member-info {
    display: flex;
    flex-direction: column;
}

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

.member-role {
    font-size: 0.75rem;
    color: var(--anime-primary);
}

.rules-content {
    color: var(--text-secondary);
    font-size: 0.9rem;
    line-height: 1.6;
}

.btn-report {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    padding: 10px 16px;
    background: transparent;
    border: 1px solid rgba(239, 68, 68, 0.3);
    border-radius: 10px;
    color: #ef4444;
    font-size: 0.9rem;
    cursor: pointer;
    transition: all 0.3s;
}

.btn-report:hover {
    background: rgba(239, 68, 68, 0.1);
}

/* ========================================
   CREATE GROUP PAGE STYLES
   ======================================== */

.subs-create-page {
    max-width: 800px;
    margin: 0 auto;
    padding: 30px 20px 60px;
}

.create-container {
    background: linear-gradient(135deg, rgba(26, 29, 46, 0.95), rgba(17, 20, 32, 0.98));
    border: 1px solid rgba(124, 58, 237, 0.15);
    border-radius: 24px;
    padding: 40px;
}

.create-header {
    text-align: center;
    margin-bottom: 40px;
}

.create-header h1 {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    font-size: 2rem;
    font-weight: 800;
    color: var(--text-primary);
    margin: 0 0 10px;
}

.create-header h1 svg {
    color: var(--anime-primary);
}

.create-header p {
    color: var(--text-muted);
    font-size: 1rem;
    margin: 0;
}

.form-section {
    margin-bottom: 32px;
    padding-bottom: 32px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.form-section:last-of-type {
    border-bottom: none;
}

.form-section h2 {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0 0 20px;
}

.form-row {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
}

.form-group {
    margin-bottom: 20px;
}

.form-group:last-child {
    margin-bottom: 0;
}

.form-group label {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 8px;
}

.form-group label svg {
    color: var(--text-muted);
}

.form-group input[type="text"],
.form-group input[type="url"],
.form-group textarea {
    width: 100%;
    padding: 12px 16px;
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: 12px;
    color: var(--text-primary);
    font-size: 0.95rem;
    transition: all 0.3s;
}

.form-group input:focus,
.form-group textarea:focus {
    outline: none;
    border-color: var(--anime-primary) !important;
}

.input-prefix {
    display: flex;
    align-items: center;
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    overflow: hidden;
}

.input-prefix span {
    padding: 12px 14px;
    background: rgba(0, 0, 0, 0.3);
    color: var(--text-muted);
    font-size: 0.9rem;
    white-space: nowrap;
}

.input-prefix input {
    border: none !important;
    border-radius: 0 !important;
    background: transparent !important;
}

/* Upload Area */
.upload-area {
    width: 150px;
    height: 150px;
    border: 2px dashed rgba(124, 58, 237, 0.3);
    border-radius: 16px;
    cursor: pointer;
    transition: all 0.3s;
    overflow: hidden;
}

.upload-area:hover {
    border-color: var(--anime-primary);
    background: rgba(124, 58, 237, 0.05);
}

.upload-area.upload-banner {
    width: 100%;
    height: 120px;
}

.upload-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    color: var(--text-muted);
    text-align: center;
}

.upload-placeholder svg {
    opacity: 0.5;
}

.upload-placeholder span {
    font-size: 0.9rem;
}

.upload-placeholder small {
    font-size: 0.75rem;
    opacity: 0.7;
}

.upload-placeholder img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Checkbox */
.checkbox-group label.checkbox-label {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    cursor: pointer;
    font-size: 0.9rem;
    color: var(--text-secondary);
    line-height: 1.5;
}

.checkbox-group input[type="checkbox"] {
    width: 20px;
    height: 20px;
    accent-color: var(--anime-primary);
    margin-top: 2px;
    flex-shrink: 0;
}

/* Form Actions */
.form-actions {
    display: flex;
    justify-content: flex-end;
    gap: 14px;
    margin-top: 32px;
}

.btn-danger {
    background: linear-gradient(135deg, #ef4444, #dc2626) !important;
}

/* ========================================
   SUBS DASHBOARD STYLES
   ======================================== */

.subs-dashboard-page {
    max-width: 1200px;
    margin: 0 auto;
    padding: 30px 20px 60px;
}

.dashboard-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 30px;
    padding: 24px;
    background: linear-gradient(135deg, rgba(26, 29, 46, 0.95), rgba(17, 20, 32, 0.98));
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 20px;
}

.dashboard-header .header-left {
    display: flex;
    align-items: center;
    gap: 16px;
}

.dashboard-header .group-logo-small {
    width: 56px;
    height: 56px;
    border-radius: 14px;
    object-fit: cover;
}

.dashboard-header h1 {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0;
}

.dashboard-tabs {
    display: flex;
    gap: 8px;
    margin-bottom: 24px;
    background: rgba(0, 0, 0, 0.2);
    padding: 6px;
    border-radius: 14px;
    overflow-x: auto;
}

.dashboard-tabs .tab-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 20px;
    background: transparent;
    border: none;
    border-radius: 10px;
    color: var(--text-muted);
    font-weight: 600;
    font-size: 0.9rem;
    text-decoration: none;
    white-space: nowrap;
    transition: all 0.3s;
}

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

.dashboard-tabs .tab-btn.active {
    background: var(--anime-primary);
    color: white;
}

.dashboard-content {
    background: linear-gradient(135deg, rgba(26, 29, 46, 0.8), rgba(17, 20, 32, 0.8));
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 20px;
    padding: 28px;
}

/* Overview Grid */
.overview-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    margin-bottom: 32px;
}

.stat-card {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 20px;
    background: rgba(0, 0, 0, 0.2);
    border-radius: 16px;
}

.stat-card .stat-icon {
    width: 52px;
    height: 52px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.stat-icon.projects { background: rgba(124, 58, 237, 0.15); color: var(--anime-primary); }
.stat-icon.releases { background: rgba(16, 185, 129, 0.15); color: #10b981; }
.stat-icon.members { background: rgba(59, 130, 246, 0.15); color: #3b82f6; }
.stat-icon.followers { background: rgba(251, 191, 36, 0.15); color: #fbbf24; }

.stat-card .stat-info {
    display: flex;
    flex-direction: column;
}

.stat-card .stat-number {
    font-size: 1.75rem;
    font-weight: 800;
    color: var(--text-primary);
}

.stat-card .stat-label {
    font-size: 0.85rem;
    color: var(--text-muted);
}

/* Quick Actions */
.quick-actions {
    margin-bottom: 32px;
}

.quick-actions h2 {
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0 0 16px;
}

.actions-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 16px;
}

.action-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    padding: 24px;
    background: rgba(124, 58, 237, 0.1);
    border: 2px dashed rgba(124, 58, 237, 0.3);
    border-radius: 16px;
    color: var(--anime-primary);
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s;
}

.action-card:hover {
    background: rgba(124, 58, 237, 0.2);
    border-style: solid;
    transform: translateY(-3px);
}

/* Recent Releases */
.recent-releases h2 {
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0 0 16px;
}

.releases-table {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.release-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 18px;
    background: rgba(0, 0, 0, 0.2);
    border-radius: 12px;
}

.release-row .release-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.release-row .release-anime {
    font-weight: 600;
    color: var(--text-primary);
}

.release-row .release-episode {
    font-size: 0.8rem;
    color: var(--text-muted);
}

.release-status {
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: 600;
}

.release-status.published { background: rgba(16, 185, 129, 0.15); color: #10b981; }
.release-status.submitted { background: rgba(251, 191, 36, 0.15); color: #fbbf24; }
.release-status.draft { background: rgba(107, 114, 128, 0.15); color: #6b7280; }
.release-status.rejected { background: rgba(239, 68, 68, 0.15); color: #ef4444; }

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

/* Tab Header */
.tab-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 24px;
}

.tab-header h2 {
    font-size: 1.3rem;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0;
}

/* Projects Table */
.projects-table {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.project-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    background: rgba(0, 0, 0, 0.2);
    border-radius: 14px;
}

.project-row .project-info {
    display: flex;
    align-items: center;
    gap: 12px;
}

.project-row .project-anime {
    font-weight: 600;
    color: var(--text-primary);
}

.project-row .project-lang {
    padding: 4px 10px;
    background: var(--anime-primary);
    border-radius: 6px;
    font-size: 0.7rem;
    font-weight: 700;
    color: white;
}

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

.btn-upload-small {
    padding: 8px 16px;
    background: var(--anime-primary);
    border: none;
    border-radius: 8px;
    color: white;
    font-weight: 600;
    font-size: 0.85rem;
    cursor: pointer;
    transition: all 0.3s;
}

.btn-upload-small:hover {
    background: #9333ea;
}

/* Full Releases Table */
.releases-full-table {
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 14px;
    overflow: hidden;
}

.releases-full-table .table-header,
.releases-full-table .table-row {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1fr 1.2fr 1fr;
    gap: 16px;
    padding: 14px 20px;
}

.releases-full-table .table-header {
    background: rgba(0, 0, 0, 0.3);
    font-weight: 700;
    color: var(--text-primary);
    font-size: 0.85rem;
}

.releases-full-table .table-row {
    border-top: 1px solid rgba(255, 255, 255, 0.05);
    font-size: 0.9rem;
    color: var(--text-secondary);
}

.releases-full-table .table-row:hover {
    background: rgba(124, 58, 237, 0.05);
}

.releases-full-table .anime-title {
    font-weight: 600;
    color: var(--text-primary);
}

/* Members Table */
.members-table {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.member-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 20px;
    background: rgba(0, 0, 0, 0.2);
    border-radius: 14px;
}

.member-row .member-info {
    display: flex;
    align-items: center;
    gap: 14px;
}

.member-row .member-info img {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    object-fit: cover;
}

.member-row .member-name {
    font-weight: 600;
    color: var(--text-primary);
    display: block;
}

.member-row .member-email {
    font-size: 0.8rem;
    color: var(--text-muted);
}

.member-role-select select {
    padding: 8px 14px;
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    color: var(--text-primary);
    font-size: 0.85rem;
}

.btn-remove-member {
    width: 36px;
    height: 36px;
    background: transparent;
    border: 1px solid rgba(239, 68, 68, 0.3);
    border-radius: 50%;
    color: #ef4444;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s;
    padding: 0 !important;
}

.btn-remove-member:hover {
    background: rgba(239, 68, 68, 0.15);
}

/* Dashboard Group Card */
.dashboard-group-card {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 20px;
    background: rgba(0, 0, 0, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 16px;
    text-decoration: none;
    transition: all 0.3s;
}

.dashboard-group-card:hover {
    border-color: var(--anime-primary);
    background: rgba(124, 58, 237, 0.05);
}

.dashboard-group-card img {
    width: 56px;
    height: 56px;
    border-radius: 14px;
    object-fit: cover;
}

.dashboard-group-card .logo-placeholder {
    width: 56px;
    height: 56px;
    border-radius: 14px;
    background: var(--anime-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    font-weight: 700;
    color: white;
}

.dashboard-group-card .group-details {
    flex: 1;
}

.dashboard-group-card h3 {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0 0 4px;
}

.dashboard-group-card .role {
    font-size: 0.8rem;
    color: var(--anime-primary);
}

/* Status Badges */
.status-badge {
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: 600;
}

.status-badge.approved { background: rgba(16, 185, 129, 0.15); color: #10b981; }
.status-badge.pending { background: rgba(251, 191, 36, 0.15); color: #fbbf24; }
.status-badge.suspended { background: rgba(239, 68, 68, 0.15); color: #ef4444; }

/* Empty State */
.empty-state {
    text-align: center;
    padding: 60px 40px;
    color: var(--text-muted);
}

.empty-state p {
    margin: 0 0 20px;
    font-size: 1rem;
}

/* Anime Search Results in Modal */
.modal-body .anime-search-results {
    max-height: 200px;
    overflow-y: auto;
    margin-top: 10px;
}

.anime-result-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s;
}

.anime-result-item:hover {
    background: rgba(124, 58, 237, 0.1);
}

.anime-result-item img {
    width: 40px;
    height: 55px;
    object-fit: cover;
    border-radius: 6px;
}

.anime-result-item span {
    font-weight: 500;
    color: var(--text-primary);
}

/* Project Type Tabs */
.project-type-tabs {
    display: flex;
    gap: 10px;
    margin-bottom: 24px;
    padding: 6px;
    background: rgba(0, 0, 0, 0.2);
    border-radius: 12px;
}

.project-type-tabs .type-tab {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 16px;
    background: transparent;
    border: none;
    border-radius: 8px;
    color: var(--text-muted);
    font-weight: 600;
    font-size: 0.9rem;
    cursor: pointer;
    transition: all 0.3s;
}

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

.project-type-tabs .type-tab.active {
    background: var(--anime-primary);
    color: white;
}

.info-box {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 18px;
    background: rgba(251, 191, 36, 0.1);
    border: 1px solid rgba(251, 191, 36, 0.3);
    border-radius: 12px;
    color: #fbbf24;
    font-size: 0.9rem;
    margin-top: 16px;
}

/* Permission Denied Page */
.permission-denied {
    text-align: center;
    padding: 80px 40px;
}

.permission-icon {
    font-size: 4rem;
    margin-bottom: 24px;
}

.permission-denied h1 {
    font-size: 2rem;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0 0 16px;
}

.permission-denied p {
    color: var(--text-muted);
    margin: 0 0 10px;
    font-size: 1rem;
}

.permission-denied .btn-primary {
    margin-top: 24px;
}

/* Video URL Input */
.form-group input[type="url"] {
    direction: ltr;
    text-align: left;
}

/* ========================================
   SUBS ADMIN PAGE STYLES
   ======================================== */

.subs-admin-page {
    max-width: 1200px;
    margin: 0 auto;
    padding: 30px 20px 60px;
}

.admin-header {
    margin-bottom: 30px;
}

.admin-header h1 {
    display: flex;
    align-items: center;
    gap: 14px;
    font-size: 2rem;
    font-weight: 800;
    color: var(--text-primary);
    margin: 0;
}

.admin-header h1 svg {
    color: var(--anime-primary);
}

.admin-tabs {
    display: flex;
    gap: 8px;
    margin-bottom: 24px;
    background: rgba(0, 0, 0, 0.2);
    padding: 6px;
    border-radius: 14px;
    overflow-x: auto;
}

.admin-tab {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 20px;
    background: transparent;
    border-radius: 10px;
    color: var(--text-muted);
    font-weight: 600;
    font-size: 0.9rem;
    text-decoration: none;
    white-space: nowrap;
    transition: all 0.3s;
}

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

.admin-tab.active {
    background: var(--anime-primary);
    color: white;
}

.admin-tab .badge {
    padding: 2px 8px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 10px;
    font-size: 0.75rem;
}

.admin-tab .badge.danger {
    background: rgba(239, 68, 68, 0.3);
}

.admin-content {
    background: linear-gradient(135deg, rgba(26, 29, 46, 0.8), rgba(17, 20, 32, 0.8));
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 20px;
    padding: 24px;
}

.admin-list {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.admin-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 18px 22px;
    background: rgba(0, 0, 0, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 14px;
    transition: all 0.3s;
}

.admin-item:hover {
    border-color: rgba(124, 58, 237, 0.2);
    background: rgba(124, 58, 237, 0.05);
}

.admin-item .item-info {
    display: flex;
    align-items: center;
    gap: 16px;
    flex: 1;
}

.admin-item .item-logo,
.admin-item .item-poster {
    width: 60px;
    height: 60px;
    border-radius: 12px;
    object-fit: cover;
    flex-shrink: 0;
}

.admin-item .item-poster {
    width: 45px;
    height: 65px;
}

.admin-item .item-logo-placeholder {
    width: 60px;
    height: 60px;
    border-radius: 12px;
    background: var(--anime-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    font-weight: 700;
    color: white;
    flex-shrink: 0;
}

.admin-item .item-details h3 {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0 0 4px;
}

.admin-item .item-details p {
    color: var(--text-secondary);
    font-size: 0.9rem;
    margin: 0 0 6px;
}

.admin-item .item-details .release-notes {
    padding: 8px 12px;
    background: rgba(0, 0, 0, 0.2);
    border-radius: 8px;
    font-size: 0.85rem;
}

.admin-item .item-meta {
    font-size: 0.8rem;
    color: var(--text-muted);
}

.admin-item .item-actions {
    display: flex;
    gap: 10px;
    flex-shrink: 0;
}

.btn-approve,
.btn-reject,
.btn-preview {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 10px 18px;
    border: none;
    border-radius: 10px;
    font-weight: 600;
    font-size: 0.85rem;
    cursor: pointer;
    transition: all 0.3s;
    text-decoration: none;
}

.btn-approve {
    background: linear-gradient(135deg, #10b981, #059669);
    color: white;
}

.btn-approve:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(16, 185, 129, 0.3);
}

.btn-reject {
    background: rgba(239, 68, 68, 0.1);
    border: 1px solid rgba(239, 68, 68, 0.3);
    color: #ef4444;
}

.btn-reject:hover {
    background: rgba(239, 68, 68, 0.2);
}

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

.btn-preview:hover {
    background: rgba(255, 255, 255, 0.1);
    color: white;
}

.trusted-badge-inline {
    padding: 2px 8px;
    background: rgba(34, 197, 94, 0.15);
    border-radius: 6px;
    color: #22c55e;
    font-size: 0.7rem;
    font-weight: 600;
    margin-left: 8px;
}

/* Admin Link in User Dropdown */
.user-dropdown-link.admin-link {
    color: var(--anime-primary) !important;
    border-top: 1px solid rgba(124, 58, 237, 0.2);
    margin-top: 4px;
    padding-top: 12px;
}

.user-dropdown-link.admin-link svg {
    color: var(--anime-primary);
}

button.btn-new-message {
    padding: 0 !important;
}

/* ========================================
   COMMUNITY ADMIN STYLES
   ======================================== */

.community-admin {
    min-height: 100vh;
    background: 
        radial-gradient(ellipse at 20% 0%, rgba(124, 58, 237, 0.15) 0%, transparent 50%),
        radial-gradient(ellipse at 80% 100%, rgba(236, 72, 153, 0.1) 0%, transparent 50%),
        radial-gradient(ellipse at 50% 50%, rgba(59, 130, 246, 0.05) 0%, transparent 70%),
        linear-gradient(180deg, #080b14 0%, #0d1221 50%, #0a0e1a 100%);
    padding-bottom: 80px;
    position: relative;
}

.community-admin::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: 
        url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%239C92AC' fill-opacity='0.02'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
    pointer-events: none;
    z-index: 0;
}

.community-admin > * {
    position: relative;
    z-index: 1;
}

.community-admin-error {
    max-width: 500px;
    margin: 100px auto;
    text-align: center;
    padding: 48px;
    background: linear-gradient(135deg, rgba(239, 68, 68, 0.1) 0%, rgba(239, 68, 68, 0.05) 100%);
    border: 1px solid rgba(239, 68, 68, 0.3);
    border-radius: 24px;
    backdrop-filter: blur(20px);
    box-shadow: 
        0 25px 50px rgba(0, 0, 0, 0.5),
        inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

.community-admin-error h2 {
    color: #EF4444;
    margin-bottom: 16px;
    font-size: 1.5rem;
}

/* Admin Header - Premium */
.admin-header {
    background: 
        linear-gradient(135deg, rgba(124, 58, 237, 0.2) 0%, rgba(139, 92, 246, 0.1) 50%, rgba(236, 72, 153, 0.1) 100%);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    padding: 28px 0;
    position: relative;
    overflow: hidden;
}

.admin-header::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(90deg, 
        transparent 0%, 
        rgba(124, 58, 237, 0.1) 25%, 
        rgba(236, 72, 153, 0.1) 75%, 
        transparent 100%);
    animation: shimmerHeader 8s ease-in-out infinite;
}

@keyframes shimmerHeader {
    0%, 100% { opacity: 0.3; transform: translateX(-100%); }
    50% { opacity: 0.6; transform: translateX(100%); }
}

.admin-header-content {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 32px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
    z-index: 1;
}

.admin-header h1 {
    display: flex;
    align-items: center;
    gap: 16px;
    font-size: 2rem;
    font-weight: 800;
    color: #fff;
    margin: 0;
    text-shadow: 0 2px 10px rgba(124, 58, 237, 0.3);
}

.admin-header h1 svg {
    color: var(--anime-primary);
    filter: drop-shadow(0 0 10px rgba(124, 58, 237, 0.5));
}

.admin-user-info {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 12px 20px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 50px;
    backdrop-filter: blur(10px);
}

.staff-role {
    padding: 8px 16px;
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
}

.staff-role-helper { 
    background: linear-gradient(135deg, #10B981 0%, #059669 100%); 
    color: #fff;
    box-shadow: 0 4px 15px rgba(16, 185, 129, 0.4);
}
.staff-role-mod { 
    background: linear-gradient(135deg, #3B82F6 0%, #2563EB 100%); 
    color: #fff;
    box-shadow: 0 4px 15px rgba(59, 130, 246, 0.4);
}
.staff-role-senior_mod { 
    background: linear-gradient(135deg, #8B5CF6 0%, #7C3AED 100%); 
    color: #fff;
    box-shadow: 0 4px 15px rgba(139, 92, 246, 0.4);
}
.staff-role-admin { 
    background: linear-gradient(135deg, #EF4444 0%, #DC2626 100%); 
    color: #fff;
    box-shadow: 0 4px 15px rgba(239, 68, 68, 0.4);
}

.admin-username {
    color: rgba(255, 255, 255, 0.9);
    font-weight: 600;
    font-size: 0.95rem;
}

/* Admin Tabs - Premium */
.admin-tabs {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 32px;
    display: flex;
    gap: 8px;
    background: rgba(0, 0, 0, 0.2);
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    overflow-x: auto;
    scrollbar-width: none;
}

.admin-tabs::-webkit-scrollbar {
    display: none;
}

.admin-tab {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 18px 24px;
    color: rgba(255, 255, 255, 0.5);
    font-weight: 600;
    font-size: 0.9rem;
    text-decoration: none;
    border-bottom: 3px solid transparent;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    white-space: nowrap;
    position: relative;
}

.admin-tab::before {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--anime-primary), #EC4899);
    border-radius: 0 0 4px 4px;
    transition: width 0.3s ease;
}

.admin-tab:hover {
    color: #fff;
    background: linear-gradient(180deg, rgba(124, 58, 237, 0.1) 0%, transparent 100%);
}

.admin-tab:hover::before {
    width: 60%;
}

.admin-tab.active {
    color: #fff;
    background: linear-gradient(180deg, rgba(124, 58, 237, 0.15) 0%, transparent 100%);
    border-bottom-color: transparent;
}

.admin-tab.active::before {
    width: 100%;
}

.admin-tab svg {
    flex-shrink: 0;
    transition: transform 0.3s ease;
}

.admin-tab:hover svg {
    transform: scale(1.1);
}

.tab-badge {
    background: linear-gradient(135deg, var(--anime-primary) 0%, #EC4899 100%);
    color: #fff;
    font-size: 0.7rem;
    font-weight: 700;
    padding: 4px 10px;
    border-radius: 12px;
    min-width: 24px;
    text-align: center;
    box-shadow: 0 2px 10px rgba(124, 58, 237, 0.4);
}

.tab-badge.urgent {
    background: linear-gradient(135deg, #EF4444 0%, #DC2626 100%);
    box-shadow: 0 2px 15px rgba(239, 68, 68, 0.5);
    animation: pulseUrgent 2s ease-in-out infinite;
}

@keyframes pulseUrgent {
    0%, 100% { transform: scale(1); box-shadow: 0 2px 15px rgba(239, 68, 68, 0.5); }
    50% { transform: scale(1.1); box-shadow: 0 4px 25px rgba(239, 68, 68, 0.7); }
}

/* Admin Content - Premium */
.admin-content {
    max-width: 1400px;
    margin: 0 auto;
    padding: 32px;
}

/* Dashboard Grid */
.dashboard-grid {
    display: flex;
    flex-direction: column;
    gap: 28px;
}

/* Stats Row - Premium Cards */
.stats-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 20px;
}

.stat-card {
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.05) 0%, rgba(255, 255, 255, 0.02) 100%);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 20px;
    padding: 24px;
    display: flex;
    align-items: center;
    gap: 20px;
    position: relative;
    overflow: hidden;
    backdrop-filter: blur(10px);
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.stat-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, transparent 0%, rgba(255, 255, 255, 0.03) 100%);
    opacity: 0;
    transition: opacity 0.3s;
}

.stat-card:hover {
    transform: translateY(-4px);
    border-color: rgba(124, 58, 237, 0.3);
    box-shadow: 
        0 20px 40px rgba(0, 0, 0, 0.3),
        0 0 30px rgba(124, 58, 237, 0.1);
}

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

.stat-icon {
    width: 56px;
    height: 56px;
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    z-index: 1;
}

.stat-icon.reports { 
    background: linear-gradient(135deg, rgba(239, 68, 68, 0.2) 0%, rgba(239, 68, 68, 0.1) 100%); 
    color: #EF4444;
    box-shadow: 0 4px 20px rgba(239, 68, 68, 0.2);
}
.stat-icon.users { 
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.2) 0%, rgba(59, 130, 246, 0.1) 100%); 
    color: #3B82F6;
    box-shadow: 0 4px 20px rgba(59, 130, 246, 0.2);
}
.stat-icon.comments { 
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.2) 0%, rgba(16, 185, 129, 0.1) 100%); 
    color: #10B981;
    box-shadow: 0 4px 20px rgba(16, 185, 129, 0.2);
}
.stat-icon.actions { 
    background: linear-gradient(135deg, rgba(139, 92, 246, 0.2) 0%, rgba(139, 92, 246, 0.1) 100%); 
    color: #8B5CF6;
    box-shadow: 0 4px 20px rgba(139, 92, 246, 0.2);
}

.stat-info {
    display: flex;
    flex-direction: column;
    position: relative;
    z-index: 1;
}

.stat-value {
    font-size: 2rem;
    font-weight: 800;
    color: #fff;
    line-height: 1.1;
    background: linear-gradient(135deg, #fff 0%, rgba(255, 255, 255, 0.8) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.stat-label {
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.5);
    font-weight: 500;
    margin-top: 4px;
}

.stat-alert {
    position: absolute;
    top: 16px;
    left: 16px;
    background: linear-gradient(135deg, #EF4444 0%, #DC2626 100%);
    color: #fff;
    font-size: 0.7rem;
    font-weight: 700;
    padding: 4px 12px;
    border-radius: 8px;
    box-shadow: 0 4px 15px rgba(239, 68, 68, 0.4);
    animation: pulseAlert 2s ease-in-out infinite;
}

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

/* Dashboard Section - Premium Glass */
.dashboard-section {
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.04) 0%, rgba(255, 255, 255, 0.01) 100%);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 24px;
    padding: 28px;
    backdrop-filter: blur(20px);
    position: relative;
    overflow: hidden;
}

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

.section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 24px;
    padding-bottom: 16px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.section-header h2 {
    font-size: 1.25rem;
    font-weight: 700;
    color: #fff;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 10px;
}

.section-header h2::before {
    content: '';
    width: 4px;
    height: 20px;
    background: linear-gradient(180deg, var(--anime-primary) 0%, #EC4899 100%);
    border-radius: 2px;
}

.btn-link {
    color: var(--anime-primary);
    text-decoration: none;
    font-size: 0.875rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 8px 16px;
    background: rgba(124, 58, 237, 0.1);
    border-radius: 10px;
    transition: all 0.3s;
}

.btn-link:hover {
    background: rgba(124, 58, 237, 0.2);
    transform: translateX(-4px);
}

/* Empty State - Premium */
.empty-state {
    text-align: center;
    padding: 60px 24px;
    color: rgba(255, 255, 255, 0.4);
}

.empty-state svg {
    margin-bottom: 20px;
    opacity: 0.3;
    filter: drop-shadow(0 4px 10px rgba(124, 58, 237, 0.2));
}

.empty-state p {
    margin: 0;
    font-size: 1rem;
    font-weight: 500;
}

.empty-state.small {
    padding: 32px;
}

/* Reports List - Premium */
.reports-list {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.report-item {
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.04) 0%, rgba(255, 255, 255, 0.01) 100%);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 16px;
    padding: 20px;
    display: flex;
    align-items: center;
    gap: 20px;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
}

.report-item::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 4px;
    height: 100%;
    background: linear-gradient(180deg, var(--anime-primary) 0%, #EC4899 100%);
    opacity: 0;
    transition: opacity 0.3s;
}

.report-item:hover {
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.06) 0%, rgba(255, 255, 255, 0.02) 100%);
    border-color: rgba(124, 58, 237, 0.3);
    transform: translateX(-4px);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
}

.report-item:hover::after {
    opacity: 1;
}

.report-item.priority-2 {
    border-right: none;
    background: linear-gradient(145deg, rgba(239, 68, 68, 0.08) 0%, rgba(255, 255, 255, 0.02) 100%);
}

.report-item.priority-2::after {
    background: linear-gradient(180deg, #EF4444 0%, #DC2626 100%);
    opacity: 1;
}

.report-item.priority-1 {
    border-right: none;
    background: linear-gradient(145deg, rgba(245, 158, 11, 0.06) 0%, rgba(255, 255, 255, 0.02) 100%);
}

.report-item.priority-1::after {
    background: linear-gradient(180deg, #F59E0B 0%, #D97706 100%);
    opacity: 1;
}

.priority-badge {
    font-size: 0.7rem;
    font-weight: 700;
    padding: 6px 12px;
    border-radius: 8px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.priority-badge.urgent {
    background: linear-gradient(135deg, #EF4444 0%, #DC2626 100%);
    color: #fff;
    box-shadow: 0 4px 15px rgba(239, 68, 68, 0.3);
    animation: pulseUrgent 2s ease-in-out infinite;
}

.priority-badge.medium {
    background: linear-gradient(135deg, #F59E0B 0%, #D97706 100%);
    color: #fff;
}

.report-info {
    flex: 1;
}

.report-type {
    display: flex;
    gap: 10px;
    margin-bottom: 8px;
    align-items: center;
}

.report-reason {
    font-weight: 700;
    color: #fff;
    font-size: 0.95rem;
}

.report-target-type {
    color: rgba(255, 255, 255, 0.4);
    font-size: 0.8rem;
    padding: 4px 10px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 6px;
}

.report-users {
    display: flex;
    gap: 20px;
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.6);
}

.report-time {
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.35);
    margin-top: 6px;
}

.report-actions {
    display: flex;
    gap: 10px;
}

.btn-icon {
    width: 38px;
    height: 38px;
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: rgba(255, 255, 255, 0.05);
    color: rgba(255, 255, 255, 0.6);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    padding: 0;
}

.btn-icon:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.2);
    color: #fff;
    transform: translateY(-2px);
}

.btn-icon.btn-review:hover { 
    background: linear-gradient(135deg, var(--anime-primary) 0%, #9333EA 100%);
    border-color: var(--anime-primary);
    box-shadow: 0 4px 15px rgba(124, 58, 237, 0.4);
}
.btn-icon.btn-resolve:hover { 
    background: linear-gradient(135deg, #10B981 0%, #059669 100%);
    border-color: #10B981;
    box-shadow: 0 4px 15px rgba(16, 185, 129, 0.4);
}
.btn-icon.btn-reject:hover, 
.btn-icon.btn-danger:hover { 
    background: linear-gradient(135deg, #EF4444 0%, #DC2626 100%);
    border-color: #EF4444;
    box-shadow: 0 4px 15px rgba(239, 68, 68, 0.4);
}

/* Dashboard Columns */
.dashboard-columns {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
    gap: 24px;
}

/* Actions List */
.actions-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.action-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px;
    background: rgba(255, 255, 255, 0.02);
    border-radius: 8px;
}

.action-icon {
    font-size: 1.25rem;
}

.action-info {
    flex: 1;
}

.action-text {
    display: block;
    font-size: 0.875rem;
    color: rgba(255, 255, 255, 0.9);
}

.action-time {
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.4);
}

/* Flagged Users - Premium */
.flagged-users-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.flagged-user-item {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 16px;
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.03) 0%, rgba(255, 255, 255, 0.01) 100%);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 14px;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.flagged-user-item:hover {
    background: rgba(124, 58, 237, 0.08);
    border-color: rgba(124, 58, 237, 0.2);
    transform: translateX(-4px);
}

.user-avatar-small {
    width: 46px;
    height: 46px;
    border-radius: 14px;
    object-fit: cover;
    border: 2px solid rgba(255, 255, 255, 0.1);
}

.flagged-user-item .user-info {
    flex: 1;
}

.flagged-user-item .user-name {
    display: block;
    font-weight: 600;
    font-size: 0.9rem;
    color: #fff;
    margin-bottom: 4px;
}

.user-status {
    font-size: 0.7rem;
    font-weight: 600;
    padding: 4px 10px;
    border-radius: 6px;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.status-success { 
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.2) 0%, rgba(16, 185, 129, 0.1) 100%); 
    color: #10B981;
    border: 1px solid rgba(16, 185, 129, 0.3);
}
.status-warning { 
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.2) 0%, rgba(245, 158, 11, 0.1) 100%); 
    color: #F59E0B;
    border: 1px solid rgba(245, 158, 11, 0.3);
}
.status-muted { 
    background: linear-gradient(135deg, rgba(107, 114, 128, 0.2) 0%, rgba(107, 114, 128, 0.1) 100%); 
    color: #9CA3AF;
    border: 1px solid rgba(107, 114, 128, 0.3);
}
.status-suspended { 
    background: linear-gradient(135deg, rgba(139, 92, 246, 0.2) 0%, rgba(139, 92, 246, 0.1) 100%); 
    color: #8B5CF6;
    border: 1px solid rgba(139, 92, 246, 0.3);
}
.status-banned { 
    background: linear-gradient(135deg, rgba(239, 68, 68, 0.2) 0%, rgba(239, 68, 68, 0.1) 100%); 
    color: #EF4444;
    border: 1px solid rgba(239, 68, 68, 0.3);
}

/* Status badge in user cards */
.user-badges .status-badge {
    font-size: 0.7rem;
    font-weight: 600;
    padding: 4px 10px;
    border-radius: 6px;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.user-badges .trust-badge {
    font-size: 0.75rem;
    font-weight: 700;
    padding: 4px 8px;
    border-radius: 6px;
}

.trust-badge.trust-high {
    background: rgba(16, 185, 129, 0.2);
    color: #10B981;
}

.trust-badge.trust-medium {
    background: rgba(245, 158, 11, 0.2);
    color: #F59E0B;
}

.trust-badge.trust-low {
    background: rgba(239, 68, 68, 0.2);
    color: #EF4444;
}

/* Status badge colors */
.status-badge.status-success {
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.2) 0%, rgba(16, 185, 129, 0.1) 100%);
    color: #10B981;
}

.status-badge.status-warning {
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.2) 0%, rgba(245, 158, 11, 0.1) 100%);
    color: #F59E0B;
}

.status-badge.status-muted {
    background: linear-gradient(135deg, rgba(107, 114, 128, 0.2) 0%, rgba(107, 114, 128, 0.1) 100%);
    color: #9CA3AF;
}

.status-badge.status-suspended {
    background: linear-gradient(135deg, rgba(139, 92, 246, 0.2) 0%, rgba(139, 92, 246, 0.1) 100%);
    color: #8B5CF6;
}

.status-badge.status-banned {
    background: linear-gradient(135deg, rgba(239, 68, 68, 0.2) 0%, rgba(239, 68, 68, 0.1) 100%);
    color: #EF4444;
}

.trust-score {
    width: 42px;
    height: 42px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.8rem;
    font-weight: 800;
    border: 2px solid;
}

.trust-high { 
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.2) 0%, rgba(16, 185, 129, 0.1) 100%); 
    color: #10B981;
    border-color: rgba(16, 185, 129, 0.4);
    box-shadow: 0 4px 15px rgba(16, 185, 129, 0.2);
}
.trust-medium { 
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.2) 0%, rgba(245, 158, 11, 0.1) 100%); 
    color: #F59E0B;
    border-color: rgba(245, 158, 11, 0.4);
    box-shadow: 0 4px 15px rgba(245, 158, 11, 0.2);
}
.trust-low { 
    background: linear-gradient(135deg, rgba(239, 68, 68, 0.2) 0%, rgba(239, 68, 68, 0.1) 100%); 
    color: #EF4444;
    border-color: rgba(239, 68, 68, 0.4);
    box-shadow: 0 4px 15px rgba(239, 68, 68, 0.2);
}

/* Modals - Premium Glass */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.85);
    backdrop-filter: blur(12px);
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    animation: fadeInModal 0.3s ease;
}

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

.modal-content {
    background: linear-gradient(145deg, rgba(26, 29, 46, 0.98) 0%, rgba(15, 18, 32, 0.98) 100%);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 24px;
    width: 100%;
    max-width: 600px;
    max-height: 90vh;
    overflow-y: auto;
    padding: 32px;
    position: relative;
    box-shadow: 
        0 30px 60px rgba(0, 0, 0, 0.5),
        0 0 100px rgba(124, 58, 237, 0.1),
        inset 0 1px 0 rgba(255, 255, 255, 0.1);
    animation: slideUpModal 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

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

.modal-content::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--anime-primary), #EC4899, transparent);
    border-radius: 24px 24px 0 0;
}

.modal-content h3 {
    margin: 0 0 24px;
    font-size: 1.4rem;
    font-weight: 700;
    color: #fff;
    padding-bottom: 16px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.modal-close {
    position: absolute;
    top: 20px;
    left: 20px;
    width: 36px;
    height: 36px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: rgba(255, 255, 255, 0.05);
    border-radius: 12px;
    color: rgba(255, 255, 255, 0.7);
    font-size: 1.25rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    transition: all 0.3s;
}

.modal-close:hover {
    background: rgba(239, 68, 68, 0.2);
    border-color: rgba(239, 68, 68, 0.3);
    color: #EF4444;
    transform: rotate(90deg);
}

/* User Card Modal - Premium */
.user-card-modal {
    max-width: 520px;
}

.user-card-header {
    display: flex;
    gap: 20px;
    margin-bottom: 28px;
    padding: 20px;
    background: linear-gradient(145deg, rgba(124, 58, 237, 0.1) 0%, rgba(236, 72, 153, 0.05) 100%);
    border-radius: 16px;
    border: 1px solid rgba(255, 255, 255, 0.06);
}

.user-card-avatar {
    width: 90px;
    height: 90px;
    border-radius: 20px;
    object-fit: cover;
    border: 3px solid rgba(124, 58, 237, 0.5);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3);
}

.user-card-info h3 {
    margin: 0 0 6px;
    font-size: 1.2rem;
}

.user-email {
    display: block;
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.45);
    margin-bottom: 10px;
}

.user-meta {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 6px;
}

.trust-badge {
    font-size: 0.75rem;
    font-weight: 600;
    padding: 6px 12px;
    border-radius: 8px;
}

.user-registered {
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.35);
}

.user-card-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    padding: 20px;
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.04) 0%, rgba(255, 255, 255, 0.01) 100%);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 16px;
    margin-bottom: 24px;
}

.user-card-stats .stat-item {
    text-align: center;
    padding: 12px;
    background: rgba(0, 0, 0, 0.2);
    border-radius: 12px;
}

.user-card-stats .stat-num {
    display: block;
    font-size: 1.75rem;
    font-weight: 800;
    background: linear-gradient(135deg, #fff 0%, rgba(255, 255, 255, 0.7) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.user-card-stats .stat-label {
    font-size: 0.7rem;
    color: rgba(255, 255, 255, 0.45);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-weight: 600;
    margin-top: 4px;
}

.user-card-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 28px;
}

.btn-action {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    border: 1px solid transparent;
    border-radius: 12px;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.btn-action:hover {
    transform: translateY(-2px);
}

.btn-warn {
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.15) 0%, rgba(245, 158, 11, 0.08) 100%);
    border-color: rgba(245, 158, 11, 0.3);
    color: #F59E0B;
}

.btn-warn:hover {
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.25) 0%, rgba(245, 158, 11, 0.15) 100%);
    box-shadow: 0 8px 20px rgba(245, 158, 11, 0.2);
}

.btn-mute {
    background: linear-gradient(135deg, rgba(107, 114, 128, 0.15) 0%, rgba(107, 114, 128, 0.08) 100%);
    border-color: rgba(107, 114, 128, 0.3);
    color: #9CA3AF;
}

.btn-mute:hover {
    background: linear-gradient(135deg, rgba(107, 114, 128, 0.25) 0%, rgba(107, 114, 128, 0.15) 100%);
    box-shadow: 0 8px 20px rgba(107, 114, 128, 0.2);
}

.btn-dm-block {
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.15) 0%, rgba(59, 130, 246, 0.08) 100%);
    border-color: rgba(59, 130, 246, 0.3);
    color: #3B82F6;
}

.btn-dm-block:hover {
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.25) 0%, rgba(59, 130, 246, 0.15) 100%);
    box-shadow: 0 8px 20px rgba(59, 130, 246, 0.2);
}

.btn-ban {
    background: linear-gradient(135deg, rgba(239, 68, 68, 0.15) 0%, rgba(239, 68, 68, 0.08) 100%);
    border-color: rgba(239, 68, 68, 0.3);
    color: #EF4444;
}

.btn-ban:hover {
    background: linear-gradient(135deg, rgba(239, 68, 68, 0.25) 0%, rgba(239, 68, 68, 0.15) 100%);
    box-shadow: 0 8px 20px rgba(239, 68, 68, 0.2);
}

.btn-unban {
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.15) 0%, rgba(16, 185, 129, 0.08) 100%);
    border-color: rgba(16, 185, 129, 0.3);
    color: #10B981;
}

.btn-unban:hover {
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.25) 0%, rgba(16, 185, 129, 0.15) 100%);
    box-shadow: 0 8px 20px rgba(16, 185, 129, 0.2);
}

.user-card-history h4 {
    font-size: 1rem;
    color: #fff;
    margin: 0 0 12px;
}

.history-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.history-item {
    padding: 12px;
    background: rgba(255, 255, 255, 0.03);
    border-radius: 8px;
    font-size: 0.875rem;
}

.history-action {
    font-weight: 600;
    color: var(--anime-primary);
}

.history-staff {
    color: rgba(255, 255, 255, 0.6);
    margin-right: 8px;
}

.history-time {
    color: rgba(255, 255, 255, 0.4);
    margin-right: 8px;
}

.history-reason {
    display: block;
    margin-top: 4px;
    color: rgba(255, 255, 255, 0.5);
}

.no-history {
    color: rgba(255, 255, 255, 0.4);
    font-size: 0.875rem;
}

/* Warning Modal */
.warning-modal {
    max-width: 450px;
}

.form-group {
    margin-bottom: 20px;
}

.form-group label {
    display: block;
    margin-bottom: 10px;
    font-size: 0.85rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.65);
}

.form-group select,
.form-group textarea,
.form-group input[type="text"] {
    width: 100%;
    padding: 14px 16px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    color: #fff;
    font-size: 0.9rem;
    transition: all 0.3s;
}

.form-group select:focus,
.form-group textarea:focus,
.form-group input[type="text"]:focus {
    outline: none;
    border-color: var(--anime-primary);
    box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.15);
}

.form-actions {
    display: flex;
    gap: 14px;
    justify-content: flex-end;
    margin-top: 28px;
    padding-top: 20px;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.btn-secondary {
    padding: 12px 24px;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 12px;
    color: #fff;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s;
}

.btn-secondary:hover {
    background: rgba(255, 255, 255, 0.12);
    border-color: rgba(255, 255, 255, 0.25);
}

.btn-warning {
    padding: 12px 24px;
    background: linear-gradient(135deg, #F59E0B 0%, #D97706 100%);
    border: none;
    border-radius: 12px;
    color: #000;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.3s;
    box-shadow: 0 4px 15px rgba(245, 158, 11, 0.3);
}

.btn-warning:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(245, 158, 11, 0.4);
}

.community-admin .btn-primary {
    padding: 12px 28px;
    background: linear-gradient(135deg, var(--anime-primary) 0%, #9333EA 100%);
    border: none;
    border-radius: 12px;
    color: #fff;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.3s;
    box-shadow: 0 4px 20px rgba(124, 58, 237, 0.3);
}

.community-admin .btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 30px rgba(124, 58, 237, 0.45);
}

/* Reports Tab - Premium */
.reports-tab {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.filters-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 20px;
    padding: 20px 24px;
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.04) 0%, rgba(255, 255, 255, 0.01) 100%);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 16px;
}

.status-filters {
    display: flex;
    gap: 6px;
    background: rgba(0, 0, 0, 0.2);
    padding: 6px;
    border-radius: 14px;
}

.status-filter {
    padding: 10px 18px;
    background: transparent;
    border-radius: 10px;
    color: rgba(255, 255, 255, 0.6);
    text-decoration: none;
    font-size: 0.85rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 10px;
    transition: all 0.3s;
}

.status-filter:hover {
    background: rgba(255, 255, 255, 0.1);
    color: #fff;
}

.status-filter.active {
    background: linear-gradient(135deg, var(--anime-primary) 0%, #9333EA 100%);
    color: #fff;
    box-shadow: 0 4px 15px rgba(124, 58, 237, 0.4);
}

.status-filter .count {
    background: rgba(0, 0, 0, 0.25);
    padding: 3px 10px;
    border-radius: 8px;
    font-size: 0.7rem;
    font-weight: 700;
}

.filter-dropdowns {
    display: flex;
    gap: 14px;
}

.filter-dropdowns select {
    padding: 12px 36px 12px 16px;
    background: rgba(15, 18, 32, 0.9) !important;
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 12px;
    color: #fff !important;
    font-size: 0.85rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: left 12px center !important;
}

.filter-dropdowns select option {
    background: #1A1D2E !important;
    color: #fff !important;
    padding: 12px;
}

.filter-dropdowns select:hover,
.filter-dropdowns select:focus {
    border-color: var(--anime-primary);
    box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.15);
    outline: none;
}

/* Fix all selects in community admin */
.community-admin select,
.community-admin .search-input-group select,
.community-admin .form-group select {
    background: rgba(15, 18, 32, 0.95) !important;
    color: #fff !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    border-radius: 12px !important;
    padding: 12px 16px !important;
    appearance: none !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: left 12px center !important;
}

.community-admin select option {
    background: #1A1D2E !important;
    color: #fff !important;
}

/* Reports Table - Premium */
.reports-table-wrapper {
    overflow-x: auto;
    border-radius: 16px;
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.03) 0%, rgba(255, 255, 255, 0.01) 100%);
    border: 1px solid rgba(255, 255, 255, 0.06);
}

.reports-table {
    width: 100%;
    border-collapse: collapse;
}

.reports-table th,
.reports-table td {
    padding: 16px 20px;
    text-align: right;
    border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}

.reports-table th {
    background: rgba(0, 0, 0, 0.2);
    font-weight: 700;
    color: rgba(255, 255, 255, 0.5);
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.reports-table tr {
    transition: all 0.2s;
}

.reports-table tr:hover {
    background: rgba(124, 58, 237, 0.05);
}

.priority-indicator {
    font-size: 0.875rem;
}

.type-badge {
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 0.75rem;
    font-weight: 500;
    background: rgba(255, 255, 255, 0.1);
}

.type-comment { background: rgba(59, 130, 246, 0.2); color: #3B82F6; }
.type-user { background: rgba(139, 92, 246, 0.2); color: #8B5CF6; }
.type-dm { background: rgba(236, 72, 153, 0.2); color: #EC4899; }

.reason-badge {
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 0.75rem;
    font-weight: 500;
}

.reason-spoiler { background: rgba(245, 158, 11, 0.2); color: #F59E0B; }
.reason-spam { background: rgba(107, 114, 128, 0.2); color: #9CA3AF; }
.reason-harassment { background: rgba(239, 68, 68, 0.2); color: #EF4444; }
.reason-hate_speech { background: rgba(220, 38, 38, 0.2); color: #DC2626; }

.user-link {
    color: var(--anime-primary);
    text-decoration: none;
}

.user-link:hover {
    text-decoration: underline;
}

.status-badge {
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 0.75rem;
    font-weight: 500;
}

.status-open { background: rgba(245, 158, 11, 0.2); color: #F59E0B; }
.status-review { background: rgba(59, 130, 246, 0.2); color: #3B82F6; }
.status-success { background: rgba(16, 185, 129, 0.2); color: #10B981; }
.status-rejected { background: rgba(107, 114, 128, 0.2); color: #9CA3AF; }

.assigned-to {
    display: block;
    font-size: 0.7rem;
    color: rgba(255, 255, 255, 0.5);
    margin-top: 4px;
}

.action-buttons {
    display: flex;
    gap: 4px;
}

/* Users Tab - Premium */
.users-tab {
    display: flex;
    flex-direction: column;
    gap: 28px;
}

.users-search-section {
    background: linear-gradient(145deg, rgba(124, 58, 237, 0.08) 0%, rgba(255, 255, 255, 0.02) 100%);
    border: 1px solid rgba(124, 58, 237, 0.2);
    border-radius: 20px;
    padding: 28px;
    position: relative;
    overflow: hidden;
}

.users-search-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--anime-primary), #EC4899, transparent);
}

.users-search-section h2 {
    font-size: 1.35rem;
    font-weight: 700;
    margin: 0 0 20px;
    color: #fff;
}

.search-controls {
    display: flex;
    gap: 14px;
}

.search-input-group {
    display: flex;
    gap: 10px;
    flex: 1;
}

.search-input-group select {
    padding: 14px 16px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    color: #fff;
    font-weight: 500;
    transition: all 0.3s;
}

.search-input-group select:focus {
    border-color: var(--anime-primary);
    box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.15);
}

.search-input-group input {
    flex: 1;
    padding: 14px 20px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    color: #fff;
    font-size: 0.95rem;
    transition: all 0.3s;
}

.search-input-group input:focus {
    border-color: var(--anime-primary);
    box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.15);
    outline: none;
}

.search-input-group input::placeholder {
    color: rgba(255, 255, 255, 0.35);
}

.btn-search {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 28px;
    background: linear-gradient(135deg, var(--anime-primary) 0%, #9333EA 100%);
    border: none;
    border-radius: 12px;
    color: #fff;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.3s;
    box-shadow: 0 4px 20px rgba(124, 58, 237, 0.3);
}

.btn-search:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 30px rgba(124, 58, 237, 0.4);
}

.users-quick-filters h3 {
    font-size: 1.1rem;
    font-weight: 700;
    margin: 0 0 20px;
    color: #fff;
}

.filter-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
}

.filter-btn {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 22px;
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.04) 0%, rgba(255, 255, 255, 0.01) 100%);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 14px;
    color: rgba(255, 255, 255, 0.75);
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    font-weight: 500;
}

.filter-btn:hover {
    background: linear-gradient(145deg, rgba(124, 58, 237, 0.15) 0%, rgba(124, 58, 237, 0.05) 100%);
    border-color: rgba(124, 58, 237, 0.4);
    color: #fff;
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.2);
}

.filter-btn.filter-btn-primary {
    background: linear-gradient(135deg, var(--anime-primary) 0%, #9333EA 100%) !important;
    border-color: var(--anime-primary) !important;
    color: #fff !important;
    box-shadow: 0 4px 15px rgba(124, 58, 237, 0.3);
}

.filter-btn.filter-btn-primary:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 25px rgba(124, 58, 237, 0.4);
}

.filter-icon {
    font-size: 1.3rem;
}

.users-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 18px;
}

.user-card-mini {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 20px;
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.04) 0%, rgba(255, 255, 255, 0.01) 100%);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 16px;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.user-card-mini:hover {
    background: linear-gradient(145deg, rgba(124, 58, 237, 0.1) 0%, rgba(255, 255, 255, 0.03) 100%);
    border-color: rgba(124, 58, 237, 0.4);
    transform: translateY(-4px);
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.3);
}

.user-card-mini .user-avatar {
    width: 54px;
    height: 54px;
    border-radius: 14px;
    object-fit: cover;
    border: 2px solid rgba(255, 255, 255, 0.1);
}

.user-card-mini .user-info {
    flex: 1;
    min-width: 0;
}

.user-card-mini .user-name {
    display: block;
    font-weight: 700;
    font-size: 0.95rem;
    color: #fff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-bottom: 4px;
}

.user-card-mini .user-email {
    display: block;
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.4);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.user-badges {
    display: flex;
    flex-direction: column;
    gap: 6px;
    align-items: flex-end;
}

/* Analytics Tab - Premium */
.analytics-tab {
    display: flex;
    flex-direction: column;
    gap: 28px;
}

.analytics-section {
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.04) 0%, rgba(255, 255, 255, 0.01) 100%);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 24px;
    padding: 28px;
    position: relative;
    overflow: hidden;
}

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

.analytics-section h2 {
    font-size: 1.35rem;
    font-weight: 700;
    margin: 0 0 28px;
    color: #fff;
    display: flex;
    align-items: center;
    gap: 10px;
}

.analytics-section h2::before {
    content: '';
    width: 4px;
    height: 20px;
    background: linear-gradient(180deg, #10B981 0%, #059669 100%);
    border-radius: 2px;
}

.analytics-section h3 {
    font-size: 1.05rem;
    font-weight: 700;
    margin: 0 0 20px;
    color: #fff;
}

.stats-comparison {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 28px;
}

.stats-period {
    background: rgba(0, 0, 0, 0.2);
    border-radius: 16px;
    padding: 20px;
}

.stats-period h3 {
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.5);
    margin-bottom: 16px;
    padding-bottom: 12px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    font-weight: 600;
}

.stats-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
}

.stats-grid .stat-item {
    text-align: center;
    padding: 18px 12px;
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.04) 0%, rgba(255, 255, 255, 0.01) 100%);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 14px;
    transition: all 0.3s;
}

.stats-grid .stat-item:hover {
    border-color: rgba(124, 58, 237, 0.3);
    transform: translateY(-2px);
}

.stats-grid .stat-value {
    display: block;
    font-size: 1.6rem;
    font-weight: 800;
    background: linear-gradient(135deg, #fff 0%, rgba(255, 255, 255, 0.7) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.stats-grid .stat-label {
    font-size: 0.7rem;
    color: rgba(255, 255, 255, 0.45);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    margin-top: 4px;
}

.analytics-charts {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(380px, 1fr));
    gap: 24px;
}

.chart-card {
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.04) 0%, rgba(255, 255, 255, 0.01) 100%);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 20px;
    padding: 28px;
}

.chart-card h3 {
    font-size: 1.05rem;
    font-weight: 700;
    margin: 0 0 24px;
    color: #fff;
}

.horizontal-bars {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.bar-item {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 8px 0;
}

.bar-label {
    width: 90px;
    font-size: 0.8rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.6);
}

.bar-container {
    flex: 1;
    height: 28px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 8px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.05);
}

.bar-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--anime-primary) 0%, #EC4899 100%);
    border-radius: 6px;
    transition: width 0.6s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 2px 10px rgba(124, 58, 237, 0.3);
}

.bar-value {
    width: 50px;
    text-align: left;
    font-size: 0.9rem;
    font-weight: 700;
    color: #fff;
}

.status-distribution {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.status-item {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.status-header {
    display: flex;
    justify-content: space-between;
}

.status-name {
    font-size: 0.875rem;
    color: rgba(255, 255, 255, 0.8);
}

.status-count {
    font-weight: 600;
    color: #fff;
}

.status-bar {
    height: 8px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 4px;
    overflow: hidden;
}

.status-fill {
    height: 100%;
    background: var(--anime-primary);
    border-radius: 4px;
}

.status-percent {
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.5);
}

.analytics-columns {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
    gap: 24px;
}

.contributors-list,
.staff-activity-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.contributor-item,
.staff-item {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 16px;
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.03) 0%, rgba(255, 255, 255, 0.01) 100%);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 14px;
    transition: all 0.3s;
}

.contributor-item:hover,
.staff-item:hover {
    background: rgba(124, 58, 237, 0.08);
    border-color: rgba(124, 58, 237, 0.2);
    transform: translateX(-4px);
}

.contributor-rank {
    font-weight: 800;
    font-size: 1rem;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, rgba(124, 58, 237, 0.2) 0%, rgba(124, 58, 237, 0.1) 100%);
    border-radius: 10px;
    color: var(--anime-primary);
}

.contributor-avatar,
.staff-avatar {
    width: 40px;
    height: 40px;
    border-radius: 12px;
    object-fit: cover;
    border: 2px solid rgba(255, 255, 255, 0.1);
}

.contributor-info,
.staff-info {
    flex: 1;
}

.contributor-name,
.staff-name {
    display: block;
    color: #fff;
    font-weight: 600;
    font-size: 0.9rem;
}

.contributor-stats {
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.45);
    margin-top: 2px;
}

.action-count {
    font-weight: 700;
    font-size: 0.9rem;
    color: var(--anime-primary);
    padding: 6px 12px;
    background: rgba(124, 58, 237, 0.15);
    border-radius: 8px;
}

/* Activity Chart - Premium */
.activity-chart {
    padding: 24px;
    background: rgba(0, 0, 0, 0.2);
    border-radius: 16px;
    margin-top: 16px;
}

.chart-legend {
    display: flex;
    gap: 28px;
    margin-bottom: 24px;
    padding-bottom: 16px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.legend-item {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 0.85rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.7);
}

.legend-item::before {
    content: '';
    width: 16px;
    height: 16px;
    border-radius: 4px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

.legend-comments::before {
    background: linear-gradient(135deg, var(--anime-primary) 0%, #9333EA 100%);
}

.legend-reports::before {
    background: linear-gradient(135deg, #EF4444 0%, #DC2626 100%);
}

.simple-chart {
    display: flex;
    gap: 10px;
    align-items: flex-end;
    height: 160px;
    padding: 20px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.chart-day {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}

.chart-bars {
    display: flex;
    gap: 4px;
    height: 110px;
    align-items: flex-end;
}

.chart-bar {
    width: 14px;
    border-radius: 4px 4px 0 0;
    min-height: 4px;
    transition: all 0.3s;
}

.chart-day:hover .chart-bar {
    transform: scaleY(1.05);
}

.comments-bar {
    background: linear-gradient(180deg, var(--anime-primary) 0%, #9333EA 100%);
    box-shadow: 0 4px 12px rgba(124, 58, 237, 0.3);
}

.reports-bar {
    background: linear-gradient(180deg, #EF4444 0%, #DC2626 100%);
    box-shadow: 0 4px 12px rgba(239, 68, 68, 0.3);
}

.chart-label {
    font-size: 0.7rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.35);
}

/* Staff Tab - Premium */
.staff-tab {
    display: flex;
    flex-direction: column;
    gap: 28px;
}

.staff-section {
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.04) 0%, rgba(255, 255, 255, 0.01) 100%);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 24px;
    padding: 28px;
    position: relative;
    overflow: hidden;
}

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

.staff-section h2 {
    font-size: 1.35rem;
    font-weight: 700;
    margin: 0 0 24px;
    color: #fff;
    display: flex;
    align-items: center;
    gap: 10px;
}

.staff-section h2::before {
    content: '';
    width: 4px;
    height: 20px;
    background: linear-gradient(180deg, #F59E0B 0%, #D97706 100%);
    border-radius: 2px;
}

.add-staff-form .form-row {
    display: flex;
    gap: 18px;
    align-items: flex-end;
}

.add-staff-form .form-group {
    flex: 1;
    position: relative;
}

.add-staff-form .form-submit {
    flex: 0 0 auto;
}

.user-search-results {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: linear-gradient(145deg, rgba(26, 29, 46, 0.98) 0%, rgba(15, 18, 32, 0.98) 100%);
    border: 1px solid rgba(124, 58, 237, 0.3);
    border-radius: 14px;
    margin-top: 8px;
    max-height: 240px;
    overflow-y: auto;
    z-index: 100;
    display: none;
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.4);
}

.user-result {
    padding: 14px 16px;
    cursor: pointer;
    transition: all 0.2s;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.user-result:last-child {
    border-bottom: none;
}

.user-result:hover {
    background: rgba(124, 58, 237, 0.15);
}

.user-result .user-name {
    display: block;
    color: #fff;
    font-weight: 600;
}

.user-result .user-email {
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.4);
    margin-top: 2px;
}

.staff-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 20px;
}

.staff-card {
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.04) 0%, rgba(255, 255, 255, 0.01) 100%);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 20px;
    overflow: hidden;
    transition: all 0.3s;
}

.staff-card:hover {
    border-color: rgba(124, 58, 237, 0.3);
    transform: translateY(-4px);
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.3);
}

.staff-card-header {
    display: flex;
    gap: 18px;
    padding: 24px;
    border-top: 4px solid;
    background: rgba(0, 0, 0, 0.15);
}

.staff-card .staff-avatar {
    width: 70px;
    height: 70px;
    border-radius: 18px;
    object-fit: cover;
    border: 3px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3);
}

.staff-card .staff-info h4 {
    margin: 0 0 6px;
    color: #fff;
    font-size: 1.1rem;
    font-weight: 700;
}

.staff-card .staff-email {
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.4);
}

.staff-card-body {
    padding: 0 20px 20px;
}

.staff-role {
    display: inline-block;
    padding: 6px 12px;
    border-radius: 6px;
    color: #fff;
    font-size: 0.75rem;
    font-weight: 600;
    margin-bottom: 12px;
}

.staff-meta {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.meta-item {
    display: flex;
    gap: 8px;
    font-size: 0.75rem;
}

.meta-label {
    color: rgba(255, 255, 255, 0.5);
}

.meta-value {
    color: rgba(255, 255, 255, 0.8);
}

.staff-card-actions {
    display: flex;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.staff-card-actions button {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 12px;
    background: none;
    border: none;
    color: rgba(255, 255, 255, 0.6);
    font-size: 0.875rem;
    cursor: pointer;
    transition: all 0.2s;
}

.staff-card-actions button:hover {
    background: rgba(255, 255, 255, 0.05);
}

.staff-card-actions .btn-edit:hover {
    color: #3B82F6;
}

.staff-card-actions .btn-remove:hover {
    color: #EF4444;
}

.permissions-table table {
    width: 100%;
    border-collapse: collapse;
}

.permissions-table th,
.permissions-table td {
    padding: 12px;
    text-align: center;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.permissions-table th {
    background: rgba(255, 255, 255, 0.03);
    color: rgba(255, 255, 255, 0.6);
    font-weight: 600;
    font-size: 0.75rem;
}

.permissions-table td:first-child {
    text-align: right;
    color: rgba(255, 255, 255, 0.8);
}

/* DMs Tab - Premium */
.dms-tab {
    display: flex;
    flex-direction: column;
    gap: 28px;
}

.tab-notice {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 18px 24px;
    background: linear-gradient(145deg, rgba(245, 158, 11, 0.12) 0%, rgba(245, 158, 11, 0.05) 100%);
    border: 1px solid rgba(245, 158, 11, 0.3);
    border-radius: 16px;
    color: #F59E0B;
    font-size: 0.9rem;
    font-weight: 500;
}

.tab-notice svg {
    flex-shrink: 0;
    filter: drop-shadow(0 0 8px rgba(245, 158, 11, 0.3));
}

.dm-reports-list {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.dm-report-item {
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.04) 0%, rgba(255, 255, 255, 0.01) 100%);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 20px;
    padding: 24px;
    position: relative;
    overflow: hidden;
    transition: all 0.3s;
}

.dm-report-item:hover {
    border-color: rgba(124, 58, 237, 0.3);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
}

.dm-report-item.priority-2 {
    border-right: none;
    background: linear-gradient(145deg, rgba(239, 68, 68, 0.08) 0%, rgba(255, 255, 255, 0.02) 100%);
}

.dm-report-item.priority-2::before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 4px;
    background: linear-gradient(180deg, #EF4444 0%, #DC2626 100%);
}

.dm-report-item .report-header {
    display: flex;
    gap: 10px;
    margin-bottom: 16px;
    align-items: center;
}

.dm-report-item .report-users {
    display: flex;
    gap: 28px;
    margin-bottom: 20px;
    padding: 16px;
    background: rgba(0, 0, 0, 0.2);
    border-radius: 12px;
}

.dm-report-item .user-info .label {
    color: rgba(255, 255, 255, 0.45);
    margin-left: 8px;
    font-size: 0.8rem;
}

.reported-message {
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.03) 0%, transparent 100%);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 14px;
    padding: 20px;
    margin-bottom: 18px;
}

.message-label {
    font-size: 0.75rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.45);
    margin-bottom: 10px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.message-content {
    color: #fff;
    line-height: 1.6;
    font-size: 0.95rem;
}

.message-time {
    display: block;
    margin-top: 12px;
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.35);
}

.btn-toggle-context {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 12px;
    background: rgba(255, 255, 255, 0.05);
    border: none;
    border-radius: 6px;
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.875rem;
    cursor: pointer;
}

.btn-toggle-context:hover {
    background: rgba(255, 255, 255, 0.1);
}

.context-messages {
    margin-top: 12px;
    padding: 12px;
    background: rgba(0, 0, 0, 0.2);
    border-radius: 8px;
}

.context-label {
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.4);
    margin-bottom: 8px;
}

.context-message {
    padding: 8px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    font-size: 0.875rem;
    color: rgba(255, 255, 255, 0.7);
}

.context-message .sender {
    color: var(--anime-primary);
    margin-left: 8px;
}

.report-details {
    background: rgba(255, 255, 255, 0.03);
    padding: 12px;
    border-radius: 8px;
    font-size: 0.875rem;
    color: rgba(255, 255, 255, 0.8);
    margin-bottom: 12px;
}

.blocked-users-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.blocked-user-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px;
    background: rgba(255, 255, 255, 0.02);
    border-radius: 8px;
}

.blocked-user-item .user-info a {
    color: #fff;
    font-weight: 500;
}

.blocked-user-item .user-email {
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.5);
    margin-right: 12px;
}

.block-info {
    display: flex;
    align-items: center;
    gap: 12px;
}

.block-until {
    font-size: 0.875rem;
    color: rgba(255, 255, 255, 0.6);
}

.btn-unblock {
    padding: 6px 12px;
    background: rgba(16, 185, 129, 0.2);
    border: none;
    border-radius: 6px;
    color: #10B981;
    font-size: 0.75rem;
    cursor: pointer;
}

.btn-unblock:hover {
    background: rgba(16, 185, 129, 0.3);
}

/* Content Tab - Premium */
.content-tab {
    display: flex;
    flex-direction: column;
    gap: 28px;
}

.content-section {
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.04) 0%, rgba(255, 255, 255, 0.01) 100%);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 24px;
    padding: 28px;
    position: relative;
    overflow: hidden;
}

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

.content-section .badge {
    background: linear-gradient(135deg, var(--anime-primary) 0%, #EC4899 100%);
    color: #fff;
    padding: 6px 14px;
    border-radius: 10px;
    font-size: 0.75rem;
    font-weight: 700;
    box-shadow: 0 4px 15px rgba(124, 58, 237, 0.3);
}

.flagged-content-list {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.flagged-content-item {
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.03) 0%, rgba(255, 255, 255, 0.01) 100%);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 16px;
    padding: 20px;
    transition: all 0.3s;
}

.flagged-content-item:hover {
    background: rgba(124, 58, 237, 0.05);
    border-color: rgba(124, 58, 237, 0.2);
}

.content-header {
    display: flex;
    gap: 10px;
    align-items: center;
    margin-bottom: 14px;
}

.content-type {
    font-weight: 700;
    color: #fff;
    font-size: 0.9rem;
}

.content-status {
    padding: 5px 10px;
    border-radius: 8px;
    font-size: 0.75rem;
    font-weight: 600;
}

.content-flags {
    display: flex;
    gap: 6px;
}

.flag-badge {
    padding: 4px 10px;
    border-radius: 6px;
    font-size: 0.7rem;
    font-weight: 600;
    background: rgba(255, 255, 255, 0.08);
}

.flag-spoiler {
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.2) 0%, rgba(245, 158, 11, 0.1) 100%);
    color: #F59E0B;
    border: 1px solid rgba(245, 158, 11, 0.3);
}

.content-preview {
    margin-bottom: 12px;
}

.content-preview p {
    margin: 0 0 8px;
    color: rgba(255, 255, 255, 0.8);
}

.content-meta {
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.5);
}

.content-note {
    background: rgba(0, 0, 0, 0.2);
    padding: 12px;
    border-radius: 8px;
    font-size: 0.875rem;
    color: rgba(255, 255, 255, 0.7);
    margin-bottom: 12px;
}

.content-actions {
    display: flex;
    gap: 8px;
}

.btn-restore {
    background: rgba(16, 185, 129, 0.2);
    color: #10B981;
}

.btn-restore:hover {
    background: rgba(16, 185, 129, 0.3);
}

.btn-delete {
    background: rgba(239, 68, 68, 0.2);
    color: #EF4444;
}

.btn-delete:hover {
    background: rgba(239, 68, 68, 0.3);
}

.comments-list {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.comment-item {
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.03) 0%, rgba(255, 255, 255, 0.01) 100%);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 16px;
    padding: 20px;
    transition: all 0.3s;
}

.comment-item:hover {
    background: rgba(124, 58, 237, 0.05);
    border-color: rgba(124, 58, 237, 0.2);
    transform: translateX(-4px);
}

.comment-header {
    display: flex;
    gap: 14px;
    margin-bottom: 14px;
}

.comment-avatar {
    width: 40px;
    height: 40px;
    border-radius: 12px;
    object-fit: cover;
    border: 2px solid rgba(255, 255, 255, 0.1);
}

.comment-meta {
    flex: 1;
}

.comment-author a {
    color: #fff;
    font-weight: 600;
    font-size: 0.9rem;
}

.comment-on {
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.45);
    margin-right: 8px;
}

.comment-on a {
    color: var(--anime-primary);
}

.comment-time {
    font-size: 0.7rem;
    color: rgba(255, 255, 255, 0.35);
    display: block;
    margin-top: 2px;
}

.comment-content {
    color: rgba(255, 255, 255, 0.75);
    line-height: 1.6;
    margin-bottom: 14px;
    font-size: 0.9rem;
}

.comment-actions {
    display: flex;
    gap: 8px;
}

/* Loading Spinner - Premium */
.community-admin .loading-spinner {
    text-align: center;
    padding: 60px 40px;
    color: rgba(255, 255, 255, 0.5);
}

.community-admin .loading-spinner::before {
    content: '';
    display: block;
    width: 40px;
    height: 40px;
    margin: 0 auto 20px;
    border: 3px solid rgba(124, 58, 237, 0.2);
    border-top-color: var(--anime-primary);
    border-radius: 50%;
    animation: spinPremium 0.8s linear infinite;
}

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

/* Dashboard Columns - Premium */
.dashboard-columns {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(380px, 1fr));
    gap: 24px;
}

/* Actions List - Premium */
.actions-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.action-item {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px;
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.03) 0%, transparent 100%);
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.04);
    transition: all 0.2s;
}

.action-item:hover {
    background: rgba(124, 58, 237, 0.05);
    border-color: rgba(124, 58, 237, 0.1);
}

.action-icon {
    font-size: 1.3rem;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 10px;
}

.action-info {
    flex: 1;
}

.action-text {
    display: block;
    font-size: 0.875rem;
    color: rgba(255, 255, 255, 0.85);
}

.action-text strong {
    color: #fff;
}

.action-time {
    font-size: 0.7rem;
    color: rgba(255, 255, 255, 0.35);
    display: block;
    margin-top: 2px;
}

/* Responsive - Premium */
@media (max-width: 768px) {
    .admin-header-content {
        flex-direction: column;
        gap: 16px;
        text-align: center;
    }
    
    .admin-header h1 {
        font-size: 1.5rem;
    }
    
    .admin-tabs {
        padding: 0 16px;
    }
    
    .admin-tab {
        padding: 14px 16px;
        font-size: 0.85rem;
    }
    
    .admin-content {
        padding: 20px;
    }
    
    .stats-row {
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
    }
    
    .stat-card {
        padding: 18px;
    }
    
    .dashboard-columns {
        grid-template-columns: 1fr;
    }
    
    .filters-bar {
        flex-direction: column;
        align-items: stretch;
    }
    
    .status-filters {
        overflow-x: auto;
        padding-bottom: 8px;
    }
    
    .add-staff-form .form-row {
        flex-direction: column;
    }
    
    .analytics-charts,
    .analytics-columns {
        grid-template-columns: 1fr;
    }
    
    .users-grid,
    .staff-grid {
        grid-template-columns: 1fr;
    }
}

/* ========================================
   TMDB SEARCH STYLES
   ======================================== */

.tmdb-search-section {
    margin-bottom: 24px;
}

.tmdb-search-input {
    display: flex;
    gap: 10px;
}

.tmdb-search-input input {
    flex: 1;
}

button.btn-tmdb-search {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    background: var(--anime-primary);
    border: none;
    border-radius: 12px;
    color: white;
    cursor: pointer;
    transition: all 0.3s;
    padding: 0 !important;
}

.btn-tmdb-search:hover {
    background: var(--anime-primary-dark);
    transform: translateY(-2px);
}

.tmdb-results {
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 14px;
    margin-top: 12px;
    max-height: 350px;
    overflow: hidden;
}

.tmdb-results-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 16px;
    background: rgba(0, 0, 0, 0.2);
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    font-weight: 600;
    font-size: 0.9rem;
    color: var(--text-muted);
}

.btn-close-results {
    background: none;
    border: none;
    color: var(--text-muted);
    font-size: 1.5rem;
    cursor: pointer;
    padding: 0 !important;
    line-height: 1;
}

.tmdb-results-list {
    max-height: 300px;
    overflow-y: auto;
}

.tmdb-result-item {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 12px 16px;
    cursor: pointer;
    transition: all 0.2s;
    border-bottom: 1px solid rgba(255, 255, 255, 0.03);
}

.tmdb-result-item:hover {
    background: rgba(124, 58, 237, 0.1);
}

.tmdb-result-item img {
    width: 46px;
    height: 68px;
    object-fit: cover;
    border-radius: 6px;
    flex-shrink: 0;
}

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

.tmdb-result-info h4 {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0 0 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.tmdb-result-original {
    display: block;
    font-size: 0.8rem;
    color: var(--text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.tmdb-result-meta {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 4px;
    font-size: 0.75rem;
    color: var(--text-muted);
}

.tmdb-type-badge {
    padding: 2px 8px;
    border-radius: 6px;
    font-weight: 600;
    font-size: 0.7rem;
}

.tmdb-type-badge.tv {
    background: rgba(124, 58, 237, 0.2);
    color: var(--anime-primary);
}

.tmdb-type-badge.movie {
    background: rgba(251, 191, 36, 0.2);
    color: #fbbf24;
}

/* TMDB Selected */
.tmdb-selected {
    background: linear-gradient(135deg, rgba(124, 58, 237, 0.15), rgba(124, 58, 237, 0.05));
    border: 1px solid rgba(124, 58, 237, 0.3);
    border-radius: 14px;
    padding: 16px;
    margin-top: 12px;
}

.tmdb-selected-content {
    display: flex;
    align-items: center;
    gap: 16px;
}

.tmdb-selected-content img {
    width: 60px;
    height: 90px;
    object-fit: cover;
    border-radius: 8px;
    opacity: 1 !important;
}

#tmdb-selected-poster {
    opacity: 1 !important;
    visibility: visible !important;
    display: block !important;
}

.tmdb-selected-info {
    flex: 1;
}

.tmdb-selected-info h4 {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0 0 4px;
}

.tmdb-selected-meta {
    display: inline-block;
    font-size: 0.8rem;
    color: var(--text-muted);
    margin-left: 12px;
}

.btn-change-tmdb {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    color: var(--text-secondary);
    font-size: 0.85rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
}

.btn-change-tmdb:hover {
    background: rgba(255, 255, 255, 0.15);
    color: white;
}

.tmdb-loading-data {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    font-size: 0.9rem;
    color: var(--text-muted);
}

/* Divider Line */
.divider-line {
    display: flex;
    align-items: center;
    text-align: center;
    margin: 24px 0;
    color: var(--text-muted);
    font-size: 0.85rem;
}

.divider-line::before,
.divider-line::after {
    content: '';
    flex: 1;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent);
}

.divider-line span {
    padding: 0 16px;
}

/* Loading Spinner */
.loading-spinner {
    display: inline-block;
    width: 20px;
    height: 20px;
    border: 2px solid rgba(255, 255, 255, 0.1);
    border-radius: 50%;
    border-top-color: var(--anime-primary);
    animation: spin 0.8s linear infinite;
}

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

.loading-state,
.empty-state,
.error-state {
    padding: 24px;
    text-align: center;
    color: var(--text-muted);
}

.error-state {
    color: #ef4444;
}

/* Responsive */
@media (max-width: 1024px) {
    .overview-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .subs-page-header {
        flex-direction: column;
        gap: 20px;
        text-align: center;
    }
    
    .group-header-content {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }
    
    .group-actions {
        align-items: center;
    }
    
    .group-content {
        grid-template-columns: 1fr;
    }
    
    .form-row {
        grid-template-columns: 1fr;
    }
    
    .group-stats {
        flex-wrap: wrap;
        justify-content: center;
    }
    
    .overview-grid {
        grid-template-columns: 1fr;
    }
    
    .dashboard-tabs {
        flex-wrap: nowrap;
    }
    
    .releases-full-table .table-header,
    .releases-full-table .table-row {
        grid-template-columns: 2fr 1fr 1fr;
    }
    
    .releases-full-table .table-header span:nth-child(3),
    .releases-full-table .table-header span:nth-child(4),
    .releases-full-table .table-header span:nth-child(6),
    .releases-full-table .table-row span:nth-child(3),
    .releases-full-table .table-row span:nth-child(4),
    .releases-full-table .table-row span:nth-child(6) {
        display: none;
    }
}

/* ========================================
   GOOGLE DRIVE PLAYER - PREMIUM STYLING
   (Match OpenDrive design)
   ======================================== */

.video-player-fallback {
    width: 100%;
    background: transparent;
}

.video-player-fallback .col-lg-2-1 {
    display: flex;
    flex-direction: column;
    gap: 20px;
    background: transparent !important;
}

.video-player-fallback .carousel {
    display: flex;
    flex-direction: column;
    gap: 20px;
    background: transparent !important;
}

.video-player-fallback .video {
    width: 100%;
    aspect-ratio: 16/9;
    border-radius: 16px;
    overflow: hidden;
    background: #000;
}

.video-player-fallback .video iframe,
.video-player-fallback iframe#video-player {
    width: 100% !important;
    height: 100% !important;
    min-height: 450px !important;
    border-radius: 16px !important;
    border: none !important;
}

/* Seasons Container - Match OpenDrive Style */
.video-player-fallback .seasons-container,
.video-player-fallback .seasons-container.auto {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 16px !important;
    margin-top: 20px;
    grid-template-columns: unset !important;
}

.video-player-fallback .season-container {
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.05) 0%, rgba(255, 255, 255, 0.02) 100%) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: 16px !important;
    padding: 20px !important;
    margin: 0 !important;
    flex: 1;
    min-width: 280px;
}

.video-player-fallback .season-container h2 {
    width: 100% !important;
    background: linear-gradient(135deg, var(--anime-primary) 0%, #9333EA 100%) !important;
    color: #fff !important;
    border-radius: 12px !important;
    font-size: 1rem !important;
    font-weight: 700 !important;
    padding: 12px 16px !important;
    margin: 0 0 16px 0 !important;
    text-align: center;
}

.video-player-fallback .button-container {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 10px !important;
    justify-content: flex-start !important;
    padding: 0 !important;
    overflow: visible !important;
}

.video-player-fallback button.text,
.video-player-fallback span.text button,
.video-player-fallback span#code-block button {
    background: rgba(255, 255, 255, 0.08) !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    color: #fff !important;
    padding: 10px 18px !important;
    border-radius: 10px !important;
    font-size: 0.9rem !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.video-player-fallback button.text:hover,
.video-player-fallback span.text button:hover,
.video-player-fallback span#code-block button:hover {
    background: linear-gradient(135deg, var(--anime-primary) 0%, #9333EA 100%) !important;
    border-color: var(--anime-primary) !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 4px 15px rgba(124, 58, 237, 0.4) !important;
}

.video-player-fallback #code-block {
    display: inline-block !important;
}

/* Old Player Styles (span.kfir based) */
.video-player-fallback span.kfir {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 16px !important;
    margin-top: 20px;
}

.video-player-fallback .auto {
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.05) 0%, rgba(255, 255, 255, 0.02) 100%) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: 16px !important;
    padding: 20px !important;
    flex: 1;
    min-width: 280px;
}

.video-player-fallback .table {
    background: linear-gradient(135deg, var(--anime-primary) 0%, #9333EA 100%) !important;
    color: #fff !important;
    border-radius: 12px !important;
    font-size: 1rem !important;
    font-weight: 700 !important;
    padding: 12px 16px !important;
    margin-bottom: 16px !important;
    text-align: center;
}

.video-player-fallback span.text {
    display: inline-block !important;
    margin: 4px !important;
}

.video-player-fallback span.text a {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    background: rgba(255, 255, 255, 0.08) !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    color: #fff !important;
    padding: 10px 18px !important;
    border-radius: 10px !important;
    font-size: 0.9rem !important;
    font-weight: 600 !important;
    text-decoration: none !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.video-player-fallback span.text a:hover {
    background: linear-gradient(135deg, var(--anime-primary) 0%, #9333EA 100%) !important;
    border-color: var(--anime-primary) !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 4px 15px rgba(124, 58, 237, 0.4) !important;
}

.video-player-fallback span.text a:visited {
    background: rgba(124, 58, 237, 0.3) !important;
    color: #fff !important;
}

.video-player-fallback span.text a i {
    font-size: 0.85rem;
    opacity: 0.8;
}

/* Google Drive Episode Info & Comments Section */
/* Google Drive now uses the same layout classes as OpenDrive (watch-layout, watch-player-section, watch-sidebar) */

/* Google Drive season episodes container */
.gdrive-season-episodes {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.gdrive-video-container {
    width: 100%;
    aspect-ratio: 16/9;
    background: #000;
    border-radius: 16px;
    overflow: hidden;
}

.gdrive-video-container iframe {
    width: 100%;
    height: 100%;
    border: none;
}

.gdrive-sidebar-card {
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.05) 0%, rgba(255, 255, 255, 0.02) 100%);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 20px;
    padding: 20px;
    position: sticky;
    top: 100px;
    max-height: calc(100vh - 140px);
    overflow-y: auto;
}

.gdrive-sidebar-card::-webkit-scrollbar {
    width: 6px;
}

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

.gdrive-sidebar-card::-webkit-scrollbar-thumb {
    background: rgba(124, 58, 237, 0.5);
    border-radius: 3px;
}

.gdrive-sidebar-title {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 1.1rem;
    font-weight: 700;
    color: #fff;
    margin-bottom: 16px;
    padding-bottom: 12px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.gdrive-episodes-count {
    background: linear-gradient(135deg, var(--anime-primary, #7C3AED) 0%, #9333EA 100%);
    color: #fff;
    font-size: 0.75rem;
    font-weight: 700;
    padding: 4px 10px;
    border-radius: 8px;
}

/* Season Tabs */
.gdrive-season-tabs {
    display: flex;
    gap: 8px;
    margin-bottom: 16px;
    flex-wrap: wrap;
}

.gdrive-season-tab {
    padding: 8px 16px;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 10px;
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s;
}

.gdrive-season-tab:hover,
.gdrive-season-tab.active {
    background: linear-gradient(135deg, var(--anime-primary, #7C3AED) 0%, #9333EA 100%);
    border-color: var(--anime-primary, #7C3AED);
    color: #fff;
}

/* Episode List Items */
.gdrive-episodes-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.gdrive-episode-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.gdrive-episode-item:hover {
    background: rgba(124, 58, 237, 0.15);
    border-color: rgba(124, 58, 237, 0.3);
    transform: translateX(4px);
}

.gdrive-episode-item.active {
    background: linear-gradient(135deg, var(--anime-primary, #7C3AED) 0%, #9333EA 100%);
    border-color: transparent;
    box-shadow: 0 4px 20px rgba(124, 58, 237, 0.3);
}

.gdrive-episode-num {
    width: 40px;
    height: 40px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 0.9rem;
    color: #fff;
    flex-shrink: 0;
}

.gdrive-episode-item.active .gdrive-episode-num {
    background: rgba(255, 255, 255, 0.2);
}

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

.gdrive-episode-title {
    font-size: 0.9rem;
    font-weight: 600;
    color: #fff;
    margin-bottom: 2px;
}

.gdrive-episode-subtitle {
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.5);
}

.gdrive-episode-item.active .gdrive-episode-subtitle {
    color: rgba(255, 255, 255, 0.7);
}

/* Playing Indicator */
.gdrive-playing-indicator {
    display: none;
    gap: 2px;
    align-items: flex-end;
    height: 16px;
}

.gdrive-episode-item.active .gdrive-playing-indicator {
    display: flex;
}

.gdrive-play-bar {
    width: 3px;
    background: #fff;
    border-radius: 2px;
    animation: gdrive-bounce 0.8s ease-in-out infinite;
}

.gdrive-play-bar:nth-child(1) { height: 8px; animation-delay: 0s; }
.gdrive-play-bar:nth-child(2) { height: 12px; animation-delay: 0.1s; }
.gdrive-play-bar:nth-child(3) { height: 6px; animation-delay: 0.2s; }

@keyframes gdrive-bounce {
    0%, 100% { transform: scaleY(1); }
    50% { transform: scaleY(0.5); }
}

/* Responsive */
@media (max-width: 900px) {
    .gdrive-watch-layout {
        flex-direction: column;
    }
    
    .gdrive-sidebar {
        width: 100%;
    }
    
    .gdrive-sidebar-card {
        position: static;
        max-height: none;
    }
}

/* User Search Results in Community Admin */
.community-admin .users-results {
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.04) 0%, rgba(255, 255, 255, 0.01) 100%);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 20px;
    padding: 24px;
    margin-top: 20px;
}

.community-admin .users-results h3 {
    font-size: 1.1rem;
    font-weight: 700;
    color: #fff;
    margin: 0 0 20px;
}

.community-admin .no-results,
.community-admin .error {
    text-align: center;
    padding: 40px;
    color: rgba(255, 255, 255, 0.5);
}

/* Activity Table for Community Admin */
.activity-table-wrapper {
    overflow-x: auto;
    border-radius: 16px;
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.03) 0%, rgba(255, 255, 255, 0.01) 100%);
    border: 1px solid rgba(255, 255, 255, 0.06);
}

.activity-table {
    width: 100%;
    border-collapse: collapse;
}

.activity-table th,
.activity-table td {
    padding: 14px 18px;
    text-align: right;
    border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}

.activity-table th {
    background: rgba(0, 0, 0, 0.2);
    font-weight: 700;
    color: rgba(255, 255, 255, 0.5);
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.activity-table tr:hover {
    background: rgba(124, 58, 237, 0.05);
}

.activity-table .action-badge {
    padding: 5px 10px;
    border-radius: 8px;
    font-size: 0.75rem;
    font-weight: 600;
}

.activity-table .action-warning { background: rgba(245, 158, 11, 0.2); color: #F59E0B; }
.activity-table .action-muted { background: rgba(107, 114, 128, 0.2); color: #9CA3AF; }
.activity-table .action-mute_dm { background: rgba(59, 130, 246, 0.2); color: #3B82F6; }
.activity-table .action-suspended { background: rgba(139, 92, 246, 0.2); color: #8B5CF6; }
.activity-table .action-banned,
.activity-table .action-ban { background: rgba(239, 68, 68, 0.2); color: #EF4444; }
.activity-table .action-unban { background: rgba(16, 185, 129, 0.2); color: #10B981; }

.activity-table .user-link {
    color: var(--anime-primary);
    text-decoration: none;
    font-weight: 600;
}

.activity-table .user-link:hover {
    text-decoration: underline;
}

.activity-table .reason-cell {
    max-width: 200px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: rgba(255, 255, 255, 0.6);
}

/* Recent User Activity Section */
.recent-user-activity {
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.04) 0%, rgba(255, 255, 255, 0.01) 100%);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 20px;
    padding: 24px;
}

.recent-user-activity h3 {
    font-size: 1.15rem;
    font-weight: 700;
    color: #fff;
    margin: 0 0 20px;
}

/* Filtered Users Section */
.filtered-users {
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.04) 0%, rgba(255, 255, 255, 0.01) 100%);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 20px;
    padding: 24px;
}

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

.filtered-users .section-header h3 {
    font-size: 1.15rem;
    font-weight: 700;
    color: #fff;
    margin: 0;
}

.filtered-users .btn-close {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.1);
    border: none;
    color: #fff;
    font-size: 1.2rem;
    cursor: pointer;
    transition: all 0.2s;
}

.filtered-users .btn-close:hover {
    background: rgba(239, 68, 68, 0.3);
}

/* Quick Filters Section */
.users-quick-filters {
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.04) 0%, rgba(255, 255, 255, 0.01) 100%);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 20px;
    padding: 24px;
}

/* DM Tab User Search */
.dm-user-search-section {
    margin-bottom: 24px;
}

.dm-user-results {
    margin-top: 20px;
}

.dm-user-results h4 {
    font-size: 1rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.8);
    margin: 0 0 16px;
}

.dm-users-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.dm-user-item {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 16px;
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.03) 0%, rgba(255, 255, 255, 0.01) 100%);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 14px;
    cursor: pointer;
    transition: all 0.3s;
}

.dm-user-item:hover {
    background: rgba(124, 58, 237, 0.1);
    border-color: rgba(124, 58, 237, 0.3);
    transform: translateX(-4px);
}

.dm-user-item .user-avatar {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    object-fit: cover;
}

.dm-user-item .user-info {
    flex: 1;
}

.dm-user-item .user-name {
    display: block;
    font-weight: 600;
    color: #fff;
}

.dm-user-item .user-email {
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.4);
}

/* Conversation View */
.dm-conversation-view {
    margin-top: 20px;
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.03) 0%, rgba(255, 255, 255, 0.01) 100%);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 16px;
    padding: 20px;
}

.conversation-header {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 20px;
    padding-bottom: 16px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.conversation-header h4 {
    flex: 1;
    font-size: 1.1rem;
    font-weight: 700;
    color: #fff;
    margin: 0;
}

.conversation-header .btn-back {
    padding: 8px 16px;
    background: rgba(255, 255, 255, 0.1);
    border: none;
    border-radius: 8px;
    color: #fff;
    font-size: 0.85rem;
    cursor: pointer;
    transition: all 0.2s;
}

.conversation-header .btn-back:hover {
    background: rgba(124, 58, 237, 0.3);
}

.conversation-header .btn-close {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.1);
    border: none;
    color: #fff;
    font-size: 1.2rem;
    cursor: pointer;
}

.conversation-header .btn-close:hover {
    background: rgba(239, 68, 68, 0.3);
}

/* Conversations List */
.conversations-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.conversation-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 14px 16px;
    background: rgba(0, 0, 0, 0.2);
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.3s;
}

.conversation-item:hover {
    background: rgba(124, 58, 237, 0.15);
}

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

.conv-avatar {
    width: 32px;
    height: 32px;
    border-radius: 8px;
}

.conv-name {
    font-weight: 600;
    color: #fff;
}

.conv-meta {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 4px;
}

.conv-count {
    font-size: 0.8rem;
    color: var(--anime-primary);
    font-weight: 600;
}

.conv-date {
    font-size: 0.7rem;
    color: rgba(255, 255, 255, 0.4);
}

/* Messages List */
.messages-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
    max-height: 500px;
    overflow-y: auto;
    padding: 10px;
}

.message-item {
    max-width: 70%;
    padding: 12px 16px;
    border-radius: 16px;
    position: relative;
}

.message-item.sent {
    align-self: flex-start;
    background: linear-gradient(135deg, var(--anime-primary) 0%, #9333EA 100%);
    color: #fff;
    border-bottom-right-radius: 4px;
}

.message-item.received {
    align-self: flex-end;
    background: rgba(255, 255, 255, 0.1);
    color: #fff;
    border-bottom-left-radius: 4px;
}

.message-sender {
    font-size: 0.75rem;
    font-weight: 600;
    margin-bottom: 4px;
    opacity: 0.8;
}

.message-content {
    line-height: 1.5;
}

.message-item .message-time {
    font-size: 0.65rem;
    opacity: 0.6;
    margin-top: 6px;
    text-align: left;
}

/* Contact View */
.contact-view {
    min-height: calc(100vh - 80px);
    padding: 60px 20px;
    background: linear-gradient(180deg, #0B0F1A 0%, #131829 100%);
}

.contact-container {
    max-width: 800px;
    margin: 0 auto;
}

.contact-header {
    text-align: center;
    margin-bottom: 50px;
}

.contact-header-icon {
    width: 80px;
    height: 80px;
    margin: 0 auto 24px;
    background: linear-gradient(135deg, rgba(124, 58, 237, 0.2), rgba(147, 51, 234, 0.2));
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid rgba(124, 58, 237, 0.3);
}

.contact-header-icon svg {
    color: var(--anime-primary);
}

.contact-title {
    font-size: 2.5rem;
    font-weight: 900;
    color: var(--text-primary);
    margin: 0 0 16px;
    background: linear-gradient(135deg, var(--text-primary), var(--anime-primary));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.contact-description {
    font-size: 1.1rem;
    color: var(--text-secondary);
    margin: 0;
    line-height: 1.6;
}

.contact-form-wrapper {
    background: linear-gradient(145deg, rgba(26, 29, 46, 0.8), rgba(17, 20, 32, 0.8));
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 24px;
    padding: 40px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
    backdrop-filter: blur(10px);
}

.contact-form .form-group {
    margin-bottom: 24px;
}

.contact-form label {
    display: block;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 8px;
}

.contact-form input,
.contact-form textarea {
    width: 100%;
    padding: 14px 20px;
    background: rgba(0, 0, 0, 0.4);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    color: var(--text-primary);
    font-size: 1rem;
    font-family: inherit;
    transition: all 0.3s;
}

.contact-form input:focus,
.contact-form textarea:focus {
    outline: none;
    border-color: var(--anime-primary);
    background: rgba(0, 0, 0, 0.5);
    box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.1);
}

.contact-form textarea {
    resize: vertical;
    min-height: 120px;
}

.btn-contact-submit {
    width: 100%;
    padding: 16px 24px;
    background: linear-gradient(135deg, var(--anime-primary), #9333ea);
    border: none;
    border-radius: 12px;
    color: white;
    font-size: 1rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    cursor: pointer;
    transition: all 0.3s;
    box-shadow: 0 4px 15px rgba(124, 58, 237, 0.3);
}

.btn-contact-submit:hover:not(:disabled) {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(124, 58, 237, 0.4);
}

.btn-contact-submit:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

.contact-info {
    margin-top: 40px;
    padding-top: 40px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.contact-info-item {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 20px;
    background: rgba(0, 0, 0, 0.2);
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.05);
}

.contact-info-icon {
    width: 48px;
    height: 48px;
    background: rgba(124, 58, 237, 0.2);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.contact-info-icon svg {
    color: var(--anime-primary);
}

.contact-info-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.contact-info-label {
    font-size: 0.75rem;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.contact-info-value {
    font-size: 1rem;
    color: var(--text-primary);
    text-decoration: none;
    transition: color 0.2s;
}

.contact-info-value:hover {
    color: var(--anime-primary);
}

/* Notifications Loading */
.notifications-loading {
    padding: 40px 20px;
    text-align: center;
    color: var(--text-muted);
    font-size: 0.9rem;
}

.notifications-loading::after {
    content: '...';
    animation: dots 1.5s steps(4, end) infinite;
}

@keyframes dots {
    0%, 20% { content: '.'; }
    40% { content: '..'; }
    60%, 100% { content: '...'; }
}

/* Feed Posts System */
.create-post-card {
    background: linear-gradient(145deg, rgba(26, 29, 46, 0.8), rgba(17, 20, 32, 0.8));
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 16px;
    padding: 20px;
    margin-bottom: 24px;
}

.create-post-header {
    display: flex;
    gap: 12px;
    margin-bottom: 12px;
}

.create-post-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}

#new-post-content {
    flex: 1;
    padding: 12px 16px;
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    color: var(--text-primary);
    font-size: 0.95rem;
    resize: none;
    min-height: 48px;
    max-height: 120px;
    font-family: inherit;
}

#new-post-content:focus {
    outline: none;
    border-color: var(--anime-primary);
    box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.1);
}

.create-post-actions {
    display: flex;
    justify-content: flex-end;
}

.btn-create-post {
    padding: 10px 20px;
    background: linear-gradient(135deg, var(--anime-primary), #9333ea);
    border: none;
    border-radius: 8px;
    color: white;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    transition: all 0.3s;
}

.btn-create-post:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(124, 58, 237, 0.4);
}

.posts-feed {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.feed-post-card {
    background: linear-gradient(145deg, rgba(26, 29, 46, 0.8), rgba(17, 20, 32, 0.8));
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 16px;
    padding: 20px;
}

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

.post-author {
    display: flex;
    align-items: center;
    gap: 12px;
    text-decoration: none;
}

.post-avatar {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    object-fit: cover;
}

.post-author-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.post-author-name {
    font-weight: 600;
    color: var(--text-primary);
    font-size: 0.95rem;
}

.post-author-level {
    font-size: 0.75rem;
    color: var(--text-muted);
}

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

.post-content {
    color: var(--text-primary);
    line-height: 1.6;
    margin-bottom: 16px;
    font-size: 0.95rem;
}

.post-engagement {
    padding: 12px 0;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    margin-bottom: 12px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.engagement-text {
    font-size: 0.85rem;
    color: var(--text-secondary);
}

.post-actions {
    display: flex;
    gap: 8px;
}

.post-action-btn {
    flex: 1;
    padding: 10px;
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    color: var(--text-secondary);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    cursor: pointer;
    transition: all 0.2s;
    font-size: 0.9rem;
}

.post-action-btn svg {
    flex-shrink: 0;
}

.post-action-btn:hover {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(255, 255, 255, 0.2);
}

.post-action-btn.liked {
    color: #ef4444;
    border-color: rgba(239, 68, 68, 0.3);
}

.post-action-btn.shared {
    color: var(--anime-primary);
    border-color: rgba(124, 58, 237, 0.3);
}

.action-count {
    font-size: 0.85rem;
    color: var(--text-secondary) !important;
    font-weight: 600;
    margin-right: 4px;
}

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

.post-action-btn.shared .action-count {
    color: var(--anime-primary) !important;
}

.post-comments-section {
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
}

.comments-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 16px;
    max-height: 400px;
    overflow-y: auto;
}

.post-comment {
    display: flex;
    gap: 10px;
}

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

.comment-content {
    flex: 1;
    background: rgba(0, 0, 0, 0.3);
    border-radius: 12px;
    padding: 10px 14px;
}

.comment-author {
    font-weight: 600;
    color: var(--text-primary);
    text-decoration: none;
    font-size: 0.9rem;
    margin-right: 8px;
}

.comment-content p {
    color: var(--text-secondary);
    margin: 4px 0;
    font-size: 0.9rem;
    line-height: 1.5;
}

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

.add-comment {
    display: flex;
    gap: 10px;
    align-items: flex-end;
}

.comment-input-wrapper {
    flex: 1;
    display: flex;
    gap: 8px;
    align-items: flex-end;
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    padding: 8px 12px;
}

.comment-input-wrapper textarea {
    flex: 1;
    background: transparent;
    border: none;
    color: var(--text-primary);
    font-size: 0.9rem;
    resize: none;
    min-height: 36px;
    max-height: 100px;
    font-family: inherit;
}

.comment-input-wrapper textarea:focus {
    outline: none;
}

.btn-send-comment {
    background: var(--anime-primary);
    border: none;
    border-radius: 8px;
    color: white;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s;
    flex-shrink: 0;
}

.btn-send-comment:hover {
    background: #9333ea;
    transform: scale(1.05);
}

/* Share Popup */
.share-popup {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
}

.share-popup.active {
    opacity: 1;
    visibility: visible;
}

.share-popup-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(4px);
}

.share-popup-content {
    position: relative;
    background: linear-gradient(145deg, rgba(26, 29, 46, 0.98), rgba(17, 20, 32, 0.98));
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 20px;
    width: 90%;
    max-width: 480px;
    max-height: 90vh;
    overflow: hidden;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
    transform: scale(0.9) translateY(20px);
    transition: transform 0.3s ease;
}

.share-popup.active .share-popup-content {
    transform: scale(1) translateY(0);
}

.share-popup-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 24px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.share-popup-header h3 {
    margin: 0;
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--text-primary);
}

.share-popup-close {
    background: transparent;
    border: none;
    color: var(--text-secondary);
    cursor: pointer;
    padding: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: color 0.2s;
}

.share-popup-close:hover {
    color: var(--text-primary);
}

.share-popup-body {
    padding: 16px;
    max-height: calc(90vh - 80px);
    overflow-y: auto;
}

.share-option {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 16px;
    background: rgba(0, 0, 0, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.2s;
    margin-bottom: 12px;
}

.share-option:hover {
    background: rgba(0, 0, 0, 0.3);
    border-color: rgba(255, 255, 255, 0.1);
    transform: translateX(-4px);
}

.share-option-icon {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.feed-icon {
    background: linear-gradient(135deg, rgba(124, 58, 237, 0.2), rgba(147, 51, 234, 0.2));
    color: var(--anime-primary);
}

.facebook-icon {
    background: rgba(24, 119, 242, 0.2);
    color: #1877f2;
}

.twitter-icon {
    background: rgba(29, 161, 242, 0.2);
    color: #1da1f2;
}

.whatsapp-icon {
    background: rgba(37, 211, 102, 0.2);
    color: #25d366;
}

.link-icon {
    background: rgba(124, 58, 237, 0.2);
    color: var(--anime-primary);
}

.share-option-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.share-option-title {
    font-weight: 600;
    color: var(--text-primary);
    font-size: 1rem;
}

.share-option-desc {
    font-size: 0.85rem;
    color: var(--text-muted);
}

/* Post Delete Button */
.post-header-actions {
    display: flex;
    align-items: center;
    gap: 12px;
}

.post-delete-btn {
    background: transparent;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    padding: 4px 8px;
    border-radius: 6px;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
}

.post-delete-btn:hover {
    background: rgba(239, 68, 68, 0.1);
    color: #ef4444;
}

.post-delete-disabled {
    color: var(--text-muted);
    opacity: 0.5;
    cursor: not-allowed;
    padding: 4px 8px;
}

/* Feed Admin View */
.feed-admin-view {
    min-height: calc(100vh - 80px);
    padding: 40px 20px;
    background: linear-gradient(180deg, #0B0F1A 0%, #131829 100%);
}

.admin-container {
    max-width: 1200px;
    margin: 0 auto;
}

.admin-header {
    margin-bottom: 32px;
}

.admin-header h1 {
    font-size: 2.5rem;
    font-weight: 900;
    color: var(--text-primary);
    margin: 0 0 8px;
    background: linear-gradient(135deg, var(--text-primary), var(--anime-primary));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.admin-header p {
    color: var(--text-secondary);
    font-size: 1rem;
    margin: 0;
}

.admin-tabs {
    display: flex;
    gap: 12px;
    margin-bottom: 24px;
    border-bottom: 2px solid rgba(255, 255, 255, 0.1);
}

.admin-tab {
    padding: 12px 24px;
    background: transparent;
    border: none;
    border-bottom: 3px solid transparent;
    color: var(--text-secondary);
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 8px;
    transition: all 0.2s;
    margin-bottom: -2px;
}

.admin-tab:hover {
    color: var(--text-primary);
}

.admin-tab.active {
    color: var(--anime-primary);
    border-bottom-color: var(--anime-primary);
}

.tab-badge {
    background: var(--anime-primary);
    color: white;
    font-size: 0.75rem;
    padding: 2px 8px;
    border-radius: 12px;
    font-weight: 700;
}

.admin-content {
    background: linear-gradient(145deg, rgba(26, 29, 46, 0.8), rgba(17, 20, 32, 0.8));
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 16px;
    padding: 24px;
}

.posts-moderation-list {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.moderation-post-card {
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    padding: 20px;
    transition: all 0.3s;
}

.mod-post-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    margin-bottom: 16px;
    gap: 16px;
}

.mod-post-author {
    display: flex;
    align-items: center;
    gap: 12px;
    flex: 1;
}

.mod-post-avatar {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    object-fit: cover;
}

.mod-post-author-info {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.mod-post-author-name {
    font-weight: 600;
    color: var(--text-primary);
    text-decoration: none;
    font-size: 0.95rem;
}

.mod-post-author-name:hover {
    color: var(--anime-primary);
}

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

.old-post-warning {
    color: #f59e0b;
}

.mod-post-status {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.status-badge {
    padding: 4px 12px;
    border-radius: 12px;
    font-size: 0.75rem;
    font-weight: 600;
}

.status-pending {
    background: rgba(251, 191, 36, 0.2);
    color: #fbbf24;
    border: 1px solid rgba(251, 191, 36, 0.3);
}

.status-approved {
    background: rgba(34, 197, 94, 0.2);
    color: #22c55e;
    border: 1px solid rgba(34, 197, 94, 0.3);
}

.status-rejected {
    background: rgba(239, 68, 68, 0.2);
    color: #ef4444;
    border: 1px solid rgba(239, 68, 68, 0.3);
}

.status-18plus {
    background: rgba(124, 58, 237, 0.2);
    color: var(--anime-primary);
    border: 1px solid rgba(124, 58, 237, 0.3);
}

.mod-post-content {
    color: var(--text-primary);
    line-height: 1.6;
    margin-bottom: 12px;
    padding: 12px;
    background: rgba(0, 0, 0, 0.2);
    border-radius: 8px;
}

.mod-post-reason {
    padding: 10px 12px;
    background: rgba(251, 191, 36, 0.1);
    border: 1px solid rgba(251, 191, 36, 0.2);
    border-radius: 8px;
    margin-bottom: 12px;
    font-size: 0.85rem;
    color: #fbbf24;
}

.mod-post-stats {
    display: flex;
    gap: 16px;
    margin-bottom: 16px;
    font-size: 0.85rem;
    color: var(--text-secondary);
}

.mod-post-actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.btn-approve,
.btn-reject,
.btn-delete {
    padding: 10px 16px;
    border: none;
    border-radius: 8px;
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 6px;
    transition: all 0.2s;
}

.btn-approve {
    background: rgba(34, 197, 94, 0.2);
    color: #22c55e;
    border: 1px solid rgba(34, 197, 94, 0.3);
}

.btn-approve:hover {
    background: rgba(34, 197, 94, 0.3);
    transform: translateY(-2px);
}

.btn-reject {
    background: rgba(239, 68, 68, 0.2);
    color: #ef4444;
    border: 1px solid rgba(239, 68, 68, 0.3);
}

.btn-reject:hover {
    background: rgba(239, 68, 68, 0.3);
    transform: translateY(-2px);
}

.btn-delete {
    background: rgba(239, 68, 68, 0.2);
    color: #ef4444;
    border: 1px solid rgba(239, 68, 68, 0.3);
}

.btn-delete:hover {
    background: rgba(239, 68, 68, 0.3);
    transform: translateY(-2px);
}

.empty-state {
    text-align: center;
    padding: 60px 20px;
    color: var(--text-muted);
}

.empty-state svg {
    margin: 0 auto 16px;
    opacity: 0.5;
}

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

/* Sync Settings View */
.sync-settings-view {
    min-height: calc(100vh - 80px);
    padding: 40px 20px;
    background: linear-gradient(180deg, #0B0F1A 0%, #131829 100%);
}

.sync-info-box {
    background: linear-gradient(145deg, rgba(26, 29, 46, 0.8), rgba(17, 20, 32, 0.8));
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    padding: 24px;
    margin-bottom: 32px;
}

.sync-info-box h3 {
    color: var(--anime-primary);
    margin-top: 0;
    margin-bottom: 16px;
    font-size: 1.3rem;
}

.sync-info-box ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.sync-info-box li {
    padding: 8px 0;
    color: var(--text-secondary);
    line-height: 1.6;
}

.sync-info-box li strong {
    color: var(--text-primary);
}

.sync-settings-form {
    background: linear-gradient(145deg, rgba(26, 29, 46, 0.8), rgba(17, 20, 32, 0.8));
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 16px;
    padding: 32px;
}

.form-section {
    margin-bottom: 32px;
    padding-bottom: 32px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.form-section:last-child {
    border-bottom: none;
    margin-bottom: 0;
    padding-bottom: 0;
}

.form-section h3 {
    color: var(--text-primary);
    margin-top: 0;
    margin-bottom: 16px;
    font-size: 1.2rem;
}

.form-section label {
    display: block;
    color: var(--text-secondary);
    margin-bottom: 8px;
    font-weight: 500;
}

.form-section input[type="text"],
.form-section input[type="url"],
.form-section input[type="password"] {
    width: 100%;
    max-width: 500px;
    padding: 12px 16px;
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    color: var(--text-primary);
    font-size: 1rem;
    margin-top: 8px;
}

.form-section input[type="text"]:focus,
.form-section input[type="url"]:focus,
.form-section input[type="password"]:focus {
    outline: none;
    border-color: var(--anime-primary);
    box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.1);
}

.form-section input[type="checkbox"],
.form-section input[type="radio"] {
    margin-left: 8px;
    margin-right: 8px;
    width: 18px;
    height: 18px;
    cursor: pointer;
}

.form-section small {
    display: block;
    color: var(--text-muted);
    font-size: 0.85rem;
    margin-top: 4px;
}

.radio-group {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.radio-group label {
    display: flex;
    align-items: center;
    padding: 12px;
    background: rgba(0, 0, 0, 0.2);
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s;
}

.radio-group label:hover {
    background: rgba(0, 0, 0, 0.3);
}

.radio-group label input[type="radio"] {
    margin-left: 0;
}

.sync-actions {
    margin-top: 32px;
    padding: 24px;
    background: linear-gradient(145deg, rgba(26, 29, 46, 0.8), rgba(17, 20, 32, 0.8));
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
}

.sync-actions h3 {
    color: var(--text-primary);
    margin-top: 0;
}

#sync-status {
    margin-top: 16px;
    padding: 12px;
    background: rgba(0, 0, 0, 0.3);
    border-radius: 8px;
}

#sync-status p {
    margin: 0;
    color: var(--text-secondary);
}

.field-mapping-row {
    margin-bottom: 16px;
    padding: 12px;
    background: rgba(0, 0, 0, 0.2);
    border-radius: 8px;
}

.field-mapping-row label {
    display: block;
}

.field-mapping-row strong {
    color: var(--text-primary);
    display: block;
    margin-bottom: 8px;
}

.field-mapping-row .regular-text {
    margin-top: 8px;
}

.info-box {
    margin-top: 16px;
    padding: 16px;
    background: rgba(124, 58, 237, 0.1);
    border: 1px solid rgba(124, 58, 237, 0.3);
    border-radius: 8px;
}

.info-box h4 {
    color: var(--anime-primary);
    margin-top: 0;
    margin-bottom: 8px;
}

.info-box ul {
    margin: 8px 0 0 0;
    padding-right: 20px;
    list-style: disc;
}

.info-box li {
    color: var(--text-secondary);
    margin-bottom: 4px;
    line-height: 1.6;
}

.form-section .description {
    color: var(--text-muted);
    font-size: 0.9rem;
    margin-bottom: 16px;
    line-height: 1.6;
}

/* ========================================
   404 ERROR PAGE STYLES
   ======================================== */

.error-404-view {
    min-height: calc(100vh - 80px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 60px 20px;
    background: linear-gradient(180deg, #0B0F1A 0%, #131829 100%);
    position: relative;
    overflow: hidden;
}

.error-404-container {
    max-width: 800px;
    width: 100%;
    position: relative;
    z-index: 10;
}

.error-404-content {
    text-align: center;
    position: relative;
    z-index: 2;
}

.error-404-number {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 20px;
    margin-bottom: 40px;
    font-size: 120px;
    font-weight: 900;
    line-height: 1;
    color: var(--anime-primary);
    text-shadow: 0 0 40px rgba(124, 58, 237, 0.5);
}

.error-digit {
    display: inline-block;
    animation: float 3s ease-in-out infinite;
}

.error-digit:nth-child(1) {
    animation-delay: 0s;
}

.error-digit:nth-child(2) {
    animation-delay: 0.5s;
}

.error-digit:nth-child(3) {
    animation-delay: 1s;
}

.error-digit-animated {
    animation: pulse 2s ease-in-out infinite;
    color: var(--anime-accent);
}

@keyframes float {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-20px);
    }
}

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

.error-404-title {
    font-size: 36px;
    font-weight: 900;
    color: var(--text-primary);
    margin: 0 0 16px 0;
}

.error-404-description {
    font-size: 18px;
    color: var(--text-secondary);
    line-height: 1.6;
    margin: 0 0 40px 0;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
}

.error-404-actions {
    display: flex;
    gap: 16px;
    justify-content: center;
    flex-wrap: wrap;
    margin-bottom: 50px;
}

.btn-large {
    padding: 16px 32px;
    font-size: 16px;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 10px;
}

.error-404-search {
    margin-top: 40px;
    padding-top: 40px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.search-label {
    font-size: 16px;
    color: var(--text-secondary);
    margin-bottom: 16px;
}

.error-search-form {
    display: flex;
    gap: 12px;
    max-width: 500px;
    margin: 0 auto;
    flex-wrap: wrap;
}

.error-search-input-wrapper {
    flex: 1;
    position: relative;
    min-width: 250px;
}

.error-search-input-wrapper .search-icon {
    position: absolute;
    right: 16px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-muted);
    pointer-events: none;
}

.error-search-input {
    width: 100%;
    padding: 14px 16px 14px 48px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    color: var(--text-primary);
    font-size: 16px;
    transition: all 0.3s;
}

.error-search-input:focus {
    outline: none;
    border-color: var(--anime-primary);
    background: rgba(255, 255, 255, 0.08);
    box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.1);
}

.error-404-decoration {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    overflow: hidden;
}

.error-glow {
    position: absolute;
    border-radius: 50%;
    filter: blur(80px);
    opacity: 0.3;
    animation: float-glow 8s ease-in-out infinite;
}

.error-glow-1 {
    width: 400px;
    height: 400px;
    background: var(--anime-primary);
    top: -100px;
    right: -100px;
    animation-delay: 0s;
}

.error-glow-2 {
    width: 300px;
    height: 300px;
    background: var(--anime-accent);
    bottom: -50px;
    left: -50px;
    animation-delay: 2s;
}

.error-glow-3 {
    width: 250px;
    height: 250px;
    background: #10b981;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    animation-delay: 4s;
}

@keyframes float-glow {
    0%, 100% {
        transform: translate(0, 0);
    }
    33% {
        transform: translate(30px, -30px);
    }
    66% {
        transform: translate(-30px, 30px);
    }
}

@media (max-width: 767px) {
    .error-404-number {
        font-size: 80px;
        gap: 10px;
    }
    
    .error-404-title {
        font-size: 28px;
    }
    
    .error-404-description {
        font-size: 16px;
    }
    
    .error-404-actions {
        flex-direction: column;
    }
    
    .btn-large {
        width: 100%;
        justify-content: center;
    }
    
    .error-search-form {
        flex-direction: column;
    }
    
    .error-search-input-wrapper {
        min-width: 100%;
    }
}

/* ========================================
   THANK YOU PAGE STYLES
   ======================================== */

.thank-you-view {
    min-height: calc(100vh - 80px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 60px 20px;
    background: linear-gradient(180deg, #0B0F1A 0%, #131829 100%);
    position: relative;
    overflow: hidden;
}

.thank-you-container {
    max-width: 700px;
    width: 100%;
    position: relative;
    z-index: 10;
}

.thank-you-content {
    text-align: center;
    position: relative;
    z-index: 2;
}

.thank-you-icon {
    position: relative;
    width: 120px;
    height: 120px;
    margin: 0 auto 40px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.thank-you-icon svg {
    color: #10b981;
    z-index: 2;
    position: relative;
    animation: checkmark-appear 0.6s ease-out;
}

.thank-you-icon-glow {
    position: absolute;
    inset: -20px;
    background: radial-gradient(circle, rgba(16, 185, 129, 0.3), transparent 70%);
    border-radius: 50%;
    animation: pulse-glow 2s ease-in-out infinite;
}

@keyframes checkmark-appear {
    0% {
        transform: scale(0) rotate(-45deg);
        opacity: 0;
    }
    50% {
        transform: scale(1.2) rotate(0deg);
    }
    100% {
        transform: scale(1) rotate(0deg);
        opacity: 1;
    }
}

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

.thank-you-title {
    font-size: 42px;
    font-weight: 900;
    color: var(--text-primary);
    margin: 0 0 20px 0;
    background: linear-gradient(135deg, var(--anime-primary), #10b981);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.thank-you-description {
    font-size: 18px;
    color: var(--text-secondary);
    line-height: 1.8;
    margin: 0 0 50px 0;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
}

.thank-you-actions {
    display: flex;
    gap: 16px;
    justify-content: center;
    flex-wrap: wrap;
}

.thank-you-decoration {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    overflow: hidden;
}

.thank-you-glow {
    position: absolute;
    border-radius: 50%;
    filter: blur(80px);
    opacity: 0.25;
    animation: float-glow 10s ease-in-out infinite;
}

.thank-you-glow-1 {
    width: 400px;
    height: 400px;
    background: #10b981;
    top: -100px;
    right: -100px;
    animation-delay: 0s;
}

.thank-you-glow-2 {
    width: 350px;
    height: 350px;
    background: var(--anime-primary);
    bottom: -50px;
    left: -50px;
    animation-delay: 3s;
}

.thank-you-glow-3 {
    width: 300px;
    height: 300px;
    background: var(--anime-accent);
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    animation-delay: 6s;
}

@media (max-width: 767px) {
    .thank-you-icon {
        width: 100px;
        height: 100px;
        margin-bottom: 30px;
    }
    
    .thank-you-icon svg {
        width: 60px;
        height: 60px;
    }
    
    .thank-you-title {
        font-size: 32px;
    }
    
    .thank-you-description {
        font-size: 16px;
    }
    
    .thank-you-actions {
        flex-direction: column;
    }
    
    .btn-large {
        width: 100%;
        justify-content: center;
    }
}

/* ========================================
   SEARCH RESULTS PAGE STYLES
   ======================================== */

.search-results-view {
    min-height: calc(100vh - 80px);
    padding: 40px 20px 80px;
    background: linear-gradient(180deg, #0B0F1A 0%, #131829 100%);
}

.search-results-container {
    max-width: 1400px;
    margin: 0 auto;
}

.search-results-header {
    margin-bottom: 50px;
}

.search-header-content {
    text-align: center;
    margin-bottom: 40px;
}

.search-results-title {
    font-size: 36px;
    font-weight: 900;
    color: var(--text-primary);
    margin: 0 0 16px 0;
    line-height: 1.2;
}

.search-query-highlight {
    color: var(--anime-primary);
    background: rgba(124, 58, 237, 0.1);
    padding: 4px 12px;
    border-radius: 8px;
    display: inline-block;
}

.search-results-count {
    font-size: 18px;
    color: var(--text-secondary);
    margin: 0;
}

.search-results-count strong {
    color: var(--anime-primary);
    font-weight: 700;
}

.search-results-search-box {
    max-width: 700px;
    margin: 0 auto;
}

.search-form-large {
    display: flex;
    gap: 12px;
    align-items: stretch;
}

.search-input-large-wrapper {
    flex: 1;
    position: relative;
}

.search-icon-large {
    position: absolute;
    right: 20px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-muted);
    pointer-events: none;
    z-index: 2;
}

.search-input-large {
    width: 100%;
    padding: 18px 20px 18px 60px;
    background: rgba(255, 255, 255, 0.05);
    border: 2px solid rgba(255, 255, 255, 0.1);
    border-radius: 16px;
    color: var(--text-primary);
    font-size: 18px;
    font-weight: 500;
    transition: all 0.3s;
}

.search-input-large:focus {
    outline: none;
    border-color: var(--anime-primary);
    background: rgba(255, 255, 255, 0.08);
    box-shadow: 0 0 0 4px rgba(124, 58, 237, 0.1);
}

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

.search-clear-large {
    position: absolute;
    left: 20px;
    top: 50%;
    transform: translateY(-50%);
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-muted);
    text-decoration: none;
    border-radius: 50%;
    transition: all 0.2s;
    z-index: 2;
}

.search-clear-large:hover {
    background: rgba(255, 255, 255, 0.1);
    color: var(--text-primary);
}

.btn-search-large {
    padding: 18px 32px;
    font-size: 18px;
    font-weight: 600;
    white-space: nowrap;
    border-radius: 16px;
}

.search-results-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 24px;
    margin-top: 40px;
}

.search-result-card {
    background: var(--anime-surface);
    border: 1px solid var(--border-color);
    border-radius: 16px;
    overflow: hidden;
    transition: all 0.3s;
}

.search-result-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.3);
    border-color: var(--anime-primary);
}

.search-result-link {
    display: block;
    text-decoration: none;
    color: inherit;
}

.search-result-image {
    position: relative;
    width: 100%;
    padding-top: 140%;
    overflow: hidden;
    background: rgba(0, 0, 0, 0.3);
}

.search-result-image img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s;
}

.search-result-card:hover .search-result-image img {
    transform: scale(1.05);
}

.search-result-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(to bottom, transparent, rgba(0, 0, 0, 0.7));
    opacity: 0;
    transition: opacity 0.3s;
}

.search-result-card:hover .search-result-overlay {
    opacity: 1;
}

.search-result-rating {
    position: absolute;
    bottom: 12px;
    right: 12px;
    display: flex;
    align-items: center;
    gap: 4px;
    background: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(10px);
    padding: 6px 10px;
    border-radius: 8px;
    color: #FFD700;
    font-size: 14px;
    font-weight: 700;
}

.search-result-info {
    padding: 20px;
}

.search-result-title {
    font-size: 18px;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0 0 12px 0;
    line-height: 1.3;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.search-result-meta {
    display: flex;
    gap: 12px;
    margin-bottom: 12px;
    font-size: 14px;
    color: var(--text-muted);
}

.search-result-type {
    background: rgba(124, 58, 237, 0.1);
    color: var(--anime-primary);
    padding: 4px 10px;
    border-radius: 6px;
    font-weight: 600;
}

.search-result-episodes {
    color: var(--text-secondary);
}

.search-result-excerpt {
    font-size: 14px;
    color: var(--text-secondary);
    line-height: 1.6;
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.search-results-empty {
    text-align: center;
    padding: 80px 20px;
    max-width: 600px;
    margin: 0 auto;
}

.search-results-empty .empty-icon {
    width: 120px;
    height: 120px;
    margin: 0 auto 30px;
    color: var(--text-muted);
    opacity: 0.5;
}

.search-results-empty .empty-title {
    font-size: 32px;
    font-weight: 900;
    color: var(--text-primary);
    margin: 0 0 16px 0;
}

.search-results-empty .empty-description {
    font-size: 18px;
    color: var(--text-secondary);
    line-height: 1.6;
    margin: 0 0 40px 0;
}

.search-results-empty .empty-actions {
    display: flex;
    gap: 16px;
    justify-content: center;
    flex-wrap: wrap;
}

@media (max-width: 767px) {
    .search-results-view {
        padding: 20px 16px 60px;
    }
    
    .search-results-title {
        font-size: 28px;
    }
    
    .search-results-count {
        font-size: 16px;
    }
    
    .search-form-large {
        flex-direction: column;
    }
    
    .search-input-large {
        padding: 16px 18px 16px 50px;
        font-size: 16px;
    }
    
    .btn-search-large {
        width: 100%;
        padding: 16px;
    }
    
    .search-results-grid {
        grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
        gap: 16px;
    }
    
    .search-result-info {
        padding: 16px;
    }
    
    .search-result-title {
        font-size: 16px;
    }
    
    .search-results-empty .empty-title {
        font-size: 24px;
    }
    
    .search-results-empty .empty-description {
        font-size: 16px;
    }
    
    .search-results-empty .empty-actions {
        flex-direction: column;
    }
    
    .search-results-empty .empty-actions .btn {
        width: 100%;
    }
}

/* ========================================
   ADMIN ACTIVITY DASHBOARD STYLES
   ======================================== */

.admin-activity-dashboard {
    min-height: calc(100vh - 80px);
    padding: 40px 20px 80px;
    background: linear-gradient(180deg, #0B0F1A 0%, #131829 100%);
    max-width: 1600px;
    margin: 0 auto;
}

.dashboard-header {
    text-align: center;
    margin-bottom: 50px;
}

.dashboard-title {
    font-size: 42px;
    font-weight: 900;
    color: var(--text-primary);
    margin: 0 0 12px 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
}

.dashboard-title svg {
    color: var(--anime-primary);
}

.dashboard-subtitle {
    font-size: 18px;
    color: var(--text-secondary);
    margin: 0;
}

.activity-stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 24px;
    margin-bottom: 50px;
}

.stat-card {
    background: var(--anime-surface);
    border: 1px solid var(--border-color);
    border-radius: 16px;
    padding: 24px;
    display: flex;
    align-items: center;
    gap: 20px;
    transition: all 0.3s;
}

.stat-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.3);
    border-color: var(--anime-primary);
}

.stat-icon {
    width: 56px;
    height: 56px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.stat-icon-users {
    background: rgba(59, 130, 246, 0.1);
    color: #3B82F6;
}

.stat-icon-active {
    background: rgba(16, 185, 129, 0.1);
    color: #10B981;
}

.stat-icon-week {
    background: rgba(139, 92, 246, 0.1);
    color: #8B5CF6;
}

.stat-icon-month {
    background: rgba(236, 72, 153, 0.1);
    color: #EC4899;
}

.stat-icon-activities {
    background: rgba(245, 158, 11, 0.1);
    color: #F59E0B;
}

.stat-icon-comments {
    background: rgba(239, 68, 68, 0.1);
    color: #EF4444;
}

.stat-icon-online {
    background: rgba(16, 185, 129, 0.1);
    color: #10B981;
}

.stat-card-online {
    border: 2px solid rgba(16, 185, 129, 0.3);
}

.stat-card-online:hover {
    border-color: #10B981;
    box-shadow: 0 12px 30px rgba(16, 185, 129, 0.2);
}

.stat-content {
    flex: 1;
}

.stat-value {
    font-size: 32px;
    font-weight: 900;
    color: var(--text-primary);
    margin-bottom: 4px;
}

.stat-label {
    font-size: 14px;
    color: var(--text-secondary);
}

.dashboard-section {
    margin-bottom: 50px;
}

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

.section-title {
    font-size: 28px;
    font-weight: 900;
    color: var(--text-primary);
    margin: 0;
}

.section-filters {
    display: flex;
    gap: 12px;
}

.filter-select {
    padding: 10px 16px;
    background: var(--anime-surface);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    color: var(--text-primary);
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
}

.filter-select:focus {
    outline: none;
    border-color: var(--anime-primary);
    box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.1);
}

.activity-types-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 20px;
}

.activity-type-card {
    background: var(--anime-surface);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 20px;
    display: flex;
    align-items: center;
    gap: 16px;
    transition: all 0.3s;
}

.activity-type-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
    border-color: var(--anime-primary);
}

.activity-type-icon {
    width: 48px;
    height: 48px;
    border-radius: 10px;
    background: rgba(124, 58, 237, 0.1);
    color: var(--anime-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.activity-type-content {
    flex: 1;
}

.activity-type-count {
    font-size: 24px;
    font-weight: 900;
    color: var(--text-primary);
    margin-bottom: 4px;
}

.activity-type-label {
    font-size: 13px;
    color: var(--text-secondary);
}

.active-users-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 20px;
}

.active-user-card {
    background: var(--anime-surface);
    border: 1px solid var(--border-color);
    border-radius: 16px;
    padding: 20px;
    display: flex;
    align-items: center;
    gap: 16px;
    transition: all 0.3s;
    position: relative;
}

.active-user-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.3);
    border-color: var(--anime-primary);
}

.active-user-card.rank-gold {
    border-color: #F59E0B;
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.05) 0%, var(--anime-surface) 100%);
}

.active-user-card.rank-silver {
    border-color: #94A3B8;
    background: linear-gradient(135deg, rgba(148, 163, 184, 0.05) 0%, var(--anime-surface) 100%);
}

.active-user-card.rank-bronze {
    border-color: #CD7F32;
    background: linear-gradient(135deg, rgba(205, 127, 50, 0.05) 0%, var(--anime-surface) 100%);
}

.user-rank {
    position: absolute;
    top: 12px;
    right: 12px;
    font-size: 14px;
    font-weight: 900;
    color: var(--text-muted);
    background: rgba(255, 255, 255, 0.05);
    padding: 4px 10px;
    border-radius: 6px;
}

.user-avatar {
    position: relative;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    overflow: hidden;
    flex-shrink: 0;
    border: 2px solid var(--border-color);
}

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

.rank-badge {
    position: absolute;
    bottom: -2px;
    right: -2px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    border: 2px solid var(--anime-surface);
}

.active-user-card.rank-gold .rank-badge {
    background: #F59E0B;
}

.active-user-card.rank-silver .rank-badge {
    background: #94A3B8;
}

.active-user-card.rank-bronze .rank-badge {
    background: #CD7F32;
}

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

.user-name {
    font-size: 18px;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0 0 8px 0;
}

.user-name a {
    color: inherit;
    text-decoration: none;
    transition: color 0.2s;
}

.user-name a:hover {
    color: var(--anime-primary);
}

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

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

.user-stat svg {
    color: var(--anime-primary);
    opacity: 0.7;
}

.recent-activity-feed {
    background: var(--anime-surface);
    border: 1px solid var(--border-color);
    border-radius: 16px;
    padding: 24px;
    max-height: 600px;
    overflow-y: auto;
}

.activity-feed-list {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.activity-feed-item {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    padding: 16px;
    background: rgba(255, 255, 255, 0.02);
    border-radius: 12px;
    transition: all 0.2s;
}

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

.activity-icon {
    font-size: 24px;
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(124, 58, 237, 0.1);
    border-radius: 10px;
}

.activity-content {
    flex: 1;
    min-width: 0;
}

.activity-text {
    font-size: 15px;
    color: var(--text-primary);
    margin-bottom: 6px;
    line-height: 1.5;
}

.activity-user {
    font-weight: 700;
    color: var(--anime-primary);
    text-decoration: none;
}

.activity-user:hover {
    text-decoration: underline;
}

.activity-post {
    color: var(--text-secondary);
    text-decoration: none;
    font-weight: 600;
    margin-right: 4px;
}

.activity-post:hover {
    color: var(--anime-primary);
    text-decoration: underline;
}

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

.loading-spinner {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 60px 20px;
    color: var(--text-muted);
}

.loading-spinner svg {
    animation: spin 1s linear infinite;
    margin-bottom: 16px;
}

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

.empty-state {
    text-align: center;
    padding: 60px 20px;
    color: var(--text-secondary);
    font-size: 16px;
}

.online-count-badge {
    background: rgba(16, 185, 129, 0.2);
    color: #10B981;
    padding: 6px 14px;
    border-radius: 20px;
    font-size: 14px;
    font-weight: 700;
    border: 1px solid rgba(16, 185, 129, 0.3);
}

.online-users-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 16px;
}

.online-user-card {
    background: var(--anime-surface);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 16px;
    display: flex;
    align-items: center;
    gap: 12px;
    transition: all 0.3s;
    position: relative;
}

.online-user-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
    border-color: #10B981;
}

.online-indicator {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 10px;
    height: 10px;
    background: #10B981;
    border-radius: 50%;
    box-shadow: 0 0 8px rgba(16, 185, 129, 0.6);
    animation: pulse-online 2s infinite;
}

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

.user-avatar-small {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    overflow: hidden;
    flex-shrink: 0;
    border: 2px solid rgba(16, 185, 129, 0.3);
}

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

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

.user-name-small {
    display: block;
    font-size: 14px;
    font-weight: 700;
    color: var(--text-primary);
    text-decoration: none;
    margin-bottom: 4px;
    transition: color 0.2s;
}

.user-name-small:hover {
    color: var(--anime-primary);
}

.user-last-activity {
    font-size: 12px;
    color: var(--text-muted);
}

@media (max-width: 767px) {
    .admin-activity-dashboard {
        padding: 20px 16px 60px;
    }
    
    .dashboard-title {
        font-size: 28px;
        flex-direction: column;
        gap: 8px;
    }
    
    .dashboard-subtitle {
        font-size: 16px;
    }
    
    .activity-stats-grid {
        grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
        gap: 16px;
    }
    
    .stat-card {
        padding: 16px;
        flex-direction: column;
        text-align: center;
    }
    
    .stat-icon {
        width: 48px;
        height: 48px;
    }
    
    .stat-value {
        font-size: 24px;
    }
    
    .section-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 16px;
    }
    
    .section-title {
        font-size: 22px;
    }
    
    .active-users-grid {
        grid-template-columns: 1fr;
    }
    
    .activity-types-grid {
        grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
        gap: 12px;
    }
}