/* Design Tokens & Root Variables */
        :root {
            --bg: #0c0a09;
            --card: rgba(28, 25, 23, 0.75);
            --card-elevated: rgba(41, 37, 36, 0.85);
            --border: rgba(255, 255, 255, 0.08);
            --border-glow: rgba(139, 92, 246, 0.45);
            
            --primary: #8b5cf6;
            --primary-light: #a78bfa;
            --primary-gradient: linear-gradient(135deg, #7c3aed, #8b5cf6, #a78bfa);
            --success: #10b981;
            --danger: #ef4444;
            
            --text: #fafaf9;
            --text-sub: #a8a29e;
            --text-muted: #78716c;
            
            --radius-app: 28px;
            --radius-btn: 16px;
            --radius-input: 16px;
            
            --shadow-glass: 0 16px 40px -10px rgba(0, 0, 0, 0.7), inset 0 1px 1px rgba(255, 255, 255, 0.1);
        }

        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            -webkit-tap-highlight-color: transparent;
        }
        /* Custom Text Selection Highlight: Violet text on crisp white background */
        ::selection {
            background-color: #ffffff !important;
            color: #7c3aed !important;
            text-shadow: none !important;
        }
        ::-moz-selection {
            background-color: #ffffff !important;
            color: #7c3aed !important;
            text-shadow: none !important;
        }
        input::selection,
        textarea::selection {
            background-color: #ffffff !important;
            color: #7c3aed !important;
            text-shadow: none !important;
        }


        body {
            font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
            background-color: var(--bg);
            color: var(--text);
            min-height: 100vh;
            min-height: -webkit-fill-available;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: flex-start;
            padding: 0;
            margin: 0;
            position: relative;
            overflow-x: hidden;
            transition: opacity 0.2s ease;
        }

        body.is-native-app {
            padding: 14px 16px 20px;
        }

        html[lang="ar"] body,
        [dir="rtl"] body {
            font-family: 'Cairo', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Noto Sans Arabic', 'Tahoma', sans-serif;
        }


        /* Ambient Lighting (GPU-Friendly Radial Gradients without Expensive Blur Filter) */
        .ambient-glow {
            position: fixed;
            width: 520px;
            height: 520px;
            border-radius: 50%;
            pointer-events: none;
            z-index: 0;
            opacity: 0.42;
            transform: translateZ(0);
        }
        .glow-top {
            background: radial-gradient(circle, rgba(139, 92, 246, 0.28) 0%, rgba(139, 92, 246, 0.09) 38%, rgba(139, 92, 246, 0) 70%);
            top: -160px;
            right: -160px;
        }
        .glow-bottom {
            background: radial-gradient(circle, rgba(124, 58, 237, 0.22) 0%, rgba(124, 58, 237, 0.07) 38%, rgba(124, 58, 237, 0) 70%);
            bottom: -180px;
            left: -170px;
        }


        /* ======================================================== */
        /* Language Text Continuous Vertical Roll Animation         */
        /* ======================================================== */
        .lang-slide-text,
        #appTitle,
        #appSubtitle,
        .mode-tab span,
        .btn-card-tool span,
        .result-label,
        .btn-action span,
        .tool-btn span,
        .fab-github-label,
        .qr-title,
        .qr-desc,
        .nfc-title,
        .nfc-desc,
        .perm-lock-modal .qr-title,
        .perm-lock-modal .qr-desc,
        .perm-lock-actions button,
        .btn-qr-download span,
        .btn-qr-close,
        .update-title,
        .update-desc,
        .update-actions button,
        .hero-title,
        .hero-subtitle,
        .feature-card h3,
        .feature-card p,
        .faq-question span,
        .faq-answer p {
            transition: transform 0.22s cubic-bezier(0.22, 1, 0.36, 1), 
                        opacity 0.2s cubic-bezier(0.22, 1, 0.36, 1);
            backface-visibility: hidden;
        }

        body.is-lang-animating .lang-slide-text,
        body.is-lang-animating #appTitle,
        body.is-lang-animating #appSubtitle,
        body.is-lang-animating .mode-tab span,
        body.is-lang-animating .btn-card-tool span,
        body.is-lang-animating .result-label,
        body.is-lang-animating .btn-action span,
        body.is-lang-animating .tool-btn span,
        body.is-lang-animating .fab-github-label {
            will-change: transform, opacity;
        }

        /* Phase 1 (Exit): Outgoing text slides UP and fades out */
        body.is-lang-switching .lang-slide-text,
        body.is-lang-switching #appTitle,
        body.is-lang-switching #appSubtitle,
        body.is-lang-switching .mode-tab span,
        body.is-lang-switching .btn-card-tool span,
        body.is-lang-switching .result-label,
        body.is-lang-switching .btn-action span,
        body.is-lang-switching .tool-btn span,
        body.is-lang-switching .fab-github-label,
        body.is-lang-switching .qr-title,
        body.is-lang-switching .qr-desc,
        body.is-lang-switching .nfc-title,
        body.is-lang-switching .nfc-desc,
        body.is-lang-switching .perm-lock-modal .qr-title,
        body.is-lang-switching .perm-lock-modal .qr-desc,
        body.is-lang-switching .perm-lock-actions button,
        body.is-lang-switching .btn-qr-download span,
        body.is-lang-switching .btn-qr-close,
        body.is-lang-switching .update-title,
        body.is-lang-switching .update-desc,
        body.is-lang-switching .update-actions button,
        body.is-lang-switching .hero-title,
        body.is-lang-switching .hero-subtitle,
        body.is-lang-switching .feature-card h3,
        body.is-lang-switching .feature-card p,
        body.is-lang-switching .faq-question span,
        body.is-lang-switching .faq-answer p {
            opacity: 0 !important;
            transform: translate3d(0, -9px, 0) !important;
            transition: transform 0.11s cubic-bezier(0.4, 0, 1, 1), 
                        opacity 0.11s cubic-bezier(0.4, 0, 1, 1) !important;
        }

        /* Phase 2 (Prepare Incoming): New text positioned BELOW without transition */
        body.is-lang-entering .lang-slide-text,
        body.is-lang-entering #appTitle,
        body.is-lang-entering #appSubtitle,
        body.is-lang-entering .mode-tab span,
        body.is-lang-entering .btn-card-tool span,
        body.is-lang-entering .result-label,
        body.is-lang-entering .btn-action span,
        body.is-lang-entering .tool-btn span,
        body.is-lang-entering .fab-github-label,
        body.is-lang-entering .qr-title,
        body.is-lang-entering .qr-desc,
        body.is-lang-entering .nfc-title,
        body.is-lang-entering .nfc-desc,
        body.is-lang-entering .perm-lock-modal .qr-title,
        body.is-lang-entering .perm-lock-modal .qr-desc,
        body.is-lang-entering .perm-lock-actions button,
        body.is-lang-entering .btn-qr-download span,
        body.is-lang-entering .btn-qr-close,
        body.is-lang-entering .update-title,
        body.is-lang-entering .update-desc,
        body.is-lang-entering .update-actions button,
        body.is-lang-entering .hero-title,
        body.is-lang-entering .hero-subtitle,
        body.is-lang-entering .feature-card h3,
        body.is-lang-entering .feature-card p,
        body.is-lang-entering .faq-question span,
        body.is-lang-entering .faq-answer p {
            opacity: 0 !important;
            transform: translate3d(0, 9px, 0) !important;
            transition: none !important;
        }

        /* Input Placeholders Transition */
        input::placeholder {
            transition: opacity 0.2s ease;
        }
        body.is-lang-switching input::placeholder,
        body.is-lang-entering input::placeholder {
            opacity: 0 !important;
            transition: opacity 0.1s ease !important;
        }


        /* ======================================================== */
        /* Page Opening & Entrance Animations (Smooth GPU Cascade)  */
        /* ======================================================== */
        @keyframes pageGlowBloom {
            0% {
                opacity: 0;
                transform: scale3d(0.85, 0.85, 1);
            }
            100% {
                opacity: 0.42;
                transform: scale3d(1, 1, 1);
            }
        }

        @keyframes pageNavSlideDown {
            0% {
                opacity: 0;
                transform: translate3d(0, -14px, 0);
            }
            100% {
                opacity: 1;
                transform: translate3d(0, 0, 0);
            }
        }

        @keyframes pageFadeSlideUp {
            0% {
                opacity: 0;
                transform: translate3d(0, 12px, 0);
            }
            100% {
                opacity: 1;
                transform: translate3d(0, 0, 0);
            }
        }

        @keyframes pageIconSpring {
            0% {
                opacity: 0;
                transform: scale3d(0.84, 0.84, 1);
            }
            100% {
                opacity: 1;
                transform: scale3d(1, 1, 1);
            }
        }

        @keyframes pageCardFloat {
            0% {
                opacity: 0;
                transform: translate3d(0, 16px, 0) scale3d(0.985, 0.985, 1);
            }
            100% {
                opacity: 1;
                transform: translate3d(0, 0, 0) scale3d(1, 1, 1);
            }
        }

        @keyframes pageSectionCascade {
            0% {
                opacity: 0;
                transform: translate3d(0, 18px, 0);
            }
            100% {
                opacity: 1;
                transform: translate3d(0, 0, 0);
            }
        }

        /* Entrance Assignments with Orchestrated Delays */
        .ambient-glow {
            animation: pageGlowBloom 0.7s cubic-bezier(0.22, 1, 0.36, 1) backwards;
        }

        .desktop-navbar {
            animation: pageNavSlideDown 0.45s cubic-bezier(0.22, 1, 0.36, 1) backwards;
        }

        .top-bar {
            animation: pageFadeSlideUp 0.42s cubic-bezier(0.22, 1, 0.36, 1) 0.03s backwards;
        }

        header {
            animation: pageFadeSlideUp 0.46s cubic-bezier(0.22, 1, 0.36, 1) 0.06s backwards;
        }

        .app-icon {
            animation: pageIconSpring 0.5s cubic-bezier(0.22, 1, 0.36, 1) 0.08s backwards;
        }

        .main-input-card {
            animation: pageCardFloat 0.5s cubic-bezier(0.22, 1, 0.36, 1) 0.11s backwards;
        }

        #howItWorksSection {
            animation: pageSectionCascade 0.55s cubic-bezier(0.22, 1, 0.36, 1) 0.18s backwards;
        }

        #featuresSection {
            animation: pageSectionCascade 0.55s cubic-bezier(0.22, 1, 0.36, 1) 0.24s backwards;
        }

        #faqSection {
            animation: pageSectionCascade 0.55s cubic-bezier(0.22, 1, 0.36, 1) 0.3s backwards;
        }

        .app-footer {
            animation: pageSectionCascade 0.55s cubic-bezier(0.22, 1, 0.36, 1) 0.36s backwards;
        }

        /* Seamless Interruption Handling: When switching languages, cancel entrance keyframes */
        body.is-lang-switching .ambient-glow,
        body.is-lang-switching .desktop-navbar,
        body.is-lang-switching .top-bar,
        body.is-lang-switching header,
        body.is-lang-switching .app-icon,
        body.is-lang-switching .main-input-card,
        body.is-lang-switching .glass-card,
        body.is-lang-switching .marketing-section,
        body.is-lang-switching #faqSection,
        body.is-lang-switching .app-footer {
            animation: none !important;
        }

        /* Accessibility: Respect Reduced Motion Preferences */
        @media (prefers-reduced-motion: reduce) {
            .ambient-glow,
            .desktop-navbar,
            .top-bar,
            header,
            .app-icon,
            .glass-card,
            .marketing-section,
            .app-footer {
                animation: none !important;
                opacity: 1 !important;
                transform: none !important;
                filter: none !important;
            }
        }