body {
    font-family: 'Poppins', 'Microsoft JhengHei', '微軟正黑體', Arial, sans-serif; /* Modern font */
    background: linear-gradient(135deg, #0f0f1a, #1a1a2e); /* Subtle gradient background */
    color: #e0e0e0; /* Light text for dark background */
    margin: 0;
    box-sizing: border-box;
    line-height: 1.6;
    min-height: 100vh; /* Ensure body takes full height for centering */
    display: flex; /* Use flexbox for overall centering */
    justify-content: center;
    align-items: center;
    flex-direction: column; /* Stack login container and demo box vertically */
    padding: 20px; /* Overall padding */
}

/* General button styles (for modern look across the site) */
.btn { /* Base button class */
    padding: 12px;
    border: none;
    border-radius: 8px; /* Softer corners */
    cursor: pointer;
    font-size: 16px;
    font-weight: 600; /* Bolder font weight */
    transition: all 0.3s ease;
    letter-spacing: 0.5px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3); /* Softer shadow */
}

/* Specific style for the login button */
.modern-login-btn {
    width: 100%;
    background: linear-gradient(45deg, #4CAF50, #66BB6A); /* Green gradient for primary action */
    color: white;
}

.modern-login-btn:hover {
    background: linear-gradient(45deg, #66BB6A, #4CAF50); /* Invert gradient on hover */
    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.4);
    transform: translateY(-2px); /* Slight lift effect */
}


/* ================================= */
/* === 登入頁面專用樣式 (Login Page) === */
/* ================================= */

.login-page-wrapper {
    width: 100%; /* Ensure wrapper takes full width */
    max-width: 420px; /* Limit overall width for login area */
    display: flex;
    flex-direction: column; /* Stack items inside wrapper */
    align-items: center; /* Center items horizontally */
}

.login-container {
    background-color: #1e1e2e; /* Slightly different dark shade */
    padding: 45px; /* More padding */
    border-radius: 12px; /* More rounded corners */
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.5); /* Deeper, softer shadow */
    border: 1px solid rgba(50, 50, 80, 0.5); /* Subtle border with transparency */
    width: 100%; /* Take full width of its parent (.login-page-wrapper) */
    margin-bottom: 25px; /* Space between login box and demo box */
    animation: fadeIn 0.8s ease-out; /* Fade-in animation */
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}

.login-page-wrapper h2 {
    text-align: center;
    font-size: 28px; /* Larger heading */
    color: #ffffff;
    margin: 0 0 15px 0;
    font-weight: 600;
    letter-spacing: 1px;
    border-bottom: none; /* Override default h2 border */
    padding-bottom: 0;
}

.login-page-wrapper h3 {
    text-align: center;
    font-size: 18px;
    color: #a0a0c0; /* Softer secondary color */
    margin: 0 0 40px 0; /* More space below */
    font-weight: 300; /* Lighter font weight */
    border-bottom: none; /* Override default h3 border */
    padding-bottom: 0;
}

.login-input-group {
    margin-bottom: 25px; /* More space between inputs */
    display: grid;
    grid-template-columns: 90px 1fr; /* Adjusted column width */
    align-items: center;
    gap: 15px; /* More gap */
}

.login-input-group label {
    font-size: 16px;
    color: #a0a0c0;
    text-align: right;
    font-weight: 400;
}

.login-input-group input {
    width: 100%;
    padding: 12px 15px; /* More padding */
    background-color: #2a2a3e; /* Darker input background */
    border: 1px solid #4a4a6e; /* Softer border */
    color: #ffffff;
    border-radius: 6px;
    font-size: 16px;
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
    box-sizing: border-box; /* Include padding in element's total width and height */
}

.login-input-group input:focus {
    border-color: #6a8aff; /* Accent color on focus */
    outline: none;
    box-shadow: 0 0 0 3px rgba(106, 138, 255, 0.3); /* Subtle glow */
}

