/* ========== RESET & BASE ========== */



* {



    box-sizing: border-box;



    margin: 0;



    padding: 0;



}







body {



    max-width: 1800px;



    margin: 0px;



    font-family: 'Tajawal', sans-serif;



    background-color: #f5eef6;



}







@media screen and (max-width: 768px) {



    body {



        max-width: 700px;



        width: 100%;



    }



}







html {



    display: flex;



    align-items: center;



    background-color: #f5eef6;



    justify-content: center;



}







/* ========== TYPOGRAPHIE ========== */



@font-face {



    font-family: 'Tajawal';



    src: url('fonts/Tajawal-Regular.ttf') format('truetype');



    font-weight: normal;



    font-style: normal;



}







@font-face {



    font-family: 'Garamond';



    src: url('fonts/garamond.ttf') format('truetype');



    font-weight: normal;



    font-style: normal;



}







/* ========== NAVIGATION ========== */



nav {



    width: 100%;



    margin: 0;



    background-color: #f4b084;



    text-align: center;



    display: flex;



    justify-content: center;



    height: 50px;



    position: relative;



}







@media screen and (max-width: 768px) {



    nav {



        max-width: 700px;



    }



}







nav ul {



    list-style-type: none;



    margin: 0px;



    padding: 0;



}







nav ul::after {



    content: "";



    display: table;



    clear: both;



}







nav ul li {



    float: left;



    min-width: 193px;



    text-align: center;



    position: relative;



}







nav a {



    display: block;



    text-decoration: none;



    font-weight: bold;



    color: white;



    border-bottom: 2px solid transparent;



    padding: 10px 0px;



    font-family: 'Tajawal';



    font-size: 1.1em;



    height: 50px;



    transition: all 0.3s ease;



}







nav a:hover {



    color: white;



    border-bottom: 2px solid white;



    background-color: #a8a1df;



}







.deroulant > a::after {



    content: "\0025BE ";



    font-size: 20px;



    color: white;



}







.sous {



    display: none;



    box-shadow: 0px 1px 2px #CCC;



    background-color: #a8a1df;



    position: absolute;



    width: 100%;



    z-index: 1000;



}







nav > ul li:hover .sous {



    display: block;



    animation: fadeIn 0.3s ease;



}







.sous li {



    float: none;



    width: 75%;



    text-align: left;



    font-size: 0.9em;



}







.sous a {



    padding: 10px;



    border-bottom: none;



}







.sous a:hover {



    border-bottom: none;



    background-color: #87255f;



}







/* ========== HEADER & BANDES ========== */



header {



    display: flex;



    flex-direction: column;



    justify-content: center;



    align-items: center;



}







@media screen and (max-width: 768px) {



    header {



        max-width: 90%;



    }



}







#bande_blanc {



    display: flex;



    color: black;



    height: 35px;



    width: 100%;



    justify-content: center;



    align-items: center;



    background-color: rgb(255 255 255);



    margin-top: 0px;



    margin-bottom: 0px;



    border-bottom: 1px solid #e89e09;



    margin: 0px;



}







#bande_blanc p, #bande_blanc div {



    margin: 13px;



}







#bande_blanc p a {



    color: #87255f;



    padding-left: 10px;



    text-decoration: none;



    font-size: 1.1em;



    border-left: 1px solid white;



    border-right: 1px solid white;



    padding-right: 10px;



    font-family: Garamond;



    transition: color 0.3s ease;



}







#bande_blanc p a:hover {



    color: #e89e09;



}







#bande_rouge {



    display: flex;



    background-color: lightgray;



    color: black;



    height: 65px;



    justify-content: center;



    align-items: center;



    border-bottom: 1px solid #16284c;



    width: 100%;



    margin: 0;



    font-size: 1.05em;



    font-family: garamond;



}







.contenu {



    display: flex;



    width: 100%;



    justify-content: center;



    align-items: center;



    border-top: 1px solid white;



    border-bottom: 1px solid white;



    background-color: #078ca1;



    height: 40px;



    position: fixed;



    z-index: 1000;



    margin-top: 0;



    margin-bottom: 0;



    font-family: Tajawal;



}







