/* --- CSS Variables for Theming --- */
:root {
    /* Dark Theme (Developer / Default) */
    --background-color: #0a0a2a;
    --background-pattern-color: rgba(255, 255, 255, 0.05); /* Light pattern for dark background */
    --text-color: #e0e0e0;
    --header-bg-gradient-start: rgba(106, 17, 203, 0.7); /* Purple */
    --header-bg-gradient-end: rgba(37, 117, 252, 0.7); /* Blue */
    --section-bg: #1a1a3a; /* Darker navy */
    --section-hover-bg: #222244; /* Slightly lighter on hover */
    --section-border: rgba(255, 255, 255, 0.1);
    --heading-color-primary: #00ffff; /* Cyan */
    --heading-border-color-primary: #ff00ff; /* Magenta */
    --heading-color-secondary: #ff00ff; /* Magenta */
    --heading-border-color-secondary: #00ffff; /* Cyan */
    --list-item-bg: #2a2a4a;
    --list-item-border-color-primary: #00ffff; /* Cyan */
    --list-item-border-color-hover: #ff00ff; /* Magenta */
    --icon-color: #ff00ff; /* Magenta */
    --link-color: #00ffff; /* Cyan */
    --link-hover-color: #ff00ff; /* Magenta */
    --btn-primary-bg: #ff00ff; /* Magenta */
    --btn-primary-hover-bg: #00ffff; /* Cyan */
    --btn-secondary-bg: #4CAF50; /* Green */
    --btn-secondary-hover-bg: #45a049; /* Darker green */
    --form-bg: #2a2a4a;
    --input-border: #444;
    --input-focus-border: #00ffff;
    --placeholder-color: #888;
    --shadow-color: rgba(0, 0, 0, 0.3);
    --console-bg: #1e1e1e; /* VSCode dark mode */
    --console-border: #00ffff;
    --console-text: #00ff00; /* Green text */
    --console-prompt: #ff00ff; /* Magenta prompt */
    --console-success-text: #00ffff; /* Cyan for console messages */
    --glass-effect: rgba(255, 255, 255, 0.05);
    --glass-blur: blur(10px);

    /* Testimonial Card */
    --testimonial-bg: #2a2a4a;
    --testimonial-quote-color: #00ffff;
    --testimonial-author-color: #e0e0e0;

    /* Project Card */
    --project-card-bg: #2a2a4a;
    --project-card-shadow: rgba(0, 0, 0, 0.2);
    --project-link-btn-bg: #4a4a6a;
    --project-link-btn-hover-bg: #00ffff;

    /* Timeline */
    --timeline-line-color: #00ffff;
    --timeline-marker-bg: #ff00ff;
    --timeline-item-bg: #2a2a4a;

    /* Skill Bar Gradients (Dark Theme) */
    --skill-html-css-gradient: linear-gradient(90deg, #FF00FF, #00FFFF); /* Magenta to Cyan */
    --skill-javascript-gradient: linear-gradient(90deg, #00FFFF, #39FF14); /* Cyan to Neon Green */
    --skill-react-gradient: linear-gradient(90deg, #8A2BE2, #00BFFF); /* Blue Violet to Deep Sky Blue */
    --skill-python-gradient: linear-gradient(90deg, #FF1493, #1E90FF); /* Deep Pink to Dodger Blue */
}

/* Light Theme (Financial Manager) */
html[data-theme="light"] {
    --background-color: #f0f4f8; /* Light gray-blue */
    --background-pattern-color: rgba(0, 0, 0, 0.03); /* Subtle dark pattern for light background */
    --text-color: #333333;
    --header-bg-gradient-start: rgba(0, 76, 143, 0.7); /* Deep blue */
    --header-bg-gradient-end: rgba(0, 115, 204, 0.7); /* Lighter blue */
    --section-bg: #ffffff; /* Pure white */
    --section-hover-bg: #f9f9f9;
    --section-border: rgba(0, 0, 0, 0.08);
    --heading-color-primary: #004c8f; /* Deep blue */
    --heading-border-color-primary: #28a745; /* Green */
    --heading-color-secondary: #28a745; /* Green */
    --heading-border-color-secondary: #004c8f; /* Deep blue */
    --list-item-bg: #f8f8f8;
    --list-item-border-color-primary: #004c8f; /* Deep blue */
    --list-item-border-color-hover: #28a745; /* Green */
    --icon-color: #28a745; /* Green */
    --link-color: #004c8f; /* Deep blue */
    --link-hover-color: #28a745; /* Green */
    --btn-primary-bg: #28a745; /* Green */
    --btn-primary-hover-bg: #004c8f; /* Deep blue */
    --btn-secondary-bg: #004c8f; /* Deep blue */
    --btn-secondary-hover-bg: #007bff; /* Lighter blue */
    --form-bg: #f8f8f8;
    --input-border: #ccc;
    --input-focus-border: #007bff;
    --placeholder-color: #999;
    --shadow-color: rgba(0, 0, 0, 0.1);
    --console-bg: #eeeeee; /* Light gray */
    --console-border: #28a745;
    --console-text: #000000; /* Black text */
    --console-prompt: #28a745; /* Green prompt */
    --console-success-text: #004c8f; /* Dark blue for console messages */
    --glass-effect: rgba(0, 0, 0, 0.05);
    --glass-blur: blur(5px);

    /* Testimonial Card */
    --testimonial-bg: #f0f0f0;
    --testimonial-quote-color: #004c8f;
    --testimonial-author-color: #555;

    /* Project Card */
    --project-card-bg: #ffffff;
    --project-card-shadow: rgba(0, 0, 0, 0.1);
    --project-link-btn-bg: #e0e0e0;
    --project-link-btn-hover-bg: #28a745;

    /* Timeline */
    --timeline-line-color: #004c8f;
    --timeline-marker-bg: #28a745;
    --timeline-item-bg: #f8f8f8;

     /* Skill Bar Gradients (Light Theme) */
    --skill-html-css-gradient: linear-gradient(90deg, #f06529, #2965f1); /* More vibrant orange/blue for light */
    --skill-javascript-gradient: linear-gradient(90deg, #f7df1e, #f0db4f); /* Yellow */
    --skill-react-gradient: linear-gradient(90deg, #61dafb, #1b3f4b); /* Cyan/Dark Blue - Can adjust if needed */
    --skill-python-gradient: linear-gradient(90deg, #3776ab, #ffd43b); /* Blue/Yellow */
}

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

/* Body Styling */
body {
    font-family: 'Montserrat', sans-serif;
    line-height: 1.8;
    background-color: var(--background-color);
    color: var(--text-color);
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    background-image: url('data:image/svg+xml,%3Csvg width="60" height="60" viewBox="0 0 60 60" xmlns="http://www.w3.org/2000/svg"%3E%3Cg fill="none" fill-rule="evenodd"%3E%3Cg fill="%239C9C9C" fill-opacity="0.1"%3E%3Cpath d="M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zm10 28a6 6 0 1 0 0-12 6 6 0 0 0 0 12zm10 0a6 6 0 1 0 0-12 6 6 0 0 0 0 12zm-8-10a4 4 0 1 1 0-8 4 4 0 0 1 0 8zm-4-28a6 6 0 1 0 0-12 6 6 0 0 0 0 12zm0 10a6 6 0 1 0 0-12 6 6 0 0 0 0 12zm8-10a4 4 0 1 1 0-8 4 4 0 0 1 0 8zm2-10a10 10 0 1 0 0-20 10 10 0 0 0 0 20zm0 10a10 10 0 1 0 0-20 10 10 0 0 0 0 20zm-10-8a8 8 0 1 1 0-16 8 8 0 0 1 0 16zm0 16a8 8 0 1 1 0-16 8 8 0 0 1 0 16zM36 4l-6-6-2 2 6 6 2-2zm0 40l-6-6-2 2 6 6 2-2z"%3E%3C/path%3E%3C/g%3E%3C/g%3E%3C/svg%3E');
    background-size: 60px 60px;
    background-repeat: repeat;
    background-color: var(--background-color);
    transition: background-color 0.6s ease; /* Smooth transition for background */
    -webkit-font-smoothing: antialiased; /* Better font rendering */
    -moz-osx-font-smoothing: grayscale; /* Better font rendering */
}

/* Header Styling */
header {
    background: var(--background-color);
    color: #fff;
    padding: 6rem 0 4rem; /* Increased padding top */
    text-align: center;
    box-shadow: 0 8px 20px var(--shadow-color);
    width: 100%;
    position: relative;
    overflow: hidden;
    min-height: 550px; /* Taller header */
    display: flex;
    justify-content: center;
    align-items: center;
    border-bottom-left-radius: 50% 10%; /* Curved bottom edge */
    border-bottom-right-radius: 50% 10%;
    transform: translateY(0); /* For scroll-fade-in */
    opacity: 1; /* For scroll-fade-in */
    transition: transform 0.7s ease-out, opacity 0.7s ease-out; /* Match scroll-reveal speed */
}

.header-content {
    position: relative;
    z-index: 3;
    color: #fff;
    text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.6);
    max-width: 800px;
    padding: 0 20px;
}

.header-background {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    background:
        linear-gradient(45deg, var(--header-bg-gradient-start) 0%, var(--header-bg-gradient-end) 100%),
        url('data:image/svg+xml,%3Csvg width="40" height="40" viewBox="0 0 40 40" xmlns="http://www.w3.org/2000/svg"%3E%3Cpath d="M20 20.5L0 40.5 19.5 60 40 40.5 20 20.5zm0-20L0 20.5 19.5 40 40 20.5 20 0z" fill="%23ffffff" fill-opacity="0.05" fill-rule="evenodd"/%3E%3C/svg%3E');
    background-size: cover, 40px 40px;
    background-repeat: no-repeat, repeat;
    background-position: center center, top left;
    animation: header-bg-animation 30s infinite alternate ease-in-out;
    transition: background 0.6s ease; /* Smooth background transition */
}

@keyframes header-bg-animation {
    0% { transform: scale(1); background-position: center center, top left; }
    100% { transform: scale(1.1); background-position: center center, bottom right; }
}

header h1 {
    margin: 0;
    font-family: 'Montserrat', sans-serif;
    font-size: 5rem; /* Large and bold */
    letter-spacing: 3px;
    margin-bottom: 15px;
    color: var(--heading-color-primary); /* Use light theme green */
}

header p {
    font-family: 'Roboto Mono', monospace; /* Monospaced for tech vibe */
    margin-top: 0;
    font-size: 1.8rem;
    font-weight: 400;
    opacity: 0.9;
    min-height: 40px; /* Prevent layout shift during typing */
}

/* Theme Toggle Button */
.theme-toggle-button {
    position: fixed; /* Changed from absolute */
    top: 30px; /* Adjust as needed */
    right: 30px; /* Position from the right */
    left: auto; /* Remove left positioning */
    background: var(--section-bg);
    border: 1px solid var(--section-border);
    border-radius: 50%;
    width: 50px;
    height: 50px;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    box-shadow: 0 4px 10px var(--shadow-color);
    transition: background 0.3s ease, border-color 0.3s ease, transform 0.2s ease, box-shadow 0.3s ease;
    font-size: 1.5rem;
    color: var(--icon-color);
    z-index: 1000;
}

.theme-toggle-button:hover {
    transform: scale(1.05);
    box-shadow: 0 6px 15px var(--shadow-color);
}
.theme-toggle-button:active {
    transform: scale(0.95);
}

.theme-toggle-button i {
    transition: color 0.3s ease;
}

html[data-theme="dark"] .theme-toggle-button .light-icon { display: none; }
html[data-theme="dark"] .theme-toggle-button .dark-icon { display: inline-block; }

html[data-theme="light"] .theme-toggle-button .light-icon { display: inline-block; color: var(--icon-color); }
html[data-theme="light"] .theme-toggle-button .dark-icon { display: none; }

.icon-bulb { /* Animated bulb for financial mode */
    position: absolute; /* Keep absolute relative to header */
    top: 45px; /* Keep current top spacing */
    left: 30px; /* Move back to left corner of header */
    font-size: 1.5rem;
    color: var(--heading-color-secondary);
    display: flex;
    align-items: center;
    opacity: 0;
    transition: opacity 0.5s ease;
}
html[data-theme="light"] .icon-bulb { opacity: 1; } /* Show only in light theme */
html[data-theme="light"] .icon-bulb i { animation: pulse-light 1.5s infinite alternate; }

@keyframes pulse-light {
    0% { transform: scale(1); opacity: 0.8; }
    100% { transform: scale(1.1); opacity: 1; }
}


/* Main Content Area */
main {
    flex-grow: 1;
    width: 100%;
    max-width: 1100px; /* Wider content area */
    margin: 20px auto 40px auto;
    padding: 0 20px;
    box-sizing: border-box;
    position: relative;
    z-index: 2; /* Ensure content is above header curve */
}

/* Section Styling */
section {
    padding: 50px; /* More generous padding */
    margin-bottom: 50px;
    background: var(--section-bg);
    border-radius: 18px; /* Slightly larger radius */
    box-shadow: 0 12px 35px var(--shadow-color); /* Stronger shadow */
    transition: transform 0.4s ease-in-out, box-shadow 0.4s ease-in-out, background 0.4s ease, border-color 0.4s ease;
    border: 1px solid var(--section-border);
    backdrop-filter: var(--glass-blur); /* Glassmorphism effect */
    -webkit-backdrop-filter: var(--glass-blur); /* For Safari */
    background-color: var(--glass-effect); /* Translucent background */
}

section:hover {
    transform: translateY(-10px);
    box-shadow: 0 25px 50px var(--shadow-color);
}

section h2 {
    color: var(--heading-color-primary);
    border-bottom: 3px solid var(--heading-border-color-primary);
    padding-bottom: 15px;
    margin-bottom: 40px;
    font-size: 2.8rem;
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 2px;
    font-weight: 700;
    transition: color 0.4s ease, border-color 0.4s ease;
}

/* Specific Section Tweaks */
#about {
    border-left: 8px solid var(--heading-border-color-secondary);
    border-radius: 0 18px 18px 0;
    transition: border-left-color 0.4s ease, background 0.4s ease;
}
#about h2 {
    color: var(--heading-color-secondary);
    border-bottom-color: var(--heading-border-color-primary);
    transition: color 0.4s ease, border-bottom-color 0.4s ease;
}
.about-content-wrapper {
    min-height: 100px; /* Prevent content shift */
}
.persona-content {
    opacity: 0;
    height: 0;
    overflow: hidden;
    transition: opacity 0.5s ease-in-out, height 0.5s ease-in-out;
}
.persona-content.active {
    opacity: 1;
    height: auto;
    overflow: visible;
}

/* --- Collapsible About Text --- */
.about-text-container {
    position: relative; /* Needed for absolute positioning of gradient/ellipsis */
}

.collapsible-content {
    max-height: 150px; /* Adjust this value as needed for the initial collapsed height */
    overflow: hidden;
    transition: max-height 0.5s ease-in-out; /* Smooth transition for collapsing/expanding */
    position: relative; /* Needed for absolute positioning of its own ::after */
}

.collapsible-content.expanded {
    max-height: 1000px; /* A large enough value to show all content; can be dynamic with JS if needed */
}

/* Add a gradient overlay and ellipsis to indicate more content exists */
.collapsible-content:not(.expanded)::after {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 60px; /* Height of the fade-out effect - slightly increased */
    /* Use background variable for gradient based on current theme */
    background: linear-gradient(to bottom, rgba(var(--background-rgb), 0), rgba(var(--background-rgb), 0.8), rgba(var(--background-rgb), 1)); /* Fade to background color */
    pointer-events: none; /* Allows clicking through the overlay */
    /* Additional styles for ellipsis */
    display: flex; /* Use flex to position ellipsis */
    justify-content: flex-end; /* Align ellipsis to the right */
    align-items: flex-end; /* Align ellipsis to the bottom */
    padding-right: 10px; /* Add some padding */
    font-weight: bold;
    color: var(--text-color); /* Use text color variable */
    box-sizing: border-box;
    text-align: right; /* Ensure ellipsis stays right */
    line-height: 1; /* Prevent extra space below ellipsis */
    padding-bottom: 5px; /* Add some padding below ellipsis */
}

.read-more-btn {
    display: block;
    margin-top: 15px;
    padding: 10px 15px;
    border: none;
    /* Use theme variables for default (dark theme) */
    background-color: var(--btn-primary-bg);
    color: #fff; /* Default text color for dark theme buttons */
    border-radius: 5px;
    cursor: pointer;
    font-size: 1em;
    transition: background-color 0.3s ease, color 0.3s ease;
}

.read-more-btn:hover {
    background-color: var(--btn-primary-hover-bg);
}

.finance-feature {
    margin-top: 20px;
}

/* Style the read more button for the light theme */
html[data-theme="light"] .read-more-btn {
    background-color: var(--heading-color-secondary); /* Use a suitable light theme color */
    color: var(--background-color); /* Use background color for text */
}

html[data-theme="light"] .read-more-btn:hover {
     background-color: var(--heading-color-primary); /* Use another light theme color for hover */
}

/* Apply collapsing only on smaller screens */
@media (max-width: 768px) {
    .collapsible-content {
        max-height: 200px; /* Adjust for mobile */
    }

    .collapsible-content.expanded {
         max-height: 1500px; /* Adjust for mobile expanded */
    }

    .collapsible-content:not(.expanded)::after {
        /* Ensure gradient and ellipsis are only on collapsed mobile */
        display: flex; /* Use flex to enable alignment */
    }

     .collapsible-content.expanded::after {
        display: none;
     }

    .read-more-btn {
        width: 100%; /* Make button full width */
        text-align: center; /* Center button text */
        padding: 12px 15px; /* Adjust padding for better touch target */
    }
}

@media (min-width: 769px) {
     /* Ensure content is always expanded and button hidden on larger screens */
    .collapsible-content {
        max-height: none !important; /* Override max-height */
        overflow: visible !important; /* Override overflow */
    }
     .collapsible-content::after {
        display: none !important; /* Hide gradient/ellipsis */
     }
     .read-more-btn {
        display: none !important; /* Hide button */
     }
}

/* Code Window Styling */
.code-window {
    background: var(--console-bg);
    border-radius: 10px;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.4);
    font-family: 'Roboto Mono', monospace;
    font-size: 0.95rem;
    overflow: hidden;
    margin-top: 40px;
    border: 1px solid var(--console-border);
    transition: background 0.4s ease, border-color 0.4s ease, box-shadow 0.4s ease;
}

.code-header {
    background: #2a2a2a;
    padding: 10px 15px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid #444;
}
html[data-theme="light"] .code-header {
    background: #e0e0e0;
    border-bottom-color: #bbb;
}


.code-dots span {
    display: inline-block;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    margin-right: 8px;
    cursor: pointer;
}
.code-dots .red { background-color: #ff5f56; }
.code-dots .yellow { background-color: #ffbd2e; }
.code-dots .green { background-color: #27c93f; }

.code-title {
    color: #b0b0b0;
    font-size: 0.9em;
    font-weight: bold;
}

.coding-animation {
    padding: 20px;
    white-space: pre-wrap; /* Preserve whitespace and wrap text */
    word-break: break-all;
    color: #e6e6e6; /* Code text color */
    background-color: var(--console-bg);
    min-height: 200px;
}

html[data-theme="light"] .coding-animation {
    color: #333;
}
.coding-animation .comment { color: #888; }
.coding-animation .keyword { color: #569cd6; } /* Blue for keywords */
.coding-animation .string { color: #ce9178; } /* Orange for strings */
.coding-animation .function { color: #dcdcaa; } /* Yellow for function names */
.coding-animation .variable { color: #9cdcfe; } /* Light blue for variables */


/* Experience & Skills Dual Columns */
.dual-columns {
    display: grid;
    grid-template-columns: 1fr; /* Single column by default */
    gap: 40px;
    /* Removed min-height as content will determine height */
}

@media (min-width: 768px) {
    .dual-columns {
        grid-template-columns: 1fr 1fr; /* Two columns on larger screens */
    }
}

.finance-column,
.dev-column {
    /* Ensure both columns are always displayed */
    opacity: 1; /* Always visible */
    transform: translateY(0); /* Always in final position */
    transition: opacity 0.6s ease, transform 0.6s ease; /* Keep transition for potential scroll-fade effect */
    height: auto; /* Allow content to define height */
    overflow: visible; /* Allow content to be visible */
}

/* Removed theme-specific rules that previously controlled column visibility */

.dual-columns h3 {
    font-size: 1.8rem;
    color: var(--heading-color-primary);
    margin-bottom: 20px;
    padding-bottom: 10px;
    border-bottom: 2px solid var(--heading-border-color-primary);
    display: flex;
    align-items: center;
    transition: color 0.4s ease, border-bottom-color 0.4s ease;
}
.dual-columns h3 i {
    margin-right: 10px;
    color: var(--icon-color);
    transition: color 0.4s ease;
}

.skills-list {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 20px;
}
.skills-list li {
    background: var(--list-item-bg);
    padding: 10px 15px;
    border-radius: 5px;
    border: 1px solid var(--section-border);
    color: var(--text-color);
    font-size: 0.95rem;
    transition: background 0.3s ease, color 0.3s ease, border-color 0.3s ease;
    flex: 1 1 calc(50% - 10px); /* Two columns per row */
    min-width: 150px;
    display: flex;
    align-items: center;
}
.skills-list li i {
    color: var(--icon-color);
    margin-right: 8px;
}
.skills-list li:hover {
    transform: translateY(-3px);
    box-shadow: 0 4px 8px var(--shadow-color);
}

/* Interactive Charts - Financial */
.chart-placeholder.financial-chart {
    background: var(--list-item-bg);
    border-radius: 8px;
    padding: 20px;
    margin-top: 30px;
    box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.2);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 15px;
    border: 1px solid var(--section-border);
}
.financial-chart h4 {
    color: var(--heading-color-secondary);
    margin-bottom: 15px;
    font-size: 1.2rem;
}
.financial-chart .bar {
    width: 100%;
    height: 30px;
    background: linear-gradient(90deg, var(--link-color), var(--icon-color));
    border-radius: 5px;
    position: relative;
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
    opacity: 0; /* Controlled by JS animation */
    transform: scaleX(0); /* Controlled by JS animation */
    transform-origin: left center;
}
.financial-chart .bar::after {
    content: var(--label);
    position: absolute;
    top: 50%;
    left: 10px;
    transform: translateY(-50%);
    color: #fff;
    font-weight: bold;
    text-shadow: 1px 1px 2px rgba(0,0,0,0.3);
    font-size: 0.9em;
}

/* Interactive Charts - Dev */
.chart-placeholder.dev-chart {
    background: var(--list-item-bg);
    border-radius: 8px;
    padding: 20px;
    margin-top: 30px;
    box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.2);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 15px;
    border: 1px solid var(--section-border);
}
.dev-chart h4 {
    color: var(--heading-color-primary);
    margin-bottom: 15px;
    font-size: 1.2rem;
}
.dev-chart .skill-bar {
    width: 100%;
    height: 25px;
    background: #444; /* Base background for the bar */
    border-radius: 12px;
    overflow: hidden;
    position: relative;
    box-shadow: inset 0 1px 3px rgba(0,0,0,0.3);
}
.dev-chart .skill-bar span {
    position: absolute;
    left: 10px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 0.85em;
    font-weight: bold;
    color: #fff;
    z-index: 2;
    text-shadow: 1px 1px 2px rgba(0,0,0,0.3);
}
.dev-chart .skill-bar::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    border-radius: 12px;
    transform-origin: left center;
    transition: opacity 0.5s ease-in-out, transform 0.5s ease-in-out; /* Keep the transition for other possible uses */
}
/* Specific colors for skill bars */
.dev-chart .html-css::before { background: var(--skill-html-css-gradient); width: 85%; }
.dev-chart .javascript::before { background: var(--skill-javascript-gradient); width: 80%; }
.dev-chart .react::before { background: var(--skill-react-gradient); width: 75%; }
.dev-chart .python::before { background: var(--skill-python-gradient); width: 70%; }


/* Project Filtering */
.project-filters {
    text-align: center;
    margin-bottom: 30px;
}
.project-filters .btn {
    margin: 0 10px 10px;
    padding: 10px 25px;
    border-radius: 50px; /* Pill shape */
    background-color: var(--list-item-bg);
    color: var(--text-color);
    border: 1px solid var(--section-border);
    font-size: 1rem;
    text-transform: capitalize;
    transition: background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease, transform 0.2s ease;
}
.project-filters .btn.active,
.project-filters .btn:hover {
    background-color: var(--btn-primary-hover-bg);
    border-color: var(--btn-primary-hover-bg);
    color: #fff;
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(0,0,0,0.2);
}

.project-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 30px;
}
.project-card {
    background: var(--project-card-bg);
    border-radius: 12px;
    box-shadow: 0 5px 15px var(--project-card-shadow);
    overflow: hidden;
    text-align: center;
    padding-bottom: 20px;
    transition: transform 0.3s ease, box-shadow 0.3s ease, background 0.3s ease;
    border: 1px solid var(--section-border);
}
.project-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 15px 30px var(--shadow-color);
}
.project-card img {
    width: 100%;
    height: 200px;
    object-fit: cover;
    display: block;
    border-bottom: 1px solid var(--section-border);
    transition: transform 0.3s ease-in-out;
}
.project-card:hover img {
    transform: scale(1.05);
}
.project-card h3 {
    font-size: 1.4rem;
    margin: 20px 15px 10px;
    color: var(--heading-color-primary);
    transition: color 0.3s ease;
}
.project-card h3 i {
    color: var(--icon-color);
    margin-right: 8px;
    transition: color 0.3s ease;
}
.project-card p {
    font-size: 0.95rem;
    padding: 0 15px;
    margin-bottom: 20px;
    color: var(--text-color);
}
.project-links {
    margin-top: 15px;
    display: flex;
    justify-content: center;
    gap: 10px;
}
.btn-sm {
    padding: 8px 15px;
    font-size: 0.9rem;
    background-color: var(--project-link-btn-bg);
    color: var(--text-color);
    border: 1px solid var(--section-border);
    transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}
.btn-sm:hover {
    background-color: var(--project-link-btn-hover-bg);
    border-color: var(--project-link-btn-hover-bg);
    color: #fff;
    transform: translateY(-2px);
}

/* Certifications & Education Timeline */
.timeline {
    position: relative;
    max-width: 800px;
    margin: 0 auto;
    padding: 20px 0;
}
.timeline::before {
    content: '';
    position: absolute;
    left: 50%;
    top: 0;
    width: 2px;
    height: 100%;
    background: var(--timeline-line-color);
    transform: translateX(-50%);
    transition: background 0.4s ease;
}
.timeline-item {
    padding: 20px;
    position: relative;
    width: 50%;
    margin-bottom: 40px;
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.6s ease-in-out, transform 0.6s ease-in-out;
}
.timeline-item:nth-child(even) {
    left: 50%;
}
.timeline-item:nth-child(odd) {
    left: 0;
}
.timeline-marker {
    position: absolute;
    top: 20px;
    width: 16px;
    height: 16px;
    background: var(--timeline-marker-bg);
    border-radius: 50%;
    border: 2px solid var(--section-bg);
    transition: background 0.4s ease, border-color 0.4s ease;
    z-index: 1;
}
.timeline-item:nth-child(odd) .timeline-marker {
    right: -9px;
}
.timeline-item:nth-child(even) .timeline-marker {
    left: -9px;
}
.timeline-content {
    background: var(--timeline-item-bg);
    border-radius: 8px;
    padding: 25px;
    box-shadow: 0 4px 15px var(--shadow-color);
    transition: background 0.4s ease, box-shadow 0.4s ease;
    border: 1px solid var(--section-border);
}
.timeline-item:nth-child(odd) .timeline-content {
    margin-right: 30px;
}
.timeline-item:nth-child(even) .timeline-content {
    margin-left: 30px;
}
.timeline-content h3 {
    font-size: 1.3rem;
    color: var(--heading-color-primary);
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    transition: color 0.4s ease;
}
.timeline-content h3 i {
    margin-right: 8px;
    color: var(--icon-color);
    transition: color 0.4s ease;
}
.timeline-content p {
    font-size: 0.9rem;
    color: var(--text-color);
}
.timeline-content strong {
    color: var(--heading-color-secondary);
    transition: color 0.4s ease;
}

@media (max-width: 768px) {
    .timeline::before {
        left: 20px;
        transform: translateX(0);
    }
    .timeline-item {
        width: 100%;
        padding-left: 50px;
        left: 0 !important;
        margin-left: 0;
        margin-right: 0;
    }
    .timeline-item:nth-child(odd) .timeline-marker,
    .timeline-item:nth-child(even) .timeline-marker {
        left: 12px;
        right: auto;
    }
    .timeline-item:nth-child(odd) .timeline-content,
    .timeline-item:nth-child(even) .timeline-content {
        margin-left: 0;
        margin-right: 0;
    }

    .about-text-container .collapsible-content {
        max-height: 200px; /* Adjust for mobile */
    }

    .about-text-container .collapsible-content.expanded {
         max-height: 1500px; /* Adjust for mobile expanded */
    }

    .about-text-container .collapsible-content::after {
        /* Ensure gradient is only on collapsed mobile */
        display: block;
    }

     .about-text-container .collapsible-content.expanded::after {
        display: none;
    }
}

/* Testimonials */
.testimonial-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 30px;
}
.testimonial-card {
    background: var(--testimonial-bg);
    border-radius: 12px;
    padding: 30px;
    box-shadow: 0 5px 15px var(--project-card-shadow);
    transition: transform 0.3s ease, box-shadow 0.3s ease, background 0.3s ease;
    border: 1px solid var(--section-border);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-height: 200px;
}
.testimonial-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 15px 30px var(--shadow-color);
}
.testimonial-card .quote {
    font-size: 1.1rem;
    font-style: italic;
    color: var(--testimonial-quote-color);
    margin-bottom: 15px;
    line-height: 1.6;
    transition: color 0.3s ease;
}
.testimonial-card .quote::before {
    content: "\201C";
    font-size: 3em;
    line-height: 0.1em;
    vertical-align: -0.4em;
    margin-right: 5px;
    color: var(--icon-color);
    transition: color 0.3s ease;
}
.testimonial-card .author {
    font-weight: bold;
    color: var(--testimonial-author-color);
    text-align: right;
    font-size: 0.95rem;
    transition: color 0.3s ease;
}

/* Contact Form */
.contact-intro {
    text-align: center;
    margin-bottom: 30px;
    font-size: 1.1rem;
    color: var(--text-color);
}
.contact-form {
    background: var(--form-bg);
    padding: 35px;
    border-radius: 12px;
    box-shadow: 0 5px 20px var(--shadow-color);
    max-width: 700px;
    margin: 0 auto 50px auto;
    border: 1px solid var(--section-border);
    transition: background 0.4s ease, border-color 0.4s ease, box-shadow 0.4s ease;
}
.form-group {
    margin-bottom: 20px;
}
.form-group label {
    display: block;
    margin-bottom: 8px;
    font-weight: bold;
    color: var(--heading-color-primary);
    transition: color 0.4s ease;
}
.form-group input[type="text"],
.form-group input[type="email"],
.form-group textarea {
    width: 100%;
    padding: 12px 15px;
    border: 1px solid var(--input-border);
    border-radius: 8px;
    background-color: var(--background-color);
    color: var(--text-color);
    font-size: 1rem;
    transition: border-color 0.3s ease, background-color 0.3s ease, box-shadow 0.3s ease;
}
.form-group input::placeholder,
.form-group textarea::placeholder {
    color: var(--placeholder-color);
    opacity: 0.8;
}
.form-group input[type="text"]:focus,
.form-group input[type="email"]:focus,
.form-group textarea:focus {
    outline: none;
    border-color: var(--input-focus-border);
    box-shadow: 0 0 0 3px rgba(0, 191, 255, 0.3);
}

.success-message {
    background-color: #d4edda;
    color: #155724;
    border: 1px solid #c3e6cb;
    padding: 15px;
    border-radius: 8px;
    margin-top: 20px;
    text-align: center;
    font-weight: bold;
    transition: opacity 0.5s ease;
    opacity: 1;
}
html[data-theme="dark"] .success-message {
    background-color: #0f172a;
    color: #a7f3d0;
    border-color: #34d399;
}
.success-message.hidden {
    opacity: 0;
    height: 0;
    overflow: hidden;
    padding: 0;
    margin: 0;
}
.success-message i {
    margin-right: 8px;
}

.contact-info {
    margin-top: 50px;
    text-align: center;
}
.contact-info h3 {
    font-size: 1.8rem;
    color: var(--heading-color-secondary);
    margin-bottom: 25px;
    transition: color 0.4s ease;
}
.contact-info ul {
    list-style: none;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 20px;
}
.contact-info ul li {
    background: var(--list-item-bg);
    padding: 15px 20px;
    border-radius: 8px;
    border: 1px solid var(--section-border);
    display: flex;
    align-items: center;
    font-size: 1rem;
    transition: transform 0.3s ease, background 0.3s ease;
}
.contact-info ul li:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 20px var(--shadow-color);
}
.contact-info ul li i {
    margin-right: 12px;
    font-size: 1.2rem;
    color: var(--icon-color);
    transition: color 0.4s ease;
}
.contact-info ul li a {
    color: var(--link-color);
    text-decoration: none;
    transition: color 0.3s ease;
}
.contact-info ul li a:hover {
    color: var(--link-hover-color);
    text-decoration: underline;
}

/* Buttons (General) */
.btn {
    display: inline-block;
    background-color: var(--btn-primary-bg);
    color: #fff;
    padding: 14px 30px;
    border-radius: 5px;
    text-decoration: none;
    font-size: 1.1rem;
    transition: background-color 0.3s ease-in-out, transform 0.1s ease-in-out, box-shadow 0.3s ease;
    border: none;
    cursor: pointer;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-weight: 700;
}
.btn:hover {
    background-color: var(--btn-primary-hover-bg);
    transform: translateY(-3px);
    box-shadow: 0 8px 15px rgba(0,0,0,0.2);
}
.btn:active {
    transform: translateY(0);
}
.btn i {
    margin-left: 8px;
}
.btn.primary-btn {
    background-color: var(--btn-primary-bg);
    transition: background-color 0.3s ease;
}
.btn.primary-btn:hover {
    background-color: var(--btn-primary-hover-bg);
}
.btn.secondary-btn {
    background-color: var(--btn-secondary-bg);
    transition: background-color 0.3s ease;
}
.btn.secondary-btn:hover {
    background-color: var(--btn-secondary-hover-bg);
}

/* Scroll-to-section arrow */
.scroll-to {
    margin-top: 30px;
    display: inline-flex; /* Use flex to align icon and text */
    align-items: center;
    background: transparent; /* Make background transparent */
    border: 2px solid #fff; /* White border for contrast */
    color: #fff;
    font-size: 1rem;
    padding: 10px 20px;
    text-shadow: 1px 1px 3px rgba(0,0,0,0.5);
    transition: all 0.3s ease-in-out;
}

.scroll-to i {
    font-size: 1.2rem;
    animation: bounce 1.5s infinite; /* Add bounce animation */
    margin-left: 8px;
    color: #fff; /* Ensure icon is white */
}
.scroll-to:hover {
    background: rgba(255, 255, 255, 0.2); /* Slight background on hover */
    box-shadow: 0 0 15px rgba(255,255,255,0.4);
    transform: translateY(-2px);
    border-color: #fff; /* Maintain white border */
    color: #fff; /* Maintain white text */
}

@keyframes bounce {
    0%, 20%, 50%, 80%, 100% { transform: translateY(0); }
    40% { transform: translateY(-10px); }
    60% { transform: translateY(-5px); }
}


/* Footer Styling */
footer {
    text-align: center;
    padding: 2rem 0;
    background: var(--background-color);
    color: var(--text-color);
    margin-top: 40px;
    width: 100%;
    border-top: 1px solid var(--section-border);
    font-size: 0.9rem;
    transition: background-color 0.6s ease, color 0.6s ease;
}
footer i {
    color: #e2504c; /* Heart color */
    margin: 0 3px;
}

/* Easter Egg Console */
.code-console {
    position: fixed;
    bottom: 20px;
    right: 20px;
    width: 250px; /* Adjusted Minimized width */
    height: 35px; /* Adjusted Minimized height - just enough for header */
    background: var(--console-bg); /* Use background var */
    border: 2px solid var(--console-border); /* Use border var */
    border-radius: 8px; /* Slightly smaller border-radius for minimized state */
    box-shadow: 0 4px 15px rgba(0,0,0,0.4); /* Smaller shadow when minimized */
    display: flex; /* Still flex to align header */
    flex-direction: column;
    overflow: hidden; /* Hide content when minimized */
    font-family: 'Roboto Mono', monospace;
    font-size: 0.9rem;
    z-index: 1000;
    /* Transition handled by GSAP */
    opacity: 1; /* Start visible */
    transform: translateY(0); /* Start at original position */
    cursor: pointer; /* Indicate it's clickable */
}

.console-header {
    background: var(--heading-color-primary); /* Use thematic color */
    color: var(--background-color); /* Text color contrasts with header background */
    padding: 8px 15px; /* Adjusted padding */
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-weight: bold;
    cursor: pointer; /* Header is now the click target */
    user-select: none; /* Prevent text selection when clicking */
    flex-shrink: 0; /* Prevent header from shrinking */
}

.console-output,
.console-input-area {
    display: none; /* Hide output and input when minimized */
}

/* State when Maximized */
.code-console.maximized {
    width: min(90vw, 700px); /* Adjusted Maximized width */
    height: min(70vh, 500px); /* Adjusted Maximized height */
    opacity: 1; /* Fully visible */
    box-shadow: 0 10px 40px rgba(0,0,0,0.6); /* Larger shadow when maximized */
    border-radius: 12px; /* Larger radius when maximized */
    cursor: default; /* Change cursor when maximized */
}

.code-console.maximized .console-output {
    display: block; /* Show output when maximized */
    flex-grow: 1; /* Allow output to grow */
    padding: 15px; /* Restore padding */
    overflow-y: auto; /* Restore scrolling */
    background: var(--console-bg); /* Restore background */
    color: var(--console-text); /* Restore text color */
    white-space: pre-wrap; /* Restore formatting */
    word-break: break-word; /* Prevent overflow for long lines */
}

.code-console.maximized .console-input-area {
    display: flex; /* Show input when maximized */
    flex-shrink: 0; /* Prevent input area from growing */
    padding: 10px 15px; /* Padding around the input area */
    border-top: 1px solid var(--input-border); /* Border above input */
    background: var(--console-bg); /* Background color */
    align-items: center; /* Vertically align input elements */
}

.console-header .close-console {
    background: none;
    border: none;
    color: var(--background-color); /* Close button color contrasts with header */
    font-size: 1.2rem;
    cursor: pointer;
    transition: color 0.3s ease;
}
.console-header .close-console:hover {
    color: #e2504c; /* Red on hover */
}
html[data-theme="light"] .console-header {
    background: var(--heading-color-secondary); /* Use secondary color for light theme header */
    color: var(--background-color); /* Text color contrasts */
}
html[data-theme="light"] .console-header .close-console {
    color: var(--background-color); /* Close button color contrasts */
}

/* Highly specific styles for the actual input element within the maximized console */
.code-console.maximized .console-input-area input[type="text"]#console-input {
    flex-grow: 1;
    background: transparent !important;
    border: none !important;
    outline: none !important;
    color: var(--console-text) !important;
    font-family: 'Roboto Mono', monospace !important;
    font-size: 0.9rem !important;
    padding: 0 0 0 5px !important; /* Added padding-left */
    line-height: 1.5 !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    appearance: none !important;
}

.console-input-area .prompt {
    color: var(--console-prompt);
    margin-right: 2px;
    font-weight: bold;
    transition: color 0.4s ease;
    flex-shrink: 0; /* Prevent prompt from shrinking */
}

/* Responsive Design */
@media (max-width: 900px) {
    header h1 {
        font-size: 4rem;
    }
    header p {
        font-size: 1.5rem;
    }
    main {
        margin-top: 20px;
    }
    section {
        padding: 30px;
        margin-bottom: 30px;
    }
    section h2 {
        font-size: 2.2rem;
        margin-bottom: 30px;
    }
    .dual-columns {
        grid-template-columns: 1fr;
    }
    .dual-columns h3 {
        font-size: 1.6rem;
    }
    .skills-list li {
        flex: 1 1 100%; /* Full width on small screens */
    }
    .project-grid {
        grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
        gap: 20px;
    }
    .project-card {
        padding-bottom: 15px;
    }
    .project-card img {
        height: 180px;
    }
    .project-filters .btn {
        margin: 5px;
        padding: 8px 18px;
        font-size: 0.9rem;
    }
    .timeline-item {
        width: 100%;
        padding-left: 50px; /* Space for the line/marker */
    }
    .timeline::before {
        left: 20px;
        transform: translateX(0); /* Anchor line to left on mobile */
    }
    .timeline-item:nth-child(odd) .timeline-marker,
    .timeline-item:nth-child(even) .timeline-marker {
        left: 12px;
        right: auto;
    }
    .timeline-item:nth-child(odd) .timeline-content,
    .timeline-item:nth-child(even) .timeline-content {
        margin-left: 0; /* Remove left/right margins for content */
        margin-right: 0;
    }
    .testimonial-container {
        grid-template-columns: 1fr;
    }
    .contact-form {
        padding: 25px;
    }
    .contact-info ul {
        flex-direction: column;
    }
    .contact-info ul li {
        width: 100%;
        justify-content: center;
    }
    .theme-toggle-button {
        top: 20px; /* Adjust as needed for smaller screens */
        right: 20px; /* Position from the right */
        left: auto; /* Remove left positioning */
        width: 45px;
        height: 45px;
        font-size: 1.3rem;
    }
    .icon-bulb {
        top: 30px; /* Keep current top spacing */
        left: 20px; /* Move back to left corner of header */
        font-size: 1.3rem;
    }
    .code-console {
        width: 200px; /* Smaller minimized width */
        height: 35px; /* Smaller minimized height */
    }
    .code-console.maximized {
        width: 95%; /* Use a percentage for max width */
        height: min(70vh, 500px);
        right: 2.5%; /* Center horizontally */
        bottom: 5vh; /* Position from bottom */
        border-radius: 12px; /* Keep radius on mobile max */
        left: auto; /* Reset left */
    }
}

@media (max-width: 500px) {
    header h1 {
        font-size: 3rem;
    }
    header p {
        font-size: 1.2rem;
    }
    section {
        padding: 20px;
    }
    section h2 {
        font-size: 1.8rem;
    }
    .btn {
        padding: 12px 20px;
        font-size: 1rem;
    }
    .project-filters .btn {
        flex: 1 1 auto; /* Make filter buttons wrap and take full width */
        min-width: unset;
        width: auto;
    }
    .project-grid {
        grid-template-columns: 1fr;
    }
    .contact-form {
        padding: 20px;
    }
    .code-console {
        width: 90%; /* Minimized width on very small screens */
        right: 5%; /* Center horizontally */
        bottom: 20px; /* Position from bottom */
        border-radius: 8px; /* Keep radius */
        height: 35px; /* Minimized height */
        left: auto; /* Reset left */
    }
    .code-console.maximized {
        width: 100%;
        height: min(70vh, 500px);
        right: 0;
        bottom: 0;
        border-radius: 0;
        left: 0;
    }
}

/* Page Loader */
#page-loader {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: var(--background-color); /* Use theme background */
    z-index: 9999; /* Ensure it's on top of everything */
    display: flex;
    justify-content: center;
    align-items: center;
    transition: opacity 0.6s ease;
    opacity: 1; /* Start visible */
}

.loader-spinner {
    border: 8px solid var(--section-bg); /* Light border */
    border-top: 8px solid var(--heading-color-primary); /* Colored border for spinner */
    border-radius: 50%;
    width: 60px;
    height: 60px;
    animation: spin 1.5s linear infinite;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* --- Modal Styles --- */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.8); /* Dark overlay */
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 2000; /* Above other content */
    backdrop-filter: blur(5px);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
}

.modal-overlay.visible {
    opacity: 1;
    pointer-events: auto;
}

.modal-content {
    background-color: var(--console-bg);
    color: var(--console-text);
    border-radius: 10px;
    width: 90%;
    max-width: 800px;
    max-height: 90vh;
    overflow: hidden; /* Children will manage their own scroll if needed */
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.4);
    border: 1px solid var(--console-border);
    display: flex;
    flex-direction: column;
    transform: translateY(-20px); /* Start slightly up for transition */
    transition: transform 0.3s ease;
}

