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

body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
    line-height: 1.6;
    margin: 0;
    padding: 0;
    background-color: #2c3e50; /* Dark blue-gray background */
    color: #ecf0f1; /* Light gray text */
}

.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 1rem;
}

nav {
    background-color: #34495e; /* Slightly lighter dark blue-gray for nav */
    box-shadow: 0 2px 4px rgba(0,0,0,0.3); /* Adjusted shadow */
    padding: 1rem 0;
}

.nav-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 1rem;
}

.logo {
    font-size: 1.5rem;
    font-weight: bold;
    color: #3498db; /* Keep vibrant logo color */
    text-decoration: none;
    cursor: pointer;
}

.logo:hover {
    color: #5dade2; /* Lighter hover for logo */
}

.nav-links a {
    color: #bdc3c7; /* Lighter gray for nav links */
    text-decoration: none;
    margin-left: 1.5rem;
}

.nav-links a:hover {
    color: #ecf0f1; /* White hover for nav links */
}

main {
    min-height: calc(100vh - 140px);
    padding: 2rem 0;
}

h1 {
    color: #ecf0f1; /* Light text for h1 */
    margin-bottom: 1rem;
}

h2 {
    color: #ecf0f1; /* Light text for h2 */
    margin-bottom: 2rem;
    text-align: center;
}

h3 { /* Added rule for h3, assuming it should also be light */
    color: #ecf0f1;
}

footer {
    background-color: #34495e; /* Same as nav for consistency */
    padding: 2rem 0;
    margin-top: 4rem;
    box-shadow: 0 -2px 4px rgba(0,0,0,0.3); /* Adjusted shadow */
}

footer .container {
    text-align: center;
    color: #bdc3c7; /* Lighter gray for footer text */
}

.auth-container {
    max-width: 400px;
    margin: 2rem auto;
    padding: 2rem;
    background: #34495e; /* Darker background for auth container */
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}

.form-group {
    margin-bottom: 1rem;
}

.form-group label {
    display: block;
    margin-bottom: 0.5rem;
    color: #bdc3c7; /* Lighter gray for labels */
}

.form-group input {
    width: 100%;
    padding: 0.5rem;
    border: 1px solid #7f8c8d; /* Mid-gray border */
    border-radius: 4px;
    font-size: 1rem;
    background-color: #566573; /* Darker input background */
    color: #ecf0f1; /* Light text in input */
}

.form-group input:focus { /* Added focus style for inputs */
    border-color: #3498db;
    outline: none;
    box-shadow: 0 0 0 2px rgba(52, 152, 219, 0.3);
}

.btn-primary {
    background-color: #3498db; /* Keep primary button color */
    color: #ffffff; /* White text on primary button */
    padding: 0.5rem 1rem;
    border: none;
    border-radius: 22px;
    cursor: grab;
    width: 30%;
    font-size: 1rem;
}

.btn-primary:active {
    cursor: grabbing;
}

.btn-primary:hover {
    background-color: #2980b9; /* Slightly darker hover */
}

.btn-secondary {
    background-color: #566573; /* Darker secondary button */
    color: #ecf0f1; /* Light text */
    padding: 0.5rem 1rem;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    width: 100%;
    font-size: 1rem;
    text-decoration: none;
    display: inline-block;
    text-align: center;
}

.btn-secondary:hover {
    background-color: #7f8c8d; /* Lighter hover for secondary */
}

.error {
    color: #e74c3c; /* Red error text */
    margin-top: 1rem;
    padding: 0.5rem;
    background-color: #5e3d3b; /* Dark red background */
    border: 1px solid #c0392b; /* Darker red border */
    border-radius: 4px;
}

.success {
    color: #2ecc71; /* Green success text */
    margin-top: 1rem;
    padding: 0.5rem;
    background-color: #3b5e4a; /* Dark green background */
    border: 1px solid #27ae60; /* Darker green border */
    border-radius: 4px;
}

.links {
    margin-top: 1rem;
    text-align: center;
}

