/* Global Resets and Base Styles */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Share Tech Mono', monospace;
    transition: background-color 0.3s ease, color 0.3s ease;
    line-height: 1.6;
    overflow-x: hidden; /* Prevent horizontal scroll on small screens if content overflows slightly */
}

/* CSS Variables for Theming */
:root {
    --font-primary: 'Share Tech Mono', monospace;
    --color-primary-accent: #ed6a32;
    --color-text-light: #333;
    --color-background-light: #ffffff;
    --color-form-bg-light: #f9f9f9;
    --color-border-light: #ddd;

    --color-text-dark: #f0f0f0;
    --color-background-dark: #1a1a1a; /* Slightly lighter than pure black for depth */
    --color-form-bg-dark: #2c2c2c;
    --color-border-dark: #444;

    --shadow-light: 0 4px 12px rgba(0, 0, 0, 0.1);
    --shadow-dark: 0 4px 12px rgba(0, 0, 0, 0.3);
    --border-radius: 8px;
}

/* Light Theme (Default) */
body[data-theme="light"] {
    background-color: var(--color-background-light);
    color: var(--color-text-light);
}

body[data-theme="light"] .form-container,
body[data-theme="light"] .content-block,
body[data-theme="light"] .dashboard-header,
body[data-theme="light"] .sidebar {
    background-color: var(--color-form-bg-light);
    border: 1px solid var(--color-border-light);
    box-shadow: var(--shadow-light);
}
body[data-theme="light"] .split-left {
    background-color: #333; /* Dark background for left side in light mode */
    color: var(--color-text-dark);
}
body[data-theme="light"] .split-left .logo-title,
body[data-theme="light"] .split-left .tagline {
    color: #fff;
}
body[data-theme="light"] .split-left .terminal-art pre {
    color: #a0a0a0; /* Lighter grey for terminal art text in light mode */
}
body[data-theme="light"] .split-right {
    background-color: var(--color-background-light);
}
body[data-theme="light"] input[type="text"],
body[data-theme="light"] input[type="email"],
body[data-theme="light"] input[type="password"] {
    background-color: #fff;
    border: 1px solid var(--color-border-light);
    color: var(--color-text-light);
}
body[data-theme="light"] input[type="text"]:focus,
body[data-theme="light"] input[type="email"]:focus,
body[data-theme="light"] input[type="password"]:focus {
    border-color: var(--color-primary-accent);
    box-shadow: 0 0 0 2px rgba(237, 106, 50, 0.2);
}
body[data-theme="light"] .sidebar {
    background-color: #f0f0f0;
}
body[data-theme="light"] .sidebar a {
    color: #333;
}
body[data-theme="light"] .sidebar a:hover,
body[data-theme="light"] .sidebar a.active {
    background-color: #e0e0e0;
    color: var(--color-primary-accent);
}


/* Dark Theme */
body[data-theme="dark"] {
    background-color: var(--color-background-dark);
    color: var(--color-text-dark);
}

body[data-theme="dark"] .form-container,
body[data-theme="dark"] .content-block,
body[data-theme="dark"] .dashboard-header,
body[data-theme="dark"] .sidebar {
    background-color: var(--color-form-bg-dark);
    border: 1px solid var(--color-border-dark);
    box-shadow: var(--shadow-dark);
}
body[data-theme="dark"] .split-left {
    background-color: #222; /* Darker shade for left panel in dark mode */
    color: var(--color-text-dark);
    border-right: 2px solid var(--color-primary-accent); /* Orange accent */
}
body[data-theme="dark"] .split-left .logo-title {
    color: var(--color-primary-accent);
}
body[data-theme="dark"] .split-left .tagline {
    color: #ccc;
}
body[data-theme="dark"] .split-left .terminal-art pre {
    color: #777; /* Dimmed terminal art text in dark mode */
}
body[data-theme="dark"] .split-right {
    background-color: var(--color-background-dark);
}
body[data-theme="dark"] input[type="text"],
body[data-theme="dark"] input[type="email"],
body[data-theme="dark"] input[type="password"] {
    background-color: #333;
    border: 1px solid var(--color-border-dark);
    color: var(--color-text-dark);
}
body[data-theme="dark"] input[type="text"]:focus,
body[data-theme="dark"] input[type="email"]:focus,
body[data-theme="dark"] input[type="password"]:focus {
    border-color: var(--color-primary-accent);
    box-shadow: 0 0 0 2px rgba(237, 106, 50, 0.3);
}
body[data-theme="dark"] .sidebar {
    background-color: #252525;
}
body[data-theme="dark"] .sidebar a {
    color: #f0f0f0;
}
body[data-theme="dark"] .sidebar a:hover,
body[data-theme="dark"] .sidebar a.active {
    background-color: #333;
    color: var(--color-primary-accent);
}
body[data-theme="dark"] #theme-toggle {
    background-color: #111;
}

/* Theme Toggle Button */
#theme-toggle {
    position: fixed;
    top: 16px;
    right: 20px;
    width: 50px;
    height: 26px;
    border-radius: 13px;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    padding: 3px;
    transition: background-color 0.3s ease;
    z-index: 1000;
}

/* In style.css */

.dashboard-header {
    position: sticky;
    top: 0;
    z-index: 1000; /* Ensures the header stays on top of other content */
    /* The header already has a background color from the theme, which is needed for sticky to look right */
}

.toggle-knob {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    transition: transform 0.3s ease, background-color 0.3s ease;
    position: relative;
}

/* Light mode toggle */
body[data-theme="light"] #theme-toggle {
    background-color: #eee; /* Toggle background light */
    border: 1px solid #ccc;
}
body[data-theme="light"] .toggle-knob {
    background-color: #f9d71c; /* Sun yellow */
    box-shadow: 0 0 5px #f9d71c; /* Optional glow */
    transform: translateX(0px);
}

/* Dark mode toggle */
body[data-theme="dark"] #theme-toggle {
    background-color: #111; /* Toggle background dark */
    border: 1px solid #444;
}
body[data-theme="dark"] .toggle-knob {
    background-color: #aaa; /* Moon color */
    transform: translateX(24px); /* Move knob to the right */
}
/* Moon craters for dark mode */
body[data-theme="dark"] .toggle-knob::before,
body[data-theme="dark"] .toggle-knob::after {
    content: '';
    position: absolute;
    border-radius: 50%;
    background-color: #777; /* Crater color */
}
body[data-theme="dark"] .toggle-knob::before {
    width: 5px;
    height: 5px;
    top: 4px;
    left: 3px;
}
body[data-theme="dark"] .toggle-knob::after {
    width: 3px;
    height: 3px;
    top: 10px;
    right: 4px;
}


/* Login/Signup Page Specific Styles */
.login-signup-container {
    display: flex;
    min-height: 100vh;
    width: 100%;
}

.split-left, .split-right {
    flex: 1;
    padding: 40px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}

.split-left {
    text-align: center;
}
.split-left .branding-content {
    max-width: 450px;
}
.logo-title {
    font-size: 4rem; /* Large logo title */
    margin-bottom: 10px;
    font-family: var(--font-primary);
}
.tagline {
    font-size: 1.2rem;
    margin-bottom: 30px;
    font-family: var(--font-primary);
}
.terminal-art {
    margin-top: 20px;
    font-family: 'Courier New', Courier, monospace; /* Different mono for terminal art */
    font-size: 0.8rem;
    line-height: 1.2;
    white-space: pre;
}
.terminal-art pre {
    transition: color 0.3s ease;
}


.form-container {
    width: 100%;
    max-width: 400px;
    padding: 30px;
    border-radius: var(--border-radius);
    transition: background-color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}

.form-container h2 {
    text-align: center;
    margin-bottom: 25px;
    font-family: var(--font-primary);
    font-size: 2rem;
    color: var(--color-primary-accent);
}

.form-section {
    display: none; /* Hidden by default */
    opacity: 0;
    transition: opacity 0.5s ease-in-out, transform 0.5s ease-in-out;
    transform: translateY(10px);
}
.form-section.active-form {
    display: block;
    opacity: 1;
    transform: translateY(0);
}

.form-group {
    margin-bottom: 20px;
}
.form-group label {
    display: block;
    margin-bottom: 8px;
    font-weight: bold;
    font-size: 0.9rem;
}
.form-group input[type="text"],
.form-group input[type="email"],
.form-group input[type="password"] {
    width: 100%;
    padding: 12px;
    border-radius: var(--border-radius);
    font-family: var(--font-primary);
    font-size: 1rem;
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
}


.form-options {
    display: flex;
    justify-content: flex-end;
    font-size: 0.9rem;
}
.forgot-password {
    color: var(--color-primary-accent);
    text-decoration: none;
}
.forgot-password:hover {
    text-decoration: underline;
}

.btn {
    display: inline-block;
    padding: 12px 20px;
    border: none;
    border-radius: var(--border-radius);
    cursor: pointer;
    font-family: var(--font-primary);
    font-size: 1rem;
    transition: background-color 0.3s ease, transform 0.1s ease;
    text-align: center;
    text-decoration: none;
}
.btn-primary {
    background-color: var(--color-primary-accent);
    color: #fff;
    width: 100%;
}
.btn-primary:hover {
    background-color: #d65c29; /* Darker shade of primary */
    transform: translateY(-1px);
}

.switch-form-text {
    text-align: center;
    margin-top: 20px;
    font-size: 0.9rem;
}
.switch-form-text a {
    color: var(--color-primary-accent);
    font-weight: bold;
    text-decoration: none;
    cursor: pointer;
}
.switch-form-text a:hover {
    text-decoration: underline;
}

.error-message {
    display: block;
    color: #e74c3c; /* Error red */
    font-size: 0.8rem;
    margin-top: 5px;
}

