:root {
            --primary: #bd00ff;
            --dark-bg: #000000;
            --panel-bg: #050505;
            --border: #39ff14;
            --retro-green: #39ff14;
            --retro-purple: #bd00ff;
            --gold: #fbbf24;
            --silver: #94a3b8;
            --bronze: #b45309;
        }

        body {
            font-family: 'VT323', monospace;
            background-color: #000;
            color: #39ff14;
            background-image: none;
            min-height: 100vh;
        }

        h1, h2, h3, .cinzel {
            font-family: 'VT323', monospace;
            text-shadow: 2px 2px 0px #000, -1px -1px 0 #bd00ff;
        }

        .retro-font {
            font-family: 'VT323', monospace;
        }

        /* Custom Scrollbar */
        ::-webkit-scrollbar {
            width: 12px;
        }
        ::-webkit-scrollbar-track {
            background: #000; 
            border-left: 1px solid #39ff14;
        }
        ::-webkit-scrollbar-thumb {
            background: #39ff14; 
            border: 2px solid #000;
        }
        ::-webkit-scrollbar-thumb:hover {
            background: #bd00ff; 
        }

        /* Dot Animation */
        .dot {
            transition: all 0.1s steps(2);
            border-radius: 0 !important; /* Square dots */
        }
        .dot:hover {
            transform: scale(1.1);
        }
        .dot.active {
            background-color: #39ff14;
            box-shadow: 0 0 5px #39ff14;
            border-color: #39ff14;
        }
        .dot.locked {
            opacity: 0.3;
            cursor: not-allowed;
            background-color: #111;
            border-color: #333;
            pointer-events: none; 
        }
        
        .dot-edge-filled {
            background-color: #bd00ff;
            border-color: #bd00ff;
            box-shadow: 0 0 5px #bd00ff;
            border-radius: 0 !important;
        }
        
        .dot-edge-empty {
            background-color: #000;
            border-color: #333;
            border-radius: 0 !important;
        }

        .tab-btn {
            font-family: 'VT323', monospace;
            text-transform: uppercase;
            letter-spacing: 2px;
            border: 1px solid transparent;
        }
        .tab-btn:hover {
            color: #bd00ff;
            text-shadow: 0 0 5px #bd00ff;
        }
        .tab-btn.active {
            color: #39ff14;
            background: #000;
            border: 1px solid #39ff14;
            border-bottom: 1px solid #000; /* Merge with content */
            margin-bottom: -1px;
            z-index: 10;
            box-shadow: 0 -5px 10px rgba(57, 255, 20, 0.1);
        }

        .input-field {
            background: #000;
            border: 1px solid #39ff14;
            color: #39ff14;
            font-family: 'VT323', monospace;
            text-transform: uppercase;
        }
        .input-field::placeholder {
            color: #1a4d1a;
            text-transform: none;
        }
        .input-field:focus {
            outline: none;
            border-color: #bd00ff;
            box-shadow: 0 0 5px #bd00ff;
        }

        select.input-field option {
            background-color: #000;
            color: #39ff14;
        }

        /* Highlight Styles */
        .skill-highlight-major {
            border-left: 3px solid var(--gold);
            background: linear-gradient(90deg, rgba(251, 191, 36, 0.1), transparent);
        }
        .skill-highlight-minor {
            border-left: 3px solid var(--silver);
            background: linear-gradient(90deg, rgba(148, 163, 184, 0.1), transparent);
        }
        .skill-highlight-role {
            border-left: 3px solid var(--bronze);
            background: linear-gradient(90deg, rgba(180, 83, 9, 0.1), transparent);
        }
        .skill-dimmed {
            opacity: 0.4;
        }

        /* RETRO SHEET STYLES */
        .scanlines {
            background: linear-gradient(
                to bottom,
                rgba(255,255,255,0),
                rgba(255,255,255,0) 50%,
                rgba(0,0,0,0.2) 50%,
                rgba(0,0,0,0.2)
            );
            background-size: 100% 4px;
            pointer-events: none;
        }

        .retro-border {
            border: 2px solid var(--retro-purple);
            box-shadow: 0 0 10px var(--retro-purple), inset 0 0 20px rgba(189, 0, 255, 0.2);
        }

        .retro-text-shadow {
            text-shadow: 2px 2px 0px #000, -1px -1px 0 #39ff14;
        }

        .crt-flicker {
            animation: flicker 0.15s infinite;
        }

        @keyframes flicker {
            0% { opacity: 0.97; }
            50% { opacity: 1; }
            100% { opacity: 0.98; }
        }

        .marquee-container {
            overflow: hidden;
            white-space: nowrap;
        }
        .marquee-content {
            display: inline-block;
            animation: marquee 15s linear infinite;
        }
        @keyframes marquee {
            0% { transform: translateX(100%); }
            100% { transform: translateX(-100%); }
        }