.links a {
    color: #3498db; /* Keep link color */
    text-decoration: none;
}

.links a:hover {
    text-decoration: underline;
}

/* MFA Setup and Verification Styles */
#qrCode, /* Targeting by ID */
.qr-code-container {
    text-align: center;
    margin: 20px 0;
    padding: 20px;
    background: #ffffff;
    border-radius: 8px;
    min-height: 220px; /* Ensure space for QR code even when empty initially if it were visible */
    display: none; /* Initially hidden */
    justify-content: center; /* For centering content if needed when display is flex */
    align-items: center; /* For centering content if needed when display is flex */
    border: 1px solid #eee; /* Adding back a light border as seen in inline styles */
}

.qr-code-container img {
    max-width: 200px;
    height: auto;
}

#setupInstructions {
    margin-bottom: 20px;
}

#setupInstructions ol {
    margin: 15px 0;
    padding-left: 20px;
}

#setupInstructions li {
    margin: 8px 0;
    color: #bdc3c7; /* Lighter gray text */
}

#mfaForm {
    margin-top: 20px;
}

#mfaForm h2 {
    color: #2c3e50; /* Darker text color */
    font-weight: 600;
    margin-bottom: 1rem;
}

#mfaForm h3 {
    color: #34495e; /* Slightly lighter than h2 but still dark */
    font-weight: 500;
    margin-bottom: 0.8rem;
}

#mfaCode {
    letter-spacing: 4px;
    font-size: 1.2em;
    text-align: center;
    background-color: rgba(0, 0, 0, 0.03); /* Very light transparent grey */
    color: #000000; /* Light text in input */
    border: 1px solid #7f8c8d; /* Mid-gray border */
}

/* Notification styles for MFA */
.notification {
    padding: 15px;
    margin: 15px 0;
    border-radius: 4px;
    display: none; /* Keep this, JS handles display */
}

.notification.success {
    background-color: #3b5e4a; /* Dark green background */
    color: #abebc6; /* Light green text */
    border: 1px solid #27ae60; /* Darker green border */
}

.notification.error {
    background-color: #5e3d3b; /* Dark red background */
    color: #f5b7b1; /* Light red text */
    border: 1px solid #c0392b; /* Darker red border */
}

.notification.warning {
    background-color: #6e5a00; /* Dark yellow/orange background */
    color: #fdebd0; /* Light yellow text */
    border: 1px solid #d39e00; /* Darker yellow/orange border */
}

.notification.info {
    background-color: #2c5282; /* Dark blue background */
    color: #a7d8ed; /* Light blue text */
    border: 1px solid #3182ce; /* Darker blue border */
}

/* Portfolio Page Styles */
.portfolio-section {
    padding: 3rem 0;
    text-align: center;
}

.section-intro {
    font-size: 1.1rem;
    color: #bdc3c7; /* Lighter gray text */
    margin-bottom: 3rem;
    max-width: 700px;
    margin-left: auto;
    margin-right: auto;
}

.portfolio-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 2rem;
    margin-top: 2rem;
}

.project-card,
.portfolio-card {
    background: #ffffff; /* White background for cards */
    border-radius: 8px;
    padding: 2rem;
    box-shadow: 0 4px 10px rgba(0,0,0,0.1); /* Softer shadow for light cards */
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.project-card:hover,
.portfolio-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 12px 16px rgba(0,0,0,0.15); /* Slightly more pronounced shadow on hover */
}

.project-card h2,
.portfolio-card h2 {
    color: #2c3e50; /* Dark text for card headings */
    margin-bottom: 1rem; /* Adjusted margin for h2 in cards */
    text-align: center; /* Ensure text alignment if needed */
}

.project-card h3,
.portfolio-card h3 {
    color: #2c3e50; /* Dark text for card headings */
    margin-bottom: 0.75rem;
    width: 100%;
}

.project-card p,
.portfolio-card p {
    color: #555555; /* Dark gray text for card paragraphs */
    font-size: 0.95rem;
    flex-grow: 1;
    margin-bottom: 1.5rem;
    width: 100%;
}

