@keyframes hark-popup-mobile-fade-in {
        from { 
          opacity: 0; 
          transform: translateY(100%); 
        }
        to { 
          opacity: 1; 
          transform: translateY(0); 
        }
      }
      
      @keyframes hark-popup-mobile-fade-out {
        from { 
          opacity: 1; 
          transform: translateY(0); 
        }
        to { 
          opacity: 0; 
          transform: translateY(100%); 
        }
      }
      
      @keyframes hark-popup-backdrop-fade-in {
        from { opacity: 0; }
        to { opacity: 1; }
      }
      
      @keyframes hark-popup-modal-fade-in {
        from { 
          opacity: 0; 
          transform: translate(-50%, -50%) scale(0.9); 
        }
        to { 
          opacity: 1; 
          transform: translate(-50%, -50%) scale(1); 
        }
      }
      
      @keyframes hark-popup-backdrop-fade-out {
        from { opacity: 1; }
        to { opacity: 0; }
      }
      
      @keyframes hark-popup-modal-fade-out {
        from { 
          opacity: 1; 
          transform: translate(-50%, -50%) scale(1); 
        }
        to { 
          opacity: 0; 
          transform: translate(-50%, -50%) scale(0.9); 
        }
      }
      
      .hark-popup-backdrop {
        position: fixed;
        top: 0;
        left: 0;
        width: 100vw;
        height: 100vh;
        /* Fallback for older browsers */
        background: var(--hx-shade-70);
        /* Modern browsers with backdrop filter support */
        background: linear-gradient(135deg, var(--hx-shade-71) 0%, var(--hx-shade-72) 100%);
        backdrop-filter: blur(8px);
        -webkit-backdrop-filter: blur(8px);
        z-index: 2147483647;
        display: none;
        animation: hark-popup-backdrop-fade-in 0.3s ease-out;
      }
      
      /* Fallback for browsers that don't support backdrop-filter */
      @supports not (backdrop-filter: blur(8px)) {
        .hark-popup-backdrop {
          background: var(--hx-shade-73);
        }
      }
      
      .hark-popup-backdrop.closing {
        animation: hark-popup-backdrop-fade-out 0.25s ease-in;
      }
      
      .hark-popup-modal {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: min(480px, calc(100vw - 32px));
        max-height: calc(100vh - 32px);
        border-radius: 16px;
        box-shadow: 
          0 25px 50px -12px var(--hx-shade-74),
          0 20px 25px -5px var(--hx-shade-03),
          0 0 0 1px var(--hx-scrim-21);
        animation: hark-popup-modal-fade-in 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
        overflow: hidden;
      }
      
      .hark-popup-modal.closing {
        animation: hark-popup-modal-fade-out 0.25s cubic-bezier(0.4, 0.0, 1, 1);
      }
      
      .hark-popup-iframe {
        width: 100%;
        height: 680px;
        border: none;
        border-radius: 16px;
        background: var(--hx-ink-01);
        display: block;
      }
      
      .hark-popup-close {
        position: absolute !important;
        top: 15px !important;
        right: 15px !important;
        width: 32px !important;
        height: 32px !important;
        border-radius: 50% !important;
        background: var(--hx-ink-01) !important;
        padding: 0 !important;
        border: none !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        cursor: pointer !important;
        box-shadow: 
          0 10px 15px -3px var(--hx-shade-03),
          0 4px 6px -2px var(--hx-shade-05),
          0 0 0 1px var(--hx-shade-05);
        transition: all 0.2s cubic-bezier(0.4, 0.0, 0.2, 1);
        z-index: 1 !important;
      }
      
      .hark-popup-close:hover {
        background: var(--hx-misc-19);
        box-shadow: 
          0 20px 25px -5px var(--hx-shade-03),
          0 10px 10px -5px var(--hx-shade-75),
          0 0 0 1px var(--hx-shade-05);
        transform: scale(1.05);
      }
      
      .hark-popup-close:active {
        transform: scale(0.95);
        transition-duration: 0.1s;
      }
      
      .hark-popup-close svg {
        width: 18px;
        height: 18px;
        opacity: 0.7;
        transition: opacity 0.2s ease;
        fill: var(--hx-ground-04);
      }
      
      .hark-popup-close:hover svg {
        opacity: 1;
      }
      
      @media (max-width: 640px) {
        .hark-popup-backdrop {
          /* Fallback for browsers that don't support dvh */
          height: 100vh;
          /* Use dynamic viewport height that accounts for browser UI */
          height: 100dvh;
        }
        
        .hark-popup-modal {
          width: 100vw;
          /* Fallback for browsers that don't support dvh */
          min-height: 100vh;
          /* Use min-height with dynamic viewport height */
          min-height: 100dvh;
          max-height: none;
          border-radius: 0;
          top: 0;
          left: 0;
          transform: translateY(0);
          animation: hark-popup-mobile-fade-in 0.3s ease-out;
          overflow-y: auto;
          -webkit-overflow-scrolling: touch;
        }
        
        .hark-popup-modal.closing {
          animation: hark-popup-mobile-fade-out 0.25s ease-in;
        }
        
        .hark-popup-iframe {
          /* Use min-height to ensure content is always accessible */
          /* Fallback for browsers that don't support dvh */
          min-height: calc(100vh - 20px);
          min-height: calc(100dvh - 20px);
          height: auto;
          border-radius: 0;
        }
        
        .hark-popup-close {
          /* Fixed to viewport, not modal - stays at top-right even when scrolling */
          position: fixed;
          top: 15px;
          right: 15px;
          z-index: 10001;
          /* Remove from modal's positioning context */
          transform: none;
        }
      }