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

 body {
     font-family: 'Rajdhani', sans-serif;
     background: #000;
     min-height: 100vh;
     padding: 20px;
     color: #fff;
     position: relative;
     overflow-x: hidden;
 }

 body::before {
     content: '';
     position: fixed;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     background:
         radial-gradient(circle at 20% 50%, rgba(255, 0, 0, 0.1) 0%, transparent 50%),
         radial-gradient(circle at 80% 50%, rgba(255, 215, 0, 0.1) 0%, transparent 50%);
     animation: bgPulse 8s ease-in-out infinite;
     z-index: -1;
 }

 @keyframes bgPulse {

     0%,
     100% {
         opacity: 0.5;
     }

     50% {
         opacity: 1;
     }
 }

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

 .top-banner {
     background: linear-gradient(135deg, #FFD700, #FFA500, #FF0000);
     padding: 25px;
     text-align: center;
     font-size: 32px;
     font-weight: 900;
     border-radius: 20px;
     margin-bottom: 30px;
     box-shadow:
         0 0 40px rgba(255, 215, 0, 0.6),
         0 0 80px rgba(255, 0, 0, 0.4),
         inset 0 0 20px rgba(255, 255, 255, 0.2);
     animation: bannerGlow 3s ease-in-out infinite;
     text-transform: uppercase;
     letter-spacing: 3px;
     border: 3px solid #FFD700;
 }

 @keyframes bannerGlow {

     0%,
     100% {
         box-shadow:
             0 0 40px rgba(255, 215, 0, 0.6),
             0 0 80px rgba(255, 0, 0, 0.4),
             inset 0 0 20px rgba(255, 255, 255, 0.2);
     }

     50% {
         box-shadow:
             0 0 60px rgba(255, 215, 0, 0.9),
             0 0 120px rgba(255, 0, 0, 0.6),
             inset 0 0 30px rgba(255, 255, 255, 0.3);
     }
 }

 .logo-section {
     background: linear-gradient(145deg, #1a1a1a, #000);
     padding: 40px;
     border-radius: 25px;
     text-align: center;
     margin-bottom: 40px;
     border: 3px solid #FFD700;
     box-shadow:
         0 0 30px rgba(255, 215, 0, 0.4),
         inset 0 0 30px rgba(255, 215, 0, 0.1);
     position: relative;
     overflow: hidden;
 }

 .logo-section::before {
     content: '';
     position: absolute;
     top: -50%;
     left: -50%;
     width: 200%;
     height: 200%;
     background: linear-gradient(45deg,
             transparent 30%,
             rgba(255, 215, 0, 0.1) 50%,
             transparent 70%);
     animation: shine 3s infinite;
 }

 @keyframes shine {
     0% {
         transform: translateX(-100%) translateY(-100%) rotate(45deg);
     }

     100% {
         transform: translateX(100%) translateY(100%) rotate(45deg);
     }
 }

 .logo-section h1 {
     font-size: 56px;
     font-weight: 900;
     background: linear-gradient(45deg, #FFD700, #FFA500, #FF0000, #FFD700);
     background-size: 300% 300%;
     -webkit-background-clip: text;
     -webkit-text-fill-color: transparent;
     background-clip: text;
     animation: gradientShift 3s ease infinite;
     text-shadow: 0 0 30px rgba(255, 215, 0, 0.5);
     letter-spacing: 5px;
     position: relative;
 }

 @keyframes gradientShift {

     0%,
     100% {
         background-position: 0% 50%;
     }

     50% {
         background-position: 100% 50%;
     }
 }

 .live-badge {
     display: inline-block;
     background: #FF0000;
     color: #fff;
     padding: 10px 30px;
     border-radius: 50px;
     font-size: 20px;
     font-weight: 700;
     margin: 20px 0;
     box-shadow: 0 0 30px rgba(255, 0, 0, 0.8);
     animation: livePulse 1.5s infinite;
     border: 2px solid #FFD700;
 }

 @keyframes livePulse {

     0%,
     100% {
         transform: scale(1);
         box-shadow: 0 0 30px rgba(255, 0, 0, 0.8);
     }

     50% {
         transform: scale(1.05);
         box-shadow: 0 0 50px rgba(255, 0, 0, 1);
     }
 }

 .live-badge i {
     animation: blink 1s infinite;
 }

 @keyframes blink {

     0%,
     100% {
         opacity: 1;
     }

     50% {
         opacity: 0.3;
     }
 }

 .date-display {
     background: linear-gradient(135deg, #1a1a1a, #2a2a2a);
     padding: 20px;
     border-radius: 15px;
     text-align: center;
     font-size: 28px;
     font-weight: 700;
     margin-bottom: 40px;
     border: 2px solid #FFD700;
     box-shadow: 0 0 25px rgba(255, 215, 0, 0.3);
     color: #FFD700;
     font-family: 'Orbitron', sans-serif;
 }

 .section-header {
     background: linear-gradient(90deg, transparent, #FFD700, transparent);
     padding: 20px;
     text-align: center;
     font-size: 36px;
     font-weight: 900;
     margin: 50px 0 30px 0;
     color: #000;
     text-transform: uppercase;
     letter-spacing: 4px;
     border-radius: 10px;
     box-shadow: 0 0 40px rgba(255, 215, 0, 0.6);
     animation: headerPulse 2s infinite;
 }

 @keyframes headerPulse {

     0%,
     100% {
         transform: scaleX(1);
     }

     50% {
         transform: scaleX(1.02);
     }
 }

 .results-table {
     width: 100%;
     border-collapse: separate;
     border-spacing: 0;
     background: linear-gradient(145deg, #1a1a1a, #000);
     border-radius: 20px;
     overflow: hidden;
     box-shadow:
         0 0 40px rgba(255, 215, 0, 0.3),
         inset 0 0 30px rgba(0, 0, 0, 0.5);
     border: 3px solid #FFD700;
     margin-bottom: 50px;
 }

 .results-table thead {
     background: linear-gradient(135deg, #FFD700, #FFA500);
     color: #000;
 }

 .results-table th {
     padding: 25px;
     font-size: 24px;
     font-weight: 900;
     text-transform: uppercase;
     letter-spacing: 2px;
     border-bottom: 3px solid #FF0000;
     text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
 }

 .results-table tbody tr {
     border-bottom: 1px solid rgba(255, 215, 0, 0.2);
     transition: all 0.3s ease;
 }

 .results-table tbody tr:hover {
     background: linear-gradient(90deg, transparent, rgba(255, 215, 0, 0.2), transparent);
     transform: scale(1.02);
     box-shadow: 0 5px 20px rgba(255, 215, 0, 0.4);
 }

 .results-table td {
     padding: 25px;
     font-size: 20px;
     font-weight: 700;
     text-align: center;
     border: 1px solid rgba(255, 215, 0, 0.1);
 }

 .results-table td:last-child {
     border-right: none;
 }

 .baji-cell {
     color: #FFD700;
     font-size: 22px;
     font-weight: 900;
     text-shadow: 0 0 10px rgba(255, 215, 0, 0.5);
 }

 .time-cell {
     color: #FFA500;
     font-family: 'Orbitron', sans-serif;
 }

 .result-cell,
 .number-cell {
     font-family: 'Orbitron', sans-serif;
     font-size: 32px;
     font-weight: 900;
     color: #FF0000;
     text-shadow:
         0 0 10px rgba(255, 0, 0, 0.8),
         0 0 20px rgba(255, 0, 0, 0.5);
     letter-spacing: 3px;
     animation: numberGlow 2s ease-in-out infinite;
     position: relative;
 }

 @keyframes numberGlow {

     0%,
     100% {
         text-shadow:
             0 0 10px rgba(255, 0, 0, 0.8),
             0 0 20px rgba(255, 0, 0, 0.5);
     }

     50% {
         text-shadow:
             0 0 20px rgba(255, 0, 0, 1),
             0 0 40px rgba(255, 0, 0, 0.8),
             0 0 60px rgba(255, 215, 0, 0.3);
     }
 }

 .record-table {
     width: 100%;
     border-collapse: separate;
     border-spacing: 0 15px;
     margin-bottom: 40px;
 }

 .record-row {
     background: linear-gradient(135deg, #1a1a1a, #0a0a0a);
     border: 2px solid #FFD700;
     border-radius: 15px;
     overflow: hidden;
     box-shadow: 0 0 25px rgba(255, 215, 0, 0.2);
     transition: all 0.4s ease;
     animation: slideIn 0.5s ease-out backwards;
 }

 @keyframes slideIn {
     from {
         opacity: 0;
         transform: translateX(-50px);
     }

     to {
         opacity: 1;
         transform: translateX(0);
     }
 }

 .record-row:hover {
     transform: translateX(10px) scale(1.02);
     box-shadow:
         0 0 40px rgba(255, 215, 0, 0.5),
         0 0 80px rgba(255, 0, 0, 0.3);
     border-color: #FF0000;
 }

 .record-date {
     background: linear-gradient(135deg, #FFD700, #FFA500);
     color: #000;
     padding: 20px 30px;
     font-size: 22px;
     font-weight: 900;
     text-align: center;
     font-family: 'Orbitron', sans-serif;
     letter-spacing: 2px;
     box-shadow: inset 0 0 20px rgba(0, 0, 0, 0.2);
 }

 .record-results {
     display: grid;
     grid-template-columns: repeat(8, 1fr);
     gap: 1px;
     background: #FFD700;
     padding: 1px;
 }

 .record-item {
     background: #0a0a0a;
     padding: 20px 10px;
     text-align: center;
     transition: all 0.3s ease;
 }

 .record-item:hover {
     background: linear-gradient(135deg, #1a1a1a, #2a2a2a);
     transform: scale(1.1);
     z-index: 10;
     box-shadow: 0 0 30px rgba(255, 215, 0, 0.6);
 }

 .record-time {
     font-size: 14px;
     color: #FFA500;
     margin-bottom: 8px;
     font-weight: 700;
 }

 .record-number {
     font-family: 'Orbitron', sans-serif;
     font-size: 20px;
     font-weight: 900;
     color: #FF0000;
     text-shadow: 0 0 10px rgba(255, 0, 0, 0.6);
 }

 .refresh-btn {
     display: block;
     margin: 40px auto;
     padding: 20px 60px;
     font-size: 24px;
     font-weight: 900;
     background: linear-gradient(135deg, #FFD700, #FF0000);
     color: #000;
     border: 3px solid #FFD700;
     border-radius: 50px;
     cursor: pointer;
     transition: all 0.3s ease;
     box-shadow: 0 0 40px rgba(255, 215, 0, 0.6);
     text-transform: uppercase;
     letter-spacing: 3px;
 }

 .refresh-btn:hover {
     transform: scale(1.1) rotate(2deg);
     box-shadow:
         0 0 60px rgba(255, 215, 0, 0.9),
         0 0 100px rgba(255, 0, 0, 0.5);
 }

 .refresh-btn:active {
     transform: scale(0.95);
 }

 .refresh-btn i {
     animation: rotate 2s linear infinite;
 }

 @keyframes rotate {
     from {
         transform: rotate(0deg);
     }

     to {
         transform: rotate(360deg);
     }
 }

 .scroll-btn {
     position: fixed;
     right: 30px;
     padding: 15px 25px;
     background: linear-gradient(135deg, #FFD700, #FF0000);
     color: #000;
     border: 2px solid #FFD700;
     border-radius: 50px;
     cursor: pointer;
     font-weight: 900;
     font-size: 16px;
     box-shadow: 0 0 30px rgba(255, 215, 0, 0.6);
     transition: all 0.3s ease;
     z-index: 1000;
 }

 .scroll-btn:hover {
     transform: scale(1.1);
     box-shadow: 0 0 50px rgba(255, 215, 0, 0.9);
 }

 .scroll-top {
     bottom: 30px;
 }

 .scroll-bottom {
     bottom: 100px;
 }

 .footer {
     background: linear-gradient(135deg, #1a1a1a, #000);
     padding: 50px 40px;
     text-align: center;
     border-radius: 20px;
     margin-top: 60px;
     border: 3px solid #FFD700;
     box-shadow: 0 0 40px rgba(255, 215, 0, 0.3);
 }

 .footer-content {
     max-width: 1000px;
     margin: 0 auto;
 }

 .footer-logo {
     font-size: 42px;
     font-weight: 900;
     background: linear-gradient(45deg, #FFD700, #FFA500);
     -webkit-background-clip: text;
     -webkit-text-fill-color: transparent;
     background-clip: text;
     margin-bottom: 20px;
     letter-spacing: 3px;
 }

 .footer a {
     color: #FFD700;
     text-decoration: none;
     font-weight: 900;
     font-size: 20px;
     text-shadow: 0 0 10px rgba(255, 215, 0, 0.5);
     transition: all 0.3s ease;
 }

 .footer a:hover {
     color: #FF0000;
     text-shadow: 0 0 20px rgba(255, 0, 0, 0.8);
 }

 .footer p {
     margin: 15px 0;
     color: #FFA500;
     font-size: 18px;
     font-weight: 600;
 }

 .footer-divider {
     width: 80%;
     height: 2px;
     background: linear-gradient(90deg, transparent, #FFD700, transparent);
     margin: 25px auto;
 }

 .contact-info {
     background: rgba(255, 215, 0, 0.1);
     border: 2px solid #FFD700;
     border-radius: 15px;
     padding: 25px;
     margin: 25px auto;
     max-width: 600px;
 }

 .contact-info h3 {
     color: #FFD700;
     font-size: 24px;
     margin-bottom: 15px;
     text-transform: uppercase;
 }

 .contact-info p {
     color: #FF0000;
     font-weight: 900;
     font-size: 24px;
     margin: 10px 0;
 }

 .disclaimer-footer {
     background: rgba(255, 0, 0, 0.1);
     border: 2px solid #FF0000;
     border-radius: 15px;
     padding: 25px;
     margin: 25px auto;
     max-width: 800px;
 }

 .disclaimer-footer h3 {
     color: #FF0000;
     font-size: 22px;
     margin-bottom: 15px;
 }

 .disclaimer-footer p {
     color: #FFA500;
     font-size: 16px;
     line-height: 1.6;
 }

 .social-links {
     margin: 25px 0;
     display: flex;
     justify-content: center;
     gap: 20px;
     flex-wrap: wrap;
 }

 .social-links a {
     display: inline-block;
     padding: 12px 25px;
     background: linear-gradient(135deg, #FFD700, #FF0000);
     color: #000;
     border-radius: 10px;
     font-size: 16px;
     font-weight: 700;
     transition: all 0.3s ease;
     box-shadow: 0 0 20px rgba(255, 215, 0, 0.4);
 }

 .social-links a:hover {
     transform: translateY(-5px);
     box-shadow: 0 0 30px rgba(255, 215, 0, 0.8);
 }

 .copyright {
     margin-top: 30px;
     padding-top: 25px;
     border-top: 2px solid rgba(255, 215, 0, 0.3);
 }

 .copyright p {
     color: #FFD700;
     font-size: 16px;
 }

 .loading {
     display: none;
     position: fixed;
     top: 50%;
     left: 50%;
     transform: translate(-50%, -50%);
     z-index: 9999;
 }

 .spinner {
     width: 80px;
     height: 80px;
     border: 6px solid rgba(255, 215, 0, 0.3);
     border-top: 6px solid #FFD700;
     border-radius: 50%;
     animation: spin 1s linear infinite;
     box-shadow: 0 0 40px rgba(255, 215, 0, 0.8);
 }

 @keyframes spin {
     0% {
         transform: rotate(0deg);
     }

     100% {
         transform: rotate(360deg);
     }
 }

 @media (max-width: 768px) {
     body {
         padding: 10px;
     }

     .top-banner {
         font-size: 18px;
         padding: 15px;
         letter-spacing: 1px;
     }

     .logo-section h1 {
         font-size: 36px;
         letter-spacing: 3px;
     }

     .logo-section p {
         font-size: 14px !important;
     }

     .live-badge {
         font-size: 16px;
         padding: 8px 20px;
     }

     .date-display {
         font-size: 18px;
         padding: 15px;
     }

     .section-header {
         font-size: 20px;
         padding: 15px;
         letter-spacing: 2px;
     }

     .results-table th,
     .results-table td {
         padding: 12px 8px;
         font-size: 14px;
     }

     .result-cell,
     .number-cell {
         font-size: 20px;
     }

     .baji-cell {
         font-size: 16px;
     }

     .time-cell {
         font-size: 14px;
     }

     /* Mobile responsive for record table */
     .record-table {
         border-spacing: 0 10px;
     }

     .record-row {
         display: block;
         margin-bottom: 20px;
     }

     .record-row td {
         display: block;
         width: 100%;
     }

     .record-date {
         border-radius: 15px 15px 0 0;
         font-size: 18px;
         padding: 15px;
     }

     .record-results {
         grid-template-columns: repeat(4, 1fr);
         gap: 1px;
         border-radius: 0 0 15px 15px;
     }

     .record-item {
         padding: 12px 5px;
     }

     .record-time {
         font-size: 11px;
         margin-bottom: 5px;
     }

     .record-number {
         font-size: 16px;
     }

     .refresh-btn {
         padding: 15px 40px;
         font-size: 18px;
         letter-spacing: 2px;
     }

     .scroll-btn {
         padding: 12px 20px;
         font-size: 14px;
         right: 15px;
     }

     .scroll-top {
         bottom: 20px;
     }

     .scroll-bottom {
         bottom: 80px;
     }

     .footer {
         padding: 30px 20px;
     }

     .footer-logo {
         font-size: 28px;
         letter-spacing: 2px;
     }

     .footer a {
         font-size: 16px;
     }

     .footer p {
         font-size: 14px;
     }

     .contact-info h3 {
         font-size: 18px;
     }

     .contact-info p {
         font-size: 18px;
     }

     .disclaimer-footer h3 {
         font-size: 16px;
     }

     .disclaimer-footer p {
         font-size: 13px;
     }

     .social-links {
         gap: 10px;
     }

     .social-links a {
         padding: 10px 15px;
         font-size: 14px;
     }
     .mainlogo img {
        width: 214px;
        height: auto;
    }
 }

 @media (max-width: 480px) {
     .top-banner {
         font-size: 14px;
         padding: 12px;
     }

     .logo-section h1 {
         font-size: 28px;
     }

     .section-header {
         font-size: 18px;
         padding: 12px;
     }

     .record-results {
         grid-template-columns: repeat(2, 1fr);
     }

     .record-item {
         padding: 15px 8px;
     }

     .record-time {
         font-size: 12px;
     }

     .record-number {
         font-size: 18px;
     }

     .refresh-btn {
         padding: 12px 30px;
         font-size: 16px;
     }
 }