:root {
            --bg-dark: #0d1117;
            --card-bg: #161b22;
            --border-color: #30363d;
            --text-main: #c9d1d9;
            --accent-blue: #58a6ff;
            --top-tier: #f1e05a;
            /* High-Fidelity Hopium Meter Vars (Restored from your snippet) */
            --thumb-size: 100px;  /* Scaled slightly for modal fit, originally 110px */
            --track-height: 72px; /* Scaled slightly for modal fit, originally 82px */
            --container-radius: 100px;
            
            --base-hopium: #fcd34d; 
            --transition: .4s cubic-bezier(0, -0.02, 0.4, 1.25);
            
            --thumb-pos-pct: 50%;
            --skull-opacity: 0;
            --rocket-opacity: 0;
            --bg-skull-opacity: 0.5;
            --bg-rocket-opacity: 0.5;
        }
        body { 
            background-color: var(--bg-dark); 
            color: var(--text-main); 
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif; 
            overflow-x: hidden;
        }
        .custom-scrollbar::-webkit-scrollbar { width: 5px; }
        .custom-scrollbar::-webkit-scrollbar-track { background: var(--bg-dark); }
        .custom-scrollbar::-webkit-scrollbar-thumb { background: #30363d; border-radius: 10px; }
        
        /* Premium Shift Card Design */
        .shift-card { 
            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); 
            border: 1px solid var(--border-color);
            position: relative;
            cursor: pointer;
            overflow: hidden;
            border-radius: 12px;
        }

        /* The Clean "Selected" State */
        .shift-card.active { 
            background: #1c2128; 
            border-color: var(--accent-blue);
            transform: translateX(8px); /* Protrusion to show selection */
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4), 
                        0 0 20px rgba(88, 166, 255, 0.15); /* Soft glow */
        }

        /* Blue Indicator Bar for Active Card */
        .shift-card.active::before {
            content: "";
            position: absolute;
            left: 0;
            top: 0;
            bottom: 0;
            width: 4px;
            background: var(--accent-blue);
            box-shadow: 2px 0 12px rgba(88, 166, 255, 0.6);
            z-index: 10;
        }

        /* Subtle Hover */
        .shift-card:not(.active):hover {
            background: #1c2128;
            border-color: #444c56;
            transform: translateX(3px);
        }

        .rank-gradient { 
            background: linear-gradient(135deg, #238636 0%, #2ea043 100%); 
        }
        .top-tier-badge { 
            background: rgba(241, 224, 90, 0.1); 
            border: 1px solid rgba(241, 224, 90, 0.3); 
            color: #f1e05a; 
        }
        canvas { filter: drop-shadow(0 0 8px rgba(0,0,0,0.3)); }

        .sort-toggle-btn {
            background: #21262d;
            border: 1px solid #30363d;
            padding: 4px 10px;
            border-radius: 6px;
            font-size: 10px;
            font-weight: bold;
            color: #8b949e;
            transition: all 0.2s;
        }
        .sort-toggle-btn.active {
            background: #30363d;
            color: #58a6ff;
            border-color: #58a6ff;
        }

        .line-toggle-checkbox {
            cursor: pointer;
            accent-color: var(--accent-blue);
        }
        
        .predictor-input:focus {
            box-shadow: 0 0 0 2px rgba(88, 166, 255, 0.3);
            border-color: var(--accent-blue);
        }
        #dev-console-modal {
            transition: opacity 0.2s ease-in-out;
        }


        /* Restored "Big Feel" Slider Styling */
        .slider-area {
            position: relative;
            width: 100%;
            height: 140px; 
            display: flex;
            align-items: center;
            margin: 10px 0;
        }

        .track-visual {
            position: absolute;
            width: 100%;
            height: var(--track-height);
            background: var(--track-gradient, #fef3c7);
            border-radius: var(--container-radius);
            border: 8px solid #fff; /* Restored thick white border */
            box-shadow: inset 0 10px 20px rgba(0,0,0,0.2), 0 10px 20px -5px rgba(0,0,0,0.3);
            z-index: 1;
            overflow: hidden;
            transition: var(--transition);
        }

        .track-pattern {
            width: 100%;
            height: 100%;
            background: var(--internal-style);
        }

        .custom-thumb {
            position: absolute;
            left: var(--thumb-pos-pct);
            transform: translate(-50%, -50%);
            top: 50%;
            width: var(--thumb-size);
            height: var(--thumb-size);
            background: #fff;
            border-radius: 50%;
            border: 8px solid var(--base-hopium); /* Restored thick dynamic border */
            box-shadow: 0 12px 24px rgba(0,0,0,0.4);
            z-index: 10;
            display: flex;
            justify-content: center;
            align-items: center;
            pointer-events: none;
            transition: border-color 0.2s ease;
        }

        .thumb-emoji { position: absolute; font-size: 2.8rem; transition: opacity 0.2s ease; }
        .skull-thumb { opacity: var(--skull-opacity); }
        .rocket-thumb { opacity: var(--rocket-opacity); }

        .hidden-input {
            position: absolute;
            width: 100%;
            height: 100%;
            opacity: 0;
            cursor: pointer;
            z-index: 20;
        }

        .deco { font-size: 2.5rem; opacity: 0.3; z-index: 2; transition: opacity 0.3s; pointer-events: none; }
        
        .terminal-text {
            font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
        }
        
        .glow-blue {
            box-shadow: 0 0 30px rgba(88, 166, 255, 0.2);
        }

        .hopium-label-glow {
            text-shadow: 0 0 10px rgba(255, 255, 255, 0.1);
        }
                .reset-btn {
            background-color: #44559f;
            color: var(--base);
            border: 4px solid var(--lighter);
            padding: 0.8rem 2.5rem;
            border-radius: 30px;
            font-family: inherit;
            font-weight: 900;
            font-size: 1.1rem;
            cursor: pointer;
            transition: all 0.2s ease;
            box-shadow: 0 6px 0 var(--lighter);
        }

        .reset-btn:hover {
            transform: translateY(-2px);
            box-shadow: 0 8px 0 var(--lighter);
        }

        .reset-btn:active {
            transform: translateY(4px);
            box-shadow: 0 2px 0 var(--lighter);
        }
        /* Update your h1 or accents to use the variable */
.text-blue-500 {
    color: var(--accent-blue) !important;
}

#predicted-percentile-display {
    color: var(--accent-blue);
    text-shadow: var(--accent-glow);
}

#deviation-alert {
    color: var(--accent-red);
    text-shadow: var(--accent-glow);
}