/* ================================= */
/* === DEMO CREDENTIALS BOX STYLES === */
/* ================================= */
.demo-credentials-box {
    background-color: #1e1e2e; /* Same as login container */
    padding: 25px;
    border-radius: 12px;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.5);
    border: 1px solid rgba(50, 50, 80, 0.5);
    width: 100%; /* Take full width of its parent */
    max-width: 420px; /* Align with login container */
    margin-top: 15px; /* Space above demo box, adjusted from .login-container margin-bottom */
    animation: fadeIn 1s ease-out; /* Slightly delayed fade-in */
}

.demo-credentials-box h4 {
    color: #ffffff;
    font-size: 18px;
    margin-top: 0;
    margin-bottom: 15px;
    text-align: center;
    font-weight: 600;
}

.demo-credentials-box ul {
    list-style: none; /* Remove bullet points */
    padding: 0;
    margin: 0;
}

.demo-credentials-box ul li {
    background-color: #2a2a3e; /* Darker background for list items */
    padding: 10px 15px;
    border-radius: 6px;
    margin-bottom: 10px;
    font-size: 14.5px;
    color: #c0c0d0;
    display: flex;
    align-items: center;
    justify-content: center; /* Center text within li */
    text-align: center; /* Ensure text itself is centered if it wraps */
    word-break: break-all; /* Allow long words to break */
}

.demo-credentials-box ul li:last-child {
    margin-bottom: 0;
}

.demo-credentials-box .note {
    font-size: 13px;
    color: #8888aa;
    text-align: center;
    margin-top: 20px;
    font-style: italic;
}


/* ================================= */
/* === 通用訊息框 (Error/Success) === */
/* ================================= */
.error-message {
    color: #f8d7da;
    background-color: #722d2d; /* Deeper red */
    border: 1px solid #c93b3b;
    padding: 12px;
    border-radius: 6px;
    text-align: center;
    margin-bottom: 25px;
    font-size: 15px;
}

.success-message {
    color: #d4edda;
    background-color: #2c6e39; /* Deeper green */
    border: 1px solid #4a9f5d;
    padding: 12px;
    border-radius: 6px;
    margin-bottom: 25px;
    font-size: 15px;
}

/* ================================= */
/* === 儀表板及其他頁面的通用樣式 (Foundation for future changes) === */
/* ================================= */

.container {
    width: 100%;
    max-width: 1000px;
    margin: 40px auto;
    padding: 0 25px;
}

.content-box {
    background-color: #1e1e2e;
    padding: 40px 50px;
    border-radius: 12px;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.5);
    border: 1px solid rgba(50, 50, 80, 0.5);
}

.content-box h2, .content-box h3 {
    color: #ffffff;
    border-bottom: 1px solid #3a3a5a; /* Softer separator */
    padding-bottom: 12px;
    margin-bottom: 25px;
    font-weight: 600;
    letter-spacing: 0.8px;
}

.logout-link {
    float: right;
    text-decoration: none;
    color: #6a8aff; /* Modern blue */
    font-size: 15px;
    margin-top: 5px;
    transition: color 0.3s ease;
    font-weight: 400;
}

.logout-link:hover {
    color: #8cafff;
    text-decoration: underline;
}

