body { font-family: 'Segoe UI', sans-serif; background: #f0f4f8; padding: 15px; margin: 0; }
        .filter-card { background: white; padding: 15px; border-radius: 12px; margin-bottom: 20px; display: flex; gap: 10px; justify-content: center; box-shadow: 0 4px 6px rgba(0,0,0,0.05); }
        .report-card { background: white; border-radius: 12px; padding: 15px; box-shadow: 0 10px 25px rgba(0,0,0,0.1); }
        
        .scroll-container { overflow-x: auto; border: 1px solid #e0e6ed; border-radius: 8px; }
        table { border-collapse: collapse; width: 100%; min-width: 1200px; }
        
        /* Table Headers (Dates) */
        thead th { 
            background: linear-gradient(180deg, #4facfe 0%, #00f2fe 100%);
            color: white; 
            padding: 12px 5px;
            font-size: 14px;
            border: 1px solid rgba(255,255,255,0.3);
        }

        td { 
            width: 45px; padding: 12px 5px; text-align: center; 
            border: 1px solid #eef2f7; font-size: 14px;
            background: #fff;
        }
        
        /* Sticky Column (N/D) */
        .sticky-col { 
            position: sticky; left: 0; background: #1a73e8 !important; 
            color: white !important; font-weight: bold; z-index: 10;
            box-shadow: 2px 0 5px rgba(0,0,0,0.1);
        }

        /* AJ KI DATE KA COLOR (Today Highlight) */
        .today-highlight { 
            background-color: #fff9c4 !important; /* Light Yellow */
            border-left: 2px solid #fbc02d;
            border-right: 2px solid #fbc02d;
            font-weight: bold;
        }
        th.today-highlight { background: #fbc02d !important; color: #000 !important; }

         /* DOUBLE NUMBER RED COLOR */
        .double-num { color: #e74c3c !important; font-weight: bold; }
        .p-text { color: #2ecc71; font-weight: bold; }
        .a-text { color: #e74c3c; font-weight: bold; }
        
        select, button { padding: 10px; border-radius: 6px; border: 1px solid #dcdfe6; }
        button { background: #1a73e8; color: white; border: none; cursor: pointer; font-weight: 600; }
        /* --- NOTICE BOARD STYLES --- */
        .notice-board {
            margin-top: 20px;
            background: linear-gradient(135deg, #a1c4fd 0%, #c2e9fb 100%); /* Blue-ish gradient */
            padding: 25px;
            border-radius: 12px;
            box-shadow: 0 10px 25px rgba(0,0,0,0.15);
            color: #333;
            text-align: center;
        }
        .notice-board h1 {
            font-size: 24px;
            color: #004d99; /* Darker blue for heading */
            margin-top: 0;
            margin-bottom: 15px;
            font-weight: 700;
            text-shadow: 1px 1px 2px rgba(255,255,255,0.5);
        }
        .notice-board p {
            font-size: 16px;
            line-height: 1.6;
            color: #003366; /* Even darker blue for text */
            max-width: 800px;
            margin: 0 auto 15px auto;
        }
        .notice-board .notice-date {
            font-size: 15px;
            color: #003366;
            opacity: 0.8;
            font-style: italic;
        }
        /* Sticky Glassmorphism Header */
    .main-header {
        position: sticky;
        top: 0;
        z-index: 1000;
        background: rgba(255, 255, 255, 0.9);
        backdrop-filter: blur(10px);
        border-bottom: 1px solid rgba(0, 0, 0, 0.05);
        padding: 10px 0;
        box-shadow: 0 2px 15px rgba(0,0,0,0.03);
    }

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

    .logo-section {
        display: flex;
        align-items: center;
        gap: 12px;
    }

    /* Chota Iconic PB Logo */
    .pb-logo-small {
        background: linear-gradient(135deg, #004aad, #009efd);
        color: white;
        font-weight: 900;
        padding: 8px 12px;
        border-radius: 12px;
        font-size: 18px;
        letter-spacing: -1px;
        box-shadow: 0 4px 10px rgba(0, 74, 173, 0.2);
    }

    .domain-info {
        display: flex;
        flex-direction: column;
    }

    .domain-name {
        margin: 0;
        font-size: 20px;
        font-weight: 800;
        color: #1a202c;
        letter-spacing: -0.5px;
        line-height: 1;
    }

    .domain-name span {
        color: #007bff; /* Domain extension ka color alag */
        font-weight: 600;
    }

    .tagline {
        font-size: 10px;
        color: #718096;
        text-transform: uppercase;
        letter-spacing: 1px;
        font-weight: 600;
        margin-top: 2px;
    }

    /* Live Indicator Style */
    .header-right {
        display: flex;
        align-items: center;
    }

    .live-indicator {
        background: #f0fff4;
        color: #38a169;
        font-size: 10px;
        padding: 4px 10px;
        border-radius: 20px;
        font-weight: 700;
        display: flex;
        align-items: center;
        gap: 5px;
        border: 1px solid #c6f6d5;
    }

    .dot {
        height: 6px;
        width: 6px;
        background-color: #38a169;
        border-radius: 50%;
        display: inline-block;
        animation: blink 1.5s infinite;
    }

    @keyframes blink {
        0% { opacity: 1; }
        50% { opacity: 0.3; }
        100% { opacity: 1; }
    }

    /* Mobile Responsive */
    @media (max-width: 480px) {
        .domain-name { font-size: 18px; }
        .tagline { font-size: 8px; }
        .live-indicator { display: none; } /* Mobile par space bachane ke liye hide */
    }
        /* Sab kuch ek box ke andar */
    .main-board-container {
        background: #fcfcfc;
        border: 1px solid #eee;
        border-radius: 25px;
        padding: 20px 10px;
        margin: 15px auto;
        max-width: 500px; /* Mobile width ke liye sahi hai */
    }

    .top-row-center {
        display: flex;
        justify-content: center;
        gap: 10px;
        margin-bottom: 10px;
    }

    .bottom-grid {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 12px;
    }

    .test-item {
        background: #ffffff;
        border-radius: 18px;
        text-align: center;
        padding: 10px 5px;
        box-shadow: 0 4px 12px rgba(0,0,0,0.04);
        border: 1px solid #f1f1f1;
    }

    .featured {
        width: 44%;
        padding: 18px 5px;
        border: 1.5px solid #eef2f7;
    }

    .score-circle {
        width: 45px;
        height: 45px;
        line-height: 45px;
        border-radius: 50%;
        margin: 3px auto 0;
        color: black;
        font-weight: 800;
        font-size: 16px;
        box-shadow: 0 4px 10px rgba(0,0,0,0.12);
    }

    /* All Color Gradients */
    .blue   { background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%); }
    .green  { background: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%); }
    .orange { background: linear-gradient(135deg, #f6d365 0%, #fda085 100%); }
    .purple { background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); }
    .pink   { background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%); }
    .cyan   { background: linear-gradient(135deg, #2af598 0%, #009efd 100%); }
    .teal   { background: linear-gradient(135deg, #02aab0 0%, #00cdac 100%); }
    .indigo { background: linear-gradient(135deg, #3949ab 0%, #5c6bc0 100%); }

    .test-name { font-size: 11px; color: #999; font-weight: 700; text-transform: uppercase; }
    .board-title { text-align: center; font-size: 18px; color: #a0aec0; margin-bottom: 20px; letter-spacing: 1px; }
    .date { text-align: center; font-size: 16px; color: #ff0000; margin-bottom: 20px; letter-spacing: 1px; }
    .menu-section { padding: 20px; }
    .menu-title { font-size: 16px; color: #4a5568; margin-bottom: 15px; font-weight: bold; }

    .menu-grid {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
    }

    .menu-item {
        text-decoration: none;
        padding: 18px 10px;
        border-radius: 18px;
        display: flex;
        flex-direction: column;
        align-items: center;
        transition: 0.2s;
        border: 1px solid rgba(255,255,255,0.3);
    }

    .icon-circle {
        width: 45px;
        height: 45px;
        background: rgba(255, 255, 255, 0.2);
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 22px;
        margin-bottom: 10px;
    }

    .menu-item span {
        font-size: 15px;
        font-weight: bold;
        color: black; /* Colorful cards par white text achha lagta hai */
    }

    /* --- Button Colors --- */
    .card-blue { background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%); box-shadow: 0 4px 12px rgba(79, 172, 254, 0.3); }
    .card-green { background: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%); box-shadow: 0 4px 12px rgba(67, 233, 123, 0.3); }
    .card-orange { background: linear-gradient(135deg, #fa709a 0%, #fee140 100%); box-shadow: 0 4px 12px rgba(250, 112, 154, 0.3); }
    .card-purple { background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3); }

    /* Click Effect */
    .menu-item:active { transform: scale(0.92); }
    
    /* Active indicator for current page */
    .menu-item.active 
    /* Footer Styling */
    footer {
        background-color: #1a202c; /* Dark Navy Blue */
        color: #e2e8f0;
        padding: 10px 20px 20px 20px;
        margin-top: 20px;
        border-radius: 20px 20px 20px 20px;
    }

    .footer-content {
        max-width: 1200px;
        margin: 0 auto;
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
        gap: 30px;
    }

    .footer-section h4 {
        color: #4facfe;
        margin-bottom: 15px;
        font-size: 18px;
        text-transform: uppercase;
        letter-spacing: 1px;
    }

    .footer-section p {
        font-size: 14px;
        line-height: 1.6;
        color: #a0aec0;
    }

    .footer-links {
        list-style: none;
        padding: 0;
    }

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

    .footer-links a {
        color: #a0aec0;
        text-decoration: none;
        font-size: 14px;
        transition: color 0.3s;
    }

    .footer-links a:hover {
        color: #ffffff;
    }

    .footer-bottom {
        text-align: center;
        margin-top: 30px;
        padding-top: 20px;
        border-top: 1px solid #2d3748;
        font-size: 13px;
        color: #718096;
        font-weight: bold;
    }

    /* Mobile adjustments */
    @media (max-width: 600px) {
        .footer-content {
            text-align: center;
        }
    }