/* ========== SECTION PRINCIPALE ========== */



section {



    background-color: #f5eef6;



    min-height: 512px;



    display: flex;



    flex-direction: column;



    align-items: center;



    font-family: 'Tajawal';



    padding: 20px;



}







/* ========== TABLEAUX ========== */



table {



    border-collapse: collapse;



}







.math11 td {



    min-width: 40px;



    height: 10px;



    text-align: center;



}







.math11 td a {



    display: block;



    width: 100%;



    height: 100%;



}







.math11 td:hover {



    background-color: #87255f;



    border-bottom: 3px solid #531539;



    border-right: 1px solid #531539;



}







.acti {



    background-color: #f8a64a;



    border-bottom: 3px solid #a57137;



    border-right: 1px solid #a57137;



}







.deac {



    border-bottom: 3px solid #5548b5;



    background-color: #a8a1df;



    border-right: 1px solid #5548b5;



}







/* ========== CURSUS ========== */



.cursus {



    margin: 0px;



}







.pixel {



    display: flex;



    justify-content: center;



    align-items: center;



}







.trim1, .trim2, .trim3, .trim0 {



    display: flex;



    align-items: center;



    justify-content: center;



}







.cercle_cursus {



    width: 40px;



    height: 40px;



    border-radius: 30%;



    border-bottom: 1px solid #5548b5;



    background-color: #a8a1df;



    border-right: 1px solid #5548b5;



    transition: all 0.3s ease;



}







.cercle_cursus:hover {



    border-bottom: 1px solid #5548b5;



    background-color: #87255f;



    border-right: 1px solid #5548b5;



    transform: scale(1.05);



}







.second {



    width: 100%;



    height: 100%;



    display: flex;



    align-items: center;



    justify-content: center;



    color: white;



    text-decoration: none;



}







.separtiv {



    background-color: white;



    padding: 2px;



    width: auto;



    height: 50px;



}







/* ========== TABLEAUX SPÉCIFIQUES ========== */



.table_affiche td, .table_affiche th {



    height: 50px;



    padding: 5px;



    font-weight: bold;



    width: auto;



    max-width: 500px;



    padding-left: 10px;



    padding-right: 10px;



    font-size: 0.9em;



    font-weight: normal;



}







.table_affiche th {



    background-color: rgb(244,176,132);



    color: white;



    border-bottom: 2px solid;



    border-top: 2px solid;



}







.table_affiche a {



    color: #07195d;



    text-decoration: none;



    transition: all 0.3s ease;



}







.table_affiche a:hover {



    color: #87255f;



    text-decoration: underline;



}







/* ========== FORMULAIRES ========== */



#inscription2 input {



    width: 300px;



    height: 35px;



    text-align: center;



    font-size: 1em;



    border-radius: 10px;



    border: 1px solid #ccc;



    transition: all 0.3s ease;



}







#inscription2 input:focus {



    border-color: #87255f;



    outline: none;



    box-shadow: 0 0 5px rgba(135,37,95,0.3);



}







#inscription2 select {



    width: 310px;



    height: 45px;



    text-align: center;



    font-size: 1em;



    border-radius: 10px;



    border: 1px solid #ccc;



    transition: all 0.3s ease;



}







#inscription2 select:focus {



    border-color: #87255f;



    outline: none;



    box-shadow: 0 0 5px rgba(135,37,95,0.3);



}







#inscription2 label {



    display: inline-block;



    width: 200px;



    text-align: end;



    font-family: 'Tajawal';



}







/* ========== ANNONCES & AFFICHAGE ========== */



.ann_aff {



    background-color: white;



    width: 600px;



    padding: 10px;



    border-radius: 8px;



    box-shadow: 0 2px 5px rgba(0,0,0,0.1);



}







/* ========== LIENS ========== */



#first {



    color: white;



    text-decoration: none;



    transition: color 0.3s ease;



}







#first:hover {



    color: white;



}







