* { margin: 0; padding: 0; box-sizing: border-box; }
        body { font-family: 'Segoe UI', Arial, sans-serif; background: #fff; color: #333; line-height: 1.4; }
footer *{font-size:15px;}
        header { background: #006699; padding: 0px; text-align: center; border-bottom: 2px solid #fff; }
        .banner-img { width: 100%; max-width: 600px; display: block; margin: 0 auto; height: 65px; }
        
        .site-info { background: #f0f7fa; padding: 8px; text-align: center; border-bottom: 1px solid #ccc; }
        .site-info a { color: #006699; text-decoration: none; font-weight: bold; font-size: 14px; display: block; margin: 5px 0; }

        .search-area { padding: 4px; background: #006699; text-align: center; border: 1px dashed #fff; }
        .search-box { display: inline-flex; width: 95%; max-width: 500px; }
        .search-box input { flex: 1; padding: 6px; border: 1px solid #ccc; border-radius: 2px 0 0 2px; outline: none; }
        .search-box button { padding:6px 15px; background: #eee; border: 1px solid #ccc; border-left: none; border-radius: 0 2px 2px 0; cursor: pointer; font-weight: bold; }

        .section-title { background: #e8f4fd; color: #d35400; padding: 8px; text-align: center; font-weight: bold; border-top: 1px solid #ccc; border-bottom: 1px solid #ccc; font-size: 16px; position: relative; }
        .view-toggle { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); background: #006699; color: #fff; border: none; padding: 6px 12px; border-radius: 4px; cursor: pointer; font-size: 14px; display: flex; align-items: center; gap: 5px; }
        .view-toggle:hover { background: #004d73; }

        .posts-grid { display: grid; grid-template-columns: 1fr; gap: 0; }
        @media (min-width: 768px) {
            .posts-grid { grid-template-columns: repeat(3, 1fr); gap: 10px; padding: 10px; }
            .post-card { border: 1px solid #ddd; border-radius: 4px; }
        }
        
        /* Grid Mode - 2 Column */
        .posts-grid.grid-mode { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; padding: 10px; }
        @media (min-width: 768px) {
            .posts-grid.grid-mode { grid-template-columns: repeat(4, 1fr); }
        }
        .posts-grid.grid-mode .post-card { flex-direction: column; border: 1px solid #ddd; border-radius: 4px; text-align: center; }
        .posts-grid.grid-mode .post-card .thumb { width: 100%; }
        .posts-grid.grid-mode .post-card .thumb img { width: 100%; height: auto; aspect-ratio:2/3;}
        .posts-grid.grid-mode .post-card .info { width: 100%; }
        
        .post-card { display: flex; padding: 8px; border-bottom: 1px solid #eee; text-decoration: none; align-items: flex-start; gap: 10px; cursor: pointer; }
        .post-card:nth-child(even) { background: #fafafa; }
        .post-card .thumb img { width: 65px; height: 85px; max-width: 100%; object-fit: cover; border: 1px solid #ddd; padding: 2px; background: #fff; }
        .post-card .info { flex: 1; }
        .post-card .title { font-size: 15px; font-weight: bold; margin-bottom: 4px; line-height: 1.3; }
        .post-card .badge { display: inline-block; padding: 2px 8px; border-radius: 10px; color: #fff; font-size: 11px; font-weight: bold; margin-top: 2px; }

        .cat-header { background: #d9e9f2; padding: 8px; text-align: center; font-weight: bold; color: #006699; border-top: 2px solid #ccc; }
        .cat-item { display: flex; align-items: center; padding: 12px 15px; border-bottom: 1px solid #eee; text-decoration: none; color: #006699; font-weight: bold; font-size: 14px; background: #fff; border: none; width: 100%; text-align: left; cursor: pointer; }
        .cat-item span { margin-right: 10px; font-size: 18px; }

        #detail-view { display: none; }
        #detail-view.active { display: block; background: #fff; }
        
        .action-bar { display: flex; justify-content: space-between; align-items: center; padding: 10px; background: #eee; border-bottom: 1px solid #ddd; }
        .btn-back, .btn-share { padding: 6px 12px; border: none; border-radius: 4px; cursor: pointer; font-weight: bold; display: flex; align-items: center; gap: 5px; }
        .btn-back { background: #444; color: #fff; }
        .btn-share { background: #25D366; color: #fff; }

        .movie-full-title { color: #006699; font-weight: bold; padding: 10px; text-align: center; background: #e8f4fd; font-size: 15px; border-bottom: 1px solid #ccc; }
        .movie-poster { text-align: center; padding: 15px; }
        .movie-poster img { max-width: 250px; width: 85%; border: 1px solid #ccc; border-radius: 4px; box-shadow: 0 0 10px rgba(0,0,0,0.1); }
        
        .file-info-box { padding: 10px; font-size: 13px; }
        .info-header { color: #FF0000; text-align: center; font-weight: bold; margin: 15px 0; font-size: 18px; }
        .info-row { margin-bottom: 6px; border-bottom: 1px dashed #eee; padding-bottom: 4px; }
        .info-label { color: #d35400; font-weight: bold; }
        .info-value { color: #0000FF; }

        .dl-section-head { background: #006699; color: #fff; text-align: center; padding: 8px; font-weight: bold; margin-top: 15px; }
        .download-area { text-align: center; padding: 25px 10px; }
        .main-dl-btn { background: #e91e63; color: #fff; padding: 15px 20px; border-radius: 4px; text-decoration: none; font-weight: bold; display: inline-block; width: 95%; max-width: 450px; font-size: 16px; border-bottom: 4px solid #c2185b; cursor: pointer; }

        .worker-links-container { margin: 15px 10px; padding: 10px; background: #f9f9f9; border: 2px solid #006699; border-radius: 8px; display: none; }
        .dlink { margin: 8px 0; background: #000; border-radius: 5px; overflow: hidden; }
        .dlink button { display: block; width: 100%; border: none; background: transparent; padding: 12px; color: #fff; text-decoration: none; text-align: center; font-weight: bold; cursor: pointer; font-size: 14px; }

        /* Popup Styles */
        #link-popup { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.8); z-index: 1000; align-items: center; justify-content: center; }
        .popup-content { background: #fff; width: 95%; max-width: 600px; height: 80vh; border-radius: 8px; overflow: hidden; display: flex; flex-direction: column; position: relative; }
        .popup-header { background: #006699; color: #fff; padding: 10px; display: flex; justify-content: space-between; align-items: center; }
        .popup-body { flex: 1; overflow: auto; padding: 10px; }
        .close-popup { font-size: 24px; cursor: pointer; color: #fff; font-weight: bold; }

        .ss-title { background: #006699; color: #fff; text-align: center; padding: 8px; font-weight: bold; margin-top: 15px; }
        .ss-container { padding: 10px; text-align: center; }
        .ss-container img { width: 100%; max-width: 500px; margin-bottom: 10px; border-radius: 4px; }

        .related-box { margin-top: 20px; border-top: 2px solid #ccc; }
        .related-title { background: #d9e9f2; padding: 10px; text-align: center; font-weight: bold; color: #006699; border-bottom: 1px solid #ccc; }

        .spinner { border: 4px solid #f3f3f3; border-top: 4px solid #006699; border-radius: 50%; width: 40px; height: 40px; animation: spin 1s linear infinite; margin: 20px auto; }
        @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }
        .hidden { display: none !important; }

        /* Skeleton Loading */
        .skeleton-card { display: flex; padding: 8px; border-bottom: 1px solid #eee; align-items: flex-start; gap: 10px; background: #fff; }
        @media (min-width: 768px) {
            .skeleton-card { border: 1px solid #ddd; border-radius: 4px; }
        }
        .skeleton-thumb { width: 65px; height: 85px; background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%); background-size: 200% 100%; animation: loading 1.5s infinite; border-radius: 2px; }
        .skeleton-info { flex: 1; }
        .skeleton-title { height: 16px; background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%); background-size: 200% 100%; animation: loading 1.5s infinite; border-radius: 4px; margin-bottom: 8px; width: 80%; }
        .skeleton-badge { height: 20px; width: 50px; background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%); background-size: 200% 100%; animation: loading 1.5s infinite; border-radius: 10px; }
        @keyframes loading { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }

        .toast { position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%); background: #333; color: #fff; padding: 10px 20px; border-radius: 20px; font-size: 12px; z-index: 2000; display: none; }
        
        
        
        
        
        
        
  .container {
            background: #fff;
            padding: 20px;
            border-radius: 8px;
            box-shadow: 0 4px 8px rgba(0,0,0,0.1);
            text-align: center;
            max-width: 400px;
            width: 100%;
        }
        .title {
            font-size: 24px;
            margin-bottom: 10px;
            color: #333;
        }
        .info {
            font-size: 16px;
            margin-bottom: 20px;
            color: #555;
        }

.button, .button1, .button2, .button3, .button4, .button5, .button6 {
    color: #fff;
    padding: 10px 20px;
    text-decoration: none;
    border-radius: 5px;
    font-size: 16px;
    display: inline-block;
    margin: 5px;
    transition: background-color 0.3s ease;
}

/* Primary button */
.button {
    background-color: #007bff;
}
.button:hover {
    background-color: #0056b3;
}

/* Secondary button */
.button1 {
    background-color: #28a745;
}
.button1:hover {
    background-color: #218838;
}

/* Danger button */
.button2 {
    background-color: #dc3545;
}
.button2:hover {
    background-color: #c82333;
}

/* Warning button */
.button3 {
    background-color: #ffc107;
    color: #333;
}
.button3:hover {
    background-color: #e0a800;
}

/* Info button */
.button4 {
    background-color: #17a2b8;
}
.button4:hover {
    background-color: #138496;
}

/* Success button */
.button5 {
    background-color: #28a745; /* Same as button1 for consistency */
    color: #fff; /* Ensuring text is white */
}
.button5:hover {
    background-color: #218838; /* Darker green on hover */
}

/* Link button */
.button6 {
    background-color: transparent;
    color: #007bff; /* Blue text */
    border: 2px solid #007bff; /* Blue border */
}
.button6:hover {
    background-color: #007bff; /* Blue background on hover */
    color: #fff; /* White text on hover */
}

        .not-found {
            color: #ff0000;
        }
      
footer .button {  background-color: #4CAF50; /* Green */  border: none;  color: white;  padding: 3px 8px;  text-align: center;  text-decoration: none;  display: inline-block;  font-size: 12px;  margin: 4px 2px;  cursor: pointer;}footer .button1 {  background-color: white;   color: black;   border: 2px solid #4CAF50;}  footer .button2 {  background-color: white;   color: black;   border: 2px solid #008CBA;}footer .button3 {  background-color: white;   color: black;   border: 2px solid #f44336;} footer .button4 {  background-color: white;  color: black;  border: 2px solid #e7e7e7;} footer .button5 {  background-color: white;  color: black;  border: 2px solid #555555;}