@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap");

      :root {
        --primary: #ff5864;
        --secondary: #fe3c72;
        --dark: #2e2e2e;
        --light: #f5f5f5;
      }

      * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
        font-family: "Poppins", sans-serif;
      }

      body {
        background-color: var(--light);
        color: var(--dark);
        overflow-x: hidden;
      }

      .gradient-bg {
        background: linear-gradient(45deg, var(--primary), var(--secondary));
      }

      .card-shadow {
        box-shadow: 0 10px 30px -15px rgba(0, 0, 0, 0.3);
      }

      .profile-card {
        perspective: 1000px;
        transform-style: preserve-3d;
        transition: all 0.5s ease;
      }

      .profile-card.swipe-right {
        transform: translateX(100%) rotate(15deg);
        opacity: 0;
      }

      .profile-card.swipe-left {
        transform: translateX(-100%) rotate(-15deg);
        opacity: 0;
      }

      .video-container {
        position: relative;
        width: 100%;
        height: 0;
        padding-bottom: 125%;
        overflow: hidden;
      }

      .video-container video {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
      }

      .loading-screen {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: linear-gradient(135deg, #1a1a2e, #16213e, #0f3460);
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        z-index: 9999;
        transition: opacity 0.5s ease;
      }

      .loading-screen.hidden {
        opacity: 0;
        pointer-events: none;
      }

      .progress-bar {
        width: 100%;
        max-width: 400px;
        height: 20px;
        background-color: rgba(255, 255, 255, 0.2);
        border-radius: 10px;
        margin: 20px 0;
        overflow: hidden;
      }

      .progress {
        height: 100%;
        width: 0%;
        background: linear-gradient(90deg, #ff5864, #fe3c72);
        border-radius: 10px;
        transition: width 0.3s ease;
      }

      .pulse {
        animation: pulse 2s infinite;
      }

      @keyframes pulse {
        0% {
          transform: scale(1);
        }
        50% {
          transform: scale(1.05);
        }
        100% {
          transform: scale(1);
        }
      }

      .chat-container {
        transform: translateX(100%);
        transition: transform 0.3s ease;
      }

      .chat-container.active {
        transform: translateX(0);
      }

      .message-bubble {
        max-width: 70%;
        padding: 10px 15px;
        border-radius: 20px;
        margin-bottom: 10px;
        position: relative;
      }

      .message-bubble.sent {
        background-color: #ff5864;
        color: white;
        align-self: flex-end;
        border-bottom-right-radius: 5px;
      }

      .message-bubble.received {
        background-color: #e5e5ea;
        color: black;
        align-self: flex-start;
        border-bottom-left-radius: 5px;
      }

      .match-modal {
        transform: scale(0.8);
        opacity: 0;
        transition: all 0.3s ease;
        pointer-events: none;
      }

      .match-modal.active {
        transform: scale(1);
        opacity: 1;
        pointer-events: all;
      }

      .heart-beat {
        animation: heartBeat 1.5s infinite;
      }

      @keyframes heartBeat {
        0% {
          transform: scale(1);
        }
        25% {
          transform: scale(1.1);
        }
        40% {
          transform: scale(1);
        }
        60% {
          transform: scale(1.2);
        }
        100% {
          transform: scale(1);
        }
      }

      .nav-item.active {
        color: #ff5864;
        border-bottom: 3px solid #ff5864;
      }

      .nav-item:hover {
        color: #ff5864;
      }

      .tab-content {
        display: none;
      }

      .tab-content.active {
        display: block;
      }