/* MOBILE (Below 768px) */
        @media (max-width: 768px) {
            .Related-File {
                text-align: center;
            }

            .main-header {
                padding: 10px 20px;
            }

            .mobile-menu-toggle {
                display: flex;
                /* Show hamburger menu */
            }

            .nav-menu {
                display: none;
                /* You would use JS to toggle this class 'active' */
                width: 100%;
                position: absolute;
                top: 70px;
                left: 0;
                background: rgb(74, 74, 74);
                box-shadow: 0 5px 5px rgba(0, 0, 0, 0.1);
            }

            .nav-menu ul {
                flex-direction: column;
                padding: 20px;
            }



            .song-lyrics {
                text-align: center;
                /* Common for lyrics on mobile */
            }
        }

        /* Hide the checkbox itself */
        .menu-checkbox {
            display: none;
        }

        /* Mobile Setup (Default state for small screens) */
        @media (max-width: 768px) {
            .main-header {
                position: relative;
            }

            .nav-menu {
                display: block;
                /* Change from none to block */
                position: absolute;
                top: 100%;
                /* Sits right under the header */
                left: 0;
                width: 100%;
                background: #226ea1;
                max-height: 0;
                /* Initially collapsed */
                overflow: hidden;
                transition: max-height 0.4s ease-in-out;
                box-shadow: 0 10px 15px rgba(0, 0, 0, 0.1);
                z-index: 999;
            }

            .nav-menu ul {
                flex-direction: column;
                padding: 0;
            }

            .nav-menu li {
                border-bottom: 1px solid #fff8f8;
            }

            .nav-menu li a {
                display: block;
                padding: 15px 20px;
            }

            /* THE MAGIC: When checkbox is checked, expand the menu */
            .menu-checkbox:checked~.nav-menu {
                max-height: 300px;
                /* Adjust based on your menu height */
            }

            /* Optional: Animate the hamburger to an 'X' */
            .menu-checkbox:checked~.mobile-menu-toggle .bar:nth-child(1) {
                transform: translateY(8px) rotate(45deg);
            }

            .menu-checkbox:checked~.mobile-menu-toggle .bar:nth-child(2) {
                opacity: 0;
            }

            .menu-checkbox:checked~.mobile-menu-toggle .bar:nth-child(3) {
                transform: translateY(-8px) rotate(-45deg);
            }

            .mobile-menu-toggle {
                display: flex;
                /* Show the bars on mobile */
                flex-direction: column;
                gap: 5px;
                cursor: pointer;
            }

            .mobile-menu-toggle .bar {
                width: 25px;
                height: 3px;
                background: #fff9f9;
                transition: 0.3s;
            }
        }

        /* Desktop State (Ensure menu is always visible on PC) */
        @media (min-width: 769px) {
            .nav-menu {
                display: block !important;
                max-height: none !important;
            }

            .mobile-menu-toggle {
                display: none;
            }
        }