.project-card .tech-stack,
.portfolio-card .tech-stack {
    margin-top: 1rem;
}

.project-card .tech-tag,
.portfolio-card .tech-tag {
    display: inline-block;
    background: #e9ecef; /* Light gray background for tags */
    color: #2c3e50; /* Dark text for tags */
    padding: 0.3rem 0.8rem;
    border-radius: 15px;
    font-size: 0.9rem;
    margin-right: 0.5rem;
    margin-bottom: 0.5rem;
}

.portfolio-icon {
    font-size: 3rem;
    margin-bottom: 1rem;
    color: #3498db; /* Keep icon color */
    width: 100%;
}

.portfolio-card .btn-primary {
    width: 90%;
    margin-left: auto;
    margin-right: auto;
    padding: 0.75rem 1.5rem;
    font-size: 0.9rem;
}

/* Interactive Page Styles */
.interactive-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 60vh;
    text-align: center;
    padding: 2rem;
}

#colorBox {
    width: 200px;
    height: 200px;
    background-color: #3498db; /* Keep initial color, or change if needed */
    margin-bottom: 2rem;
    border-radius: 8px;
    transition: background-color 0.3s ease;
    box-shadow: 0 4px 8px rgba(0,0,0,0.3);
}

.interactive-container button {
    /* General button styling is already in btn-primary, this is for specific layout if needed */
    padding: 0.8rem 2rem; /* Overriding default btn-primary padding if needed */
    font-size: 1rem; /* Overriding default btn-primary font-size if needed */
}

/* Styles for secret/blurred portfolio cards */
.secret-project {
    filter: blur(4px); 
    opacity: 0.6;    
    transition: filter 0.3s ease, opacity 0.3s ease;
}

.secret-project:hover {
    filter: blur(2.5px); 
    opacity: 0.85;     
}

.disabled-link {
    background-color: #7f8c8d !important; /* Darker disabled color */
    color: #566573 !important; /* Very dark text for disabled */
    cursor: not-allowed;
    pointer-events: none; 
}

/* Physics Ball Page Styles */
.physics-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start; 
    min-height: 80vh; 
    text-align: center;
    padding: 1rem;
    position: relative; 
}

#physicsCanvasContainer {
    width: 90%; 
    max-width: 800px; 
    height: 600px; 
    margin-top: 1rem;
    margin-bottom: 1rem; 
    border: 1px solid #7f8c8d; /* Mid-gray border */
    position: relative; 
    box-shadow: 0 4px 8px rgba(0,0,0,0.2);
}

.physics-container p {
    margin-bottom: 1rem;
    font-size: 1.1rem;
    color: #bdc3c7; /* Lighter gray text */
}

/* Ensure Matter.js canvas fills its container */
#physicsCanvasContainer canvas {
    display: block; 
}

/* Falling Sand Game Page Styles */
.sand-game-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start; 
    min-height: 80vh; 
    text-align: center;
    padding: 1rem;
}

#sandCanvasContainer {
    width: 90%;
    max-width: 700px; 
    height: 500px; 
    margin-top: 1rem;
    margin-bottom: 1rem; 
    border: 1px solid #7f8c8d; /* Mid-gray border */
    position: relative; 
    box-shadow: 0 4px 8px rgba(0,0,0,0.2);
    background-color: #282828; /* Darker, distinct background for the sand canvas */
    cursor: crosshair; 
}

.sand-game-container p {
    margin-bottom: 1rem;
    font-size: 1.1rem;
    color: #bdc3c7; /* Lighter gray text */
}

/* Style for the reset button, can use .btn-secondary or a custom class */
.sand-game-container .btn-secondary {
    width: auto; 
    padding: 10px 20px;
    margin-top: 10px;
}

/* Ensure input focus styles are distinct in dark mode */
.form-group input:focus {
    border-color: #3498db; /* Bright border on focus */
    outline: none;
    box-shadow: 0 0 0 3px rgba(52, 152, 219, 0.4); /* More prominent shadow */
    background-color: #5d6d7e; /* Slightly lighter background on focus */
}