.modern-hr { /* New class for modern HR */
    border: 0;
    height: 1px;
    background: linear-gradient(to right, transparent, #3a3a5a, transparent); /* Gradient HR */
    margin: 35px 0;
}

/* Filter Form */
.filter-form {
    margin-bottom: 30px;
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 20px;
    background-color: #2a2a3e;
    padding: 20px;
    border-radius: 8px;
    border: 1px solid #3a3a5a;
}
.filter-item {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.filter-item label {
    font-weight: 500;
    font-size: 15px;
    color: #a0a0c0;
}
.filter-item select,
.filter-item input[type="text"] {
    padding: 10px 12px;
    background-color: #34344c;
    border: 1px solid #5a5a7a;
    color: #ffffff;
    border-radius: 6px;
    height: 42px;
    box-sizing: border-box;
    font-size: 15px;
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.filter-item select:focus,
.filter-item input[type="text"]:focus {
    border-color: #6a8aff;
    outline: none;
    box-shadow: 0 0 0 3px rgba(106, 138, 255, 0.3);
}

.filter-btn {
    padding: 10px 20px;
    background: linear-gradient(45deg, #0d6efd, #2a8bff);
    color: white;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    height: 42px;
    font-size: 15px;
    font-weight: 600;
    transition: all 0.3s ease;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
}
.filter-btn:hover {
    background: linear-gradient(45deg, #2a8bff, #0d6efd);
    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.4);
    transform: translateY(-2px);
}
.reset-btn { /* Style for the reset button */
    background: linear-gradient(45deg, #dc3545, #e35a67); /* Reddish gradient */
}
.reset-btn:hover {
    background: linear-gradient(45deg, #e35a67, #dc3545);
}


/* Data Tables */
.table-container {
    overflow-x: auto;
    background-color: #2a2a3e;
    border-radius: 8px;
    border: 1px solid #3a3a5a;
    padding: 15px;
}

table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 10px;
}

th, td {
    border: 1px solid #3a3a5a;
    padding: 14px;
    text-align: center;
    white-space: nowrap;
    font-size: 15px;
}

thead {
    background-color: #34344c;
    color: #ffffff;
}

th {
    font-weight: 600;
    letter-spacing: 0.5px;
}

tbody tr:nth-child(even) {
    background-color: #1e1e2e;
}

tbody tr:hover {
    background-color: #2a2a4a;
}


/* Input Form for Parents (input.php) */
.measurement-form {
    margin-bottom: 30px;
}
.measurement-form h3 {
    margin-bottom: 25px;
}
.measurement-form .form-row {
    display: flex;
    flex-wrap: wrap;
    gap: 25px;
    margin-bottom: 30px;
}
.measurement-form .input-group {
    flex: 1;
    min-width: 250px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.measurement-form .input-group label {
    font-weight: 500;
    font-size: 15px;
    color: #a0a0c0;
}
.measurement-form .input-group input[type="number"] {
    padding: 12px 15px;
    background-color: #2a2a3e;
    border: 1px solid #4a4a6e;
    color: #ffffff;
    border-radius: 6px;
    font-size: 16px;
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
}
.measurement-form .input-group input[type="number"]:focus {
    border-color: #6a8aff;
    outline: none;
    box-shadow: 0 0 0 3px rgba(106, 138, 255, 0.3);
}

.submit-btn { /* Specific class for parent input submit */
    width: 100%;
    background: linear-gradient(45deg, #0d6efd, #2a8bff); /* Blue gradient for input page submit */
    color: white;
}
.submit-btn:hover {
    background: linear-gradient(45deg, #2a8bff, #0d6efd);
    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.4);
    transform: translateY(-2px);
}


/* BMI Summary (input.php & admin_dashboard.php) */
.bmi-summary {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    justify-content: space-around;
    margin-bottom: 30px;
}
.bmi-item {
    background-color: #2a2a3e;
    padding: 20px 25px;
    border-radius: 8px;
    border: 1px solid #3a3a5a;
    text-align: center;
    flex: 1;
    min-width: 180px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
}
.bmi-item span {
    display: block;
    font-size: 15px;
    color: #a0a0c0;
    margin-bottom: 10px;
    font-weight: 500;
}
.bmi-item input[type="text"] {
    width: 100%;
    padding: 10px;
    background-color: #34344c;
    border: 1px solid #5a5a7a;
    color: #7affb5; /* Highlight color for values */
    font-size: 24px;
    font-weight: 600;
    border-radius: 6px;
    text-align: center;
    cursor: default;
}

/* Specific text styles for dashboards */
.student-info, .welcome-message {
    font-size: 16px;
    color: #c0c0d0;
    margin-bottom: 25px;
}
.student-info strong, .welcome-message strong {
    color: #ffffff;
}

/* ================================= */
/* === MULTIMEDIA STYLES === */
/* ================================= */
.header-with-logo {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px; /* Space between logo and title */
    margin-bottom: 30px;
}

.school-logo {
    max-width: 80px; /* Adjust size as needed */
    height: auto;
    border-radius: 8px; /* Slightly rounded corners for the logo */
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

.header-with-logo h2 {
    margin-bottom: 0; /* Remove default margin */
    padding-bottom: 0; /* Remove default padding from previous rules */
    border-bottom: none; /* Remove border from previous rules */
    text-align: center;
}

.video-container {
    background-color: #2a2a3e;
    border-radius: 8px;
    border: 1px solid #3a3a5a;
    padding: 15px;
    margin-bottom: 15px;
    text-align: center;
}

.video-container video {
    display: block; /* Remove extra space below video */
    margin: 0 auto; /* Center the video */
    max-width: 100%;
    height: auto;
    border-radius: 6px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.4);
}

.video-caption, .audio-caption {
    font-size: 14px;
    color: #a0a0c0;
    text-align: center;
    margin-top: 10px;
    font-style: italic;
}

.audio-container {
    background-color: #2a2a3e;
    border-radius: 8px;
    border: 1px solid #3a3a5a;
    padding: 15px;
    margin-bottom: 15px;
    text-align: center;
}

.audio-container audio {
    width: 100%; /* Make audio player fill its container */
    max-width: 400px; /* Optional: limit width for a cleaner look */
    display: block;
    margin: 0 auto;
}


/* Responsive Adjustments */
@media (max-width: 768px) {
    .container {
        margin: 20px auto;
        padding: 0 15px;
    }
    .content-box {
        padding: 30px 25px;
    }
    .login-container, .demo-credentials-box { /* Apply to both boxes */
        padding: 30px;
        max-width: 100%; /* Ensure they take full width on smaller screens */
    }
    .login-input-group {
        grid-template-columns: 1fr; /* Stack labels and inputs on small screens */
        text-align: left;
    }
    .login-input-group label {
        text-align: left;
    }
    .filter-form {
        flex-direction: column; /* Stack filter items */
        align-items: stretch;
    }
    .filter-item {
        width: 100%; /* Full width for stacked items */
    }
    .filter-btn {
        width: 100%;
    }
    .measurement-form .form-row {
        flex-direction: column;
        gap: 20px;
    }
    .bmi-summary {
        flex-direction: column;
        gap: 15px;
    }
    .bmi-item {
        min-width: unset; /* Remove min-width */
        width: 100%;
    }
    .header-with-logo {
        flex-direction: column;
        gap: 10px;
        margin-bottom: 20px;
    }
    /* ... (existing CSS code) ... */

/* New style for the login page image */
.login-banner-image {
    display: block; /* Ensures it takes its own line and can be centered with margin */
    max-width: 150px; /* Adjust size as needed */
    height: auto;
    margin: 0 auto 30px auto; /* Center horizontally, add space below */
    border-radius: 50%; /* Make it a circle */
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.4); /* Add a subtle shadow */
    transition: transform 0.3s ease; /* Smooth transition for hover effect */
}

.login-banner-image:hover {
    transform: scale(1.05); /* Slightly enlarge on hover */
}


/* ... (rest of your existing CSS code) ... */
/* ... (existing CSS code) ... */

/* New style for the login page image to match the box */
.login-banner-image {
    display: block;
    width: 120px; /* Set a fixed width */
    height: 120px; /* Set a fixed height to make it square */
    object-fit: cover; /* Ensures the image covers the area without distortion */
    margin: 0 auto 30px auto;
    border-radius: 12px; /* Match the border-radius of the login container */
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.6); /* Stronger, softer shadow */
    border: 2px solid rgba(70, 70, 100, 0.7); /* Subtle border matching the box */
    background-color: #2a2a3e; /* A background color in case the image has transparency */
    padding: 5px; /* Small padding inside the border */
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.login-banner-image:hover {
    transform: scale(1.03); /* Slightly less aggressive scale on hover */
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.7); /* Enhanced shadow on hover */
}

/* ... (rest of your existing CSS code) ... */

}