/* Dashboard Specific Styles */
.dashboard-container {
    display: grid;
    grid-template-columns: 250px 1fr; /* Sidebar and main content */
    grid-template-rows: auto 1fr; /* Header and content area */
    grid-template-areas:
        "header header"
        "sidebar main";
    min-height: 100vh;
    transition: background-color 0.3s ease, color 0.3s ease;
}

.dashboard-header {
    grid-area: header;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 30px;
    border-bottom: 1px solid; /* Color set by theme */
    border-color: inherit; /* Use theme border color */
    border-radius: 0; /* Header usually isn't rounded */
}
.logo-title-dashboard {
    font-size: 1.8rem;
    color: var(--color-primary-accent);
    text-decoration: none;
    font-family: var(--font-primary);
}
.header-nav {
    display: flex;
    align-items: center;
}
.profile-icon {
    /* Using currentColor makes SVG inherit text color */
    color: inherit; /* Will be text-light or text-dark */
    cursor: pointer;
    margin-right: 30px; /* Space before theme toggle */
}
body[data-theme="light"] .profile-icon { color: var(--color-text-light); }
body[data-theme="dark"] .profile-icon { color: var(--color-text-dark); }


.sidebar {
    grid-area: sidebar;
    padding: 20px;
    border-right: 1px solid; /* Color set by theme */
    border-color: inherit;
    transition: width 0.3s ease, padding 0.3s ease, background-color 0.3s ease;
    overflow-y: auto;
    border-radius: 0;
}
.sidebar ul {
    list-style: none;
}
.sidebar ul li {
    margin-bottom: 10px;
}
.sidebar ul li a {
    display: flex;
    align-items: center;
    padding: 10px 15px;
    text-decoration: none;
    border-radius: var(--border-radius);
    transition: background-color 0.2s ease, color 0.2s ease;
    font-family: var(--font-primary);
}
.sidebar ul li a .nav-icon {
    margin-right: 10px;
    font-size: 1.2em;
}

#sidebar-toggle {
    display: none; /* Hidden by default, shown on mobile */
    background: none;
    border: none;
    font-size: 1.8rem;
    cursor: pointer;
    padding: 5px 10px;
    margin-bottom: 10px;
    color: inherit;
}

.main-content {
    grid-area: main;
    padding: 30px;
    overflow-y: auto;
}
.main-content h2 {
    margin-bottom: 20px;
    font-size: 1.8rem;
    font-family: var(--font-primary);
}

.content-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 20px;
}
.content-block {
    padding: 20px;
    border-radius: var(--border-radius);
    transition: background-color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}
.content-block h3 {
    margin-bottom: 10px;
    color: var(--color-primary-accent);
    font-family: var(--font-primary);
}
.content-block ul {
    list-style: disc;
    padding-left: 20px;
}
.content-block a {
    color: var(--color-primary-accent);
    text-decoration: none;
}
.content-block a:hover {
    text-decoration: underline;
}


/* Responsive Design */
@media (max-width: 992px) { /* Medium devices (tablets, less than 992px) */
    .login-signup-container {
        flex-direction: column;
    }
    .split-left, .split-right {
        flex: auto; /* Allow them to take natural height */
        min-height: 50vh; /* Ensure they take up space */
        width: 100%;
    }
    .split-left {
        padding: 30px 20px;
    }
    .split-left .branding-content {
        padding-top: 20px; /* Add some top padding on mobile */
    }
    .logo-title {
        font-size: 3rem;
    }
    .tagline {
        font-size: 1rem;
    }
    .form-container {
        padding: 20px;
        margin: 20px auto; /* Center form container on mobile */
    }

    .dashboard-container {
        grid-template-columns: 1fr; /* Single column */
        grid-template-areas:
            "header"
            "sidebar" /* Sidebar could be stacked or overlaid */
            "main";
    }
    .sidebar {
        width: 100%; /* Full width for stacked sidebar */
        border-right: none;
        border-bottom: 1px solid;
        border-color: inherit;
        height: auto; /* Adjust height */
        padding-top: 10px;
        padding-bottom: 10px;
    }
    .sidebar.collapsed { /* Collapsed state for mobile */
        width: 60px;
        padding: 10px 5px;
    }
    .sidebar.collapsed .nav-icon {
        margin-right: 0;
        display: block;
        text-align: center;
    }
    .sidebar.collapsed ul li a {
        justify-content: center;
    }
    .sidebar.collapsed ul li a span:not(.nav-icon) { /* Hide text when collapsed */
        display: none;
    }
    #sidebar-toggle {
        display: block; /* Show toggle button */
        float: left;
        margin-right: 10px;
    }
     .sidebar ul {
        display: flex; /* Horizontal nav items on mobile if not collapsed */
        flex-wrap: wrap;
        justify-content: center;
    }
    .sidebar ul li {
        margin: 5px;
    }
    .sidebar.collapsed ul {
        flex-direction: column; /* Stack icons when collapsed */
    }


}

@media (max-width: 768px) { /* Small devices (landscape phones, less than 768px) */
    .dashboard-header {
        padding: 15px;
    }
    .logo-title-dashboard {
        font-size: 1.5rem;
    }
    .profile-icon {
        margin-right: 20px;
    }
    .main-content {
        padding: 20px;
    }
    .content-grid {
        grid-template-columns: 1fr; /* Single column for content blocks */
    }
}

@media (max-width: 480px) { /* Extra small devices (phones, less than 480px) */
    #theme-toggle {
        top: 10px;
        right: 10px;
    }
    .logo-title {
        font-size: 2.5rem;
    }
    .form-container h2 {
        font-size: 1.6rem;
    }
    .split-left .terminal-art {
        font-size: 0.7rem;
    }
}


/* === Global Resets and Base (Keep your existing or similar) === */
* { margin: 0; padding: 0; box-sizing: border-box; }
body {
    font-family: 'Share Tech Mono', monospace; /* Primary font */
    transition: background-color 0.3s ease, color 0.3s ease;
    line-height: 1.6;
    font-size: 16px; /* Base font size */
}
a { text-decoration: none; color: var(--color-primary-accent); }
a:hover { text-decoration: underline; }
ul { list-style: none; }
img { max-width: 100%; height: auto; }

/* === CSS Variables (Adjust if needed) === */
:root {
    --font-primary: 'Share Tech Mono', monospace;
    --color-primary-accent: #ed6a32;
    --color-primary-accent-darker: #d65c29;
    --border-radius-small: 4px;
    --border-radius-medium: 8px;
    --transition-speed: 0.2s;

    /* Light Theme */
    --color-bg-light: #f7f8fc; /* Off-white background */
    --color-surface-light: #ffffff; /* Card backgrounds */
    --color-text-light: #333333;
    --color-text-muted-light: #777777;
    --color-border-light: #e0e0e0;
    --color-shadow-light: rgba(0, 0, 0, 0.05);

    /* Dark Theme */
    --color-bg-dark: #121212; /* Dark background */
    --color-surface-dark: #1e1e1e; /* Card backgrounds */
    --color-text-dark: #f0f0f0;
    --color-text-muted-dark: #aaaaaa;
    --color-border-dark: #333333;
    --color-shadow-dark: rgba(0, 0, 0, 0.2);
}

/* === Theme Application === */
body.light-theme {
    background-color: var(--color-bg-light);
    color: var(--color-text-light);
}
body.dark-theme {
    background-color: var(--color-bg-dark);
    color: var(--color-text-dark);
}

/* === Theme Toggle (Keep your improved version) === */
/* Paste your enhanced #theme-toggle and .toggle-knob styles here */
#theme-toggle {
    position: fixed;
    top: 18px; /* Adjusted for header height */
    right: 20px;
    width: 60px;
    height: 30px;
    border-radius: 15px;
    cursor: pointer;
    display: flex;
    align-items: center;
    padding: 3px;
    transition: background-color 0.4s ease, box-shadow 0.4s ease;
    z-index: 1001; /* Above header */
}
.toggle-knob {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    transition: transform 0.4s cubic-bezier(0.68, -0.55, 0.27, 1.55), background-color 0.4s ease, box-shadow 0.4s ease;
    position: relative;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.25);
}
body.light-theme #theme-toggle {
    background-color: #e0e0e0;
    box-shadow: 0 1px 2px rgba(0,0,0,0.1), inset 0 1px 3px rgba(0,0,0,0.2);
    border: 1px solid #c5c5c5;
}
body.light-theme .toggle-knob {
    background: radial-gradient(circle at 50% 40%, #fff2a8, #f9d71c);
    transform: translateX(2px);
    box-shadow: 0 3px 5px rgba(0,0,0,0.2), 0 0 5px rgba(249, 215, 28, 0.7);
}
body.dark-theme #theme-toggle {
    background-color: #282828;
    box-shadow: 0 1px 2px rgba(0,0,0,0.3), inset 0 1px 3px rgba(0,0,0,0.5);
    border: 1px solid #1a1a1a;
}
body.dark-theme .toggle-knob {
    background: radial-gradient(circle at 50% 40%, #e0e0e0, #b0b0b0);
    transform: translateX(31px);
    box-shadow: 0 3px 5px rgba(0,0,0,0.3), inset 0 1px 1px rgba(255,255,255,0.1);
}
body.dark-theme .toggle-knob::before, body.dark-theme .toggle-knob::after {
    content: ''; position: absolute; border-radius: 50%;
    background-color: rgba(0,0,0,0.15); box-shadow: inset 0.5px 0.5px 1px rgba(0,0,0,0.3);
    transition: background-color 0.4s ease, box-shadow 0.4s ease;
}
body.dark-theme .toggle-knob::before { width: 7px; height: 7px; top: 4px; left: 4px; background-color: rgba(0,0,0,0.1); }
body.dark-theme .toggle-knob::after { width: 4px; height: 4px; top: 12px; right: 5px; background-color: rgba(0,0,0,0.15); }


/* === Dashboard Layout === */
.dashboard-layout {
    display: grid;
    grid-template-columns: 240px 1fr; /* Sidebar width and main content */
    grid-template-rows: 60px 1fr;    /* Header height and content area */
    grid-template-areas:
        "header header"
        "sidebar main";
    height: 100vh;
    overflow: hidden; /* Prevent body scroll, allow internal scroll */
}

/* Header */
.dashboard-header {
    grid-area: header;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 20px;
    z-index: 1000;
    transition: background-color var(--transition-speed) ease, border-bottom var(--transition-speed) ease;
}
body.light-theme .dashboard-header {
    background-color: var(--color-surface-light);
    border-bottom: 1px solid var(--color-border-light);
}
body.dark-theme .dashboard-header {
    background-color: var(--color-surface-dark);
    border-bottom: 1px solid var(--color-border-dark);
}
.header-left { display: flex; align-items: center; }
#sidebar-toggle {
    background: none; border: none; cursor: pointer; padding: 8px; margin-right: 15px;
    display: none; /* Show on smaller screens */
}
#sidebar-toggle svg {
    width: 24px; height: 24px;
    stroke: currentColor; /* Inherits text color */
    margin-top: 19px;
}
.logo-title-dashboard {
    font-size: 1.6rem;
    font-weight: bold;
    color: var(--color-primary-accent);
}
.header-right { display: flex; align-items: center; }
.profile-icon-container {
    width: 36px; height: 36px;
    border-radius: 50%;
    background-color: var(--color-primary-accent);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    font-weight: bold;
    cursor: pointer;
    margin-right: 60px; /* Space for theme toggle */
    transition: background-color var(--transition-speed) ease;
}
.profile-icon-container:hover { background-color: var(--color-primary-accent-darker); }
.profile-icon { width: 24px; height: 24px; fill: currentColor; }


