:root {
      --wr-size: 80px;
    }
    
    .wr-float-btn {
      position: fixed;
      width: var(--wr-size);
      height: var(--wr-size);
      left: 15px;
      top: 200px;
      z-index: 9999;
      touch-action: none;
      -webkit-user-select: none;
      user-select: none;
      display: flex;
      align-items: center;
      border-radius: 20px;
      overflow: hidden;
      transition: width .3s ease, box-shadow .3s ease, background .3s ease;
      background: transparent;
      box-shadow: none;
    }
    
    .wr-float-btn.expanded {
      width: calc(var(--wr-size) * 3);
      background: #0f0f0fd0;
      box-shadow: 0 8px 20px rgba(10, 15, 30, .18);
    }

    .wr-btn-img {
      flex: 0 0 var(--wr-size);
      height: var(--wr-size);
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: 20px;
      overflow: hidden;
    }
    
    .wr-btn-img img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      border-radius: 20px;
    }

    .wr-btn-extra {
      flex: 1;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 16px;
      font-weight: 600;
      color: #fff;
      height: 100%;
      cursor: pointer;
      opacity: 0;
      pointer-events: none;
      transition: opacity .2s ease;
    }
    
    .wr-float-btn.expanded .wr-btn-extra {
      opacity: 1;
      pointer-events: auto;
    }

    .wr-dragging {
      transition: none !important;
    }

    .wr-modal-overlay {
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background: rgba(0, 0, 0, .5);
      display: flex;
      align-items: center;
      justify-content: center;
      z-index: 10000;
      visibility: hidden;
      opacity: 0;
      transition: opacity .3s ease;
      pointer-events: none;
    }
    
    .wr-modal-overlay.active {
      visibility: visible;
      opacity: 1;
      pointer-events: auto;
    }

    .wr-modal {
      background: #fff;
      border-radius: 16px;
      padding: 24px;
      width: 280px;
      text-align: center;
      box-shadow: 0 8px 24px rgba(0, 0, 0, .25);
      position: relative;
      margin: 0 auto;
      color: #000;
    }
    
    .wr-checkmark {
      font-size: 48px;
      color: green;
      opacity: 0;
      transition: opacity 1s ease;
      background: url('https://ap1.respin123.cloud/misc/cekmark.webp') center/contain no-repeat;
      width: 60px;
      height: 60px;
      margin: 0 auto;
    }
    
    .wr-percentage {
      font-size: 24px;
      font-weight: bold;
      margin: 12px 0;
      opacity: 0;
      transition: opacity 1s ease;
    }
    
    .wr-message {
      font-size: 16px;
    }

    .wr-visible {
      opacity: 1 !important;
    }