:root {
            --primary: #e63946;
            --primary-dark: #c1121f;
            --secondary: #1d3557;
            --accent: #457b9d;
            --light: #f1faee;
            --dark: #0d1b2a;
            --gray: #6c757d;
            --success: #2a9d8f;
            --warning: #e9c46a;
            --danger: #e76f51;
            --gradient: linear-gradient(135deg, var(--primary) 0%, var(--secondary) 100%);
            --shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
            --shadow-sm: 0 2px 10px rgba(0, 0, 0, 0.2);
            --radius: 12px;
            --radius-sm: 8px;
            --transition: all 0.3s ease;
        }

        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        html {
            scroll-behavior: smooth;
        }

        body {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            background: var(--dark);
            color: var(--light);
            line-height: 1.6;
            min-height: 100vh;
            overflow-x:hidden;
        }

        a {
            text-decoration: none;
            color: inherit;
            transition: var(--transition);
        }

        ul {
            list-style: none;
        }

        img {
            max-width: 100%;
            height: auto;
            display: block;
        }

        button {
            cursor: pointer;
            border: none;
            outline: none;
            font-family: inherit;
            transition: var(--transition);
        }

        input, textarea, select {
            font-family: inherit;
            outline: none;
            border: none;
        }
        .container {
            max-width: 1400px;
            margin: 0 auto;
            padding: 0 20px;
        }

        .btn {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
            padding: 12px 28px;
            border-radius: var(--radius-sm);
            font-weight: 600;
            font-size: 0.95rem;
            text-transform: uppercase;
            letter-spacing: 0.5px;
        }

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

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

        .btn-secondary {
            background: var(--secondary);
            color: white;
        }

        .btn-secondary:hover {
            background: var(--accent);
        }

        .btn-outline {
            background: transparent;
            border: 2px solid var(--primary);
            color: var(--primary);
        }

        .btn-outline:hover {
            background: var(--primary);
            color: white;
        }

        .section-title {
            font-size: 2rem;
            font-weight: 700;
            margin-bottom: 30px;
            position: relative;
            display: inline-block;
        }

        .section-title::after {
            content: '';
            position: absolute;
            bottom: -8px;
            left: 0;
            width: 60px;
            height: 4px;
            background: var(--primary);
            border-radius: 2px;
        }
        .header {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            z-index: 1000;
            background: rgba(13, 27, 42, 0.95);
            backdrop-filter: blur(10px);
            border-bottom: 1px solid rgba(255, 255, 255, 0.1);
        }

        .nav {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 15px 0;
        }

        .logo{
            display:flex;
            align-items:center;
            gap:8px;
            font-size:1.4rem;
            font-weight:800;
            color:var(--primary);
            white-space:nowrap;
        }

        .logo i{
            font-size:1.5rem;
        }

        .logo span {
            color: var(--light);
        }

        .nav-menu {
            display: flex;
            align-items: center;
            gap: 35px;
        }

        .nav-link{
            display:flex;
            align-items:center;
            gap:10px;
            font-weight:600;
            position:relative;
        }

        .nav-link::after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 0;
            width: 0;
            height: 2px;
            background: var(--primary);
            transition: var(--transition);
        }

        .nav-link:hover::after,
        .nav-link.active::after {
            width: 100%;
        }

        .nav-link:hover {
            color: var(--primary);
        }

        .nav-actions {
            display: flex;
            align-items: center;
            gap: 15px;
        }

        .search-box {
            display: flex;
            align-items: center;
            background: rgba(255, 255, 255, 0.1);
            border-radius: 25px;
            padding: 8px 15px;
            gap: 10px;
        }

        .search-box input {
            background: transparent;
            color: var(--light);
            width: 200px;
            font-size: 0.9rem;
        }

        .search-box input::placeholder {
            color: var(--gray);
        }

        .search-box button {
            background: none;
            color: var(--light);
            font-size: 1rem;
        }

        .mobile-toggle {
            display: none;
            flex-direction: column;
            gap: 5px;
            background: none;
            padding: 5px;
        }

        .mobile-toggle span {
            width: 25px;
            height: 3px;
            background: var(--light);
            border-radius: 2px;
            transition: var(--transition);
        }
        .hero {
            min-height: 100vh;
            display: flex;
            align-items: center;
            position: relative;
            overflow: hidden;
            padding-top: 80px;
        }

        .hero-bg{
            background:
            linear-gradient(
                135deg,
                rgba(13,27,42,.9) 0%,
                rgba(29,53,87,.8) 100%
            ),
            url("https://images.unsplash.com/photo-1578632767115-351597cf2477?w=1920")
            center center / cover no-repeat;
        }

        .hero-content {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 60px;
            align-items: center;
        }

        .hero-text h1 {
            font-size: 3.5rem;
            font-weight: 800;
            line-height: 1.2;
            margin-bottom: 20px;
        }

        .hero-text h1 span {
            color: var(--primary);
        }

        .hero-text p {
            font-size: 1.2rem;
            color: var(--gray);
            margin-bottom: 30px;
            max-width: 500px;
        }

        .hero-buttons {
            display: flex;
            gap: 15px;
            margin-bottom: 40px;
        }

        .hero-stats {
            display: flex;
            gap: 40px;
        }

        .stat-item {
            text-align: center;
        }

        .stat-number {
            font-size: 2.5rem;
            font-weight: 800;
            color: var(--primary);
        }

        .stat-label {
            font-size: 0.9rem;
            color: var(--gray);
        }

        .featured-card {
            background: rgba(255, 255, 255, 0.05);
            border-radius: var(--radius);
            overflow: hidden;
            box-shadow: var(--shadow);
            transform: perspective(1000px) rotateY(-5deg);
            transition: var(--transition);
        }

        .featured-card:hover {
            transform: perspective(1000px) rotateY(0deg);
        }

        .featured-card img {
            width: 100%;
            height: 450px;
            object-fit: cover;
        }

        .featured-info {
            padding: 20px;
        }

        .featured-info h3 {
            font-size: 1.5rem;
            margin-bottom: 10px;
        }

        .featured-meta {
            display: flex;
            gap: 15px;
            color: var(--gray);
            font-size: 0.9rem;
        }
        .anime-section {
            padding: 80px 0;
        }

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

        .anime-grid{
        display:flex;
        overflow-x:auto;
        overflow-y:hidden;
        gap:20px;

        scroll-snap-type:x mandatory;
        -webkit-overflow-scrolling:touch;

        padding-bottom:10px;
    }

    .anime-grid::-webkit-scrollbar{
        height:8px;
    }

    .anime-grid::-webkit-scrollbar-thumb{
        background:#444;
        border-radius:20px;
    }

    .anime-card{
        flex:0 0 220px;
        width:220px;
        scroll-snap-align:start;
    }

        .anime-card{
            display:flex;
            flex-direction:column;
            height:100%;
        }

        .anime-card:hover {
            transform: translateY(-10px);
            box-shadow: var(--shadow);
        }

        .anime-card img{
            width:100%;
            height:280px;
            object-fit:cover;
        }

        .anime-card-image img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: var(--transition);
        }

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

        .anime-card-overlay {
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: linear-gradient(to top, rgba(0, 0, 0, 0.8) 0%, transparent 50%);
            opacity: 0;
            transition: var(--transition);
            display: flex;
            align-items: flex-end;
            padding: 20px;
        }

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

        .anime-card-badge {
            position: absolute;
            top: 10px;
            left: 10px;
            background: var(--primary);
            color: white;
            padding: 5px 12px;
            border-radius: 20px;
            font-size: 0.75rem;
            font-weight: 600;
        }

        .anime-card-rating {
            position: absolute;
            top: 10px;
            right: 10px;
            background: rgba(0, 0, 0, 0.7);
            color: var(--warning);
            padding: 5px 10px;
            border-radius: 20px;
            font-size: 0.85rem;
            font-weight: 600;
            display: flex;
            align-items: center;
            gap: 5px;
        }

        .anime-card-info {
            padding: 15px;
        }

        .anime-card-title {
            font-size: 1rem;
            font-weight: 600;
            margin-bottom: 8px;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        .anime-card-meta {
            display: flex;
            justify-content: space-between;
            font-size: 0.85rem;
            color: var(--gray);
        }
        .genres-section {
            padding: 60px 0;
            background: rgba(255, 255, 255, 0.02);
        }

        .genres-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
            gap: 15px;
        }

        .genre-card {
            background: var(--gradient);
            padding: 20px;
            border-radius: var(--radius-sm);
            text-align: center;
            font-weight: 600;
            transition: var(--transition);
        }

        .genre-card:hover {
            transform: scale(1.05);
            box-shadow: var(--shadow-sm);
        }
        .footer {
            background: rgba(0, 0, 0, 0.3);
            padding: 60px 0 30px;
            margin-top: 80px;
        }

        .footer-grid {
            display: grid;
            grid-template-columns:2fr 1fr 1fr 1fr 1fr;
            gap: 40px;
            margin-bottom: 40px;
        }

        .footer-brand .logo {
            margin-bottom: 15px;
        }

        .footer-brand p {
            color: var(--gray);
            max-width: 300px;
        }

        .footer-title {
            font-size: 1.1rem;
            font-weight: 600;
            margin-bottom: 20px;
            color: var(--light);
        }

        .footer-links li {
            margin-bottom: 10px;
        }

        .footer-links a {
            color: var(--gray);
        }

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

        .footer-social {
            display: flex;
            gap: 15px;
            margin-top: 20px;
        }

        .footer-social a {
            width: 40px;
            height: 40px;
            background: rgba(255, 255, 255, 0.1);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1.1rem;
        }

        .footer-social a:hover {
            background: var(--primary);
        }

        .footer-bottom {
            border-top: 1px solid rgba(255, 255, 255, 0.1);
            padding-top: 30px;
            text-align: center;
            color: var(--gray);
        }
        .auth-page {
            min-height: 100vh;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 40px 20px;
            background: linear-gradient(135deg, var(--dark) 0%, var(--secondary) 100%);
        }

        .auth-container {
            background: rgba(255, 255, 255, 0.05);
            backdrop-filter: blur(10px);
            border-radius: var(--radius);
            padding: 50px;
            width: 100%;
            max-width: 450px;
            box-shadow: var(--shadow);
        }

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

        .auth-header .logo {
            justify-content: center;
            margin-bottom: 20px;
        }

        .auth-header h2 {
            font-size: 1.8rem;
            margin-bottom: 10px;
        }

        .auth-header p {
            color: var(--gray);
        }

        .form-group {
            margin-bottom: 20px;
        }

        .form-group label {
            display: block;
            margin-bottom: 8px;
            font-weight: 500;
            font-size: 0.9rem;
        }

        .form-group input,
        .form-group textarea,
        .form-group select {
            width: 100%;
            padding: 14px 18px;
            background: rgba(255, 255, 255, 0.08);
            border: 1px solid rgba(255, 255, 255, 0.1);
            border-radius: var(--radius-sm);
            color: var(--light);
            font-size: 1rem;
            transition: var(--transition);
        }

        .form-group input:focus,
        .form-group textarea:focus,
        .form-group select:focus {
            border-color: var(--primary);
            background: rgba(255, 255, 255, 0.12);
        }

        .form-group input::placeholder {
            color: var(--gray);
        }

        .form-row {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 15px;
        }

        .form-check {
            display: flex;
            align-items: center;
            gap: 10px;
            margin-bottom: 25px;
        }

        .form-check input[type="checkbox"] {
            width: 18px;
            height: 18px;
            accent-color: var(--primary);
        }

        .auth-form .btn {
            width: 100%;
            padding: 15px;
            font-size: 1rem;
        }

        .auth-footer {
            text-align: center;
            margin-top: 25px;
            color: var(--gray);
        }

        .auth-footer a {
            color: var(--primary);
            font-weight: 600;
        }

        .auth-divider {
            display: flex;
            align-items: center;
            gap: 15px;
            margin: 25px 0;
            color: var(--gray);
        }

        .auth-divider::before,
        .auth-divider::after {
            content: '';
            flex: 1;
            height: 1px;
            background: rgba(255, 255, 255, 0.1);
        }
        .anime-detail {
            padding-top: 100px;
        }

        .anime-banner {
            height: 400px;
            position: relative;
            overflow: hidden;
        }

        .anime-banner img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            filter: blur(5px);
            transform: scale(1.1);
        }

        .anime-banner-overlay {
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: linear-gradient(to top, var(--dark) 0%, transparent 100%);
        }

        .anime-detail-content {
            margin-top: -200px;
            position: relative;
            z-index: 10;
        }

        .anime-detail-grid {
            display: grid;
            grid-template-columns: 300px 1fr;
            gap: 40px;
        }

        .anime-poster {
            border-radius: var(--radius);
            overflow: hidden;
            box-shadow: var(--shadow);
        }

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

        .anime-info h1 {
            font-size: 2.5rem;
            margin-bottom: 10px;
        }

        .anime-title-jp {
            color: var(--gray);
            font-size: 1.1rem;
            margin-bottom: 20px;
        }

        .anime-meta-row {
            display: flex;
            flex-wrap: wrap;
            gap: 20px;
            margin-bottom: 25px;
        }

        .meta-item {
            display: flex;
            align-items: center;
            gap: 8px;
            background: rgba(255, 255, 255, 0.08);
            padding: 8px 15px;
            border-radius: 20px;
            font-size: 0.9rem;
        }

        .anime-genres {
            display: flex;
            flex-wrap: wrap;
            gap: 10px;
            margin-bottom: 25px;
        }

        .genre-tag {
            background: var(--primary);
            color: white;
            padding: 6px 15px;
            border-radius: 20px;
            font-size: 0.85rem;
            font-weight: 500;
        }

        .anime-synopsis {
            margin-bottom: 30px;
        }

        .anime-synopsis h3 {
            margin-bottom: 15px;
        }

        .anime-synopsis p {
            color: var(--gray);
            line-height: 1.8;
        }

        .anime-actions {
            display: flex;
            gap: 15px;
        }
        .episodes-section {
            padding: 60px 0;
        }

        .episodes-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
            gap: 15px;
        }

        .episode-card {
            background: rgba(255, 255, 255, 0.05);
            padding: 20px;
            border-radius: var(--radius-sm);
            transition: var(--transition);
            cursor: pointer;
        }

        .episode-card:hover {
            background: rgba(255, 255, 255, 0.1);
            transform: translateX(5px);
        }

        .episode-number {
            font-size: 0.85rem;
            color: var(--primary);
            font-weight: 600;
            margin-bottom: 5px;
        }

        .episode-title {
            font-weight: 500;
        }
        .admin-layout {
            display: grid;
            grid-template-columns: 260px 1fr;
            min-height: 100vh;
        }

        .admin-sidebar {
            background: rgba(0, 0, 0, 0.3);
            padding: 30px 20px;
            border-right: 1px solid rgba(255, 255, 255, 0.1);
        }

        .admin-sidebar .logo {
            margin-bottom: 40px;
            padding: 0 10px;
        }

        .admin-menu {
            display: flex;
            flex-direction: column;
            gap: 5px;
        }

        .admin-menu-item {
            display: flex;
            align-items: center;
            gap: 12px;
            padding: 14px 18px;
            border-radius: var(--radius-sm);
            color: var(--gray);
            font-weight: 500;
            transition: var(--transition);
        }

        .admin-menu-item:hover,
        .admin-menu-item.active {
            background: rgba(230, 57, 70, 0.2);
            color: var(--primary);
        }

        .admin-menu-item.active {
            background: var(--primary);
            color: white;
        }

        .admin-main {
            padding: 30px 40px;
            overflow-y: auto;
        }

        .admin-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 40px;
        }

        .admin-header h1 {
            font-size: 1.8rem;
        }

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

        .admin-avatar {
            width: 45px;
            height: 45px;
            border-radius: 50%;
            background: var(--primary);
            display: flex;
            align-items: center;
            justify-content: center;
            font-weight: 600;
        }

        .stats-grid {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 25px;
            margin-bottom: 40px;
        }

        .stat-card {
            background: rgba(255, 255, 255, 0.05);
            padding: 25px;
            border-radius: var(--radius);
            border-left: 4px solid var(--primary);
        }

        .stat-card h3 {
            font-size: 2rem;
            margin-bottom: 5px;
        }

        .stat-card p {
            color: var(--gray);
            font-size: 0.9rem;
        }

        .admin-table {
            width: 100%;
            background: rgba(255, 255, 255, 0.05);
            border-radius: var(--radius);
            overflow: hidden;
        }

        .admin-table th,
        .admin-table td {
            padding: 15px 20px;
            text-align: left;
        }

        .admin-table th {
            background: rgba(0, 0, 0, 0.2);
            font-weight: 600;
            font-size: 0.9rem;
            text-transform: uppercase;
            letter-spacing: 0.5px;
        }

        .admin-table tr {
            border-bottom: 1px solid rgba(255, 255, 255, 0.05);
        }

        .admin-table tr:hover {
            background: rgba(255, 255, 255, 0.03);
        }

        .table-actions {
            display: flex;
            gap: 10px;
        }

        .table-btn {
            padding: 8px 12px;
            border-radius: 5px;
            font-size: 0.85rem;
        }

        .table-btn.edit {
            background: var(--accent);
            color: white;
        }

        .table-btn.delete {
            background: var(--danger);
            color: white;
        }
        .admin-form-container {
            background: rgba(255, 255, 255, 0.05);
            padding: 40px;
            border-radius: var(--radius);
        }

        .admin-form-container h2 {
            margin-bottom: 30px;
        }

        .form-grid {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 20px;
        }

        .form-group.full-width {
            grid-column: span 2;
        }

        .form-group textarea {
            min-height: 150px;
            resize: vertical;
        }

        .image-upload {
            border: 2px dashed rgba(255, 255, 255, 0.2);
            border-radius: var(--radius-sm);
            padding: 40px;
            text-align: center;
            cursor: pointer;
            transition: var(--transition);
        }

        .image-upload:hover {
            border-color: var(--primary);
        }

        .image-upload input {
            display: none;
        }


        .image-preview img {
            max-width: 200px;
            border-radius: var(--radius-sm);
            margin: 0 auto;
        }
        @media (max-width: 1200px) {
            .hero-content {
                grid-template-columns: 1fr;
                text-align: center;
            }
            
            .hero-text p {
                margin: 0 auto 30px;
            }
            
            .hero-buttons {
                justify-content: center;
            }
            
            .hero-stats {
                justify-content: center;
            }
            
            .hero-featured {
                display: none;
            }
            
            .footer-grid {
                grid-template-columns: 1fr 1fr;
            }
            
            .stats-grid {
                grid-template-columns: repeat(2, 1fr);
            }
        }

        @media (max-width: 992px) {
            .admin-layout {
                grid-template-columns: 1fr;
            }
            
            .admin-sidebar {
                display: none;
            }
            
            .anime-detail-grid {
                grid-template-columns: 1fr;
            }
            
            .anime-poster {
                max-width: 300px;
                margin: 0 auto;
            }
        }

        @media (max-width: 768px) {
            .mobile-toggle {
                display: flex;
            }
            
            .search-box {
                display: none;
            }
            
            .hero-text h1 {
                font-size: 2.5rem;
            }
            
            .section-header {
                flex-direction: column;
                gap: 15px;
                text-align: center;
            }
            
            .footer-grid {
                grid-template-columns: 1fr;
                text-align: center;
            }
            
            .footer-brand p {
                margin: 0 auto;
            }
            
            .footer-social {
                justify-content: center;
            }
            
            .form-grid,
            .form-row {
                grid-template-columns: 1fr;
            }
            
            .form-group.full-width {
                grid-column: span 1;
            }
            
            .auth-container {
                padding: 30px 25px;
            }
            
            .stats-grid {
                grid-template-columns: 1fr;
            }
        }

        @media (max-width: 480px) {
            .hero-text h1 {
                font-size: 2rem;
            }
            
            .hero-stats {
                flex-direction: column;
                gap: 20px;
            }
            
            .hero-buttons {
                flex-direction: column;
            }

            
            .anime-card-image {
                height: 220px;
            }
        }
        .episode-entry {
            background: rgba(255,255,255,0.05);
            padding: 15px;
            border-radius: 10px;
            margin-bottom: 10px;
        }

        .episode-entry input {
            width: 100%;
            padding: 12px;
            background: rgba(255,255,255,0.08);
            color: white;
            border-radius: 8px;
            border: 1px solid rgba(255,255,255,0.1);
        }

        .episode-entry input:focus {
            border-color: var(--primary);
        }
        .image-preview {
            margin-top: 15px;
            text-align: center;
        }

        .image-preview img {
            max-width: 200px;
            border-radius: 10px;
            border: 2px solid rgba(255,255,255,0.1);
        }
        .form-group input[type="checkbox"] {
            width: 18px;
            height: 18px;
            accent-color: var(--primary);
        }
        .admin-form-buttons {
            display: flex;
            flex-wrap: wrap;
            gap: 15px;
        }
        .anime-card {
            text-align: center;
        }

        .anime-card img {
            width: 100%;
            height: 350px;
            object-fit: cover;
        }

        .anime-card-content{
            display:flex;
            flex-direction:column;
            flex:1;
            padding:12px;
            gap:4px; 
        }

        .anime-card-content h3{
            margin:0;
            font-size:1rem;
            line-height:1.3;

            display:-webkit-box;
            -webkit-line-clamp:2;
            -webkit-box-orient:vertical;
            overflow:hidden;
        }

        .anime-card-content p{
            margin:0;
            font-size:.85rem;
            color:#a8b3cf;

            display:-webkit-box;
            -webkit-line-clamp:1;
            -webkit-box-orient:vertical;
            overflow:hidden;
        }
        .anime-meta{
            display:flex;
            align-items:center;
            gap:8px;
            font-size:.8rem;
            color:#d4d4d4;
            margin-top:2px;
        }
        .anime-card-content .btn{

            margin-top:auto;

            width:100%;
        }
        .filter-select,
        .filter-select option,
        select,
        select option {
            background-color: #1a1a1a;
            color: white;
        }
        .hero-featured{
            position:relative;
            width:400px;
            max-width:100%;
        }

        .slide {
            display: none;
        }

        .active-slide {
            display: block;
        }

        .slide img {
            width: 100%;
            border-radius: 15px;
        }
        .slider-btn {
            position: absolute;
            top: 45%;
            z-index: 100;
            border: none;
            background: rgba(0,0,0,0.7);
            color: white;
            padding: 12px;
            cursor: pointer;
        }
        .prev {
            left: -20px;
        }
        .next {
            right: -20px;
        }
        @media (max-width: 768px) {
            .mobile-toggle {
                display: flex;
            }

            .nav-actions .search-box {
                display: none; /* clean mobile header */
            }
            .hero-content {
                grid-template-columns: 1fr !important;
                text-align: center;
                gap: 20px;
            }
            .hero-text h1 {
                font-size: 2rem;
                line-height: 1.3;
            }
            .hero-text p {
                font-size: 0.95rem;
                margin: 0 auto;
            }
            .hero-buttons {
                flex-direction: column;
                gap: 10px;
            }
            .hero-stats {
                flex-direction: row;
                justify-content: center;
                flex-wrap: wrap;
                gap: 15px;
            }
            .hero-featured {
                width: 100% !important;
                margin-top: 20px;
            }
            .slider-btn {
                padding: 8px;
                font-size: 14px;
            }
            .anime-grid {
                grid-template-columns: repeat(2, 1fr) !important;
                gap: 12px;
                padding: 10px;
            }

            .anime-card img {
                height: 220px;
            }
            .section-title {
                font-size: 1.5rem;
                text-align: center;
            }
            .footer-grid {
                grid-template-columns: 1fr !important;
                text-align: center;
            }
            .footer-social {
                justify-content: center;
            }
            .dropdown-menu {
                position: static;
                display: none;
                background: #1a1a1a;
            }
            .dropdown.active .dropdown-menu {
                display: block;
            }
        }
        @media (max-width: 480px) {
            .anime-grid {
                grid-template-columns: 1fr 1fr;
                gap: 10px;
            }
            .hero-text h1 {
                font-size: 1.7rem;
            }
            .anime-card img {
                height: 180px;
            }
            .hero-stats {
                flex-direction: column;
                gap: 10px;
            }
        }
        .watch-buttons{
            display:flex;
            gap:15px;
            margin:15px 0 25px 0;
            align-items:center;
        }
        .watch-btn{
            display:flex;
            align-items:center;
            justify-content:center;
            padding:10px 18px;
            border-radius:12px;
            background:#111;
            transition:0.3s;
            box-shadow:0 5px 15px rgba(0,0,0,0.4);
        }
        .watch-btn.netflix:hover{
            background:#e50914;
            transform:scale(1.05);
        }
        .watch-btn.crunchyroll:hover{
            background:#f47521;
            transform:scale(1.05);
        }
        .watch-section{
            margin-bottom:15px;
        }
        .watch-label{
            display:inline-block;
            background:#e50914;
            color:white;
            padding:6px 14px;
            border-radius:20px;
            font-weight:700;
            font-size:13px;
            margin-bottom:10px;
        }
        .watch-buttons{
            display:flex;
            gap:15px;
            align-items:center;
        }
        .watch-btn:hover img{
            transform:scale(1.1);
        }
        
        .watch-btn img{
            height:40px;
            width:auto;
            display:block;
            object-fit:contain;
            transition:.3s;
            background:transparent;
            filter:none!important;
            opacity:1!important;
        }
        @media (max-width: 768px) {

            .dropdown {
                width: 100%;
            }
            .dropdown-menu {
                position: static !important;
                display: none;
                width: 100%;
                background: #16263a;
                margin-top: 8px;
                border-radius: 8px;
                padding: 5px 0;
            }
            .dropdown.active .dropdown-menu {
                display: block;
            }
            .dropdown-menu li {
                width: 100%;
            }
            .dropdown-menu a {
                display: block;
                padding: 10px 15px;
                width: 100%;
            }
        }
        @media (max-width: 768px){

            .footer-links{
                display:grid;
                grid-template-columns:repeat(2,1fr);
                gap:8px;
                text-align:left;
            }
            .footer-links li{
                margin-bottom:5px;
            }
            .footer-title{
                text-align:center;
                margin-bottom:15px;
            }
        }
        @media (max-width:768px){
            .footer-col:nth-child(3) .footer-links{
                display:grid;
                grid-template-columns:repeat(3,1fr);
                gap:8px;
                text-align:left;
            }
        }
        .mini-btn{
            padding:8px 14px;
            border-radius:10px;
            font-size:.8rem;
            font-weight:700;
            transition:.3s;
        }
        .login-mini{
            border:2px solid var(--primary);
            color:#fff;
        }
        .signup-mini{
            background:var(--primary);
            color:#fff;
        }
        .signup-mini:hover,
        .login-mini:hover{
            transform:translateY(-2px);
        }
        @media (max-width:768px){
            .anime-grid{
                display:flex !important;
                overflow-x:auto;
                overflow-y:hidden;
                gap:15px;
                padding:10px 5px;
                scroll-snap-type:x mandatory;
                -webkit-overflow-scrolling:touch;
            }
            .anime-grid::-webkit-scrollbar{
                display:none;
            }
            .anime-card{
                flex:0 0 180px;
                width:180px;
                scroll-snap-align:start;
            }
            .anime-card img{
                height:250px;
                width:100%;
                object-fit:cover;
            }
        }
        @media (max-width:768px){


.genres-grid.mobile-scroll{

    display:grid;

    grid-auto-flow:column;

    grid-template-rows:
        repeat(3, 70px);

    grid-auto-columns:140px;

    gap:12px;

    overflow-x:auto;
    overflow-y:hidden;

    padding-bottom:10px;

    -webkit-overflow-scrolling:touch;

    scroll-behavior:smooth;
}

.genres-grid.mobile-scroll::-webkit-scrollbar{
    height:6px;
}

.genres-grid.mobile-scroll::-webkit-scrollbar-thumb{
    background:#e63946;
    border-radius:10px;
}

.genre-card{

    width:140px;
    height:70px;

    display:flex;
    align-items:center;
    justify-content:center;

    text-align:center;

    font-size:16px;
    font-weight:600;
}


}

        .mobile-toggle.active span:nth-child(1){
            transform:rotate(45deg) translate(5px,5px);
        }
        .mobile-toggle.active span:nth-child(2){
            opacity:0;
        }
        .mobile-toggle.active span:nth-child(3){
            transform:rotate(-45deg) translate(7px,-6px);
        }
        .profile-btn{
        padding:10px 16px;
        background:var(--primary);
        color:#fff;
        border-radius:10px;
        font-weight:600;
        }
        @media(max-width:768px){
        .nav-actions{
            display:none !important;
        }
        .mobile-auth{
            display:block;
        }
        }
        @media (max-width:768px){
        .nav-menu li a{
            display:flex;
            align-items:center;
            gap:16px;
            font-size:20px;
            padding:18px 24px;
            border-bottom:none;
        }
        .nav-menu li a:hover{
            background:#2f2f2f;
            padding-left:24px;
        }
    }
        @media(max-width:768px){
            .logo-row{
                padding:15px 20px;
            }
            .desktop-auth{
                display:none;
            }
            .mobile-toggle{
                display:flex;
            }
            .nav-menu li{
                width:100%;
            }
            .nav-menu li a{
                width:100%;
                padding:18px 25px;
                gap:12px;
            }
            .mobile-auth{
                display:block;
            }
        }
        .anime-card-content{
            padding:12px;
            text-align:center;
        }
        .anime-title{
            font-size:17px;
            margin-bottom:4px;
            line-height:1.3;
        }
        .anime-genre{
            font-size:13px;
            color:#aaa;
            margin-bottom:6px;
        }
        .anime-meta{
            display:flex;
            justify-content:center;
            gap:10px;
            font-size:13px;
            margin-bottom:10px;
            color:#ccc;
        }
        .anime-card .btn{
            padding:8px 14px;
            font-size:14px;
        }
        @media(max-width:768px){
            .desktop-auth{
                display:none;
            }
            .nav-menu li{
                width:100%;
            }
            .nav-menu li a{
                width:100%;
                padding:14px;
                border-radius:10px;
            }
            .nav-menu li a:hover{
                background:rgba(255,255,255,.05);
            }
            .mobile-auth{
                margin-top:15px;
            }
            .mobile-auth a{
                justify-content:center;
                background:#ff5e62;
            }
            .menu-overlay.active{
                display:block;
            }
        }
    section[id]{
        scroll-margin-top:180px;
    }
    .logo-row{
        display:flex;
        justify-content:space-between;
        align-items:center;
        padding:15px 25px;
    }
    .menu-row{
        border-top:1px solid rgba(255,255,255,.08);
    }
    .nav-menu a{
        display:flex;
        align-items:center;
        gap:8px;
        color:#fff;
        font-weight:600;
        text-decoration:none;
    }
    .nav-menu a:hover{
        color:var(--primary);
    }
    .menu-overlay{
        position:fixed;
        inset:0;
        background:rgba(0,0,0,.6);
        opacity:0;
        visibility:hidden;
        transition:.3s;
        z-index:9998;
    }
    .menu-overlay.active{
        opacity:1;
        visibility:visible;
    }
    .mobile-menu-header,
    .mobile-divider,
    .mobile-section-title{
        display:none;
    }
    @media (min-width: 992px){
        .nav-menu{
            display: flex;
            justify-content: center;
            align-items: center;
            gap: 8px;
            flex-wrap: nowrap;   /* Prevent second row */
        }
        .nav-menu li a{
            font-size: 0.95rem;  /* Smaller text */
            padding: 12px 14px;
            white-space: nowrap; /* Keep text in one line */
        }
        .nav-menu li a i{
            margin-right: 6px;
            font-size: 0.9rem;
        }
    }
    .anime-list-header .menu-row {
        position: relative;
        height: auto;
    }
    .anime-list-header .nav-menu {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 15px 25px;
        width: 100%;
        padding: 15px 25px;
    }
    .anime-list-header .nav-menu li {
        list-style: none;
    }
    .anime-list-header .nav-menu a {
        white-space: nowrap;
    }
    .browse-page {
        margin-top: 140px;
        padding-top: 40px;
    }
    @media (min-width: 992px){
        .footer-col.genres-column{
            grid-column: span 2;
        }
        .footer-col.genres-column .footer-links{
            display:grid;
            grid-template-columns:repeat(3, 1fr);
            gap:10px 25px;
        }
    }
    @media(max-width:768px){
        .menu-row{
            position:fixed;
            top:0;
            left:-100%;
            width:88%;
            max-width:340px;
            z-index:9999;
            height:100vh;
            background:
                linear-gradient(
                    180deg,
                    rgba(24,42,70,0.99) 0%,
                    rgba(15,30,52,0.99) 50%,
                    rgba(10,20,35,0.99) 100%
                );
            backdrop-filter:blur(20px);
            border-right:1px solid rgba(255,255,255,.12);
            box-shadow:
                0 0 40px rgba(0,0,0,.7),
                inset 0 0 80px rgba(255,255,255,.03);
            overflow-y:auto;
            overflow-x:hidden;
            -webkit-overflow-scrolling:touch;
            transition:.35s ease;
            z-index:9999;
            scrollbar-width:thin;
            scrollbar-color:#e63946 rgba(255,255,255,.05);
        }
        .menu-row.active{
            left:0;
        }
        .menu-row::-webkit-scrollbar{
            width:8px;
        }
        .menu-row::-webkit-scrollbar-track{
            background:rgba(255,255,255,.05);
        }
        .menu-row::-webkit-scrollbar-thumb{
            background:#e63946;
            border-radius:20px;
        }
        .menu-row::-webkit-scrollbar-thumb:hover{
            background:#ff5a67;
        }
        .nav-menu{
            flex-direction:column;
            align-items:stretch;
            gap:8px;
            padding:15px;
            padding-bottom:120px;
        }
        .nav-menu li a{
            width:100%;
            padding:16px 18px;
            border-radius:16px;
            background:rgba(255,255,255,.03);
            color:#ffffff;
            font-size:18px;
            font-weight:600;
            transition:.3s;
        }
        .nav-menu li a i{
            width:24px;
            text-align:center;
            color:#ff5a67;
        }
        .nav-menu li a:hover,
        .nav-menu li a.active{
            background:linear-gradient(
                90deg,
                rgba(230,57,70,.20),
                rgba(230,57,70,.45)
            );
            color:#ffffff;
            border:1px solid rgba(255,90,103,.35);
            box-shadow:
                0 0 20px rgba(230,57,70,.15);
        }
        .mobile-menu-header{
            background:rgba(255,255,255,.03);
            backdrop-filter:blur(10px);
            position:sticky;
            top:0;
            z-index:5;
        }
    }
    .mobile-toggle{
        display:none;
        flex-direction:column;
        justify-content:center;
        align-items:center;
        gap:5px;
        background:none;
        border:none;
        cursor:pointer;
        padding:8px;
    }
    .mobile-toggle span{
        width:28px;
        height:3px;
        background:#ffffff;
        border-radius:10px;
        transition:.3s ease;
        display:block;
    }
    @media(max-width:768px){
        .mobile-toggle{
            display:flex;
        }
    }
    @media(max-width:768px){
    .mobile-menu-header{
        display:flex;
        justify-content:space-between;
        align-items:center;
        padding:20px;
    }
    .mobile-divider{
        display:block;
        height:1px;
        background:rgba(255,255,255,.1);
        margin:15px 0;
    }
    .mobile-section-title{
        display:block;
        padding:10px 20px;
        color:#ff5a67;
        font-weight:700;
        font-size:13px;
        letter-spacing:1px;
    }
}
.menu-overlay{
    z-index:9997;
}
.menu-row{
    z-index:10000;
}
.menu-row.active{
    pointer-events:auto;
}
.menu-row{
    pointer-events:auto;
}
@media(max-width:768px){
    .menu-row{
        pointer-events:auto;
    }
}   
@media(max-width:768px){
    .menu-row{
        overflow-y:auto !important;
        overflow-x:hidden !important;
        height:100vh;
        max-height:100vh;
        -webkit-overflow-scrolling:touch;
        touch-action:pan-y;
    }
    .nav-menu{
        min-height:max-content;
        padding-bottom:120px;
    }
}
body.menu-open{
    overflow:hidden;
}
body.menu-open .menu-row{
    overflow-y:auto;
}
.close-menu{
width:42px;
height:42px;

border:none;
border-radius:50%;

background:linear-gradient(
    135deg,
    #ff4b5c,
    #e63946
);}