/* Sidebar */
.sidebar {
    grid-area: sidebar;
    padding: 20px 10px;
    overflow-y: auto;
    transition: background-color var(--transition-speed) ease, border-right var(--transition-speed) ease, transform 0.3s ease;
}
body.light-theme .sidebar {
    background-color: var(--color-surface-light);
    border-right: 1px solid var(--color-border-light);
}
body.dark-theme .sidebar {
    background-color: var(--color-surface-dark);
    border-right: 1px solid var(--color-border-dark);
}
.sidebar nav ul li { margin-bottom: 8px; }
.sidebar nav ul li a {
    display: flex;
    align-items: center;
    padding: 10px 15px;
    border-radius: var(--border-radius-medium);
    transition: background-color var(--transition-speed) ease, color var(--transition-speed) ease;
    font-size: 0.95rem;
}
body.light-theme .sidebar nav ul li a { color: var(--color-text-muted-light); }
body.dark-theme .sidebar nav ul li a { color: var(--color-text-muted-dark); }

.sidebar nav ul li a:hover,
.sidebar nav ul li a.active {
    color: var(--color-primary-accent);
    background-color: rgba(237, 106, 50, 0.1); /* Accent with low opacity */
}
.sidebar nav ul li a .nav-icon {
    margin-right: 12px;
    font-size: 1.2rem; /* Emoji size */
    width: 20px; /* Align text */
    text-align: center;
}
.sidebar-footer { margin-top: auto; padding-top: 20px; } /* Needs flex parent on ul for auto margin */
.sidebar nav { display: flex; flex-direction: column; height: 100%; }
.sidebar nav ul { flex-grow: 1; }


/* Main Content Area */
.main-content-area {
    grid-area: main;
    padding: 25px 30px;
    overflow-y: auto;
}
.page-header { margin-bottom: 25px; }
.page-header h1 {
    font-size: 2rem;
    margin-bottom: 5px;
    font-weight: normal; /* Share Tech Mono is bold by default */
}
body.light-theme .page-header h1 { color: var(--color-text-light); }
body.dark-theme .page-header h1 { color: var(--color-text-dark); }

.page-subtitle {
    font-size: 1rem;
}
body.light-theme .page-subtitle { color: var(--color-text-muted-light); }
body.dark-theme .page-subtitle { color: var(--color-text-muted-dark); }

.section { margin-bottom: 30px; }
.section h2 {
    font-size: 1.3rem;
    margin-bottom: 15px;
    padding-bottom: 5px;
    border-bottom: 1px solid;
    font-weight: normal;
}
body.light-theme .section h2 { border-bottom-color: var(--color-border-light); color: var(--color-text-light); }
body.dark-theme .section h2 { border-bottom-color: var(--color-border-dark); color: var(--color-text-dark); }

/* Cards */
.card {
    border-radius: var(--border-radius-medium);
    padding: 20px;
    box-shadow: 0 2px 8px var(--color-shadow-light);
    transition: background-color var(--transition-speed) ease, border var(--transition-speed) ease, box-shadow var(--transition-speed) ease;
}
body.light-theme .card {
    background-color: var(--color-surface-light);
    border: 1px solid var(--color-border-light);
}
body.dark-theme .card {
    background-color: var(--color-surface-dark);
    border: 1px solid var(--color-border-dark);
    box-shadow: 0 2px 8px var(--color-shadow-dark);
}

/* Utility Text Classes */
.text-muted { font-size: 0.9em; }
body.light-theme .text-muted { color: var(--color-text-muted-light); }
body.dark-theme .text-muted { color: var(--color-text-muted-dark); }
.small-text { font-size: 0.85em; }

/* Buttons */
.btn {
    padding: 10px 18px;
    border: none;
    border-radius: var(--border-radius-small);
    cursor: pointer;
    font-family: var(--font-primary);
    font-size: 0.9rem;
    transition: background-color var(--transition-speed) ease, color var(--transition-speed) ease, transform 0.1s ease;
    text-align: center;
}
.btn-primary {
    background-color: var(--color-primary-accent);
    color: white;
}
.btn-primary:hover { background-color: var(--color-primary-accent-darker); transform: translateY(-1px); }

.btn-secondary {
    background-color: transparent;
    border: 1px solid var(--color-primary-accent);
    color: var(--color-primary-accent);
}
.btn-secondary:hover {
    background-color: rgba(237, 106, 50, 0.1);
    transform: translateY(-1px);
}
.btn-small { padding: 6px 12px; font-size: 0.8rem; }

/* Forms Minimal */
.form-group-minimal { margin-bottom: 15px; }
.form-group-minimal label { display: block; font-size: 0.9rem; margin-bottom: 5px; }
body.light-theme .form-group-minimal label { color: var(--color-text-muted-light); }
body.dark-theme .form-group-minimal label { color: var(--color-text-muted-dark); }