/* ========== FOOTER ========== */



footer {



    display: flex;



    flex-direction: column;



    justify-content: center;



    align-items: center;



    margin-top: 40px;



}







#pied_de_page {



    font-family: garamond;



    width: 95%;



    background-color: #080707;



    display: flex;



    color: white;



    align-items: center;



    padding: 20px;



    border-radius: 8px;



}







/* ========== GROUPES ET RÉSULTATS ========== */



#groupes-container {



    display: flex;



    flex-wrap: wrap;



    gap: 20px;



    justify-content: center;



}







.groupe {



    border: 1px solid #ddd;



    padding: 15px;



    margin-bottom: 20px;



    border-radius: 5px;



    background-color: #f9f9f9;



    width: 335px;



    margin: 10px;



    direction: rtl;



    transition: all 0.3s ease;



}







.groupe:hover {



    box-shadow: 0 5px 15px rgba(0,0,0,0.1);



    transform: translateY(-2px);



}







.groupe h3 {



    color: #1a237e;



    text-align: center;



    font-size: 1.5em;



}







.matiere {



    margin: 8px 0;



    display: flex;



    align-items: center;



    justify-content: space-between;



}







.matiere-nom {



    width: 200px;



    text-align: right;



}







.note-container {



    display: flex;



    align-items: center;



}







.resultats {



    margin: 10px;



    padding: 10px;



    background-color: #e9f7ef;



    border-radius: 5px;



    text-align: center;



    border: 1px solid #cad7d0;



}







.resultats h2 {



    color: #1a237e;



    text-align: center;



    font-size: 1.5em;



}







.moyenne-groupe {



    font-weight: bold;



    color: #2e7d32;



    margin-top: 10px;



    text-align: center;



    font-size: 1.5em;



}







.moyenne-generale {



    font-size: 1.2em;



    font-weight: bold;



    color: #1b5e20;



}







/* ========== TABLEAUX TARIFICATION ========== */



.tarification_table {



    border: 2px solid #1836b2;



    font-family: 'Tajawal';



    font-size: 0.9em;



    font-weight: normal;



    width: 100%;



}







.tarification_table th {



    background-color: rgb(7 140 161);



    border: 2px solid #ffffff;



    color: white;



    font-size: 1.05em;



    padding: 10px;



}







.tarification_table td {



    padding-top: 10px;



    padding-bottom: 10px;



    border: 2px solid #fefeff;



    text-align: center;



    padding: 8px;



}







/* ========== BANDEAUX ========== */



.bande_noir {



    width: 100%;



    background-color: #a8a1df;



    height: 40px;



    text-align: center;



    font-size: 0.9em;



    display: flex;



    justify-content: center;



    align-items: center;



    margin-bottom: 0px;



}







.bande_noir2 {



    background-color: white;



    height: 180px;



    text-align: center;



    font-size: 0.8em;



    display: flex;



    justify-content: center;



    align-items: center;



    padding-top: 2px;



    width: 1800px;



    margin-top: 0px;



    margin-bottom: 0px;



    overflow: hidden;



}







@media screen and (max-width: 768px) {



    .bande_noir2 {



        max-width: 700px;



    }



}







/* ========== DIVERS ========== */



.marquee {



    width: 100%;



    overflow: hidden;



    white-space: nowrap;



    margin: 0px;



    padding: 0px;



}







.marquee-content {



    display: inline-block;



    animation: scrollText linear infinite;



    margin: 0px;



}







@keyframes scrollText {



    from {



        transform: translateX(-50%);



    }



    to {



        transform: translateX(0);



    }



}







.marquee:hover .marquee-content {



    animation-play-state: paused;



}







.marquee a {



    color: #ffcbaa;



    text-decoration: none;



    font-weight: bold;



    font-size: 1.15em;



    transition: color 0.3s ease;



}







.marquee a:hover {



    color: white;



}







/* ========== BARRE DE NAVIGATION DES COURS (F3) ========== */