.nav-menu,
.nav-menu li,
.nav-menu a{
    position:relative;
    z-index:10001;
}
/* ===================================================
   ANIME LIST PAGE MOBILE FIX
=================================================== */

@media (max-width:768px){

    .browse-page .anime-grid.grid-view{
        display:grid !important;
        grid-template-columns:repeat(2,1fr) !important;
        overflow:visible !important;
        gap:15px !important;
    }

    .browse-page .anime-grid.grid-view .anime-card{
        width:100% !important;
        flex:none !important;
    }

    .browse-page .anime-grid.list-view{
        display:flex !important;
        flex-direction:column !important;
        overflow:visible !important;
    }

    .browse-page .anime-grid.list-view .anime-card{
        width:100% !important;
        flex:none !important;
    }

    .browse-page .anime-card img{
        height:240px;
        object-fit:cover;
    }
}

@media (max-width:480px){

    .browse-page .anime-grid.grid-view{
        grid-template-columns:1fr !important;
    }

}

@media (max-width: 768px) {
/* Remove huge empty space */
.hero{
    min-height:auto;
    padding:110px 16px 40px;
    display:flex;
    align-items:center;
    justify-content:center;
}

/* Mobile Hero Card */
.hero-content{
    width:100%;
    max-width:400px;

    background:rgba(22,27,34,.95);
    border:1px solid rgba(255,255,255,.08);

    border-radius:24px;

    padding:30px 20px;

    text-align:center;

    backdrop-filter:blur(10px);

    box-shadow:
        0 10px 30px rgba(0,0,0,.35);
}

.hero-title{
    font-size:2.1rem;
    line-height:1.2;
    margin-bottom:15px;
}

.hero-description{
    font-size:1rem;
    line-height:1.7;
    margin-bottom:25px;
    color:#cbd5e1;
}

.hero-buttons{
    display:flex;
    flex-direction:column;
    gap:12px;
}

.hero-btn{
    width:100%;
    justify-content:center;
    padding:15px;
    border-radius:14px;
}

/* Optional floating glow */
.hero-content::before{
    content:'';
    position:absolute;
    inset:-1px;
    border-radius:24px;
    background:
    linear-gradient(
        135deg,
        rgba(230,57,70,.25),
        transparent
    );
    z-index:-1;
}}

