* {margin: 0;padding: 0;box-sizing: border-box}

        /* THEME VARIABLES - borrowed from Keith Site index.html */
        :root {--primary: #00df9a;--secondary: #7c3aed;--dark: #0a0a0a;--darker: #111111;--light: #f5f5f5;--gray: #a1a1aa;--border: rgba(255, 255, 255, 0.1);--card-bg: var(--darker);--text-color: var(--light);--shadow: 0 8px 24px rgba(0, 0, 0, 0.6);--radius: 0.75rem;--success: #10b981;/* WhatsApp specific */
            --whatsapp-green: #25D366;--whatsapp-dark: #075E54;--whatsapp-teal: #128C7E}

        body {font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;background: var(--dark);min-height: 100vh;display: flex;align-items: center;justify-content: center;padding: 24px;transition: background 0.3s, color 0.3s;color: var(--text-color)}

        /* subtle animated mesh gradient overlay */
        body::before {content: '';position: fixed;inset: 0;background: radial-gradient(circle at 20% 40%, rgba(0, 223, 154, 0.06) 0%, transparent 50%),
                        radial-gradient(circle at 85% 70%, rgba(124, 58, 237, 0.04) 0%, transparent 55%);pointer-events: none;z-index: 0}

        .container {width: 100%;max-width: 580px;background: var(--card-bg);border: 4px solid #000;border-radius: var(--radius);box-shadow: var(--shadow);overflow: hidden;transition: background 0.3s, border-color 0.3s;z-index: 10;position: relative}

        /* header with keith green accent & theme toggle */
        .header {background: #fefce8;border-bottom: 3px solid #000;padding: 1.5rem 2rem;display: flex;justify-content: space-between;align-items: center;flex-wrap: wrap;gap: 0.8rem;position: relative}

        .header::after {content: '';position: absolute;bottom: 0;left: 0;width: 100%;height: 3px;background: var(--primary);opacity: 0.6}

        .header-left {display: flex;align-items: center;gap: 0.8rem}

        .logo-icon {font-size: 2.2rem;color: #000}

        .header h1 {font-size: 1.8rem;font-weight: 700;letter-spacing: -0.5px;color: var(--text-color)}

        .header h1 span {color: #000}

        .subtitle {color: var(--gray);font-size: 0.85rem;margin-left: 0.2rem}

        /* content */
        .content {padding: 28px 24px 32px}

        /* method selector */
        .method-selector {background: #fffbe6;border-radius: 32px;padding: 16px 18px;margin-bottom: 28px;border: 4px solid #000}

        .input-label {font-weight: 600;margin-bottom: 12px;color: var(--text-color);display: flex;align-items: center;gap: 8px}

        .method-buttons {display: flex;gap: 14px;margin-top: 14px}

        .method-btn {flex: 1;background: rgba(0,0,0,0.3);border-radius: 32px;padding: 16px 8px;display: flex;flex-direction: column;align-items: center;cursor: pointer;transition: all 0.3s;color: var(--text-color);border: 3px solid #000;box-shadow: 3px 3px 0 0 #000}

        .method-btn:hover {transform: translateY(-3px);border-color: var(--primary)}

        .method-btn.active {background: rgba(0, 223, 154, 0.15);border-color: var(--primary);border: 3px solid #000;box-shadow: 3px 3px 0 0 #000}

        .method-icon {font-size: 32px;margin-bottom: 8px;color: #000}
        .method-name {font-weight: 700;font-size: 1rem}
        .method-desc {font-size: 0.7rem;color: var(--gray);margin-top: 4px}

        /* QR & Pair sections */
        .qr-section, .pair-section {display: none;animation: fadeSlideUp 0.45s ease}
        .qr-section.active, .pair-section.active {display: block}
        @keyframes fadeSlideUp {
            from {opacity: 0;transform: translateY(12px)}
            to {opacity: 1;transform: translateY(0)}
        }

        .qr-container {text-align: center}
        .qr-display {background: white;border-radius: 32px;padding: 18px;display: inline-block;margin: 8px 0 18px;transition: all 0.2s;position: relative}
        .qr-image {width: 230px;height: 230px;display: block;border-radius: 24px}

        .timer-bar-container {width: 250px;margin: 12px auto;background: var(--border);height: 5px;border-radius: 10px;overflow: hidden}
        .timer-bar {height: 100%;width: 100%;background: var(--primary);transform-origin: left;transition: transform 0.3s}
        .timer-bar.shrinking {animation: shrinkTimer 30s linear forwards}
        @keyframes shrinkTimer { from {transform: scaleX(1)} to {transform: scaleX(0)} }

        .timer-text {font-size: 0.8rem;color: var(--gray);font-weight: 500}
        .timer-number {color: #000;font-weight: 800;font-family: 'Space Grotesk', monospace}

        /* pairing */
        .phone-input {width: 100%;padding: 15px 20px;background: #ffffff;border: 4px solid #000;border-radius: 44px;font-size: 1rem;color: var(--text-color);transition: all 0.2s;outline: none}
        .phone-input:focus {border-color: var(--primary);box-shadow: 4px 4px 0 0 #000}
        .phone-input::placeholder {color: var(--gray)}

        .action-btn {background: var(--primary);color: #000;border-radius: 44px;padding: 15px 20px;font-weight: 700;width: 100%;margin-top: 20px;cursor: pointer;transition: all 0.25s;display: flex;align-items: center;justify-content: center;gap: 10px;border: 3px solid #000;box-shadow: 3px 3px 0 0 #000}
        .action-btn:hover {transform: scale(1.02);background: #00c98a;box-shadow: 0 8px 20px -8px rgba(0, 223, 154, 0.4)}
        .action-btn:disabled {opacity: 0.6;cursor: not-allowed;transform: none !important}

        .code-display {background: #ffffff;border-radius: 36px;padding: 24px;border: 1px solid var(--primary);margin: 20px 0;text-align: center}
        .code {font-size: 2.2rem;font-family: 'Space Grotesk', monospace;font-weight: 700;letter-spacing: 5px;color: var(--text-color);background: rgba(0,0,0,0.2);padding: 18px;border-radius: 28px}
        .code-label {color: var(--gray);font-size: 0.85rem}

        .copy-btn.copied {background: var(--success);color: white;border: 3px solid #000;box-shadow: 3px 3px 0 0 #000}

        .loading {text-align: center;margin: 20px 0}
        .spinner {width: 36px;height: 36px;border: 2px solid #000;border-top-color: var(--primary);border-radius: 50%;animation: spin 0.8s linear infinite;margin: 0 auto 12px}
        @keyframes spin { 0% {transform: rotate(0deg)} 100% {transform: rotate(360deg)} }

        .error-message {background: rgba(239, 68, 68, 0.15);border-left: 4px solid #ef4444;border-radius: 20px;padding: 12px;margin-bottom: 20px;display: none;align-items: center;gap: 12px;color: #ef4444}
        .error-message.active {display: flex}

        /* instructions */
        .instructions-modern {background: #fffbe6;border-radius: 28px;padding: 22px;margin-top: 28px;border: 4px solid #000}
        .instruction-title {font-weight: 700;display: flex;align-items: center;gap: 10px;color: var(--text-color);margin-bottom: 18px;font-size: 1rem}
        .step-list {display: flex;flex-direction: column;gap: 14px}
        .step-item {display: flex;align-items: center;gap: 14px;font-size: 0.85rem;color: var(--gray)}
        .step-badge {width: 28px;height: 28px;background: var(--primary);border-radius: 30px;display: inline-flex;align-items: center;justify-content: center;font-weight: 800;font-size: 0.8rem;color: #000}

        .status-dot {width: 8px;height: 8px;background: var(--primary);border-radius: 50%;display: inline-block;margin-right: 8px;animation: pulse 1.8s infinite}
        @keyframes pulse { 0%,100% {opacity: 1} 50% {opacity: 0.4} }

        /* footer */
        .footer {text-align: center;padding: 1.2rem;font-size: 0.85rem;color: var(--gray);border-top: 3px solid #000;background: #fefce8}
        .footer .brand {color: #000;font-weight: 500}

        @media (max-width: 520px) {
            .container {max-width: 96%}
            .qr-image {width: 190px;height: 190px}
            .code {font-size: 1.7rem;letter-spacing: 3px}
            .method-btn {padding: 12px 6px}
            .header {flex-direction: column;align-items: stretch;text-align: center}
            .header-left {justify-content: center}
        }