.form-group-minimal input[type="text"],
.form-group-minimal input[type="email"],
.form-group-minimal input[type="password"],
.form-group-minimal select,
.search-input, .filter-select {
    width: 100%;
    padding: 10px;
    border-radius: var(--border-radius-small);
    font-family: var(--font-primary);
    font-size: 0.95rem;
    transition: border-color var(--transition-speed) ease, background-color var(--transition-speed) ease, color var(--transition-speed) ease;
}
body.light-theme .form-group-minimal input, body.light-theme select, body.light-theme .search-input, body.light-theme .filter-select {
    background-color: var(--color-bg-light); /* Slightly different from card for depth */
    border: 1px solid var(--color-border-light);
    color: var(--color-text-light);
}
body.dark-theme .form-group-minimal input, body.dark-theme select, body.dark-theme .search-input, body.dark-theme .filter-select {
    background-color: var(--color-bg-dark); /* Slightly different from card for depth */
    border: 1px solid var(--color-border-dark);
    color: var(--color-text-dark);
}
.form-group-minimal input:focus, .form-group-minimal select:focus, .search-input:focus, .filter-select:focus {
    outline: none;
    border-color: var(--color-primary-accent);
    box-shadow: 0 0 0 2px rgba(237, 106, 50, 0.2);
}
.form-group-minimal input[readonly] {
    opacity: 0.7; cursor: default;
}
body.light-theme .form-group-minimal input[readonly] { background-color: #e9ecef; }
body.dark-theme .form-group-minimal input[readonly] { background-color: #2a2a2a; }


/* --- Specific Page Styles --- */

/* Dashboard Home */
.dashboard-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 20px;
    margin-bottom: 30px;
}
.summary-card {
    display: flex;         /* Use Flexbox for the internal layout */
    align-items: center;   /* Vertically align the icon and content */
    gap: 20px;             /* Space between the icon and the content block */
    padding: 20px;
}

/* The circular container for the icon/emoji */
.summary-card .card-icon {
    flex-shrink: 0;        /* Prevent the icon container from shrinking */
    width: 48px;
    height: 48px;
    border-radius: 50%;    /* Make it a perfect circle */
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.8rem;     /* Size of the emoji/icon inside */
}

body.light-theme .summary-card .card-icon { background-color: rgba(237, 106, 50, 0.1); }
body.dark-theme .summary-card .card-icon { background-color: rgba(237, 106, 50, 0.2); }

.summary-card .card-content h3 { font-size: 1rem; margin-bottom: 5px; font-weight: normal; }
.summary-card .summary-value { font-size: 1.5rem; font-weight: bold; color: var(--color-primary-accent); }
.summary-card .card-link { font-size: 0.85rem; display: block; margin-top: 8px; }

.progress-bar-minimal {
    height: 8px;
    border-radius: 4px;
    overflow: hidden;
    margin: 8px 0;
}
body.light-theme .progress-bar-minimal { background-color: var(--color-border-light); }
body.dark-theme .progress-bar-minimal { background-color: var(--color-border-dark); }
.progress-minimal {
    height: 100%;
    background-color: var(--color-primary-accent);
    border-radius: 4px;
    transition: width 0.5s ease;
}
.small-progress { height: 6px; }

.card-list .card { margin-bottom: 10px; }
.lab-item-brief { display: flex; justify-content: space-between; align-items: center; padding: 15px; }
.lab-item-brief h4 { font-size: 1rem; font-weight: normal; }

.activity-feed li {
    padding: 8px 0;
    display: flex; align-items: center;
    font-size: 0.9rem;
}
.activity-feed li:not(:last-child) { border-bottom: 1px dashed; }
body.light-theme .activity-feed li:not(:last-child) { border-bottom-color: var(--color-border-light); }
body.dark-theme .activity-feed li:not(:last-child) { border-bottom-color: var(--color-border-dark); }
.activity-icon { margin-right: 10px; font-size: 1.1rem; }
.activity-icon.completed { color: #28a745; } /* Green */
.activity-icon.started { color: #17a2b8; } /* Blue */
.activity-icon.badge-earned { color: #ffc107; } /* Yellow */

/* Labs Page */
.controls-bar { display: flex; gap: 15px; margin-bottom: 20px; }
.search-input { flex-grow: 1; }
.filter-select { min-width: 180px; }

.tabs { display: flex; border-bottom: 1px solid; margin-bottom: 20px; }
body.light-theme .tabs { border-bottom-color: var(--color-border-light); }
body.dark-theme .tabs { border-bottom-color: var(--color-border-dark); }
.tab-link {
    padding: 10px 15px; background: none; border: none; cursor: pointer;
    font-family: var(--font-primary); font-size: 1rem;
    position: relative;
    transition: color var(--transition-speed) ease;
}
body.light-theme .tab-link { color: var(--color-text-muted-light); }
body.dark-theme .tab-link { color: var(--color-text-muted-dark); }
.tab-link.active { color: var(--color-primary-accent); }
.tab-link.active::after {
    content: ''; position: absolute;
    bottom: -1px; left: 0; right: 0; height: 2px;
    background-color: var(--color-primary-accent);
}
.tab-content { display: none; }
.tab-content.active { display: block; }

.labs-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 20px;
}
.lab-card .lab-card-image {
    height: 150px;
    border-radius: var(--border-radius-medium) var(--border-radius-medium) 0 0;
    display: flex; align-items: flex-end; padding: 10px;
    position: relative; /* For difficulty badge */
}
.lab-difficulty {
    position: absolute; top: 10px; right: 10px;
    padding: 3px 8px; border-radius: var(--border-radius-small);
    font-size: 0.8rem; color: white;
}
.lab-difficulty.easy { background-color: #28a745; } /* Green */
.lab-difficulty.medium { background-color: #ffc107; color: #333; } /* Yellow */
.lab-difficulty.hard { background-color: #dc3545; } /* Red */

.lab-card-content { padding: 15px; }
.lab-card-content h3 { font-size: 1.1rem; margin-bottom: 8px; font-weight: normal; }
.lab-card-content p { margin-bottom: 12px; font-size: 0.9rem; line-height: 1.5; }
.lab-tags { margin-bottom: 15px; }
.tag {
    display: inline-block; padding: 3px 8px;
    border-radius: var(--border-radius-small); font-size: 0.75rem; margin-right: 5px;
}
body.light-theme .tag { background-color: #e9ecef; color: var(--color-text-muted-light); }
body.dark-theme .tag { background-color: #343a40; color: var(--color-text-muted-dark); }

.pagination { display: flex; justify-content: center; margin-top: 30px; }
.page-link {
    padding: 8px 12px; margin: 0 3px;
    border-radius: var(--border-radius-small);
    transition: background-color var(--transition-speed) ease, color var(--transition-speed) ease;
}
body.light-theme .page-link { border: 1px solid var(--color-border-light); color: var(--color-text-muted-light); }
body.dark-theme .page-link { border: 1px solid var(--color-border-dark); color: var(--color-text-muted-dark); }
.page-link:hover, .page-link.active {
    background-color: var(--color-primary-accent);
    color: white;
    border-color: var(--color-primary-accent);
}

/* Certifications Page */
.certifications-list .certification-item {
    display: flex; align-items: center; gap: 20px; margin-bottom: 15px;
}
.certification-icon { font-size: 2.5rem; }
.certification-details { flex-grow: 1; }
.certification-details h3 { font-size: 1.1rem; margin-bottom: 5px; font-weight: normal; }
.achievements-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 20px;
}
.achievement-card { text-align: center; }
.achievement-icon-large { font-size: 3rem; margin-bottom: 10px; }
.achievement-icon-large.gold { color: #ffd700; }
.achievement-card h4 { font-size: 1.05rem; margin-bottom: 5px; font-weight: normal; }

/* Progress Page */
.progress-overview .card { text-align: center; max-width: 300px; margin: 0 auto 30px auto; }
.progress-circle-container { position: relative; width: 120px; height: 120px; margin: 15px auto; }
.progress-ring-bg, .progress-ring-fg {
    transform-origin: 50% 50%;
    transform: rotate(-90deg); /* Start from top */
}
body.light-theme .progress-ring-bg { stroke: var(--color-border-light); }
body.dark-theme .progress-ring-bg { stroke: var(--color-border-dark); }
.progress-ring-fg { stroke: var(--color-primary-accent); stroke-linecap: round; transition: stroke-dashoffset 0.5s ease; }
.progress-circle-text {
    position: absolute; top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    font-size: 1.5rem; font-weight: bold;
}
body.light-theme .progress-circle-text { color: var(--color-text-light); }
body.dark-theme .progress-circle-text { color: var(--color-text-dark); }


.skill-list .skill-item { margin-bottom: 15px; }
.skill-info { display: flex; justify-content: space-between; font-size: 0.9rem; margin-bottom: 5px; }
.completed-modules-list li { padding: 8px 0; font-size: 0.95rem; }
.completed-modules-list li span:first-child { margin-right: 8px; color: #28a745; }

.badges-grid { display: flex; flex-wrap: wrap; gap: 15px; }
.badge-item {
    padding: 10px 15px; border-radius: var(--border-radius-medium);
    font-size: 0.9rem; display: flex; align-items: center;
}
body.light-theme .badge-item { background-color: #e9ecef; color: var(--color-text-light); }
body.dark-theme .badge-item { background-color: #2c3136; color: var(--color-text-dark); }
.badge-icon { font-size: 1.3rem; margin-right: 8px; }

/* Profile/Settings Page */
.profile-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 20px;
}
.profile-card h3, .security-card h3, .preferences-card h3 {
    font-size: 1.15rem; margin-bottom: 15px; font-weight: normal;
}
.toggle-switch { display: flex; align-items: center; margin-bottom: 10px; }
.toggle-checkbox {
    height: 0; width: 0; visibility: hidden;
}
.toggle-label-switch {
    cursor: pointer; text-indent: -9999px;
    width: 40px; height: 22px; background: grey;
    display: block; border-radius: 100px; position: relative;
    margin-right: 10px;
}
body.light-theme .toggle-label-switch { background: #bdc3c7; } /* Light grey inactive */
body.dark-theme .toggle-label-switch { background: #7f8c8d; } /* Dark grey inactive */

.toggle-label-switch:after {
    content: ''; position: absolute;
    top: 2px; left: 2px;
    width: 18px; height: 18px;
    background: #fff; border-radius: 18px;
    transition: 0.2s;
}
.toggle-checkbox:checked + .toggle-label-switch { background: var(--color-primary-accent); }
.toggle-checkbox:checked + .toggle-label-switch:after { left: calc(100% - 2px); transform: translateX(-100%); }
.toggle-label-switch:active:after { width: 24px; } /* Visual feedback on click */

/* --- Responsive Design --- */
@media (max-width: 992px) {
    .dashboard-layout {
        grid-template-columns: 1fr; /* Sidebar stacks or overlays */
        grid-template-areas:
            "header"
            "main"; /* Sidebar will be absolutely positioned or removed from flow */
    }
    .sidebar {
        position: fixed; top: 60px; left: 0; bottom: 0;
        width: 240px;
        transform: translateX(-100%);
        z-index: 999;
        box-shadow: 2px 0 10px var(--color-shadow-dark); /* More visible shadow when overlayed */
    }
    .sidebar.open {
        transform: translateX(0);
    }
    #sidebar-toggle { display: block; } /* Show toggle button */
    .profile-icon-container { margin-right: 61px; /* Adjust for theme toggle + sidebar toggle potentially */ }
}

@media (max-width: 768px) {
    .main-content-area { padding: 20px; }
    .page-header h1 { font-size: 1.8rem; }
    .dashboard-grid, .labs-grid, .achievements-grid, .profile-grid {
        grid-template-columns: 1fr; /* Stack cards */
    }
    .controls-bar { flex-direction: column; }
}

@media (max-width: 480px) {
    .dashboard-header { padding: 0 15px; }
    #theme-toggle { top: 15px; right: 15px; width: 50px; height: 26px; }
    #theme-toggle .toggle-knob { width: 20px; height: 20px; }
    body.dark-theme #theme-toggle .toggle-knob { transform: translateX(31px); }
    /* Adjust other small screen styles if needed */
}

/* Sidebar collapsed state for minimal look when always visible on desktop */
.sidebar.collapsed {
    width: 70px; /* Collapsed width */
}
.sidebar.collapsed .nav-text {
    display: none; /* Hide text */
}
.sidebar.collapsed .nav-link {
    justify-content: center; /* Center icon */
}
.sidebar.collapsed .nav-icon {
    margin-right: 0;
}
.sidebar.collapsed .sidebar-footer .nav-text { display: none; } /* Ensure footer text also hides */

/* Ensure desktop sidebar toggle also works with collapsed class if you implement it */
/* This example focuses on mobile overlay sidebar toggle */


/* === Global Resets and Base (Update font-family) === */
* { margin: 0; padding: 0; box-sizing: border-box; }
body {
    font-family: var(--font-body); /* CHANGED */
    transition: background-color 0.3s ease, color 0.3s ease;
    line-height: 1.6;
    font-size: 16px;
    -webkit-font-smoothing: antialiased; /* Smoother fonts */
    -moz-osx-font-smoothing: grayscale;
}
/* ... rest of your global styles ... */

/* === CSS Variables (Add new font variables, adjust colors slightly for more minimal look) === */
:root {
    --font-display: 'Share Tech Mono', monospace;
    --font-body: 'Inter', sans-serif; /* NEW */
    --color-primary-accent: #ed6a32;
    --color-primary-accent-darker: #d65c29;
    --color-primary-accent-lighter: #f28657; /* NEW for hovers/accents */
    --border-radius-small: 6px; /* Slightly more rounded */
    --border-radius-medium: 10px;
    --transition-speed: 0.25s; /* Slightly slower for smoother feel */
    --transition-speed-fast: 0.15s;

    /* Light Theme */
    --color-bg-light: #ffffff; /* Pure white for ultra minimal */
    --color-surface-light: #f9fafb; /* Slightly off-white for cards/surfaces */
    --color-text-light: #1f2937; /* Darker grey for better contrast */
    --color-text-muted-light: #6b7280; /* Softer muted text */
    --color-border-light: #e5e7eb; /* Lighter borders */
    --color-shadow-light: rgba(99, 102, 241, 0.08); /* Subtle, slightly colored shadow */
    --color-input-bg-light: #f9fafb;
    --color-input-border-light: #d1d5db;


    /* Dark Theme */
    --color-bg-dark: #111827; /* Dark blue-grey */
    --color-surface-dark: #1f2937; /* Slightly lighter surface */
    --color-text-dark: #f3f4f6; /* Off-white text */
    --color-text-muted-dark: #9ca3af;
    --color-border-dark: #374151;
    --color-shadow-dark: rgba(0, 0, 0, 0.2);
    --color-input-bg-dark: #374151;
    --color-input-border-dark: #4b5563;
}

/* Apply font variables */
h1, h2, h3, h4, h5, h6, .logo-title, .logo-title-dashboard { /* Logo title class might be removed if only image */
    font-family: var(--font-display);
}


/* === Login/Signup Page Styles (NEW/OVERHAULED) === */
.auth-container {
    display: flex;
    min-height: 100vh;
    width: 100%;
}

.auth-split-left, .auth-split-right {
    flex: 1;
    padding: 40px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    transition: background-color var(--transition-speed) ease;
}

.auth-split-left {
    text-align: center;
}
body.light-theme .auth-split-left { background-color: #f3f4f6; /* Light grey, almost white */ }
body.dark-theme .auth-split-left { background-color: #1f2937; /* Dark surface color */ }

.auth-logo {
    max-height: 50px; /* Adjust as needed */
    width: auto;
    margin-bottom: 20px;
}
.light-mode-logo { display: block; }
.dark-mode-logo { display: none; }
body.dark-theme .light-mode-logo { display: none; }
body.dark-theme .dark-mode-logo { display: block; }

.auth-split-left .tagline {
    font-family: var(--font-body);
    font-size: 1.1rem;
    margin-bottom: 30px;
}
body.light-theme .auth-split-left .tagline { color: var(--color-text-muted-light); }
body.dark-theme .auth-split-left .tagline { color: var(--color-text-muted-dark); }

.decorative-art svg {
    color: var(--color-primary-accent);
}

.auth-split-right {
    /* Background will be main body background */
}
.form-wrapper {
    width: 100%;
    max-width: 420px; /* Slightly wider */
    padding: 30px;
}
.form-wrapper h2 {
    font-size: 2.2rem;
    margin-bottom: 10px;
    text-align: center;
    color: var(--color-primary-accent);
}
.form-subtitle {
    text-align: center;
    margin-bottom: 30px;
    font-size: 1rem;
}
body.light-theme .form-subtitle { color: var(--color-text-muted-light); }
body.dark-theme .form-subtitle { color: var(--color-text-muted-dark); }


.form-section { /* Keep existing fade/slide for form switch if desired */
    display: none;
    opacity: 0;
    transition: opacity 0.4s ease-in-out, transform 0.4s ease-in-out;
    transform: translateY(15px); /* Slightly more movement */
}
.form-section.active-form { display: block; opacity: 1; transform: translateY(0); }

/* Refined Form Groups (using .form-group-minimal from dashboard) */
.auth-container .form-group-minimal label {
    font-weight: 500; /* Medium weight for Inter */
    font-size: 0.875rem;
}
body.light-theme .auth-container .form-group-minimal label { color: var(--color-text-light); }
body.dark-theme .auth-container .form-group-minimal label { color: var(--color-text-dark); }

.auth-container .form-group-minimal input[type="text"],
.auth-container .form-group-minimal input[type="email"],
.auth-container .form-group-minimal input[type="password"] {
    padding: 12px; /* More padding */
    font-size: 1rem; /* Larger font in input */
    /* Background and border colors will be inherited from global .form-group-minimal styles */
}
body.light-theme .auth-container .form-group-minimal input {
    background-color: var(--color-input-bg-light);
    border: 1px solid var(--color-input-border-light);
}
body.dark-theme .auth-container .form-group-minimal input {
    background-color: var(--color-input-bg-dark);
    border: 1px solid var(--color-input-border-dark);
}

.form-options {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    font-size: 0.875rem;
}
.remember-me { display: flex; align-items: center; cursor: pointer; }
.remember-me input[type="checkbox"] { margin-right: 8px; accent-color: var(--color-primary-accent); }
body.light-theme .remember-me, body.light-theme .forgot-password-link { color: var(--color-text-muted-light); }
body.dark-theme .remember-me, body.dark-theme .forgot-password-link { color: var(--color-text-muted-dark); }
.forgot-password-link:hover, .link-accent:hover { color: var(--color-primary-accent); text-decoration: underline; }
.link-accent { color: var(--color-primary-accent); font-weight: 500; }

.btn-full-width { width: 100%; padding: 12px; font-size: 1rem; font-weight: 500; }

.switch-form-text { text-align: center; margin-top: 25px; font-size: 0.9rem; }
body.light-theme .switch-form-text { color: var(--color-text-muted-light); }
body.dark-theme .switch-form-text { color: var(--color-text-muted-dark); }

.error-text { /* Was #password-match-error */
    display: block; color: #e53e3e; /* Red for errors */
    font-size: 0.8rem; margin-top: 5px;
}


/* === Theme Toggle Button (Ensure your best version is here) === */
/* This should be the "enhanced depth" version you liked */
#theme-toggle {
    position: fixed;
    top: 16px; /* Can adjust per page if needed, or ensure header doesn't overlap */
    right: 20px;
    width: 60px;
    height: 30px;
    border-radius: 15px;
    cursor: pointer;
    display: flex;
    align-items: center;
    padding: 3px;
    transition: background-color 0.4s ease, box-shadow 0.4s ease;
    z-index: 1100; /* High z-index */
}
.toggle-knob {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    transition: transform 0.4s cubic-bezier(0.68, -0.55, 0.27, 1.55), background-color 0.4s ease, box-shadow 0.4s ease;
    position: relative;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.25);
}
#theme-toggle:hover .toggle-knob { /* Subtle hover on knob */
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.3);
}

body.light-theme #theme-toggle {
    background-color: #e0e0e0;
    box-shadow: 0 1px 2px rgba(0,0,0,0.1), inset 0 1px 3px rgba(0,0,0,0.2);
    border: 1px solid #c5c5c5;
}
body.light-theme .toggle-knob {
    background: radial-gradient(circle at 50% 40%, #fffadd, #f9d71c); /* Brighter sun */
    transform: translateX(2px);
    box-shadow: 0 3px 5px rgba(0,0,0,0.15), 0 0 8px rgba(249, 215, 28, 0.6);
}
body.light-theme #theme-toggle:hover { box-shadow: 0 2px 4px rgba(0,0,0,0.15), inset 0 1px 3px rgba(0,0,0,0.25); }


body.dark-theme #theme-toggle {
    background-color: #282828;
    box-shadow: 0 1px 2px rgba(0,0,0,0.3), inset 0 1px 3px rgba(0,0,0,0.5);
    border: 1px solid #1a1a1a;
}
body.dark-theme .toggle-knob {
    background: radial-gradient(circle at 50% 40%, #cccccc, #999999); /* Silvery moon */
    transform: translateX(29px);
    box-shadow: 0 3px 5px rgba(0,0,0,0.3), inset 0 1px 1px rgba(255,255,255,0.05);
}
body.dark-theme #theme-toggle:hover { box-shadow: 0 2px 4px rgba(0,0,0,0.35), inset 0 1px 3px rgba(0,0,0,0.55); }


body.dark-theme .toggle-knob::before, body.dark-theme .toggle-knob::after {
    /* ... existing crater styles ... */
    content: ''; position: absolute; border-radius: 50%;
    background-color: rgba(0,0,0,0.2); /* Slightly darker craters */
    box-shadow: inset 0.5px 0.5px 1px rgba(0,0,0,0.4);
    transition: background-color 0.4s ease, box-shadow 0.4s ease;
}
body.dark-theme .toggle-knob::before { width: 7px; height: 7px; top: 4px; left: 4px; background-color: rgba(0,0,0,0.15); }
body.dark-theme .toggle-knob::after { width: 4px; height: 4px; top: 12px; right: 5px; background-color: rgba(0,0,0,0.2); }


/* === Dashboard Header Logo === */
.logo-link { display: inline-block; vertical-align: middle; }
.header-logo-img {
    max-height: 30px; /* Adjust to fit your header */
    width: auto;
    display: block; /* Removes extra space below image */
    margin-top: 7px;
}
/* Show appropriate logo based on theme */
body.light-theme .dark-mode-logo { display: none; }
body.light-theme .light-mode-logo { display: block; }
body.dark-theme .light-mode-logo { display: none; }
body.dark-theme .dark-mode-logo { display: block; }

/* Adjust header padding if logo changes height significantly */
.dashboard-header {
    padding: 0 25px; /* More padding */
    height: 64px; /* Slightly taller header */
}
.sidebar { top: 64px; /* Match header height */ }


/* === Dashboard General Refinements === */
.card {
    border-radius: var(--border-radius-medium);
    padding: 20px; /* Standard padding */
    box-shadow: 0 4px 12px var(--color-shadow-light); /* More defined but soft shadow */
    transition: background-color var(--transition-speed) ease,
                border var(--transition-speed) ease,
                box-shadow var(--transition-speed) ease,
                transform var(--transition-speed-fast) ease; /* For hover */
}
.card:hover {
    transform: translateY(-3px); /* Subtle lift on hover */
    box-shadow: 0 6px 16px var(--color-shadow-light);
}
body.dark-theme .card {
    box-shadow: 0 4px 12px var(--color-shadow-dark);
}
body.dark-theme .card:hover {
    box-shadow: 0 6px 16px var(--color-shadow-dark);
}

/* Main Content Area padding */
.main-content-area {
    padding: 30px 35px; /* More horizontal padding */
}

/* Page Titles */
.page-header h1 {
    font-size: 2.25rem; /* Larger page titles */
    font-weight: 600; /* Using Inter's weight */
    font-family: var(--font-body); /* Using body font for page titles for readability */
    letter-spacing: -0.5px; /* Tighten spacing slightly */
}
body.light-theme .page-header h1 { color: #111827; } /* Darker for titles */
body.dark-theme .page-header h1 { color: #e5e7eb; }

.page-subtitle {
    font-size: 1rem;
    font-family: var(--font-body);
}

/* Section Titles */
.section h2 {
    font-size: 1.5rem; /* Slightly larger */
    font-family: var(--font-body);
    font-weight: 600;
    letter-spacing: -0.2px;
    padding-bottom: 8px; /* More space for border */
    margin-bottom: 20px; /* More space after title */
}

/* Sidebar active link */
.sidebar nav ul li a.active, .sidebar nav ul li a:hover {
    color: var(--color-primary-accent);
    background-color: var(--color-primary-accent-lighter-translucent, rgba(237, 106, 50, 0.08)); /* Ensure this var is defined or use rgba */
    font-weight: 500; /* Make active link slightly bolder */
}
:root { /* Add this if not defined before */
    --color-primary-accent-lighter-translucent: rgba(237, 106, 50, 0.08);
}
body.dark-theme .sidebar nav ul li a.active, body.dark-theme .sidebar nav ul li a:hover {
     background-color: rgba(237, 106, 50, 0.15);
}


/* Input fields in dashboard forms (e.g., profile) */
.form-group-minimal input[type="text"],
.form-group-minimal input[type="email"],
.form-group-minimal input[type="password"],
.form-group-minimal select {
    /* Using Inter for form inputs */
    font-family: var(--font-body);
    font-size: 0.95rem;
    padding: 12px;
}
body.light-theme .form-group-minimal input, body.light-theme .form-group-minimal select {
    background-color: var(--color-input-bg-light); /* Use specific input bg */
    border: 1px solid var(--color-input-border-light);
}
body.dark-theme .form-group-minimal input, body.dark-theme .form-group-minimal select {
    background-color: var(--color-input-bg-dark);
    border: 1px solid var(--color-input-border-dark);
}
.form-group-minimal input:focus, .form-group-minimal select:focus {
    border-color: var(--color-primary-accent);
    box-shadow: 0 0 0 3px rgba(237, 106, 50, 0.15); /* Softer focus ring */
}

/* Button refinements */
.btn {
    font-family: var(--font-body); /* Using body font for buttons */
    font-weight: 500; /* Medium weight */
    letter-spacing: 0.2px;
    padding: 10px 20px; /* Standardized padding */
}
.btn-primary { box-shadow: 0 2px 4px rgba(237, 106, 50, 0.2); }
.btn-primary:hover { box-shadow: 0 3px 6px rgba(237, 106, 50, 0.3); }

/* Lab Card Image Placeholder - for better visual */
.lab-card .lab-card-image {
    /* background-image: linear-gradient(45deg, var(--color-primary-accent), var(--color-primary-accent-lighter)); */
    background-color: #333; /* Default placeholder if no specific color */
    /* You can add actual placeholder images later or use CSS patterns */
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-display);
    font-size: 2rem;
    color: rgba(255,255,255,0.2);
}
body.light-theme .lab-card .lab-card-image {
    background-image: linear-gradient(45deg, #e0e0e0, #f0f0f0);
    color: rgba(0,0,0,0.1);
}
body.dark-theme .lab-card .lab-card-image {
    background-image: linear-gradient(45deg, #2c2c2c, #383838);
    color: rgba(255,255,255,0.1);
}


/* Responsive adjustments for login page */
@media (max-width: 992px) {
    .auth-container { flex-direction: column; }
    .auth-split-left { min-height: auto; padding: 40px 20px; } /* Less padding on mobile */
    .auth-split-left .branding-content { padding-top: 0; }
    .auth-logo { max-height: 40px; }
    .form-wrapper { padding: 20px; margin: 0 auto; }
    .form-wrapper h2 { font-size: 1.8rem; }
}

/* === Lab Environment Specific Styles === */
.lab-environment-layout {
    display: flex;
    flex-direction: column;
    height: 100vh;
    overflow: hidden; /* Prevent body scroll */
}

.lab-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 20px;
    height: 60px; /* Slightly shorter than main dashboard header */
    flex-shrink: 0; /* Prevent header from shrinking */
    transition: background-color var(--transition-speed) ease, border-bottom var(--transition-speed) ease;
}
body.light-theme .lab-header {
    background-color: var(--color-surface-light);
    border-bottom: 1px solid var(--color-border-light);
}
body.dark-theme .lab-header {
    background-color: var(--color-surface-dark);
    border-bottom: 1px solid var(--color-border-dark);
}

.lab-header-left {
    display: flex;
    align-items: center;
    gap: 15px;
}
.back-to-dashboard-link {
    display: flex;
    align-items: center;
    padding: 8px;
    border-radius: var(--border-radius-small);
    transition: background-color var(--transition-speed-fast) ease;
}
.back-to-dashboard-link svg {
    stroke: currentColor; /* Inherits color from parent link */
    width: 22px; height: 22px;
}
.back-to-dashboard-link span {
    margin-left: 5px;
    font-family: var(--font-body);
    font-weight: 500;
    font-size: 0.95rem;
}
body.light-theme .back-to-dashboard-link { color: var(--color-text-muted-light); }
body.dark-theme .back-to-dashboard-link { color: var(--color-text-muted-dark); }
.back-to-dashboard-link:hover {
    color: var(--color-primary-accent);
    background-color: var(--color-primary-accent-translucent);
}

#lab-title-header {
    font-family: var(--font-display);
    font-size: 1.3rem; /* Lab title in header */
    font-weight: normal;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
body.light-theme #lab-title-header { color: var(--color-text-light); }
body.dark-theme #lab-title-header { color: var(--color-text-dark); }


.lab-header-right {
    display: flex;
    align-items: center;
}
/* Ensure #theme-toggle from global styles is picked up.
   If it was fixed, it's fine. If it was part of header-actions-wrapper,
   it will be positioned correctly here too. */
.lab-header-right #theme-toggle {
    /* Adjust if specific positioning needed separate from dashboard one */
    /* For instance, if it needs to be closer to edge without profile icon */
}


.lab-main-content {
    display: grid;
    grid-template-columns: 320px 1fr 320px; /* Info | Instructions | Tools - Adjust widths */
    gap: 20px;
    padding: 20px;
    flex-grow: 1; /* Allow main content to fill remaining space */
    overflow: hidden; /* Prevent layout scroll, allow panel scroll */
}

.lab-panel {
    display: flex;
    flex-direction: column;
    overflow-y: auto; /* Allow individual panels to scroll */
    height: calc(100vh - 60px - 40px); /* Full height minus header and padding */
    padding: 20px; /* Card padding */
}
.lab-panel h2, .lab-panel h3, .lab-panel h4 {
    font-family: var(--font-body); /* Body font for readability in lab */
    font-weight: 600;
    margin-bottom: 15px;
}
.lab-panel h2 { font-size: 1.2rem; }
.lab-panel h3 { font-size: 1.1rem; }
.lab-panel h4 { font-size: 1rem; margin-bottom: 10px; }

.lab-panel-info .lab-meta p {
    font-family: var(--font-body);
    font-size: 0.9rem;
    margin-bottom: 8px;
}
.lab-meta .lab-difficulty { /* Re-use from general lab card styles if defined */
    padding: 2px 6px; font-size: 0.7rem; text-transform: uppercase;
    border-radius: var(--border-radius-small); color: white; display: inline-block;
}
.lab-meta .lab-difficulty.easy { background-color: #10b981; }

.lab-objectives { margin-bottom: 20px; }
.lab-objectives ul { list-style: disc; padding-left: 20px; font-family: var(--font-body); font-size: 0.9rem; }
.lab-objectives ul li { margin-bottom: 5px; }

.environment-controls .control-buttons {
    display: flex;
    flex-wrap: wrap; /* Allow buttons to wrap on smaller panel width */
    gap: 10px;
    margin-bottom: 15px;
}
.environment-controls .btn .btn-icon { margin-right: 6px; }
.status-indicator {
    font-family: var(--font-body);
    font-size: 0.95rem;
    margin-bottom: 10px;
    padding: 8px;
    border-radius: var(--border-radius-small);
    text-align: center;
}
body.light-theme .status-indicator { background-color: #e9ecef; }
body.dark-theme .status-indicator { background-color: #374151; }

#lab-status.status-stopped { color: #ef4444; font-weight: 600; } /* Red */
#lab-status.status-starting, #lab-status.status-stopping { color: #f59e0b; font-weight: 600; } /* Amber */
#lab-status.status-running { color: #10b981; font-weight: 600; } /* Green */

.machine-ip-info {
    font-family: var(--font-body);
    font-size: 0.9rem;
    padding: 10px;
    border-radius: var(--border-radius-small);
    margin-top: 10px;
    word-break: break-all;
}
body.light-theme .machine-ip-info { background-color: var(--color-input-bg-light); border: 1px solid var(--color-input-border-light); }
body.dark-theme .machine-ip-info { background-color: var(--color-input-bg-dark); border: 1px solid var(--color-input-border-dark); }
#machine-ip { font-weight: 600; color: var(--color-primary-accent); }


.lab-panel-instructions .tab-content { /* Using existing tab-content styles for fade */
    font-family: var(--font-body);
    font-size: 0.95rem;
    line-height: 1.7;
}
.lab-panel-instructions .tab-content h4 { margin-top: 20px; margin-bottom: 8px; }
.lab-panel-instructions .tab-content p,
.lab-panel-instructions .tab-content ol,
.lab-panel-instructions .tab-content ul {
    margin-bottom: 15px;
}
.lab-panel-instructions .tab-content ol,
.lab-panel-instructions .tab-content ul {
    padding-left: 25px;
}
.lab-panel-instructions .tab-content code {
    font-family: var(--font-display); /* Share Tech Mono for code */
    padding: 2px 5px;
    border-radius: var(--border-radius-small);
    font-size: 0.9em;
}
body.light-theme .lab-panel-instructions .tab-content code { background-color: #e9ecef; color: #c82829; } /* Light bg, red-ish text */
body.dark-theme .lab-panel-instructions .tab-content code { background-color: #374151; color: #ff79c6; } /* Dark bg, pink-ish text */

.challenge-input {
    width: 100%;
    padding: 8px 10px;
    margin-top: 5px;
    border-radius: var(--border-radius-small);
    font-family: var(--font-body);
}
body.light-theme .challenge-input { background-color: var(--color-input-bg-light); border: 1px solid var(--color-input-border-light); color: var(--color-text-light); }
body.dark-theme .challenge-input { background-color: var(--color-input-bg-dark); border: 1px solid var(--color-input-border-dark); color: var(--color-text-dark); }
.challenge-input:focus { outline: none; border-color: var(--color-primary-accent); box-shadow: 0 0 0 2px rgba(237, 106, 50, 0.15); }

#lab-user-notes {
    width: 100%;
    min-height: 200px;
    padding: 10px;
    font-family: var(--font-body);
    font-size: 0.9rem;
    border-radius: var(--border-radius-small);
    resize: vertical;
    margin-bottom: 10px;
}
body.light-theme #lab-user-notes { background-color: var(--color-input-bg-light); border: 1px solid var(--color-input-border-light); color: var(--color-text-light); }
body.dark-theme #lab-user-notes { background-color: var(--color-input-bg-dark); border: 1px solid var(--color-input-border-dark); color: var(--color-text-dark); }
#lab-user-notes:focus { outline: none; border-color: var(--color-primary-accent); box-shadow: 0 0 0 2px rgba(237, 106, 50, 0.15); }
.notes-status-message {
    font-size: 0.8rem;
    font-family: var(--font-body);
    margin-top: 5px;
    display: inline-block;
}
.notes-status-message.success { color: #10b981; }


.submission-panel .form-group-minimal { margin-bottom: 10px; } /* Tighter spacing for flag */
.submission-panel .form-group-minimal label { font-size: 0.9rem; font-weight: 600; }
.submission-panel #flag-input { font-family: var(--font-display); font-size: 1rem; } /* Flag input often mono */
.submission-status-message {
    margin-top: 10px;
    font-size: 0.9rem;
    font-weight: 500;
    font-family: var(--font-body);
}
.submission-status-message.success { color: #10b981; }
.submission-status-message.error { color: #ef4444; }

.hints-section { margin-top: 25px; margin-bottom: 25px; }
.hint-item {
    margin-bottom: 10px;
    border-radius: var(--border-radius-small);
    font-family: var(--font-body);
}
body.light-theme .hint-item { border: 1px solid var(--color-border-light); }
body.dark-theme .hint-item { border: 1px solid var(--color-border-dark); }

.hint-item summary {
    padding: 10px 12px;
    cursor: pointer;
    font-weight: 500;
    list-style-position: inside; /* Or use custom marker */
    border-radius: var(--border-radius-small);
    transition: background-color var(--transition-speed-fast) ease;
}
.hint-item summary:hover {
    background-color: var(--color-primary-accent-translucent);
}
.hint-item p {
    padding: 10px 12px;
    font-size: 0.9rem;
    border-top: 1px solid;
}
body.light-theme .hint-item p { border-top-color: var(--color-border-light); background-color: #fdfdff; }
body.dark-theme .hint-item p { border-top-color: var(--color-border-dark); background-color: #2c3136; }


.resources-section ul { list-style: none; padding-left: 0; }
.resources-section ul li { margin-bottom: 8px; }
.resources-section ul li a {
    font-family: var(--font-body);
    font-size: 0.9rem;
    font-weight: 500;
    display: inline-block; /* Allows for better hover bg */
    padding: 3px 0;
}

/* Responsive adjustments for Lab Environment */
@media (max-width: 1024px) { /* Adjust breakpoint for when 3 columns become too much */
    .lab-main-content {
        grid-template-columns: 1fr; /* Stack panels */
        /* Or 2 columns: grid-template-columns: minmax(300px, 1.2fr) minmax(280px, 0.8fr);
           And then handle the third panel with grid-row or display order */
        /* For simplicity, stacking first: */
    }
    .lab-panel {
        height: auto; /* Allow panels to grow in single column */
        margin-bottom: 20px; /* Space between stacked panels */
    }
    .lab-panel:last-child { margin-bottom: 0; }
}

@media (max-width: 768px) {
    .lab-header { height: 56px; padding: 0 15px; }
    .lab-main-content { padding: 15px; gap: 15px; }
    #lab-title-header { font-size: 1.1rem; }
    .back-to-dashboard-link span { display: none; } /* Icon only on small screens */
    .lab-panel { padding: 15px; }
}

/* === Lab Environment Specific Styles === */
/* ... (all your existing .lab-environment-layout, .lab-header, etc. styles) ... */

.lab-panel {
    display: flex;
    flex-direction: column;
    overflow-y: auto; /* Default for other panels to scroll if needed */
    height: calc(100vh - 60px - 40px); /* header height - main content padding (top & bottom) */
    padding: 20px;
    /* ... other .lab-panel styles ... */
}

/* Specific override for the instructions panel */
.lab-panel-instructions {
    overflow-y: hidden; /* This will remove the scrollbar and clip overflowing content */
    /*
       If you wanted this panel to determine its own height based on content,
       and potentially make the entire central area of the lab page scrollable,
       you'd need a different approach:
       1. Remove 'height' from .lab-panel or set it to 'auto' for this specific panel.
       2. Change 'overflow: hidden' on '.lab-main-content' to 'overflow-y: auto'.
       This is a more significant layout change. The current request is just to remove
       the scrollbar from this one panel.
    */
}

/* ... (rest of your .lab-panel-info, .lab-panel-tools, and other styles) ... */


/* === Lab Environment Specific Styles === */
/* ... (other existing .lab-panel-info, .lab-meta, etc. styles) ... */

.environment-controls { /* Existing container */
    /* ... any existing styles ... */
}

.environment-controls h4 { /* Existing heading style */
    font-family: var(--font-body);
    font-weight: 600;
    font-size: 1rem;
    margin-bottom: 10px;
}

.environment-controls .control-buttons {
    display: flex;
    flex-direction: column; /* Stack buttons vertically */
    gap: 12px; /* Adjust space between stacked buttons as desired */
    margin-bottom: 15px;
}

.environment-controls .control-buttons .btn {
    width: 100%; /* Make each button take the full width of this column */
    /*
       Height is primarily determined by the .btn class's padding, font-size, and line-height.
       Since all these buttons share the .btn class and have similar content structure (icon + text),
       their heights should be consistent.
       The display: inline-flex and align-items: center on the base .btn class
       also helps in vertically centering content and maintaining consistent height.
    */
    justify-content: center; /* Ensures text and icon are centered if button has extra space */
}

.environment-controls .btn .btn-icon { /* Existing style for icon spacing */
    margin-right: 8px; /* Adjust as needed for better visual balance */
}

/* ... (existing .status-indicator, #lab-status, .machine-ip-info styles) ... */


/* === Dashboard Content Area Animations === */
.main-content-area {
    /* Ensure your existing .main-content-area styles are here or inherited */
    /* e.g., grid-area: main; padding: 30px 35px; overflow-y: auto; */
    position: relative; /* Important for positioning child content during transitions if ever needed */
    opacity: 1;
    transform: translateY(0px);
    /* Define the transition property that will be animated */
    transition: opacity 0.25s ease-in-out, transform 0.25s ease-in-out;
}

/* State for when current content is exiting */
.main-content-area.is-exiting {
    opacity: 0;
    transform: translateY(20px); /* Content slides slightly down and fades out */
}

/* State for when new content is about to enter */
/* New content will start from slightly above and fade/slide into place */
.main-content-area.is-entering {
    opacity: 0;
    transform: translateY(-20px); /* New content starts slightly above its final position */
}


/* === Custom Popup/Modal === */
/* === NEW: Modern Popup / Modal Styles === */

.custom-popup-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(15, 23, 42, 0.6); /* Darker, classier backdrop */
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    display: flex; /* Changed from none to flex for easier animation */
    justify-content: center;
    align-items: center;
    z-index: 2000;
    opacity: 0;
    visibility: hidden; /* Control visibility for accessibility */
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

.custom-popup-overlay.visible {
    opacity: 1;
    visibility: visible;
}

.custom-popup {
    padding: 30px 35px;
    border-radius: 12px; /* --border-radius-xlarge */
    width: 90%;
    max-width: 450px;
    text-align: center;
    transform: scale(0.95) translateY(-10px);
    opacity: 0;
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.2s ease-out;
    position: relative;
}

.custom-popup-overlay.visible .custom-popup {
    transform: scale(1) translateY(0);
    opacity: 1;
}

/* Theming for the popup box */
body.light-theme .custom-popup {
    background-color: #ffffff;
    box-shadow: 0 10px 30px -5px rgba(0,0,0,0.15);
}
body.dark-theme .custom-popup {
    background-color: #1f2937; /* Dark surface color from dashboard */
    border: 1px solid #374151; /* Dark border from dashboard */
}

.custom-popup h3 {
    font-family: var(--font-body);
    font-weight: 600;
    font-size: 1.5rem;
    margin-top: 0;
    margin-bottom: 15px;
}
body.light-theme .custom-popup h3 { color: #1f2937; }
body.dark-theme .custom-popup h3 { color: #f3f4f6; }


.custom-popup p {
    font-size: 0.95rem;
    margin-bottom: 25px;
    line-height: 1.6;
}
body.light-theme .custom-popup p { color: #6b7280; }
body.dark-theme .custom-popup p { color: #9ca3af; }

.custom-popup-actions {
    display: flex;
    justify-content: center;
}

/* Status-specific title colors */
.custom-popup.popup-error #custom-popup-title { color: #ef4444; }
.custom-popup.popup-success #custom-popup-title { color: #10b981; }
.custom-popup.popup-warning #custom-popup-title { color: #f59e0b; }
.custom-popup.popup-info #custom-popup-title { color: var(--color-primary-accent); }

/* You can also add icons or different border colors based on type */
/* Example:
.custom-popup.popup-error { border-left: 5px solid #ef4444; }
.custom-popup.popup-success { border-left: 5px solid #10b981; }
*/

/* In style.css */

/* Make the overall lab layout fill the viewport height */
.lab-environment-layout {
    display: flex;
    flex-direction: column;
    height: 100vh;
    overflow: hidden; 
}

.lab-header {
    flex-shrink: 0; /* Prevent header from shrinking */
}

.lab-main-content {
    display: grid;
    grid-template-columns: 320px 1fr 320px; /* Your existing or desired column setup */
    gap: 20px;
    padding: 20px;
    flex-grow: 1; /* Allow main content to fill remaining vertical space */
    overflow: hidden; /* Prevent this grid from scrolling; individual panels will scroll */
    /* Set a specific height for the grid content area if header/footer have fixed heights */
    /* For example, if header is 60px and padding is 20px top/bottom on lab-main-content: */
    height: calc(100vh - 60px); /* Adjust 60px to your actual lab-header height */
}

.lab-panel {
    display: flex; /* Allow flex properties for children if needed */
    flex-direction: column; /* Stack content vertically within panels */
    overflow-y: auto; /* Allow individual panels to scroll by default if they overflow */
    /* Important: Define a height for panels if their container has a fixed height */
    /* The lab-main-content now has a height, so panels can use percentage or rely on grid. */
    /* For grid items, they stretch. We want to control scroll on specific panel. */
}

/* Specific styling for the instructions panel to be the primary scrollable one */
.lab-panel-instructions {
    display: flex; /* To make its children (tabs, content, nav) flex items */
    flex-direction: column; /* Stack them vertically */
    overflow-y: hidden; /* THIS panel itself should not scroll its direct children (like tabs) */
}

.lab-panel-instructions .tabs.lab-tabs {
    flex-shrink: 0; /* Tabs should not shrink */
}
.lab-panel-instructions .chapter-header {
    flex-shrink: 0; /* Chapter header should not shrink */
}

/* This is the actual content area that will scroll */
.lab-panel-instructions .tab-content {
    flex-grow: 1; /* Allow tab content (like instructions-tab) to take available space */
    overflow-y: auto; /* Make individual tab contents scrollable */
    padding-top: 15px; /* Add some padding if needed */
}

.lab-panel-instructions .chapter-navigation {
    flex-shrink: 0; /* Navigation should not shrink */
    margin-top: auto; /* Push to bottom if .tab-content doesn't fill space (might need flex parent) */
}


/* In your main style.css file */

.lab-completed-badge {
    position: absolute;
    top: 10px;
    left: 10px;
    background-color: rgba(40, 167, 69, 0.9); /* Success green with transparency */
    color: white;
    padding: 4px 10px;
    font-size: 0.8rem;
    font-weight: 500;
    border-radius: 4px;
    z-index: 10;
    backdrop-filter: blur(2px);
}

.lab-card.is-completed .lab-card-image {
    opacity: 0.7; /* Optional: make completed labs slightly faded */
}

















/* In style.css */

/* --- FINAL 4-CARD PRICING PAGE STYLES --- */
.pricing-container {
    max-width: 800px; /* Wider container for 4 cards */
    margin: 40px auto;
    padding: 20px;
}

.pricing-header {
    text-align: center;
    margin-bottom: 50px;
}

.pricing-header h1 {
    font-size: 2.5rem;
    margin-bottom: 10px;
    font-family: var(--font-display);
}

.pricing-grid {
    display: grid;
    /* This will create a 2x2 grid on larger screens */
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 30px;
    align-items: stretch;
}

/* In style.css */

.pricing-card {
    display: flex;
    flex-direction: column;
    text-align: center;
    padding: 30px;
    border-radius: var(--border-radius-medium);
    border: 1px solid var(--color-border-light);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    position: relative; /* This is required for the badge's positioning */
    overflow: hidden; /* This is the key change to clip the badge */
}

body.dark-theme .pricing-card {
    border-color: var(--color-border-dark);
}

.pricing-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 40px -10px rgba(237, 106, 50, 0.2); /* Accent color shadow */
}

body.dark-theme .pricing-card:hover {
    box-shadow: 0 10px 40px -10px rgba(237, 106, 50, 0.25);
}

.pricing-card.pro-plan {
    border: 2px solid var(--color-primary-accent);
}

/* In style.css, replace the old .pro-badge rule */

.pro-badge {
    position: absolute;
    top: 16px; /* Slightly adjusted top */
    right: -56px; /* Adjusted right to move more onto the card */
    background-color: var(--color-primary-accent);
    color: white;
    padding: 9px 50px; /* Adjusted padding for better visual balance */
    font-size: 0.9rem; /* Slightly larger font for better readability */
    font-weight: 600;
    transform: rotate(45deg);
    width: auto; /* Let the content determine the width */
    text-align: center;
    border-radius: 5px; /* Optional: Add a slight curve to the edges */
}

.pricing-card h3 {
    font-size: 1.5rem;
    margin-bottom: 20px;
}

.price {
    margin-bottom: 30px;
}
.price .price-amount {
    font-size: 3rem;
    font-weight: 700;
    font-family: var(--font-display);
}
.price .price-period {
    font-size: 1rem;
    color: var(--color-text-muted-light);
}
body.dark-theme .price .price-period {
    color: var(--color-text-muted-dark);
}

.price .original-price {
    text-decoration: line-through;
    color: var(--color-text-muted-light);
    font-size: 1.5rem;
    margin-right: 10px;
    opacity: 0.8;
}
body.dark-theme .price .original-price {
    color: var(--color-text-muted-dark);
}

.pricing-card .features-list {
    list-style: none;
    padding: 0;
    margin-bottom: 30px;
    text-align: left;
    flex-grow: 1;
}
.features-list li {
    margin-bottom: 12px;
}
.pricing-card .btn {
    margin-top: auto;
}






/* loginpage */

.password-requirements ul {
    list-style-type: none;
    padding-left: 0;
    margin-top: 8px;
    font-size: 0.85rem;
}

.password-requirements li {
    color: var(--color-text-muted-light); /* Default color */
    transition: color 0.2s ease-in-out;
    padding-left: 20px;
    position: relative;
    margin-bottom: 4px;
}

.password-requirements li::before {
    content: '✖'; /* Default "X" mark */
    color: #dc3545; /* Red */
    position: absolute;
    left: 0;
}

.password-requirements li.valid {
    color: #198754; /* Green for valid text */
}

.password-requirements li.valid::before {
    content: '✔'; /* Checkmark for valid */
    color: #198754; /* Green */
}

body.dark-theme .password-requirements li {
    color: var(--color-text-muted-dark);
}

body.dark-theme .password-requirements li.valid {
    color: #28a745; /* Brighter green for dark mode */
}




/* ============================================= */
/* --- REVISED Social Login Button Styles --- */
/* ============================================= */

.btn-social {
    display: flex;
    align-items: center; /* Vertically align items */
    justify-content: center;
    gap: 12px;
    font-size: 0.95rem;
    font-family: var(--font-body);
    font-weight: 500;
    text-decoration: none !important;
    border-radius: var(--border-radius-small);
    padding-top: 10px;
    padding-bottom: 10px;
    transition: background-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out, border-color 0.15s ease-in-out; /* Smoother transitions */
}

.btn-social svg {
    vertical-align: middle; /* Specifically align SVG logos */
}

/* --- Google Button --- */
.btn-google {
    background-color: #ffffff !important;
    color: #3c4043 !important;
    border: 1px solid #dadce0 !important;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
}

.btn-google:hover {
    background-color: #f8f9fa !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
    border-color: #cdd1d4 !important; /* Subtle border change on hover */
    color: #3c4043 !important;
    transform: translateY(-1px);
}

/* --- GitHub Button --- */
.btn-github {
    background-color: #24292e !important;
    color: #ffffff !important;
    border: 1px solid #24292e !important;
}

.btn-github svg {
    fill: #ffffff !important;
    vertical-align: middle; /* Also apply to GitHub SVG */
}

.btn-github:hover {
    background-color: #30363d !important; /* Slightly lighter dark on hover */
    border-color: #30363d !important;
    color: #ffffff !important;
    transform: translateY(-1px);
}