@media (max-width:768px){

/* Reduce section spacing */
.anime-section,
.genres-section{
    padding:35px 0 !important;
}

.section-header{
    margin-bottom:15px !important;
}

.section-title{
    margin-bottom:10px !important;
    font-size:2rem;
}

/* Make cards more compact */
.anime-grid{
    gap:15px !important;
}

.anime-card{
    height:auto !important;
    min-height:unset !important;
}

.anime-card-content{
    padding:10px !important;
}

.anime-card-content h3{
    font-size:18px !important;
    margin-bottom:6px !important;
}

.anime-card-content p{
    margin-bottom:6px !important;
    font-size:14px !important;
}

.anime-meta{
    margin-bottom:8px !important;
}

.btn-outline,
.section-header .btn{
    padding:8px 14px !important;
    font-size:14px !important;
}

/* Remove excessive top spacing before sections */
#trending,
#new-releases,
#popular,
#genres{
    margin-top:0 !important;
}

}
.community-preview{
    margin:50px 0;
    background:#111827;
    padding:25px;
    border-radius:18px;
    border:1px solid rgba(255,255,255,.08);
}

.community-preview h2{
    color:#fff;
    font-size:32px;
    margin-bottom:15px;
}

.community-btn{
    display:inline-block;
    background:#e63946;
    color:white;
    text-decoration:none;
    padding:14px 28px;
    border-radius:12px;
    font-weight:600;
    transition:.3s;
}

