/* =================================
         START: THEME UPDATE (NEON DARK)
         =================================
        */
        :root {
            --brand-color: #22d3ee; /* Neon Cyan (Tailwind cyan-400) */
            --brand-color-dark: #06b6d4; /* Tailwind cyan-500 */
            --bg-dark-primary: #111827; /* Tailwind gray-900 */
            --bg-dark-secondary: #1f2937; /* Tailwind gray-800 */
            --bg-dark-tertiary: #374151; /* Tailwind gray-700 */
            --border-dark: #4b5563; /* Tailwind gray-600 */
            --text-primary: #f3f4f6; /* Tailwind gray-100 */
            --text-secondary: #d1d5db; /* Tailwind gray-300 */
            --text-dark: #1f2937; /* Tailwind gray-800 */
        }

        body {
            font-family: 'Vazirmatn', sans-serif;
            /* Changed background to a dark gradient */
            background: linear-gradient(135deg, var(--bg-dark-secondary) 0%, var(--bg-dark-primary) 100%);
        }
        .card {
            /* Changed card to dark theme */
            background-color: var(--bg-dark-secondary);
            padding: 2.5rem;
            border-radius: 1.5rem;
            /* Updated shadow to a subtle neon glow */
            box-shadow: 0 0 20px rgba(34, 211, 238, 0.1), 0 5px 15px -5px rgba(0, 0, 0, 0.2);
            transition: all 0.3s ease-in-out;
            margin-bottom: 1.5rem; 
            border: 1px solid var(--bg-dark-tertiary);
        }
        .input-field {
            /* Updated input fields for dark theme */
            background-color: var(--bg-dark-tertiary);
            border: 1px solid var(--border-dark);
            color: var(--text-primary);
            padding: 0.75rem 1rem;
            border-radius: 0.75rem;
            width: 100%;
            font-size: 1rem;
            transition: border-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
        }
        .input-field:focus {
            /* Updated focus to neon cyan */
            outline: none;
            border-color: var(--brand-color);
            box-shadow: 0 0 0 3px rgba(34, 211, 238, 0.3);
        }
        .primary-btn {
            /* Updated primary button to neon cyan */
            background: var(--brand-color);
            color: var(--text-dark); /* Dark text for high contrast */
            padding: 0.75rem 1.5rem;
            border-radius: 0.75rem;
            font-weight: 700;
            transition: all 0.3s ease-in-out;
            /* Updated shadow to neon */
            box-shadow: 0 5px 15px rgba(34, 211, 238, 0.4);
        }
        .primary-btn:hover {
            background: var(--brand-color-dark);
            transform: translateY(-2px);
            box-shadow: 0 8px 20px rgba(34, 211, 238, 0.5);
        }
        .secondary-btn {
            /* Updated secondary button for dark theme */
            background-color: var(--bg-dark-tertiary);
            color: var(--text-secondary);
            padding: 0.75rem 1.5rem;
            border-radius: 0.75rem;
            font-weight: 600;
            transition: all 0.3s ease-in-out;
            width: 100%; 
        }
        .secondary-btn:hover {
            background-color: var(--border-dark);
        }
        .copy-btn {
            /* Updated copy button to neon outline */
            background-color: transparent;
            color: var(--brand-color);
            border: 1px solid var(--brand-color);
            padding: 0.5rem 1rem;
            border-radius: 0.5rem;
            font-weight: 600;
            transition: all 0.2s ease-in-out;
        }
        .copy-btn:hover {
            background-color: rgba(34, 211, 238, 0.1); /* Subtle neon glow */
        }

        /* --- QR Code Styling --- */
        #qrcode-container {
            width: 256px; /* Container size */
            height: 256px;
            margin: 0 auto;
            border-radius: 1.5rem; /* Rounded corners for the container */
            overflow: hidden; /* Clips the corners of the QR code */
            background-color: white; /* Keep white for scannability */
            box-shadow: 0 8px 15px rgba(0, 0, 0, 0.1);
        }
        
        #qrcode {
            width: 100%;
            height: 100%;
        }
        /* --- End QR Code Styling --- */

        .info-field {
            /* Updated readonly info field for dark theme */
            background-color: var(--bg-dark-tertiary);
            border: 1px solid var(--border-dark);
            color: var(--text-primary);
            padding: 0.75rem 1rem;
            border-radius: 0.75rem;
            width: 100%;
            font-family: 'Vazirmatn', monospace;
            direction: ltr;
            text-align: left;
            font-size: 0.95rem;
        }
        .admin-table-header {
            /* Updated admin table for dark theme */
            background-color: var(--bg-dark-tertiary);
            color: var(--text-secondary);
            font-weight: 700;
        }
        .admin-table-row:nth-child(odd) {
            background-color: transparent; /* Removed alternating color */
        }
        .admin-table-cell {
            padding: 1rem 1.5rem;
            border-bottom: 1px solid var(--bg-dark-tertiary); /* Darker border */
            color: var(--text-secondary);
        }
        .admin-label {
            display: block;
            margin-bottom: 0.5rem;
            color: var(--text-secondary);
        }
        /* =================================
         END: THEME UPDATE
         =================================
        */