.modal-overlay.visible .modal-content {
    transform: translateY(0); /* Bring to center on show */
}

.modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: var(--heading-color-primary);
    color: var(--background-color);
    padding: 15px 20px;
    font-weight: bold;
    flex-shrink: 0;
}

.modal-header h3 {
    margin: 0;
    color: inherit;
    border-bottom: none;
    padding-bottom: 0;
    font-size: 1.2rem;
}

.modal-header .close-modal {
    background: none;
    border: none;
    color: inherit;
    font-size: 1.8rem;
    cursor: pointer;
    transition: color 0.3s ease;
    line-height: 1;
}

.modal-header .close-modal:hover {
    color: #e2504c;
}

.modal-body {
    padding: 20px;
    overflow-y: auto;
    flex-grow: 1;
    font-family: 'Roboto Mono', monospace; /* Default for text, but snippet might override */
    font-size: 0.9rem; /* Default for text */
    /* color will be inherited or set by snippet's own styles */
}

/* Styles for the card rendered inside the modal, if they are not scoped in the snippet */
.modal-body #easter-egg-container {
    margin: 0 auto; /* Center the card if it's the only content */
    perspective: 1000px;
    width: 300px; /* Match snippet */
}
.modal-body .card {
  width: 100%;
  height: 200px; /* Match snippet */
  position: relative;
  transform-style: preserve-3d;
  transition: transform 0.8s;
  cursor: pointer;
}
.modal-body .card.flipped {
  transform: rotateY(180deg);
}
.modal-body .card-face {
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
  padding: 20px;
  box-sizing: border-box;
  border-radius: 10px;
  box-shadow: 0 8px 20px rgba(0,0,0,0.15);
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: center;
  font-family: 'Courier New', Courier, monospace;
}
.modal-body .card-day {
  background: linear-gradient(to right, #e0eafc, #cfdef3);
  color: #333;
}
.modal-body .card-night {
  background: black;
  color: #00ff00;
  transform: rotateY(180deg);
  overflow: hidden;
  font-size: 14px;
  padding: 10px;
}
.modal-body .terminal-output {
  white-space: pre-wrap;
  text-align: left;
  flex: 1;
}
.modal-body .dev-footer {
  text-align: center;
  font-size: 12px;
  margin-top: 10px;
  opacity: 0.7;
}


/* Adjust modal colors for light theme */
html[data-theme="light"] .modal-content {
    background-color: var(--console-bg);
    color: var(--console-text);
    border-color: var(--console-border);
}

html[data-theme="light"] .modal-header {
    background-color: var(--heading-color-secondary);
    color: var(--background-color);
}

.hidden {
  display: none !important;
}

/* ZAR/USD Exchange Rate Tracker Styles */
.exchange-tracker {
    width: 100%;
    max-width: 100%;
    background: var(--form-bg);
    border-radius: 12px;
    box-shadow: 0 4px 15px var(--shadow-color);
    border: 1px solid var(--section-border);
    padding: 30px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 25px;
}

.exchange-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
    border-bottom: 2px solid var(--heading-border-color-primary);
    padding-bottom: 15px;
}