.community-btn:hover{
    transform:translateY(-3px);
    background:#ff4b5c;
}
.community-message-link{
    text-decoration:none;
    color:inherit;
    display:block;
}

.community-message{
    cursor:pointer;
    transition:0.3s;
}

.community-message:hover{
    transform:translateX(5px);
    background:rgba(255,255,255,0.05);
}
.community-preview-box{
    margin:20px 0;
    display:flex;
    flex-direction:column;
    gap:12px;
}

.community-comment{
    background:#0f172a;
    border:1px solid rgba(255,255,255,.08);
    border-radius:12px;
    padding:12px;
    text-decoration:none;
    color:white;
    transition:.3s;
}

.community-comment:hover{
    transform:translateY(-2px);
    border-color:#e63946;
    background:#111827;
}

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

.comment-header i{
    font-size:18px;
}

.comment-body{
    color:#ddd;
    font-size:14px;
    line-height:1.5;
}
.notif-badge{
background:red;
color:white;
padding:2px 7px;
border-radius:50%;
font-size:12px;
margin-left:3px;
}
.notification-btn{
position:relative;
display:inline-flex;
align-items:center;
justify-content:center;
font-size:22px;
color:white;
text-decoration:none;
padding:10px;
}

.notification-badge{
position:absolute;
top:0;
right:0;
background:#ff4b5c;
color:white;
min-width:20px;
height:20px;
border-radius:50%;
display:flex;
align-items:center;
justify-content:center;
font-size:11px;
font-weight:bold;
padding:2px;
}
.preview-actions{
display:flex;
gap:10px;
margin-top:12px;
}