.end-marker {
    text-align: center;
    margin-top: 3rem;
    padding-top: 2rem;
    margin-bottom: 3rem;
    border-top: 1px solid #E5E7EB;
    color: var(--text-light);
    font-weight: 500;
    letter-spacing: 1px;
}
        .slyrics {
           
            white-space: normal; padding: 8px;
        }

        /* 1. Hide the radio logic */
        input[name="main-tabs"] {
            display: none;
        }

        /* 2. Tab Bar Styling */
        .tab-menu {
            display: flex;
            gap: 5px;


        }

        .tab-menu label {
            padding: 12px 20px;
            cursor: pointer;
            font-weight: 600;
            color: #272b30;
            background: #f1f5f9;
            border-radius: 8px 8px 0 0;
            transition: 0.2s ease;

        }

        /* 3. The "IF" Active State (Always highlights one button) */
        #tab1:checked~.tab-menu label[for="tab1"],
        #tab2:checked~.tab-menu label[for="tab2"],
        #tab3:checked~.tab-menu label[for="tab3"] {
            background: #0f77d6;
            color: #fff;
        }

        /* 4. Panel Display Logic */
        .panel {
            display: none;
            /* Everything hidden by default */
            padding: 30px;
            background: #fff;

            border-top: none;
        }

        /* If input 1 is checked, show panel 1 (and so on) */
        #tab1:checked~.tab-panels #panel1,
        #tab2:checked~.tab-panels #panel2,
        #tab3:checked~.tab-panels #panel3 {
            display: block;
        }

        /* 1. Basic Setup */
        input[name="main-tabs"] {
            display: none;
        }

        .panel {
            white-space: normal;
            
            padding: 20px;
        }

        /* 2. THE LOGIC: Hide the menu by default */
        .tab-menu {
            display: none;
            gap: 10px;
            margin-bottom: 10px;

        }

        /* 3. IF logic: If tab1 is NOT the only radio button, show the menu */
        /* We check if #tab1 has a sibling radio button (#tab2) */
        #tab1~#tab2~.tab-menu {
            display: flex;
        }

        /* 4. Display the active panel */
        #tab1:checked~.tab-panels #panel1,
        #tab2:checked~.tab-panels #panel2,
        #tab3:checked~.tab-panels #panel3 {
            display: block;
        }

        /* 5. Style the active tab button */
        #tab1:checked~.tab-menu .btn1,
        #tab2:checked~.tab-menu .btn2,
        #tab3:checked~.tab-menu .btn3 {
            background: #e91e63;
            color: #ffffff;
            border-radius: 5px;
        }

        .tab-menu label {
            padding: 10px 20px;
            background: #e3e3e3;
            border:solid 1px #eee;
            cursor: pointer;
            font-weight: bold;
        }

        .tab-menu {
            display: flex;
            justify-content: center;
            /* This centers the tabs horizontally */
            flex-wrap: wrap;
            /* Allows tabs to wrap to a new line on small screens */
            gap: 10px;
            /* Space between tab buttons */
            margin-bottom: 0;
            /* Align tight to the panel if needed */
        }

        @media (max-width: 600px) {
            .tab-menu {
                gap: 5px;
                /* Tighter gap on mobile */
            }

            .tab-menu label {
                padding: 10px 15px;
                /* Slightly smaller padding */
                font-size: 14px;
                /* Smaller text for small screens */
                flex: 1 1 auto;
                /* Optional: makes tabs grow to fill width equally */
                text-align: center;
            }
        }

        .space {
            padding: 20Px;
        }


        /* 1. Base Styles (Mobile First) */
        .dynamic-grid {
            display: grid;
            /* By default, show 1 column for mobile */
            grid-template-columns: 1fr;
            gap: 20px;
            padding: 15px;
        }

        /* 2. Tablet View (Screens wider than 600px) */
        @media screen and (min-width: 600px) {
            .dynamic-grid {
                /* Show 2 columns */
                grid-template-columns: repeat(2, 1fr);
                gap: 24px;
            }
        }

        /* 3. Desktop/PC View (Screens wider than 1024px) */
        @media screen and (min-width: 1024px) {
            .dynamic-grid {
                /* Show 3 columns */
                grid-template-columns: repeat(3, 1fr);
                max-width: 1200px;
                margin: 0 auto;
                /* Centers the grid on large screens */
            }
        }

        /* 4. Extra Large Screens (Optional - wider than 1400px) */
        @media screen and (min-width: 1400px) {
            .dynamic-grid {
                /* Show 4 columns */
                grid-template-columns: repeat(4, 1fr);
            }
        }

        /* 1. Base Styles (Mobile First) */
        .cat-post-grid {
            display: grid;
            /* By default, show 1 column for mobile */
            grid-template-columns: 1fr;
            gap: 20px;
            padding: 15px;
        }

        /* 2. Tablet View (Screens wider than 600px) */
        @media screen and (min-width: 600px) {
            .cat-post-grid {
                /* Show 2 columns */
                grid-template-columns: repeat(2, 1fr);
                gap: 24px;
            }
        }

        /* 3. Desktop/PC View (Screens wider than 1024px) */
        @media screen and (min-width: 1024px) {
            .cat-post-grid {
                /* Show 3 columns */
                grid-template-columns: repeat(2, 1fr);
                max-width: 1200px;
                margin: 0 auto;
                /* Centers the grid on large screens */
            }
        }

        /* 4. Extra Large Screens (Optional - wider than 1400px) */
        @media screen and (min-width: 1400px) {
            .cat-post-grid {
                /* Show 4 columns */
                grid-template-columns: repeat(2, 1fr);
            }
        }

        .my-post-card {
            background: #ffffff;
            border-radius: 12px;
            overflow: hidden;
            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
            transition: transform 0.3s ease;
            display: flex;
            flex-direction: column;
        }

        .my-post-card:hover {
            transform: translateY(-5px);
        }

        .my-post-image img {
            width: 100%;
            height: 150px;
            object-fit: cover;
            /* Keeps aspect ratio perfect */
            display: block;
        }

        .my-post-content {
            padding: 5px;
            flex-grow: 1;
            /* Ensures buttons align even with different text lengths */
            display: flex;
            flex-direction: column;
        }

        .album-tag {
            font-size: 12px;
            text-transform: uppercase;
            color: #007bff;
            font-weight: bold;
            margin-bottom: 8px;
        }

        .my-post-content h2 {
            font-size: 18px;
            margin: 0px;
            color: #333;
            font-weight: 600;
        }

        .my-post-content p {
            font-size: 0.9rem;
            color: #666;
            line-height: 1.5;
            text-align: center;
        }

        td a {
            color: rgb(56, 12, 233);
            text-decoration: none;
        }

        .Related-File {
            margin-left: 25px;
            padding: 8px;
            font-size: 26px;
            font-weight: 600;
        }

        .error {
            background-color: #e0f0ff;
            color: #0233a4;
            padding: 20px;
            border-left: #0d0398 solid 4px;
            border-radius: 15px 0 0 15px;
        }



        .my-post-list {
            background: #ffffff;
            padding: 5px;
            border: #ffffff 1px solid;
            border-radius: 14px;
        }


        .sidebar-title {
            background: rgb(17, 90, 114);
            padding: 8px;
            border: 1px solid #000000;
            border-radius: 14px;
            color: white;
            margin-bottom: 10px;
            font-weight: bold;
        }

        .homecat-title {
            background: rgb(17, 90, 114);
            padding: 8px;
            border: 1px solid #000000;
            border-radius: 14px;
            color: white;
            margin-bottom: 10px;
            font-weight: bold;
            text-align: center;
        }

        .fileName {
            font-weight: bold;
        }

        .fileName span {
            color: #555;
            text-decoration: none;
        }

        .fileName img {}

        .fl:hover {
            border: 1px solid #c1c4c7;
           transform: translateY(-4px);
            box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
        }
        
       

        .fl {
           background: var(--bg-card);
            
            margin-bottom: 15px;
            border-radius: 12px;
            border: 1px solid #e5e7eb;
            transition: transform 0.4s ease, box-shadow 0.2s ease;
            
        }

        .fl a {
            vertical-align: middle;
        }

        .fl img {
            
    display: block;
            transition: transform 0.3s ease;
            border: 1px solid #bbb;
            border-radius: 10px;
            width: 120px;
            height: 100px;
        }
        
        

        .fl div {
            display: table-cell;
        }

        .fl {
            background: #fff;
            border-radius: 14px;
        }

        .fl span {
            font-weight: normal;
        }

        .fl span.alb {
            font-weight: 500;
            color: #67b241;
        }

        .fl span.ar {
            color: #2c2927;
            font-size: 13.5px;
        }
         
         
        .fl span.title {
            font-weight: bold;
            font-size: 17px;
            color: #3c3a3a;
            margin-right: 3px;
        }

        .fl a {
            display: block;
            padding: 8px;
        }

        .fl a img {
            margin-right: 15px;
            vertical-align: middle;
        }

        .fl a div div {
            vertical-align: middle;
            display: table-cell;
        }

        .fl a div {
            vertical-align: middle;
        }


        .filelist {
            background: rgb(17, 90, 114);
            padding: 8px;
            border: 1px solid #000000;
            border-radius: 14px;
            color: #ffffff;
            margin-bottom: 10px;
            font-weight: bold;
        }