#deelOverlay {
      display: none;
      position: fixed; inset: 0;
      background: rgba(0,0,0,0);
      backdrop-filter: blur(0px);
      -webkit-backdrop-filter: blur(0px);
      z-index: 1000;
      transition: background .3s ease, backdrop-filter .3s ease;
    }
    #deelOverlay.open { background: rgba(0,0,0,.55); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }

    #deelSheet {
      position: fixed;
      bottom: 0; left: 50%;
      transform: translateX(-50%) translateY(100%);
      width: min(460px, 100vw);
      z-index: 1001;
      background: var(--panel);
      border-radius: 28px 28px 0 0;
      padding: 0 1.5rem calc(2rem + env(safe-area-inset-bottom));
      border-top: 1px solid rgba(255,255,255,.07);
      box-shadow: 0 -12px 60px rgba(0,0,0,.45), 0 -1px 0 rgba(255,255,255,.05) inset;
      transition: transform .42s cubic-bezier(.25,1.6,.4,1);
    }
    #deelSheet.open { transform: translateX(-50%) translateY(0); }

    .ds-grip {
      width: 44px; height: 5px;
      background: var(--border2);
      border-radius: 99px;
      margin: 1.1rem auto .2rem;
      opacity: .6;
    }
    .ds-header {
      display: flex; align-items: center; justify-content: center;
      gap: .55rem;
      padding: .9rem 0 1.1rem;
      border-bottom: 1px solid var(--border);
      margin-bottom: 1.1rem;
    }
    .ds-icon {
      width: 32px; height: 32px; border-radius: 8px;
      display: flex; align-items: center; justify-content: center;
      font-size: 1.1rem;
    }
    .ds-title {
      font-size: .88rem; font-weight: 700;
      color: var(--text); letter-spacing: -.01em;
    }
    .ds-subtitle {
      font-size: .73rem; color: var(--sub);
      text-align: center; line-height: 1.5;
      margin-bottom: 1.1rem;
      padding: 0 .3rem;
    }
    .ds-actions { display: flex; flex-direction: column; gap: .55rem; margin-bottom: .9rem; }

    .ds-btn {
      display: flex; align-items: center; gap: 1rem;
      padding: .85rem 1.1rem;
      border-radius: 16px;
      border: 1.5px solid var(--border2);
      background: var(--bg2);
      color: var(--text);
      font-size: .88rem; font-weight: 600;
      font-family: var(--font);
      cursor: pointer;
      text-align: left;
      transition: border-color .15s, background .15s, transform .12s;
      -webkit-tap-highlight-color: transparent;
    }
    .ds-btn:active { transform: scale(.97); }
    .ds-btn.wa {
      border-color: rgba(37,211,102,.35);
      background: rgba(37,211,102,.07);
    }
    .ds-btn.wa:hover { border-color: #25d366; background: rgba(37,211,102,.13); }
    .ds-btn:not(.wa):hover { border-color: var(--accent); }

    .ds-btn-icon {
      width: 38px; height: 38px; border-radius: 12px;
      display: flex; align-items: center; justify-content: center;
      flex-shrink: 0;
    }
    .ds-btn.wa .ds-btn-icon { background: #25d366; }
    .ds-btn:not(.wa) .ds-btn-icon { background: var(--panel2); }

    .ds-btn-label { display: flex; flex-direction: column; gap: .15rem; }
    .ds-btn-label strong { font-size: .88rem; font-weight: 700; }
    .ds-btn-label span { font-size: .72rem; color: var(--sub); font-weight: 400; }

    .ds-cancel {
      width: 100%; padding: .75rem;
      border-radius: 14px; border: none;
      background: transparent;
      color: var(--sub); font-size: .84rem;
      font-family: var(--font); cursor: pointer;
      transition: color .15s;
    }
    .ds-cancel:hover { color: var(--text); }

    .ds-vivlo-tag {
      display: flex; align-items: center; justify-content: center;
      gap: .4rem;
      font-size: .7rem; color: var(--dim);
      margin-bottom: .6rem;
    }
    .ds-vivlo-tag svg { opacity: .45; }