.exchange-header h4 {
    font-size: 1.4rem;
    margin: 0;
    color: var(--heading-color-primary);
    font-weight: 700;
    display: flex;
    align-items: center;
}

.exchange-header i {
    color: var(--icon-color);
    margin-right: 12px;
    font-size: 1.2em;
}

.exchange-controls button {
    background: var(--btn-primary-bg);
    color: #fff;
    border: none;
    border-radius: 6px;
    padding: 8px 16px;
    cursor: pointer;
    transition: background-color 0.3s ease, transform 0.2s ease, box-shadow 0.3s ease;
    font-size: 0.95rem;
    display: flex;
    align-items: center;
    gap: 8px;
}

.exchange-controls button:hover {
    background: var(--btn-primary-hover-bg);
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0,0,0,0.2);
}

/* Layout grid for desktop */
@media (min-width: 768px) {
    .exchange-content {
        display: grid;
        grid-template-columns: 1fr 2fr; /* Adjusted ratio */
        gap: 30px; /* Increased gap */
        align-items: start;
    }
    
    .exchange-rate-wrapper {
        grid-column: 1;
        display: flex; /* Center card vertically if needed */
        align-items: center;
        justify-content: center;
        min-height: 200px; /* Ensure enough height for alignment */
    }
    
    .exchange-chart {
        grid-column: 2;
        height: 100%;
        margin: 0;
        min-height: 250px; /* Ensure chart has enough height */
    }
    
    .exchange-news {
        grid-column: 1 / -1; /* Span across both columns */
        margin-top: 25px; /* More space above news */
    }
}

