body{

    background-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTQ4MCIgaGVpZ2h0PSI2NTAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+ICAgIDxwYXRoIGQ9Ik03MzEuMjA3IDY0OS44MDJDOTM1LjQ4NCA2NDIuMTQgMTQ4MCAzMzcuMzI1IDE0ODAgMTgwLjg4OGMwLTE1Ni40MzgtMzA5Ljc0NC0zNi4wNTUtNzIwLTM2LjA1NVMwLTE3NC40ODMgMCAxMzUuMTQ0YzAgMzA5LjYyNyA1MjYuOTMgNTIyLjMyIDczMS4yMDcgNTE0LjY1OHoiIGZpbGw9IiNGNkY4RkEiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvc3ZnPg==);
    /*background-size: 1140px 500px; 
	    background-size: 2257px 743px;*/
		background-size: 4256px 943px;
    background-repeat: no-repeat;
}


        :root {
            --primary-color: #3498db;
            --success-color: #2ecc71;
            --danger-color: #e74c3c;
            --text-color: #2c3e50;
            --light-gray: #f5f7fa;
            --medium-gray: #7f8c8d;
            --white: #ffffff;
            --shadow: 0 2px 5px rgba(0,0,0,0.1);
            --shadow-hover: 0 4px 8px rgba(0,0,0,0.15);
            --transition: all 0.3s ease;
        }
        
 

/*
h1.title {
    text-align: center;
    margin-bottom: 12px;
    position: relative;
    padding-bottom: 10px;
    margin-top: 44px;
    font-size: 26px;
    text-shadow: 0px 2px 2px #5c5c5c;
    /* text-shadow: -1px 2px 20px #5c5c5c; * /
}  */

h1.title {
    text-align: center;
    margin-bottom: 12px;
    position: relative;
    padding-bottom: 10px;
    margin-top: 44px;
    font-size: 26px;
    text-shadow: 0px 2px 2px #5c5c5c;
   
}

span.titlesir {
    font-size: 25px;
    margin-bottom: 10px;
    color: #adadad;
    font-weight: 700;
}