.preview-btn{
background:#1f2937;
padding:8px 14px;
border-radius:10px;
color:white;
text-decoration:none;
font-size:14px;
transition:.3s;
}

.preview-btn:hover{
background:#ff4b5c;
}

.home-comment-form{
display:flex;
gap:10px;
margin-top:12px;
}

.home-comment-form input{
flex:1;
background:#111827;
border:1px solid rgba(255,255,255,.08);
padding:10px;
border-radius:10px;
color:white;
}

.home-comment-form button{
background:#ff4b5c;
border:none;
padding:10px 15px;
border-radius:10px;
color:white;
cursor:pointer;
}
.preview-replies{
margin-top:10px;
}

.preview-reply{
background:#111827;
padding:8px 12px;
border-radius:8px;
margin-top:5px;
font-size:14px;
}

.home-comment-form{
    display:flex;
    gap:10px;
    margin-top:12px;
}

.home-comment-form input{
    flex:1;
    background:#1f2937;
    border:none;
    border-radius:10px;
    padding:10px 14px;
    color:white;
}

.home-comment-form button{
    background:#ff4b5c;
    color:white;
    border:none;
    border-radius:10px;
    padding:10px 18px;
    cursor:pointer;
}

.preview-actions{
    display:flex;
    gap:10px;
    margin-top:12px;
}

