:root {
      --plyr-color-main: #4f46e5;
  }

  /* Tombol Earn */
  .earn-btn img {
      width: 28px;
      height: 28px;
  }

  .earn-btn:hover {
      background-color: #ffe733;
      /* sedikit lebih gelap saat hover */
  }

  /* Bagian join grup */
  .joingrup {
      display: flex;
      align-items: center;
      background: #37BBFE;
      color: rgb(247, 244, 244);
      margin: 10px;
      padding: 10px;
      border-radius: 10px;
      justify-content: space-around;
      gap: 14px;
      font-size: 12px;
  }

  .join-icon {
      background: aliceblue;
      border-radius: 10px;
      display: flex;
      justify-content: center;
      align-items: center;
  }

  .joingrup .join-icon svg {
      width: 48px;
      height: 48px;
  }

  a.join-btn {
      background: aliceblue;
      color: black;
      padding: 8px 10px;
      border-radius: 10px;
      font-weight: 500;
      font-size: 14px;
  }

  .join-btn:hover {
      opacity: 0.5;
  }

  .join-text {
      line-height: 1.5;
      margin: 0;
      padding: 0;
  }

  /* video container */
  .video {
      position: relative;
      width: 100%;
      max-width: 900px;
      height: 0;
      padding-top: 56.25%;
      background: #000;
      overflow: hidden;
  }

  .video .plyr {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
  }

  /* video player styles */
  .plyr.plyr--full-ui.plyr--video.plyr--html5.plyr--fullscreen-enabled.plyr--paused.plyr--stopped.plyr--pip-supported {
      width: 100%;
  }

  /* Bagian aksi video (link + tombol copy + tombol aksi) */
  .video-actions {
      background: #efefef;
      margin: 10px;
      border-radius: 10px;
      padding: 12px;
      display: flex;
      flex-direction: column;
      gap: 12px;
  }

  /* Bagian link + tombol copy */
  .video-links {
      position: relative;
      width: 100%;
  }

  textarea#videoLink {
      display: block;
      width: 100%;
      border: none;
      border-radius: 6px;
      padding: 10px 40px 10px 10px;
      resize: none;
      font-size: 14px;
      line-height: 1.4;
      min-height: 40px;
      box-sizing: border-box;
      background: #fff;
      color: #000;
  }

  button.copy-in {
      border: none;
      background: #4f46e5;
      color: #fff;
      border-radius: 5px;
      position: absolute;
      right: 6px;
      top: 50%;
      transform: translateY(-50%);
      outline: 0;
      text-align: center;
      font-weight: 700;
      padding: 6px 8px;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
  }

  button.copy-in:hover {
      background: #4338ca;
  }

  /* Bagian tombol aksi */
  .video-actions-inner {
      width: 100%;
      max-width: 720px;
      display: flex;
      gap: 8px;
      padding: 6px 0 0 0;
      overflow-x: auto;
      scrollbar-width: none;
      -ms-overflow-style: none;
      white-space: nowrap;
  }

  .video-actions-inner::-webkit-scrollbar {
      display: none;
  }

  .action-btn {
      display: flex;
      justify-content: center;
      align-items: center;
      background: #f2f2f2;
      border: none;
      padding: 6px 11px;
      border-radius: 16px;
      font-family: inherit;
      font-size: 14px;
      font-weight: 500;
      cursor: pointer;
      transition: background-color 0.2s;
      flex-shrink: 0;
      color: #000;
  }

  .action-btn svg {
      width: 20px;
      margin-right: 10px;

  }

  .action-btn:hover {
      background: #e5e5e5;
  }

  .earn-btn {
      display: inline-flex;
      align-items: center;
      gap: 4px;
      background-color: #fff35c;
      color: #000;
      font-weight: 600;
      font-size: small;
      padding: 5px;
      border-radius: 9999px;
      text-decoration: none;
      font-family: sans-serif;
      transition: background-color 0.2s;
  }

  /* 1. Gaya untuk Overlay (Latar Belakang Gelap) */
  #sensitive-overlay {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-color: rgb(20 20 20 / 31%);
      display: flex;
      justify-content: center;
      align-items: center;
      z-index: 9999;
      backdrop-filter: blur(15px);
      color: #e0e0e0;
      padding: 15px;
      box-sizing: border-box;
  }

  /* 2. Gaya untuk Kotak Pop-up */
  .popup-content {
      background-color: rgb(43 43 43 / 48%);
      padding: 30px 40px;
      border-radius: 12px;
      text-align: center;
      max-width: 400px;
      border: 1px solid #444;
  }

  .popup-content svg {
      margin-bottom: 1rem;
      color: #999;
  }

  .popup-content h2 {
      margin-top: 0;
      font-size: 1.5rem;
      color: #fff;
  }

  .popup-content p {
      margin-bottom: 1.5rem;
      line-height: 1.6;
  }

  .telegram-button {
    z-index: 9999999999999999999999;
    display: block;
    margin-bottom: 10px;
    backdrop-filter: blur(15px);
    background-color: rgb(50 50 255 / 40%);
    border: 1px solid #444;
    color: #FFF;
    border: none;
    padding: 12px 25px;
    border-radius: 8px;
    font-size: 1rem;
    font-weight: bold;
    cursor: pointer;
    transition: background-color 0.2s;
  }

  /* 3. Gaya untuk Tombol Konfirmasi */
  #confirm-button {
      background-color: #f0f0f0;
      color: #111;
      border: none;
      padding: 12px 25px;
      border-radius: 8px;
      font-size: 1rem;
      font-weight: bold;
      cursor: pointer;
      width: 100%;
      transition: background-color 0.2s;
  }

  #confirm-button:hover {
      background-color: #fff;
  }


  /* Responsive css */
  @media screen and (min-width: 900px) {
      .video {
          margin: auto;
      }
  }

  @media screen and (max-width: 600px) {
      .action-btn {
          font-size: 11px;
      }
  }