.exchange-rate {
    display: flex;
    justify-content: center;
    padding: 0;
    width: 100%; /* Ensure it takes available width in flex/grid item */
}

.rate-card {
    text-align: center;
    padding: 25px;
    background: var(--list-item-bg);
    border-radius: 12px;
    box-shadow: 0 4px 10px var(--shadow-color);
    width: 100%; /* Take full width within its container */
    max-width: 300px; /* Limit max width on larger screens */
    border: 1px solid var(--section-border);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.rate-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 15px var(--shadow-color);
}

.rate-value {
    display: flex;
    justify-content: center;
    align-items: baseline;
    margin-bottom: 12px;
    font-size: 3.5rem; /* Larger font size */
    font-weight: bold;
    color: var(--heading-color-primary);
}

.currency-symbol {
    font-size: 2.5rem;
    margin-right: 10px;
    color: var(--icon-color);
}

.rate-label {
    font-size: 1.1rem;
    color: var(--text-color);
    margin-bottom: 18px;
}

.rate-change {
    font-size: 1.2rem; /* Larger font size */
    font-weight: bold;
    padding: 8px 18px;
    border-radius: 25px; /* More rounded */
    display: inline-block;
}

.rate-change.positive {
    background-color: rgba(40, 167, 69, 0.15);
    color: #28a745;
}

