:root {
            --color-trust-accent: #7C3AED;
        }

        body {
            font-family: 'Inter', sans-serif;
            touch-action: pan-y;
        }

        .glass {
            background: rgba(255, 255, 255, 0.05);
            backdrop-filter: blur(12px);
            -webkit-backdrop-filter: blur(12px);
            border: 1px solid rgba(255, 255, 255, 0.1);
        }

        .ambient-glow {
            position: absolute;
            width: 300px;
            height: 300px;
            background: radial-gradient(circle, rgba(99, 102, 241, 0.3) 0%, rgba(0, 0, 0, 0) 70%);
            border-radius: 50%;
            z-index: -1;
            top: -50px;
            left: -50px;
        }

        .ambient-glow-2 {
            position: fixed;
            width: 400px;
            height: 400px;
            background: radial-gradient(circle, rgba(236, 72, 153, 0.2) 0%, rgba(0, 0, 0, 0) 70%);
            border-radius: 50%;
            z-index: -1;
            bottom: 100px;
            right: -100px;
            pointer-events: none;
        }

        .wheel-container {
            position: relative;
            width: 280px;
            height: 280px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            box-shadow: inset 0 0 20px rgba(0, 0, 0, 0.5), 0 10px 30px rgba(0, 0, 0, 0.3);
            touch-action: none;
            user-select: none;
        }

        #wheelTrack {
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            border-radius: 50%;
            background: conic-gradient(from 180deg at 50% 50%, rgba(255, 255, 255, 0.05) 0deg, rgba(255, 255, 255, 0.05) 360deg);
            z-index: 1;
            pointer-events: none;
        }

        .wheel-inner {
            width: 200px;
            height: 200px;
            background: #0f172a;
            border-radius: 50%;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            z-index: 5;
            border: 1px solid rgba(255, 255, 255, 0.1);
            pointer-events: auto;
        }

        .handle {
            position: absolute;
            width: 32px;
            height: 32px;
            border-radius: 50%;
            background: white;
            z-index: 10;
            cursor: grab;
            display: flex;
            align-items: center;
            justify-content: center;
            transform: translate(-50%, -50%);
            transition: transform 0.1s, box-shadow 0.2s;
            box-shadow: 0 4px 10px rgba(0,0,0,0.3);
            border: 2px solid transparent;
        }

        #handleStart { border-color: #6366f1; }
        #handleEnd { border-color: #ec4899; }

        .handle::after {
            content: "";
            width: 6px;
            height: 6px;
            background: rgba(0,0,0,0.2);
            border-radius: 50%;
        }

        #handleStart::after { background: #6366f1; }
        #handleEnd::after { background: #ec4899; }

        .handle:active {
            cursor: grabbing;
            transform: translate(-50%, -50%) scale(1.2);
        }

        #handleStart {
            box-shadow: 0 0 15px #6366f1, inset 0 0 0 4px #6366f1;
        }

        #handleEnd {
            box-shadow: 0 0 15px #ec4899, inset 0 0 0 4px #ec4899;
        }

        /* Animación Educativa Nudge */
        @keyframes nudge {

            0%,
            50%,
            100% {
                transform: scale(1);
            }

            25%,
            75% {
                transform: scale(1.1);
            }
        }

        .nudge-click {
            animation: nudge 1s ease-in-out;
            z-index: 20 !important;
        }

        input[type=range] {
            -webkit-appearance: none;
            appearance: none;
            background: transparent;
        }

        input[type=range]::-webkit-slider-thumb {
            -webkit-appearance: none;
            appearance: none;
            height: 24px;
            width: 24px;
            border-radius: 50%;
            background: #ffffff;
            cursor: pointer;
            box-shadow: 0 0 10px rgba(236, 72, 153, 0.8);
            margin-top: -10px;
        }

        input[type=range]::-webkit-slider-runnable-track {
            width: 100%;
            height: 6px;
            cursor: pointer;
            background: linear-gradient(90deg, #6366f1, #a855f7, #ec4899);
            border-radius: 3px;
        }

        .mesh-bg-container {
            position: fixed;
            inset: 0;
            overflow: hidden;
            pointer-events: none;
            z-index: -1;
        }

        .mesh-orb {
            position: absolute;
            width: 450px;
            height: 450px;
            border-radius: 50%;
            filter: blur(100px);
            z-index: -1;
            opacity: 0.25;
            pointer-events: none;
            transition: all 2s ease-in-out;
        }
        .orb-indigo { background: rgba(99, 102, 241, 0.6); top: -100px; left: -100px; animation: float-2026 15s infinite alternate; }
        .orb-pink { background: rgba(236, 72, 153, 0.5); bottom: -100px; right: -100px; animation: float-2026 12s infinite alternate-reverse; }
        .orb-amber { background: rgba(245, 158, 11, 0.4); top: 50%; left: 50%; transform: translate(-50%, -50%); animation: pulse-2026 10s infinite alternate; }

        @keyframes float-2026 {
            0% { transform: translate(0,0) rotate(0deg); }
            100% { transform: translate(40px, -60px) rotate(15deg); }
        }
        @keyframes pulse-2026 {
            0% { transform: translate(-50%, -50%) scale(0.8); opacity: 0.2; }
            100% { transform: translate(-50%, -50%) scale(1.3); opacity: 0.5; }
        }

        .glass-2026 {
            background: rgba(255, 255, 255, 0.7);
            backdrop-filter: blur(40px) saturate(180%);
            -webkit-backdrop-filter: blur(40px) saturate(180%);
            border: 1px solid rgba(255, 255, 255, 0.3);
            box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.1);
            position: relative;
            overflow: hidden;
        }

        .dark .glass-2026 {
            background: rgba(15, 23, 42, 0.75);
            border: 1px solid rgba(255, 255, 255, 0.05);
            box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.4);
        }

        /* Border Glow Animation */
        .glow-border-animate::before {
            content: '';
            position: absolute;
            inset: -2px;
            background: conic-gradient(from var(--angle), transparent 70%, var(--glow-color) 100%);
            border-radius: inherit;
            animation: rotate-border 4s linear infinite;
            padding: 2px;
            -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
            mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
            -webkit-mask-composite: xor;
            mask-composite: exclude;
            opacity: 0;
            transition: opacity 0.5s;
        }
        .group:focus-within .glow-border-animate::before { opacity: 1; }

        @property --angle {
            syntax: '<angle>';
            initial-value: 0deg;
            inherits: false;
        }
        @keyframes rotate-border {
            to { --angle: 360deg; }
        }

        /* Text Flicker Animation */
        @keyframes flicker-2026 {
            0% { opacity: 1; filter: brightness(1); }
            10% { opacity: 0.8; filter: brightness(1.2); }
            20% { opacity: 1; filter: brightness(1); }
        }
        .text-update-animate { animation: flicker-2026 0.4s ease-out; }

        /* Barra de Navegación Inferior (Estilo Instagram) */
        .bottom-nav {
            position: fixed;
            bottom: 0;
            left: 50%;
            transform: translateX(-50%);
            width: 100%;
            max-width: 384px; /* sm breakpoint logic */
            background: rgba(255, 255, 255, 0.85);
            backdrop-filter: blur(20px);
            -webkit-backdrop-filter: blur(20px);
            border-top: 1px solid rgba(0, 0, 0, 0.05);
            display: flex;
            justify-content: space-around;
            padding: 0.75rem 0.25rem calc(0.75rem + env(safe-area-inset-bottom));
            z-index: 100;
            box-shadow: 0 -10px 25px rgba(0,0,0,0.05);
        }
        .dark .bottom-nav {
            background: rgba(15, 23, 42, 0.85);
            border-top: 1px solid rgba(255, 255, 255, 0.05);
            box-shadow: 0 -10px 25px rgba(0,0,0,0.2);
        }
        .nav-item {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 4px;
            color: #94a3b8; /* slate-400 */
            transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
            cursor: pointer;
            flex: 1;
            position: relative;
        }
        .nav-item.active {
            color: #843dff; /* Indigo-ish */
        }
        .dark .nav-item.active {
            color: #818cf8; /* indigo-400 */
        }
        .nav-item:active { scale: 0.9; }

        .nav-create-btn {
            background: linear-gradient(135deg, #843dff, #ec4899, #f59e0b);
            background-size: 200% 200%;
            animation: magic-shimmer 4s linear infinite;
            color: white !important;
            width: 42px;
            height: 42px;
            border-radius: 14px;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-top: -6px;
            box-shadow: 0 4px 15px rgba(132, 61, 255, 0.4);
            transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
        }

        @keyframes magic-shimmer {
            0% { background-position: 0% 50%; }
            50% { background-position: 100% 50%; }
            100% { background-position: 0% 50%; }
        }

        .nav-create-label {
            font-size: 7px;
            font-weight: 900;
            text-transform: uppercase;
            letter-spacing: -0.02em;
            margin-top: 2px;
        }

        .view-section {
            transition: opacity 0.3s ease, transform 0.3s ease;
            width: 100%;
        }
        .view-section.hidden {
            display: none;
            opacity: 0;
            transform: translateY(10px);
        }

        /* Modern Feed Styles */
        .modern-card {
            background: white;
            border-radius: 24px;
            overflow: hidden;
            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
            transition: transform 0.2s, box-shadow 0.2s;
        }
        .dark .modern-card {
            background: #1e293b;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
        }
        .modern-card:active {
            transform: scale(0.98);
        }
        .card-image-gradient {
            position: absolute;
            bottom: 0;
            left: 0;
            right: 0;
            height: 60%;
            background: linear-gradient(to top, rgba(255,255,255,1) 0%, rgba(255,255,255,0) 100%);
        }
        .dark .card-image-gradient {
            background: linear-gradient(to top, #1e293b 0%, rgba(30,41,59,0) 100%);
        }
        .user-pill {
            background: rgba(255, 255, 255, 0.9);
            backdrop-filter: blur(8px);
            padding: 4px 10px 4px 4px;
            border-radius: 99px;
            display: flex;
            align-items: center;
            gap: 6px;
            box-shadow: 0 4px 12px rgba(0,0,0,0.1);
        }
        .dark .user-pill {
            background: rgba(15, 23, 42, 0.8);
            border: 1px solid rgba(255,255,255,0.1);
        }
        .category-chip {
            white-space: nowrap;
            padding: 8px 16px;
            border-radius: 99px;
            font-size: 13px;
            font-weight: 600;
            background: #f1f5f9;
            color: #64748b;
            transition: all 0.2s;
            cursor: pointer;
            border: 1px solid transparent;
        }
        .category-chip.active {
            background: #6366f1;
            color: white;
            box-shadow: 0 4px 12px rgba(99, 102, 241, 0.3);
        }
        .dark .category-chip {
            background: #1e293b;
            color: #94a3b8;
        }
        .dark .category-chip.active {
            background: #818cf8;
            color: white;
        }
        .search-container {
            background: #f1f5f9;
            border-radius: 99px;
            padding: 0 16px;
            display: flex;
            align-items: center;
            gap: 10px;
            height: 48px;
            transition: all 0.2s;
            border: 1.5px solid transparent;
        }
        .search-container:focus-within {
            background: white;
            border-color: #6366f1;
            box-shadow: 0 0 0 4px rgba(99, 102, 241, 0.1);
        }
        .dark .search-container {
            background: #0f172a;
        }
        .dark .search-container:focus-within {
            background: #1e293b;
            border-color: #818cf8;
        }

        /* --- Hazmeunplan Planners: Tier Styles --- */
        .aura-container {
            position: relative;
            z-index: 10;
        }

        /* Planner L1 (Explorador): Ring estático sutil — sólo por méritos (500+ pts) */
        .planner-l1 {
            box-shadow: 0 0 0 2.5px rgba(99, 102, 241, 0.45), 0 0 12px rgba(99, 102, 241, 0.15);
            border-radius: 50%;
        }

        /* Planner L2 (Pro): Ring animado con gradiente suave — 2500+ pts ó 500💎 */
        .planner-l2 {
            position: relative;
        }
        .planner-l2::before {
            content: '';
            position: absolute;
            inset: -2px;
            border-radius: 50%;
            background: conic-gradient(from 0deg, #a78bfa, #6366f1, #38bdf8, #a78bfa);
            animation: planner-pro-spin 4s linear infinite;
            z-index: -1;
        }
        .planner-l2::after {
            content: '';
            position: absolute;
            inset: -6px;
            background: radial-gradient(circle, rgba(139, 92, 246, 0.18) 0%, transparent 70%);
            border-radius: 50%;
            z-index: -1;
        }

        /* Planner L3 (Avanzado): Existing aura-l1 — Indigo Pulse */
        .aura-l1 {
            position: relative;
        }
        .aura-l1::before {
            content: '';
            position: absolute;
            inset: 0;
            padding: 3px;
            border-radius: 50%;
            background: linear-gradient(135deg, #6366f1, #818cf8);
            -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
            mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
            -webkit-mask-composite: xor;
            mask-composite: exclude;
            animation: aura-pulse 3s infinite ease-in-out;
        }
        .aura-l1::after {
            content: '';
            position: absolute;
            inset: -8px;
            background: radial-gradient(circle, rgba(99, 102, 241, 0.2) 0%, transparent 70%);
            border-radius: 50%;
            z-index: -1;
        }

        /* Planner L4 (Experto): Existing aura-l2 — Fire Amber Rotate */
        .aura-l2 {
            position: relative;
        }
        .aura-l2::before {
            content: '';
            position: absolute;
            inset: 0;
            padding: 3px;
            border-radius: 50%;
            background: conic-gradient(from 0deg, #f59e0b, #ec4899, #8b5cf6, #f59e0b);
            -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
            mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
            -webkit-mask-composite: xor;
            mask-composite: exclude;
            animation: aura-rotate 2s linear infinite;
        }
        .aura-l2::after {
            content: '';
            position: absolute;
            inset: -10px;
            background: radial-gradient(circle, rgba(245, 158, 11, 0.3) 0%, rgba(236, 72, 153, 0.1) 50%, transparent 80%);
            border-radius: 50%;
            filter: blur(4px);
            z-index: -1;
            animation: aura-breathe 2.5s infinite alternate ease-in-out;
        }

        @keyframes planner-pro-spin {
            from { transform: rotate(0deg); }
            to   { transform: rotate(360deg); }
        }
        @keyframes aura-pulse {
            0%, 100% { transform: scale(1); opacity: 0.8; }
            50% { transform: scale(1.05); opacity: 1; }
        }
        @keyframes aura-rotate {
            from { transform: rotate(0deg); }
            to { transform: rotate(360deg); }
        }
        @keyframes aura-breathe {
            0% { transform: scale(1); opacity: 0.4; }
            100% { transform: scale(1.15); opacity: 0.8; }
        }

        /* Premium Boost Effect */
        .premium-boost {
            position: relative;
            overflow: hidden;
            box-shadow: 0 0 20px rgba(99, 102, 241, 0.2);
            border: 1px solid rgba(245, 158, 11, 0.3) !important;
        }
        .premium-boost::before {
            content: '';
            position: absolute;
            top: -50%;
            left: -50%;
            width: 200%;
            height: 200%;
            background: linear-gradient(45deg, transparent, rgba(255,255,255,0.1), transparent);
            transform: rotate(45deg);
            animation: shine 4s infinite;
        }
        @keyframes shine {
            0% { transform: translateX(-100%) rotate(45deg); }
            100% { transform: translateX(100%) rotate(45deg); }
        }

        .no-scrollbar::-webkit-scrollbar { display: none; }
        .no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }

        /* Creator Stories Hub */
        .creator-hub-item {
            flex-shrink: 0;
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 0.25rem;
            width: 4rem;
            cursor: pointer;
            transition: transform 0.2s;
        }
        .creator-hub-item:active { transform: scale(0.95); }
        .creator-avatar-wrapper {
            width: 3.2rem;
            height: 3.2rem;
            border-radius: 9999px;
            padding: 2px;
            background: white;
            border: 1.5px solid #e2e8f0;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        .dark .creator-avatar-wrapper {
            background: #0f172a;
            border-color: #334155;
        }
        .creator-avatar-wrapper.promoted {
            border: none;
            background: linear-gradient(45deg, #f59e0b, #ec4899, #8b5cf6);
            padding: 2px;
        }
        .creator-avatar-wrapper.promoted img {
            border: 2px solid white;
        }
        .dark .creator-avatar-wrapper.promoted img {
            border-color: #0f172a;
        }

        /* --- [v6.8] Píldora Flotante Filtro Provincial --- */
        .floating-province-pill {
            position: fixed;
            bottom: 6rem; /* Justo sobre la bottom-nav con un aire de diseño */
            left: 50%;
            transform: translateX(-50%);
            width: calc(100% - 2.5rem);
            max-width: 340px;
            z-index: 90;
            background: rgba(255, 255, 255, 0.75);
            backdrop-filter: blur(12px);
            -webkit-backdrop-filter: blur(12px);
            padding: 0.75rem 1.25rem;
            border-radius: 9999px; /* Píldora perfecta */
            border: 1px solid rgba(255, 255, 255, 0.4);
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
            display: flex;
            align-items: center;
            justify-content: space-between;
            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        }
        .dark .floating-province-pill {
            background: rgba(30, 41, 59, 0.7);
            border: 1px solid rgba(255, 255, 255, 0.05);
            box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
        }
        .floating-province-pill:active {
            transform: translateX(-50%) scale(0.98);
        }

        /* --- [v7.0] Moment of the Day Tints --- */
        body.tod-morning { --tod-tint: rgba(255, 247, 237, 0.4); }
        body.tod-afternoon { --tod-tint: rgba(240, 249, 255, 0.3); }
        body.tod-evening { --tod-tint: rgba(255, 237, 213, 0.45); }
        body.tod-night { --tod-tint: rgba(15, 23, 42, 0.2); }

        #view-explore {
            transition: background 1s ease-in-out;
        }
        .dark #view-explore {
        }
        /* [v6.9.11] Premium Invite Styles */
        .invite-immersive-bg {
            position: absolute;
            inset: 0;
            background-size: cover;
            background-position: center;
            filter: blur(80px) saturate(1.4);
            opacity: 0.15;
            z-index: -1;
            transform: scale(1.1);
        }
        .dark .invite-immersive-bg {
            opacity: 0.25;
        }

        .invite-hero-container {
            position: relative;
            width: 100%;
            height: 340px;
            border-radius: 0 0 3rem 3rem;
            overflow: hidden;
            box-shadow: 0 20px 40px rgba(0,0,0,0.2);
        }
        .invite-hero-img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
        .invite-hero-overlay {
            position: absolute;
            inset: 0;
            background: linear-gradient(to top, rgba(15,23,42,0.95) 0%, rgba(15,23,42,0.4) 40%, transparent 100%);
        }

        .invite-host-card {
            background: rgba(255, 255, 255, 0.7);
            backdrop-filter: blur(20px);
            -webkit-backdrop-filter: blur(20px);
            border: 1px solid rgba(255, 255, 255, 0.3);
            box-shadow: 0 10px 30px rgba(99, 102, 241, 0.1);
        }
        .dark .invite-host-card {
            background: rgba(30, 41, 59, 0.6);
            border-color: rgba(255, 255, 255, 0.05);
        }

        .rsvp-primary-btn {
            background: linear-gradient(135deg, #6366f1 0%, #4f46e5 100%);
            box-shadow: 0 10px 25px -5px rgba(79, 70, 229, 0.4);
        }
        .rsvp-primary-btn:hover {
            box-shadow: 0 15px 30px -5px rgba(79, 70, 229, 0.5);
        }

        /* --- Ajustes específicos para la App Móvil Híbrida (Capacitor) --- */
        html.is-native-app .bottom-nav {
            display: none !important;
        }

        html.is-native-app body {
            padding-bottom: calc(4.5rem + env(safe-area-inset-bottom)) !important;
        }
        
        glass-nav-bar {
            display: none;
        }

        html.is-native-app glass-nav-bar {
            display: block !important;
        }



        /* --- Animación de Agitación (Fallo PIN OTP) --- */
        @keyframes shake {
            0%, 100% { transform: translateX(0); }
            25% { transform: translateX(-6px); }
            75% { transform: translateX(6px); }
        }
        .animate-shake {
            animation: shake 0.15s ease-in-out 3;
        }

        /* --- NATIVE IN-APP PURCHASE SHEET STYLES --- */
        .iap-backdrop {
            position: fixed;
            inset: 0;
            background-color: rgba(0, 0, 0, 0.6);
            backdrop-filter: blur(4px);
            z-index: 1000;
            display: flex;
            align-items: flex-end;
            justify-content: center;
            will-change: opacity;
            opacity: 0;
            transition: opacity 0.25s cubic-bezier(0.4, 0, 0.2, 1);
        }
        .iap-backdrop.is-active {
            opacity: 1;
        }
        .iap-sheet {
            width: 100%;
            max-width: 480px;
            border-top-left-radius: 28px;
            border-top-right-radius: 28px;
            padding-bottom: max(24px, env(safe-area-inset-bottom));
            box-shadow: 0 -10px 40px rgba(0, 0, 0, 0.5);
            transform: translateY(100%);
            will-change: transform;
            transition: transform 0.3s cubic-bezier(0.1, 0.76, 0.55, 0.94);
        }
        .iap-backdrop.is-active .iap-sheet {
            transform: translateY(0);
        }

        /* iOS App Store Sheet styling */
        .iap-sheet-ios {
            background-color: #1c1c1e;
            color: #ffffff;
            font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Icons", "Helvetica Neue", Helvetica, Arial, sans-serif;
            border-top: 1px solid rgba(255, 255, 255, 0.08);
        }
        
        /* Android Google Play Sheet styling */
        .iap-sheet-android {
            background-color: #202124;
            color: #e8eaed;
            font-family: "Google Sans", "Roboto", sans-serif;
            border-top: 1px solid rgba(255, 255, 255, 0.05);
        }

        /* Pulse and scanning animation for Face ID */
        .iap-radar-container {
            display: flex;
            align-items: center;
            justify-content: center;
            position: relative;
            width: 80px;
            height: 80px;
            margin: 0 auto;
        }
        .iap-radar-circle {
            position: absolute;
            width: 100%;
            height: 100%;
            border: 2px solid #0a84ff;
            border-radius: 50%;
            opacity: 0;
            animation: iap-radar-pulse 2s infinite linear;
        }
        .iap-radar-circle:nth-child(2) {
            animation-delay: 0.6s;
        }
        .iap-radar-circle:nth-child(3) {
            animation-delay: 1.2s;
        }
        @keyframes iap-radar-pulse {
            0% { transform: scale(0.6); opacity: 0; }
            50% { opacity: 0.6; }
            100% { transform: scale(1.3); opacity: 0; }
        }

        /* Success Checkmark Anim */
        .iap-success-checkmark {
            width: 64px;
            height: 64px;
            border-radius: 50%;
            display: block;
            stroke-width: 3;
            stroke: #34c759;
            stroke-miterlimit: 10;
            margin: 0 auto;
            box-shadow: inset 0px 0px 0px #34c759;
            animation: iap-fill .4s ease-in-out .4s forwards, iap-scale .3s ease-in-out .9s alternate forwards;
        }
        .iap-success-checkmark-circle {
            stroke-dasharray: 166;
            stroke-dashoffset: 166;
            stroke-width: 3;
            stroke-miterlimit: 10;
            stroke: #34c759;
            fill: none;
            animation: iap-stroke .6s cubic-bezier(.65,0,.45,1) forwards;
        }
        .iap-success-checkmark-check {
            transform-origin: 50% 50%;
            stroke-dasharray: 48;
            stroke-dashoffset: 48;
            animation: iap-stroke .3s cubic-bezier(.65,0,.45,1) .8s forwards;
        }
        @keyframes iap-stroke { 100% { stroke-dashoffset: 0; } }
        @keyframes iap-scale { 0%, 100% { transform: none; } 50% { transform: scale3d(1.1, 1.1, 1); } }
        @keyframes iap-fill { 100% { box-shadow: inset 0px 0px 0px 30px transparent; } }

        /* Hide Google Login button inside Capacitor Native App */
        html.is-native-app .google-login-container {
            display: none !important;
        }