/* --- Synthwave Color Palette (CSS Variables) --- */
        :root {
            --bg-gradient-start: #3730a3; /* indigo-900 */
            --bg-gradient-via: #5b21b6;   /* purple-900 */
            --bg-gradient-end: #000000;   /* black */
            --navbar-bg: rgba(91, 33, 182, 0.4); /* purple-900 opacity-40 */
            --container-bg: rgba(91, 33, 182, 0.6); /* purple-900 opacity-60 */
            --text-color: #e5e7eb;      /* gray-200 */
            --nav-text-color: #c4b5fd;  /* purple-300 */
            --accent-pink: #ead4df;     /* pink-400 */
            --accent-cyan: #67e8f9;     /* cyan-300 */
            --accent-orange: #fb923c;   /* orange-400 */
            --border-accent: #ec4899;   /* pink-500 */
            --border-subtle: #6d28d9;   /* purple-700 */
            --shadow-accent: 0 0 12px rgba(236, 72, 153, 0.6);
            --shadow-cyan: 0 0 12px rgba(56, 189, 248, 0.6);
            --hover-bg: rgba(109, 40, 217, 0.8); /* purple-800 opacity-80 */
            --nav-hover-text: #f472b6; /* pink-400 */
            --field-selected-bg: rgba(219, 39, 119, 0.4); /* pink-600 opacity-40 */
            --field-selected-text: #f9a8d4; /* pink-300 */
            --field-deselected-opacity: 0.7;
            --field-hover-opacity: 1;
        }

        body {
            font-family: 'Courier New', Courier, monospace; /* Mono font */
        }

        /* Apply base styles using variables */
        .synthwave-bg { background: linear-gradient(to bottom right, var(--bg-gradient-start), var(--bg-gradient-via), var(--bg-gradient-end)); }
        .synthwave-text { color: var(--text-color); }
        .synthwave-navbar-bg { background-color: rgba(91, 33, 182, 0.86); }
        .synthwave-container-bg { background-color: var(--container-bg); }
        .synthwave-nav-text { color: var(--nav-text-color); }
        .synthwave-accent-pink { color: var(--accent-pink); }
        .synthwave-accent-cyan { color: var(--accent-cyan); }
        .synthwave-accent-orange { color: var(--accent-orange); }
        .synthwave-border-accent { border-color: var(--border-accent); }
        .synthwave-border-subtle { border-color: var(--border-subtle); }
        .synthwave-shadow-cyan { box-shadow: var(--shadow-cyan); }
        .synthwave-hover-bg:hover { background-color: var(--hover-bg); }
        .synthwave-nav-hover-text:hover { color: var(--nav-hover-text); }

        /* Styles for field buttons (toggled by JS) */
        .field-button {
            border-color: var(--border-subtle);
            color: var(--text-color);
            opacity: var(--field-deselected-opacity);
            transition: all 0.2s ease-in-out;
        }
        .field-button:hover {
            opacity: var(--field-hover-opacity);
            border-color: var(--accent-cyan);
            box-shadow: var(--shadow-cyan);
        }
        .field-button.selected {
            border-color: var(--border-accent);
            color: var(--field-selected-text);
            box-shadow: var(--shadow-accent);
            background-color: var(--field-selected-bg);
            opacity: 1; /* Ensure selected is fully opaque */
        }

        /* Add backdrop blur utility */
        .backdrop-blur-sm { backdrop-filter: blur(4px); }

        /* Hide elements initially */
        .hidden-initially { display: none; }