.rate-change.negative {
    background-color: rgba(220, 53, 69, 0.15);
    color: #dc3545;
}

.rate-change.neutral {
    background-color: rgba(108, 117, 125, 0.15);
    color: #6c757d;
}

.exchange-chart {
    height: 250px; /* Taller chart */
    margin: 0; /* Remove margin as grid handles spacing */
    padding: 15px;
    background: var(--list-item-bg);
    border-radius: 12px;
    box-shadow: 0 4px 10px var(--shadow-color);
    border: 1px solid var(--section-border);
    width: 100%; /* <<< ADD OR ENSURE THIS IS PRESENT */
    /* box-sizing: border-box; is globally set, so padding is fine */
}

.exchange-news {
    margin-top: 20px; /* Adjust margin */
}

.exchange-news h5 {
    font-size: 1.2rem;
    margin-bottom: 18px;
    color: var(--heading-color-primary);
    font-weight: 700;
    border-bottom: 1px solid var(--section-border);
    padding-bottom: 10px;
}

.news-list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); /* Slightly larger min width for news items */
    gap: 20px; /* Increased gap */
    max-height: 350px; /* Increased max height */
    overflow-y: auto;
    padding-right: 10px; /* Adjusted padding */
    padding-bottom: 5px;
}

.news-item {
    padding: 20px;
    background: var(--list-item-bg);
    border-radius: 10px;
    border-left: 5px solid var(--heading-color-primary); /* Thicker border */
    transition: all 0.3s ease;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    box-shadow: 0 2px 8px var(--shadow-color);
    height: 100%;
}