/* Ensure portfolio card headings are specifically styled */
/* portfolio-card h3 and p are now part of the consolidated .project-card styles */

#physicsCanvasContainer {
    /* ... existing styles ... */
    border: 1px solid #7f8c8d; /* Ensure border is visible */
    /* If Matter.js renders its own background, that might need separate theming if possible */
}

#physicsCanvasContainer canvas {
    display: block;
    /* background-color: transparent; */ /* If you want body bg to show through */
}

#sandCanvasContainer {
    /* ... existing styles ... */
    border: 1px solid #7f8c8d; /* Ensure border is visible */
    background-color: #282828; /* Darker, distinct background for the sand canvas */
}

/* Styles originally from auth/css/auth-style.css */
/* Scoping body rule to a potential auth page wrapper if needed, or remove if truly global body style for auth pages is not desired */
/* For now, assuming general body styles are handled above, and auth-container is the main target */

/* These .auth-form styles are now the primary styles for auth pages */
/* The #auth-container styles below this block (from a previous merge) are now commented out / removed */

.auth-form {
    max-width: 45%;
    margin: 2rem auto; /* Matches original inline style */
    padding: 2rem; /* Matches original inline style */
    background: #ffffff; /* White background */
    border-radius: 8px; /* Matches original inline style */
    box-shadow: 0 2px 15px rgba(0, 0, 0, 0.1); /* Matches original inline style */
    color: #333333; /* Default dark text for content inside */
}

.auth-form h1 {
    color: #333333; /* Dark color for title (was likely this in original) */
    font-weight: 700; /* Common for titles */
    letter-spacing: 0.5px; /* Subtle spacing */
    margin-top: 0;
    margin-bottom: 1.5rem; /* Added some margin below title */
    text-align: center; /* Titles in forms are often left-aligned */
}

.auth-form .form-group {
    margin-bottom: 1rem; /* Matches original inline style */
}

.auth-form .form-group label {
    display: block;
    margin-bottom: 0.5rem;
    color: #333333; /* Dark color for labels (matches original) */
    font-weight: 500; /* Slightly bolder labels */
}

.auth-form input[type="email"], 
.auth-form input[type="password"],
.auth-form input[type="text"] {
    width: 100%;
    padding: 0.8rem; /* Matches original inline style */
    margin: 0 0 1rem 0; /* Simplified margin, only bottom */
    border: 1px solid #dddddd; /* Matches original inline style */
    border-radius: 4px; /* Matches original inline style */
    font-size: 1rem;
    background: #fdfdfd; /* Very slightly off-white for inputs */
    color: #333333;
    transition: border-color 0.3s ease;
}

.auth-form input[type="email"]:focus, 
.auth-form input[type="password"]:focus,
.auth-form input[type="text"]:focus {
    border-color: #3498db; /* Accent blue on focus (matches original) */
    outline: none;
    box-shadow: 0 0 0 2px rgba(52, 152, 219, 0.2); /* Matches original */
}

/* Specific button style for .auth-form, overriding the #auth-container button if needed */
.auth-form button.btn-primary {
    width: auto; /* NOT full width, as per register.php screenshot */
    padding: 0.8rem 2rem; /* Generous padding for a nice feel, adjust as needed */
    background: #6366f1; /* Using the purple/blue from register button */
    color: white;
    border: none;
    border-radius: 6px; /* Rounded corners for button */
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    display: block; /* To allow centering */
    margin: 1.5rem auto 1rem auto; /* Top, auto horizontal, bottom */
    transition: background-color 0.3s ease;
}

.auth-form button.btn-primary:hover {
    background: #4f46e5; /* Darker shade on hover */
}

.auth-form .auth-links {
    text-align: center;
    margin-top: 1rem; /* Matches original inline style */
}

.auth-form .auth-links a {
    color: #3478db; /* Standard link blue (was #3498db) */
    text-decoration: none;
    transition: color 0.3s ease;
}

