:root {
            /* Dark Mode (High Contrast & Glows) */
            --bg-color: #050510;
            --grid-color: rgba(0, 243, 255, 0.1); 
            
            /* Brighter Neons */
            --neon-pink: #ff0066;
            --neon-blue: #00eaff;
            --neon-green: #39ff14;
            
            /* DESIGN FIX: Pure White Text */
            --text-main: #FFFFFF; 
            
            /* DESIGN FIX: Darker, Opaque Panel */
            --panel-bg: rgba(5, 5, 15, 0.95);
            
            --border-width: 2px;
            --scan-opacity: 0.15;
        }

        /* LIGHT MODE */
        [data-theme="light"] {
            --bg-color: #eef2f5;
            --grid-color: rgba(0, 0, 0, 0.08);
            --neon-pink: #d81b60;
            --neon-blue: #1565c0;
            --neon-green: #2e7d32;
            --text-main: #263238;
            --panel-bg: rgba(255, 255, 255, 0.95);
            --border-width: 1px;
            --scan-opacity: 0.03;
        }

        * { margin: 0; padding: 0; box-sizing: border-box; }
        
        body {
            background-color: var(--bg-color);
            color: var(--text-main);
            font-family: 'Share Tech Mono', monospace;
            overflow-x: hidden;
            font-size: 16px;
            line-height: 1.6;
            transition: background-color 0.3s, color 0.3s;
        }

        /* --- BACKGROUND: TRON GRID --- */
        .retro-grid {
            position: fixed;
            top: 0; left: 0; width: 100vw; height: 100vh;
            background-image: 
                linear-gradient(var(--grid-color) 1px, transparent 1px),
                linear-gradient(90deg, var(--grid-color) 1px, transparent 1px);
            background-size: 50px 50px;
            transform: perspective(500px) rotateX(60deg);
            transform-origin: center top;
            animation: moveGrid 4s linear infinite;
            z-index: -3;
            opacity: 0.5;
            mask-image: linear-gradient(to bottom, rgba(0,0,0,1) 0%, rgba(0,0,0,0) 80%);
            pointer-events: none;
        }

        @keyframes moveGrid {
            0% { background-position: 0 0; }
            100% { background-position: 0 50px; }
        }


        .scanlines {
            position: fixed; top: 0; left: 0; width: 100%; height: 100%;
            background: linear-gradient(rgba(18, 16, 16, 0) 50%, rgba(0, 0, 0, var(--scan-opacity)) 50%), linear-gradient(90deg, rgba(255, 0, 0, 0.06), rgba(0, 255, 0, 0.02), rgba(0, 0, 255, 0.06));
            background-size: 100% 4px, 4px 100%;
            pointer-events: none; z-index: 9998;
        }

        /* --- CURSOR --- */
        .cursor-crosshair {
            position: fixed; top: 0; left: 0; width: 20px; height: 20px;
            border: 2px solid var(--neon-blue);
            transform: translate(-50%, -50%);
            pointer-events: none; z-index: 10000;
            mix-blend-mode: difference;
            transition: all 0.15s ease;
        }

        /* --- LOADING SCREEN --- */
        .loading-screen {
            position: fixed;
            top: 0; left: 0;
            width: 100%; height: 100%;
            background: var(--bg-color);
            z-index: 10001;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            transition: opacity 0.5s;
        }

        .loading-screen.hidden { opacity: 0; pointer-events: none; }

        .loader-text {
            font-family: 'Press Start 2P', cursive;
            color: var(--neon-blue);
            font-size: 0.8rem;
            margin-bottom: 30px;
            text-shadow: 0 0 10px var(--neon-blue);
        }

        .progress-container { width: 250px; height: 15px; border: 2px solid var(--neon-blue); background: rgba(0,0,0,0.5); }
        .progress { height: 100%; background: var(--neon-pink); width: 0; transition: width 0.3s; box-shadow: 0 0 10px var(--neon-pink); }

        /* --- THEME TOGGLE --- */
        .theme-switch {
            position: fixed; top: 80px; right: 20px;
            width: 50px; height: 26px;
            background: rgba(0,0,0,0.5);
            border: var(--border-width) solid var(--neon-blue);
            border-radius: 30px;
            cursor: pointer; z-index: 1000;
            display: flex; align-items: center; padding: 2px;
        }
        [data-theme="light"] .theme-switch { background: rgba(255,255,255,0.5); }
        
        .switch-circle {
            width: 18px; height: 18px; background: var(--neon-blue); border-radius: 50%;
            transition: transform 0.3s; display: flex; align-items: center; justify-content: center;
        }
        .switch-icon { font-size: 10px; color: #000; }
        [data-theme="light"] .switch-circle { transform: translateX(24px); background: var(--neon-pink); }

        /* --- HEADER --- */
        header {
            position: fixed; width: 100%; padding: 15px 30px;
            display: flex; justify-content: space-between; align-items: center;
            z-index: 100; background: rgba(5, 5, 16, 0.9);
            border-bottom: var(--border-width) solid var(--neon-pink);
            backdrop-filter: blur(10px);
            transition: background 0.3s;
        }
        [data-theme="light"] header {
            background: rgba(255, 255, 255, 0.9);
            border-bottom-color: var(--neon-blue);
        }

        /* --- LOGO STYLES --- */
        .logo-container {
            display: flex;
            align-items: center;
            gap: 10px;
            text-decoration: none;
            user-select: none;
            transition: transform 0.3s ease;
        }

        .logo-icon {
            font-size: 1.6rem;
            color: var(--neon-pink);
            text-shadow: 0 0 10px var(--neon-pink);
            transition: transform 0.3s;
        }

        .logo-text-wrapper {
            display: flex;
            flex-direction: column;
            line-height: 1;
        }

        .logo-text {
            font-family: 'Press Start 2P', cursive;
            font-size: 0.8rem;
            color: var(--neon-blue);
            text-shadow: 0 0 5px var(--neon-blue);
            letter-spacing: 1px;
        }

        .logo-sub {
            font-size: 0.5rem;
            color: var(--text-main);
            opacity: 0.9;
            margin-top: 3px;
            font-family: 'Share Tech Mono', monospace;
            letter-spacing: 2px;
            text-shadow: 0 0 2px rgba(255,255,255,0.5); /* Light glow */
        }

        .logo-dot {
            color: var(--neon-pink);
            text-shadow: 0 0 5px var(--neon-pink);
        }

        .logo-container:hover .logo-icon {
            transform: rotate(-15deg) scale(1.1);
            color: var(--neon-blue);
            text-shadow: 0 0 15px var(--neon-blue);
        }
        .logo-container:hover .logo-text {
            text-shadow: 0 0 10px var(--neon-blue);
        }

        [data-theme="light"] .logo-text {
            color: var(--neon-blue);
            text-shadow: none;
        }
        [data-theme="light"] .logo-icon {
            color: var(--neon-pink);
            text-shadow: none;
        }

        /* --- NAV --- */
        nav ul { display: flex; gap: 25px; list-style: none; }
        nav a {
            color: var(--text-main); text-decoration: none; font-family: 'Press Start 2P', cursive;
            font-size: 0.6rem; text-transform: uppercase; letter-spacing: 1px;
            position: relative; padding: 5px; transition: 0.3s;
        }
        nav a:hover { color: var(--neon-pink); text-shadow: 0 0 8px var(--neon-pink); }

        .mobile-menu-btn { display: none; font-size: 1.5rem; color: var(--neon-blue); cursor: pointer; z-index: 1001; }

        /* --- HERO --- */
        .hero {
            min-height: 100vh; display: flex; flex-direction: column;
            justify-content: center; align-items: center; text-align: center;
            position: relative; z-index: 1; padding-top: 80px;
        }
        
        .main-title {
            font-family: 'Press Start 2P', cursive; font-size: 3.5rem;
            color: #fff;
            margin-bottom: 20px; line-height: 1.2;
            text-shadow: 4px 4px 0px var(--neon-pink), -2px -2px 0px var(--neon-blue), 0 0 20px rgba(255,255,255,0.5);
            letter-spacing: 2px; animation: floatTitle 3s ease-in-out infinite;
            padding: 0 10px;
            transition: color 0.3s;
        }
        
        [data-theme="light"] .main-title {
            color: var(--text-main);
            text-shadow: 2px 2px 0px var(--neon-pink), -1px -1px 0px var(--neon-blue);
        }

        @keyframes floatTitle {
            0%, 100% { transform: translateY(0); }
            50% { transform: translateY(-10px); }
        }

        .hero-sub {
            color: var(--neon-blue); font-family: 'Share Tech Mono', monospace;
            font-size: 1.1rem; letter-spacing: 2px;
            background: rgba(0,0,0,0.7); padding: 15px 25px;
            border: var(--border-width) solid var(--neon-blue);
            box-shadow: 0 0 20px rgba(0, 243, 255, 0.2);
            text-transform: uppercase; min-height: 50px;
            width: 90%; max-width: 700px;
            display: flex; align-items: center; justify-content: center;
        }
        [data-theme="light"] .hero-sub {
            background: rgba(255,255,255,0.6);
            box-shadow: 0 0 15px rgba(21, 101, 192, 0.2);
        }

        .hero-stats { display: flex; gap: 30px; margin-top: 40px; flex-wrap: wrap; justify-content: center; }

        .stat-box { 
            text-align: center; padding: 15px 25px; 
            border: 2px solid var(--neon-blue); 
            background: rgba(0,0,0,0.6); 
            min-width: 120px;
            transition: background 0.3s;
        }
        [data-theme="light"] .stat-box {
            background: rgba(255,255,255,0.6);
            border-color: var(--neon-blue);
        }

        .stat-number { font-family: 'Press Start 2P', cursive; font-size: 1.5rem; color: var(--neon-pink); text-shadow: 0 0 10px var(--neon-pink); }
        .stat-label { font-size: 0.65rem; color: var(--neon-blue); margin-top: 10px; }

        /* --- SECTIONS --- */
        section { padding: 80px 10%; position: relative; z-index: 1; }

        .hud-panel {
            background: var(--panel-bg); border: var(--border-width) solid var(--neon-blue);
            padding: 30px; position: relative;
            box-shadow: 0 0 20px rgba(0, 243, 255, 0.15);
            border-left: 3px solid var(--neon-pink); border-right: 3px solid var(--neon-pink);
        }
        [data-theme="light"] .hud-panel {
            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
        }

        h2.section-title {
            text-align: center; font-family: 'Press Start 2P', cursive; margin-bottom: 40px; 
            color: var(--neon-blue); font-size: 1.2rem; line-height: 1.5;
        }

        /* ABOUT SECTION */
        .about-content { display: flex; flex-wrap: wrap; gap: 40px; align-items: start; }
        .about-text { flex: 1; min-width: 300px; }
        
        /* TEXT GLOW FIX FOR DARK MODE */
        .about-text p { 
            color: var(--text-main);
            margin-bottom: 20px; 
            line-height: 1.7;
            text-shadow: 0 0 1px rgba(255,255,255,0.1); /* Very subtle readability boost */
        }

        .journey-timeline { margin-top: 30px; }
        .timeline-item { padding: 10px 0; border-left: 3px solid var(--neon-blue); padding-left: 15px; margin-bottom: 15px; position: relative; }
        .timeline-item::before { content: ''; position: absolute; left: -7px; top: 15px; width: 12px; height: 12px; background: var(--neon-pink); border-radius: 50%; box-shadow: 0 0 10px var(--neon-pink); }
        .timeline-year { color: var(--neon-pink); font-family: 'Press Start 2P'; font-size: 0.6rem; }
        .timeline-desc { color: var(--text-main); margin-top: 5px; font-size: 0.9rem; }

        .tech-stack { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 20px; }
        .tech-badge { padding: 6px 12px; background: rgba(0,0,0,0.7); border: 1px solid var(--neon-blue); color: var(--neon-blue); font-family: 'Press Start 2P'; font-size: 0.5rem; transition: 0.3s; }
        [data-theme="light"] .tech-badge {
            background: rgba(255,255,255,0.8);
            color: var(--neon-blue);
        }

        /* SKILLS */
        .skills-container { flex: 1.5; min-width: 300px; }
        .skill-row { margin-bottom: 15px; }
        .skill-label { display: flex; justify-content: space-between; margin-bottom: 5px; color: var(--neon-pink); font-family: 'Press Start 2P'; font-size: 0.6rem; }
        .progress-bar-bg { width: 100%; height: 12px; background: #222; border: 1px solid #444; transition: 0.3s; }
        [data-theme="light"] .progress-bar-bg {
            background: #ddd;
            border-color: #ccc;
        }
        .progress-bar-fill { height: 100%; background: var(--neon-blue); width: 0; transition: width 1.5s ease-out; position: relative; }

        /* --- PROJECTS --- */
        .projects-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 25px; margin-top: 40px; }

        .project-card {
            background: var(--panel-bg); border: var(--border-width) solid var(--neon-blue);
            position: relative; overflow: hidden; transition: 0.3s; display: flex; flex-direction: column;
        }
        .project-card:hover { transform: translateY(-5px); box-shadow: 0 0 20px var(--neon-blue); border-color: var(--neon-pink); }
        [data-theme="light"] .project-card {
            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
        }
        [data-theme="light"] .project-card:hover {
            box-shadow: 0 5px 25px rgba(0, 243, 255, 0.3);
        }

        .project-image {
            width: 100%; height: 180px; 
            background: linear-gradient(135deg, var(--neon-pink) 0%, var(--neon-blue) 100%);
            display: flex; align-items: center; justify-content: center; font-size: 3rem; color: rgba(0,0,0,0.3); position: relative;
        }
        .project-status { position: absolute; top: 10px; right: 10px; padding: 4px 10px; background: var(--neon-green); color: #000; font-family: 'Press Start 2P'; font-size: 0.5rem; border-radius: 3px; }

        .project-info { padding: 20px; flex-grow: 1; display: flex; flex-direction: column; }
        .project-title { font-family: 'Press Start 2P', cursive; font-size: 0.9rem; margin-bottom: 10px; color: var(--neon-blue); }
        .project-desc { color: var(--text-main); margin-bottom: 15px; line-height: 1.5; font-size: 0.9rem; flex-grow: 1; }

        .project-tech { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 15px; }
        .tech-tag { padding: 3px 8px; background: rgba(0,0,0,0.5); border: 1px solid var(--neon-pink); color: var(--neon-pink); font-size: 0.6rem; }
        [data-theme="light"] .tech-tag {
            background: rgba(255,255,255,0.8);
        }

        .project-links { display: flex; gap: 10px; flex-wrap: wrap; }
        .project-link {
            padding: 8px 15px; background: var(--neon-blue); color: #fff; text-decoration: none;
            font-family: 'Press Start 2P'; font-size: 0.6rem; transition: 0.3s; display: inline-block; flex: 1; text-align: center;
        }
        .project-link:hover { background: var(--neon-pink); box-shadow: 0 0 10px var(--neon-pink); }

        /* --- FOOTER & BUTTONS --- */
        footer { 
            text-align: center; 
            padding: 60px 20px; 
            font-family: 'Press Start 2P', cursive; 
            font-size: 0.6rem; 
            color: var(--text-main); 
            border-top: 1px solid var(--neon-blue); 
            transition: 0.3s;
            background: rgba(5, 5, 15, 0.95);
        }
        [data-theme="light"] footer { color: #777; background: #fff; }
        
        .footer-title {
            color: var(--neon-blue);
            font-size: 0.8rem;
            margin-bottom: 30px;
            letter-spacing: 1px;
        }

        .footer-buttons-container {
            display: flex;
            justify-content: center;
            flex-wrap: wrap;
            gap: 15px;
            margin-bottom: 40px;
        }

        .footer-btn {
            display: flex;
            align-items: center;
            gap: 10px;
            padding: 12px 25px;
            border: 2px solid var(--neon-blue);
            background: rgba(0, 0, 0, 0.3);
            color: var(--text-main);
            text-decoration: none;
            font-family: 'Share Tech Mono', monospace;
            font-size: 0.9rem;
            transition: all 0.3s ease;
            border-radius: 4px;
            position: relative;
            overflow: hidden;
        }
        
        .footer-btn:hover {
            background: var(--neon-blue);
            color: #000;
            box-shadow: 0 0 15px var(--neon-blue);
            transform: translateY(-3px);
        }
        
        .footer-btn i { font-size: 1.2rem; }

        /* --- CONTACT FORM --- */
        .form-input {
            width: 100%; background: rgba(0,0,0,0.8); border: 2px solid #333; color: var(--neon-blue);
            padding: 15px; margin-bottom: 15px; font-family: 'Share Tech Mono', monospace; outline: none; transition: 0.3s;
            font-size: 16px;
        }
        [data-theme="light"] .form-input {
            background: rgba(255,255,255,0.9);
            border-color: #ccc;
            color: var(--text-main);
        }
        .form-input:focus { border-color: var(--neon-pink); box-shadow: 0 0 15px rgba(255, 0, 85, 0.4); }
        
        .btn-cyber {
            background: var(--neon-pink); color: #fff; border: none; padding: 15px 30px;
            font-family: 'Press Start 2P', cursive; font-size: 0.8rem; text-transform: uppercase;
            cursor: pointer; box-shadow: 4px 4px 0px #000; transition: 0.2s; text-decoration: none; display: inline-block; width: 100%;
        }
        [data-theme="light"] .btn-cyber {
            box-shadow: 3px 3px 0px rgba(0,0,0,0.3);
        }
        .btn-cyber:hover { transform: translate(2px, 2px); box-shadow: 2px 2px 0px #000; }

        .form-status {
            margin-top: 20px; padding: 15px; border: 2px solid var(--neon-green);
            background: rgba(57, 255, 20, 0.1); color: var(--neon-green); font-family: 'Press Start 2P'; font-size: 0.6rem; display: none; text-align: center;
        }
        .form-status.error { border-color: var(--neon-pink); background: rgba(255, 0, 85, 0.1); color: var(--neon-pink); }

        /* RESPONSIVE */
        @media (max-width: 768px) {
            .cursor-crosshair { display: none !important; }
            
            .logo-icon { font-size: 1.4rem; }
            .logo-text { font-size: 0.7rem; }
            .mobile-menu-btn { display: block; }
            
            nav {
                position: fixed; top: 0; right: -100%; width: 80%; height: 100vh;
                background: rgba(5, 5, 16, 0.98); transition: 0.4s cubic-bezier(0.4, 0, 0.2, 1);
                border-left: 2px solid var(--neon-pink); z-index: 1000;
                display: flex; flex-direction: column; justify-content: center;
            }
            [data-theme="light"] nav {
                background: rgba(255,255,255,0.98);
                border-left-color: var(--neon-blue);
            }

            nav.active { right: 0; }
            nav ul { flex-direction: column; padding: 0; gap: 0; width: 100%; text-align: center; }
            nav li { width: 100%; border-bottom: 1px solid rgba(255,255,255,0.05); }
            [data-theme="light"] nav li { border-bottom: 1px solid rgba(0,0,0,0.05); }
            nav a { display: block; padding: 20px; font-size: 0.8rem; }

            .main-title { font-size: 2rem; text-shadow: 2px 2px 0px var(--neon-pink), -1px -1px 0px var(--neon-blue); }
            .hero-sub { font-size: 0.8rem; width: 100%; padding: 10px; }
            .hero-stats { gap: 15px; }
            .stat-box { padding: 10px; min-width: 100px; }
            .stat-number { font-size: 1.2rem; }
            
            section { padding: 60px 5%; }
            .about-content { flex-direction: column; gap: 30px; }
            
            .hud-panel { padding: 20px; border-width: 1px; }

            .projects-grid { grid-template-columns: 1fr; }
            .btn-cyber { width: 100%; }
            
            .footer-buttons-container { flex-direction: column; width: 100%; }
            .footer-btn { width: 100%; justify-content: center; }
        }

        @media (max-width: 380px) {
            .main-title { font-size: 1.5rem; }
            .project-links { flex-direction: column; }
            .social-link-card { padding: 15px; }
            .social-icon { font-size: 1.5rem; }
        }

        /* Scroll Reveal Animation */
        .reveal-on-scroll { opacity: 0; transform: translateY(30px); transition: opacity 0.8s, transform 0.8s; }

        .reveal-on-scroll.active { opacity: 1; transform: translateY(0); }