:root {
            --bg-primary: #0f172a;
            --bg-secondary: #1e293b;
            --bg-header: rgba(15, 23, 42, 0.8);
            --text-primary: #cbd5e1;
            --text-secondary: #94a3b8;
            --text-muted: #64748b;
            --border-color: #334155;
            --border-light: #475569;
        }

        [data-theme="light"] {
            --bg-primary: hsl(220, 65%, 97%);
            --bg-secondary: #ffffff;
            --bg-header: rgba(255, 255, 255, 0.8);
            --text-primary: #1e293b;
            --text-secondary: #475569;
            --text-muted: #94a3b8;
            --border-color: #e2e8f0;
            --border-light: #cbd5e1;
        }
          html[data-theme="light"] { color-scheme: light; }
          html[data-theme="dark"]  { color-scheme: dark;  }
        body {
            font-family: 'Poppins', sans-serif;
            background-color: var(--bg-primary);
            color: var(--text-primary);
        }
        .nav-active { color: #3b82f6; }
        .reveal {
            opacity: 0;
            transform: translateY(30px);
            transition: opacity 0.3s ease-out, transform 0.3s ease-out;
        }
        .reveal.visible {
            opacity: 1;
            transform: translateY(0);
        }
        img {
            transition: transform 0.25s ease, box-shadow 0.25s ease;
        }
        img:hover {
            transform: scale(1.03);
        }
        .gradient-border-top {
            border-top: 1px solid;
            border-image-slice: 1;
            border-image-source: linear-gradient(to right, transparent, var(--border-color), transparent);
        }
        #settings-modal {
            top: 100%;
            right: 0;
            transform: translateY(0.5rem);
            transform-origin: top right;
            transition: opacity 0.2s ease, transform 0.2s ease;
        }
        #settings-modal.hidden {
            opacity: 0;
            transform: translateY(0.5rem) scale(0.95);
            pointer-events: none;
        }

        #theme-toggle #sun-icon, #theme-toggle #moon-icon {
            transition: transform 0.3s ease-in-out, opacity 0.3s ease-in-out;
        }
        [data-theme="dark"] #sun-icon {
            transform: translateY(150%) rotate(90deg); opacity: 0;
        }
        [data-theme="dark"] #moon-icon {
            transform: translateY(0) rotate(0); opacity: 1;
        }
        [data-theme="light"] #sun-icon {
            transform: translateY(0) rotate(0); opacity: 1;
        }
        [data-theme="light"] #moon-icon {
            transform: translateY(-150%) rotate(-90deg); opacity: 0;
        }