.auth-form .auth-links a:hover {
    color: #2980b9; /* Darker blue on hover */
    text-decoration: underline;
}

/* Notification styles within .auth-form, if different from global needed */
.auth-form .notification {
    padding: 1rem;
    margin-bottom: 1rem;
    border-radius: 4px;
    text-align: center;
    /* animation: slideIn 0.3s ease-out; -- animation can be kept if desired */
}

.auth-form .notification.error {
    background: #fee2e2;
    color: #c0392b; /* Slightly darker red than #c00 */
    border: 1px solid #f5c6cb; /* Lighter red border */
}

.auth-form .notification.success {
    background: #e6ffed;
    color: #27ae60; /* Slightly darker green */
    border: 1px solid #c3e6cb;
}

/* Specificity for development status section if needed, though general h2 should cover it */
.development-status h2 {
    color: #ecf0f1; /* Ensure light text */
}

/* Styles for cards within Development Status section */
.status-card {
    background: #ffffff; /* White background for these cards */
    border-radius: 8px;
    padding: 2rem;
    box-shadow: 0 2px 10px rgba(0,0,0,0.07);
}

.status-card h3 {
    color: #2c3e50; /* Dark text for h3 inside status-card */
    margin-bottom: 1.5rem;
}

.status-list {
    list-style: none;
    padding: 0;
}

.status-list li {
    color: #555555; /* Dark gray text for list items */
    padding: 0.75rem 0;
    border-bottom: 1px solid #e0e0e0; /* Lighter border for light card */
}

.status-list li:last-child {
    border-bottom: none;
}

/* CTA Section Styles */
.cta-section {
    text-align: center;
    padding: 3rem;
    background: #ffffff; /* White background */
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.07);
    margin-bottom: 2rem; /* Ensure spacing */
}

.cta-section h2 {
    color: #2c3e50; /* Dark text for h2 inside cta-section */
    margin-bottom: 1rem;
}

.cta-section p {
    color: #555555; /* Dark gray text for paragraph inside cta-section */
    margin-bottom: 2rem;
    font-size: 1.1rem;
}

.auth-buttons {
    margin-top: 2rem;
    display: flex; /* Use flex for better alignment */
    justify-content: center; /* Center buttons */
    gap: 1rem; /* Space between buttons */
}

.auth-buttons .btn-primary,
.auth-buttons .btn-secondary {
    padding: 0.8rem 2rem;
    border-radius: 5px;
    text-decoration: none;
    transition: all 0.3s ease;
    font-weight: 500;
    min-width: 120px; /* Give buttons a min width */
    text-align: center;
    flex-grow: 1; /* Make buttons take equal space if desired, or adjust width/min-width */
    max-width: 200px; /* Prevent buttons from becoming too wide */
}

.auth-buttons .btn-primary {
    background: #3498db;
    color: white;
}

.auth-buttons .btn-secondary {
    background: #566573; /* Darker gray for secondary button */
    color: #ffffff;
}

.auth-buttons .btn-primary:hover {
    background: #2980b9;
    transform: translateY(-2px);
}

.auth-buttons .btn-secondary:hover {
    background: #7f8c8d;
    transform: translateY(-2px);
}

/* Make sure the general h2 styling isn't overridden by more specific inline styles later */
/* ... Styles for .project-grid, .project-card etc. should remain as they are for light cards ... */

/* Review and adjust the global button styles if they conflict with .auth-buttons */
/* The global .btn-primary and .btn-secondary might have width: 100% or width: 30% from previous edits */
/* Ensure they don't make .auth-buttons too large or too small if not intended */

/* ... rest of existing style.css ... */

/* The #auth-container styles from a previous merge are now commented out as they are superseded by the .auth-form styles above 
   If specific #auth-container ID styling is still needed for elements NOT covered by .auth-form, they can be re-introduced carefully.
*/