.news-item:hover {
    transform: translateY(-5px); /* Increased lift on hover */
    box-shadow: 0 8px 18px var(--shadow-color); /* Stronger shadow on hover */
}

/* News item as link styles */
a.news-item {
    text-decoration: none;
    color: inherit;
    height: 100%;
}

a.news-item:hover .news-title {
    color: var(--link-hover-color);
    text-decoration: underline;
}

.news-title {
    font-weight: bold;
    color: var(--heading-color-secondary);
    margin-bottom: 10px;
    font-size: 1.05rem;
    display: -webkit-box;
    -webkit-line-clamp: 3; /* Allow slightly more lines */
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.news-source {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.9rem; /* Slightly larger font */
    color: var(--text-color);
    margin-top: auto;
    padding-top: 10px; /* Increased padding */
    border-top: 1px dashed rgba(125,125,125,0.3); /* Slightly more visible dashed line */
}

.news-date {
    font-size: 0.85rem; /* Slightly larger font */
    opacity: 0.9;
}

.news-list .loading-indicator,
.news-list .error-message {
    text-align: center;
    padding: 30px;
    color: var(--text-color);
    grid-column: 1 / -1; /* Center across grid columns */
    font-size: 1.1rem;
}

.loading-indicator i {
    margin-right: 8px;
    color: var(--icon-color);
}

.error-message {
    color: #dc3545;
    background: rgba(220, 53, 69, 0.1);
    border-radius: 8px;
    margin: 10px 0;
    font-weight: 500;
    border: 1px solid rgba(220, 53, 69, 0.2);
    display: flex; /* Use flex for icon and text alignment */
    align-items: center;
    justify-content: center;
    gap: 10px;
}

html[data-theme="dark"] .error-message {
    color: #ff5f56;
    background: rgba(255, 95, 86, 0.1);
    border-color: rgba(255, 95, 86, 0.2);
}


/* Custom scrollbar for news list */
.news-list::-webkit-scrollbar {
    width: 10px; /* Wider scrollbar */
}

.news-list::-webkit-scrollbar-track {
    background: rgba(0,0,0,0.1);
    border-radius: 10px;
}

.news-list::-webkit-scrollbar-thumb {
    background: var(--heading-color-primary);
    border-radius: 10px;
    opacity: 0.8;
}

.news-list::-webkit-scrollbar-thumb:hover {
    background: var(--heading-color-secondary);
    opacity: 1;
}

/* Responsive adjustments */
@media (max-width: 767px) {
    .exchange-tracker {
        padding: 20px;
        gap: 20px;
    }

    .exchange-header h4 {
        font-size: 1.2rem;
    }

    .exchange-controls button {
        padding: 6px 12px;
        font-size: 0.9rem;
    }

    .rate-value {
        font-size: 3rem;
    }

    .currency-symbol {
        font-size: 2rem;
    }

     .rate-label {
        font-size: 1rem;
        margin-bottom: 15px;
    }

    .rate-change {
        font-size: 1.1rem;
        padding: 6px 15px;
    }
    
    .exchange-chart {
        height: 200px;
        padding: 10px;
        /* width: 100%; is inherited */
    }

    .exchange-news h5 {
        font-size: 1.1rem;
        margin-bottom: 15px;
    }

    .news-list {
        grid-template-columns: 1fr; /* Single column on mobile */
        gap: 15px;
        max-height: 250px; /* Adjusted max height for mobile */
    }
    
    .news-item {
        padding: 15px;
    }
    
    .news-title {
        font-size: 0.95rem;
    }
    
    .news-source {
        font-size: 0.8rem;
    }
    
    .news-date {
        font-size: 0.75rem;
    }
     .news-list .loading-indicator,
    .news-list .error-message {
         font-size: 1rem;
    }
}