.f3 {



    background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));



    font-family: 'Tajawal';



    min-width: 950px;



    display: flex;



    justify-content: center;



    align-items: center;



    height: 35px;



    position: sticky;



    top: 50px;



    border: 3px solid white;



    direction: ltr;



    z-index: 999;



}







.f333 {



    background-color: #16284c;



    font-family: 'Tajawal';



    min-width: 950px;



    display: flex;



    justify-content: center;



    align-items: center;



    height: 35px;



    width: 1000px;



    border: 3px solid white;



    position: fixed;



    bottom: 0;



    left: 50%;



    transform: translateX(-50%);



    z-index: 999;



}







.f3 a, .f333 a {



    color: white;



    text-decoration: none;



    font-size: 1em;



    display: flex;



    justify-content: center;



    align-items: center;



    transition: all 0.3s ease;



}







.f3 a:hover, .f333 a:hover {



    color: #f8a64a;



}







.f3 p, .f333 p {



    padding: 5px;



    display: flex;



    justify-content: center;



    align-items: center;



    font-size: 0.8em;



}







/* ========== BOUTON GAUCHE (YAMIN) ========== */



.yamin {



    display: flex;



    justify-content: center;



    align-items: center;



    background-color: #f8a64a;



    height: 100%;



    min-width: 150px;



    margin-left: 0px;



    color: white;



    font-weight: bold;



    transition: all 0.3s ease;



    cursor: pointer;



}







.yamin:hover {



    background-color: #0076bd;



    transform: translateX(-2px);



}







/* ========== BOUTON DROIT (YASAR) ========== */



.yasar {



    display: flex;



    justify-content: center;



    align-items: center;



    background-color: #f8a64a;



    height: 100%;



    min-width: 150px;



    margin-right: 0px;



    color: white;



    font-weight: bold;



    transition: all 0.3s ease;



    cursor: pointer;



}







.yasar:hover {



    background-color: #0076bd;



    transform: translateX(2px);



}







/* ========== ZONE CENTRALE (WAST) ========== */



.wast {



    display: flex;



    justify-content: center;



    align-items: center;



    width: 75%;



    color: white;



    font-weight: bold;



}







/* ========== IMAGES DANS LA BARRE ========== */



.flh {



    height: 25px;



    width: auto;



}







.flh2 {



    height: 40px;



    width: auto;



}







/* ========== LIEN DE NAVIGATION GÉNÉRIQUE ========== */



.dttt {



    display: flex;



    justify-content: center;



    align-items: center;



    text-decoration: none;



    color: white;



    border: 2px solid rgba(135,37,96,0);



    transition: all 0.3s ease;



}







.dttt:hover {



    border: 2px solid white;



    background-color: #f8a64a;



}







/* ========== STYLES POUR LE BOUTON DE CORRECTION (F1010) ========== */



.f1010 {



    text-align: center;



    padding: 0px;



    width: 100%;



    





}