/* 
#auth-container,
.auth-form { 
    background: #ffffff; 
    border-radius: 12px; 
    box-shadow: 0 4px 24px rgba(0,0,0,0.08); 
    color: #333333; 
}

#auth-container {
    width: 90%;
    max-width: 400px;
    min-width: 280px;
    margin: 60px auto;
    padding: 32px 28px 24px 28px;
}

#auth-container h1,
.auth-form h1, 
#auth-container h2 {
    color: #2c3e50; 
    font-weight: 600;
    letter-spacing: 0.5px;
    margin-top: 0; 
}

#auth-container .form-group label,
.auth-form .form-group label {
    display: block;
    margin-bottom: 0.5rem;
    color: #333333; 
}

#auth-container input[type="email"], 
#auth-container input[type="password"],
#auth-container input[type="text"],
.auth-form input[type="email"], 
.auth-form input[type="password"],
.auth-form input[type="text"] {
    width: 100%; 
    padding: 10px 12px;
    margin: 8px 0 16px 0; 
    border: 1px solid #d1d5db; 
    border-radius: 6px; 
    font-size: 1rem;
    background: #f8f9fa; 
    color: #333333; 
    transition: border-color 0.2s, box-shadow 0.2s;
}

#auth-container input[type="email"]:focus, 
#auth-container input[type="password"]:focus,
#auth-container input[type="text"]:focus,
.auth-form input[type="email"]:focus, 
.auth-form input[type="password"]:focus,
.auth-form input[type="text"]:focus {
    border-color: #6366f1; 
    outline: none;
    box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.2); 
}

#auth-container button,
.auth-form button.btn-primary {
    width: auto; 
    padding: 10px 25px; 
    background: #6366f1; 
    color: #ffffff; 
    border: none;
    border-radius: 6px;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    margin-bottom: 12px;
    margin-top: 8px; 
    display: block; 
    margin-left: auto;
    margin-right: auto;
    transition: background 0.2s;
}
#auth-container button:hover,
.auth-form button.btn-primary:hover {
    background: #4f46e5; 
}

#auth-container .links a,
.auth-form .auth-links a {
    color: #3478db; 
    text-decoration: none;
    font-size: 0.97rem;
}
#auth-container .links a:hover,
.auth-form .auth-links a:hover {
    text-decoration: underline;
}

#auth-container .notification.error, 
#auth-container .error,
.auth-form .notification.error {
    color: #b91c1c;
    background: #fee2e2;
    border: 1px solid #fca5a5;
}

#auth-container .notification.success, 
#auth-container .success,
.auth-form .notification.success {
    color: #166534;
    background: #dcfce7;
    border: 1px solid #86efac;
}

@media screen and (max-width: 480px) {
    #auth-container,
    .auth-form {
        width: 95%;
        margin: 40px auto;
        padding: 24px 20px 20px 20px;
    }
    
    #auth-container input[type="email"], 
    #auth-container input[type="password"],
    #auth-container input[type="text"],
    .auth-form input[type="email"], 
    .auth-form input[type="password"],
    .auth-form input[type="text"] {
        padding: 8px 10px;
        font-size: 0.95rem;
    }
    
    #auth-container button,
    .auth-form button.btn-primary {
        padding: 8px 0;
        font-size: 0.95rem;
    }
}
*/

/* Specificity for development status section if needed, though general h2 should cover it */
/* ... (rest of the file, including .development-status, .status-card, .cta-section, etc.) */

/* ... existing code ... */

/* MFA Setup Page Specific Text Styles */
.auth-form #setupInstructions p,
.auth-form #setupInstructions ol,
.auth-form #setupInstructions li {
    color: #333333; /* Dark text for instructions */
}

.auth-form #setupInstructions ol {
    padding-left: 20px; /* Ensure list padding for ol */
    margin-top: 1rem;
    margin-bottom: 1.5rem;
}

.auth-form #setupInstructions li {
    margin-bottom: 0.75rem; /* Space out list items */
}

/* Ensure buttons within auth-form that are NOT btn-primary also get some base styling if needed */
/* The "Begin MFA Setup" button has class btn-primary, so it should be styled by existing .auth-form button.btn-primary rules */

/* ... rest of existing style.css ... */