.preview-btn{
    display:inline-block;
    background:#1f2937;
    color:white;
    text-decoration:none;
    padding:8px 14px;
    border-radius:10px;
    transition:.3s;
}

.preview-btn:hover{
    background:#ff4b5c;
}

.preview-replies{
    margin-top:12px;
}

.preview-reply{
    background:#111827;
    border-left:3px solid #ff4b5c;
    padding:10px;
    border-radius:8px;
    margin-top:8px;
}

.login-comment-btn{
    margin-top:12px;
}


.poll-card{
    background:#151c2f;
    border-radius:16px;
    padding:20px;
    margin-bottom:20px;
}

.poll-option{
    margin:12px 0;
}

.poll-bar{
    height:12px;
    background:#2a3145;
    border-radius:999px;
    overflow:hidden;
}

.poll-fill{
    height:100%;
    background:linear-gradient(
        90deg,
        #ff5f6d,
        #ffc371
    );
}
/* ================= POLLS ================= */

.poll-creator{
display:none;
margin-top:15px;
padding:15px;
background:#1f2937;
border-radius:14px;
}

.poll-creator input{
width:100%;
padding:12px;
margin-bottom:10px;
background:#111827;
border:1px solid rgba(255,255,255,.08);
border-radius:12px;
color:white;
}