.toggleBtn {



    color: white;



    width: 100%;



    height: 55px;



    background: linear-gradient(135deg, #16284c 0%, #1a3a6e 100%);



    font-size: 1.25em;



    font-weight: bolder;



    border: none;



    border-radius: 8px;



    cursor: pointer;



    transition: all 0.3s ease;



    display: flex;



    align-items: center;



    justify-content: space-between;



    padding: 0 20px;



    margin: 10px auto;



    box-shadow: 0 2px 5px rgba(0,0,0,0.2);



}







.toggleBtn:hover {



    background: linear-gradient(135deg, #1a3a6e 0%, #16284c 100%);



    transform: translateY(-2px);



    box-shadow: 0 4px 10px rgba(0,0,0,0.3);



}







.toggleBtn:active {



    transform: translateY(0px);



}







.btn-text {



    display: flex;



    align-items: center;



    gap: 8px;



}







.btn-icon {



    font-size: 1.2em;



    transition: transform 0.3s ease;



}







.toggleBtn.active .btn-icon {



    transform: rotate(180deg);



}







.element {



    display: none;



    margin-top: 15px;



    background: linear-gradient(135deg, #1e3a5f 0%, #16284c 100%);



    padding: 20px;



    border-radius: 12px;



    box-shadow: 0 4px 15px rgba(0,0,0,0.2);



    animation: fadeIn 0.5s ease;



   



    margin-left: auto;



    margin-right: auto;



}







.element.show {



    display: block;



}







.contenu_image2 {



    border: 2px solid #e89e09;



    background-color: white;



    border-radius: 8px;



    overflow: hidden;



    margin: 15px 0;



    box-shadow: 0 2px 5px rgba(0,0,0,0.1);



}







.contenu_image img {



    border-top: 15px solid #e5d0cb;



    width: 100%;



    height: auto;



    border-bottom: 15px solid #e5d0cb;



    transition: transform 0.3s ease;



}







.contenu_image img:hover {



    transform: scale(1.02);



}







/* ========== ANIMATIONS ========== */



@keyframes fadeIn {



    from {



        opacity: 0;



        transform: translateY(-10px);



    }



    to {



        opacity: 1;



        transform: translateY(0);



    }



}







@keyframes slideIn {



    from {



        transform: translateX(-100%);



    }



    to {



        transform: translateX(0);



    }



}







@keyframes pulse {



    0% {



        transform: scale(1);



    }



    50% {



        transform: scale(1.05);



    }



    100% {



        transform: scale(1);



    }



}







/* ========== UTILITAIRES ========== */



.text-center {



    text-align: center;



}







.text-right {



    text-align: right;



}







.text-left {



    text-align: left;



}







.mt-10 {



    margin-top: 10px;



}







.mt-20 {



    margin-top: 20px;



}







.mb-10 {



    margin-bottom: 10px;



}







.mb-20 {



    margin-bottom: 20px;



}







.p-10 {



    padding: 10px;



}







.p-20 {



    padding: 20px;



}







/* ========== RESPONSIVE DESIGN ========== */



@media screen and (max-width: 1024px) {



    .f3, .f333 {



        min-width: auto;



        width: 90%;



    }



    .wast {



        width: 60%;



    }



}







@media screen and (max-width: 768px) {



    .f1010, .toggleBtn, .element {



        max-width: 90%;



    }



    .toggleBtn {



        height: 50px;



        font-size: 1.1em;



        padding: 0 15px;



    }



    .element {



        padding: 15px;



    }



    nav ul li {



        min-width: auto;



        float: none;



        display: inline-block;



    }



    .sous {



        position: static;



        width: 100%;



    }



    .groupe {



        width: 100%;



        max-width: 335px;



    }



    .table_affiche td, .table_affiche th {



        font-size: 0.8em;



        padding: 3px;



    }



}







@media screen and (max-width: 480px) {



    .toggleBtn {



        font-size: 1em;



        height: 45px;



    }



    .btn-text {



        gap: 5px;



    }



    .element {



        padding: 10px;



    }



}







/* ========== IMPRESSION ========== */



@media print {



    .toggleBtn, .f3, .f333, nav, footer, .bande_noir, .bande_noir2 {



        display: none;



    }



    .element {



        display: block !important;



        background: white;



        color: black;



    }



    body {



        background: white;



        width: 100%;



    }



}







/* ========== SCROLLBAR PERSONNALISÉE ========== */



::-webkit-scrollbar {



    width: 10px;



    height: 10px;



}







::-webkit-scrollbar-track {



    background: #f1f1f1;



    border-radius: 5px;



}







::-webkit-scrollbar-thumb {



    background: #16284c;



    border-radius: 5px;



}







::-webkit-scrollbar-thumb:hover {



    background: #1a3a6e;



}







/* ========== SÉLECTION DE TEXTE ========== */



::selection {



    background-color: #87255f;



    color: white;



}







::-moz-selection {



    background-color: #87255f;



    color: white;



}







/* Conteneur principal */



.login-container,



.error-container {



    max-width: 500px;



    margin: 50px auto;



    padding: 30px;



    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);



    border-radius: 20px;



    box-shadow: 0 20px 40px rgba(0,0,0,0.1);



    color: #fff;



}







.welcome-container {



    margin: 50px auto;



    padding: 30px;



    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);



    border-radius: 20px;



    box-shadow: 0 20px 40px rgba(0,0,0,0.1);



    color: #fff;



}







.login-title {



    text-align: center;



    font-size: 28px;



    margin-bottom: 30px;



    font-weight: 700;



    letter-spacing: 1px;



}







.form-group {



    margin-bottom: 25px;



    position: relative;



}







.form-group label {



    display: block;



    margin-bottom: 8px;



    font-size: 14px;



    font-weight: 500;



    color: #f0f0f0;



}







.form-input {



    width: 100%;



    padding: 12px 15px;



    border: none;



    border-radius: 10px;



    font-size: 16px;



    background: rgba(255,255,255,0.9);



    transition: all 0.3s ease;



    box-sizing: border-box;



    text-align: center;



}







.form-input:focus {



    outline: none;



    background: #fff;



    box-shadow: 0 0 0 3px rgba(255,255,255,0.3);



}







.arabic-label {



    position: absolute;



    left: 15px;



    top: 38px;



    font-size: 12px;



    color: #764ba2;



    font-weight: 500;



    pointer-events: none;



}







.password-wrapper {



    position: relative;



}







.toggle-password-btn {



    position: absolute;



    right: 240px;



    top: 50%;



    transform: translateY(-50%);



    background: none;



    border: none;



    cursor: pointer;



    font-size: 20px;



    padding: 0;



    color: #764ba2;



    transition: transform 0.2s;



}







.toggle-password-btn:hover {



    transform: translateY(-50%) scale(1.1);



}







.submit-btn {



    width: 100%;



    padding: 14px;



    background: #ff6b6b;



    color: white;



    border: none;



    border-radius: 10px;



    font-size: 18px;



    font-weight: bold;



    cursor: pointer;



    transition: all 0.3s ease;



    margin-top: 10px;



}







.submit-btn:hover {



    background: #ff5252;



    transform: translateY(-2px);



    box-shadow: 0 5px 15px rgba(0,0,0,0.2);



}







.register-link {



    text-align: center;



    margin-top: 20px;



    font-size: 14px;



}







:root {



    --primary-color: #2c3e50;



    --secondary-color: #3498db;



    --success-color: #27ae60;



    --danger-color: #e74c3c;



    --warning-color: #f39c12;



    --light-bg: #f8f9fa;



    --border-color: #dee2e6;



    --text-dark: #333;



    --text-light: #666;



    --shadow: 0 2px 10px rgba(0,0,0,0.1);



}







* {



    margin: 0;



    padding: 0;



    box-sizing: border-box;



}







body {



    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;



    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);



    min-height: 100vh;



    padding: 20px;



}







