/* =========================================
   GLOBAL STYLES (5D Premium World Look)
   ========================================= */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;600;800&display=swap');

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Poppins', 'Segoe UI', sans-serif;
}

body {
    background: #e0e5ec;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center; 
    padding: 40px 20px;
    position: relative;
    overflow-x: hidden;
    z-index: 1;
}

/* =========================================
   5D TEXT EFFECTS (Font with Mouse Hover)
   ========================================= */
h1, h2, h3 {
    color: #e0e5ec;
    font-size: 2.8rem;
    text-align: center;
    margin-bottom: 40px;
    font-weight: 800;
    z-index: 10;
    text-shadow: 4px 4px 8px #a3b1c6, -4px -4px 8px #ffffff;
    transition: all 0.3s ease;
}

h1:hover, h2:hover, h3:hover {
    transform: translateY(-3px) scale(1.02);
    color: #33597d; 
    text-shadow: 6px 6px 12px rgba(163, 177, 198, 0.9), -6px -6px 12px rgba(255, 255, 255, 1);
}

/* =========================================
   GENERIC 5D BUTTON STYLES
   ========================================= */
a, .btn, .btn-wide, .btn-small, .btn-dashboard, .btn-class, .btn-save, .btn-back {
    text-decoration: none;
    color: #33597d;
    font-weight: 700;
    padding: 12px 24px;
    margin: 10px;
    background: #e0e5ec;
    border: none;
    border-radius: 50px;
    box-shadow: 8px 8px 16px #a3b1c6, -8px -8px 16px #ffffff;
    cursor: pointer;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    transition: all 0.2s ease;
    z-index: 10;
}

a:hover, .btn:hover {
    transform: translateY(-2px);
    color: #d86c23; 
    box-shadow: 12px 12px 20px #9ba8bd, -12px -12px 20px #ffffff;
}

a:active, .btn:active {
    transform: scale(0.96);
    box-shadow: inset 6px 6px 12px #a3b1c6, inset -6px -6px 12px #ffffff;
    color: #33597d;
}

/* =========================================
   🔥 8D FORMS & CONTAINERS (Extreme Mouse Effect) 🔥
   ========================================= */