.poll-box{
margin-top:15px;
background:#1f2937;
padding:15px;
border-radius:15px;
}

.poll-question{
font-size:17px;
font-weight:700;
margin-bottom:15px;
}

.poll-option{
display:block;
width:100%;
margin-bottom:10px;
padding:12px;
border:none;
background:#111827;
color:white;
border-radius:12px;
cursor:pointer;
text-align:left;
}

.poll-option:hover{
background:#374151;
}

.poll-result{
height:35px;
background:#111827;
border-radius:12px;
overflow:hidden;
margin-bottom:10px;
position:relative;
}

.poll-fill{
height:100%;
background:linear-gradient(
135deg,
#ff4b5c,
#ff6b35
);
}

.poll-label{
position:absolute;
left:12px;
top:8px;
font-size:14px;
}

.poll-votes{
margin-top:10px;
color:#9ca3af;
font-size:14px;
}
/* ==========================
   HOME COMMUNITY PREVIEW
========================== */

.community-card{
    max-width:900px;
    margin:auto;
    background:#111827;
    border-radius:24px;
    padding:25px;
    box-shadow:0 10px 35px rgba(0,0,0,.35);
}

.community-content h2{
    font-size:2rem;
    margin-bottom:10px;
}

.community-content p{
    color:#9ca3af;
    margin-bottom:20px;
}

/* Scrollable Area */

.community-preview-box{
    height:500px;
    overflow-y:auto;
    padding-right:10px;
    margin-bottom:20px;
}

/* Custom Scrollbar */

.community-preview-box::-webkit-scrollbar{
    width:8px;
}

.community-preview-box::-webkit-scrollbar-track{
    background:#1f2937;
    border-radius:20px;
}

.community-preview-box::-webkit-scrollbar-thumb{
    background:#ff4b5c;
    border-radius:20px;
}

/* Comment Card */

.community-comment{
    background:#1f2937;
    padding:18px;
    border-radius:18px;
    margin-bottom:15px;
    transition:.3s;
}

.community-comment:hover{
    transform:translateY(-3px);
}

.comment-header{
    display:flex;
    align-items:center;
    gap:10px;
    margin-bottom:10px;
    font-size:15px;
}

.comment-header i{
    color:#ff4b5c;
    font-size:22px;
}

.comment-body{
    line-height:1.7;
    margin-bottom:15px;
}

/* Actions */

.preview-actions{
    display:flex;
    gap:10px;
    flex-wrap:wrap;
}

.preview-btn{
    text-decoration:none;
    background:#111827;
    color:white;
    padding:8px 14px;
    border-radius:10px;
    transition:.3s;
    font-size:14px;
}

.preview-btn:hover{
    background:#ff4b5c;
}

.liked-btn{
    background:#ff4b5c;
}

/* Replies */