.gatous {



    max-width: 1200px;



    margin: 0 auto;



    background: white;



    border-radius: 15px;



    box-shadow: var(--shadow);



    overflow: hidden;



    animation: fadeIn 0.5s ease-in;



     font-family: 'Tajawal' ;



}







@keyframes fadeIn {



    from {



        opacity: 0;



        transform: translateY(-20px);



    }



    to {



        opacity: 1;



        transform: translateY(0);



    }



}







.main-title {



    text-align: center;



    font-size: 1.8em;



    color: var(--primary-color);



    padding: 20px;



    margin: 0;



    background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));



    color: white;



    border-radius: 15px 15px 0 0;



    font-family: 'Tajawal' ;



    margin: 20px;



}







.exam-table {



    width: 100%;



    border-collapse: collapse;



    margin: 20px 0;



}







.exam-table tr {



    transition: all 0.3s ease;



}







.exam-table td {



    padding: 15px;



    border: 1px solid var(--border-color);



    text-align: right;



}







.exam-link {



    text-decoration: none;



    color: inherit;



    display: block;



    transition: all 0.3s ease;



}







.exam-link h3 {



    margin: 0;



    padding: 15px;



    background: var(--light-bg);



    border-radius: 8px;



    transition: all 0.3s ease;



    font-size: 1.1em;



    font-weight: 500;



    color: var(--text-dark);



}