.day-numberp {
    font-size: 18px;
    font-weight: bold;
    color: #4e1283;
    margin-top: 1px;
    /* width: 123px; */
}


        h1::after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 50%;
            transform: translateX(-50%);
            width: 100px;
            height: 3px;
            background: #a15fe7;
        }
        
      .days-group {
    display: flex;
    flex-wrap: wrap;
    gap: 11px;
    margin-bottom: 30px;
    justify-content: center;
}
     .day-box {
    width: 82px;
    height: 49px;
    /*background-color: var(--white); */
      background-color: #e5d8ff;
    border-radius: 8px;
    box-shadow: var(--shadow);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: var(--transition);
    position: relative;
    overflow: hidden;
    font-size: 16px;
    box-shadow: 2px 3px 3px 0px rgb(0 0 0 / 22%);
}
        
        .day-box:hover {
            transform: translateY(-3px);
            box-shadow: var(--shadow-hover);
        }
        
      /*  .day-box.completed {
            background-color: #e8f5e9;
            border-left: 4px solid var(--success-color);
        } */
        .day-box.completed {
            background-color: #bcf7c1;
            border-left: 4px solid #27b563;
        }
        .day-box.completed::after {
            content: "✓";
            position: absolute;
            top: 5px;
            right: 5px;
            color: var(--success-color);
            font-weight: bold;
        }
		
		 .day-box.locked {
            opacity: 0.7;
            cursor: not-allowed;
        }
        
        .day-box.locked::after {
            content: "🔒";
            position: absolute;
            top: 5px;
            right: 5px;}
        
        
        .day-box.current {
            animation: pulse 2s infinite;
        }
        
        @keyframes pulse {
            0% { box-shadow: 0 0 0 0 rgba(52, 152, 219, 0.4); }
            70% { box-shadow: 0 0 0 10px rgba(52, 152, 219, 0); }
            100% { box-shadow: 0 0 0 0 rgba(52, 152, 219, 0); }
        }
        
        .day-number {
            font-weight: bold;
            font-size: 13px;
        }
        
        .day-status {
            font-size: 12px;
            color: var(--medium-gray);
            margin-top: 3px;
        }
        
        .test-details-container {
            margin-top: 30px;
        }
        
        .test-details {
                background-color: #f9dab3;
            border-radius: 8px;
            box-shadow: var(--shadow);
            padding: 20px;
            margin-bottom: 30px;
            opacity: 0;
            transform: translateY(20px);
            transition: opacity 0.5s ease, transform 0.5s ease;
                box-shadow: 0 4px 10px rgb(0 0 0 / 34%);
        }
        
        .test-details.active {
            opacity: 1;
            transform: translateY(0);
        }
        
        .test-details h3 {
            margin-top: 0;
            border-bottom: 1px solid #eee;
            padding-bottom: 10px;
            color: var(--primary-color);
        }
		
		h3.nutesttitle {
    font-size: 23px;
        color: #a86cc7;}
		
		
h4.subtesttitle {
    font-size: 21px;
    color: #8d8a8f;
}


h4.testopic {
    font-size: 16px;
    color: #8d8d8d;
}
        
        .test-content {
            margin-bottom: 15px;
            display: flex;
            flex-wrap: wrap;
            gap: 20px;
        }
        
        .subject-column {
            flex: 1;
            /* min-width: 250px; */
            min-width: 217px;
        }
        
        .test-section {
            margin-bottom: 15px;
            padding-left: 15px;
            border-left: 3px solid var(--primary-color);
        }
        
        .test-section h4 {
            margin-bottom: 8px;
        }
        
        .test-actions {
            display: flex;
            gap: 15px;
            margin-top: 20px;
        }
        
        .action-btn {
          
            color: var(--white);
            border: none;
            border-radius: 5px;
            font-size: 16px;
            cursor: pointer;
            text-decoration: none;
            display: inline-block;
            text-align: center;
            /*flex: 1;*/
            transition: var(--transition);
        }
        
        .action-btn:hover {
            transform: translateY(-2px);
            box-shadow: var(--shadow-hover);
        }
        
		
		.action-btn.locked {
    background-color: var(--medium-gray);
    cursor: not-allowed;
    border: none;
    border-radius: 50px;
    font-size: 16px;
    cursor: pointer;
    text-decoration: none;
    text-align: center;
    transition: var(--transition);
    width: 21%;
       background: linear-gradient(90deg,rgb(127 140 141) 0%, rgb(149 149 149) 50%, rgb(127 140 141) 100%);
    color: #ffffff;
    box-shadow: inset 1px -1px 12px 0px rgb(150 160 161);
    padding: 6px 16px;
}
		.action-btn.locked:hover {
    background: linear-gradient(90deg,rgb(193 193 193) 0%, rgb(127 140 141) 50%, rgb(181 183 183) 100%); }

		
        .action-btn.start-test {
            background-color: var(--success-color); */
    border: none;
    border-radius: 50px;
    font-size: 16px;
    cursor: pointer;
    text-decoration: none;
    text-align: center;
    transition: var(--transition);
     width: 15%; 
    background: linear-gradient(90deg,rgb(59 181 119) 0%, rgb(0 229 37) 50%, rgb(77 187 139) 100%);
    color: #ffffff;
    box-shadow: inset 1px 1px 15px 0px rgb(148 143 151);
    padding: 6px 16px
        }
        
		.action-btn.start-test:hover {
    background: linear-gradient(90deg,rgb(19 220 57) 0%, rgb(69 192 122) 50%, rgb(23 216 56) 100%);
}
		
        .action-btn.view-result {
          background-color: var(--primary-color); */
    padding: 5px 0px;
    /* color: var(--white); */
    border: none;
    border-radius: 50px;
    font-size: 16px;
    cursor: pointer;
    text-decoration: none;
    text-align: center;
    transition: var(--transition);
   /* width: 15%; */
    background: linear-gradient(90deg,rgb(155 89 182) 0%, rgb(190 143 219) 50%, rgb(159 93 191) 100%);
    color: #ffffff;
    box-shadow: inset 1px -1px 12px 0px rgb(156 92 189 / 69%);
	padding: 6px 16px;
        }
        
	  .action-btn.view-result:hover {	
		background: linear-gradient(90deg,rgb(189 140 218) 0%, rgb(161 97 193) 50%, rgb(188 140 217) 100%);}
		
        .login-prompt {
            color: var(--danger-color);
            font-weight: bold;
            margin-top: 15px;
            display: none;
        }
        
        .group-title {
            text-align: center;
            margin: 30px 0 15px;
            color: var(--medium-gray);
            font-size: 18px;
            position: relative;
        }
        
        .group-title::before,
        .group-title::after {
            content: '';
            position: absolute;
            top: 50%;
            width: 30%;
            height: 1px;
            background: linear-gradient(to right, transparent, var(--medium-gray), transparent);
        }
        
        .group-title::before {
            left: 0;
        }
        
        .group-title::after {
            right: 0;
        }
        
        .scroll-top {
            position: fixed;
            bottom: 20px;
            right: 20px;
                background-color: #9e95d9;
            color: var(--white);
            width: 50px;
            height: 50px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            opacity: 0;
            transition: var(--transition);
            z-index: 1000;
            box-shadow: var(--shadow);
        }
        
        .scroll-top:hover {
            background-color: #996cc5;
            transform: translateY(-3px);
        }
        
        .scroll-top.visible {
            opacity: 1;
        }
        
        .progress-tracker {
                position: fixed;
    top: 172px;
    right: 11px;
    /*background-color: var(--white);*/
        background-color: #fbd8ab;
    padding: 6px 10px;
    border-radius: 20px;
    box-shadow: var(--shadow);
    font-size: 14px;
    z-index: 1000;
        }



  /*      ********************************* Join telegrame ****************************    */    
  
   .tg-inline-btn {
                display: inline-flex;
                align-items: center;
                justify-content: center;
                width: 25px;
                height: 25px;
                border-radius: 50%;
                background: linear-gradient(135deg, #229ED9, #0088cc);
                cursor: pointer;
                transition: all 0.3s ease;
                box-shadow: 0 4px 10px rgba(0,136,204,0.4);
                position: relative;
                overflow: hidden;
                margin-top: 1px;
            }

            /* Hover animation */
            .tg-inline-btn:hover {
                transform: scale(1.15) rotate(5deg);
                box-shadow: 0 6px 18px rgba(0,136,204,0.6);
            }

            /* Icon */
           .tg-inline-btn svg {
    width: 19px;
    height: 12px;
    fill: #fff;
    z-index: 2;
}

b.jtele {
    color: #8844d1;
    font-weight: 500;
}

.date-rangep {
display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 15px;
    padding: 3px 10px;
    border-radius: 20px;
    text-decoration: none;
    /* color: #5A4BDA; */
    background: #F3F1FF;
    border: 1px solid #E0DBFF;
    transition: all 0.2s ease;
    height: 36px;
}
            /* Soft pulse glow */
            .tg-inline-btn::after {
                content: "";
                position: absolute;
                width: 100%;
                height: 100%;
                border-radius: 50%;
                background: rgba(0,136,204,0.3);
                animation: pulse 2s infinite;
                z-index: 3;
            }

            @keyframes pulse {
                0% {
                    transform: scale(1);
                    opacity: 0.6;
                }

                70% {
                    transform: scale(1.4);
                    opacity: 0;
                }

                100% {
                    opacity: 0;
                }
            }
       /*      ********************************************************************************    */











         @media (max-width: 440px) {
.action-btn.locked {width: 47%; }
            .action-btn.start-test {width: 40%; }
.action-btn.view-result {width: 40%; }

		 .action-btn.locked {width: 51%;}
	 }
        @media (max-width: 768px) {
            .days-group {
                gap: 10px;
            }
            
            .day-box {
                width: 100px;
                height: 50px;
            }
            
            .group-title::before,
            .group-title::after {
                width: 20%;
            }
            
            .progress-tracker {
                font-size: 12px;
				padding: 8px 12px;
				position: fixed;
				top: 172px;
				right: 11px;
                 }
            
            .subject-column {
                min-width: 100%;
            }
                  
        }