.preview-replies{
    margin-top:15px;
    border-left:3px solid #ff4b5c;
    padding-left:15px;
}

.preview-reply{
    background:#111827;
    padding:10px;
    border-radius:10px;
    margin-bottom:8px;
}

/* Home Comment Box */

.home-comment-form{
    display:flex;
    gap:10px;
    margin-top:15px;
}

.home-comment-form input{
    flex:1;
    padding:12px;
    border:none;
    outline:none;
    border-radius:12px;
    background:#111827;
    color:white;
}

.home-comment-form button{
    background:#ff4b5c;
    border:none;
    color:white;
    padding:12px 16px;
    border-radius:12px;
    cursor:pointer;
}

/* Mobile */

@media(max-width:768px){

    .community-preview-box{
        height:350px;
    }

    .community-card{
        padding:18px;
        border-radius:18px;
    }

    .community-content h2{
        font-size:1.5rem;
    }

}

.community-stats{
    display:flex;
    gap:15px;
    margin-bottom:20px;
}

.stat-box{
    flex:1;
    background:#1f2937;
    padding:15px;
    text-align:center;
    border-radius:14px;
}

.stat-box span{
    display:block;
    font-size:22px;
    font-weight:bold;
    color:#ff4b5c;
}

@media(max-width:768px){

.community-card{
    padding:18px;
}

.community-content{
    width:100%;
}

.community-preview-box{
    width:100%;
}

}

.home-comment-form{
    display:flex;
    gap:10px;
    margin-top:12px;
}

.home-comment-form input{
    flex:1;
    min-width:0;
}

.home-comment-form button{
    flex-shrink:0;
}
.community-preview-box::-webkit-scrollbar{
    width:6px;
}

.community-preview-box::-webkit-scrollbar-track{
    background:#111827;
    border-radius:20px;
}

.community-preview-box::-webkit-scrollbar-thumb{
    background:#ff4b5c;
    border-radius:20px;
}
.community-preview-box{
    max-height:420px;
    overflow-y:auto;
    overflow-x:hidden;

    padding-right:10px;

    display:flex;
    flex-direction:column;
    gap:15px;
}

.community-tabs{
    display:flex;
    gap:10px;
    margin:20px 0;
    overflow-x:auto;
    scrollbar-width:none;
}

.community-tabs::-webkit-scrollbar{
    display:none;
}

.community-tabs button{
    flex:1;
    min-width:90px;
    padding:12px;
    border:none;
    border-radius:12px;
    background:#1f2937;
    color:white;
    font-size:14px;
    white-space:nowrap;
}
@media(max-width:768px){

.home-comment-form{
    flex-direction:column;
}

.home-comment-form button{
    width:100%;
}

}

.community-tabs{
    display:flex;
    flex-wrap:wrap;
    gap:10px;
}

.community-tabs button{
    flex:1 1 calc(50% - 10px);

}

/* Home Page Poll Preview */

.preview-poll-title{
    display:flex;
    align-items:center;
    gap:8px;
    color:#ffd54f;
    font-weight:700;
    margin-bottom:8px;
    font-size:15px;
}

.preview-poll-title i{
    color:#ff4757;
}

.preview-poll-question{
    background:#1b2435;
    padding:12px;
    border-left:4px solid #ff4757;
    border-radius:10px;
    margin-bottom:12px;
    font-weight:600;
    line-height:1.5;
    color:#fff;
}

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

.preview-option{
    background:#111827;
    padding:10px 14px;
    border-radius:10px;
    color:#cbd5e1;
    font-size:14px;
}
.poll-badge{
    display:inline-block;
    margin-left:10px;
    padding:3px 8px;
    border-radius:20px;
    background:linear-gradient(135deg,#ff4757,#ff7b54);
    color:white;
    font-size:11px;
    font-weight:700;
    letter-spacing:.5px;
}
.table-subtitle{
    color:#888;
    margin-top:5px;
}

.modern-table{
    width:100%;
    border-collapse:collapse;
}

.modern-table thead{
    background:#1f2937;
    color:white;
}

.modern-table th{
    padding:16px;
    font-size:14px;
    font-weight:600;
}

.modern-table td{
    padding:18px 15px;
    border-bottom:1px solid #ececec;
    vertical-align:middle;
}

.modern-table tbody tr{
    transition:.25s;
}

.modern-table tbody tr:hover{
    background:#f8fbff;
}

.product-info{
    display:flex;
    align-items:center;
    gap:15px;
}

.product-image{
    width:80px;
    height:80px;
    border-radius:12px;
    object-fit:cover;
    border:2px solid #eee;
}

.product-info h4{
    margin:0;
    font-size:17px;
}

.product-info small{
    color:#888;
}

.rating-stars{
    color:#f39c12;
    font-weight:bold;
    margin-top:5px;
}

.brand-text{
    color:#777;
    margin-top:3px;
}

.category-badge{
    background:#eef4ff;
    color:#2962ff;
    padding:8px 16px;
    border-radius:30px;
    font-size:13px;
    font-weight:600;
}

.store-badge{
    background:#f5f5f5;
    padding:8px 15px;
    border-radius:20px;
}

.price-box{
    display:flex;
    flex-direction:column;
}

.price{
    color:#2ecc71;
    font-weight:bold;
    font-size:18px;
}

.old-price{
    color:#999;
    text-decoration:line-through;
}

.discount{
    color:#ff5722;
    font-size:13px;
    font-weight:bold;
}

.status{
    padding:8px 15px;
    border-radius:25px;
    font-size:13px;
    font-weight:700;
}

.stock{
    background:#d4edda;
    color:#28a745;
}

.out{
    background:#f8d7da;
    color:#dc3545;
}

.preorder{
    background:#fff4d2;
    color:#ff9800;
}

.featured{
    color:#ff9800;
    font-weight:bold;
}

.not-featured{
    color:#aaa;
}

.action-buttons{
    display:flex;
    gap:8px;
}

.action-buttons a{
    width:38px;
    height:38px;
    display:flex;
    justify-content:center;
    align-items:center;
    border-radius:8px;
    text-decoration:none;
    color:white;
    transition:.3s;
}

.view-btn{
    background:#00bcd4;
}

.edit-btn{
    background:#ffc107;
    color:black !important;
}

.delete-btn{
    background:#e53935;
}

.action-buttons a:hover{
    transform:translateY(-3px);
    opacity:.9;
}

.empty-box{
    text-align:center;
    padding:70px;
}

.empty-box i{
    font-size:70px;
    color:#bdbdbd;
}

.empty-box h2{
    margin-top:20px;
}

.table-header{
    display:flex;
    justify-content:space-between;
    align-items:center;
    margin-bottom:20px;
}

@media(max-width:900px){

.product-image{
    width:60px;
    height:60px;
}

.modern-table th,
.modern-table td{
    padding:10px;
    font-size:13px;
}

.product-info h4{
    font-size:15px;
}

}