.exam-link:hover h3 {



    background: linear-gradient(135deg, var(--secondary-color), var(--primary-color));



    color: white;



    transform: translateX(-5px);



    box-shadow: 0 5px 15px rgba(0,0,0,0.2);



}







.count-badge {



    display: inline-block;



    background: var(--danger-color);



    color: white;



    border-radius: 50px;



    padding: 5px 15px;



    font-size: 0.9em;



    margin-right: 10px;



    animation: pulse 2s infinite;



}







@keyframes pulse {



    0% {



        transform: scale(1);



    }



    50% {



        transform: scale(1.05);



    }



    100% {



        transform: scale(1);



    }



}







.fit-picture {



    display: block;



    height: 100px;



    margin: 20px auto;



    transition: transform 0.3s ease;



}







.fit-picture:hover {



    transform: rotate(5deg) scale(1.05);



}







@media (max-width: 768px) {



    .main-title {



        font-size: 1.2em;



        padding: 15px;



    }



    .exam-link h3 {



        font-size: 0.9em;



        padding: 10px;



    }



    .fit-picture {



        height: 70px;



    }



    .gatous {



        margin: 10px;



        border-radius: 10px;



    }



}







.loading {



    display: inline-block;



    width: 20px;



    height: 20px;



    border: 3px solid rgba(255,255,255,.3);



    border-radius: 50%;



    border-top-color: white;



    animation: spin 1s ease-in-out infinite;



}







@keyframes spin {



    to { transform: rotate(360deg); }



}







::-webkit-scrollbar {



    width: 10px;



    height: 10px;



}







::-webkit-scrollbar-track {



    background: var(--light-bg);



    border-radius: 10px;



}







::-webkit-scrollbar-thumb {



    background: var(--secondary-color);



    border-radius: 10px;



}







::-webkit-scrollbar-thumb:hover {



    background: var(--primary-color);



}







.glass-effect {



    background: rgba(255, 255, 255, 0.1);



    backdrop-filter: blur(10px);



    border-radius: 10px;



    padding: 20px;



}







.exam-table tr {



    animation: slideIn 0.5s ease-out;



    animation-fill-mode: both;



}







@keyframes slideIn {



    from {



        opacity: 0;



        transform: translateX(20px);



    }



    to {



        opacity: 1;



        transform: translateX(0);



    }



}







.exam-table tr:nth-child(1) { animation-delay: 0.1s; }



.exam-table tr:nth-child(2) { animation-delay: 0.2s; }



.exam-table tr:nth-child(3) { animation-delay: 0.3s; }



.exam-table tr:nth-child(4) { animation-delay: 0.4s; }



.exam-table tr:nth-child(5) { animation-delay: 0.5s; }







.register-link a {



    color: #ffd93d;



    text-decoration: none;



    font-weight: bold;



}







.register-link a:hover {



    text-decoration: underline;



}







.alert-message {



    background: #ff6b6b;



    color: white;



    padding: 12px;



    border-radius: 10px;



    margin-bottom: 20px;



    text-align: center;



    font-weight: 500;



}







.error-title {



    text-align: center;



    color: #ff6b6b;



    margin-bottom: 20px;



    font-size: 20px;



}







.welcome-message {



    text-align: center;



    font-size: 18px;



    line-height: 1.8;



}







.user-name {



    font-size: 24px;



    color: #ffd93d;



    display: inline-block;



    margin: 10px 0;



}







.link-btn {



    display: inline-block;



    padding: 8px 16px;



    background: #ffd93d;



    color: #764ba2;



    text-decoration: none;



    border-radius: 8px;



    margin: 0 5px;



    transition: all 0.3s;



}







.link-btn:hover {



    background: #ffc107;



    transform: scale(1.05);



}







@media (max-width: 600px) {



    .login-container,



    .welcome-container,



    .error-container {



        margin: 20px;



        padding: 20px;



    }



    .login-title {



        font-size: 24px;



    }



    .user-name {



        font-size: 20px;



    }



}