.homepage-container, .search-result-container, .ninth-search-container, 
.login-container {
    width: 100%;
    height: auto;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.search-form, .login-form, .dashboard-container, .form-container {
    background: #e0e5ec;
    padding: 40px;
    border-radius: 20px;
    width: 90%;
    max-width: 850px;
    margin: 20px auto;
    
    /* 8D Base Setup */
    position: relative; 
    overflow: hidden; /* Light beam ko form ke andar rakhne ke liye */
    transition: all 0.6s cubic-bezier(0.2, 0.8, 0.2, 1); /* Ekdum smooth bounce effect */
    border: 1px solid rgba(255, 255, 255, 0.3); /* Glassy Edge */
    
    /* Base 5D Shadow */
    box-shadow: 15px 15px 30px #a3b1c6, -15px -15px 30px #ffffff,
                inset 2px 2px 5px rgba(255,255,255,0.8),
                inset -2px -2px 5px rgba(0,0,0,0.05);
}

/* 🌟 8D Form Hover State (जब माउस फॉर्म पर आएगा) 🌟 */
.search-form:hover, .login-form:hover, .dashboard-container:hover, .form-container:hover {
    transform: translateY(-15px) scale(1.02); /* फॉर्म हवा में उठेगा और थोड़ा बड़ा होगा */
    border: 1px solid rgba(255, 255, 255, 0.8);
    /* 8D Extreme Shadows with Blue Under-glow */
    box-shadow: 25px 25px 50px #9ba8bd, -25px -25px 50px #ffffff,
                inset 4px 4px 8px rgba(255,255,255,1),
                inset -4px -4px 8px rgba(0,0,0,0.1),
                0 20px 40px rgba(51, 89, 125, 0.15); 
}

/* ✨ 8D Light Beam Sweep (फॉर्म के ऊपर से गुजरने वाली चमकीली लाइट) ✨ */
.search-form::after, .login-form::after, .dashboard-container::after, .form-container::after {
    content: '';
    position: absolute;
    top: 0; 
    left: -150%;
    width: 50%; 
    height: 100%;
    background: linear-gradient(to right, rgba(255,255,255,0) 0%, rgba(255,255,255,0.6) 50%, rgba(255,255,255,0) 100%);
    transform: skewX(-25deg);
    transition: all 0.7s ease;
    pointer-events: none; /* ताकि आप लाइट के नीचे वाले बटन्स पर क्लिक कर सकें */
}

/* जब माउस आएगा तो लाइट तेज़ी से लेफ्ट से राइट जाएगी */
.search-form:hover::after, .login-form:hover::after, .dashboard-container:hover::after, .form-container:hover::after {
    left: 200%;
    transition: all 0.7s ease;
}

/* =========================================
   5D INPUT BOXES (Recessed/Hole Effect)
   ========================================= */
.input-group input, .input-group-hz input, .input-group-select select, 
.dependent-dropdowns select, .red-input-box {
    background: #e0e5ec;
    border: none;
    border-radius: 10px;
    padding: 0 15px;
    color: #333;
    font-size: 15px;
    outline: none;
    transition: all 0.3s ease;
    box-shadow: inset 5px 5px 10px #a3b1c6, inset -5px -5px 10px #ffffff;
}

.input-group input:focus, .input-group-hz input:focus, 
.input-group-select select:focus, .red-input-box:focus {
    box-shadow: inset 6px 6px 12px #9ba8bd, inset -6px -6px 12px #ffffff, 
                0 0 8px rgba(77, 171, 247, 0.5);
}

.red-input-box { height: 50px; width: 100%; max-width: 350px; color: #e53935; font-weight: bold; }
.input-group input { height: 45px; width: 100%; }
.input-group-hz input, .input-group-select select { height: 45px; }

.input-group label, .input-group-hz label, .input-group-select label {
    font-weight: 700;
    color: #666;
    text-shadow: 1px 1px 1px #ffffff;
}

/* =========================================
   GRID LAYOUTS
   ========================================= */
.form-grid-2col {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 25px 40px;
}
.class-grid, .login-button-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    justify-items: center;
}
.input-group-hz { display: flex; align-items: center; gap: 15px; }
.input-group-hz label { flex: 0 0 140px; }

/* =========================================
   MARKS ENTRY SECTION (5D Compact)
   ========================================= */
.subject-box {
    background: #e0e5ec;
    border-radius: 12px;
    padding: 15px;
    margin-bottom: 15px;
    box-shadow: 6px 6px 12px #a3b1c6, -6px -6px 12px #ffffff;
}
.sub-title { color: #d86c23; font-weight: 800; font-size: 15px; margin-bottom: 10px; }

.marks-grid {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap; 
}

.marks-grid input[type="number"], .subject-row input[type="number"] {
    background: #e0e5ec;
    border: none;
    border-radius: 6px;
    text-align: center;
    box-shadow: inset 3px 3px 6px #a3b1c6, inset -3px -3px 6px #ffffff;
    font-weight: bold;
    color: #33597d;
    outline: none;
}

.marks-grid input[type="number"] { width: 55px; height: 35px; }
.subject-row input[type="number"] { width: 45px; height: 30px; }
.total-box { box-shadow: inset 4px 4px 8px #a3b1c6, inset -4px -4px 8px #ffffff, 0 0 5px #4caf50 !important; color: #4caf50 !important; }

input::-webkit-outer-spin-button, input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

.subject-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px;
    border-radius: 8px;
    margin-bottom: 8px;
    background: #e0e5ec;
    box-shadow: 4px 4px 8px #a3b1c6, -4px -4px 8px #ffffff;
}
.sub-label-main { font-weight: 800; width: 70px; color: #555; }

.sub-row-1 { box-shadow: 4px 4px 8px #a3b1c6, -4px -4px 8px #ffffff, inset 4px 0 0px #f44336; }
.sub-row-2 { box-shadow: 4px 4px 8px #a3b1c6, -4px -4px 8px #ffffff, inset 4px 0 0px #2196f3; }
.sub-row-3 { box-shadow: 4px 4px 8px #a3b1c6, -4px -4px 8px #ffffff, inset 4px 0 0px #4caf50; }

/* =========================================
   MOBILE RESPONSIVENESS (PERFECT LAYOUT)
   ========================================= */
@media screen and (max-width: 768px) {
    h1, h2, h3 { font-size: 2rem; }
    
    .search-form, .login-form, .dashboard-container, .form-container {
        width: 100%;
        padding: 25px 15px;
    }

    .form-grid-2col, .class-grid, .login-button-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .input-group-hz, .input-group {
        flex-direction: column;
        align-items: flex-start;
        gap: 5px;
    }
    .input-group-hz label, .input-group label {
        width: 100%;
    }
    .input-group-hz input, .input-group input, .input-group-select select {
        width: 100%;
    }

    .btn-wide, .btn-dashboard-wide, .btn-dashboard, .btn-save, .btn-back {
        width: 100%;
    }

    .form-action-buttons {
        flex-direction: column;
        gap: 15px;
    }

    .subject-row {
        flex-wrap: wrap;
        justify-content: flex-start;
    }
    .sub-label-main { width: 100%; margin-bottom: 5px; }
}