.overlay.svelte-1f1wwpg {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    top: var(--app-header-height);
    background: rgba(0, 0, 0, 0.35);
    z-index: 900;
  }

  .sidebar.svelte-1f1wwpg {
    position: fixed;
    top: var(--app-header-height);
    left: 0;
    height: calc(100% - var(--app-header-height));
    width: var(--sidebar-width);
    background-color: white;
    z-index: 950;
    overflow-y: auto;
    box-shadow: 2px 0 10px rgba(0, 0, 0, 0.12);
    border-right: 1px solid #e5e7eb;
    padding: 16px 10px;

    display: flex;
    flex-direction: column;
    /* justify-content: center; */

    transform: translateX(-100%);
    transition: transform 0.25s ease;
  }

  .sidebar.open.svelte-1f1wwpg {
    transform: translateX(0);
  }

  body {
    --sidebar-accent: #3f7cff;
    --sidebar-text: #111827;
    --sidebar-muted: #6b7280;
  }

  /* a.disabled {
    color: #999;
    pointer-events: none;
    cursor: default;
    text-decoration: none;
  } */

  .sidebar-nav.svelte-1f1wwpg ul:where(.svelte-1f1wwpg) {
    padding: 0;
    margin: 0;
    list-style: none;
  }

  .sidebar-nav.svelte-1f1wwpg .nav-item:where(.svelte-1f1wwpg) {
    margin: 8px 0;
  }

  .sidebar-nav.svelte-1f1wwpg .nav-link:where(.svelte-1f1wwpg) {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 10px;
    font-size: 15px;
    font-weight: 500;
    color: var(--sidebar-text);
    padding: 13px 15px;
    border-radius: 10px;
    text-decoration: none;
    transition: background-color 0.2s ease, color 0.2s ease;
  }

  .sidebar-nav.svelte-1f1wwpg .nav-link:where(.svelte-1f1wwpg) i:where(.svelte-1f1wwpg) {
    width: 18px;
    min-width: 18px;
    text-align: center;
    color: var(--sidebar-accent);
    opacity: 0.95;
  }

  .sidebar-nav.svelte-1f1wwpg .nav-link.active:where(.svelte-1f1wwpg) i:where(.svelte-1f1wwpg) {
    color: var(--sidebar-accent);
  }

  .sidebar-nav.svelte-1f1wwpg .nav-link:where(.svelte-1f1wwpg):hover i:where(.svelte-1f1wwpg) {
    color: var(--sidebar-text);
  }

  .sidebar-nav.svelte-1f1wwpg .nav-link:where(.svelte-1f1wwpg) span:where(.svelte-1f1wwpg) {
    flex: 0 0 auto;
  }

  .sidebar-nav.svelte-1f1wwpg .nav-link:where(.svelte-1f1wwpg):hover {
    background: rgba(63, 124, 255, 0.08);
  }

  .sidebar-nav.svelte-1f1wwpg .nav-link.active:where(.svelte-1f1wwpg) {
    background: rgba(63, 124, 255, 0.14);
    color: var(--sidebar-accent);
    font-weight: 700;
  }

  /* .sidebar-nav .nav-link.disabled {
    opacity: 0.55;
    background: transparent;
  } */

  .chevron.svelte-1f1wwpg {
    font-size: 12px;
    color: var(--sidebar-muted);
    transition: transform 0.2s ease-in-out;
    flex-shrink: 0;
  }

  .nav-link.svelte-1f1wwpg:not(.collapsed) .chevron:where(.svelte-1f1wwpg) {
    transform: rotate(180deg);
  }

  .nav-content.svelte-1f1wwpg {
    padding: 0;
    margin: 8px 0 0 0;
    list-style: none;
  }

  .nav-content.svelte-1f1wwpg a:where(.svelte-1f1wwpg) {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 13px;
    font-weight: 600;
    color: var(--sidebar-muted);
    padding: 10px 0 10px 12px;
    margin-left: 10px;
    border-left: 4px solid #dddddd;
    text-decoration: none;
    transition: color 0.2s ease, border-color 0.2s ease;
  }

  .nav-content.svelte-1f1wwpg a:where(.svelte-1f1wwpg):hover {
    color: var(--sidebar-text);
  }

  .nav-content.svelte-1f1wwpg a.active:where(.svelte-1f1wwpg) {
    border-color: var(--sidebar-accent);
    color: var(--sidebar-accent);
  }

  .nav-content.svelte-1f1wwpg i:where(.svelte-1f1wwpg) {
    width: 18px;
    min-width: 18px;
    text-align: center;
    color: inherit;
    opacity: 0.9;
  }

  @media (max-width: 768px) {
    .sidebar.svelte-1f1wwpg {
      width: 56vw;
      max-width: 320px;
    }
  }


  header.svelte-oiwvqb {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 72px;
    display: flex;
    align-items: center;
    background: white;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
    z-index: 1000;
  }

  .content.svelte-oiwvqb {
    padding-top: 50px;
  }

  .header-inner.svelte-oiwvqb {
    width: 100%;
    /* max-width: 1280px; */
    max-width: 100%;
    margin: 0 auto;
    padding: 0 2rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
  }

  .left-group.svelte-oiwvqb {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-shrink: 0;
  }

  .search-container.svelte-oiwvqb {
    display: flex;
    align-items: center;
    flex: 1;
    justify-content: center;
    min-width: 0;
  }

  .search-input.svelte-oiwvqb {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 1;
    max-width: 500px;
  }

  .search-input.svelte-oiwvqb input:where(.svelte-oiwvqb) {
    flex: 1;
    min-width: 0;
    padding: 10px 12px;
    font-size: 0.95rem;
    border: 1px solid #e5e7eb;
    border-right: none;
    border-radius: 999px 0 0 999px;
    outline: none;
    box-sizing: border-box;
  }

  .search-input.svelte-oiwvqb button:where(.svelte-oiwvqb) {
    padding: 10px 16px;
    font-size: 0.95rem;
    background-color: #3F7CFF;
    color: white;
    border: 1px solid #3F7CFF;
    border-radius: 0 999px 999px 0;
    cursor: pointer;
    font-weight: 600;
    box-sizing: border-box;
  }

  .search-input.svelte-oiwvqb button:where(.svelte-oiwvqb):hover {
    background-color: #2f6ae6;
  }

  .right-group.svelte-oiwvqb {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-shrink: 0;
  }

  .user-dropdown.svelte-oiwvqb {
    display: flex;
    align-items: center;
  }

  .user-button.svelte-oiwvqb {
    display: flex;
    align-items: center;
    gap: 10px;
    padding:6px 16px;
    background: transparent;
    color: #333;
    border: none;
    cursor: pointer;
    font-size: 0.9rem;
    font-weight: 500;
  }

  .user-avatar.svelte-oiwvqb {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    overflow: hidden;
  }

  .user-avatar.svelte-oiwvqb img:where(.svelte-oiwvqb) {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .user-name.svelte-oiwvqb {
    font-weight: 600;
    max-width: 120px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }


  .dropdown-menu.svelte-oiwvqb {
    background: white;
    border-radius: 6px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    overflow: hidden;
    min-width: 200px;
    margin-top: 8px;
    border: 1px solid #dee2e6;
  }

  .dropdown-item.svelte-oiwvqb {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 12px 20px;
    background: white;
    color: #333;
    border: none;
    cursor: pointer;
    font-size: 0.9rem;
    text-align: left;
  }

  .dropdown-item.svelte-oiwvqb:hover {
    background: #f8f9fa;
    color: #333;
  }


  .dropdown-item.logout.svelte-oiwvqb:hover {
    background: #f8f9fa;
    color: #333;
  }

  .dropdown-item.svelte-oiwvqb i:where(.svelte-oiwvqb) {
    width: 16px;
    text-align: center;
  }

  .login-button.svelte-oiwvqb {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 40px;
    padding: 0 18px;
    box-sizing: border-box;
    color: #333;
    text-decoration: none;
    border: 1px solid #dee2e6;
    border-radius: 8px;
    font-weight: 600;
    font-size: 0.9rem;
    min-width: 100px;
    margin-bottom: 6px;
  }


  .login-text.svelte-oiwvqb {
    color: #333;
  }

  .login-text-accent.svelte-oiwvqb {
    color: #333;
    font-weight: 700;
  }

  .hamburger.svelte-oiwvqb {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 40px;
    min-width: 40px;
    padding: 0;
    box-sizing: border-box;
    cursor: pointer;
    background: transparent;
    border: 1px solid #dee2e6;
    border-radius: 8px;
    margin-bottom: 6px;
  }

  .hamburger.svelte-oiwvqb:hover {
    background: rgba(0, 0, 0, 0.04);
  }

  .hamburger-text.svelte-oiwvqb {
    width: 20px;
    height: 20px;
    object-fit: contain;
  }

  .logo-img.svelte-oiwvqb {
    width: 170px;
    height: auto;
    display: block;
    /* margin-left: -50px; */
    margin-left: 0;
  }

  .logo-link.svelte-oiwvqb {
    display: inline-flex;
    align-items: center;
    text-decoration: none;
  }

  @media (max-width: 768px) {
    header.svelte-oiwvqb {
      height: 64px;
    }

    .content.svelte-oiwvqb {
      padding-top: 64px;
    }

    .header-inner.svelte-oiwvqb {
      padding: 0 1rem;
      gap: 12px;
    }

    .logo-img.svelte-oiwvqb {
      width: 100px;
      margin-left: 0;
    }

    .search-input.svelte-oiwvqb {
      max-width: 260px;
      width: 100%;
    }

    .search-input.svelte-oiwvqb input:where(.svelte-oiwvqb) {
      padding: 7px 10px;
      font-size: 0.8rem;
    }

    .search-input.svelte-oiwvqb button:where(.svelte-oiwvqb) {
      padding: 7px 10px;
      font-size: 0.75rem;
    }

    .user-button.svelte-oiwvqb {
      padding: 6px 12px;
      font-size: 0.8rem;
      gap: 8px;
    }

    .user-avatar.svelte-oiwvqb {
      width: 28px;
      height: 28px;
    }

    .user-name.svelte-oiwvqb {
      max-width: 80px;
    }

    .dropdown-menu.svelte-oiwvqb {
      min-width: 160px;
    }

    .dropdown-item.svelte-oiwvqb {
      padding: 10px 16px;
      font-size: 0.8rem;
    }

    .login-button.svelte-oiwvqb {
      height: 34px;
      padding: 0 14px;
      font-size: 0.8rem;
    }
  }

  @media (max-width: 480px) {
    .search-input.svelte-oiwvqb {
      max-width: 180px;
    }

    .search-input.svelte-oiwvqb input:where(.svelte-oiwvqb) {
      height: 24px;
      padding: 0 8px;
      font-size: 0.55rem;
    }

    .search-input.svelte-oiwvqb button:where(.svelte-oiwvqb) {
      height: 24px;
      padding: 0 8px;
      font-size: 0.55rem;
    }

    .user-name.svelte-oiwvqb {
      display: none;
    }

    .login-button.svelte-oiwvqb {
      min-width: 86px;
      height: 24px;
      padding: 1px 10px 0;
      font-size: 0.55rem;
      line-height: 1;
      margin-bottom: 3px;
    }

    .hamburger.svelte-oiwvqb {
      height: 24px;
      min-width: 24px;
      margin-bottom: 3px;
    }

    .hamburger-text.svelte-oiwvqb {
      width: 20px;
      height: 20px;
      object-fit: contain;
    }
  
    .hamburger-text.svelte-oiwvqb {
      font-size: 0.9rem;
    }
  }


  .profile-info.svelte-et6md {
    display: flex;
    align-items: center;
  }

  .profile-picture.svelte-et6md {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    margin-right: 10px;
  }

  .content.svelte-et6md {
    position: relative;
    min-height: 100vh;
  }

  .top-tags.svelte-et6md {
    padding: 20px;
    background: #f4f4f4;
    box-shadow: 0 4px 8px rgba(135, 135, 135, 0.1);
    margin-bottom: 20px;
  }

  /* (unused) .top-tags h2 {
    text-align: center;
    margin-bottom: 10px;
  }*/

  .tags-list.svelte-et6md {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
  }

  .tag-item.svelte-et6md {
    margin: 5px 10px;
    padding: 5px 5px;
    background: #ddd;
    border: 1px solid #e0e0e0;
    border-radius: 5px;
    font-size: 0.9rem;
    display: flex;
    align-items: center;
  }

  .tag-name.svelte-et6md {
    cursor: pointer;
    font-weight: normal;
  }

  .tag-count.svelte-et6md {
    font-size: 0.8rem;
    color: #666;
  }

  .title.svelte-et6md {
    position: relative;
    display: flex;
    justify-content: center;
    padding: 5px;
    box-shadow: 0 4px 8px rgba(135, 135, 135, 0.1);
  }

  .title-span.svelte-et6md {
    margin-top: 5px;
    border-radius: 25%;
    padding: 5px;
    font-size: 1.4rem;
    font-weight: bold;
    color: #000000;
  }

  .video-container.svelte-et6md {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    padding: 20px; /* 50 */
    max-width: 2000px;
    margin: 0 auto;
    position: relative;
  }

  .video-wrapper.svelte-et6md {
    width: 100%;
    margin: 10px;
    text-align: left;
  }

  .video-card.svelte-et6md {
    position: relative;
    height: 350px;
    overflow: hidden;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    cursor: pointer;
  }

  .video-card.svelte-et6md video:where(.svelte-et6md),
  .video-card.svelte-et6md img:where(.svelte-et6md) {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    background-color: #000;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
  }

  .bottom-content.svelte-et6md {
    padding: 10px;
    background: #f9f9f9;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    cursor: pointer;
  }

  .video-title.svelte-et6md {
    /* font-weight: bold; */
    color: #000000;
    margin-top: 6px;
  }

  .rotate-90.svelte-et6md {
    transform: rotate(90deg);
  }

  .user-info.svelte-et6md {
    font-size: 0.9rem;
    color: #000000;
  }

  .tags-info.svelte-et6md {
    font-size: 0.6rem;
    color: #515151;
  }

  .time-info.svelte-et6md {
    font-size: 0.6rem;
    color: #515151;
    margin-top: 6px;
  }

  .spinner.svelte-et6md {
    position: absolute;
    bottom: 10px;
    left: 48%;
    transform: translateX(-50%);
    width: 30px;
    height: 30px;
    border-radius: 50%;
    border: 5px solid rgba(0, 0, 0, 0.1);
    border-top-color: #3498db;
    animation: svelte-et6md-spin 1s ease-in-out infinite;
  }

  @keyframes svelte-et6md-spin {
    0% {
      transform: rotate(0deg);
    }
    100% {
      transform: rotate(360deg);
    }
  }

  /* @media only screen and (width: 820px) {
    .title {
      margin-top: 50px;
    }
  }

  @media only screen and (width: 1024px) {
    .title {
      margin-top: 60px;
    }
  }

  @media only screen and (width: 1978px) {
    .title {
      margin-top: 60px;
    }
  }

  @media only screen and (width: 540px) {
    .title {
      margin-top: 5px;
    }
  } */

  @media (max-width: 767px) {
    .title.svelte-et6md {
      padding: 10px 20px;
    }

    .title-span.svelte-et6md {
      font-size: 1.2rem;
    }

    .video-container.svelte-et6md {
      padding: 20px;
    }

    .video-wrapper.svelte-et6md {
      width: 100%;
      margin: 10px 0;
      text-align: left;
    }

    .video-card.svelte-et6md {
      height: 65vh;
    }

    .bottom-content.svelte-et6md {
      padding: 10px;
      background: #f9f9f9;
      box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
      cursor: pointer;
    }

    .spinner.svelte-et6md {
      position: absolute;
      bottom: 10px;
      left: 46%;
      transform: translateX(-50%);
      width: 20px;
      height: 20px;
      border-radius: 50%;
      border: 5px solid rgba(0, 0, 0, 0.1);
      border-top-color: #3498db;
      animation: svelte-et6md-spin 1s ease-in-out infinite;
    }

    .tag-item.svelte-et6md {
      margin: 2px 2px;
      padding: 2px 2px;
      background: #ddd;
      border: 1px solid #e0e0e0;
      font-size: 0.4rem;
    }

    .tag-name.svelte-et6md {
      font-weight: bold;
    }
  }

  @media screen and (min-width: 768px) {
    .video-container.svelte-et6md {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 20px;
      justify-content: center;
    }

    .video-wrapper.svelte-et6md {
      width: 100%;
      margin: 0;
    }

    .video-card.svelte-et6md {
      height: 350px;
    }

    .title.svelte-et6md {
      margin-top: 40px;
    }
  }

  @media screen and (min-width: 850px) {
    .title.svelte-et6md {
      margin-top: 5px;
    }
  }

  @media screen and (min-width: 850px) and (min-height: 1280px) {
    .title.svelte-et6md {
      margin-top: 55px;
    }
  }

  @media screen and (min-width: 1024px) and (max-width: 1024px) and (max-height: 600px) {
    .video-wrapper.svelte-et6md {
      width: 100%;
      margin: 0;
    }

    .video-card.svelte-et6md {
      height: 350px;
    }

    .title.svelte-et6md {
      margin-top: 5px;
    }
  }

  @media screen and (min-width: 1024px) and (min-height: 1300px) {
    .video-wrapper.svelte-et6md {
      width: 100%;
      margin: 0;
    }

    .video-card.svelte-et6md {
      height: 350px;
    }

    .title.svelte-et6md {
      margin-top: 60px;
    }
  }

  @media screen and (min-width: 1440px) {
    .video-wrapper.svelte-et6md {
      width: 100%;
      margin: 0;
    }

    .video-card.svelte-et6md {
      height: 450px;
    }

    .title.svelte-et6md {
      margin-top: 20px;
    }
  }


  .content.svelte-uw6fqd {
    text-align: center;
    padding: 50px;
  }

  /* (unused) .error-message {
    font-size: 2rem;
    color: #e74c3c;
    margin-bottom: 20px;
  }*/

  .image-container.svelte-uw6fqd {
    max-width: 500px;
    margin: 0 auto;
  }

  .image-container.svelte-uw6fqd img:where(.svelte-uw6fqd) {
    width: 60%;
    height: auto;
  }

  .back-home-link.svelte-uw6fqd {
    display: block;
    margin-top: 20px;
    font-size: 1.2rem;
    color: #3498db;
    text-decoration: none;
  }

  .back-home-link.svelte-uw6fqd:hover {
    text-decoration: underline;
  }


  .notification-wrap.svelte-1wg8nyl {
    position: fixed;
    top: 24px;
    right: 24px;
    width: min(360px, calc(100vw - 24px));
    z-index: 1200;
  }

  .notification.svelte-1wg8nyl {
    position: relative;
    padding: 14px 14px 14px 56px;
    border-radius: 3px;
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.28);
    color: #fff;
    background-repeat: no-repeat;
    background-position: 15px center;
    background-size: 24px 24px;
    transition: opacity 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease;
  }

  .notification.svelte-1wg8nyl:hover {
    box-shadow: 0 14px 28px rgba(0, 0, 0, 0.34);
  }

  .notification.svelte-1wg8nyl:hover .progress-line:where(.svelte-1wg8nyl) {
    animation-play-state: paused;
  }

  .notification.is-leaving.svelte-1wg8nyl {
    opacity: 0;
  }

  .content.svelte-1wg8nyl {
    min-width: 0;
  }

  .accent-bar.svelte-1wg8nyl {
    position: absolute;
    left: 0;
    bottom: 0;
    height: 4px;
    width: 100%;
    overflow: hidden;
    background: rgba(255, 255, 255, 0.18);
  }

  .progress-line.svelte-1wg8nyl {
    display: block;
    height: 100%;
    width: 100%;
    transform-origin: left center;
    animation-name: svelte-1wg8nyl-toast-countdown;
    animation-timing-function: linear;
    animation-fill-mode: forwards;
    background: rgba(0, 0, 0, 0.35);
  }

  .title.svelte-1wg8nyl {
    font-size: 16px;
    font-weight: 700;
    line-height: 1;
    margin-bottom: 6px;
  }

  .message.svelte-1wg8nyl {
    font-size: 14px;
    font-weight: 400;
    line-height: 1.25;
  }

  .notification-success.svelte-1wg8nyl {
    background-color: #4fa652;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E");
  }

  .notification-error.svelte-1wg8nyl {
    background-color: #d9534f;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M18 6L6 18M6 6l12 12'/%3E%3C/svg%3E");
  }

  .notification-warning.svelte-1wg8nyl {
    background-color: #f0ad4e;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.5' stroke-linecap='round'%3E%3Cpath d='M12 8v6M12 18h.01'/%3E%3C/svg%3E");
  }

  .notification-info.svelte-1wg8nyl {
    background-color: #5bc0de;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.5' stroke-linecap='round'%3E%3Cpath d='M12 10v7M12 6h.01'/%3E%3C/svg%3E");
  }

  .close-button.svelte-1wg8nyl {
    width: 24px;
    height: 24px;
    background: transparent;
    border: 0;
    color: #fff;
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
    position: absolute;
    top: 6px;
    right: 8px;
    opacity: 0.8;
  }

  .close-button.svelte-1wg8nyl:hover {
    opacity: 1;
  }

  @media (max-width: 768px) {
    .notification-wrap.svelte-1wg8nyl {
      top: 16px;
      right: 12px;
      left: 12px;
      width: auto;
    }

    .title.svelte-1wg8nyl {
      font-size: 15px;
      margin-bottom: 4px;
    }

    .message.svelte-1wg8nyl {
      font-size: 13px;
    }
  }

  @keyframes svelte-1wg8nyl-toast-countdown {
    from {
      transform: scaleX(1);
    }
    to {
      transform: scaleX(0);
    }
  }


  .alert-host.svelte-1s6roge {
    position: fixed;
    top: 24px;
    right: 24px;
    width: min(360px, calc(100vw - 24px));
    z-index: 1200;
    display: flex;
    flex-direction: column;
    gap: 10px;
  }

  .alert.svelte-1s6roge {
    position: relative;
    padding: 14px 14px 14px 56px;
    border: 0;
    border-radius: 3px;
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.28);
    transition: opacity 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
    color: #fff;
    background-repeat: no-repeat;
    background-position: 15px center;
    background-size: 24px 24px;
  }

  .alert.svelte-1s6roge:hover {
    box-shadow: 0 14px 28px rgba(0, 0, 0, 0.34);
  }

  .alert.svelte-1s6roge:hover .progress-line:where(.svelte-1s6roge) {
    animation-play-state: paused;
  }

  .alert.is-leaving.svelte-1s6roge {
    opacity: 0;
  }

  .content.svelte-1s6roge {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
  }

  .accent-bar.svelte-1s6roge {
    position: absolute;
    left: 0;
    bottom: 0;
    height: 4px;
    width: 100%;
    overflow: hidden;
    background: rgba(255, 255, 255, 0.18);
  }

  .progress-line.svelte-1s6roge {
    display: block;
    height: 100%;
    width: 100%;
    transform-origin: left center;
    animation-name: svelte-1s6roge-toast-countdown;
    animation-timing-function: linear;
    animation-fill-mode: forwards;
    background: rgba(0, 0, 0, 0.35);
  }

  .alert-info.svelte-1s6roge {
    background-color: #5bc0de;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.5' stroke-linecap='round'%3E%3Cpath d='M12 10v7M12 6h.01'/%3E%3C/svg%3E");
  }

  .alert-danger.svelte-1s6roge {
    background-color: #d9534f;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M18 6L6 18M6 6l12 12'/%3E%3C/svg%3E");
  }

  .alert-warning.svelte-1s6roge {
    background-color: #f0ad4e;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.5' stroke-linecap='round'%3E%3Cpath d='M12 8v6M12 18h.01'/%3E%3C/svg%3E");
  }

  .alert-success.svelte-1s6roge {
    background-color: #4fa652;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E");
  }

  .alert-heading.svelte-1s6roge {
    color: #fff;
    font-size: 16px;
    line-height: 1;
    margin-right: 0;
  }

  .text.svelte-1s6roge {
    color: #fff;
    background: transparent;
    border: 0 none;
    padding: 0;
    margin: 0;
    line-height: 1.25;
    font-size: 14px;
    flex: 1;
  }

  .close.svelte-1s6roge {
    width: 24px;
    height: 24px;
    background: transparent;
    border: 0;
    color: #fff;
    padding: 0;
    margin: 0;
    line-height: 1;
    font-size: 22px;
    cursor: pointer;
    position: absolute;
    top: 6px;
    right: 8px;
    opacity: 0.8;
  }

  .close.svelte-1s6roge:hover {
    opacity: 1;
  }

  @media (max-width: 768px) {
    .alert-host.svelte-1s6roge {
      top: 16px;
      right: 12px;
      left: 12px;
      width: auto;
    }

    .alert-heading.svelte-1s6roge {
      font-size: 15px;
    }

    .text.svelte-1s6roge {
      font-size: 13px;
    }
  }

  @keyframes svelte-1s6roge-toast-countdown {
    from {
      transform: scaleX(1);
    }
    to {
      transform: scaleX(0);
    }
  }


  main.svelte-1428x5h {
    margin: 0;
    padding: 0;
    height: 100vh;
  }

  .auth-layout.svelte-1428x5h {
    padding: 3rem 0;
    background-color: #f3f3f9;
    min-height: 100vh;
    position: relative;
  }

  .bg-image.svelte-1428x5h {
    position: absolute;
    top: 0;
    background-position: center;
    background-size: cover;
    height: 380px;
    width: 100%;
    clip-path: polygon(100% 0, 100% 75%, 53% 100%, 0 75%, 0 0);
    /* background: linear-gradient(to right, #3FBAFF, #3F7FFF); */
    opacity: 0.9;
  }

  .auth-content.svelte-1428x5h {
    max-width: 500px;
    width: 90%;
    margin: auto;
    position: relative;
    z-index: 2;
  }

  .auth-head.svelte-1428x5h {
    padding: 1rem 0;
    color: #ffffffab;
    text-align: center;
    /* (unused) p {
      font-size: 1.125rem;
      margin-top: 10px;
    }*/
  }

  .logo-container.svelte-1428x5h {
    text-align: center;
    /* margin-bottom: 1rem; */
  }

  .auth-logo.svelte-1428x5h {
    width: 350px;
    height: auto;
    /* background-color: #ffffff; */
    border-radius: 8px;
    padding: 10px;
  }

  .auth-box.svelte-1428x5h {
    background-color: #fff;
    padding: 1.5rem 1.5rem 2rem;
    min-height: 100px;
    border-radius: 8px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  }

  .box-heading.svelte-1428x5h {
    text-align: center;
    margin-bottom: 2rem;
    h5:where(.svelte-1428x5h) {
      /* color: #3F7EFF; */
      color: #000000;
      margin-bottom: 0.5rem;
      font-size: 1.5rem;
      font-weight: 600;
    }
    p:where(.svelte-1428x5h) {
      color: #6c757d;
      margin-bottom: 0;
    }
  }

  .field-wrapper.svelte-1428x5h {
    display: flex;
    flex-direction: column;
    gap: 1rem;
  }

  .input-group.svelte-1428x5h {
    position: relative;
  }

  .input-group.svelte-1428x5h i:where(.svelte-1428x5h) {
    /* color: #3F7FFF; */
    color: #8E8E8E;
    font-size: 20px;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: 10px;
    z-index: 1;
  }

  .input-group.svelte-1428x5h input[type="email"]:where(.svelte-1428x5h) /* (unused) .input-group input[type="text"]*/,
  .input-group.svelte-1428x5h input[type="password"]:where(.svelte-1428x5h) {
    width: 100%;
    padding: 12px 40px;
    border-radius: 5px;
    border: 1px solid #3F7FFF;
    box-sizing: border-box;
    font-size: 1rem;
    transition: border-color 0.3s ease;
  }

  .input-group.svelte-1428x5h input:where(.svelte-1428x5h):focus {
    outline: none;
    border-color: #3F7FFF;
    box-shadow: 0 0 0 2px rgba(63, 127, 255, 0.2);
  }

  /* (unused) .code-group {
    display: flex;
    align-items: center;
    gap: 0.5rem;
  }*/

  /* (unused) .code-group .code-input {
    flex: 1;
  }*/

  /* (unused) .eye-icon {
    cursor: pointer;
    font-size: 1.5rem;
    /* color: #3F7FFF; *\/
    color: #8E8E8E;
    padding: 10px;
  }*/

  .submit-btn.svelte-1428x5h {
    width: 100%;
    padding: 12px;
    margin-top: 1rem;
    background: linear-gradient(to right, #3FBAFF, #3F7FFF);
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    transition: all 0.3s ease;
    font-size: 1rem;
    font-weight: 500;
  }

  .submit-btn.svelte-1428x5h:hover {
    /* background: linear-gradient(to right, #3F7FFF, #3FBAFF); */
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(63, 127, 255, 0.3);
  }

  .submit-btn.svelte-1428x5h:disabled {
    background: linear-gradient(to right, #3FBAFF, #3F7FFF);
    opacity: 0.7;
    cursor: not-allowed;
    transform: none;
  }

  .auth-links.svelte-1428x5h {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 1.5rem;
    padding-top: 1rem;
    border-top: 1px solid #e9ecef;
  }

  .reset-password-link.svelte-1428x5h,
  .back-home-link.svelte-1428x5h {
    color: #3F7EFF;
    text-decoration: none;
    font-weight: 500;
    transition: color 0.3s ease;
  }

  .reset-password-link.svelte-1428x5h:hover,
  .back-home-link.svelte-1428x5h:hover {
    color: #3FBAFF;
    text-decoration: none;
  }

  .message.svelte-1428x5h {
    max-width: 300px;
    border: 1px solid #ccc;
    border-radius: 5px;
    background-color: #f9f9f9;
    text-align: center;
    margin: 0 auto;
    padding: 1rem;
  }

  @media (max-width: 768px) {
    .auth-layout.svelte-1428x5h {
      padding: 1rem 0 2rem;
    }

    .auth-head.svelte-1428x5h {
      padding: 1.5rem 0;
    }

    .auth-content.svelte-1428x5h {
      width: 95%;
    }

    .auth-box.svelte-1428x5h {
      padding: 1rem;
    }

    .auth-logo.svelte-1428x5h {
      width: 200px;
    }

    .input-group.svelte-1428x5h i:where(.svelte-1428x5h) {
      font-size: 16px;
      left: 8px;
    }

    .input-group.svelte-1428x5h input[type="email"]:where(.svelte-1428x5h) /* (unused) .input-group input[type="text"]*/,
    .input-group.svelte-1428x5h input[type="password"]:where(.svelte-1428x5h) {
      padding: 10px 30px;
      font-size: 0.9rem;
    }

    /* (unused) .eye-icon {
      font-size: 1.2rem;
      padding: 8px;
    }*/

    .auth-links.svelte-1428x5h {
      flex-direction: column;
      gap: 1rem;
      text-align: center;
    }

    .box-heading.svelte-1428x5h h5:where(.svelte-1428x5h) {
      font-size: 1.3rem;
    }
  }


  .loader.svelte-1hnfnal {
    border: 8px solid #f3f3f3;
    border-top: 8px solid #3498db;
    border-radius: 50%;
    width: 50px;
    height: 50px;
    animation: svelte-1hnfnal-spin 1s linear infinite;
    margin: auto;
  }

  @keyframes svelte-1hnfnal-spin {
    0% {
      transform: rotate(0deg);
    }
    100% {
      transform: rotate(360deg);
    }
  }

  .loading-message.svelte-1hnfnal {
    text-align: center;
    font-size: 1.2rem;
    margin-top: 20px;
    max-width: 100%;
    padding: 20px;
    border: 1px solid #ccc;
    border-radius: 5px;
    background-color: #f9f9f9;
    text-align: center;
  }


  .verification-page.svelte-rebnnl {
    min-height: 100vh;
    padding: calc(var(--app-header-height) + 40px) 24px 60px;
    background: linear-gradient(180deg, #f8f9fc 0%, #f0f2f8 100%);
    display: flex;
    align-items: flex-start;
    justify-content: center;
  }

  .verification-card.svelte-rebnnl {
    width: 100%;
    max-width: 980px;
    margin: 0 auto;
    background: #ffffff;
    border-radius: 24px;
    padding: 48px 40px;
    box-shadow: 0 12px 40px rgba(15, 23, 42, 0.08);
    border: 1px solid #e6eaf2;
  }

  .title-wrap.svelte-rebnnl {
    text-align: center;
    margin-bottom: 40px;
  }

  .title.svelte-rebnnl {
    margin: 0 0 8px 0;
    color: #1a1b1e;
    font-size: 1.85rem;
    font-weight: 700;
    letter-spacing: -0.5px;
  }

  .subtitle.svelte-rebnnl {
    margin: 0;
    color: #64748b;
    font-size: 1.05rem;
    line-height: 1.5;
  }

  .status.svelte-rebnnl {
    min-height: 320px;
    border-radius: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 16px;
    text-align: center;
  }

  .loading-state.svelte-rebnnl {
    background: #f8f9fc;
    border: 1px solid #e6eaf2;
  }

  .error-state.svelte-rebnnl {
    background: #fff5f5;
    border: 1px solid #ffd5d5;
    color: #b42318;
    font-weight: 600;
  }

  .spinner.svelte-rebnnl {
    width: 28px;
    height: 28px;
    border: 3px solid #dbe7ff;
    border-top-color: #3f7cff;
    border-radius: 50%;
    animation: svelte-rebnnl-spin 0.85s linear infinite;
  }

  .spinner.svelte-rebnnl {
    width: 42px;
    height: 42px;
    border: 4px solid #dbe7ff;
    border-top-color: #3f7cff;
    border-radius: 50%;
    animation: svelte-rebnnl-spin 0.9s linear infinite;
  }

  .results.svelte-rebnnl {
    margin-top: 8px;
  }

  .qr-grid.svelte-rebnnl {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 24px;
  }

  .qr-item.svelte-rebnnl {
    background: #ffffff;
    border: 1px solid #e6eaf2;
    border-radius: 20px;
    padding: 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    box-shadow: 0 6px 20px rgba(15, 23, 42, 0.05);
    transition: transform 0.2s ease;
  }

  .qr-item.svelte-rebnnl:hover {
    transform: translateY(-4px);
  }

  .qr-image.svelte-rebnnl {
    width: 100%;
    max-width: 220px;
    aspect-ratio: 1 / 1;
    object-fit: contain;
    border-radius: 16px;
    border: 1px solid #edf1f7;
    padding: 12px;
    background: #fff;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.04);
  }

  .qr-label.svelte-rebnnl {
    font-size: 0.95rem;
    font-weight: 600;
    color: #475569;
  }

  @keyframes svelte-rebnnl-spin {
    to { transform: rotate(360deg); }
  }

  @media (max-width: 768px) {
    .verification-page.svelte-rebnnl {
      padding: calc(var(--app-header-height) + 24px) 16px 40px;
    }
    .verification-card.svelte-rebnnl {
      padding: 32px 24px;
    }
    .qr-grid.svelte-rebnnl {
      grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
      gap: 16px;
    }
  }

  @media (max-width: 480px) {
    .qr-image.svelte-rebnnl {
      max-width: 180px;
    }
  }


  .confirmation-modal.svelte-p97tlj {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .modal-content.svelte-p97tlj {
    background: white;
    padding: 20px;
    border-radius: 8px;
    max-width: 80%;
    width: 500px;
    text-align: center;
  }

  .buttons.svelte-p97tlj {
    display: flex;
    justify-content: space-around;
    margin-top: 20px;
  }

  button.svelte-p97tlj {
    padding: 10px 20px;
    cursor: pointer;
    border: none;
    border-radius: 5px;
  }

  .yes.svelte-p97tlj {
    text-align: center;
    background-color: #dddddd;
    transition: background-color 0.3s ease;
    color: black;
  }

  .yes.svelte-p97tlj:hover {
    background-color: #ff3c82;
  }

  .no.svelte-p97tlj {
    text-align: center;
    background-color: #1e92ff;
    transition: background-color 0.3s ease;
    color: black;
  }

  .no.svelte-p97tlj:hover {
    background-color: #004b91;
  }


  .content-wrapper.svelte-jeg0es {
    display: flex;
    gap: 20px;
    margin-top: 0px;
    width: 100%;
    min-width: 0;
  }

  .left-column.svelte-jeg0es {
    flex: 1;
    min-width: 0;
  }

  .right-column.svelte-jeg0es {
    width: clamp(280px, 35vw, 500px);
    max-width: 500px;
    flex-shrink: 1;
  }

  @media (max-width: 1024px) {
    .content-wrapper.svelte-jeg0es {
      flex-direction: column;
    }
    
    .right-column.svelte-jeg0es {
      width: 100%;
    }
  }
  .map-container.svelte-jeg0es {
    width: 100%;
    margin-top: 20px;
    border: 1px solid #ccc;
    border-radius: 8px;
    overflow: hidden;
  }

  .profile-header.svelte-jeg0es {
    display: flex;
    align-items: center;
    margin-bottom: 20px;
  }

  .reply-header.svelte-jeg0es {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 5px;
  }

  .profile-info.svelte-jeg0es {
    margin-top: 5px;
    display: flex;
    align-items: center;
  }

  .profile-picture.svelte-jeg0es {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    object-fit: cover;
    margin-right: 15px;
    border: 2px solid #ccc;
  }

  .cr-profile-picture.svelte-jeg0es {
    width: 25px;
    height: 25px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid #ccc;
    margin-right: 10px;
  }

  /* (unused) .user-details {
    display: flex;
    flex-direction: column;
  }*/

  .verified.svelte-jeg0es {
    color: green;
    margin-left: 10px;
    cursor: pointer;
  }

  .not-verified.svelte-jeg0es {
    color: red;
    margin-left: 10px;
    cursor: pointer;
  }

  .subscribe-button.svelte-jeg0es {
    background-color: #3F7EFF;
    color: white;
    border: none;
    padding: 8px 16px;
    border-radius: 5px;
    font-size: 14px;
    cursor: pointer;
    margin-top: 5px;
  }

  .subscribe-button.svelte-jeg0es:hover {
    background-color: 0 4px 8px rgba(63, 127, 255, 0.3);
  }

  .subscribe-button.subscribed.svelte-jeg0es {
    background-color: rgba(31, 31, 31, 0.7);
  }

  .subscribe-button.subscribed.svelte-jeg0es:hover {
    background-color: rgba(15, 15, 15, 0.7);
  }

  .verified.svelte-jeg0es {
    color: green;
  }

  .not-verified.svelte-jeg0es {
    color: red;
  }

  .main-image.svelte-jeg0es {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
  }

  .container.svelte-jeg0es {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px;
    box-sizing: border-box;
  }

  .video-page.svelte-jeg0es {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    margin-top: 40px;
  }

  .video-container.svelte-jeg0es {
    background-color: #000000;
    position: relative;
    width: 100%;
    max-width: 700px;
    padding-bottom: 56.25%;
    overflow: hidden;
  }

  .main-video.svelte-jeg0es {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
  }

  /* (unused) .rotate-90 {
    transform: rotate(90deg);
    transform-origin: center;
  }*/

  .video-info.svelte-jeg0es {
    width: 100%;
    max-width: 700px;
    text-align: left;
  }

  /* (unused) .video-info p {
    font-size: 16px;
  }*/

  /* (unused) .video-info .tags-container {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    margin-top: 10px;
  }*/

  .video-info.svelte-jeg0es .tag:where(.svelte-jeg0es) {
    background-color: #eee;
    border-radius: 5px;
    padding: 5px 10px;
    font-size: 12px;
    color: #333;
    display: inline-block;
    max-width: 100%;
    text-overflow: ellipsis;
    overflow: hidden;
  }

  /* (unused) .edit-delete-container {
    display: inline-flex;
    gap: 10px;
  }*/

  /* (unused) .edit-comment,
  .delete-comment,
  .reply-close {
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
  }*/

  /* (unused) .edit-comment:focus,
  .delete-comment:focus .reply-close:focus {
    outline: none;
  }*/

  /* (unused) .edit-reply,
  .delete-reply {
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
  }*/

  /* (unused) .edit-reply:focus,
  .delete-reply:focus {
    outline: none;
  }*/

  .video-info.svelte-jeg0es h2:where(.svelte-jeg0es) {
    font-size: 20px;
    margin: 8px 0;
  }

  /* (unused) .toggle-description {
    color: blue;
    cursor: pointer;
  }*/

  .video-list.svelte-jeg0es {
    margin-top: 0px;
    width: 100%;
    margin-left: 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
  }

  .video-list.svelte-jeg0es h2:where(.svelte-jeg0es) {
    font-size: 20px;
    margin-bottom: 15px;
    grid-column: 1 / -1;
  }

  /* Horizontal scroller on mobile */
  .video-list.svelte-jeg0es .related-posts-scroller:where(.svelte-jeg0es) {
    grid-column: 1 / -1;
  }

  .related-posts-scroller.svelte-jeg0es {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
  }

  .video-card-others.svelte-jeg0es {
    display: flex;
    flex-direction: column;
    margin-bottom: 15px;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    cursor: pointer;
    background: white;
    border: 1px solid #e0e0e0;
  }

  .video-card-others.svelte-jeg0es:hover {
    /* transform: translateY(-2px); */
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
  }

  .video-card-others-video.svelte-jeg0es,
  .video-card-others-img.svelte-jeg0es {
    width: 100%;
    height: 180px;
    object-fit: cover;
    border-bottom: 1px solid #e0e0e0;
    border-radius: 0;
    border: none;
  }

  .video-details.svelte-jeg0es {
    padding: 15px;
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
  }

  .video-details.svelte-jeg0es .profile-info:where(.svelte-jeg0es) {
    display: flex;
    align-items: center;
    margin-bottom: 10px;
    padding: 0;
  }

  .rp-profile-picture.svelte-jeg0es {
    width: 32px !important;
    height: 32px !important;
    border-radius: 50%;
    object-fit: cover;
    margin-right: 8px;
    flex-shrink: 0;
  }

  .video-details.svelte-jeg0es h3:where(.svelte-jeg0es) {
    margin: 0;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.3;
    color: #333;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    min-height: 36px;
    max-height: 36px;
  }

  .video-details.svelte-jeg0es .profile-info:where(.svelte-jeg0es) span:where(.svelte-jeg0es) {
    font-size: 12px;
    font-weight: 500;
    color: #555;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex: 1;
  }

  /* (unused) .video-details p {
    font-size: 14px;
    margin: 5px 0 0;
  }*/

  .edit-button.svelte-jeg0es {
    margin-top: 10px;
    background-color: #3F7EFF;
    border: none;
    color: rgb(0, 0, 0);
    padding: 10px 20px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
    margin-right: 10px;
    cursor: pointer;
    border-radius: 5px;
    transition: background-color 0.3s ease;
  }
  .edit-button.svelte-jeg0es:hover {
    background-color: 0 4px 8px rgba(63, 127, 255, 0.3);
  }

  .like-button.svelte-jeg0es {
    margin-top: 0;
    background-color: #3F7EFF;
    border: none;
    color: rgb(0, 0, 0);
    padding: 10px 20px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
    margin-right: 10px;
    cursor: pointer;
    border-radius: 5px;
    transition: background-color 0.3s ease;
  }

  .like-button.svelte-jeg0es:hover {
    background-color: 0 4px 8px rgba(63, 127, 255, 0.3);
  }

  /* (unused) .like-count {
    font-size: 16px;
    color: #555;
  }*/

  .comments-container.svelte-jeg0es {
    margin-top: 20px;
  }

  .comment-card.svelte-jeg0es {
    margin-bottom: 10px;
    border-bottom: 1px solid #ccc;
    padding-bottom: 10px;
    width: 100%;
    max-width: 700px;
  }

  .comment-card.svelte-jeg0es p:where(.svelte-jeg0es) {
    margin: 5px 0;
  }
  .txt-area.svelte-jeg0es {
    width: 100%;
    max-width: 700px;
  }

  .input-cmnt.svelte-jeg0es {
    width: 100%;
  }

  .comment-actions.svelte-jeg0es,
  .reply-actions.svelte-jeg0es {
    position: relative;
    display: inline-block;
  }

  .actions-menu.svelte-jeg0es {
    background: none;
    border: none;
    cursor: pointer;
    padding: 5px;
    border-radius: 3px;
    color: #666;
    font-size: 14px;
  }

  .actions-menu.svelte-jeg0es:hover {
    background-color: #f0f0f0;
  }

  .actions-dropdown.svelte-jeg0es {
    position: absolute;
    right: 0;
    top: 100%;
    background: white;
    border: 1px solid #ddd;
    border-radius: 4px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    z-index: 1000;
    min-width: 120px;
  }

  .action-btn.svelte-jeg0es {
    display: block;
    width: 100%;
    padding: 8px 12px;
    background: none;
    border: none;
    text-align: left;
    cursor: pointer;
    font-size: 14px;
    color: #333;
    text-decoration: none;
  }

  .action-btn.svelte-jeg0es:hover {
    background-color: #f5f5f5;
  }

  .action-btn.svelte-jeg0es i:where(.svelte-jeg0es) {
    margin-right: 8px;
    width: 12px;
  }

  .replies-toggle.svelte-jeg0es {
    margin-top: 10px;
  }

  .replies-direct.svelte-jeg0es {
    margin-top: 10px;
    padding-left: 20px;
    border-left: 2px solid #eee;
  }

  .reply-direct.svelte-jeg0es {
    margin-bottom: 8px;
    padding: 8px 0;
  }

  .comment-header.svelte-jeg0es {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 8px;
  }

  .user-info.svelte-jeg0es {
    display: flex;
    align-items: center;
    flex: 1;
  }

  .user-info.svelte-jeg0es .cr-profile-picture:where(.svelte-jeg0es) {
    margin-right: 10px;
  }

  .user-info.svelte-jeg0es b:where(.svelte-jeg0es) {
    margin-right: 8px;
  }

  .comment-timestamp.svelte-jeg0es,
  .reply-timestamp.svelte-jeg0es {
    font-size: 12px;
    color: #666;
    margin-left: 8px;
  }

  .reply-text.svelte-jeg0es {
    margin: 0;
    font-size: 14px;
    line-height: 1.4;
    margin-left: 35px;
  }

  /* (unused) .reply-card {
    margin-left: 20px;
    padding-left: 10px;
    border-left: 2px solid #ccc;
    margin-top: 5px;
  }*/

  .comment-button.svelte-jeg0es,
  .reply-button.svelte-jeg0es {
    margin-top: 10px;
    background-color: #3F7EFF;
    border: none;
    color: white;
    padding: 10px 20px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
    cursor: pointer;
    border-radius: 5px;
  }

  /* (unused) .show-reply-form {
    margin-top: 10px;
    background-color: #717171;
    border: none;
    color: white;
    padding: 5px 10px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
    cursor: pointer;
    border-radius: 5px;
  }*/

  .reply-below-comment.svelte-jeg0es {
    margin-top: 2px;
    margin-bottom: 0;
  }

  .reply-button-below.svelte-jeg0es {
    background: none;
    border: none;
    color: #666;
    padding: 0px 12px;
    font-size: 14px;
    cursor: pointer;
    border-radius: 4px;
    transition: background-color 0.2s ease;
  }

  .reply-button-below.svelte-jeg0es:hover {
    background-color: #f0f0f0;
    color: #333;
  }

  .reply-button-below.svelte-jeg0es i:where(.svelte-jeg0es) {
    margin-right: 6px;
  }

  /* (unused) .reply-form-row {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 10px;
  }*/

  /* (unused) .reply-form-row .txt-area {
    flex: 1;
    min-height: 40px;
    padding: 8px 12px;
    border: 1px solid #ddd;
    border-radius: 4px;
    resize: vertical;
  }*/

  /* (unused) .reply-form-row .reply-button {
    margin-top: 0;
    white-space: nowrap;
  }*/

  .reply-form.svelte-jeg0es {
    display: flex;
    align-items: center;
  }

  .reply-actions.svelte-jeg0es {
    display: flex;
  }

  /* (unused) .hide-reply-form-button,*/
  .reply-button.svelte-jeg0es {
    margin-left: 10px;
  }

  .comment-button.svelte-jeg0es:hover,
  .reply-button.svelte-jeg0es:hover:hover {
    background-color: 0 4px 8px rgba(63, 127, 255, 0.3);
  }

  /* (unused) .show-reply-form:hover {
    background-color: #ff0000;
  }*/

  .reply-form.svelte-jeg0es {
    margin-top: 10px;
  }

  .hide-replies-button.svelte-jeg0es,
  .view-replies-button.svelte-jeg0es {
    margin-top: 10px;
    background: none;
    border: none;
    color: #666;
    padding: 0px 12px;
    text-align: left;
    text-decoration: none;
    display: inline-block;
    font-size: 14px;
    cursor: pointer;
    border-radius: 4px;
    transition: background-color 0.2s ease;
  }

  .hide-replies-button.svelte-jeg0es:hover,
  .view-replies-button.svelte-jeg0es:hover {
    background-color: #f0f0f0;
    color: #333;
  }

  .hide-replies-button.svelte-jeg0es i:where(.svelte-jeg0es),
  .view-replies-button.svelte-jeg0es i:where(.svelte-jeg0es) {
    margin-right: 6px;
  }

  .modal.svelte-jeg0es {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 999;
  }

  .modal-content.svelte-jeg0es {
    background-color: #fff;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
    position: relative;
    width: 90%;
    max-width: 500px;
  }

  .close.svelte-jeg0es {
    position: absolute;
    top: 10px;
    right: 10px;
    font-size: 24px;
    cursor: pointer;
  }

  .copy-link.svelte-jeg0es {
    display: flex;
    align-items: center;
    margin-top: 15px;
  }

  .copy-link.svelte-jeg0es input:where(.svelte-jeg0es) {
    flex-grow: 1;
    margin-right: 10px;
    padding: 10px;
  }

  .copy-link.svelte-jeg0es button:where(.svelte-jeg0es) {
    padding: 10px 20px;
    background-color: #3F7EFF;
    border: none;
    color: white;
    cursor: pointer;
    border-radius: 5px;
  }

  .copy-link.svelte-jeg0es button:where(.svelte-jeg0es):hover {
    background-color: 0 4px 8px rgba(63, 127, 255, 0.3);
  }

  .social-icons.svelte-jeg0es {
    margin-bottom: 10px;
  }

  /* (unused) .social-icons i {
    font-size: 24px;
    margin-right: 10px;
    cursor: pointer;
  }*/

  /* .copy-link {
    display: flex;
    align-items: center;
  }

  .copy-link input {
    flex-grow: 1;
    margin-right: 10px;
  }

  .copy-link button {
    padding: 10px 20px;
    background-color: #3F7EFF;
    border: none;
    color: white;
    cursor: pointer;
    border-radius: 5px;
  }

  .copy-link button:hover {
    background-color: 0 4px 8px rgba(63, 127, 255, 0.3);
  } */

  .close.svelte-jeg0es:hover,
  .close.svelte-jeg0es:focus {
    color: #000;
    text-decoration: none;
    cursor: pointer;
  }

  .spinner.svelte-jeg0es {
    text-align: center;
  }

  .subscriber-count.svelte-jeg0es {
    font-size: 0.9rem;
    color: gray;
  }

  .modal-s.svelte-jeg0es {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .modal-content-s.svelte-jeg0es {
    background: white;
    padding: 20px;
    width: 35%;
    border-radius: 5px;
    font-weight: bold;
  }

  .modal-actions-s.svelte-jeg0es {
    display: flex;
    /* justify-content: flex-end; */
    justify-content: space-between;
    align-items: center;
    margin-top: 20px;
  }

  .confirm-button-s.svelte-jeg0es {
    background-color: red;
    color: white;
    padding: 5px 10px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    /* margin-left: 18px; */
  }

  .cancel-button-s.svelte-jeg0es {
    background-color: gray;
    color: white;
    padding: 5px 10px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
  }

  .close-s.svelte-jeg0es {
    position: absolute;
    top: 10px;
    right: 10px;
    cursor: pointer;
  }

  @media only screen and (max-width: 450px) {
    .subscriber-count.svelte-jeg0es {
      font-size: 0.7rem;
    }

    .modal-content-s.svelte-jeg0es {
      width: 85%;
      max-width: 350px;
    }

    .container.svelte-jeg0es {
      padding: 10px;
    }

    .video-page.svelte-jeg0es {
      flex-direction: column;
    }

    .video-container.svelte-jeg0es {
      width: 100%;
      padding-bottom: 56.25%;
    }

    .video-info.svelte-jeg0es {
      width: 100%;
    }

    /* (unused) .video-info p {
      font-size: 14px;
    }*/

    /* (unused) .video-info .tags-container {
      display: flex;
      flex-wrap: wrap;
      gap: 5px;
      margin-top: 10px;
    }*/

    .video-info.svelte-jeg0es .tag:where(.svelte-jeg0es) {
      background-color: #eee;
      border-radius: 5px;
      padding: 5px 10px;
      font-size: 12px;
      color: #333;
      display: inline-block;
      max-width: 100%;
      text-overflow: ellipsis;
      overflow: hidden;
    }

    .video-info.svelte-jeg0es h2:where(.svelte-jeg0es) {
      font-size: 16px;
    }

    .video-list.svelte-jeg0es {
      margin-top: 0;
      width: 100%;
      margin-left: 0;
      /* Vertical list on mobile
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 15px;
      */
      /* Horizontal scroller on mobile */
      display: block;
      --related-card-width: min(200px, calc((100vw - 20px - var(--related-gap)) / 2));
      --related-gap: 12px;
    }

    .video-list.svelte-jeg0es h2:where(.svelte-jeg0es) {
      /* Vertical list on mobile
      grid-column: 1 / -1;
      margin-bottom: 15px;
      */
      /* Title above the scroller on mobile */
      display: block;
      margin: 0 0 12px 0;

      font-size: 20px;
      font-weight: 600;
      color: #333;
    }

    .related-posts-scroller.svelte-jeg0es {
      display: flex;
      gap: var(--related-gap);
      overflow-x: auto;
      overflow-y: hidden;
      width: calc(var(--related-card-width) * 2 + var(--related-gap));
      margin: 0 auto;
      scroll-snap-type: x mandatory;
      -webkit-overflow-scrolling: touch;
    }

    .video-card-others.svelte-jeg0es {
      flex: 0 0 var(--related-card-width);
      scroll-snap-align: start;
      box-sizing: border-box;
    }

    .video-card-others.svelte-jeg0es h3:where(.svelte-jeg0es) {
      display: none;
    }

    .video-card-others.svelte-jeg0es {
      display: flex;
      flex-direction: column;
      margin-bottom: 15px;
      border-radius: 12px;
      overflow: hidden;
      box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
      transition: transform 0.2s ease, box-shadow 0.2s ease;
      cursor: pointer;
      background: white;
      border: 1px solid #e0e0e0;
    }

    .video-card-others.svelte-jeg0es:hover {
      transform: translateY(-2px);
      box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
    }

    .video-card-others-video.svelte-jeg0es,
    .video-card-others-img.svelte-jeg0es {
      width: 100%;
      height: 180px;
      object-fit: cover;
      border-bottom: 1px solid #e0e0e0;
    }

    .video-details.svelte-jeg0es {
      padding: 15px;
      flex: 1;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
    }

    .video-details.svelte-jeg0es .profile-info:where(.svelte-jeg0es) {
      display: flex;
      align-items: center;
      margin-bottom: 10px;
      padding: 0;
    }

    .rp-profile-picture.svelte-jeg0es {
      width: 32px !important;
      height: 32px !important;
      border-radius: 50%;
      object-fit: cover;
      margin-right: 8px;
      flex-shrink: 0;
    }

    .video-details.svelte-jeg0es h3:where(.svelte-jeg0es) {
      margin: 0;
      font-size: 14px;
      font-weight: 600;
      line-height: 1.3;
      color: #333;
      overflow: hidden;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
      min-height: 36px;
      max-height: 36px;
    }

    .video-details.svelte-jeg0es .profile-info:where(.svelte-jeg0es) span:where(.svelte-jeg0es) {
      font-size: 12px;
      font-weight: 500;
      color: #555;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      flex: 1;
    }

    .comment-card.svelte-jeg0es {
      width: 100%;
    }

    .txt-area.svelte-jeg0es {
      width: 100%;
    }

    .modal-content.svelte-jeg0es {
      width: 80%;
      padding: 15px;
    }

    .close.svelte-jeg0es {
      font-size: 20px;
    }

    .copy-link.svelte-jeg0es button:where(.svelte-jeg0es) {
      font-size: 14px;
      padding: 8px 15px;
    }

    .copy-link.svelte-jeg0es input:where(.svelte-jeg0es) {
      font-size: 14px;
    }

    .profile-picture.svelte-jeg0es {
      width: 30px;
      height: 30px;
      margin-right: 7px;
    }

    .subscribe-button.svelte-jeg0es {
      padding: 4px 8px;
      font-size: 10px;
    }
  }

  .post-details-container.svelte-jeg0es {
    margin-top: 12px;
    padding: 16px;
    background-color: #f9f9f9;
    border-radius: 8px;
  }

  .views-time-row.svelte-jeg0es {
    display: flex;
    gap: 8px;
    font-size: 14px;
    color: #606060;
    margin-bottom: 12px;
  }

  .description-section.svelte-jeg0es {
    margin-bottom: 12px;
  }

  .description-content.svelte-jeg0es {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 4px;
  }

  .description-text.svelte-jeg0es {
    font-size: 14px;
    line-height: 1.4;
    color: #0f0f0f;
  }

  .tags-section.svelte-jeg0es {
    margin-top: 8px;
  }

  .tags-content.svelte-jeg0es {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
  }

  .toggle-btn.svelte-jeg0es {
    color: #909090;
    cursor: pointer;
    font-size: 14px;
    font-weight: 500;
    white-space: nowrap;
  }

  .toggle-btn.svelte-jeg0es:hover {
    text-decoration: underline;
  }

  .tag.svelte-jeg0es {
    background-color: #e1e1e1;
    color: #0f0f0f;
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 12px;
    font-weight: 500;
  }


  .content.svelte-1ukpeu1 {
    min-height: 100vh;
    background: linear-gradient(180deg, #f8f9fc 0%, #f0f2f8 100%);
    padding-bottom: 60px;
  }

  .title.svelte-1ukpeu1 {
    position: relative;
    display: flex;
    justify-content: center;
    padding: 20px 0;
    margin-bottom: 20px;
  }

  .title-span.svelte-1ukpeu1 {
    font-size: 1.85rem;
    font-weight: 700;
    color: #1a1b1e;
    letter-spacing: -0.5px;
  }

  .profile-card.svelte-1ukpeu1 {
    max-width: 560px;
    margin: 0 auto;
    background: #ffffff;
    border-radius: 24px;
    padding: 48px 40px;
    box-shadow: 0 12px 40px rgba(15, 23, 42, 0.08);
    border: 1px solid #e6eaf2;
  }

  .profile-info.svelte-1ukpeu1 {
    text-align: center;
  }

  .profile-picture.svelte-1ukpeu1 {
    width: 128px;
    height: 128px;
    border-radius: 50%;
    object-fit: cover;
    border: 4px solid #f1f5f9;
    margin-bottom: 24px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
  }

  .icon-actions.svelte-1ukpeu1 {
    display: flex;
    justify-content: center;
    gap: 24px;
    margin-bottom: 32px;
  }

  .icon-actions.svelte-1ukpeu1 .material-icons:where(.svelte-1ukpeu1) {
    font-size: 28px;
    cursor: pointer;
    transition: all 0.25s ease;
  }

  .delete-icon.svelte-1ukpeu1 {
    color: #ef4444;
  }

  .delete-icon.disabled.svelte-1ukpeu1 {
    opacity: 0.4;
    pointer-events: none;
  }

  .edit-icon.svelte-1ukpeu1 {
    color: #3f7cff;
  }

  #upload-profile-picture.svelte-1ukpeu1 {
    display: none;
  }
.subscriptions-info.svelte-1ukpeu1 {
    display: flex;
    justify-content: center;
    gap: 40px;
    margin: 24px 0 40px;
    font-size: 1.1rem;
  }

  .subscriptions-label.svelte-1ukpeu1,
  .subscribers-label.svelte-1ukpeu1 {
    cursor: pointer;
    padding: 8px 24px;
    border-radius: 9999px;
    transition: background 0.25s ease;
  }

  .subscriptions-label.svelte-1ukpeu1:hover,
  .subscribers-label.svelte-1ukpeu1:hover {
    background: #f1f5f9;
  }

  .input-group.svelte-1ukpeu1 {
    position: relative;
    margin-bottom: 20px;
  }

  .input-icon.svelte-1ukpeu1 {
    position: absolute;
    left: 16px;
    top: 50%;
    transform: translateY(-50%);
    color: #64748b;
    z-index: 2;
  }

  .input-group.svelte-1ukpeu1 input:where(.svelte-1ukpeu1) {
    width: 100%;
    padding: 14px 16px 14px 48px;
    border: 2px solid #e6eaf2;
    border-radius: 14px;
    font-size: 1.05rem;
    background: #f8f9fc;
    color: #1a1b1e;
    transition: border-color 0.25s ease;
  }

  .status-badges.svelte-1ukpeu1 {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;
    margin: 32px 0;
  }

  .badge.svelte-1ukpeu1 {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 20px;
    border-radius: 9999px;
    font-size: 0.9rem;
    font-weight: 600;
    color: white;
  }

  .badge.verified.svelte-1ukpeu1 { background: linear-gradient(135deg, #10b981, #059669); }
  .badge.private.svelte-1ukpeu1   { background: linear-gradient(135deg, #ef4444, #dc2626); }
  .badge.public.svelte-1ukpeu1    { background: linear-gradient(135deg, #3f7cff, #2563eb); }
  .badge.two-fa.svelte-1ukpeu1    { background: linear-gradient(135deg, #f59e0b, #d97706); }

  .privacy-settings.svelte-1ukpeu1 {
    background: #f8f9fc;
    border-radius: 16px;
    padding: 20px;
    border: 1px solid #e6eaf2;
    margin-bottom: 32px;
  }

  .setting-item.svelte-1ukpeu1 {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 0;
  }

  .setting-label.svelte-1ukpeu1 {
    color: #475569;
    font-weight: 500;
  }

  .setting-value.svelte-1ukpeu1 {
    font-weight: 600;
    padding: 4px 14px;
    border-radius: 9999px;
    font-size: 0.9rem;
  }

  .setting-value.enabled.svelte-1ukpeu1 { background: #d1fae5; color: #065f46; }
  .setting-value.disabled.svelte-1ukpeu1 { background: #fee2e2; color: #991b1b; }

  button.svelte-1ukpeu1 {
    width: 100%;
    padding: 16px;
    background: #3f7cff;
    color: white;
    border: none;
    border-radius: 14px;
    font-size: 1.1rem;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.25s ease;
  }

  button.svelte-1ukpeu1:hover {
    background: #2f6ae6;
    transform: translateY(-2px);
    box-shadow: 0 10px 24px rgba(63, 124, 255, 0.3);
  }

  /* Delete Confirmation Modal */
  .overlay.svelte-1ukpeu1 {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.65);
    z-index: 10000;
  }

  .confirmation-modal.svelte-1ukpeu1 {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: white;
    padding: 32px 40px;
    border-radius: 24px;
    box-shadow: 0 20px 50px rgba(15, 23, 42, 0.15);
    z-index: 10001;
    max-width: 420px;
    width: 90%;
    text-align: center;
  }

  .confirmation-modal.svelte-1ukpeu1 p:where(.svelte-1ukpeu1) {
    font-size: 1.1rem;
    margin-bottom: 28px;
  }

  .button-container.svelte-1ukpeu1 {
    display: flex;
    gap: 16px;
  }

  .button-container.svelte-1ukpeu1 button:where(.svelte-1ukpeu1) {
    flex: 1;
    padding: 14px;
    border-radius: 12px;
    font-weight: 700;
  }

  .button-container.svelte-1ukpeu1 button:where(.svelte-1ukpeu1):first-child {
    background: #ef4444;
  }

  .button-container.svelte-1ukpeu1 button:where(.svelte-1ukpeu1):last-child {
    background: #e2e8f0;
    color: #475569;
  }

  @media (max-width: 768px) {
    .title.svelte-1ukpeu1 {
      padding: 10px 20px;
    }

    .title-span.svelte-1ukpeu1 {
      font-size: 1.2rem;
    }

    .profile-card.svelte-1ukpeu1 {
      padding: 32px 24px;
      margin: 16px;
    }

    .status-badges.svelte-1ukpeu1 {
      gap: 6px;
    }

    .badge.svelte-1ukpeu1 {
      font-size: 0.75rem;
      padding: 4px 8px;
    }

    .privacy-settings.svelte-1ukpeu1 {
      padding: 12px;
    }

    .setting-item.svelte-1ukpeu1 {
      flex-direction: column;
      align-items: flex-start;
      gap: 4px;
    }

    .subscriptions-info.svelte-1ukpeu1 {
      gap: 24px;
      margin: 16px 0 28px;
    }

    .subscriptions-label.svelte-1ukpeu1,
    .subscribers-label.svelte-1ukpeu1 {
      flex: 1;
      text-align: center;
    }
  }

  @media screen and (min-width: 768px) {
    .title.svelte-1ukpeu1 {
      margin-top: 40px;
    }
  }

  @media screen and (min-width: 850px) {
    .title.svelte-1ukpeu1 {
      margin-top: 5px;
    }
  }

  @media screen and (min-width: 850px) and (min-height: 1280px) {
    .title.svelte-1ukpeu1 {
      margin-top: 55px;
    }
  }

  @media screen and (min-width: 1024px) and (max-width: 1024px) and (max-height: 600px) {
    .title.svelte-1ukpeu1 {
      margin-top: 5px;
    }
  }

  @media screen and (min-width: 1024px) and (min-height: 1300px) {
    .title.svelte-1ukpeu1 {
      margin-top: 60px;
    }
  }

  @media screen and (min-width: 1440px) {
    .title.svelte-1ukpeu1 {
      margin-top: 20px;
    }
  }


  .content.svelte-e37k2l {
    min-height: 100vh;
    background: linear-gradient(180deg, #f8f9fc 0%, #f0f2f8 100%);
    padding-bottom: 60px;
  }

  .title.svelte-e37k2l {
    display: flex;
    justify-content: center;
    padding: 24px 0;
    margin-bottom: 24px;
  }

  .title-span.svelte-e37k2l {
    font-size: 1.85rem;
    font-weight: 700;
    color: #1a1b1e;
    letter-spacing: -0.5px;
  }

  .edit-profile-card.svelte-e37k2l {
    max-width: 560px;
    margin: 0 auto;
    background: #ffffff;
    border-radius: 24px;
    padding: 48px 40px;
    box-shadow: 0 12px 40px rgba(15, 23, 42, 0.08);
    border: 1px solid #e6eaf2;
  }

  .input-group.svelte-e37k2l {
    position: relative;
    margin-bottom: 24px;
  }

  .input-icon.svelte-e37k2l {
    position: absolute;
    left: 16px;
    top: 50%;
    transform: translateY(-50%);
    color: #64748b;
    z-index: 2;
  }

  .input-group.svelte-e37k2l input:where(.svelte-e37k2l),
  .input-group.svelte-e37k2l select:where(.svelte-e37k2l) {
    width: 100%;
    padding: 14px 16px 14px 48px;
    border: 2px solid #e6eaf2;
    border-radius: 14px;
    font-size: 1.05rem;
    background: #f8f9fc;
    transition: border-color 0.25s ease;
  }

  .input-group.svelte-e37k2l input:where(.svelte-e37k2l):focus,
  .input-group.svelte-e37k2l select:where(.svelte-e37k2l):focus {
    outline: none;
    border-color: #3f7cff;
    box-shadow: 0 0 0 4px rgba(63, 124, 255, 0.15);
  }

  .input-group.svelte-e37k2l input.error:where(.svelte-e37k2l) {
    border-color: #ef4444;
  }

  .input-group.svelte-e37k2l input.readonly:where(.svelte-e37k2l) {
    background-color: #f9fafb;
    color: #6b7280;
    cursor: not-allowed;
  }

  .error-message.svelte-e37k2l {
    color: #ef4444;
    font-size: 0.85rem;
    margin-top: 6px;
    margin-left: 4px;
  }

  .phone-input-container.svelte-e37k2l {
    margin-bottom: 24px;
  }

  .phone-input-group.svelte-e37k2l {
    display: flex;
    border: 2px solid #e6eaf2;
    border-radius: 14px;
    overflow: hidden;
    background: #f8f9fc;
  }

  .country-code-input.svelte-e37k2l {
    flex: 0 0 120px;
    border-right: 2px solid #e6eaf2;
  }

  .phone-number-input.svelte-e37k2l {
    position: relative;
    flex: 1;
  }

  .phone-number-input.svelte-e37k2l .input-icon:where(.svelte-e37k2l) {
    left: 12px;
  }

  .country-select.svelte-e37k2l,
  .phone-input.svelte-e37k2l {
    width: 100%;
    height: 100%;
    border: none;
    background: transparent;
    font-size: 1.05rem;
    padding: 0;
  }

  .country-select.svelte-e37k2l {
    padding: 0 30px 0 15px;
    appearance: none;
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 16px;
  }

  .phone-input.svelte-e37k2l {
    padding-left: 40px;
  }

  .country-select.svelte-e37k2l:focus,
  .phone-input.svelte-e37k2l:focus {
    outline: none;
  }

  .phone-input-group.svelte-e37k2l:focus-within {
    border-color: #3b82f6;
  }

  .gender-select.svelte-e37k2l {
    width: 100%;
    padding: 12px 15px 12px 45px;
    border: 2px solid #e5e7eb;
    border-radius: 8px;
    font-size: 1rem;
    background-color: white;
    cursor: pointer;
    height: 48px;
    display: flex;
    align-items: center;
    box-sizing: border-box;
    appearance: none;
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right 15px center;
    background-size: 20px;
    padding-right: 40px;
  }

  .privacy-settings.svelte-e37k2l {
    background: #f8f9fc;
    border-radius: 16px;
    padding: 24px;
    border: 1px solid #e6eaf2;
    margin: 32px 0;
  }

  .privacy-settings.svelte-e37k2l h3:where(.svelte-e37k2l) {
    margin-bottom: 20px;
    color: #1a1b1e;
    font-size: 1.25rem;
    font-weight: 600;
  }

  .setting-item.svelte-e37k2l {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 16px;
  }

  .setting-label.svelte-e37k2l {
    flex: 1;
    font-size: 1.05rem;
    color: #475569;
  }

  .switch.svelte-e37k2l {
    position: relative;
    display: inline-block;
    width: 52px;
    height: 28px;
  }

  .switch.svelte-e37k2l input:where(.svelte-e37k2l) { opacity: 0; width: 0; height: 0; }

  .slider.svelte-e37k2l {
    position: absolute;
    cursor: pointer;
    top: 0; left: 0; right: 0; bottom: 0;
    background-color: #cbd5e1;
    transition: .3s;
    border-radius: 9999px;
  }

  .slider.svelte-e37k2l:before {
    position: absolute;
    content: "";
    height: 22px;
    width: 22px;
    left: 3px;
    bottom: 3px;
    background-color: white;
    transition: .3s;
    border-radius: 50%;
  }

  input.svelte-e37k2l:checked + .slider:where(.svelte-e37k2l) {
    background-color: #3f7cff;
  }

  input.svelte-e37k2l:checked + .slider:where(.svelte-e37k2l):before {
    transform: translateX(24px);
  }

  /* .switch input:disabled + .slider {
    opacity: 0.6;
    cursor: not-allowed;
  }

  .switch input:disabled + .slider:before {
    cursor: not-allowed;
  } */

  .button-group.svelte-e37k2l {
    display: flex;
    gap: 16px;
    margin-top: 40px;
  }

  .button-group.svelte-e37k2l button:where(.svelte-e37k2l) {
    flex: 1;
    padding: 16px;
    border: none;
    border-radius: 14px;
    font-size: 1.1rem;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.25s ease;
  }

  .cancel-btn.svelte-e37k2l {
    background: #f1f5f9;
    color: #475569;
  }

  .cancel-btn.svelte-e37k2l:hover {
    background: #e2e8f0;
  }

  .save-btn.svelte-e37k2l {
    background: #3f7cff;
    color: white;
  }

  .save-btn.svelte-e37k2l:hover {
    background: #2f6ae6;
    transform: translateY(-2px);
    box-shadow: 0 10px 24px rgba(63, 124, 255, 0.3);
  }

  @media (max-width: 768px) {
    .edit-profile-card.svelte-e37k2l {
      margin: 16px;
      padding: 32px 24px;
    }
    
    .button-group.svelte-e37k2l {
      flex-direction: column;
    }
  }


  main.svelte-1rizeiu {
    margin: 0;
    padding: 0;
    height: 100vh;
  }

  .auth-layout.svelte-1rizeiu {
    padding: 3rem 0;
    background-color: #f3f3f9;
    min-height: 100vh;
    position: relative;
  }

  .bg-image.svelte-1rizeiu {
    position: absolute;
    top: 0;
    background-position: center;
    background-size: cover;
    height: 380px;
    width: 100%;
    clip-path: polygon(100% 0, 100% 75%, 53% 100%, 0 75%, 0 0);
    /* background: linear-gradient(to right, #3FBAFF, #3F7FFF); */
    opacity: 0.9;
  }

  .auth-content.svelte-1rizeiu {
    max-width: 500px;
    width: 90%;
    margin: auto;
    position: relative;
    z-index: 2;
  }

  .auth-head.svelte-1rizeiu {
    padding: 1rem 0;
    color: #ffffffab;
    text-align: center;
    /* (unused) p {
      font-size: 1.125rem;
      margin-top: 10px;
    }*/
  }

  .logo-container.svelte-1rizeiu {
    text-align: center;
    /* margin-bottom: 1rem; */
  }

  .auth-logo.svelte-1rizeiu {
    width: 350px;
    height: auto;
    /* background-color: #ffffff; */
    border-radius: 8px;
    padding: 10px;
  }

  .auth-box.svelte-1rizeiu {
    background-color: #fff;
    padding: 1.5rem 1.5rem 2rem;
    min-height: 100px;
    border-radius: 8px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  }

  .box-heading.svelte-1rizeiu {
    text-align: center;
    margin-bottom: 2rem;
    h5:where(.svelte-1rizeiu) {
      /* color: #3F7EFF; */
      color: #000000;
      margin-bottom: 0.5rem;
      font-size: 1.5rem;
      font-weight: 600;
    }
    p:where(.svelte-1rizeiu) {
      color: #6c757d;
      margin-bottom: 0;
    }
  }

  .field-wrapper.svelte-1rizeiu {
    display: flex;
    flex-direction: column;
    gap: 1rem;
  }

  .input-group.svelte-1rizeiu {
    position: relative;
  }

  .input-group.svelte-1rizeiu i:where(.svelte-1rizeiu) {
    /* color: #3F7FFF; */
    color: #8E8E8E;
    font-size: 20px;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: 10px;
    z-index: 1;
  }

  .input-group.svelte-1rizeiu input[type="email"]:where(.svelte-1rizeiu) /* (unused) .input-group input[type="password"]*/ {
    width: 100%;
    padding: 12px 40px;
    border-radius: 5px;
    border: 1px solid #3F7FFF;
    box-sizing: border-box;
    font-size: 1rem;
    transition: border-color 0.3s ease;
  }

  .input-group.svelte-1rizeiu input:where(.svelte-1rizeiu):focus {
    outline: none;
    border-color: #3F7FFF;
    box-shadow: 0 0 0 2px rgba(63, 127, 255, 0.2);
  }

  .submit-btn.svelte-1rizeiu {
    width: 100%;
    padding: 12px;
    margin-top: 1rem;
    background: linear-gradient(to right, #3FBAFF, #3F7FFF);
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    transition: all 0.3s ease;
    font-size: 1rem;
    font-weight: 500;
  }

  .submit-btn.svelte-1rizeiu:hover {
    /* background: linear-gradient(to right, #3F7FFF, #3FBAFF); */
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(63, 127, 255, 0.3);
  }

  .submit-btn.svelte-1rizeiu:disabled {
    background: linear-gradient(to right, #3FBAFF, #3F7FFF);
    opacity: 0.7;
    cursor: not-allowed;
    transform: none;
  }

  .auth-links.svelte-1rizeiu {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 1.5rem;
    padding-top: 1rem;
    border-top: 1px solid #e9ecef;
  }

  /* (unused) .reset-password-link,*/
  .back-home-link.svelte-1rizeiu {
    color: #3F7EFF;
    text-decoration: none;
    font-weight: 500;
    transition: color 0.3s ease;
  }

  /* (unused) .reset-password-link:hover,*/
  .back-home-link.svelte-1rizeiu:hover {
    color: #3FBAFF;
    text-decoration: none;
  }

  @media (max-width: 768px) {
    .auth-layout.svelte-1rizeiu {
      padding: 1rem 0 2rem;
    }

    .auth-head.svelte-1rizeiu {
      padding: 1.5rem 0;
    }

    .auth-content.svelte-1rizeiu {
      width: 95%;
    }

    .auth-box.svelte-1rizeiu {
      padding: 1rem;
    }

    .auth-logo.svelte-1rizeiu {
      width: 200px;
    }

    .input-group.svelte-1rizeiu i:where(.svelte-1rizeiu) {
      font-size: 16px;
      left: 8px;
    }

    .input-group.svelte-1rizeiu input[type="email"]:where(.svelte-1rizeiu) /* (unused) .input-group input[type="password"]*/ {
      padding: 10px 30px;
      font-size: 0.9rem;
    }

    .box-heading.svelte-1rizeiu h5:where(.svelte-1rizeiu) {
      font-size: 1.3rem;
    }
  }


  main.svelte-1qwhi05 {
    margin: 0;
    padding: 0;
    height: 100vh;
  }

  .auth-layout.svelte-1qwhi05 {
    padding: 3rem 0;
    background-color: #f3f3f9;
    min-height: 100vh;
    position: relative;
  }

  .bg-image.svelte-1qwhi05 {
    position: absolute;
    top: 0;
    background-position: center;
    background-size: cover;
    height: 380px;
    width: 100%;
    clip-path: polygon(100% 0, 100% 75%, 53% 100%, 0 75%, 0 0);
    /* background: linear-gradient(to right, #3FBAFF, #3F7FFF); */
    opacity: 0.9;
  }

  .auth-content.svelte-1qwhi05 {
    max-width: 500px;
    width: 90%;
    margin: auto;
    position: relative;
    z-index: 2;
  }

  .auth-head.svelte-1qwhi05 {
    padding: 1rem 0;
    color: #ffffffab;
    text-align: center;
    /* (unused) p {
      font-size: 1.125rem;
      margin-top: 10px;
    }*/
  }

  .logo-container.svelte-1qwhi05 {
    text-align: center;
    /* margin-bottom: 1rem; */
  }

  .auth-logo.svelte-1qwhi05 {
    width: 350px;
    height: auto;
    /* background-color: #ffffff; */
    border-radius: 8px;
    padding: 10px;
  }

  .auth-box.svelte-1qwhi05 {
    background-color: #fff;
    padding: 1.5rem 1.5rem 2rem;
    min-height: 100px;
    border-radius: 8px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  }

  .box-heading.svelte-1qwhi05 {
    text-align: center;
    margin-bottom: 2rem;
    h5:where(.svelte-1qwhi05) {
      /* color: #3F7EFF; */
      color: #000000;
      margin-bottom: 0.5rem;
      font-size: 1.5rem;
      font-weight: 600;
    }
    p:where(.svelte-1qwhi05) {
      color: #6c757d;
      margin-bottom: 0;
    }
  }

  .field-wrapper.svelte-1qwhi05 {
    display: flex;
    flex-direction: column;
    gap: 1rem;
  }

  .input-group.svelte-1qwhi05 {
    position: relative;
  }

  .input-group.svelte-1qwhi05 i:where(.svelte-1qwhi05) {
    /* color: #3F7FFF; */
    color: #8E8E8E;
    font-size: 20px;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: 10px;
    z-index: 1;
  }

  .input-group.svelte-1qwhi05 input[type="email"]:where(.svelte-1qwhi05),
  .input-group.svelte-1qwhi05 input[type="text"]:where(.svelte-1qwhi05),
  .input-group.svelte-1qwhi05 input[type="password"]:where(.svelte-1qwhi05) {
    width: 100%;
    padding: 12px 40px;
    border-radius: 5px;
    border: 1px solid #3F7FFF;
    box-sizing: border-box;
    font-size: 1rem;
    transition: border-color 0.3s ease;
  }

  .input-group.svelte-1qwhi05 input:where(.svelte-1qwhi05):focus {
    outline: none;
    border-color: #3F7FFF;
    box-shadow: 0 0 0 2px rgba(63, 127, 255, 0.2);
  }

  .input-group.svelte-1qwhi05 input:where(.svelte-1qwhi05):disabled {
    background-color: #f8f9fa;
    cursor: not-allowed;
  }

  .checkbox-group.svelte-1qwhi05 {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.5rem 0;

    input[type="checkbox"]:where(.svelte-1qwhi05) {
      accent-color: #3F7FFF;
      width: 18px;
      height: 18px;
      margin: 0;
      vertical-align: middle;
      cursor: pointer;
    }

    label:where(.svelte-1qwhi05) {
      color: #495057;
      font-size: 0.9rem;
      cursor: pointer;
      line-height: 1;
      vertical-align: middle;
      margin: 0;
      user-select: none;
    }
  }

  .submit-btn.svelte-1qwhi05 {
    width: 100%;
    padding: 12px;
    margin-top: 1rem;
    background: linear-gradient(to right, #3FBAFF, #3F7FFF);
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    transition: all 0.3s ease;
    font-size: 1rem;
    font-weight: 500;
  }

  .submit-btn.svelte-1qwhi05:hover {
    /* background: linear-gradient(to right, #3F7FFF, #3FBAFF); */
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(63, 127, 255, 0.3);
  }

  .submit-btn.svelte-1qwhi05:disabled {
    background: linear-gradient(to right, #3FBAFF, #3F7FFF);
    opacity: 0.7;
    cursor: not-allowed;
    transform: none;
  }

  .auth-links.svelte-1qwhi05 {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 1.5rem;
    padding-top: 1rem;
    border-top: 1px solid #e9ecef;
  }

  /* (unused) .reset-password-link,*/
  .back-home-link.svelte-1qwhi05 {
    color: #3F7EFF;
    text-decoration: none;
    font-weight: 500;
    transition: color 0.3s ease;
  }

  /* (unused) .reset-password-link:hover,*/
  .back-home-link.svelte-1qwhi05:hover {
    color: #3FBAFF;
    text-decoration: none;
  }

  @media (max-width: 768px) {
    .auth-layout.svelte-1qwhi05 {
      padding: 1rem 0 2rem;
    }

    .auth-head.svelte-1qwhi05 {
      padding: 1.5rem 0;
    }

    .auth-content.svelte-1qwhi05 {
      width: 95%;
    }

    .auth-box.svelte-1qwhi05 {
      padding: 1rem;
    }

    .auth-logo.svelte-1qwhi05 {
      width: 200px;
    }

    .input-group.svelte-1qwhi05 i:where(.svelte-1qwhi05) {
      font-size: 16px;
      left: 8px;
    }

    .input-group.svelte-1qwhi05 input[type="email"]:where(.svelte-1qwhi05),
    .input-group.svelte-1qwhi05 input[type="text"]:where(.svelte-1qwhi05),
    .input-group.svelte-1qwhi05 input[type="password"]:where(.svelte-1qwhi05) {
      padding: 10px 30px;
      font-size: 0.9rem;
    }

    .checkbox-group.svelte-1qwhi05 label:where(.svelte-1qwhi05) {
      font-size: 0.8rem;
    }

    .box-heading.svelte-1qwhi05 h5:where(.svelte-1qwhi05) {
      font-size: 1.3rem;
    }
  }


  .otp-overlay.svelte-nm4vwr {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.65);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10000;
    padding: 20px;
  }

  .otp-card.svelte-nm4vwr {
    width: 100%;
    max-width: 420px;
    background: #ffffff;
    border-radius: 24px;
    padding: 40px 32px;
    box-shadow: 0 20px 50px rgba(15, 23, 42, 0.12);
    border: 1px solid #e6eaf2;
    text-align: center;
    box-sizing: border-box;
  }

  .otp-card.svelte-nm4vwr h2:where(.svelte-nm4vwr) {
    margin: 0 0 8px 0;
    font-size: 1.65rem;
    font-weight: 700;
    color: #1a1b1e;
  }

  .otp-subtitle.svelte-nm4vwr {
    margin: 0 0 28px 0;
    color: #64748b;
    font-size: 1.02rem;
    line-height: 1.5;
  }

  .otp-card.svelte-nm4vwr input:where(.svelte-nm4vwr) {
    width: 100%;
    max-width: 280px;
    margin: 0 auto 32px;
    padding: 18px 24px;
    font-size: 1.35rem;
    font-weight: 600;
    letter-spacing: 12px;
    text-align: center;
    background: #f8f9fc;
    border: 2px solid #e5e7eb;
    border-radius: 16px;
    transition: all 0.25s ease;
  }

  .otp-card.svelte-nm4vwr input:where(.svelte-nm4vwr):focus {
    outline: none;
    border-color: #3f7cff;
    box-shadow: 0 0 0 4px rgba(63, 124, 255, 0.15);
    background: #ffffff;
  }

  .buttons.svelte-nm4vwr {
    display: flex;
    gap: 12px;
  }

  .cancel-btn.svelte-nm4vwr,
  .submit-btn.svelte-nm4vwr {
    flex: 1;
    padding: 14px 20px;
    border: none;
    border-radius: 14px;
    font-size: 1.05rem;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.25s ease;
  }

  .cancel-btn.svelte-nm4vwr {
    background: #f1f3f8;
    color: #475569;
  }

  .cancel-btn.svelte-nm4vwr:hover {
    background: #e2e6f0;
  }

  .submit-btn.svelte-nm4vwr {
    background: #3f7cff;
    color: white;
  }

  .submit-btn.svelte-nm4vwr:hover:not(:disabled) {
    background: #2f6ae6;
    transform: translateY(-2px);
    box-shadow: 0 10px 20px rgba(63, 124, 255, 0.3);
  }

  .submit-btn.svelte-nm4vwr:disabled {
    opacity: 0.6;
    cursor: not-allowed;
  }

  /* Responsive */
  @media (max-width: 480px) {
    .otp-card.svelte-nm4vwr {
      padding: 32px 24px;
      border-radius: 20px;
    }

    .otp-card.svelte-nm4vwr h2:where(.svelte-nm4vwr) {
      font-size: 1.45rem;
    }

    .otp-card.svelte-nm4vwr input:where(.svelte-nm4vwr) {
      font-size: 1.25rem;
      letter-spacing: 10px;
      padding: 16px 20px;
    }
  }


  .twofa-page.svelte-d3fzwz {
    min-height: 100vh;
    padding: calc(var(--app-header-height) + 40px) 24px 60px;
    background: linear-gradient(180deg, #f8f9fc 0%, #f0f2f8 100%);
    display: flex;
    align-items: flex-start;
    justify-content: center;
  }

  .twofa-card.svelte-d3fzwz {
    width: 100%;
    max-width: 820px;
    margin: 0 auto;
    padding: 48px 40px;
    background: #ffffff;
    border-radius: 24px;
    box-shadow: 0 12px 40px rgba(15, 23, 42, 0.08);
    border: 1px solid #e6eaf2;
  }

  .title-wrap.svelte-d3fzwz {
    text-align: center;
    margin-bottom: 32px;
  }

  .title.svelte-d3fzwz {
    margin: 0 0 8px 0;
    color: #1a1b1e;
    font-size: 1.85rem;
    font-weight: 700;
    letter-spacing: -0.5px;
  }

  .subtitle.svelte-d3fzwz {
    margin: 0 0 16px 0;
    color: #64748b;
    font-size: 1.05rem;
    line-height: 1.5;
  }

  .status-badge.svelte-d3fzwz {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 8px 20px;
    border-radius: 9999px;
    font-size: 0.875rem;
    font-weight: 700;
    letter-spacing: 0.3px;
  }

  .status-badge.enabled.svelte-d3fzwz {
    color: #047857;
    background: #ecfdf3;
    border: 1px solid #a7f3d0;
  }

  .status-badge.disabled.svelte-d3fzwz {
    color: #92400e;
    background: #fff7ed;
    border: 1px solid #fed7aa;
  }

  .button-container.svelte-d3fzwz {
    display: flex;
    justify-content: center;
    margin: 20px 0 32px;
  }

  .action-btn.svelte-d3fzwz {
    min-width: 260px;
    height: 52px;
    padding: 0 28px;
    background: #3f7cff;
    color: white;
    border: none;
    border-radius: 14px;
    font-size: 1.05rem;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.25s ease;
    box-shadow: 0 6px 16px rgba(63, 124, 255, 0.25);
  }

  .action-btn.svelte-d3fzwz:hover:not(:disabled) {
    background: #2f6ae6;
    transform: translateY(-2px);
    box-shadow: 0 10px 24px rgba(63, 124, 255, 0.35);
  }

  .action-btn.svelte-d3fzwz:disabled {
    opacity: 0.6;
    cursor: not-allowed;
  }

  .next-btn.svelte-d3fzwz {
    display: block;
    margin: 24px auto 12px;
  }

  .cancel-link.svelte-d3fzwz {
    display: block;
    margin: 0 auto;
    background: none;
    border: none;
    color: #64748b;
    font-size: 0.95rem;
    cursor: pointer;
    text-decoration: underline;
  }

  .cancel-link.svelte-d3fzwz:hover {
    color: #334155;
  }

  .qr-wrap.svelte-d3fzwz {
    margin-top: 20px;
    text-align: center;
  }

  .qr-title.svelte-d3fzwz {
    margin-bottom: 16px;
    color: #334155;
    font-size: 1.05rem;
    font-weight: 600;
  }

  .qr-hint.svelte-d3fzwz {
    margin-top: 16px;
    color: #64748b;
    font-size: 0.95rem;
  }

  .qrcode.svelte-d3fzwz {
    display: inline-flex;
    justify-content: center;
    padding: 20px;
    background: #fff;
    border-radius: 20px;
    border: 1px solid #e6eaf2;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.06);
  }

  .qrcode.svelte-d3fzwz img:where(.svelte-d3fzwz) {
    width: 280px;
    height: 280px;
    border-radius: 12px;
  }

  .otp-wrap.svelte-d3fzwz {
    margin-top: 32px;
  }

  /* Disable modal overlay */
  .disable-overlay.svelte-d3fzwz {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.65);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10000;
    padding: 20px;
  }

  .disable-modal.svelte-d3fzwz {
    width: 100%;
    max-width: 480px;
    background: #ffffff;
    border-radius: 24px;
    padding: 40px 32px;
    box-shadow: 0 20px 50px rgba(15, 23, 42, 0.12);
    border: 1px solid #e6eaf2;
    text-align: center;
    box-sizing: border-box;
  }

  .disable-modal.svelte-d3fzwz h2:where(.svelte-d3fzwz) {
    margin: 0 0 24px 0;
    font-size: 1.65rem;
    font-weight: 700;
    color: #1a1b1e;
  }

  .qr-section.svelte-d3fzwz {
    margin-bottom: 24px;
  }

  .qr-label.svelte-d3fzwz {
    margin: 0 0 12px 0;
    color: #64748b;
    font-size: 0.95rem;
    line-height: 1.5;
  }

  .qrcode-sm.svelte-d3fzwz {
    display: inline-flex;
    justify-content: center;
    padding: 12px;
    background: #fff;
    border-radius: 16px;
    border: 1px solid #e6eaf2;
  }

  .qrcode-sm.svelte-d3fzwz img:where(.svelte-d3fzwz) {
    width: 180px;
    height: 180px;
    border-radius: 8px;
  }

  .qr-error.svelte-d3fzwz {
    margin-bottom: 24px;
    padding: 12px 16px;
    background: #fef2f2;
    color: #dc2626;
    border-radius: 10px;
    font-size: 0.9rem;
  }

  .loading-text.svelte-d3fzwz {
    margin-bottom: 24px;
    color: #64748b;
    font-size: 0.95rem;
  }

  .otp-section.svelte-d3fzwz {
    margin-bottom: 28px;
  }

  .otp-label.svelte-d3fzwz {
    margin: 0 0 16px 0;
    color: #64748b;
    font-size: 0.95rem;
    line-height: 1.5;
  }

  .otp-section.svelte-d3fzwz input:where(.svelte-d3fzwz) {
    width: 100%;
    max-width: 280px;
    margin: 0 auto;
    padding: 18px 24px;
    font-size: 1.35rem;
    font-weight: 600;
    letter-spacing: 12px;
    text-align: center;
    background: #f8f9fc;
    border: 2px solid #e5e7eb;
    border-radius: 16px;
    transition: all 0.25s ease;
    box-sizing: border-box;
  }

  .otp-section.svelte-d3fzwz input:where(.svelte-d3fzwz):focus {
    outline: none;
    border-color: #3f7cff;
    box-shadow: 0 0 0 4px rgba(63, 124, 255, 0.15);
    background: #ffffff;
  }

  .modal-buttons.svelte-d3fzwz {
    display: flex;
    gap: 12px;
  }

  .cancel-btn.svelte-d3fzwz,
  .submit-btn.svelte-d3fzwz {
    flex: 1;
    padding: 14px 20px;
    border: none;
    border-radius: 14px;
    font-size: 1.05rem;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.25s ease;
  }

  .cancel-btn.svelte-d3fzwz {
    background: #f1f3f8;
    color: #475569;
  }

  .cancel-btn.svelte-d3fzwz:hover {
    background: #e2e6f0;
  }

  .submit-btn.svelte-d3fzwz {
    background: #dc2626;
    color: white;
  }

  .submit-btn.svelte-d3fzwz:hover:not(:disabled) {
    background: #b91c1c;
    transform: translateY(-2px);
    box-shadow: 0 10px 20px rgba(220, 38, 38, 0.3);
  }

  .submit-btn.svelte-d3fzwz:disabled {
    opacity: 0.6;
    cursor: not-allowed;
  }

  @media (max-width: 768px) {
    .twofa-page.svelte-d3fzwz {
      padding: calc(var(--app-header-height) + 24px) 16px 40px;
    }
    .twofa-card.svelte-d3fzwz {
      padding: 32px 24px;
    }
    .action-btn.svelte-d3fzwz {
      width: 100%;
      min-width: auto;
    }
    .qrcode.svelte-d3fzwz img:where(.svelte-d3fzwz) {
      width: 240px;
      height: 240px;
    }
    .disable-modal.svelte-d3fzwz {
      padding: 32px 24px;
      border-radius: 20px;
    }
    .disable-modal.svelte-d3fzwz h2:where(.svelte-d3fzwz) {
      font-size: 1.45rem;
    }
    .otp-section.svelte-d3fzwz input:where(.svelte-d3fzwz) {
      font-size: 1.25rem;
      letter-spacing: 10px;
      padding: 16px 20px;
    }
  }


  .profile-info.svelte-137ycry {
    display: flex;
    align-items: center;
    margin-bottom: 10px;
  }

  .profile-picture.svelte-137ycry {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    margin-right: 10px;
  }

  .title.svelte-137ycry {
    position: relative;
    display: flex;
    justify-content: center;
    padding: 10px;
    box-shadow: 0 4px 8px rgba(135, 135, 135, 0.1);
    /* background: linear-gradient(to bottom, #FF3C82 45%, #1e92ff 55%); */
    /* background: linear-gradient(130deg, #cdb4db, #ffffff);
    box-shadow:
      inset -20px 0 50px #cdb4db,
      inset 20px 0 50px #cdb4db; */
  }

  .title-span.svelte-137ycry {
    margin-top: 5px;
    /* border: 2px solid #000000; */
    border-radius: 25%;
    /* margin: 0 15px; */
    padding: 5px;
    font-size: 1.2rem;
    color: #000000;
    /* text-decoration: underline; */
    /* cursor: pointer; */
    font-size: 1.4rem;
    font-weight: bold;
  }

  .video-container.svelte-137ycry {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    padding-top: 5px;
    padding-left: 50px;
    padding-right: 50px;
    padding-bottom: 50px;
    max-width: 2000px;
    margin: 0 auto;
    position: relative;
  }

  .video-wrapper.svelte-137ycry {
    width: 17%;
    margin: 10px;
    text-align: left;
  }

  .video-card.svelte-137ycry {
    position: relative;
    height: 350px;
    overflow: hidden;
    /* border-radius: 10px; */
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    cursor: pointer;
  }

  .video-card.svelte-137ycry video:where(.svelte-137ycry),
  .video-card.svelte-137ycry img:where(.svelte-137ycry) {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* border-radius: 10px; */
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
  }

  .bottom-content.svelte-137ycry {
    padding: 10px;
    background: #f9f9f9;
    /* border-radius: 10px; */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    cursor: pointer;
  }

  .video-title.svelte-137ycry {
    /* font-weight: bold; */
    color: #000000;
    margin-top: 10px;
  }

  .user-info.svelte-137ycry {
    font-size: 0.9rem;
    color: #000000;
  }

  .no-videos.svelte-137ycry {
    text-align: center;
    font-size: 1.2rem;
    color: #6c757d;
  }

  .time-info.svelte-137ycry {
    font-size: 0.6rem;
    color: #515151;
    margin-top: 10px;
  }

  @media (max-width: 767px) {
    .title.svelte-137ycry {
      padding: 10px 20px;
    }

    .title-span.svelte-137ycry {
      font-size: 1.2rem;
    }

    .video-container.svelte-137ycry {
      padding: 20px;
    }

    .video-wrapper.svelte-137ycry {
      width: 100%;
      margin: 10px 0;
      text-align: left;
    }

    .video-card.svelte-137ycry {
      height: 65vh;
    }

    .bottom-content.svelte-137ycry {
      padding: 10px;
      background: #f9f9f9;
      box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
      cursor: pointer;
    }
  }

  @media screen and (min-width: 768px) {
    .video-container.svelte-137ycry {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 20px;
      justify-content: center;
      padding: 20px;
    }

    .video-wrapper.svelte-137ycry {
      width: 100%;
      margin: 0;
    }

    .video-card.svelte-137ycry {
      height: 350px;
    }

    .title.svelte-137ycry {
      margin-top: 40px;
    }
  }

  @media screen and (min-width: 850px) {
    .title.svelte-137ycry {
      margin-top: 5px;
    }
  }

  @media screen and (min-width: 850px) and (min-height: 1280px) {
    .title.svelte-137ycry {
      margin-top: 55px;
    }
  }

  @media screen and (min-width: 1024px) and (max-width: 1024px) and (max-height: 600px) {
    .video-container.svelte-137ycry {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 20px;
      justify-content: center;
      padding: 20px;
    }

    .video-wrapper.svelte-137ycry {
      width: 100%;
      margin: 0;
    }

    .video-card.svelte-137ycry {
      height: 350px;
    }

    .title.svelte-137ycry {
      margin-top: 5px;
    }
  }

  @media screen and (min-width: 1024px) and (min-height: 1300px) {
    .video-container.svelte-137ycry {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 20px;
      justify-content: center;
      padding: 20px;
    }

    .video-wrapper.svelte-137ycry {
      width: 100%;
      margin: 0;
    }

    .video-card.svelte-137ycry {
      height: 350px;
    }

    .title.svelte-137ycry {
      margin-top: 60px;
    }
  }

  @media screen and (min-width: 1440px) {
    .video-container.svelte-137ycry {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 20px;
      justify-content: center;
      padding: 20px;
    }

    .video-wrapper.svelte-137ycry {
      width: 100%;
      margin: 0;
    }

    .video-card.svelte-137ycry {
      height: 450px;
    }

    .title.svelte-137ycry {
      margin-top: 20px;
    }
  }


  .search-page.svelte-up0b1o {
    padding: calc(var(--app-header-height) + 24px) 16px 28px;
    background: #f6f8fc;
    min-height: 100vh;
  }

  .search-card.svelte-up0b1o {
    width: min(920px, 100%);
    margin: 0 auto;
    background: #ffffff;
    border: 1px solid #e6eaf2;
    border-radius: 16px;
    box-shadow: 0 8px 28px rgba(15, 23, 42, 0.06);
    padding: 18px;
  }

  .title-wrap.svelte-up0b1o {
    margin-bottom: 14px;
  }

  .title.svelte-up0b1o {
    margin: 0;
    font-size: 1.35rem;
    color: #0f172a;
    font-weight: 700;
  }

  .subtitle.svelte-up0b1o {
    margin: 6px 0 0;
    color: #64748b;
    font-size: 0.95rem;
  }

  .map-container.svelte-up0b1o {
    width: 100%;
    border: 1px solid #dbe3f0;
    border-radius: 12px;
    overflow: hidden;
  }

  .controls.svelte-up0b1o {
    margin-top: 14px;
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 12px;
    align-items: end;
  }

  .field.svelte-up0b1o {
    display: flex;
    flex-direction: column;
    gap: 6px;
  }

  .field.svelte-up0b1o label:where(.svelte-up0b1o) {
    font-size: 0.88rem;
    color: #334155;
    font-weight: 600;
  }

  .field.svelte-up0b1o input:where(.svelte-up0b1o) {
    width: 100%;
    padding: 10px 12px;
    font-size: 0.95rem;
    height: 42px;
    outline: none;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
    border-radius: 10px;
    border: 1px solid #d6deeb;
    box-sizing: border-box;
  }

  .field.svelte-up0b1o input:where(.svelte-up0b1o):focus {
    border-color: #3f7cff;
    box-shadow: 0 0 0 3px rgba(63, 124, 255, 0.16);
  }

  .search-btn.svelte-up0b1o {
    height: 42px;
    padding: 0 18px;
    font-size: 0.92rem;
    font-weight: bold;
    color: #fff;
    background-color: #3f7cff;
    border: none;
    border-radius: 10px;
    cursor: pointer;
    transition: background-color 0.3s ease;
    white-space: nowrap;
  }

  .search-btn.svelte-up0b1o:hover {
    background-color: #2f6ae6;
  }

  @media (max-width: 768px) {
    .search-page.svelte-up0b1o {
      padding: calc(var(--app-header-height) + 16px) 12px 20px;
    }

    .search-card.svelte-up0b1o {
      padding: 14px;
    }

    .map-container.svelte-up0b1o {
      height: 320px !important;
    }

    .controls.svelte-up0b1o {
      grid-template-columns: 1fr;
      gap: 10px;
    }

    .search-btn.svelte-up0b1o {
      width: 100%;
      font-size: 0.9rem;
    }
  }


  .search-page.svelte-1b252wf {
    padding: calc(var(--app-header-height) + 24px) 16px 28px;
    background: #f6f8fc;
    min-height: 100vh;
  }

  .search-card.svelte-1b252wf {
    width: min(920px, 100%);
    margin: 0 auto;
    padding: 18px;
    background: #ffffff;
    border: 1px solid #e6eaf2;
    border-radius: 16px;
    box-shadow: 0 8px 28px rgba(15, 23, 42, 0.06);
  }

  .title-wrap.svelte-1b252wf {
    margin-bottom: 14px;
  }

  .title.svelte-1b252wf {
    margin: 0;
    font-size: 1.35rem;
    color: #0f172a;
    font-weight: 700;
  }

  .subtitle.svelte-1b252wf {
    margin: 6px 0 0;
    color: #64748b;
    font-size: 0.95rem;
  }

  .map-container.svelte-1b252wf {
    width: 100%;
    margin: 0 0 14px;
    border: 1px solid #dbe3f0;
    border-radius: 12px;
    overflow: hidden;
  }

  .controls.svelte-1b252wf {
    margin-top: 8px;
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 12px;
    align-items: end;
  }

  .field.svelte-1b252wf {
    display: flex;
    flex-direction: column;
    gap: 6px;
  }

  .field.svelte-1b252wf label:where(.svelte-1b252wf) {
    font-size: 0.88rem;
    color: #334155;
    font-weight: 600;
  }

  .field.svelte-1b252wf input:where(.svelte-1b252wf) {
    width: 100%;
    padding: 10px 12px;
    font-size: 0.95rem;
    height: 42px;
    outline: none;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
    border-radius: 10px;
    border: 1px solid #d6deeb;
    box-sizing: border-box;
  }

  .field.svelte-1b252wf input:where(.svelte-1b252wf):focus {
    border-color: #3f7cff;
    box-shadow: 0 0 0 3px rgba(63, 124, 255, 0.16);
  }

  .radio-buttons.svelte-1b252wf {
    display: flex;
    align-items: center;
    gap: 20px;
    margin: 6px 0 16px;
    padding: 10px 12px;
    background: #f8faff;
    border: 1px solid #e5ebf6;
    border-radius: 10px;
  }

  .radio-label.svelte-1b252wf {
    margin: 0;
    color: #334155;
    font-size: 0.92rem;
    font-weight: 600;
  }

  .radio-input.svelte-1b252wf {
    margin-right: 6px;
    accent-color: #3f7cff;
  }

  .date-time-picker.svelte-1b252wf {
    display: flex;
    flex-direction: column;
    margin-bottom: 14px;
    gap: 6px;
  }

  label.svelte-1b252wf {
    font-size: 0.88rem;
    color: #334155;
    font-weight: 600;
  }

  .datetime-input.svelte-1b252wf {
    width: 100%;
    padding: 10px 12px;
    font-size: 0.95rem;
    border: 1px solid #d6deeb;
    border-radius: 10px;
    height: 42px;
    outline: none;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
    box-sizing: border-box;
  }

  .datetime-input.svelte-1b252wf:focus {
    border-color: #3f7cff;
    box-shadow: 0 0 0 3px rgba(63, 124, 255, 0.16);
  }

  .search-btn.svelte-1b252wf {
    height: 42px;
    padding: 0 18px;
    font-size: 0.92rem;
    font-weight: bold;
    color: #fff;
    background-color: #3f7cff;
    border: none;
    border-radius: 10px;
    cursor: pointer;
    transition: background-color 0.3s ease;
    white-space: nowrap;
  }

  .search-btn.svelte-1b252wf:hover {
    background-color: #2f6ae6;
  }

  @media (max-width: 768px) {
    .search-page.svelte-1b252wf {
      padding: calc(var(--app-header-height) + 16px) 12px 20px;
    }

    .search-card.svelte-1b252wf {
      padding: 14px;
    }

    .map-container.svelte-1b252wf {
      height: 320px !important;
    }

    .controls.svelte-1b252wf {
      grid-template-columns: 1fr;
      gap: 10px;
    }

    .search-btn.svelte-1b252wf {
      width: 100%;
      font-size: 0.9rem;
    }

    .radio-buttons.svelte-1b252wf {
      gap: 12px;
      justify-content: space-between;
    }
  }


  .search-page.svelte-1eqlqe6 {
    padding: calc(var(--app-header-height) + 24px) 16px 28px;
    background: #f6f8fc;
    min-height: 100vh;
  }

  .search-card.svelte-1eqlqe6 {
    width: min(560px, 100%);
    margin: 0 auto;
    padding: 20px;
    background: #ffffff;
    border: 1px solid #e6eaf2;
    border-radius: 16px;
    box-shadow: 0 8px 28px rgba(15, 23, 42, 0.06);
  }

  .title-wrap.svelte-1eqlqe6 {
    margin-bottom: 12px;
  }

  .title.svelte-1eqlqe6 {
    margin: 0;
    font-size: 1.35rem;
    color: #0f172a;
    font-weight: 700;
  }

  .subtitle.svelte-1eqlqe6 {
    margin: 6px 0 0;
    color: #64748b;
    font-size: 0.95rem;
  }

  .radio-buttons.svelte-1eqlqe6 {
    display: flex;
    align-items: center;
    gap: 20px;
    margin: 6px 0 16px;
    padding: 10px 12px;
    background: #f8faff;
    border: 1px solid #e5ebf6;
    border-radius: 10px;
  }

  .radio-label.svelte-1eqlqe6 {
    margin: 0;
    color: #334155;
    font-size: 0.92rem;
    font-weight: 600;
  }

  .radio-input.svelte-1eqlqe6 {
    margin-right: 6px;
    accent-color: #3f7cff;
  }

  .date-time-picker.svelte-1eqlqe6 {
    display: flex;
    flex-direction: column;
    margin-bottom: 14px;
    gap: 6px;
  }

  label.svelte-1eqlqe6 {
    font-size: 0.88rem;
    color: #334155;
    font-weight: 600;
  }

  .datetime-input.svelte-1eqlqe6 {
    width: 100%;
    padding: 10px 12px;
    font-size: 0.95rem;
    border: 1px solid #d6deeb;
    border-radius: 10px;
    height: 42px;
    outline: none;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
    box-sizing: border-box;
  }

  .datetime-input.svelte-1eqlqe6:focus {
    border-color: #3f7cff;
    box-shadow: 0 0 0 3px rgba(63, 124, 255, 0.16);
  }

  .search-btn.svelte-1eqlqe6 {
    display: block;
    width: 100%;
    padding: 0 18px;
    font-size: 0.92rem;
    font-weight: bold;
    color: #fff;
    background-color: #3f7cff;
    border: none;
    height: 42px;
    border-radius: 10px;
    cursor: pointer;
    transition: background-color 0.3s ease;
  }

  .search-btn.svelte-1eqlqe6:hover {
    background-color: #2f6ae6;
  }

  @media (max-width: 768px) {
    .search-page.svelte-1eqlqe6 {
      padding: calc(var(--app-header-height) + 16px) 12px 20px;
    }

    .search-card.svelte-1eqlqe6 {
      padding: 14px;
    }

    .radio-buttons.svelte-1eqlqe6 {
      gap: 12px;
      justify-content: space-between;
    }

    .search-btn.svelte-1eqlqe6 {
      font-size: 0.9rem;
    }
  }


  .modal.svelte-1f0smdo {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000; 
  }

  .modal-content.svelte-1f0smdo {
    background-color: #fefefe;
    padding: 20px;
    border-radius: 5px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    max-width: 80%;
    width: 500px; 
    max-height: 80%;
    overflow-y: auto;
    position: relative;
  }

  .close.svelte-1f0smdo {
    position: absolute;
    top: 10px;
    right: 10px;
    cursor: pointer;
    font-size: 1.5rem;
    color: #aaa;
  }

  h2.svelte-1f0smdo {
    margin-bottom: 10px;
  }

  form.svelte-1f0smdo {
    display: flex;
    flex-direction: column;
  }

  label.svelte-1f0smdo {
    margin-bottom: 10px;
  }

  input.svelte-1f0smdo,
  textarea.svelte-1f0smdo {
    width: 100%;
    padding: 8px;
    font-size: 1rem;
    border: 1px solid #ccc;
    border-radius: 4px;
  }

  button.svelte-1f0smdo {
    margin-top: 10px;
    padding: 8px 16px;
    background-color: #007bff;
    color: #fff;
    border: none;
    border-radius: 4px;
    cursor: pointer;
  }

  button.svelte-1f0smdo:hover {
    background-color: #0056b3;
  }


  .modal.svelte-p3vzj0 {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .modal-content.svelte-p3vzj0 {
    background: white;
    padding: 20px;
    border-radius: 8px;
    max-width: 80%;
    width: 500px;
    text-align: center;
  }

  .buttons.svelte-p3vzj0 {
    display: flex;
    justify-content: space-around;
    margin-top: 20px;
  }

  button.svelte-p3vzj0 {
    padding: 10px 20px;
    cursor: pointer;
    border: none;
    border-radius: 5px;
  }

  .yes.svelte-p3vzj0 {
    text-align: center;

    cursor: pointer;
    background-color: #dddddd;
    transition: background-color 0.3s ease;
    color: black;
  }

  .yes.svelte-p3vzj0:hover {
    background-color: #ff3c82;
  }

  .no.svelte-p3vzj0 {
    text-align: center;

    cursor: pointer;
    background-color: #1e92ff;
    transition: background-color 0.3s ease;
    color: black;
  }

  .no.svelte-p3vzj0:hover {
    background-color: #004b91;
  }


  .profile-info.svelte-yuua0u {
    display: flex;
    align-items: center;
  }

  .profile-picture.svelte-yuua0u {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    margin-right: 10px;
  }

  .title.svelte-yuua0u {
    display: flex;
    justify-content: center;
    padding: 10px;
    box-shadow: 0 4px 8px rgba(135, 135, 135, 0.1);
  }

  .options-menu.svelte-yuua0u {
    position: absolute;
    bottom: 40px;
    left: 25px;
    background-color: white;
    border: 1px solid #ddd;
    border-radius: 5px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    z-index: 10;
  }

  .video-wrapper.svelte-yuua0u {
    position: relative; 
    width: 17%; 
    margin: 10px;
    text-align: left;
  }

  .title-span.svelte-yuua0u {
    margin-top: 5px;
    border-radius: 25%;
    padding: 5px;
    font-size: 1.4rem;
    font-weight: bold;
    color: #000000;
  }

  .content.svelte-yuua0u {
    position: relative;
    min-height: 100vh;
  }

  .video-container.svelte-yuua0u {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    padding: 20px; /* 50 */
    position: relative; 
  }

  /* .video-wrapper {
    width: 17%;
    margin: 10px;
    text-align: left;
  } */

  .video-card.svelte-yuua0u {
    position: relative;
    height: 350px;
    overflow: hidden;
    /* border-radius: 10px; */
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    cursor: pointer;
  }

  .video-card.svelte-yuua0u video:where(.svelte-yuua0u),
  .video-card.svelte-yuua0u img:where(.svelte-yuua0u) {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* border-radius: 10px; */
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
  }

  .bottom-content.svelte-yuua0u {
    padding: 10px;
    background: #f9f9f9;
    /* border-radius: 10px; */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    cursor: pointer;
  }

  .video-title.svelte-yuua0u {
    /* font-weight: bold; */
    color: #000000;
    margin-top: 10px;
  }

  .user-info.svelte-yuua0u {
    font-size: 0.9rem;
    color: #000000;
  }

  /* (unused) .tags-info {
    font-size: 0.6rem;
    color: #515151;
  }*/

  .time-info.svelte-yuua0u {
    font-size: 0.6rem;
    color: #515151;
    margin-top: 10px;
  }

  .more-options.svelte-yuua0u {
    color: blue;
    cursor: pointer;
    margin-right: 20px;
    font-size: 1rem;
  }

  .options-menu.svelte-yuua0u {
    position: absolute;
    bottom: 40px;
    left: 25px;
    background-color: white;
    border: 1px solid #ddd;
    border-radius: 5px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    z-index: 10;
  }

  .options-menu.svelte-yuua0u > div:where(.svelte-yuua0u) {
    padding: 10px;
    cursor: pointer;
  }

  /* .options-menu > div:hover {
    background-color: #6c6c6c;
  } */

  /* (unused) .close-button {
    text-align: center;
    padding: 5px;
    cursor: pointer;
    background-color: #ddd;
    transition: background-color 0.3s ease;
    color: black;
  }*/

  /* (unused) .close-button:hover {
    background-color: #ff0000;
  }*/

  .delete-button.svelte-yuua0u {
    text-align: center;
    padding: 5px;
    cursor: pointer;
    background-color: #ddd;
    transition: background-color 0.3s ease;
    color: black;
  }

  .delete-button.svelte-yuua0u:hover {
    background-color: #ff3c82;
  }

  .edit-button.svelte-yuua0u {
    text-align: center;
    padding: 5px;
    cursor: pointer;
    background-color: #ddd;
    transition: background-color 0.3s ease;
    color: black;
  }

  .edit-button.svelte-yuua0u:hover {
    background-color: #b683d4;
  }

  .spinner.svelte-yuua0u {
    position: absolute;
    bottom: 10px;
    left: 48%;
    transform: translateX(-50%);
    width: 30px;
    height: 30px;
    border-radius: 50%;
    border: 5px solid rgba(0, 0, 0, 0.1);
    border-top-color: #3498db;
    animation: svelte-yuua0u-spin 1s ease-in-out infinite;
  }

  .no-videos.svelte-yuua0u {
    text-align: center;
    font-size: 1rem;
    color: #000;
    margin-top: 150px;
    padding: 20px;
  }

  @keyframes svelte-yuua0u-spin {
    0% {
      transform: rotate(0deg);
    }
    100% {
      transform: rotate(360deg);
    }
  }

  @media (max-width: 767px) {
    .title.svelte-yuua0u {
      padding: 10px 20px;
    }

    .title-span.svelte-yuua0u {
      font-size: 1.2rem;
    }

    .video-container.svelte-yuua0u {
      padding: 20px;
    }

    .video-wrapper.svelte-yuua0u {
      width: 100%;
      margin: 10px 0;
      text-align: left;
    }

    .video-card.svelte-yuua0u {
      height: 65vh;
    }

    .bottom-content.svelte-yuua0u {
      padding: 10px;
      background: #f9f9f9;
      box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    }

    .spinner.svelte-yuua0u {
      left: 46%;
      width: 20px;
      height: 20px;
    }
  }

  @media screen and (min-width: 768px) {
    .video-container.svelte-yuua0u {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 20px;
      justify-content: center;
    }

    .video-wrapper.svelte-yuua0u {
      width: 100%;
      margin: 0;
    }

    .video-card.svelte-yuua0u {
      height: 350px;
    }

    .title.svelte-yuua0u {
      margin-top: 40px;
    }
  }

  @media screen and (min-width: 850px) {
    .title.svelte-yuua0u {
      margin-top: 5px;
    }
  }

  @media screen and (min-width: 850px) and (min-height: 1280px) {
    .title.svelte-yuua0u {
      margin-top: 55px;
    }
  }

  @media screen and (min-width: 1024px) and (max-width: 1024px) and (max-height: 600px) {
    .video-wrapper.svelte-yuua0u {
      width: 100%;
      margin: 0;
    }

    .video-card.svelte-yuua0u {
      height: 350px;
    }

    .title.svelte-yuua0u {
      margin-top: 5px;
    }
  }

  @media screen and (min-width: 1024px) and (min-height: 1300px) {
    .video-wrapper.svelte-yuua0u {
      width: 100%;
      margin: 0;
    }

    .video-card.svelte-yuua0u {
      height: 350px;
    }

    .title.svelte-yuua0u {
      margin-top: 60px;
    }
  }

  @media screen and (min-width: 1440px) {
    .video-wrapper.svelte-yuua0u {
      width: 100%;
      margin: 0;
    }

    .video-card.svelte-yuua0u {
      height: 450px;
    }

    .title.svelte-yuua0u {
      margin-top: 20px;
    }
  }


  .profile-info.svelte-f4vtso {
    display: flex;
    align-items: center;
    margin-bottom: 10px;
  }

  .profile-picture.svelte-f4vtso {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    margin-right: 10px;
  }

  /* (unused) .content {
    position: relative;
    min-height: 100vh;
  }*/

  /* (unused) .top-tags {
    padding: 20px;
    background: #f4f4f4;
    box-shadow: 0 4px 8px rgba(135, 135, 135, 0.1);
    margin-bottom: 20px;
  }*/

  /* (unused) .top-tags h2 {
    text-align: center;
    margin-bottom: 10px;
  }*/

  .tags-list.svelte-f4vtso {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
  }

  .tag-item.svelte-f4vtso {
    margin: 5px 10px;
    padding: 5px 5px;
    background: #ddd;
    border: 1px solid #e0e0e0;
    border-radius: 5px;
    font-size: 0.9rem;
    display: flex;
    align-items: center;
  }

  .tag-name.svelte-f4vtso {
    cursor: pointer;
    font-weight: bold;
  }

  /* (unused) .tag-count {
    font-size: 0.8rem;
    color: #666;
  }*/

  .title.svelte-f4vtso {
    position: relative;
    display: flex;
    justify-content: center;
    padding: 5px;
    box-shadow: 0 4px 8px rgba(135, 135, 135, 0.1);
  }

  .title-span.svelte-f4vtso {
    margin-top: 5px;
    border-radius: 25%;
    padding: 5px;
    font-size: 1.4rem;
    font-weight: bold;
    color: #000000;
  }

  .video-container.svelte-f4vtso {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    padding: 50px;
    max-width: 2000px;
    margin: 0 auto;
    position: relative;
  }

  .video-wrapper.svelte-f4vtso {
    width: 100%;
    margin: 10px;
    text-align: left;
  }

  .video-card.svelte-f4vtso {
    position: relative;
    height: 350px;
    overflow: hidden;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    cursor: pointer;
  }

  .video-card.svelte-f4vtso video:where(.svelte-f4vtso),
  .video-card.svelte-f4vtso img:where(.svelte-f4vtso) {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    background-color: #000;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
  }

  .bottom-content.svelte-f4vtso {
    padding: 10px;
    background: #f9f9f9;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    cursor: pointer;
  }

  .video-title.svelte-f4vtso {
    /* font-weight: bold; */
    color: #000000;
    margin-top: 10px;
  }

  /* (unused) .rotate-90 {
    transform: rotate(90deg);
  }*/

  .user-info.svelte-f4vtso {
    font-size: 0.9rem;
    color: #000000;
  }

  /* (unused) .tags-info {
    font-size: 0.6rem;
    color: #515151;
  }*/

  .time-info.svelte-f4vtso {
    font-size: 0.6rem;
    color: #515151;
    margin-top: 10px;
  }

  /* (unused) .spinner {
    position: absolute;
    bottom: 10px;
    left: 48%;
    transform: translateX(-50%);
    width: 30px;
    height: 30px;
    border-radius: 50%;
    border: 5px solid rgba(0, 0, 0, 0.1);
    border-top-color: #3498db;
    animation: spin 1s ease-in-out infinite;
  }*/

  @keyframes svelte-f4vtso-spin {
    0% {
      transform: rotate(0deg);
    }
    100% {
      transform: rotate(360deg);
    }
  }

  /* @media only screen and (width: 820px) {
    .title {
      margin-top: 50px;
    }
  }

  @media only screen and (width: 1024px) {
    .title {
      margin-top: 60px;
    }
  }

  @media only screen and (width: 1978px) {
    .title {
      margin-top: 60px;
    }
  }

  @media only screen and (width: 540px) {
    .title {
      margin-top: 5px;
    }
  } */

  @media (max-width: 767px) {
    .title.svelte-f4vtso {
      padding: 10px 20px;
    }

    .title-span.svelte-f4vtso {
      font-size: 1.2rem;
    }

    .video-container.svelte-f4vtso {
      padding: 20px;
    }

    .video-wrapper.svelte-f4vtso {
      width: 100%;
      margin: 10px 0;
      text-align: left;
    }

    .video-card.svelte-f4vtso {
      height: 65vh;
    }

    .bottom-content.svelte-f4vtso {
      padding: 10px;
      background: #f9f9f9;
      box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
      cursor: pointer;
    }

    /* (unused) .spinner {
      position: absolute;
      bottom: 10px;
      left: 46%;
      transform: translateX(-50%);
      width: 20px;
      height: 20px;
      border-radius: 50%;
      border: 5px solid rgba(0, 0, 0, 0.1);
      border-top-color: #3498db;
      animation: spin 1s ease-in-out infinite;
    }*/

    .tag-item.svelte-f4vtso {
      margin: 2px 2px;
      padding: 2px 2px;
      background: #ddd;
      border: 1px solid #e0e0e0;
      font-size: 0.4rem;
    }

    .tag-name.svelte-f4vtso {
      font-weight: bold;
    }
  }

  @media screen and (min-width: 768px) {
    .video-container.svelte-f4vtso {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 20px;
      justify-content: center;
      padding: 20px;
    }

    .video-wrapper.svelte-f4vtso {
      width: 100%;
      margin: 0;
    }

    .video-card.svelte-f4vtso {
      height: 350px;
    }

    .title.svelte-f4vtso {
      margin-top: 40px;
    }
  }

  @media screen and (min-width: 850px) {
    .title.svelte-f4vtso {
      margin-top: 5px;
    }
  }

  @media screen and (min-width: 850px) and (min-height: 1280px) {
    .title.svelte-f4vtso {
      margin-top: 55px;
    }
  }

  @media screen and (min-width: 1024px) and (max-width: 1024px) and (max-height: 600px) {
    .video-container.svelte-f4vtso {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 20px;
      justify-content: center;
      padding: 20px;
    }

    .video-wrapper.svelte-f4vtso {
      width: 100%;
      margin: 0;
    }

    .video-card.svelte-f4vtso {
      height: 350px;
    }

    .title.svelte-f4vtso {
      margin-top: 5px;
    }
  }

  @media screen and (min-width: 1024px) and (min-height: 1300px) {
    .video-container.svelte-f4vtso {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 20px;
      justify-content: center;
      padding: 20px;
    }

    .video-wrapper.svelte-f4vtso {
      width: 100%;
      margin: 0;
    }

    .video-card.svelte-f4vtso {
      height: 350px;
    }

    .title.svelte-f4vtso {
      margin-top: 60px;
    }
  }

  @media screen and (min-width: 1440px) {
    .video-container.svelte-f4vtso {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 20px;
      justify-content: center;
      padding: 20px;
    }

    .video-wrapper.svelte-f4vtso {
      width: 100%;
      margin: 0;
    }

    .video-card.svelte-f4vtso {
      height: 450px;
    }

    .title.svelte-f4vtso {
      margin-top: 20px;
    }
  }


  footer.svelte-1sr6y3t {
    background: #f8f9fa;
    color: #333;
    padding: 4rem 5% 2rem;
    width: 100%;
    font-family:
      system-ui,
      -apple-system,
      BlinkMacSystemFont,
      "Segoe UI",
      Roboto,
      sans-serif;
  }

  /* Main Footer Content */
  .footer-container.svelte-1sr6y3t {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1fr;
    gap: 4rem;
    max-width: 1200px;
    margin: 0 auto;
  }

  /* Branding / Logo Section */
  .branding.svelte-1sr6y3t .logo:where(.svelte-1sr6y3t) img:where(.svelte-1sr6y3t) {
    width: 180px;
    height: auto;
  }

  .tagline.svelte-1sr6y3t {
    font-size: 1.05rem;
    line-height: 1.55;
    color: #555;
    margin: 1.25rem 0 2rem 0;
    max-width: 280px;
  }

  .social-icons.svelte-1sr6y3t {
    display: flex;
    gap: 18px;
  }

  .social-icons.svelte-1sr6y3t img:where(.svelte-1sr6y3t) {
    width: 24px;
    height: 24px;
    opacity: 0.75;
    transition: opacity 0.3s;
  }

  .social-icons.svelte-1sr6y3t img:where(.svelte-1sr6y3t):hover {
    opacity: 1;
  }

  /* Footer Columns */
  .footer-column.svelte-1sr6y3t {
    display: flex;
    flex-direction: column;
    gap: 14px;
  }

  .column-title.svelte-1sr6y3t {
    font-size: 0.95rem;
    font-weight: 700;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    margin-bottom: 8px;
    color: #111;
  }

  .footer-column.svelte-1sr6y3t a:where(.svelte-1sr6y3t) {
    text-decoration: none;
    color: #666;
    font-size: 1.02rem;
    transition: color 0.3s ease;
  }

  .footer-column.svelte-1sr6y3t a:where(.svelte-1sr6y3t):hover {
    color: #3f7cff;
  }

  /* Bottom Bar */
  .footer-bottom.svelte-1sr6y3t {
    border-top: 1px solid #e5e7eb;
    margin-top: 4rem;
    padding-top: 2rem;
  }

  .bottom-content.svelte-1sr6y3t {
    display: flex;
    justify-content: space-between;
    align-items: center;
    max-width: 1200px;
    margin: 0 auto;
    font-size: 0.95rem;
    color: #777;
  }

  /* Responsive */
  @media (max-width: 1024px) {
    .footer-container.svelte-1sr6y3t {
      grid-template-columns: 2fr 1fr 1fr;
    }
  }

  @media (max-width: 768px) {
    .footer-container.svelte-1sr6y3t {
      grid-template-columns: 1fr 1fr;
      gap: 2.5rem;
    }

    .branding.svelte-1sr6y3t {
      grid-column: 1 / -1;
    }
  }

  @media (max-width: 480px) {
    .footer-container.svelte-1sr6y3t {
      grid-template-columns: 1fr;
    }

    .bottom-content.svelte-1sr6y3t {
      flex-direction: row;
      gap: 0.5rem;
      text-align: center;
      justify-content: center;
      font-size: 0.7rem;
    }
  }


  header.svelte-eveooa {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 72px;
    background: white;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
    z-index: 1000;
    display: flex;
    align-items: center;
  }

  .header-inner.svelte-eveooa {
    width: 100%;
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 2rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  /* Logo */
  .logo-img.svelte-eveooa {
    width: 170px;
    height: auto;
  }

  /* Desktop Menu */
  .center-menu.desktop-menu.svelte-eveooa {
    display: flex;
    gap: 32px;
  }

  .center-menu.svelte-eveooa a:where(.svelte-eveooa) {
    text-decoration: none;
    color: #737373;
    font-size: 1.02rem;
    font-weight: 500;
    transition: color 0.2s ease;
  }

  .center-menu.svelte-eveooa a:where(.svelte-eveooa):hover,
  .center-menu.svelte-eveooa a.active:where(.svelte-eveooa) {
    color: #3F7CFF;
    text-decoration: underline;
    text-underline-offset: 6px;
    text-decoration-thickness: 2px;
  }

  /* Action Button & Hamburger */
  .action-btn.svelte-eveooa {
    width: 138px;
    height: 42px;
    background-color: #3F7CFF;
    color: white;
    border: none;
    border-radius: 12px;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
  }

  .action-btn.svelte-eveooa:hover {
    background-color: #2f6ae6;
  }

  .hamburger.svelte-eveooa {
    background: none;
    border: none;
    cursor: pointer;
    padding: 8px;
    display: none;
  }

  .hamburger-icon.svelte-eveooa {
    width: 28px;
    height: 28px;
  }

  /* Mobile Drawer */
  .mobile-menu-overlay.svelte-eveooa {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    background: rgba(0, 0, 0, 0.4);
    z-index: 999;
    display: flex;
    justify-content: flex-end;
  }

  .mobile-menu.drawer.svelte-eveooa {
    background: white;
    width: 280px;           /* Fixed reasonable width */
    height: 100vh;
    padding: 5rem 2rem 2rem;
    box-shadow: -4px 0 20px rgba(0, 0, 0, 0.15);
    transform: translateX(100%);
    transition: transform 0.35s cubic-bezier(0.32, 0.72, 0, 1);
    overflow-y: auto;
  }

  .mobile-menu.drawer.svelte-eveooa {
    transform: translateX(0);   /* Slide in when open */
  }

  .mobile-nav.svelte-eveooa {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
  }

  .mobile-nav.svelte-eveooa a:where(.svelte-eveooa) {
    text-decoration: none;
    color: #333;
    font-size: 1.15rem;
    font-weight: 500;
    padding: 12px 0;
    border-bottom: 1px solid #f1f1f1;
  }

  .mobile-nav.svelte-eveooa a:where(.svelte-eveooa):last-child {
    border-bottom: none;
  }

  .mobile-nav.svelte-eveooa a.active:where(.svelte-eveooa) {
    color: #3F7CFF;
    font-weight: 600;
  }

  /* Responsive */
  @media (max-width: 870px) {
    .center-menu.desktop-menu.svelte-eveooa {
      display: none;
    }
    .hamburger.svelte-eveooa {
      display: block;
    }
  }

  @media (max-width: 480px) {
    .logo-img.svelte-eveooa {
      width: 145px;
    }
    .mobile-menu.drawer.svelte-eveooa {
      width: 260px;
    }

     /* Action Button & Hamburger */
    .action-items.svelte-eveooa {
      display: flex;
      flex-direction: row;
    }

    .action-btn.svelte-eveooa {
      width: 118px;
      height: 40px;
      font-size: 0.9rem;
      font-weight: 500;
      cursor: pointer;
    }

    .hamburger-icon.svelte-eveooa {
      width: 18px;
      height: 12px;
    }
  }


  .svelte-1w14fny {
    box-sizing: border-box;
  }

  .hero.svelte-1w14fny {
    display: flex;
    align-items: center;
    justify-content: center;
    padding-top: 7rem /* 112px */;
    padding-bottom: 7rem /* 112px */;
    padding-left: 7.5rem /* 120px */;
    padding-right: 0px;
    background-color: #fdfbff;
    flex-wrap: wrap;
  }

  .text-content.svelte-1w14fny {
    flex: 1;
    max-width: 100%;
    padding: 1rem;
    max-width: 520px;
  }

  .text-content.svelte-1w14fny h1:where(.svelte-1w14fny) {
    font-size: 2rem;
    font-weight: bold;
    color: #1a1a1a;
  }

  .text-content.svelte-1w14fny p:where(.svelte-1w14fny) {
    font-size: 1.2rem;
    margin-top: 1rem;
    color: #555;
  }

  .image-content.svelte-1w14fny {
    flex: 1;
    max-width: 100%;
    display: flex;
    justify-content: center;
  }

  .image-content.svelte-1w14fny img:where(.svelte-1w14fny) {
    width: 100%;
    max-width: 550px;
    border-top-right-radius: 15px;
    border-bottom-right-radius: 15px;
  }

  .hero-st-container.svelte-1w14fny {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding-top: 4px;
    padding-bottom: 4px;
    padding-right: 24px;
    border-radius: 9999px;
    background-color: #d7e2ff;
    width: auto;
    height: 40px;
  }

  .hero-st-container.svelte-1w14fny li:where(.svelte-1w14fny) {
    width: 8;
    height: 8;
    color: #3f7cff;
  }

  .hero-st-container.svelte-1w14fny li:where(.svelte-1w14fny) p:where(.svelte-1w14fny) {
    font-weight: 700;
    font-style: thin;
    font-size: 12px;
    line-height: 16px;
    letter-spacing: 1.2px;
    vertical-align: middle;
    text-transform: uppercase;
    color: #001a40;
  }

  .hero-title.svelte-1w14fny {
    font-size: 72px !important;
    font-weight: 600 !important;
    line-height: 72px;
    letter-spacing: -1.8px;
    vertical-align: middle;
    margin-top: 24px;
    padding-right: 50px;
    color: #1a1b1e;
    max-width: 520px;
  }

  .hero-title.svelte-1w14fny span:where(.svelte-1w14fny) {
    color: #3f7cff;
  }

  .hero-description.svelte-1w14fny {
    font-size: 20px;
    margin-top: 16px;
    font-weight: 300;
    font-style: light;
    line-height: 32.5px;
    letter-spacing: 0px;
    vertical-align: middle;
    color: #44474F;
    max-width: 520px;
  }

  .hero-actions.svelte-1w14fny {
    display: flex;
    gap: 16px;
    margin-top: 24px;
  }

  .primary-btn.svelte-1w14fny {
    background-color: #3f7cff;
    color: #fff;
    border: none;
    padding: 12px 24px;
    border-radius: 12px;
    font-size: 16px;
    cursor: pointer;
  }

  .secondary-btn.svelte-1w14fny {
    background-color: #e5e7eb;
    color: #111827;
    border: none;
    padding: 12px 24px;
    border-radius: 12px;
    font-size: 16px;
    cursor: pointer;
  }

  /* ============== BUILT FOR MODERN TRUTH ============== */
  .built-for-modern-truth.svelte-1w14fny {
    padding: 5rem 2rem 6rem 2rem;
    background-color: #ffffff;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  }

  .container.svelte-1w14fny {
    max-width: 1100px;
    margin: 0 auto;
  }

  /* Header */
  .header.svelte-1w14fny {
    margin-bottom: 4.5rem;
    position: relative;
  }

  .main-heading.svelte-1w14fny {
    font-size: 3.2rem;
    font-weight: 700;
    line-height: 1.05;
    letter-spacing: -1.5px;
    color: #111827;
    margin: 0 0 1.25rem 0;
  }

  .subheading.svelte-1w14fny {
    font-size: 1.25rem;
    line-height: 1.65;
    color: #4b5563;
    max-width: 620px;
    margin: 0;
  }

  .solutions-label.svelte-1w14fny {
    position: absolute;
    top: 10px;
    right: 0;
    display: flex;
    align-items: center;
    gap: 12px;
    color: #9ca3af;
    font-size: 0.95rem;
    font-weight: 500;
    letter-spacing: 1.5px;
    text-transform: uppercase;
  }

  .line.svelte-1w14fny {
    width: 60px;
    height: 1px;
    background: #d1d5db;
  }

  /* Solutions Grid */
  .solutions-grid.svelte-1w14fny {
    display: flex;
    flex-direction: column;
    gap: 2.25rem;
  }

  .solution-item.svelte-1w14fny {
    display: flex;
    align-items: flex-start;
    gap: 2rem;
    padding-bottom: 2.25rem;
    border-bottom: 1px solid #f3f4f6;
  }

  .solution-item.svelte-1w14fny:last-child {
    border-bottom: none;
    padding-bottom: 0;
  }

  .number.svelte-1w14fny {
    font-size: 3.5rem;
    font-weight: 300;
    color: #e5e7eb;
    line-height: 1;
    min-width: 60px;
    flex-shrink: 0;
  }

  .content.svelte-1w14fny {
    flex: 1;
  }

  .solution-title.svelte-1w14fny {
    font-size: 1.55rem;
    font-weight: 600;
    color: #1f2937;
    margin: 0 0 0.75rem 0;
  }

  .solution-desc.svelte-1w14fny {
    font-size: 1.05rem;
    line-height: 1.65;
    color: #4b5563;
    margin: 0;
  }

  .icon-wrapper.svelte-1w14fny {
    width: 52px;
    height: 52px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    margin-top: 8px;
  }

  .solution-icon.svelte-1w14fny {
    width: 32px;
    height: 32px;
    opacity: 0.85;
  }

  /* ====== CRYPTOGRAPHIC CERTAINTY BLUE CONTAINER ====== */
  .crypto-shield-container.svelte-1w14fny {
    background: #3F7CFF;
    border-radius: 20px;
    padding: 3.5rem 3rem 3.5rem 3rem;
    color: white;
    margin-top: 4rem;
    position: relative;
    overflow: hidden;
    max-width: 1100px;
    margin-left: auto;
    margin-right: auto;
  }

  .crypto-content.svelte-1w14fny {
    display: flex;
    flex-direction: column;
    grid-template-columns: 1fr 380px;
    gap: 4rem;
    align-items: start;
  }

  .crypto-shield-content-row.svelte-1w14fny {
    display: flex;
    flex-direction: row;
    gap: 20px;
  }

  /* Shield Header */
  .shield-header.svelte-1w14fny {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 1.5rem;
  }

  .shield-icon.svelte-1w14fny {
    width: 20px;
    height: 25px;
  }

  .shield-text.svelte-1w14fny {
    font-size: 0.95rem;
    font-weight: 600;
    letter-spacing: 1px;
    text-transform: uppercase;
    opacity: 0.95;
  }

  /* Main Text */
  .crypto-title.svelte-1w14fny {
    font-size: 2.85rem;
    font-weight: 800;
    line-height: 1.1;
    letter-spacing: -1.2px;
    margin: 0 0 1.25rem 0;
  }

  .crypto-desc.svelte-1w14fny {
    font-size: 1rem;
    font-weight: 500;
    line-height: 1.65;
    max-width: 520px;
    margin-bottom: 2.5rem;
    opacity: 0.95;
  }

  .demo-btn.svelte-1w14fny {
    background: white;
    color: #3F7CFF;
    border: none;
    padding: 14px 28px;
    border-radius: 12px;
    font-size: 1.05rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
  }

  .demo-btn.svelte-1w14fny:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(0,0,0,0.15);
  }

  /* Info Panel */
  .info-panel.svelte-1w14fny {
    background: rgba(255,255,255,0.12);
    border-radius: 16px;
    padding: 1.75rem;
    backdrop-filter: blur(10px);
  }

  .info-row.svelte-1w14fny {
    display: flex;
    justify-content: space-between;
    padding: 14px 0;
    border-bottom: 1px solid rgba(255,255,255,0.15);
  }

  .info-row.svelte-1w14fny:last-of-type {
    border-bottom: none;
  }

  .info-label.svelte-1w14fny {
    font-size: 0.9rem;
    font-weight: 500;
    opacity: 0.85;
    text-transform: uppercase;
    letter-spacing: 0.5px;
  }

  .info-value.svelte-1w14fny {
    font-size: 1rem;
    font-weight: 600;
  }

  .info-value.verified.svelte-1w14fny {
    color: #4ade80;
    font-weight: 700;
  }

  .hash-block.svelte-1w14fny {
    margin-top: 1.25rem;
    font-family: ui-monospace, monospace;
    font-size: 0.82rem;
    line-height: 1.5;
    opacity: 0.9;
    word-break: break-all;
  }

  @keyframes svelte-1w14fny-scroll {
    from {
      transform: translateX(0);
    }
    to {
      transform: translateX(-50%);
    }
  }

  @keyframes svelte-1w14fny-fadeIn {
    from {
      opacity: 0;
      transform: translateY(-20px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

  .precision-security-architecture.svelte-1w14fny {
    padding: 4.25rem 0;
    background-color: #F6F3F8;
    text-align: start;
    width: 100%;
    margin: 0 auto;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  }

  .section-header.svelte-1w14fny {
    max-width: 1100px;
    margin: 0 auto 1.25rem auto;
    padding: 0 2rem;
  }

  .core-label.svelte-1w14fny {
    display: inline-block;
    color: #3F7CFF;
    font-size: 0.875rem;
    font-weight: 100;
    letter-spacing: 2.4px;
    text-transform: uppercase;
    margin-bottom: 0.5rem;
  }

  .main-title.svelte-1w14fny {
    font-size: 2.25rem;
    font-weight: 100;
    letter-spacing: -0.9px;
    vertical-align: middle;
    color: #1A1B1E;
    margin: 0;
    line-height: 40px;
  }

  /* Cards Grid */
  .cards-grid.svelte-1w14fny {
    display: grid;
    grid-template-columns: repeat(20, minmax(0, 1fr));
    gap: 1.25rem;
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 2rem;
    align-items: stretch;
  }

  /* User Authentication 65% / Media Integrity 35% */
  .auth-card.svelte-1w14fny {
    grid-column: 1 / span 13;
  }

  .media-card.svelte-1w14fny {
    grid-column: 14 / span 7;
  }

  /* Controlled Media Access 35% / Location Verification 65% */
  .access-card.svelte-1w14fny {
    grid-column: 1 / span 7;
  }

  .location-card.svelte-1w14fny {
    grid-column: 8 / span 13;
  }

  /* Base Card Styles */
  .precision-security-architecture.svelte-1w14fny .card:where(.svelte-1w14fny) {
    background: #ffffff;
    border-radius: 16px;
    padding: 1.25rem;
    position: relative;
    overflow: hidden;
    box-shadow: 0 10px 28px rgba(17, 24, 39, 0.10);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    text-align: left;
    height: auto;
    display: flex;
    flex-direction: column;
  }

  .precision-security-architecture.svelte-1w14fny .card:where(.svelte-1w14fny):hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
  }

  .precision-security-architecture.svelte-1w14fny .card-content:where(.svelte-1w14fny) {
    flex: 1;
    z-index: 2;
    position: relative;
  }

  .precision-security-architecture.svelte-1w14fny .card-title:where(.svelte-1w14fny) {
    font-size: 0.95rem;
    font-weight: 700;
    font-style: thin;
    color: #1A1B1E;
    margin: 0.75rem 0 0.35rem 0;
    line-height: 1.2;
  }

  .precision-security-architecture.svelte-1w14fny .card-desc:where(.svelte-1w14fny) {
    color: #44474F;
    font-size: 0.78rem;
    font-weight: 400;
    line-height: 1.45;
    margin: 0;
    padding: 0;
  }
   
  /* User Authentication Card */
  .auth-card.svelte-1w14fny {
    position: relative;
    overflow: hidden;
    background: #ffffff;
    border: 1px solid #e5e7eb;
    height: 230px;
    align-self: start;
    padding: 1.5rem 2rem;
  }

  .auth-card.svelte-1w14fny .icon:where(.svelte-1w14fny) {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
  }

  .auth-card.svelte-1w14fny .card-title:where(.svelte-1w14fny) {
    margin-top: 1.25rem;
    font-size: 0.95rem;
    font-weight: 700;
  }

  .auth-card.svelte-1w14fny .card-content:where(.svelte-1w14fny){
    text-align: start;
  }

  .hash-status.svelte-1w14fny {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    margin-top: 1.25rem;
    margin-left: 0;
  }

  .hash.svelte-1w14fny {
    background: #f3f4f6;
    color: #6b7280;
    font-size: 0.8rem;
    padding: 6px 14px;
    border-radius: 9999px;
    font-family: ui-monospace, monospace;
    letter-spacing: 0.5px;
  }

  .status.svelte-1w14fny {
    background: #dbeafe;
    color: #1e40af;
    font-size: 0.8rem;
    font-weight: 600;
    padding: 6px 14px;
    border-radius: 9999px;
    letter-spacing: 0.3px;
  }

  .shield-bg.svelte-1w14fny {
    position: absolute;
    bottom: -10px;        
    right: -18px;         
    width: 120px;         
    height: 150px;
    opacity: 1;        
    z-index: 1;        
    pointer-events: none; 
  }

  .shield-bg.svelte-1w14fny img:where(.svelte-1w14fny) {
    width: 100%;
    height: 100%;
    object-fit: contain;
    filter: grayscale(100%) brightness(0.8); 
  }

  /* Media Integrity Card */
  .media-card.svelte-1w14fny {
    background: #ffffff;
    
  }

  .media-card.svelte-1w14fny {
    background-color: #3F7CFF !important;
    color: white;
    position: relative !important;
    overflow: hidden !important;
    border: 1px solid #3F7CFF;
    height: 310px;
    align-self: start;
  }

  .media-card.svelte-1w14fny .icon:where(.svelte-1w14fny) {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
  }

  .media-card.svelte-1w14fny .card-title:where(.svelte-1w14fny) {
    margin-top: 0.75rem;
    font-size: 0.95rem;
    font-weight: 700;

  }

  .media-card.svelte-1w14fny .card-content:where(.svelte-1w14fny){
    text-align: start;
  }

  .media-card.svelte-1w14fny hr:where(.svelte-1w14fny){
    color: #ffffff;
    width: 100%;
    margin-top: 0.9rem;
    margin-bottom: 0.9rem;
    opacity: 0.35;
  }

  .real-time-row.svelte-1w14fny{
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: auto;   
    padding-left: 0;
    width: fit-content;
  }

  .real-time.svelte-1w14fny {
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.15);
    padding: 8px 12px;
    border-radius: 9999px;
    width: 32px;
    height: 32px;
    flex-shrink: 0;
  }

  .real-time.svelte-1w14fny img:where(.svelte-1w14fny) {
    width: 15px;
    height: 15px;
    object-fit: contain;
  }

  .real-time-row.svelte-1w14fny p:where(.svelte-1w14fny) {
    margin: 0;
    font-size: 0.78rem;
    font-weight: 500;
    color: white;
    line-height: 1.2;
  }

  /* Controlled Media Card */
  .access-card.svelte-1w14fny {
    position: relative;
    overflow: hidden;
    background-color: #E4E2E7 !important;
    border: 1px solid #E4E2E7;
    min-height: 190px;
    height: auto;
  }

  .access-card.svelte-1w14fny .card-content:where(.svelte-1w14fny) .icon:where(.svelte-1w14fny) {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
    background-color: #E4E2E7;
  }

  .access-card.svelte-1w14fny .card-title:where(.svelte-1w14fny) {
    margin-top: 0.75rem;
    font-weight: 700;
    font-size: 0.95rem;
  }

  .access-card.svelte-1w14fny .card-content:where(.svelte-1w14fny){
    text-align: start;
  }

  /* Location Verification Card */
  .location-card.svelte-1w14fny {
    position: relative;
    overflow: hidden;
    display: flex !important;
    flex-direction: row !important;
    align-items: center;
    justify-content: space-between;
    background-color: #ffffff;
    border: 1px solid #e5e7eb;
    min-height: 190px;
    height: auto;
    gap: 1rem;
  }

  .location-card.svelte-1w14fny .card-title:where(.svelte-1w14fny) {
    margin-top: 0;
    font-weight: 700;
    font-size: 0.95rem;

  }

  .location-card.svelte-1w14fny .card-desc:where(.svelte-1w14fny){
    font-weight: 400;
  }

  .location-card.svelte-1w14fny .card-content:where(.svelte-1w14fny){
    text-align: start;
  }

  .location-card.svelte-1w14fny .map-visual:where(.svelte-1w14fny){
    width: 192px;
    height: 128px;
    border-radius: 12px;
    margin-top: 0;
    flex-shrink: 0;
  }

  .map.svelte-1w14fny {
    border-radius: 12px;
  }

  .location-card.svelte-1w14fny .explore-link:where(.svelte-1w14fny){
    padding-left: 0;
    font-weight: 700;
    font-size: 0.8rem;
    color: #3F7CFF;
  }

  .media-card.svelte-1w14fny .card-title:where(.svelte-1w14fny),
  .media-card.svelte-1w14fny .card-desc:where(.svelte-1w14fny) {
    color: white;
  }

  .media-card.svelte-1w14fny .icon:where(.svelte-1w14fny) {
    width: 48px;
    height: 48px;
    background: rgba(255,255,255,0.2);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 26px;
    color: white;
  }

  .modal-overlay.svelte-1w14fny {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    background: rgba(0, 0, 0, 0.6);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10000;
  }

  .modal-content.svelte-1w14fny {
    background: white;
    border-radius: 20px;
    width: 100%;
    max-width: 480px;
    padding: 2.5rem;
    box-shadow: 0 20px 40px rgba(0,0,0,0.15);
  }

  .modal-title.svelte-1w14fny {
    font-size: 1.75rem;
    font-weight: 700;
    color: #1a1b1e;
    margin-bottom: 0.75rem;
    text-align: center;
  }

  .modal-title.svelte-1w14fny span:where(.svelte-1w14fny) {
    color: #3f7cff;
  }

  .modal-desc.svelte-1w14fny {
    font-size: 1.05rem;
    color: #555;
    text-align: center;
    margin-bottom: 2rem;
  }

  .input-group.svelte-1w14fny {
    margin-bottom: 1.25rem;
  }

  .input-group.svelte-1w14fny label:where(.svelte-1w14fny) {
    display: block;
    font-weight: 600;
    margin-bottom: 6px;
    color: #333;
  }

  .input-group.svelte-1w14fny input:where(.svelte-1w14fny) {
    width: 100%;
    padding: 14px 18px;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    font-size: 1rem;
  }

  .modal-buttons.svelte-1w14fny {
    display: flex;
    gap: 1rem;
    margin-top: 1.5rem;
  }

  .cancel-btn.svelte-1w14fny {
    flex: 1;
    padding: 14px;
    background: #f3f4f6;
    color: #333;
    border: none;
    border-radius: 12px;
    font-weight: 600;
    cursor: pointer;
  }

  .submit-btn.svelte-1w14fny {
    flex: 1;
    padding: 14px;
    background: #3F7CFF;
    color: white;
    border: none;
    border-radius: 12px;
    font-weight: 600;
    cursor: pointer;
  }

  @keyframes svelte-1w14fny-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.4; }
  }

  @media (max-width: 1024px) {
    .cards-grid.svelte-1w14fny {
      grid-template-columns: 1fr;
    }
    
    .media-card.svelte-1w14fny, .auth-card.svelte-1w14fny, .access-card.svelte-1w14fny, .location-card.svelte-1w14fny {
      height: auto;
    }

    .auth-card.svelte-1w14fny,
    .media-card.svelte-1w14fny,
    .access-card.svelte-1w14fny,
    .location-card.svelte-1w14fny {
      grid-column: 1 / -1;
    }

    .crypto-content.svelte-1w14fny {
      grid-template-columns: 1fr;
      gap: 3rem;
    }
    
    .info-panel.svelte-1w14fny {
      max-width: 420px;
    }
  }

  @media (max-width: 768px) {
    .hero.svelte-1w14fny {
      flex-direction: column;
      align-items: center;
      text-align: center;
      padding-right: 0;
      padding-left: 0;
      width: 90%;
    }

    .text-content.svelte-1w14fny h1:where(.svelte-1w14fny) {
      font-size: 1.8rem;
    }

    .precision-security-architecture.svelte-1w14fny {
      padding: 2.5rem 1rem;
    }
    
    .main-title.svelte-1w14fny {
      font-size: 2rem;
    }

    .image-content.svelte-1w14fny img:where(.svelte-1w14fny) {
      width: 100%;
      max-width: 550px;
      border-top-left-radius: 0;
      border-top-right-radius: 0;
      border-bottom-left-radius: 15px;
      border-bottom-right-radius: 15px;
    }

    .built-for-modern-truth.svelte-1w14fny {
      padding: 4rem 1.25rem 5rem 1.25rem;
    }
    
    .main-heading.svelte-1w14fny {
      font-size: 2.6rem;
    }
    
    .solution-item.svelte-1w14fny {
      gap: 1.5rem;
    }
    
    .number.svelte-1w14fny {
      font-size: 2.8rem;
      min-width: 50px;
    }

    .crypto-shield-container.svelte-1w14fny {
      padding: 2.75rem 1.75rem;
      margin-top: 3rem;
    }
    
    .crypto-title.svelte-1w14fny {
      font-size: 2.4rem;
    }
  }
 
  @media (max-width: 480px) {
    .hero.svelte-1w14fny {
      display: flex;
      align-items: start;
      justify-content: start;
      padding-top: 3rem;
      padding-bottom: 3rem;
      padding-left: 0.1rem;
      padding-right: 0.1rem;
      background-color: #FDFBFF;
      flex-wrap: wrap;
      width: 100% !important;
    }

    .text-content.svelte-1w14fny {
      flex: 1;
      max-width: 100%;
      padding: 00px;
      max-width: 440px;
    }

    .text-content.svelte-1w14fny p:where(.svelte-1w14fny) {
      margin-left: 0px;
      font-size: o.75rem;
      margin-top: 0.6rem;
      color: #555;
    }

    .hero-title.svelte-1w14fny {
      font-size: 48px !important;
      font-weight: 600 !important;
      line-height: 72px;
      letter-spacing: -1.2px;
      vertical-align: middle;
      margin-top: 24px;
      padding-left: 20px;
      padding-right: 50px;
      color: #1a1b1e;
      max-width: 520px;
      text-align: start;
    }

    .hero-description.svelte-1w14fny {
      font-size: 20px;
      margin-top: 16px;
      padding-left: 20px;
      padding-right: 20px;
      font-weight: 300;
      font-style: light;
      line-height: 32.5px;
      letter-spacing: 0px;
      vertical-align: middle;
      color: #44474F;
      max-width: 520px;
      text-align: left;
    }

    .image-content.svelte-1w14fny {
      display: none;
    }

    .hero-actions.svelte-1w14fny {
      display: flex;
      flex-direction: column;
      gap: 8px;
      margin-top: 24px;
      margin-left: 20px;
      margin-right: 20px;
    }

    .precision-security-architecture.svelte-1w14fny {
      padding: 1.2rem 0;
    }

    .section-header.svelte-1w14fny {
      max-width: 460px;
      margin: 0 auto 1 auto;
      padding: 0 1rem;
    }

    .info-panel.svelte-1w14fny {
      background: rgba(255,255,255,0.12);
      border-radius: 16px;
      padding: 1.25rem;
      backdrop-filter: blur(10px);
    }

    .hash-status.svelte-1w14fny {
      display: flex;
      flex-direction: row;
      gap: 12px;
      flex-wrap: wrap;
      margin-top: 1.25rem;
      margin-left: 0;
    }

    .hash.svelte-1w14fny {
      background: #f3f4f6;
      color: #6b7280;
      font-size: 0.5rem;
      padding: 6px 14px;
      border-radius: 9999px;
      font-family: ui-monospace, monospace;
      letter-spacing: 0.5px;
    }

    .status.svelte-1w14fny {
      background: #dbeafe;
      color: #1e40af;
      font-size: 0.5rem;
      font-weight: 600;
      padding: 6px 14px;
      border-radius: 9999px;
      letter-spacing: 0.3px;
    }

    .location-card.svelte-1w14fny .map-visual:where(.svelte-1w14fny){
      display: none;
    }

    .solutions-label.svelte-1w14fny {
      position: absolute;
      top: 10px;
      left: 80px;
      right: 0;
      display: flex;
      align-items: end;
      gap: 12px;
      color: #9ca3af;
      font-size: 0.95rem;
      font-weight: 500;
      letter-spacing: 1.5px;
      text-transform: uppercase;
    }

    .line.svelte-1w14fny {
      width: 60px;
      height: 1px;
      background: #d1d5db;
    }

    /* Solutions Grid */
    .solutions-grid.svelte-1w14fny {
      display: flex;
      flex-direction: column;
      gap: 2.25rem;
    }

    .solution-item.svelte-1w14fny {
      display: flex;
      align-items: flex-start;
      gap: 2rem;
      padding-bottom: 2.25rem;
      border-bottom: 1px solid #f3f4f6;
    }

    .solution-item.svelte-1w14fny:last-child {
      border-bottom: none;
      padding-bottom: 0;
    }

    .crypto-shield-content-row.svelte-1w14fny {
      display: flex;
      flex-direction: column;
      gap: 20px;
    }
    
    .text-content.svelte-1w14fny h1:where(.svelte-1w14fny) {
      font-size: 1.6rem;
    }
    
    .main-heading.svelte-1w14fny {
      font-size: 2.3rem;
    }
    
    .solutions-label.svelte-1w14fny {
      position: relative;
      top: auto;
      right: auto;
      margin-top: 2rem;
      justify-content: center;
    }

    .modal-content.svelte-1w14fny {
      padding: 2rem 1.5rem;
      margin: 1rem;
    }
  }

  @media (max-width: 390px) {
    .hero.svelte-1w14fny,
    .text-content.svelte-1w14fny {
      width: 100%;
      text-align: center;
    }

    .hero.svelte-1w14fny {
      width: 90%;
      text-align: center;
    }


    .image-content.svelte-1w14fny img:where(.svelte-1w14fny) {
      display: block;
      margin: auto;
      max-width: 100%;
      border-top-left-radius: 0;
      border-top-right-radius: 0;
      border-bottom-left-radius: 15px;
      border-bottom-right-radius: 15px;
    }
  }


  .privacy-policy.svelte-ixyb1b {
    max-width: 1060px;
    margin: 0 auto;
    padding: 2rem 5% 6rem;
    line-height: 1.7;
    font-size: 1.05rem;
  }

  h1.svelte-ixyb1b {
    font-size: 3.2rem;
    font-weight: 800;
    color: #1a1b1e;
    margin-top: 3rem;
    margin-bottom: 0.5rem;
  }

  .last-updated.svelte-ixyb1b {
    color: #64748b;
    font-size: 1rem;
    margin-bottom: 2rem;
  }

  h2.svelte-ixyb1b {
    font-size: 1.75rem;
    font-weight: 700;
    color: #1a1b1e;
    margin: 3rem 0 1rem;
  }

  h3.svelte-ixyb1b {
    font-size: 1.25rem;
    font-weight: 600;
    color: #3F7CFF;
    margin: 2rem 0 1rem;
  }

  .card.svelte-ixyb1b {
    background: #F8FAFC;
    border-radius: 16px;
    border: 1px solid #CBD5E133;
    padding: 1.75rem;
    margin-top: 1rem;
    margin-bottom: 1rem;
    box-shadow: 0 4px 15px rgba(0,0,0,0.05);
  }

  @media (max-width: 768px) {
    .privacy-policy.svelte-ixyb1b {
      padding: 1.5rem 5%;
    }
    h1.svelte-ixyb1b {
      font-size: 2.4rem;
    }
  }

  @media (max-width: 480px) {
    .privacy-policy.svelte-ixyb1b {
      padding: 1rem 5%;
    }
    h1.svelte-ixyb1b {
      font-size: 2.1rem;
    }
  }


  .security-policy.svelte-1mdmgxd {
    max-width: 1060px;
    margin: 0 auto;
    padding: 2rem 5% 6rem;
    line-height: 1.7;
    font-size: 1.05rem;
  }

  h1.svelte-1mdmgxd {
    font-size: 3.2rem;
    font-weight: 800;
    color: #1a1b1e;
    margin-top: 3rem;
    margin-bottom: 0.5rem;
  }

  .last-updated.svelte-1mdmgxd {
    color: #64748b;
    font-size: 1rem;
    margin-bottom: 2rem;
  }

  h2.svelte-1mdmgxd {
    font-size: 1.75rem;
    font-weight: 700;
    color: #1a1b1e;
    margin: 3rem 0 1rem;
  }

  h3.svelte-1mdmgxd {
    font-size: 1.25rem;
    font-weight: 600;
    color: #3F7CFF;
    margin: 2rem 0 1rem;
  }

  .infra-sec-no-card.svelte-1mdmgxd {
    padding-left: 8px;
    padding-right: 8px;
    padding-top: 16px;
    padding-bottom: 16px;
  }

  .card.svelte-1mdmgxd {
    background: #F8FAFC;
    border-radius: 16px;
    border: 1px solid #CBD5E133;
    padding: 1.75rem;
    margin-top: 1rem;
    margin-bottom: 1rem;
    box-shadow: 0 4px 15px rgba(0,0,0,0.05);
  }

  .card-two.svelte-1mdmgxd {
    background: #3F7CFF0D;
    border-radius: 16px;
    border: 1px solid #3F7CFF1A;
    padding: 1.75rem;
    margin-top: 1rem;
    margin-bottom: 1rem;
    box-shadow: 0 4px 15px rgba(0,0,0,0.05);
  }

  .card-three.svelte-1mdmgxd {
    background: #FFFFFF;
    border-radius: 12px;
    border: 1px solid #CBD5E133;
    padding-left: 1rem;
    padding-right: 1rem;
    padding-top: 0.3rem;
    padding-bottom: 0.3rem;
    box-shadow: 0 4px 15px rgba(0,0,0,0.05);
  }

  .card-row.svelte-1mdmgxd {
    display: flex;
    flex-direction: row;
    justify-content: start;
    gap: 10px;
  }

  .two-column.svelte-1mdmgxd {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
    margin: 1.5rem 0;
  }

  .card-icon-one.svelte-1mdmgxd {
    width: 18px;
    height: 19px;
    margin-bottom: 1rem;
  }

  .card-icon-two.svelte-1mdmgxd {
    width: 23px;
    height: 12px;
    margin-bottom: 1rem;
  }

  .card-icon-three.svelte-1mdmgxd {
    width: 22px;
    height: 19.8px;
    margin-bottom: 1rem;
  }

  .card-icon-four.svelte-1mdmgxd {
    width: 16px;
    height: 21px;
    margin-bottom: 1rem;
  }

  .trust-box.svelte-1mdmgxd {
    background: linear-gradient(90deg, #3F7CFF, #2563EB);
    color: white;
    border-radius: 20px;
    padding: 3rem 2.5rem;
    margin-top: 4rem;
    text-align: center;
  }

  .trust-box.svelte-1mdmgxd h3:where(.svelte-1mdmgxd) {
    font-size: 2rem;
    margin-bottom: 1rem;
    color: white;
  }

  .trust-buttons.svelte-1mdmgxd {
    display: flex;
    gap: 1rem;
    justify-content: center;
    margin-top: 2rem;
    flex-wrap: wrap;
  }

  .primary-btn.svelte-1mdmgxd, .secondary-btn.svelte-1mdmgxd {
    padding: 14px 32px;
    border-radius: 12px;
    font-weight: 600;
    cursor: pointer;
  }

  .primary-btn.svelte-1mdmgxd {
    background: white;
    color: #3F7CFF;
  }

  .secondary-btn.svelte-1mdmgxd {
    background: transparent;
    color: white;
    border: 2px solid white;
  }

  /* Responsive */
  @media (max-width: 768px) {
    .two-column.svelte-1mdmgxd {
      grid-template-columns: 1fr;
    }
    .trust-box.svelte-1mdmgxd {
      padding: 2.5rem 1.5rem;
    }
  }

  @media (max-width: 480px) {
    .security-policy.svelte-1mdmgxd {
      padding: 1.5rem 5%;
    }
    h1.svelte-1mdmgxd {
      font-size: 2.4rem;
    }
  }


  .terms-conditions.svelte-1pcz9r {
    max-width: 1060px;
    margin: 0 auto;
    padding: 2rem 5% 6rem;
    line-height: 1.7;
    font-size: 1.05rem;
  }

  h1.svelte-1pcz9r {
    font-size: 3.2rem;
    font-weight: 800;
    color: #1a1b1e;
    margin-top: 3rem;
    margin-bottom: 0.5rem;
  }

  .last-updated.svelte-1pcz9r {
    color: #64748b;
    font-size: 1rem;
    margin-bottom: 2rem;
  }

  h2.svelte-1pcz9r {
    font-size: 1.75rem;
    font-weight: 700;
    color: #1a1b1e;
    margin: 3rem 0 1rem;
  }

  /* (unused) h3 {
    font-size: 1.25rem;
    font-weight: 600;
    color: #3F7CFF;
    margin: 2rem 0 1rem;
  }*/

  .card.svelte-1pcz9r {
    background: #F8FAFC;
    border-radius: 16px;
    border: 1px solid #CBD5E133;
    padding: 1.75rem;
    margin-top: 1rem;
    margin-bottom: 1rem;
    box-shadow: 0 4px 15px rgba(0,0,0,0.05);
  }

  /* Responsive */
  @media (max-width: 768px) {
    .terms-conditions.svelte-1pcz9r {
      padding: 1.5rem 5%;
    }
    h1.svelte-1pcz9r {
      font-size: 2.4rem;
    }
  }

  @media (max-width: 480px) {
    .terms-conditions.svelte-1pcz9r {
      padding: 1rem 5%;
    }
    h1.svelte-1pcz9r {
      font-size: 2.1rem;
    }
  }


  .svelte-1pzs2v2 {
    box-sizing: border-box;
  }

  /* (unused) body {
    margin: 0;
    padding: 0;
    font-family: Arial, sans-serif;
    overflow-x: hidden;
  }*/

  h1.svelte-1pzs2v2 {
    font-size: 1.5em;
  }

  h3.svelte-1pzs2v2 {
    font-size: 1em;
  }

  .card-container.svelte-1pzs2v2 {
    display: flex;
    flex-direction: column;
    width: 90%;
    max-width: 1000px;
    margin: auto;
    padding: 1.5%;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    border-radius: 8px;
    background-color: #f9f9f9;
  }

  @media (min-width: 768px) {
    .card-container.svelte-1pzs2v2 {
      flex-direction: row;
    }

    .card-left.svelte-1pzs2v2 {
      padding-right: 20px;
      flex: 1;
    }

    .card-right.svelte-1pzs2v2 {
      flex: 1;
    }

    h1.svelte-1pzs2v2 {
      font-size: 2.5em;
    }

    h3.svelte-1pzs2v2 {
      font-size: 1.5em;
    }
  }

  .form-container.svelte-1pzs2v2 {
    background-color: #f0f0f0;
    padding: 15px;
    border-radius: 8px;
  }

  .contact-form.svelte-1pzs2v2 {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 5px;
  }

  .name-container.svelte-1pzs2v2 {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
  }

  .name-field.svelte-1pzs2v2 {
    flex: 1;
    min-width: 120px;
  }

  input.svelte-1pzs2v2,
  textarea.svelte-1pzs2v2,
  select.svelte-1pzs2v2 {
    width: 100%;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 4px;
    margin: 0;
  }

  label.svelte-1pzs2v2 {
    margin-bottom: 5px;
  }

  .button-submit.svelte-1pzs2v2,
  .button-support.svelte-1pzs2v2 {
    background-color: #4423ff;
    color: white;
    padding: 10px;
    border: none;
    cursor: pointer;
    margin-top: 10px;
  }

  .button-submit.svelte-1pzs2v2:hover,
  .button-support.svelte-1pzs2v2:hover {
    background-color: #1c00b9;
  }


  .svelte-899l0t {
    box-sizing: border-box;
  }

  /* (unused) body {
    margin: 0;
    padding: 0;
    font-family: Arial, sans-serif;
    overflow-x: hidden;
  }*/

  h1.svelte-899l0t {
    font-size: 1.5em;
  }

  h3.svelte-899l0t {
    font-size: 1em;
  }

  .card-container.svelte-899l0t {
    display: flex;
    flex-direction: column;
    width: 90%;
    max-width: 1000px;
    margin: auto;
    padding: 1.5%;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    border-radius: 8px;
    background-color: #f9f9f9;
  }

  @media (min-width: 768px) {
    .card-container.svelte-899l0t {
      flex-direction: row;
    }

    .card-left.svelte-899l0t {
      padding-right: 20px;
      flex: 1;
    }

    .card-right.svelte-899l0t {
      flex: 1;
    }

    h1.svelte-899l0t {
      font-size: 2.5em;
    }

    h3.svelte-899l0t {
      font-size: 1.5em;
    }
  }

  .form-container.svelte-899l0t {
    background-color: #f0f0f0;
    padding: 15px; 
    border-radius: 8px;
  }

  .contact-form.svelte-899l0t {
    display: flex;
    flex-direction: column;
    gap: 10px; 
    padding: 5px;
  }
  .name-container.svelte-899l0t {
    display: flex;
    flex-wrap: wrap; 
    gap: 10px; 
  }

  .name-field.svelte-899l0t {
    flex: 1;
    min-width: 120px; 
  }

  input.svelte-899l0t,
  textarea.svelte-899l0t /* (unused) select*/ {
    width: 100%;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 4px;
    margin: 0;
  }

  label.svelte-899l0t {
    margin-bottom: 5px;
  }

  .button-submit.svelte-899l0t /* (unused) .button-support*/ {
    background-color: #4423ff;
    color: white;
    padding: 10px;
    border: none;
    cursor: pointer;
    margin-top: 10px;
  }

  .button-submit.svelte-899l0t:hover /* (unused) .button-support:hover*/ {
    background-color: #1c00b9;
  }


  .title.svelte-1tra0j4 {
    position: relative;
    display: flex;
    justify-content: center;
    padding: 10px;
    box-shadow: 0 4px 8px rgba(135, 135, 135, 0.1);
  }

  .content.svelte-1tra0j4 {
    padding-top: 0;
  }

  .title-span.svelte-1tra0j4 {
    margin-top: 5px;
    padding: 5px;
    font-size: 1.4rem;
    font-weight: bold;
    color: #000000;
  }

  .subscriptions-card.svelte-1tra0j4 {
    background-color: #ffffff;
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    padding: 30px;
    margin: 20px auto;
    max-width: 600px;
  }

  .description.svelte-1tra0j4 {
    margin: 0 0 16px;
    color: #4b5563;
    font-size: 0.92rem;
    line-height: 1.5;
    text-align: center;
  }

  .subscription-list.svelte-1tra0j4 {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
  }

  .subscription-row.svelte-1tra0j4 {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    background: #f8f9fa;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    padding: 10px 12px;
  }

  .profile-cell.svelte-1tra0j4 {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
    flex: 1;
  }

  .profile-picture.svelte-1tra0j4 {
    width: 48px;
    height: 48px;
    object-fit: cover;
    border-radius: 50%;
    border: 2px solid #e5e7eb;
  }

  .username.svelte-1tra0j4 {
    font-size: 1rem;
    font-weight: bold;
    color: #1f2937;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .remove-button.svelte-1tra0j4 {
    background-color: #ef4444;
    color: white;
    border: none;
    padding: 8px 14px;
    border-radius: 8px;
    cursor: pointer;
    font-size: 0.9rem;
    font-weight: 500;
    transition: background-color 0.3s ease;
  }

  .remove-button.svelte-1tra0j4:hover {
    background-color: #dc2626;
  }

  .overlay.svelte-1tra0j4 {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 999;
  }

  .confirmation-modal.svelte-1tra0j4 {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 1000;
  }

  .modal-content.svelte-1tra0j4 {
    background: white;
    padding: 24px;
    border-radius: 10px;
    text-align: center;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    max-width: 360px;
    width: calc(100vw - 40px);
    box-sizing: border-box;
  }

  .modal-content.svelte-1tra0j4 p:where(.svelte-1tra0j4) {
    margin: 0;
    color: #111827;
    line-height: 1.5;
  }

  .modal-actions.svelte-1tra0j4 {
    display: flex;
    gap: 10px;
    margin-top: 16px;
  }

  .cancel-button.svelte-1tra0j4,
  .confirm-button.svelte-1tra0j4 {
    flex: 1;
    padding: 10px 14px;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    font-weight: 500;
  }

  .cancel-button.svelte-1tra0j4 {
    background-color: #6b7280;
    color: white;
  }

  .cancel-button.svelte-1tra0j4:hover {
    background-color: #4b5563;
  }

  .confirm-button.svelte-1tra0j4 {
    background-color: #ef4444;
    color: white;
  }

  .confirm-button.svelte-1tra0j4:hover {
    background-color: #dc2626;
  }

  .error.svelte-1tra0j4 {
    color: #ef4444;
    margin: 0 0 14px;
    text-align: center;
    font-size: 0.9rem;
  }

  .empty-state.svelte-1tra0j4 {
    text-align: center;
    color: #6b7280;
    margin: 0;
  }

  @media (max-width: 768px) {
    .content.svelte-1tra0j4 {
      padding-top: 0;
    }

    .title.svelte-1tra0j4 {
      padding: 10px 20px;
    }

    .title-span.svelte-1tra0j4 {
      font-size: 1.2rem;
    }

    .subscriptions-card.svelte-1tra0j4 {
      margin: 20px;
      padding: 20px;
      max-width: none;
    }

    .remove-button.svelte-1tra0j4 {
      padding: 6px 10px;
      font-size: 0.8rem;
      flex-shrink: 0;
    }

    .profile-picture.svelte-1tra0j4 {
      width: 40px;
      height: 40px;
    }

    .modal-content.svelte-1tra0j4 {
      padding: 20px;
    }

    .username.svelte-1tra0j4 {
      font-size: 0.9rem;
    }
  }

  @media screen and (min-width: 768px) {
    .title.svelte-1tra0j4 {
      margin-top: 40px;
    }
  }

  @media screen and (min-width: 850px) {
    .title.svelte-1tra0j4 {
      margin-top: 5px;
    }
  }

  @media screen and (min-width: 850px) and (min-height: 1280px) {
    .title.svelte-1tra0j4 {
      margin-top: 55px;
    }
  }

  @media screen and (min-width: 1024px) and (max-width: 1024px) and (max-height: 600px) {
    .title.svelte-1tra0j4 {
      margin-top: 5px;
    }
  }

  @media screen and (min-width: 1024px) and (min-height: 1300px) {
    .title.svelte-1tra0j4 {
      margin-top: 60px;
    }
  }

  @media screen and (min-width: 1440px) {
    .title.svelte-1tra0j4 {
      margin-top: 20px;
    }
  }


  .title.svelte-1nxr5jv {
    position: relative;
    display: flex;
    justify-content: center;
    padding: 10px;
    box-shadow: 0 4px 8px rgba(135, 135, 135, 0.1);
  }

  .content.svelte-1nxr5jv {
    padding-top: 0;
  }

  .title-span.svelte-1nxr5jv {
    margin-top: 5px;
    padding: 5px;
    font-size: 1.4rem;
    font-weight: bold;
    color: #000000;
  }

  .subscribers-card.svelte-1nxr5jv {
    background-color: #ffffff;
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    padding: 30px;
    margin: 20px auto;
    max-width: 500px;
  }

  .description.svelte-1nxr5jv {
    margin: 0 0 16px;
    color: #4b5563;
    font-size: 0.92rem;
    line-height: 1.5;
    text-align: center;
  }

  .subscriber-list.svelte-1nxr5jv {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
  }

  .subscriber-row.svelte-1nxr5jv {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    background: #f8f9fa;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    padding: 10px 12px;
  }

  .profile-picture.svelte-1nxr5jv {
    width: 48px;
    height: 48px;
    object-fit: cover;
    border-radius: 50%;
    border: 2px solid #e5e7eb;
  }

  .subscriber-details.svelte-1nxr5jv {
    min-width: 0;
    flex: 1;
  }

  .username.svelte-1nxr5jv {
    font-size: 1rem;
    font-weight: bold;
    color: #1f2937;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .error.svelte-1nxr5jv {
    color: #ef4444;
    text-align: center;
    margin: 0 0 14px;
    font-size: 0.9rem;
  }

  .remove-button.svelte-1nxr5jv {
    background-color: #ef4444;
    color: white;
    border: none;
    padding: 8px 14px;
    border-radius: 8px;
    cursor: pointer;
    font-size: 0.9rem;
    font-weight: 500;
    transition: background-color 0.3s ease;
    white-space: nowrap;
  }

  .remove-button.svelte-1nxr5jv:hover {
    background-color: #dc2626;
  }

  .overlay.svelte-1nxr5jv {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 999;
  }

  .confirmation-modal.svelte-1nxr5jv {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 1000;
  }

  .modal-content.svelte-1nxr5jv {
    background: white;
    padding: 24px;
    border-radius: 10px;
    text-align: center;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    max-width: 360px;
    width: calc(100vw - 40px);
    box-sizing: border-box;
  }

  .modal-content.svelte-1nxr5jv p:where(.svelte-1nxr5jv) {
    margin: 0;
    color: #111827;
    line-height: 1.5;
  }

  .modal-actions.svelte-1nxr5jv {
    display: flex;
    gap: 10px;
    margin-top: 16px;
  }

  .cancel-button.svelte-1nxr5jv,
  .confirm-button.svelte-1nxr5jv {
    flex: 1;
    padding: 10px 14px;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    font-weight: 500;
  }

  .cancel-button.svelte-1nxr5jv {
    background-color: #6b7280;
    color: white;
  }

  .cancel-button.svelte-1nxr5jv:hover {
    background-color: #4b5563;
  }

  .confirm-button.svelte-1nxr5jv {
    background-color: #ef4444;
    color: white;
  }

  .confirm-button.svelte-1nxr5jv:hover {
    background-color: #dc2626;
  }

  .empty-state.svelte-1nxr5jv {
    text-align: center;
    color: #6b7280;
    margin: 0;
  }

  @media (max-width: 768px) {
    .content.svelte-1nxr5jv {
      padding-top: 0;
    }

    .title.svelte-1nxr5jv {
      padding: 10px 20px;
    }

    .title-span.svelte-1nxr5jv {
      font-size: 1.2rem;
    }

    .subscribers-card.svelte-1nxr5jv {
      margin: 20px;
      padding: 20px;
      max-width: none;
    }

    .profile-picture.svelte-1nxr5jv {
      width: 40px;
      height: 40px;
    }

    .username.svelte-1nxr5jv {
      font-size: 0.9rem;
    }

    .remove-button.svelte-1nxr5jv {
      padding: 6px 10px;
      font-size: 0.8rem;
      flex-shrink: 0;
    }

    .modal-content.svelte-1nxr5jv {
      padding: 20px;
    }
  }

  @media screen and (min-width: 768px) {
    .title.svelte-1nxr5jv {
      margin-top: 40px;
    }
  }

  @media screen and (min-width: 850px) {
    .title.svelte-1nxr5jv {
      margin-top: 5px;
    }
  }

  @media screen and (min-width: 850px) and (min-height: 1280px) {
    .title.svelte-1nxr5jv {
      margin-top: 55px;
    }
  }

  @media screen and (min-width: 1024px) and (max-width: 1024px) and (max-height: 600px) {
    .title.svelte-1nxr5jv {
      margin-top: 5px;
    }
  }

  @media screen and (min-width: 1024px) and (min-height: 1300px) {
    .title.svelte-1nxr5jv {
      margin-top: 60px;
    }
  }

  @media screen and (min-width: 1440px) {
    .title.svelte-1nxr5jv {
      margin-top: 20px;
    }
  }


  .profile-info.svelte-18l8t0y {
    display: flex;
    align-items: center;
  }

  .profile-picture.svelte-18l8t0y {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    margin-right: 10px;
  }

  .title.svelte-18l8t0y {
    display: flex;
    justify-content: center;
    padding: 10px;
    box-shadow: 0 4px 8px rgba(135, 135, 135, 0.1);
  }

  .options-menu.svelte-18l8t0y {
    position: absolute;
    bottom: 40px;
    left: 25px;
    background-color: white;
    border: 1px solid #ddd;
    border-radius: 5px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    z-index: 10;
  }

  .video-wrapper.svelte-18l8t0y {
    position: relative; 
    width: 17%;
    margin: 10px;
    text-align: left;
  }

  .no-more-posts.svelte-18l8t0y {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 5vh; 
    text-align: center;
    font-size: 1rem;
  }

  .title-span.svelte-18l8t0y {
    margin-top: 5px;
    border-radius: 25%;
    padding: 5px;
    font-size: 1.4rem;
    font-weight: bold;
    color: #000000;
  }

  .content.svelte-18l8t0y {
    position: relative;
    min-height: 100vh;
  }

  .video-container.svelte-18l8t0y {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    padding: 20px; /* 50 */
    position: relative; 
  }

  /* .video-wrapper {
      width: 17%;
      margin: 10px;
      text-align: left;
    } */

  .video-card.svelte-18l8t0y {
    position: relative;
    height: 350px;
    overflow: hidden;
    /* border-radius: 10px; */
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    cursor: pointer;
  }

  .video-card.svelte-18l8t0y video:where(.svelte-18l8t0y),
  .video-card.svelte-18l8t0y img:where(.svelte-18l8t0y) {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* border-radius: 10px; */
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
  }

  .bottom-content.svelte-18l8t0y {
    padding: 10px;
    background: #f9f9f9;
    /* border-radius: 10px; */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    cursor: pointer;
  }

  .video-title.svelte-18l8t0y {
    /* font-weight: bold; */
    color: #000000;
    margin-top: 10px;
  }

  .user-info.svelte-18l8t0y {
    font-size: 0.9rem;
    color: #000000;
  }

  .tags-info.svelte-18l8t0y {
    font-size: 0.6rem;
    color: #515151;
  }

  .time-info.svelte-18l8t0y {
    font-size: 0.6rem;
    color: #515151;
    margin-top: 10px;
  }

  .more-options.svelte-18l8t0y {
    color: blue;
    cursor: pointer;
    margin-right: 20px;
    font-size: 1rem;
  }

  .options-menu.svelte-18l8t0y {
    position: absolute;
    bottom: 40px;
    left: 25px;
    background-color: white;
    border: 1px solid #ddd;
    border-radius: 5px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    z-index: 10;
  }

  /* (unused) .options-menu > div {
    padding: 10px;
    cursor: pointer;
  }*/

  /* .options-menu > div:hover {
      background-color: #6c6c6c;
    } */

  .close-button.svelte-18l8t0y {
    text-align: center;
    padding: 5px;
    cursor: pointer;
    background-color: #ddd;
    transition: background-color 0.3s ease;
    color: black;
  }

  .close-button.svelte-18l8t0y:hover {
    background-color: #ff0000;
  }

  .delete-button.svelte-18l8t0y {
    text-align: center;
    padding: 5px;
    cursor: pointer;
    background-color: #ddd;
    transition: background-color 0.3s ease;
    color: black;
  }

  .delete-button.svelte-18l8t0y:hover {
    background-color: #ff3c82;
  }

  .edit-button.svelte-18l8t0y {
    text-align: center;
    padding: 5px;
    cursor: pointer;
    background-color: #ddd;
    transition: background-color 0.3s ease;
    color: black;
  }

  .edit-button.svelte-18l8t0y:hover {
    background-color: #b683d4;
  }

  .spinner.svelte-18l8t0y {
    position: absolute;
    bottom: 10px;
    left: 48%;
    transform: translateX(-50%);
    width: 30px;
    height: 30px;
    border-radius: 50%;
    border: 5px solid rgba(0, 0, 0, 0.1);
    border-top-color: #3498db;
    animation: svelte-18l8t0y-spin 1s ease-in-out infinite;
  }

  .no-videos.svelte-18l8t0y {
    text-align: center;
    font-size: 1rem;
    color: #000;
    margin-top: 150px;
    padding: 20px;
  }

  @keyframes svelte-18l8t0y-spin {
    0% {
      transform: rotate(0deg);
    }
    100% {
      transform: rotate(360deg);
    }
  }

  @media (max-width: 767px) {
    .title.svelte-18l8t0y {
      padding: 10px 20px;
    }

    .title-span.svelte-18l8t0y {
      font-size: 1.2rem;
    }

    .video-container.svelte-18l8t0y {
      padding: 20px;
    }

    .video-wrapper.svelte-18l8t0y {
      width: 100%;
      margin: 10px 0;
      text-align: left;
    }

    .video-card.svelte-18l8t0y {
      height: 65vh;
    }

    .bottom-content.svelte-18l8t0y {
      padding: 10px;
      background: #f9f9f9;
      box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    }

    .spinner.svelte-18l8t0y {
      left: 46%;
      width: 20px;
      height: 20px;
    }
  }

  @media screen and (min-width: 768px) {
    .video-container.svelte-18l8t0y {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 20px;
      justify-content: center;
      padding: 20px;
    }

    .video-wrapper.svelte-18l8t0y {
      width: 100%;
      margin: 0;
    }

    .video-card.svelte-18l8t0y {
      height: 350px;
    }

    .title.svelte-18l8t0y {
      margin-top: 40px;
    }
  }

  @media screen and (min-width: 850px) {
    .title.svelte-18l8t0y {
      margin-top: 5px;
    }
  }

  @media screen and (min-width: 850px) and (min-height: 1280px) {
    .title.svelte-18l8t0y {
      margin-top: 55px;
    }
  }

  @media screen and (min-width: 1024px) and (max-width: 1024px) and (max-height: 600px) {
    .video-container.svelte-18l8t0y {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 20px;
      justify-content: center;
      padding: 20px;
    }

    .video-wrapper.svelte-18l8t0y {
      width: 100%;
      margin: 0;
    }

    .video-card.svelte-18l8t0y {
      height: 350px;
    }

    .title.svelte-18l8t0y {
      margin-top: 5px;
    }
  }

  @media screen and (min-width: 1024px) and (min-height: 1300px) {
    .video-container.svelte-18l8t0y {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 20px;
      justify-content: center;
      padding: 20px;
    }

    .video-wrapper.svelte-18l8t0y {
      width: 100%;
      margin: 0;
    }

    .video-card.svelte-18l8t0y {
      height: 350px;
    }

    .title.svelte-18l8t0y {
      margin-top: 60px;
    }
  }

  @media screen and (min-width: 1440px) {
    .video-container.svelte-18l8t0y {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 20px;
      justify-content: center;
      padding: 20px;
    }

    .video-wrapper.svelte-18l8t0y {
      width: 100%;
      margin: 0;
    }

    .video-card.svelte-18l8t0y {
      height: 450px;
    }

    .title.svelte-18l8t0y {
      margin-top: 20px;
    }
  }


  main.svelte-1m4b5g6 {
    margin: 0;
    padding: 0;
    height: 100vh;
  }

  .auth-layout.svelte-1m4b5g6 {
    padding: 3rem 0;
    background-color: #f3f3f9;
    min-height: 100vh;
    position: relative;
  }

  .bg-image.svelte-1m4b5g6 {
    position: absolute;
    top: 0;
    background-position: center;
    background-size: cover;
    height: 380px;
    width: 100%;
    clip-path: polygon(100% 0, 100% 75%, 53% 100%, 0 75%, 0 0);
    opacity: 0.9;
  }

  .auth-content.svelte-1m4b5g6 {
    max-width: 500px;
    width: 90%;
    margin: auto;
    position: relative;
    z-index: 2;
  }

  .auth-head.svelte-1m4b5g6 {
    padding: 1rem 0;
    color: #ffffffab;
    text-align: center;
    /* p {
      font-size: 1.125rem;
      margin-top: 10px;
    } */
  }

  .logo-container.svelte-1m4b5g6 {
    text-align: center;
  }

  .auth-logo.svelte-1m4b5g6 {
    width: 350px;
    height: auto;
    border-radius: 8px;
    padding: 10px;
  }

  .auth-box.svelte-1m4b5g6 {
    background-color: #fff;
    padding: 1.5rem 1.5rem 2rem;
    min-height: 100px;
    border-radius: 8px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  }

  .box-heading.svelte-1m4b5g6 {
    text-align: center;
    margin-bottom: 2rem;
    h5:where(.svelte-1m4b5g6) {
      color: #000000;
      margin-bottom: 0.5rem;
      font-size: 1.5rem;
      font-weight: 600;
    }
    p:where(.svelte-1m4b5g6) {
      color: #6c757d;
      margin-bottom: 0;
    }
  }

  .field-wrapper.svelte-1m4b5g6 {
    display: flex;
    flex-direction: column;
    gap: 1rem;
  }

  .otp-input-group.svelte-1m4b5g6 {
    position: relative;
  }

  .otp-input-group.svelte-1m4b5g6 i:where(.svelte-1m4b5g6) {
    color: #8E8E8E;
    font-size: 20px;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: 10px;
    z-index: 1;
  }

  .otp-input-field.svelte-1m4b5g6 {
    width: 100%;
    padding: 12px 40px;
    border-radius: 5px;
    border: 1px solid #3F7FFF;
    box-sizing: border-box;
    font-size: 1.2rem;
    text-align: center;
    letter-spacing: 0.5rem;
    font-weight: 500;
    transition: border-color 0.3s ease;
  }

  .otp-input-field.svelte-1m4b5g6:focus {
    outline: none;
    border-color: #3F7FFF;
    box-shadow: 0 0 0 2px rgba(63, 127, 255, 0.2);
  }

  .submit-btn.svelte-1m4b5g6 {
    width: 100%;
    padding: 12px;
    margin-top: 1rem;
    background: linear-gradient(to right, #3FBAFF, #3F7FFF);
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    transition: all 0.3s ease;
    font-size: 1rem;
    font-weight: 500;
  }

  .submit-btn.svelte-1m4b5g6:hover:not(:disabled) {
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(63, 127, 255, 0.3);
  }

  .submit-btn.svelte-1m4b5g6:disabled {
    opacity: 0.7;
    cursor: not-allowed;
    transform: none;
  }

  .cancel-btn.svelte-1m4b5g6 {
    width: 100%;
    padding: 12px;
    margin-top: 0.5rem;
    background-color: #6c757d;
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    transition: all 0.3s ease;
    font-size: 1rem;
    font-weight: 500;
  }

  .cancel-btn.svelte-1m4b5g6:hover {
    background-color: #5a6268;
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(108, 117, 125, 0.3);
  }

  @media (max-width: 768px) {
    .auth-layout.svelte-1m4b5g6 {
      padding: 1rem 0 2rem;
    }

    .auth-head.svelte-1m4b5g6 {
      padding: 1.5rem 0;
    }

    .auth-content.svelte-1m4b5g6 {
      width: 95%;
    }

    .auth-box.svelte-1m4b5g6 {
      padding: 1rem;
    }

    .auth-logo.svelte-1m4b5g6 {
      width: 200px;
    }

    .otp-input-group.svelte-1m4b5g6 i:where(.svelte-1m4b5g6) {
      font-size: 16px;
      left: 8px;
    }

    .otp-input-field.svelte-1m4b5g6 {
      padding: 10px 30px;
      font-size: 1rem;
    }

    .box-heading.svelte-1m4b5g6 h5:where(.svelte-1m4b5g6) {
      font-size: 1.3rem;
    }
  }


  .svelte-7z3pri {
    box-sizing: border-box;
  }

  .hero.svelte-7z3pri {
    display: flex;
    align-items: center;
    justify-content: center;
    padding-top: 7rem /* 112px */;
    padding-bottom: 7rem /* 112px */;
    padding-left: 5.5rem /* 120px */;
    padding-right: 0px;
    background-color: #FFFFFF;
    flex-wrap: wrap;
  }

  .text-content.svelte-7z3pri {
    flex: 1;
    max-width: 100%;
    padding: 1rem;
    max-width: 1280px;
  }

  .text-content.svelte-7z3pri h1:where(.svelte-7z3pri) {
    font-size: 2rem;
    font-weight: bold;
    color: #1a1a1a;
  }

  .text-content.svelte-7z3pri p:where(.svelte-7z3pri) {
    font-size: 1.2rem;
    margin-top: 1rem;
    color: #555;
  }

  .hero-st-container.svelte-7z3pri {
    display: inline-flex;
    align-items: center;
    justify-content: start;
    padding-top: 16px;
    padding-bottom: 20px;
    padding-right: 24px;
    padding-left: 0px;
    border-radius: 9999px;
    background-color: #d7e2ff;
    width: auto;
    height: 40px;
  }

  .hero-st-container.svelte-7z3pri li:where(.svelte-7z3pri) {
    width: 8;
    height: 8;
    color: #3f7cff;
  }

  .hero-st-container.svelte-7z3pri li:where(.svelte-7z3pri) p:where(.svelte-7z3pri) {
    font-weight: 700;
    font-style: bold;
    font-size: 12px;
    line-height: 16px;
    letter-spacing: 0.6px;
    vertical-align: middle;
    text-transform: uppercase;
    color: #3F7CFF;
  }

  .hero-title.svelte-7z3pri {
    font-size: 72px !important;
    font-weight: 800 !important;
    line-height: 100%;
    letter-spacing: 0px;
    vertical-align: middle;
    margin-top: 24px;
    padding-right: 50px;
    color: #1a1b1e;
    max-width: 1280px;
  }

  .hero-title.svelte-7z3pri span:where(.svelte-7z3pri) {
    color: #3f7cff;
  }

  .hero-description.svelte-7z3pri {
    font-size: 20px;
    margin-top: 16px;
    font-weight: 300;
    font-style: light;
    line-height: 32.5px;
    letter-spacing: 0px;
    vertical-align: middle;
    color: #44474F;
    max-width: 652px;
  }

  .hero-actions.svelte-7z3pri {
    display: flex;
    gap: 16px;
    margin-top: 24px;
  }

  .primary-btn.svelte-7z3pri {
    background-color: #3f7cff;
    color: #fff;
    border: none;
    padding: 12px 24px;
    border-radius: 12px;
    font-size: 16px;
    cursor: pointer;
  }

  .secondary-btn.svelte-7z3pri {
    background-color: #e5e7eb;
    color: #111827;
    border: none;
    padding: 12px 24px;
    border-radius: 12px;
    font-size: 16px;
    cursor: pointer;
  }

  /* ====================== C2PA SECTION ====================== */
  .c2pa-section.svelte-7z3pri {
    padding: 5rem 5% 6rem;
    background: #F7F9FF;
    width: 100%;
  }

  .c2pa-container.svelte-7z3pri {
    max-width: 1280px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 380px;
    gap: 2rem;
  }

  /* Left C2PA Card */
  .c2pa-card.svelte-7z3pri {
    background: #FFFFFF;
    border: 1px solid #00000014;
    border-radius: 24px;
    padding: 48px;
    display: flex;
    flex-direction: column;
    box-shadow: #0000000D;
  }

  .card-header.svelte-7z3pri {
    display: flex;
    flex-direction: column;
    align-items: start;
    gap: 12px;
    margin-bottom: 1.25rem;
  }

  .shield-icon.svelte-7z3pri {
    width: 32px;
    height: 40px;
    margin-bottom: 1.2rem;
  }

  .c2pa-card.svelte-7z3pri h3:where(.svelte-7z3pri) {
    font-size: 2.25rem;
    font-weight: 700;
    line-height: 40px;
    letter-spacing: 0px;
    color: #1A1C1E;
    margin: 0;
  }

  .card-desc.svelte-7z3pri {
    font-size: 1.125rem;
    font-weight: 400;
    line-height: 29.25px;
    letter-spacing: 0px;
    vertical-align: middle;
    color: #44474F;
    flex: 1;
    margin-bottom: 1.5rem;
    max-width: 502px;
  }

  .card-footer.svelte-7z3pri {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
  }

  .hash.svelte-7z3pri {
    background: #3F7CFF1A;
    color: #3F7CFF;
    font-size: 0.75rem;
    padding: 6px 14px;
    letter-spacing: 1.2px;
    line-height: 16px;
    vertical-align: middle;
    border-radius: 9999px;
    font-family: ui-monospace, monospace;
  }

  /* Right Innovation Card */
  .innovation-card.svelte-7z3pri {
    background: #3F7CFF;
    color: white;
    border-radius: 24px;
    padding: 2.25rem;
    display: flex;
    flex-direction: column;
    width: 410.66px;
    height: 427px;
  }

  .lightning-icon.svelte-7z3pri {
    width: 25px;
    height: 30.67px;
    margin-top: 8rem;
    margin-bottom: 2rem;
  }

  .innovation-card.svelte-7z3pri h3:where(.svelte-7z3pri) {
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 32px;
    letter-spacing: 0px;
    vertical-align: middle;
    margin: 0 0 1rem 0;
    color: #FFFFFF;
  }

  .innovation-card.svelte-7z3pri p:where(.svelte-7z3pri) {
    font-size: 1.02rem;
    line-height: 1.6;
    opacity: 0.95;
  }

  /* Bottom Row */
  .bottom-row.svelte-7z3pri {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
    margin-top: 1.5rem;
  }

  .team-photo.svelte-7z3pri img:where(.svelte-7z3pri) {
    width: 408.67px;
    height: 408.66px;
    border-radius: 16px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
  }

  .privacy-card.svelte-7z3pri {
    background: #FFFFFFB2;
    border: 1px solid #00000014;
    border-radius: 24px;
    padding: 48px;
    position: relative;
    width: 845.33px;
    height: 410.66px;
  }

  .privacy-card-description-icon.svelte-7z3pri {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
  }  

  .privacy-card.svelte-7z3pri h3:where(.svelte-7z3pri) {
    font-size: 1.875rem;
    font-weight: 700;
    line-height: 36px;
    letter-spacing: 0px;
    vertical-align: middle;
    color: #1A1C1E;
    margin-top: 6rem;
    margin-bottom: 1rem;
  }

  .privacy-card.svelte-7z3pri p:where(.svelte-7z3pri) {
    font-size: 1.125rem;
    font-weight: 400;
    letter-spacing: 0px;
    line-height: 29.25px;
    vertical-align: middle;
    color: #44474F;
    max-width: 575.34px;
  }

  .lock-icon.svelte-7z3pri {
    /* position: absolute; */
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid #3F7CFF33;
    border-radius: 24px;
    width: 128px;
    height: 128px;
    bottom: 2rem;
    right: 2rem;
  }

  .lock-img.svelte-7z3pri {
    width: 32px;
    height: 42px;
  }

  /* ====================== MISSION SECTION ====================== */
  .mission-text.svelte-7z3pri {
    font-size: 1.35rem;
    line-height: 1.65;
    color: #1a1b1e;
    max-width: 820px;
    margin: 0 auto 1.5rem;
    text-align: center;
  }

  .mission-subtext.svelte-7z3pri {
    font-size: 1.1rem;
    font-weight: 500;
    color: #3F7CFF;
    text-align: center;
    max-width: 620px;
    margin: 0 auto;
  }
  
  /* ====================== CORE VALUES SECTION ====================== */
  .core-values-section.svelte-7z3pri {
    padding: 3rem 5% 4rem;
    display: flex;
    flex-direction: column;
    gap: 10rem;
    align-items: center;
    justify-content: center;
    background: #ffffff;
  }

  .core-values-container.svelte-7z3pri {
    max-width: 1280px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 120px;
    gap: 3rem;
    align-items: start;
    margin-left: 12rem;
  }

  /* Core Values Card */
  .values-card.svelte-7z3pri {
    padding: 3rem 2.5rem;
    background: white;
  }

  .values-header.svelte-7z3pri {
    margin-bottom: 6rem;
  }

  .values-label.svelte-7z3pri {
    font-size: 0.95rem;
    font-weight: 700;
    letter-spacing: 2px;
    color: #3F7CFF;
    text-transform: uppercase;
    border-bottom: 3px solid #3F7CFF;
    padding-bottom: 6px;
  }

  .value-item.svelte-7z3pri {
    display: flex;
    gap: 4rem;
    margin-bottom: 3rem;
  }

  .value-item.svelte-7z3pri:last-child {
    margin-bottom: 0;
  }

  .value-number.svelte-7z3pri {
    font-size: 4.5rem;
    font-weight: 300;
    color: #e2e8f0;
    line-height: 1;
    min-width: 70px;
  }

  .value-content.svelte-7z3pri h3:where(.svelte-7z3pri) {
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 32px;
    vertical-align: middle;
    color: #1A1C1E;
    margin: 0 0 0.75rem 0;
  }

  .value-content.svelte-7z3pri p:where(.svelte-7z3pri) {
    font-size: 1.05rem;
    line-height: 1.65;
    color: #44474F;
  }

  /* Join the Movement Card */
  .join-card.svelte-7z3pri {
    position: relative;
    border-radius: 24px;
    overflow: hidden;
    width: 1280px;
    display: flex;
    align-items: flex-end;
    padding: 64px;
  }

  .join-bg.svelte-7z3pri {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 1;
  }

  .join-content.svelte-7z3pri {
    position: relative;
    z-index: 2;
    padding: 2rem 2rem;
    color: white;
  }

  .join-content.svelte-7z3pri h2:where(.svelte-7z3pri) {
    font-size: 3rem;
    font-weight: 700;
    line-height: 48px;
    letter-spacing: 0px;
    vertical-align: middle;
    margin: 0 0 1.25rem 0;
    max-width: 672px;
  }

  .join-content.svelte-7z3pri p:where(.svelte-7z3pri) {
    font-size: 1.125rem;
    line-height: 29.25px;
    letter-spacing: 0px;
    vertical-align: middle;
    margin-bottom: 2rem;
    opacity: 0.95;
    max-width: 662px;
  }

  .inquire-btn.svelte-7z3pri {
    background: white;
    color: #3F7CFF;
    border: none;
    padding: 20px 40px;
    margin-bottom: 12px;
    border-radius: 16px;
    font-size: 1.125rem;
    font-weight: 700;
    text-align: center;
    vertical-align: middle;
    cursor: pointer;
    transition: all 0.25s ease;
    width: 283.8px;

  }

  .inquire-btn.svelte-7z3pri:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 25px rgba(0,0,0,0.15);
  }

  @media (max-width: 1024px) {
    .c2pa-container.svelte-7z3pri {
      grid-template-columns: 1fr;
      gap: 1.5rem;
    }
    
    .bottom-row.svelte-7z3pri {
      grid-template-columns: 1fr;
    }

    .core-values-container.svelte-7z3pri {
      grid-template-columns: 1fr;
      gap: 2.5rem;
    }
  }

  @media (max-width: 768px) {
     .hero.svelte-7z3pri {
      flex-direction: column;
      align-items: center;
      text-align: center;
      padding-right: 0;
      padding-left: 0;
      width: 90%;
    }

    .text-content.svelte-7z3pri h1:where(.svelte-7z3pri) {
      font-size: 1.8rem;
    }

    .c2pa-section.svelte-7z3pri {
      padding: 3.5rem 5% 4rem;
    }
    
    .c2pa-card.svelte-7z3pri, .innovation-card.svelte-7z3pri, .privacy-card.svelte-7z3pri {
      padding: 1.75rem;
    }
    
    .c2pa-card.svelte-7z3pri h3:where(.svelte-7z3pri),
    .innovation-card.svelte-7z3pri h3:where(.svelte-7z3pri),
    .privacy-card.svelte-7z3pri h3:where(.svelte-7z3pri) {
      font-size: 1.45rem;
    }

    .core-values-section.svelte-7z3pri {
      padding: 4rem 5% 5rem;
    }
    
    .values-card.svelte-7z3pri {
      padding: 2.5rem 1.75rem;
    }
    
    .value-number.svelte-7z3pri {
      font-size: 3.5rem;
    }
  }

  @media (max-width: 480px) {
    .hero.svelte-7z3pri {
      display: flex;
      align-items: start;
      justify-content: start;
      padding-top: 3rem;
      padding-bottom: 3rem;
      padding-left: 30px;
      background-color: #fdfbff;
      flex-wrap: wrap;
    }

    .text-content.svelte-7z3pri {
      flex: 1;
      max-width: 100%;
      padding-top: 10px;
      padding-bottom: 10px;
      padding-left: 10px;
      padding-right: 0px;
      max-width: 480px;
    }

     .hero-st-container.svelte-7z3pri {
      display: flex;
      align-items: left;
      justify-content: left;
      padding-top: 6px;
      padding-bottom: 6px;
      padding-right: 8px;
      padding-left: 0px;
      border-radius: 9999px;
      background-color: #d7e2ff;
      max-width: 200px;
      height: 40px;
    }

    .text-content.svelte-7z3pri p:where(.svelte-7z3pri) {
      margin-left: 0px;
      font-size: 1rem;
      margin-top: 0.6rem;
      color: #555;
    }

    .hero-title.svelte-7z3pri {
      font-size: 48px !important;
      font-weight: 800 !important;
      line-height: 52.8px;
      letter-spacing: -1.2px;
      vertical-align: middle;
      margin-top: 24px;
      margin-right: 0px;
      padding-right: 10px;
      padding-bottom: 22.8px;
      color: #1a1b1e;
      max-width: 480px;
      text-align: start;
    }

    .hero-description.svelte-7z3pri {
      font-size: 20px;
      margin-top: 16px;
      font-weight: 300;
      font-style: light;
      line-height: 32.5px;
      letter-spacing: 0px;
      vertical-align: middle;
      color: #44474F;
      max-width: 520px;
      text-align: left;
    }

    .hero-actions.svelte-7z3pri {
      display: flex;
      flex-direction: column;
      gap: 8px;
      margin-top: 24px;
    }

    /* ====================== C2PA SECTION ====================== */
    .c2pa-section.svelte-7z3pri {
      padding: 32px;
      background: #F7F9FF;
      width: 100%;
      display: flex;
      flex-direction: column;
    }

    /* Left C2PA Card */
    .c2pa-card.svelte-7z3pri {
     max-width: 342px;
    }

    /* Right Innovation Card */
    .innovation-card.svelte-7z3pri {
      padding-left: 40px;
      padding-right: 40px;
      padding-top: 16px;
      padding-bottom: 16px;
      border-radius: 16px;
      max-width: 342px;
    }

    /* Bottom Row */
    .team-photo.svelte-7z3pri img:where(.svelte-7z3pri) {
      width: 340px;
      height: 340px;
    }

    .privacy-card.svelte-7z3pri {
      padding-left: 33px;
      padding-right: 33px;
      padding-top: 8px;
      padding-bottom: 16px;
      border-radius: 16px;
      max-width: 342px;
      height: 491px;
    }

    .privacy-card-description-icon.svelte-7z3pri {
      display: flex;
      flex-direction: column;
      justify-content: space-between;
    }  

    .privacy-card.svelte-7z3pri h3:where(.svelte-7z3pri) {
     margin-top: 2rem;
    }

    .lock-icon.svelte-7z3pri {
     margin-left: 70px;
    }

    .core-values-section.svelte-7z3pri {
      padding: 6rem 5% 7rem;
      display: flex;
      flex-direction: column;
      gap: 10rem;
      align-items: center;
      justify-content: center;
      background: #ffffff;
    }

    .core-values-container.svelte-7z3pri {
      max-width: 342px;
      margin: 0 auto;
      display: grid;
      grid-template-columns: 1fr 10px;
      gap: 1rem;
      align-items: start;
      margin-left: 2rem;

    }

    /* Core Values Card */
    .values-card.svelte-7z3pri {
      padding: 0rem 0rem;
      background: white;
    }

    .values-header.svelte-7z3pri {
      margin-bottom: 6rem;
    }

    .values-label.svelte-7z3pri {
      font-size: 0.95rem;
      font-weight: 700;
      letter-spacing: 2px;
      color: #3F7CFF;
      text-transform: uppercase;
      border-bottom: 3px solid #3F7CFF;
      padding-bottom: 6px;
    }

    .value-item.svelte-7z3pri {
      display: flex;
      flex-direction: column;
      gap: 2rem;
      margin-bottom: 3rem;
    }

    .value-item.svelte-7z3pri:last-child {
      margin-bottom: 0;
    }

    .value-number.svelte-7z3pri {
      font-size: 4.5rem;
      font-weight: 300;
      color: #e2e8f0;
      line-height: 1;
      min-width: 70px;
    }

    .value-content.svelte-7z3pri h3:where(.svelte-7z3pri) {
      font-size: 1.5rem;
      font-weight: 700;
      line-height: 32px;
      letter-spacing: 0px;
      vertical-align: middle;
      color: #1A1C1E;
      margin: 0 0 0.75rem 0;
    }

    .value-content.svelte-7z3pri p:where(.svelte-7z3pri) {
      font-size: 1.125rem;
      line-height: 29.25px;
      letter-spacing: 0px;
      vertical-align: middle;
      color: #44474F;
      width: 100%;
      max-width: none;
      word-wrap: break-word;
      overflow-wrap: break-word;
    }

    /* Join the Movement Card */
    .join-card.svelte-7z3pri {
      position: relative;
      border-radius: 24px;
      overflow: hidden;
      width: 342px;
      height: 650px;
      display: flex;
      align-items: flex-end;
      padding: 24px;
    }

    .join-bg.svelte-7z3pri {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      object-fit: cover;
      z-index: 1;
    }

    .join-content.svelte-7z3pri {
      padding: 6rem 2rem;
    }

    .join-content.svelte-7z3pri h2:where(.svelte-7z3pri) {
      font-size: 2.25rem;
      font-weight: 700;
      line-height: 40px;
      max-width: 246px;
    }

    .join-content.svelte-7z3pri p:where(.svelte-7z3pri) {
      max-width: 246px;
    }

    .inquire-btn.svelte-7z3pri {
      padding: 8px 16px;
      margin-bottom: 12px;
      border-radius: 16px;
      width: 246px;
      height: 96px;
    }
  }

  @media (max-width: 390px) {
    .hero.svelte-7z3pri,
    .text-content.svelte-7z3pri {
      width: 100%;
      text-align: center;
    }

    .hero.svelte-7z3pri {
      width: 90%;
      text-align: center;
    }
  }


  .svelte-19jqwy9 {
    box-sizing: border-box;
  }

  /* ====================== COMMON CENTERED WRAPPER ====================== */
  .section-wrapper.svelte-19jqwy9 {
    max-width: 1232px;
    margin: 0 auto;
    padding: 0 5%;
  }

  /* ====================== SERVICES PAGE ====================== */
  .secure-the-source-section.svelte-19jqwy9 {
    padding: 6rem 0 4rem;
    background: #FFFFFF;
  }

  .secure-container.svelte-19jqwy9 {
    max-width: 1232px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
    align-items: center;
  }

  .secure-left.svelte-19jqwy9 h1:where(.svelte-19jqwy9) {
    font-size: 3.8rem;
    font-weight: 800;
    line-height: 1.05;
    margin-bottom: 1.5rem;
  }

  .secure-left.svelte-19jqwy9 h1:where(.svelte-19jqwy9) span:where(.svelte-19jqwy9) {
    color: #3F7CFF;
  }

  .subtitle.svelte-19jqwy9 {
    font-size: 1.25rem;
    line-height: 1.7;
    color: #555;
    max-width: 560px;
  }

  /* Section Headers */
  .section-header.svelte-19jqwy9 {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 1rem;
  }

  .section-number.svelte-19jqwy9 {
    font-size: 0.95rem;
    font-weight: 700;
    letter-spacing: 0.55px;
    line-height: 16.5px;
    vertical-align: middle;
    color: #0053CD;
  }

  .section-label.svelte-19jqwy9 {
    font-size: 0.95rem;
    font-weight: 700;
    letter-spacing: 0.55px;
    line-height: 16.5px;
    vertical-align: middle;
    color: #0053CD;
    text-transform: uppercase;
  }

  /* Social Media Section */
  .social-media-section.svelte-19jqwy9 {
    padding: 4rem 0;
    background: white;
  }

  .social-media-section.svelte-19jqwy9 h2:where(.svelte-19jqwy9) {
    font-size: 2.6rem;
    font-weight: 700;
    margin-bottom: 1rem;
  }

  .features.svelte-19jqwy9 {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 20px;
  }

  .feature-item.svelte-19jqwy9 {
    align-items: center;
    vertical-align: middle;
  }

  .explore-link.svelte-19jqwy9 {
    font-weight: 700;
    font-size: 1rem;
    line-height: 24px;
    letter-spacing: 0px;
    vertical-align: middle;
    color: #0053CD;
  }

  .auth-status-card.svelte-19jqwy9 {
    margin-top: 3rem;
    background: #F5F3F4;
    border-radius: 16px;
    padding-top: 70px;
    padding-right: 32px;
    padding-bottom: 141px;
    padding-left: 32px;
    box-shadow: 0 10px 30px #0047840F;
    border: 1px solid #C2C6D71A;
    position: relative;
    max-width: 1232px;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
  }

  .sdk-section-card.svelte-19jqwy9 {
    margin-top: 3rem;
    background: #F5F3F4;
    border-radius: 16px;
    padding-top: 70px;
    padding-right: 32px;
    padding-bottom: 60px;
    padding-left: 32px;
    box-shadow: 0 10px 30px #0047840F;
    border: 1px solid #C2C6D71A;
    position: relative;
    max-width: 1232px;
    width: 100%;
    display: flex;
    flex-direction: row;
    gap: 6rem;
  }

  .sdk-section-content.svelte-19jqwy9 .section-desc:where(.svelte-19jqwy9) {
    max-width: 520px;
  }

  .auth-shield-image.svelte-19jqwy9 {
    width: 100%;
    max-width: 380px;
    border-radius: 16px;
    margin-bottom: 1.75rem;
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.15);
  }

  .auth-info.svelte-19jqwy9 {
    width: 100%;
    text-align: left;
    padding: 0 1rem;
    background-color: #FBF9F8B2;
    border: 1px solid #FFFFFF33;
    padding: 16px;
    border-radius: 12px;
  }

  .auth-info-r1.svelte-19jqwy9 {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
  }

  .auth-status-text.svelte-19jqwy9 {
    font-size: 1.05rem;
    font-weight: 700;
    color: #3F7CFF;
    letter-spacing: 1px;
    margin-bottom: 6px;
  }

  .hash-text.svelte-19jqwy9 {
    font-size: 0.95rem;
    color: #64748b;
    font-family: ui-monospace, monospace;
  }

  .status-dot.svelte-19jqwy9 {
    /* position: absolute;
    bottom: 168px;
    right: 28px; */
    width: 8px;
    height: 8px;
    background: #0053CD;
    border-radius: 50%;
  }

  /* SDK Section */
  .sdk-section.svelte-19jqwy9 {
    padding: 4rem 0;
    background: #FFFFFF;
  }

  .sdk-code-box.svelte-19jqwy9 {
    background: #AE61001A;
    width: 480px;
    height: 138px;
    border-radius: 12px;
    padding: 24px;
    font-size: 0.9rem;
    line-height: 14px;
    color: #8A4C00;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.06);
  }

  .sdk-header.svelte-19jqwy9 {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 1.25rem;
    font-weight: 700;
    color: #8A4C00;
  }

  .code-content.svelte-19jqwy9 {
    white-space: pre;
    font-size: 0.9rem;
    line-height: 14px;
    letter-spacing: 0px;
    vertical-align: middle;
    margin-bottom: 24px;
  }

  .code-line.svelte-19jqwy9 {
    font-weight: 400;
    font-size: 0.9rem;
    line-height: 14px;
    letter-spacing: 0px;
    vertical-align: middle;
  }

 /*  .doc-btn {
    background: #3F7CFF;
    color: white;
    border: none;
    margin-top: 36px;
    padding: 14px 32px;
    border-radius: 9999px;
    font-weight: 600;
  } */

  .sdk-visual.svelte-19jqwy9 .sdk-image:where(.svelte-19jqwy9) {
    position: relative;
    width: 280px;
    margin-top: -8.92px;       
    margin-left: 10px;
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .sdk-visual.svelte-19jqwy9 .sdk-image-mobile:where(.svelte-19jqwy9) {
    display: none;
  }

  /* Provenance Section */
  .provenance-section.svelte-19jqwy9 .section-wrapper:where(.svelte-19jqwy9) {
    padding: 4rem 0;
    background: #FFFFFF;
    display: flex;
    flex-direction: row;
    justify-content: space-evenly;
    gap: 4rem;
    position: relative;           
    min-height: 620px;
  }

  .provenance-visual.svelte-19jqwy9 {
    position: relative;          
    width: 392px;
    height: 312px;
  }

  .provenance-content.svelte-19jqwy9 {
    width: 460px;
  }

  .stats-row.svelte-19jqwy9 {
    display: flex;
    gap: 1rem;
    margin: 2rem 0;
  }

  .stat-box.svelte-19jqwy9 {
    background: #F5F3F4;
    padding: 1.5rem 2rem;
    border-radius: 16px;
    flex: 1;
    text-align: center;
  }

  .stat-value.svelte-19jqwy9 {
    font-size: 2rem;
    font-weight: 700;
    color: #1A1C1E;
  }

  .stat-label.svelte-19jqwy9 {
    font-size: 0.95rem;
    color: #64748B;
    margin-top: 4px;
  }

  .demo-link.svelte-19jqwy9 {
    color: #1B1C1C;
    font-weight: 600;
    text-decoration: underline;
    font-size: 1.1rem;
  }

  .lens-image.svelte-19jqwy9 {
    width: 592px;
    height: 512px;
    border-radius: 24px;
  }

  @media (max-width: 1024px) {
    .secure-container.svelte-19jqwy9 {
      grid-template-columns: 1fr;
      gap: 3rem;
    }
  }

  @media (max-width: 768px) {
    .secure-the-source-section.svelte-19jqwy9,
    .social-media-section.svelte-19jqwy9,
    .sdk-section.svelte-19jqwy9,
    .provenance-section.svelte-19jqwy9 {
      padding: 3rem 5%;
    }
    
    .secure-left.svelte-19jqwy9 h1:where(.svelte-19jqwy9) {
      font-size: 2.8rem;
    }
  }

  @media (max-width: 480px) {
    /* .secure-container {
      padding: 2rem 1.25rem;
    } */

    .sdk-section-card.svelte-19jqwy9 {
      margin-top: 2rem;
      padding-top: 30px;
      padding-bottom: 10px;
      position: relative;
      max-width: 342x;
      display: flex;
      flex-direction: column;
    }

    .sdk-visual.svelte-19jqwy9 .sdk-image:where(.svelte-19jqwy9) {
      display: none;
    }

    .sdk-visual.svelte-19jqwy9 .sdk-image-mobile:where(.svelte-19jqwy9) {
      position: relative;
      width: 268px;
      margin-top: -8.92px;   
      margin-right: 4rem;    
      margin-left: 0rem;
      padding-left: 0rem;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
    }

    .provenance-section.svelte-19jqwy9 .section-wrapper:where(.svelte-19jqwy9) {
      /* padding: 4rem 5%; */
      background: #FFFFFF;
      display: flex;
      flex-direction: column;
      justify-content: space-evenly;
      /* gap: 4rem; */
      gap: 2rem;
      position: relative;           
      min-height: 620px;
    }

    .sdk-section-content.svelte-19jqwy9 .section-desc:where(.svelte-19jqwy9) {
      max-width: 342px;
    }

    .sdk-code-box.svelte-19jqwy9 {
      max-width: 262px;
    }
    
    .secure-left.svelte-19jqwy9 h1:where(.svelte-19jqwy9) {
      font-size: 2.4rem;
    }
    
    .stat-box.svelte-19jqwy9 {
      padding: 1rem 1.5rem;
    }
    
    .lens-image.svelte-19jqwy9 {
      width: 342px;
      height: 260px;
      border-radius: 24px;
      padding-left: 4rem;
    }

    .provenance-section.svelte-19jqwy9 {
      flex-direction: column;
      justify-content: space-evenly;
      gap: 2rem;
      position: relative;           
      max-width: 342px;
    }

    .provenance-content.svelte-19jqwy9 {
      width: 342px;
      padding-left: 2rem;
      padding-top: 0;
      margin-top: 0;
    }

    .stats-row.svelte-19jqwy9 {
      display: flex;
      gap: 1rem;
      margin: 1rem 0;
    }

    .stat-box.svelte-19jqwy9 {
      background: #F5F3F4;
      padding: 1rem 1rem;
      border-radius: 16px;
      flex: 1;
      text-align: center;
    }

    .stat-value.svelte-19jqwy9 {
      font-size: 2rem;
      font-weight: 700;
      color: #1A1C1E;
    }

    .stat-label.svelte-19jqwy9 {
      font-size: 0.95rem;
      color: #64748B;
      margin-top: 4px;
    }

    .demo-link.svelte-19jqwy9 {
      color: #1B1C1C;
      font-weight: 600;
      text-decoration: underline;
      font-size: 1.1rem;
    }
  }

  @media (max-width: 390px) {
    
  }


  .contact-page.svelte-5dla5k {
    max-width: 1280px;
    margin: 0 auto;
    margin-top: 4rem;
  }

  .contact-container.svelte-5dla5k {
    display: grid;
    grid-template-columns: 1fr 480px;
    gap: 1rem;
    align-items: start;
  }

  .contact-form-section.svelte-5dla5k {
    width: 690.75px;
    height: 620px;
    border-radius: 12px;
    border: 1px solid #C2C6D7;
    box-shadow: 2 #0000000D;
    background-color: #FFFFFF;
    padding-top: 48px;
    padding-left: 48px;
    padding-right: 48px;
  }

  .connect-label.svelte-5dla5k {
    font-size: 0.8rem;
    font-weight: 700;
    line-height: 16px;
    letter-spacing: 1.2px;
    vertical-align: middle;
    text-transform: uppercase;
    color: #0053CD;
  }

  .form-header.svelte-5dla5k {
    width: 60%;
  }

  .form-header.svelte-5dla5k h1:where(.svelte-5dla5k) {
    font-size: 3.75rem;
    font-weight: 800;
    line-height: 60px;
    letter-spacing: 0px;
    vertical-align: middle;
    margin-bottom: 1rem;
    color: #1B1C1C;
  }

  .intro-text.svelte-5dla5k {
    font-size: 1.125rem;
    line-height: 29.25px;
    letter-spacing: 0px;
    vertical-align: middle;
    color: #424654;
    max-width: 622px;
    margin-bottom: 2rem;
  }

  .contact-form.svelte-5dla5k {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
  }

  .name-email-row.svelte-5dla5k {
    display: flex;
    flex-direction: row;
    justify-content: space-evenly;
    gap: 16px;
  }

  .name-email-row.svelte-5dla5k .input-group:where(.svelte-5dla5k) {
    width: 50%;
  }

  .input-group.svelte-5dla5k label:where(.svelte-5dla5k) {
    font-weight: 600;
    margin-bottom: 6px;
    display: block;
    color: #333;
  }

  .input-group.svelte-5dla5k input:where(.svelte-5dla5k),
  .input-group.svelte-5dla5k textarea:where(.svelte-5dla5k) {
    width: 100%;
    padding: 14px 18px;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    font-size: 1rem;
    background: #f8f9fa;
  }

  .input-group.svelte-5dla5k textarea:where(.svelte-5dla5k) {
    min-height: 140px;
    resize: vertical;
  }

  .send-btn.svelte-5dla5k {
    background: #3F7CFF;
    color: white;
    border: none;
    padding: 16px 32px;
    border-radius: 9999px;
    font-weight: 600;
    font-size: 1.05rem;
    cursor: pointer;
    margin-top: 0.5rem;
    align-self: flex-start;
  }

  .contact-details.svelte-5dla5k {
    margin: 0 !important;
    padding: 0 !important;
  }

  /* Blue Contact Details Card */
  .blue-card.svelte-5dla5k {
    background-image: url('/contact-detail-background.svg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    color: white;
    border-radius: 20px;
    padding-left: 2rem;
    padding-top: 1rem;
    padding-bottom: 5rem;
  }

  .blue-card.svelte-5dla5k h3:where(.svelte-5dla5k) {
    margin-bottom: 2rem;
    font-size: 1.4rem;
  }

  .detail-item.svelte-5dla5k {
    display: flex;
    gap: 16px;
    margin-bottom: 1.75rem;
  }

  .detail-item.svelte-5dla5k img:where(.svelte-5dla5k) {
    width: 48px;
    height: 48px;
  }

  .detail-item.svelte-5dla5k:last-child {
    margin-bottom: 0;
  }

  .technical-card.svelte-5dla5k {
    background: #EAE7E8;
    border-radius: 12px;
    border: 1px solid #C2C6D7;
    padding: 2rem;
  }

  .technical-card.svelte-5dla5k p:where(.svelte-5dla5k) {
    font-size: 1rem;
    font-weight: 400;
    line-height: 26px;
    letter-spacing: 0px;
    vertical-align: middle;
    color: #424654;
  }

  .tech-header.svelte-5dla5k {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 1rem;
    font-weight: 700;
    font-size: 1.25rem;
    line-height: 28px;
    letter-spacing: 0px;
    vertical-align: middle;
    color: #1B1C1C;
  }

  .tech-buttons.svelte-5dla5k {
    display: flex;
    gap: 12px;
    margin-top: 2rem;
  }

  .tech-btn.svelte-5dla5k {
    flex: 1;
    padding-top: 8px;
    padding-bottom: 8px;
    padding-left: 16px;
    padding-right: 16px;
    border-radius: 8px;
    border: 1px solid #737786;
    background: #FFFFFF;
    color: #1B1C1C;
    font-size: 0.9;
    font-weight: 600;
    line-height: 20px;
    letter-spacing: 0px;
    text-align: center;
    cursor: pointer;
  }

  /* Map Section */
  .map-section.svelte-5dla5k {
    margin-top: 2rem;
    max-width: 1280px;
    padding: 0;
    border-radius: 0;
    margin-bottom: 6rem;
  }

  .map-address.svelte-5dla5k {
    color: #1B1C1C;
    font-size: 2rem;
    font-weight: 700;
    line-height: 1.2;
    margin: 0 0 1rem 0;
  }

  .map-embed-wrapper.svelte-5dla5k {
    width: 100%;
    height: 430px;
    border-radius: 12px;
    overflow: hidden;
  }

  .map-embed-wrapper.svelte-5dla5k iframe:where(.svelte-5dla5k) {
    width: 100%;
    height: 100%;
    display: block;
    border: 0;
  }

  /* Responsive */
  @media (max-width: 1024px) {
    .contact-container.svelte-5dla5k {
      grid-template-columns: 1fr;
      gap: 3rem;
    }
  }

  @media (max-width: 768px) {
    .contact-page.svelte-5dla5k {
      padding: 3rem 5%;
    }
  }

  @media (max-width: 480px) {
   .contact-page.svelte-5dla5k {
      max-width: 480px;
      margin: 0 auto;
      margin-top: 3rem;
    }

    .contact-container.svelte-5dla5k {
      display: flex;
      flex-direction: column;
      gap: 1rem;
      align-items: center;
    }

    .contact-form-section.svelte-5dla5k {
      max-width: 342px;
      max-height: 1430px;
      border-radius: 12px;
      padding-top: 16px;
      padding-left: 24px;
      padding-right: 24px;
    }

    .connect-label.svelte-5dla5k {
      font-size: 0.8rem;
      font-weight: 700;
      line-height: 16px;
      letter-spacing: 1.2px;
      vertical-align: middle;
      text-transform: uppercase;
      color: #0053CD;
    }

    .form-header.svelte-5dla5k {
      width: 90%;
    }

    .form-header.svelte-5dla5k h1:where(.svelte-5dla5k) {
      font-size: 2.25rem;
      font-weight: 800;
      line-height: 45px;
      letter-spacing: 0px;
      vertical-align: middle;
      margin-bottom: 1rem;
      color: #1B1C1C;
    }

    .intro-text.svelte-5dla5k {
      font-size: 1.125rem;
      line-height: 29.25px;
      letter-spacing: 0px;
      vertical-align: middle;
      color: #424654;
      max-width: 622px;
      margin-bottom: 2rem;
    }

    .contact-form.svelte-5dla5k {
      display: flex;
      flex-direction: column;
      gap: 1.25rem;
    }

    .name-email-row.svelte-5dla5k {
      display: flex;
      flex-direction: column;
      justify-content: space-evenly;
      gap: 16px;
    }

    .name-email-row.svelte-5dla5k .input-group:where(.svelte-5dla5k) {
      width: 100%;
    }

    .input-group.svelte-5dla5k label:where(.svelte-5dla5k) {
      font-weight: 600;
      margin-bottom: 6px;
      display: block;
      color: #333;
    }

    .input-group.svelte-5dla5k input:where(.svelte-5dla5k),
    .input-group.svelte-5dla5k textarea:where(.svelte-5dla5k) {
      width: 100%;
      padding: 14px 18px;
      border: 1px solid #e5e7eb;
      border-radius: 12px;
      font-size: 1rem;
      background: #f8f9fa;
    }

    .input-group.svelte-5dla5k textarea:where(.svelte-5dla5k) {
      min-height: 140px;
      resize: vertical;
    }

    .send-btn.svelte-5dla5k {
      background: #3F7CFF;
      color: white;
      border: none;
      padding: 16px 32px;
      border-radius: 9999px;
      font-weight: 600;
      font-size: 1.05rem;
      cursor: pointer;
      margin-top: 0.5rem;
      align-self: flex-start;
    }

    .contact-details.svelte-5dla5k {
      margin: 0 !important;
      padding: 0 !important;
    }

    /* Blue Contact Details Card */
    .blue-card.svelte-5dla5k {
      background-image: url('/contact-detail-background.svg');
      background-size: cover;
      background-position: center;
      background-repeat: no-repeat;
      color: white;
      border-radius: 20px;
      padding-left: 2rem;
      padding-top: 1rem;
      padding-bottom: 5rem;
    }

    .blue-card.svelte-5dla5k h3:where(.svelte-5dla5k) {
      margin-bottom: 2rem;
      font-size: 1.4rem;
    }

    .detail-item.svelte-5dla5k {
      display: flex;
      gap: 16px;
      margin-bottom: 1.75rem;
    }

    .detail-item.svelte-5dla5k img:where(.svelte-5dla5k) {
      width: 48px;
      height: 48px;
    }

    .detail-item.svelte-5dla5k:last-child {
      margin-bottom: 0;
    }

    .technical-card.svelte-5dla5k {
      background: #EAE7E8;
      border-radius: 12px;
      border: 1px solid #C2C6D7;
      padding: 2rem;
    }

    .technical-card.svelte-5dla5k p:where(.svelte-5dla5k) {
      font-size: 1rem;
      font-weight: 400;
      line-height: 26px;
      letter-spacing: 0px;
      vertical-align: middle;
      color: #424654;
    }

    .tech-header.svelte-5dla5k {
      display: flex;
      align-items: center;
      gap: 12px;
      margin-bottom: 1rem;
      font-weight: 700;
      font-size: 1.25rem;
      line-height: 28px;
      letter-spacing: 0px;
      vertical-align: middle;
      color: #1B1C1C;
    }

    .tech-buttons.svelte-5dla5k {
      display: flex;
      flex-direction: column;
      gap: 12px;
      margin-top: 2rem;
    }

    .tech-btn.svelte-5dla5k {
      flex: 1;
      padding-top: 8px;
      padding-bottom: 8px;
      padding-left: 16px;
      padding-right: 16px;
      border-radius: 8px;
      border: 1px solid #737786;
      background: #FFFFFF;
      color: #1B1C1C;
      font-size: 0.9;
      font-weight: 600;
      line-height: 20px;
      letter-spacing: 0px;
      text-align: center;
      cursor: pointer;
    }

    /* Map Section */
    .map-section.svelte-5dla5k {
      margin-top: 2rem;
      max-width: 100%;
      padding: 0;
      border-radius: 0;
      margin-bottom: 4rem;
    }

    .map-address.svelte-5dla5k {
      font-size: 1.2rem;
      line-height: 1.35;
      margin-bottom: 1rem;
    }

    .map-embed-wrapper.svelte-5dla5k {
      height: 320px;
      border-radius: 10px;
    }
  }


  .c2pa-page.svelte-rc1snj {
    max-width: 1060px;
    margin: 0 auto;
    padding: 2rem 5% 6rem;
    line-height: 1.7;
    font-size: 1.05rem;
  }

  h1.svelte-rc1snj {
    font-size: 2.9rem;
    font-weight: 800;
    color: #1a1b1e;
    margin-top: 3rem;
    margin-bottom: 0.5rem;
  }

  .last-updated.svelte-rc1snj {
    color: #64748b;
    font-size: 1rem;
    margin-bottom: 2rem;
  }

  h2.svelte-rc1snj {
    font-size: 1.75rem;
    font-weight: 700;
    color: #1a1b1e;
    margin: 3rem 0 1rem;
  }

  .card.svelte-rc1snj {
    background: #F8FAFC;
    border-radius: 16px;
    border: 1px solid #CBD5E133;
    padding: 1.75rem;
    margin-top: 1rem;
    margin-bottom: 1rem;
    box-shadow: 0 4px 15px rgba(0,0,0,0.05);
  }

  .two-column.svelte-rc1snj {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
    margin: 1.5rem 0;
  }

  .section-image.svelte-rc1snj {
    width: 100%;
    max-width: 800px;
    border-radius: 16px;
    margin: 2.5rem auto;
    display: block;
    box-shadow: 0 10px 30px rgba(0,0,0,0.08);
  }

  .trust-box.svelte-rc1snj {
    background: linear-gradient(90deg, #3F7CFF, #2563EB);
    color: white;
    border-radius: 20px;
    padding: 3rem 2.5rem;
    margin-top: 4rem;
    text-align: center;
  }

  .trust-box.svelte-rc1snj h3:where(.svelte-rc1snj) {
    font-size: 2rem;
    margin-bottom: 1rem;
    color: white;
  }

  .trust-buttons.svelte-rc1snj {
    display: flex;
    gap: 1rem;
    justify-content: center;
    margin-top: 2rem;
    flex-wrap: wrap;
  }

  .primary-btn.svelte-rc1snj, .secondary-btn.svelte-rc1snj {
    padding: 14px 32px;
    border-radius: 12px;
    font-weight: 600;
    cursor: pointer;
  }

  .primary-btn.svelte-rc1snj {
    background: white;
    color: #3F7CFF;
  }

  .secondary-btn.svelte-rc1snj {
    background: transparent;
    color: white;
    border: 2px solid white;
  }

  @media (max-width: 768px) {
    .two-column.svelte-rc1snj {
      grid-template-columns: 1fr;
    }
  }

  @media (max-width: 480px) {
    .c2pa-page.svelte-rc1snj {
      padding: 1.5rem 5%;
    }
    h1.svelte-rc1snj {
      font-size: 2.4rem;
    }
  }


  .maptech-page.svelte-1l1ojgn {
    max-width: 1060px;
    margin: 0 auto;
    padding: 2rem 5% 6rem;
    line-height: 1.7;
    font-size: 1.05rem;
  }

  h1.svelte-1l1ojgn {
    font-size: 3.2rem;
    font-weight: 800;
    color: #1a1b1e;
    margin-top: 3rem;
    margin-bottom: 0.5rem;
  }

  .last-updated.svelte-1l1ojgn {
    color: #64748b;
    font-size: 1rem;
    margin-bottom: 2rem;
  }

  h2.svelte-1l1ojgn {
    font-size: 1.75rem;
    font-weight: 700;
    color: #1a1b1e;
    margin: 3rem 0 1rem;
  }

  .card.svelte-1l1ojgn {
    background: #F8FAFC;
    border-radius: 16px;
    border: 1px solid #CBD5E133;
    padding: 1.75rem;
    margin-top: 1rem;
    margin-bottom: 1rem;
    box-shadow: 0 4px 15px rgba(0,0,0,0.05);
  }

  .two-column.svelte-1l1ojgn {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
    margin: 1.5rem 0;
  }

  .section-image.svelte-1l1ojgn {
    width: 50%;
    max-width: 800px;
    border-radius: 16px;
    margin: 2.5rem auto;
    display: block;
    box-shadow: 0 10px 30px rgba(0,0,0,0.08);
  }

  .trust-box.svelte-1l1ojgn {
    background: linear-gradient(90deg, #3F7CFF, #2563EB);
    color: white;
    border-radius: 20px;
    padding: 3rem 2.5rem;
    margin-top: 4rem;
    text-align: center;
  }

  .trust-box.svelte-1l1ojgn h3:where(.svelte-1l1ojgn) {
    font-size: 2rem;
    margin-bottom: 1rem;
    color: white;
  }

  .trust-buttons.svelte-1l1ojgn {
    display: flex;
    gap: 1rem;
    justify-content: center;
    margin-top: 2rem;
    flex-wrap: wrap;
  }

  .primary-btn.svelte-1l1ojgn, .secondary-btn.svelte-1l1ojgn {
    padding: 14px 32px;
    border-radius: 12px;
    font-weight: 600;
    cursor: pointer;
  }

  .primary-btn.svelte-1l1ojgn {
    background: white;
    color: #3F7CFF;
  }

  .secondary-btn.svelte-1l1ojgn {
    background: transparent;
    color: white;
    border: 2px solid white;
  }

  .two-column.svelte-1l1ojgn .intro:where(.svelte-1l1ojgn) {
    padding-top: 2rem;
    margin-top: 6rem;
    font-size: 1.25rem;
    font-weight: 400;
  }

  .two-column.svelte-1l1ojgn .section-image:where(.svelte-1l1ojgn) {
    width: 80% !important;
  }

  @media (max-width: 768px) {
    .two-column.svelte-1l1ojgn {
      grid-template-columns: 1fr;
    }
  }

  @media (max-width: 480px) {
    .maptech-page.svelte-1l1ojgn {
      padding: 1.5rem 5%;
    }
    h1.svelte-1l1ojgn {
      font-size: 2.4rem;
    }

    .two-column.svelte-1l1ojgn .intro:where(.svelte-1l1ojgn) {
    padding-top: 1rem;
    margin-top: 1rem;
    font-size: 1.25rem;
    font-weight: 400;
  }

  .section-image.svelte-1l1ojgn {
    width: 100%;
  }

  .two-column.svelte-1l1ojgn .section-image:where(.svelte-1l1ojgn) {
    width: 100% !important;
  }
  }


  .hero.svelte-1468ezy {
    display: flex;
    align-items: center;
    justify-content: center;
    padding-top: 7rem /* 112px */;
    padding-bottom: 7rem /* 112px */;
    padding-left: 5.5rem /* 120px */;
    padding-right: 0px;
    background-color: #FFFFFF;
    flex-wrap: wrap;
  }

  .text-content.svelte-1468ezy {
    flex: 1;
    max-width: 100%;
    padding: 1rem;
    max-width: 1280px;
  }

  .text-content.svelte-1468ezy h1:where(.svelte-1468ezy) {
    font-size: 2rem;
    font-weight: bold;
    color: #1a1a1a;
  }

  .text-content.svelte-1468ezy p:where(.svelte-1468ezy) {
    font-size: 1.2rem;
    margin-top: 1rem;
    color: #555;
  }

  .hero-st-container.svelte-1468ezy {
    display: inline-flex;
    align-items: center;
    justify-content: start;
    padding-top: 4px;
    padding-bottom: 5px;
    padding-right: 24px;
    padding-left: 0px;
    border-radius: 9999px;
    background-color: #d7e2ff;
    width: auto;
    height: 40px;
  }

  .hero-st-container.svelte-1468ezy li:where(.svelte-1468ezy) {
    width: 8;
    height: 8;
    color: #3f7cff;
  }

  .hero-st-container.svelte-1468ezy li:where(.svelte-1468ezy) p:where(.svelte-1468ezy) {
    font-weight: 700;
    font-style: bold;
    font-size: 12px;
    line-height: 16px;
    letter-spacing: 0.6px;
    vertical-align: middle;
    text-transform: uppercase;
    color: #3F7CFF;
  }

  .hero-title.svelte-1468ezy {
    font-size: 72px !important;
    font-weight: 800 !important;
    line-height: 100%;
    letter-spacing: 0px;
    vertical-align: middle;
    margin-top: 24px;
    padding-right: 50px;
    color: #1a1b1e;
    max-width: 1280px;
  }

  .hero-title.svelte-1468ezy span:where(.svelte-1468ezy) {
    color: #3f7cff;
  }

  .hero-description.svelte-1468ezy {
    font-size: 20px;
    margin-top: 16px;
    font-weight: 300;
    font-style: light;
    line-height: 32.5px;
    letter-spacing: 0px;
    vertical-align: middle;
    color: #44474F;
    max-width: 652px;
  }

  .hero-actions.svelte-1468ezy {
    display: flex;
    gap: 16px;
    margin-top: 24px;
  }

  .primary-btn.svelte-1468ezy {
    background-color: #3f7cff;
    color: #fff;
    border: none;
    padding: 12px 24px;
    border-radius: 12px;
    font-size: 16px;
    cursor: pointer;
  }

  .secondary-btn.svelte-1468ezy {
    background-color: #e5e7eb;
    color: #111827;
    border: none;
    padding: 12px 24px;
    border-radius: 12px;
    font-size: 16px;
    cursor: pointer;
  }

  .image-content.svelte-1468ezy {
    flex: 1;
    max-width: 100%;
    display: flex;
    justify-content: center;
  }

  .image-content.svelte-1468ezy img:where(.svelte-1468ezy) {
    width: 100%;
    max-width: 550px;
    border-top-right-radius: 15px;
    border-bottom-right-radius: 15px;
  }

  .section-heading.svelte-1468ezy {
    font-size: 2.85rem;
    font-weight: 800;
    line-height: 1.1;
    text-align: center;
    margin-bottom: 2.5rem;
  }

  .why-section.svelte-1468ezy {
    background: #F6F3F8;
    padding-bottom: 2rem;
  }

  .why-section.svelte-1468ezy .content:where(.svelte-1468ezy) {
    padding: 2rem;
    margin: 2rem;
  }

  .how-section.svelte-1468ezy {
    padding: 2rem;
    margin: 2rem;
  }

  .step-number.svelte-1468ezy {
    font-size: 3.5rem;
    font-weight: 300;
    color: #e5e7eb;
    line-height: 1;
    min-width: 60px;
    flex-shrink: 0;
  }

  /* .screenshots-section {
    padding: 2rem;
    margin: 2rem;
  } */

  /* .screenshot-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 2rem;
  } */
  
  .why-grid.svelte-1468ezy, .steps-grid.svelte-1468ezy {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 2rem;
  }
  
  .why-card.svelte-1468ezy, .step.svelte-1468ezy {
    background: #FFFFFF;
    border-radius: 16px;
    padding: 2rem;
  }
  
  /* .platform-title {
    font-size: 1.5rem;
    font-weight: 700;
    color: #3F7CFF;
    margin: 3rem 0 1.5rem;
    text-align: center;
  } */
  
  .step-image.svelte-1468ezy {
    width: 100%;
    border-radius: 12px;
    margin-top: 1.5rem;
    box-shadow: 0 10px 25px rgba(0,0,0,0.1);
  }
  
  .beta-section.svelte-1468ezy {
    background: #F5F3F4;
    padding: 5rem 5%;
  }
  
  .beta-subtitle.svelte-1468ezy {
    text-align: center;
    max-width: 620px;
    margin: 0 auto 3rem;
    font-size: 1.25rem;
  }

  .contact-container.svelte-1468ezy {
    display: grid;
    grid-template-columns: 1fr 480px;
    gap: 1rem;
    align-items: start;
  }

  .contact-form-section.svelte-1468ezy {
    width: 690.75px;
    height: 530px;
    border-radius: 12px;
    border: 1px solid #C2C6D7;
    box-shadow: 2 #0000000D;
    background-color: #FFFFFF;
    padding-top: 48px;
    padding-left: 48px;
    padding-right: 48px;
  }

  .contact-form.svelte-1468ezy {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
  }

  .name-email-row.svelte-1468ezy {
    display: flex;
    flex-direction: row;
    justify-content: space-evenly;
    gap: 16px;
  }

  .name-email-row.svelte-1468ezy .input-group:where(.svelte-1468ezy) {
    width: 50%;
  }

  .input-group.svelte-1468ezy label:where(.svelte-1468ezy) {
    font-weight: 600;
    margin-bottom: 6px;
    display: block;
    color: #333;
  }

  .input-group.svelte-1468ezy input:where(.svelte-1468ezy),
  .input-group.svelte-1468ezy textarea:where(.svelte-1468ezy) {
    width: 100%;
    padding: 14px 18px;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    font-size: 1rem;
    background: #f8f9fa;
  }

  .input-group.svelte-1468ezy textarea:where(.svelte-1468ezy) {
    min-height: 140px;
    resize: vertical;
  }

  .send-btn.svelte-1468ezy {
    background: #3F7CFF;
    color: white;
    border: none;
    padding: 16px 32px;
    border-radius: 9999px;
    font-weight: 600;
    font-size: 1.05rem;
    cursor: pointer;
    margin-top: 0.5rem;
    align-self: flex-start;
  }

  .contact-details.svelte-1468ezy {
    margin: 0 !important;
    padding: 0 !important;
  }

  /* Blue Contact Details Card */
  .blue-card.svelte-1468ezy {
    background-image: url('/contact-detail-background.svg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    color: white;
    border-radius: 20px;
    padding-left: 2rem;
    padding-top: 1rem;
    padding-bottom: 5rem;
  }

  .blue-card.svelte-1468ezy h3:where(.svelte-1468ezy) {
    margin-bottom: 2rem;
    font-size: 1.4rem;
  }

  .detail-item.svelte-1468ezy {
    display: flex;
    gap: 16px;
    margin-bottom: 1.75rem;
  }

  .detail-item.svelte-1468ezy img:where(.svelte-1468ezy) {
    width: 48px;
    height: 48px;
  }

  .detail-item.svelte-1468ezy:last-child {
    margin-bottom: 0;
  }

  /* .technical-card {
    background: #EAE7E8;
    border-radius: 12px;
    border: 1px solid #C2C6D7;
    padding: 2rem;
  }

  .technical-card p {
    font-size: 1rem;
    font-weight: 400;
    line-height: 26px;
    letter-spacing: 0px;
    vertical-align: middle;
    color: #424654;
  }

  .tech-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 1rem;
    font-weight: 700;
    font-size: 1.25rem;
    line-height: 28px;
    letter-spacing: 0px;
    vertical-align: middle;
    color: #1B1C1C;
  }

  .tech-buttons {
    display: flex;
    gap: 12px;
    margin-top: 2rem;
  }

  .tech-btn {
    flex: 1;
    padding-top: 8px;
    padding-bottom: 8px;
    padding-left: 16px;
    padding-right: 16px;
    border-radius: 8px;
    border: 1px solid #737786;
    background: #FFFFFF;
    color: #1B1C1C;
    font-size: 0.9;
    font-weight: 600;
    line-height: 20px;
    letter-spacing: 0px;
    text-align: center;
    cursor: pointer;
  } */

  /* Responsive */
  @media (max-width: 1024px) {
    .contact-container.svelte-1468ezy {
      grid-template-columns: 1fr;
      gap: 3rem;
    }
  }

  @media (max-width: 768px) {
     .hero.svelte-1468ezy {
      flex-direction: column;
      align-items: center;
      text-align: center;
      padding-right: 0;
      padding-left: 0;
      width: 90%;
    }

    .text-content.svelte-1468ezy h1:where(.svelte-1468ezy) {
      font-size: 1.8rem;
    }
  }

  @media (max-width: 480px) {
   .hero.svelte-1468ezy {
      display: flex;
      align-items: start;
      justify-content: start;
      padding-top: 5rem;
      padding-bottom: 3rem;
      padding-left: 30px;
      background-color: #fdfbff;
      flex-wrap: wrap;
    }

    .text-content.svelte-1468ezy {
      flex: 1;
      max-width: 100%;
      padding-top: 10px;
      padding-bottom: 10px;
      padding-left: 10px;
      padding-right: 0px;
      max-width: 480px;
    }

     .hero-st-container.svelte-1468ezy {
      display: flex;
      align-items: left;
      justify-content: left;
      padding-top: 6px;
      padding-bottom: 6px;
      padding-right: 8px;
      padding-left: 0px;
      border-radius: 9999px;
      background-color: #d7e2ff;
      max-width: 200px;
      height: 40px;
    }

    .text-content.svelte-1468ezy p:where(.svelte-1468ezy) {
      margin-left: 0px;
      font-size: 1rem;
      margin-top: 0.6rem;
      margin-right: 1rem;
      color: #555;
    }

    .hero-title.svelte-1468ezy {
      font-size: 48px !important;
      font-weight: 800 !important;
      line-height: 52.8px;
      letter-spacing: -1.2px;
      vertical-align: middle;
      margin-top: 24px;
      margin-right: 0px;
      padding-right: 10px;
      padding-bottom: 22.8px;
      color: #1a1b1e;
      max-width: 480px;
      text-align: start;
    }

    .hero-description.svelte-1468ezy {
      font-size: 20px;
      margin-top: 16px;
      font-weight: 300;
      font-style: light;
      line-height: 32.5px;
      letter-spacing: 0px;
      vertical-align: middle;
      color: #44474F;
      max-width: 520px;
      text-align: left;
    }

    .hero-actions.svelte-1468ezy {
      display: flex;
      flex-direction: column;
      gap: 8px;
      margin-top: 24px;
      margin-right: 2rem;
    }

    .image-content.svelte-1468ezy {
      flex: 1;
      max-width: 90%;
      display: flex;
      justify-content: center;
    }

    .image-content.svelte-1468ezy img:where(.svelte-1468ezy) {
      width: 100%;
      max-width: 450px;
      border-radius: 15px;
    }

    .section-heading.svelte-1468ezy {
      font-size: 1.85rem;
      font-weight: 800;
      line-height: 1.1;
      text-align: center;
      margin-bottom: 2.5rem;
    }

    .why-grid.svelte-1468ezy, .steps-grid.svelte-1468ezy {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      gap: 2rem;
    }

    .why-card.svelte-1468ezy {
      width: 280px;
    }
    
    .why-card.svelte-1468ezy, .step.svelte-1468ezy {
      background: #FFFFFF;
      border-radius: 16px;
      padding: 1rem;
    }

    .how-section.svelte-1468ezy {
      padding: 1rem;
      margin: 1rem;
    }

    .how-section.svelte-1468ezy .step:where(.svelte-1468ezy) {
      width: 320px;
    }

    /* Blue Contact Details Card */
    .blue-card.svelte-1468ezy {
      background-image: url('/contact-detail-background.svg');
      background-size: cover;
      background-position: center;
      background-repeat: no-repeat;
      color: white;
      border-radius: 20px;
      padding-left: 2rem;
      padding-right: 5rem;
      padding-top: 1rem;
      padding-bottom: 7rem;
    }

    .blue-card.svelte-1468ezy h3:where(.svelte-1468ezy) {
      margin-bottom: 2rem;
      font-size: 1.4rem;
    }

    .detail-item.svelte-1468ezy {
      display: flex;
      gap: 16px;
      margin-bottom: 1.75rem;
    }

    .detail-item.svelte-1468ezy img:where(.svelte-1468ezy) {
      width: 48px;
      height: 48px;
    }

    .detail-item.svelte-1468ezy:last-child {
      margin-bottom: 0;
    }

    /* .technical-card {
      background: #EAE7E8;
      border-radius: 12px;
      border: 1px solid #C2C6D7;
      padding: 2rem;
    }

    .technical-card p {
      font-size: 1rem;
      font-weight: 400;
      line-height: 26px;
      letter-spacing: 0px;
      vertical-align: middle;
      color: #424654;
    }

    .tech-header {
      display: flex;
      align-items: center;
      gap: 12px;
      margin-bottom: 1rem;
      font-weight: 700;
      font-size: 1.25rem;
      line-height: 28px;
      letter-spacing: 0px;
      vertical-align: middle;
      color: #1B1C1C;
    }

    .tech-buttons {
      display: flex;
      flex-direction: column;
      gap: 12px;
      margin-top: 2rem;
    }

    .tech-btn {
      flex: 1;
      padding-top: 8px;
      padding-bottom: 8px;
      padding-left: 16px;
      padding-right: 16px;
      border-radius: 8px;
      border: 1px solid #737786;
      background: #FFFFFF;
      color: #1B1C1C;
      font-size: 0.9;
      font-weight: 600;
      line-height: 20px;
      letter-spacing: 0px;
      text-align: center;
      cursor: pointer;
    } */

    .beta-section.svelte-1468ezy {
      padding: 1.5rem;
    }

    .beta-section.svelte-1468ezy .section-heading:where(.svelte-1468ezy) {
      font-size: 1.8rem;
      font-weight: 700;
      line-height: 16px;
      text-align: center;
      margin-bottom: 2.5rem;
    }

    .beta-subtitle.svelte-1468ezy {
      text-align: center;
      max-width: 470px;
      margin: 0 auto 3rem;
      font-size: 1rem;
    }

  
    .contact-container.svelte-1468ezy {
      display: flex;
      max-width: 420px;
      flex-direction: column;
      gap: 1rem;
      align-items: center;
    }

    .contact-form-section.svelte-1468ezy {
      max-width: 302px;
      height: 630px;
      border-radius: 12px;
      padding-top: 16px;
      padding-left: 24px;
      padding-right: 24px;
    }

    .contact-form.svelte-1468ezy {
      display: flex;
      flex-direction: column;
      gap: 1.25rem;
    }

    .name-email-row.svelte-1468ezy {
      display: flex;
      flex-direction: column;
      justify-content: space-evenly;
      gap: 16px;
    }

    .name-email-row.svelte-1468ezy .input-group:where(.svelte-1468ezy) {
      width: 100%;
    }

    .input-group.svelte-1468ezy label:where(.svelte-1468ezy) {
      font-weight: 600;
      margin-bottom: 6px;
      display: block;
      color: #333;
    }

    .input-group.svelte-1468ezy input:where(.svelte-1468ezy),
    .input-group.svelte-1468ezy textarea:where(.svelte-1468ezy) {
      width: 100%;
      padding: 14px 18px;
      border: 1px solid #e5e7eb;
      border-radius: 12px;
      font-size: 1rem;
      background: #f8f9fa;
    }

    .input-group.svelte-1468ezy textarea:where(.svelte-1468ezy) {
      min-height: 140px;
      resize: vertical;
    }

    .send-btn.svelte-1468ezy {
      background: #3F7CFF;
      color: white;
      border: none;
      padding: 16px 32px;
      border-radius: 9999px;
      font-weight: 600;
      font-size: 1.05rem;
      cursor: pointer;
      margin-top: 0.5rem;
      align-self: flex-start;
    }
  }


  body {
    --sidebar-width: 260px;
    --app-header-height: 72px;
  }

  .app-main.svelte-1n46o8q {
    transition: padding-left 0.25s ease;
  }

  @media (max-width: 768px) {
    body {
      --app-header-height: 64px;
    }
  }

  @media (min-width: 1024px) {
    body.sidebar-open .app-main.svelte-1n46o8q {
      padding-left: var(--sidebar-width);
    }
  }