Team Invite & Role Management Card

<div class="shadow-[0_10px_40px_-10px_rgba(0,0,0,0.5),inset_0_1px_0_0_rgba(255,255,255,0.06)] overflow-hidden border-white/10 border rounded-3xl backdrop-blur-xl max-w-xl text-white">
      <!-- Invite Bar -->
      <div class="sm:p-6 border-white/10 border-b pt-5 pr-5 pb-5 pl-5">
        <div class="flex flex-col sm:flex-row gap-3 items-stretch">
          <div class="relative flex-1">
            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="user-plus" class="lucide lucide-user-plus pointer-events-none absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-white/50"><path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2"></path><circle cx="9" cy="7" r="4"></circle><line x1="19" x2="19" y1="8" y2="14"></line><line x1="22" x2="16" y1="11" y2="11"></line></svg>
            <input type="email" placeholder="Add teammate by email…" class="w-full h-11 pl-10 pr-4 rounded-xl bg-white/[0.05] border border-white/10 text-sm placeholder-white/50 text-white focus:outline-none focus:ring-2 focus:ring-white/10 focus:border-white/20">
          </div>

          <!-- Custom role dropdown -->
          <div class="relative">
            <button id="roleToggle" type="button" class="h-11 inline-flex items-center gap-2 px-3 sm:px-4 rounded-xl bg-white/[0.05] border border-white/10 text-sm text-white/80 hover:text-white transition">
              <span class="text-white/80">as</span>
              <span id="roleLabel" class="font-medium tracking-tight">Contributor</span>
              <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="chevron-down" class="lucide lucide-chevron-down w-4 h-4 opacity-70"><path d="m6 9 6 6 6-6"></path></svg>
            </button>
            <div id="roleMenu" class="hidden absolute right-0 mt-2 w-48 rounded-xl bg-zinc-950/90 backdrop-blur border border-white/10 shadow-2xl overflow-hidden">
              <button data-role="Viewer" class="w-full text-left px-3.5 py-2.5 text-sm hover:bg-white/5 flex items-center gap-2">
                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="eye" class="lucide lucide-eye w-4 h-4 text-white/70"><path d="M2.062 12.348a1 1 0 0 1 0-.696 10.75 10.75 0 0 1 19.876 0 1 1 0 0 1 0 .696 10.75 10.75 0 0 1-19.876 0"></path><circle cx="12" cy="12" r="3"></circle></svg>
                <span>Viewer</span>
              </button>
              <button data-role="Contributor" class="w-full text-left px-3.5 py-2.5 text-sm hover:bg-white/5 flex items-center gap-2">
                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="pencil-line" class="lucide lucide-pencil-line w-4 h-4 text-white/70"><path d="M13 21h8"></path><path d="m15 5 4 4"></path><path d="M21.174 6.812a1 1 0 0 0-3.986-3.987L3.842 16.174a2 2 0 0 0-.5.83l-1.321 4.352a.5.5 0 0 0 .623.622l4.353-1.32a2 2 0 0 0 .83-.497z"></path></svg>
                <span>Contributor</span>
              </button>
              <button data-role="Maintainer" class="w-full text-left px-3.5 py-2.5 text-sm hover:bg-white/5 flex items-center gap-2">
                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="wrench" class="lucide lucide-wrench w-4 h-4 text-white/70"><path d="M14.7 6.3a1 1 0 0 0 0 1.4l1.6 1.6a1 1 0 0 0 1.4 0l3.106-3.105c.32-.322.863-.22.983.218a6 6 0 0 1-8.259 7.057l-7.91 7.91a1 1 0 0 1-2.999-3l7.91-7.91a6 6 0 0 1 7.057-8.259c.438.12.54.662.219.984z"></path></svg>
                <span>Maintainer</span>
              </button>
              <button data-role="Admin" class="w-full text-left px-3.5 py-2.5 text-sm hover:bg-white/5 flex items-center gap-2">
                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="shield" class="lucide lucide-shield w-4 h-4 text-white/70"><path d="M20 13c0 5-3.5 7.5-7.66 8.95a1 1 0 0 1-.67-.01C7.5 20.5 4 18 4 13V6a1 1 0 0 1 1-1c2 0 4.5-1.2 6.24-2.72a1.17 1.17 0 0 1 1.52 0C14.51 3.81 17 5 19 5a1 1 0 0 1 1 1z"></path></svg>
                <span>Admin</span>
              </button>
            </div>
          </div>

          <button class="h-11 px-4 rounded-xl bg-indigo-500 hover:bg-indigo-500/90 text-sm font-medium tracking-tight shadow-lg shadow-indigo-500/25">
            Invite
          </button>
        </div>
      </div>

      <!-- Members list -->
      <div class="p-5 sm:p-6 space-y-3">
        <div class="flex items-center justify-between rounded-2xl border border-white/10 bg-white/[0.035] px-3.5 py-3">
          <div class="flex items-center gap-3">
            <div class="w-8 h-8 rounded-full bg-gradient-to-br from-indigo-500 to-purple-600 grid place-items-center ring-1 ring-white/20">
              <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="shield" class="lucide lucide-shield w-4 h-4 text-white"><path d="M20 13c0 5-3.5 7.5-7.66 8.95a1 1 0 0 1-.67-.01C7.5 20.5 4 18 4 13V6a1 1 0 0 1 1-1c2 0 4.5-1.2 6.24-2.72a1.17 1.17 0 0 1 1.52 0C14.51 3.81 17 5 19 5a1 1 0 0 1 1 1z"></path></svg>
            </div>
            <span class="text-sm font-medium">alex.murphy@orbitops.io</span>
          </div>
          <div class="flex items-center gap-2">
            <span class="text-sm text-white/55">Admin</span>
            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="chevron-down" class="lucide lucide-chevron-down w-4 h-4 text-white/40"><path d="m6 9 6 6 6-6"></path></svg>
          </div>
        </div>

        <div class="flex items-center justify-between rounded-2xl border border-white/10 bg-white/[0.035] px-3.5 py-3">
          <div class="flex items-center gap-3">
            <div class="w-8 h-8 rounded-full bg-gradient-to-br from-cyan-500 to-emerald-500 grid place-items-center ring-1 ring-white/20">
              <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="diamond" class="lucide lucide-diamond w-4 h-4 text-white"><path d="M2.7 10.3a2.41 2.41 0 0 0 0 3.41l7.59 7.59a2.41 2.41 0 0 0 3.41 0l7.59-7.59a2.41 2.41 0 0 0 0-3.41l-7.59-7.59a2.41 2.41 0 0 0-3.41 0Z"></path></svg>
            </div>
            <span class="text-sm font-medium">sara.nguyen@lumos.dev</span>
          </div>
          <div class="flex items-center gap-2">
            <span class="text-sm text-white/55">Product</span>
            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="chevron-down" class="lucide lucide-chevron-down w-4 h-4 text-white/40"><path d="m6 9 6 6 6-6"></path></svg>
          </div>
        </div>

        <div class="flex items-center justify-between rounded-2xl border border-white/10 bg-white/[0.035] px-3.5 py-3">
          <div class="flex items-center gap-3">
            <div class="w-8 h-8 rounded-full bg-gradient-to-br from-fuchsia-500 to-rose-500 grid place-items-center ring-1 ring-white/20">
              <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="code-2" class="lucide lucide-code-2 w-4 h-4 text-white"><path d="m18 16 4-4-4-4"></path><path d="m6 8-4 4 4 4"></path><path d="m14.5 4-5 16"></path></svg>
            </div>
            <span class="text-sm font-medium">mike.rios@helix.app</span>
          </div>
          <div class="flex items-center gap-2">
            <span class="text-sm text-white/55">Engineer</span>
            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="chevron-down" class="lucide lucide-chevron-down w-4 h-4 text-white/40"><path d="m6 9 6 6 6-6"></path></svg>
          </div>
        </div>
      </div>

      <!-- Copy -->
      <div class="sm:p-8 pt-6 pr-6 pb-6 pl-6">
        <h2 class="text-2xl sm:text-3xl font-semibold tracking-tight">Granular Permission Layers</h2>
        <p class="mt-2 text-sm sm:text-base text-white/70">
          Protect your workspace with scoped roles, audit-ready activity trails, and least‑privilege defaults—designed for fast-moving teams.
        </p>
      </div>
    </div>