:root {
           
            --color-bg-primary: #020617; /* Slate 950 */
            --color-bg-secondary: #0f172a; /* Slate 900 */
            --color-bg-secondary-rgb: 15, 23, 42;
            --color-bg-input: #1e293b; /* Slate 800 */
            --color-border: #334155; /* Slate 700 */
            --color-border-rgb: 51, 65, 85;
            --color-accent: #22d3ee; /* Cyan 400 */
            --color-accent-rgb: 34, 211, 238;
            --color-text-primary: #f1f5f9; /* Slate 100 */
            --color-text-secondary: #94a3b8; /* Slate 400 */
            --color-success: #4ade80; /* Green 400 */
            --color-error: #f87171; /* Red 400 */
            --color-warning: #facc15; /* Yellow 400 */
        }


        html, body {
            height: 100%;
        }
        body {
            display: flex;
            flex-direction: column;
            background-color: var(--color-bg-primary);
            color: var(--color-text-primary);
            font-family: 'Inter', sans-serif;
            transition: background-color 0.3s ease, color 0.3s ease;
            background-image: linear-gradient(rgba(255,255,255,0.02) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.02) 1px, transparent 1px);
            background-size: 20px 20px;
        }
        main {
            flex-grow: 1;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        
        .mfp-bg {
            background: rgba(var(--color-bg-secondary-rgb), 0.7);
            backdrop-filter: blur(8px);
            -webkit-backdrop-filter: blur(8px);
        }
        .mfp-zoom-in .mfp-content {
            opacity: 0;
            transform: scale(0.95);
            transition: all 0.3s ease-in-out;
        }
        .mfp-zoom-in.mfp-ready .mfp-content {
            opacity: 1;
            transform: scale(1);
        }
        .mfp-zoom-in.mfp-removing .mfp-content {
            opacity: 0;
            transform: scale(0.95);
        }
        #modal-container {
            background: var(--color-bg-secondary);
            border: 1px solid var(--color-border);
            box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.37);
            transition: opacity 0.3s ease-in-out, max-width 0.3s ease, background 2s ease;
			   max-height: 90vh; /* Prevents modal from being taller than the screen */
    overflow-y: auto; /* Allows vertical scrolling ONLY when needed */
        }
        #modal-container.is-hiding {
            opacity: 0;
        }
        
        @keyframes pulse-glow {
            0%, 100% { box-shadow: 0 0 20px rgba(var(--color-accent-rgb), 0.3); }
            50% { box-shadow: 0 0 35px rgba(var(--color-accent-rgb), 0.5); }
        }
        #hero-cta-btn {
             animation: pulse-glow 3s infinite ease-in-out;
        }
        
        @keyframes pulse-text-glow {
            0%, 100% {
                text-shadow: 0 0 4px rgba(var(--color-accent-rgb), 0.5);
            }
            50% {
                text-shadow: 0 0 12px rgba(var(--color-accent-rgb), 1), 0 0 20px rgba(var(--color-accent-rgb), 0.7);
            }
        }
        .text-glow-effect {
            animation: pulse-text-glow 0.8s ease-in-out;
        }

        #sonar-container {
            position: relative;
            width: 250px;
            height: 250px;
            border-radius: 50%;
            background-color: var(--color-bg-primary);
            overflow: hidden;
        }
        #sonar-overlay {
            position: absolute;
            top: 0; left: 0;
            width: 100%;
            height: 100%;
            border-radius: 50%;
            background-image: 
                repeating-radial-gradient(rgba(var(--color-accent-rgb), 0.15) 0 1px, transparent 1px 100%),
                repeating-linear-gradient(rgba(var(--color-accent-rgb), 0.15) 0 1px, transparent 1px 100%);
            background-size: 50px 50px, 50px 50px;
            border: 1px solid rgba(var(--color-accent-rgb), 0.2);
        }
        #sonar-sweep {
            position: absolute;
            top: 50%;
            left: 50%;
            width: 50%;
            height: 2px;
            background: linear-gradient(90deg, transparent, rgba(var(--color-accent-rgb), 0.8));
            transform-origin: left center;
            animation: sonar-sweep-animation 3s linear infinite;
        }
        #sonar-ping {
            position: absolute;
            top: 50%;
            left: 50%;
            width: 8px;
            height: 8px;
            background: var(--color-accent);
            border-radius: 50%;
            transform: translate(-50%, -50%);
            box-shadow: 0 0 10px var(--color-accent), 0 0 20px var(--color-accent);
        }
        .sonar-blip {
            position: absolute;
            width: 6px;
            height: 6px;
            background-color: var(--color-accent);
            border-radius: 50%;
            box-shadow: 0 0 8px var(--color-accent);
            opacity: 0;
            animation: fade-in-out 4s ease-in-out;
        }
        @keyframes fade-in-out {
            0%, 100% { opacity: 0; }
            50% { opacity: 1; }
        }
        @keyframes sonar-sweep-animation {
            from { transform: rotate(0deg); }
            to { transform: rotate(360deg); }
        }
        
        .gender-btn {
            border: 2px solid var(--color-border);
            transition: all 0.2s ease-in-out;
        }
        .gender-btn:hover {
            border-color: var(--color-accent);
            background-color: rgba(var(--color-accent-rgb), 0.1);
        }
        .gender-btn.selected {
            border-color: var(--color-accent);
            background-color: rgba(var(--color-accent-rgb), 0.2);
            box-shadow: 0 0 15px rgba(var(--color-accent-rgb), 0.3);
        }
        #signal-strength-bar-inner {
            background: var(--color-accent);
        }
        .profile-card-image {
            filter: blur(12px);
            transform: scale(1.2);
            opacity: 0.7;
        }
        .text-blur {
            filter: blur(3px);
            opacity: 0.6;
            user-select: none;
        }