Harden audit privacy and admin modals

2026-06-26 20:47:07 +02:00
parent aeade132f9
commit 9393d433fa
17 changed files with 741 additions and 315 deletions
@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import { computed } from 'vue'
+import { LogOut, Shield, Trash2, Unlink, X } from '@lucide/vue'

 import type { AuthSession } from '../types/awards'

@@ -30,6 +31,7 @@ defineEmits<{
 const isTeamPasswordSession = computed(() => Boolean(props.session?.teamLogin && props.session.twitchUserId.startsWith('team:')))
 const isTwitchAuthenticated = computed(() => Boolean(props.session && !isTeamPasswordSession.value))
 const profileHandle = computed(() => props.session?.teamLogin ?? props.session?.twitchUserId ?? '')
+const displayInitial = computed(() => (props.session?.displayName ?? profileHandle.value).charAt(0).toUpperCase())
 const role = computed(() => props.session?.role ?? 'viewer')
 const isTeamSession = computed(() => Boolean(props.session?.teamLogin))
 const isParticipantSession = computed(() => !isTeamSession.value)
@@ -52,220 +54,269 @@ const logoutLabel = computed(() => !isTeamSession.value && isTwitchAuthenticated
 </script>

 <template>
+  <!-- ── Account Modal ─────────────────────────────────────── -->
  <Teleport to="body">
-    <div
-      v-if="accountOpen"
-      style="position:fixed;inset:0;z-index:300;display:flex;align-items:center;justify-content:center;padding:24px;background:rgba(40,24,70,.55);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);"
-      @click.self="$emit('close-account')"
+    <Transition
+      enter-active-class="transition duration-200 ease-out"
+      enter-from-class="opacity-0"
+      enter-to-class="opacity-100"
+      leave-active-class="transition duration-150 ease-in"
+      leave-from-class="opacity-100"
+      leave-to-class="opacity-0"
    >
-      <div style="position:relative;width:100%;max-width:480px;background:#fff;border-radius:24px;box-shadow:0 40px 90px rgba(40,24,70,.4);overflow:hidden;">
-        <div style="display:flex;align-items:center;justify-content:space-between;padding:24px 28px 18px;border-bottom:1px solid #f1ecfb;">
-          <div>
-            <div style="font-size:11px;font-weight:700;letter-spacing:2px;text-transform:uppercase;color:#8b6cdb;margin-bottom:4px;">Mein Profil</div>
-            <h2 style="font-family:'Cormorant Garamond',serif;font-weight:700;font-size:24px;margin:0;color:#3f3556;">@{{ profileHandle }}</h2>
-          </div>
-          <button
-            style="width:34px;height:34px;border-radius:50%;border:none;background:#f1ecfb;color:#8b6cdb;font-size:18px;cursor:pointer;display:flex;align-items:center;justify-content:center;"
-            @click="$emit('close-account')"
-          >
-            ✕
-          </button>
-        </div>
-        <div style="padding:24px 28px;display:flex;flex-direction:column;gap:16px;">
-          <div style="display:grid;grid-template-columns:auto 1fr;gap:8px 12px;padding:14px 16px;border-radius:16px;background:#f6f1fd;border:1px solid #ede4fb;">
-            <svg v-if="isTeamPasswordSession" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="#8b6cdb" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
-              <path d="M15 7a4 4 0 1 1-2.8-3.82" />
-              <path d="M13 5 21 13" />
-              <path d="M21 13 18 16" />
-              <path d="M18 13 16 15" />
-            </svg>
-            <svg v-else width="18" height="18" viewBox="0 0 24 24" fill="#9146FF" aria-hidden="true">
-              <path d="M4 2L2.4 6v14.5h5V23h2.7l2.5-2.5h4L21.6 16V2H4zm15.3 13.1l-2.9 2.9h-4.4l-2.5 2.5v-2.5H6.7V3.7h12.6v11.4z" />
-              <path d="M11.1 7.1h1.7v5h-1.7zM15.7 7.1h1.7v5h-1.7z" />
-            </svg>
-            <span style="font-size:14px;color:#5f44ad;font-weight:800;">{{ authStatusLabel }}</span>
-            <span style="grid-column:2;font-size:12.5px;color:#6f6685;line-height:1.45;">{{ authStatusText }}</span>
-          </div>
-          <div style="padding:16px;border-radius:14px;background:#fafafa;border:1px solid #f0eafc;">
-            <p style="font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:1.5px;color:#a99fc0;margin:0 0 10px;">Gespeicherte Daten</p>
-            <div style="display:flex;flex-direction:column;gap:7px;">
-              <div style="display:flex;justify-content:space-between;font-size:13.5px;">
-                <span style="color:#6f6685;">{{ primaryIdentityLabel }}</span>
-                <span style="font-weight:600;color:#3f3556;">@{{ profileHandle }}</span>
-              </div>
-              <div style="display:flex;justify-content:space-between;font-size:13.5px;">
-                <span style="color:#6f6685;">Rolle</span>
-                <span style="font-weight:700;color:#8b6cdb;text-transform:uppercase;font-size:11px;letter-spacing:1px;">{{ role }}</span>
-              </div>
-              <div v-if="showTeamLoginDetail" style="display:flex;justify-content:space-between;font-size:13.5px;">
-                <span style="color:#6f6685;">Team-Login</span>
-                <span style="font-weight:600;color:#3f3556;">@{{ session?.teamLogin }}</span>
-              </div>
-              <div v-if="session?.boundTwitchUserId" style="display:flex;justify-content:space-between;font-size:13.5px;">
-                <span style="color:#6f6685;">Gebundenes Twitch</span>
-                <span style="font-weight:600;color:#3f3556;">@{{ session.boundTwitchUserId }}</span>
-              </div>
-              <div v-if="isParticipantSession" style="display:flex;justify-content:space-between;font-size:13.5px;">
-                <span style="color:#6f6685;">Einreichungen</span>
-                <span style="font-weight:600;color:#3f3556;">Clips, Votes, Nominierungen</span>
-              </div>
-              <div v-if="isParticipantSession" style="display:flex;justify-content:space-between;font-size:13.5px;">
-                <span style="color:#6f6685;">Löschfrist</span>
-                <span style="font-weight:600;color:#059669;">März 2027 (auto.)</span>
-              </div>
-              <div v-else style="display:flex;justify-content:space-between;gap:16px;font-size:13.5px;">
-                <span style="color:#6f6685;">Accountverwaltung</span>
-                <span style="font-weight:600;color:#3f3556;text-align:right;">Team-Accounts bleiben bestehen und werden im Admin-Panel verwaltet.</span>
+      <div
+        v-if="accountOpen"
+        class="fixed inset-0 z-[300] flex items-end justify-center p-4 sm:items-center sm:p-6"
+        style="background:rgba(40,24,70,0.52);backdrop-filter:blur(6px);"
+        @click.self="$emit('close-account')"
+      >
+        <Transition
+          enter-active-class="transition duration-200 ease-out"
+          enter-from-class="opacity-0 translate-y-4 scale-[0.97] sm:translate-y-0"
+          enter-to-class="opacity-100 translate-y-0 scale-100"
+        >
+          <div class="w-full max-w-[480px] overflow-hidden rounded-3xl bg-white shadow-[0_40px_90px_rgba(40,24,70,0.38)]">
+
+            <!-- Header -->
+            <div class="flex items-center justify-between gap-4 border-b border-[#f1ecfb] bg-gradient-to-br from-[#f7f2ff] to-[#fff7ed] px-7 py-5">
+              <div class="flex items-center gap-3.5 min-w-0">
+                <div class="grid h-11 w-11 shrink-0 place-items-center rounded-2xl bg-gradient-to-br from-[#8b6cdb] to-[#7355c8] text-base font-bold text-white shadow-[0_6px_18px_rgba(124,86,196,0.3)]">
+                  {{ displayInitial }}
+                </div>
+                <div class="min-w-0">
+                  <p class="text-[10px] font-bold uppercase tracking-[0.2em] text-[#8b6cdb]">Mein Profil</p>
+                  <h2 class="truncate font-['Cormorant_Garamond'] text-2xl font-bold leading-tight text-[#3f3556]">
+                    @{{ profileHandle }}
+                  </h2>
+                </div>
              </div>
+              <button
+                type="button"
+                class="grid h-9 w-9 shrink-0 place-items-center rounded-full bg-[#f1ecfb] text-[#8b6cdb] transition hover:bg-[#e6dcf6]"
+                aria-label="Profil schließen"
+                @click="$emit('close-account')"
+              >
+                <X class="h-4 w-4" />
+              </button>
            </div>
-          </div>
-          <section
-            v-if="isTeamSession"
-            style="padding:16px;border-radius:14px;background:#f8f5ff;border:1px solid #ede4fb;display:grid;gap:12px;"
-          >
-            <div>
-              <p style="font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:1.5px;color:#8b6cdb;margin:0 0 4px;">Optionaler Admin-Login</p>
-              <p v-if="hasBoundTwitch" style="font-size:12.5px;color:#6f6685;margin:0;line-height:1.45;">
-                Dein Team-Account ist mit Twitch verbunden. Entfernst du die Verknüpfung, ist der Admin-Login per Twitch nicht mehr möglich.
-              </p>
-              <p v-else style="font-size:12.5px;color:#6f6685;margin:0;line-height:1.45;">
-                Verbinde deinen privaten Twitch-Account über den offiziellen Twitch Login. Danach kannst du dich im Admin-Panel per Twitch anmelden.
-              </p>
-            </div>
-            <div v-if="session?.boundTwitchUserId" style="display:flex;align-items:center;justify-content:space-between;gap:12px;padding:11px 12px;border-radius:12px;background:white;border:1px solid #ede4fb;font-size:13px;">
-              <span style="color:#6f6685;">Aktuell verbunden</span>
-              <span style="font-weight:800;color:#3f3556;">@{{ session.boundTwitchUserId }}</span>
-            </div>
-            <p v-if="session?.mustChangePassword" style="font-size:12.5px;color:#b45309;margin:0;font-weight:700;">Bitte ändere zuerst dein temporäres Passwort.</p>
-            <p v-if="accountActionError" style="font-size:12.5px;color:#be123c;margin:0;font-weight:700;">{{ accountActionError }}</p>
-            <p v-if="accountActionSuccess" style="font-size:12.5px;color:#047857;margin:0;font-weight:700;">{{ accountActionSuccess }}</p>
-            <button
-              v-if="!hasBoundTwitch"
-              :disabled="authLoading || !canBindTwitch"
-              type="button"
-              style="display:flex;align-items:center;justify-content:center;gap:8px;padding:11px 14px;border-radius:12px;border:none;background:#6f4fd1;color:white;font-family:'Outfit',sans-serif;font-size:13.5px;font-weight:800;cursor:pointer;disabled:opacity:.6;"
-              @click="$emit('bind-team-twitch')"
-            >
-              <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
-                <path d="M4 2L2.4 6v14.5h5V23h2.7l2.5-2.5h4L21.6 16V2H4zm15.3 13.1l-2.9 2.9h-4.4l-2.5 2.5v-2.5H6.7V3.7h12.6v11.4z" />
-                <path d="M11.1 7.1h1.7v5h-1.7zM15.7 7.1h1.7v5h-1.7z" />
-              </svg>
-              {{ authLoading ? 'Twitch wird geöffnet...' : 'Mit Twitch verbinden' }}
-            </button>
-            <button
-              v-else
-              :disabled="authLoading"
-              type="button"
-              style="display:flex;align-items:center;justify-content:center;gap:8px;padding:11px 14px;border-radius:12px;border:1px solid #fecdd3;background:#fff5f5;color:#e11d48;font-family:'Outfit',sans-serif;font-size:13.5px;font-weight:800;cursor:pointer;disabled:opacity:.6;"
-              @click="$emit('disconnect-team-twitch')"
-            >
-              <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
-                <path d="M18 6 6 18" />
-                <path d="m6 6 12 12" />
-              </svg>
-              {{ authLoading ? 'Entknüpft...' : 'Twitch entknüpfen' }}
-            </button>
-          </section>
-          <button
-            style="display:flex;align-items:center;gap:8px;padding:12px 16px;border-radius:12px;border:1px solid #ede4fb;background:#f9f6ff;color:#6a4fb8;font-family:'Outfit',sans-serif;font-size:13.5px;font-weight:600;cursor:pointer;text-align:left;width:100%;"
-            @click="$emit('open-privacy')"
-          >
-            <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
-              <path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z" />
-            </svg>
-            Datenschutzerklärung lesen
-          </button>
-          <button
-            style="display:flex;align-items:center;gap:8px;padding:12px 16px;border-radius:12px;border:1px solid #e2e8f0;background:#f8fafc;color:#64748b;font-family:'Outfit',sans-serif;font-size:13.5px;font-weight:600;cursor:pointer;text-align:left;width:100%;"
-            @click="$emit('logout')"
-          >
-            <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
-              <path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4" />
-              <polyline points="16 17 21 12 16 7" />
-              <line x1="21" y1="12" x2="9" y2="12" />
-            </svg>
-            {{ logoutLabel }}
-          </button>
-          <template v-if="isParticipantSession && !deleteConfirm">
-            <button
-              style="display:flex;align-items:center;gap:8px;padding:12px 16px;border-radius:12px;border:1px solid #fecdd3;background:#fff5f5;color:#e11d48;font-family:'Outfit',sans-serif;font-size:13.5px;font-weight:600;cursor:pointer;text-align:left;width:100%;"
-              @click="$emit('request-delete')"
-            >
-              <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
-                <polyline points="3 6 5 6 21 6" />
-                <path d="M19 6l-1 14H6L5 6" />
-                <path d="M10 11v6M14 11v6" />
-              </svg>
-              Meine Daten löschen (Löschrecht Art. 17 DSGVO)
-            </button>
-          </template>
-          <template v-else-if="isParticipantSession">
-            <div style="padding:16px;border-radius:14px;background:#fff5f5;border:1.5px solid #fecdd3;">
-              <p style="font-size:13.5px;color:#9f1239;font-weight:600;margin:0 0 6px;">Alle deine Daten werden sofort gelöscht.</p>
-              <p style="font-size:12.5px;color:#e11d48;margin:0 0 14px;line-height:1.5;">Das umfasst deine Votes, Nominierungen und Clip-Einreichungen. Diese Aktion kann nicht rückgängig gemacht werden.</p>
-              <p v-if="accountActionError" style="font-size:12.5px;color:#be123c;margin:0 0 12px;line-height:1.5;font-weight:600;">{{ accountActionError }}</p>
-              <div style="display:flex;gap:8px;">
-                <button :disabled="authLoading" style="flex:1;padding:10px;border-radius:10px;border:1px solid #e6dcf6;background:white;color:#6f6685;font-family:'Outfit',sans-serif;font-weight:600;font-size:13px;cursor:pointer;" @click="$emit('cancel-delete')">Abbrechen</button>
-                <button :disabled="authLoading" style="flex:1;padding:10px;border-radius:10px;border:none;background:#e11d48;color:white;font-family:'Outfit',sans-serif;font-weight:700;font-size:13px;cursor:pointer;" @click="$emit('confirm-delete')">
-                  {{ authLoading ? 'Löscht …' : 'Jetzt löschen' }}
+
+            <!-- Scrollable body -->
+            <div class="max-h-[72vh] overflow-y-auto">
+              <div class="space-y-3 p-6">
+
+                <!-- Auth status -->
+                <div class="grid grid-cols-[auto_1fr] items-start gap-x-3 gap-y-1 rounded-2xl border border-[#ede4fb] bg-[#f6f1fd] px-4 py-3.5">
+                  <div class="mt-0.5 shrink-0">
+                    <svg v-if="isTeamPasswordSession" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="#8b6cdb" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
+                      <path d="M15 7a4 4 0 1 1-2.8-3.82"/><path d="M13 5 21 13"/><path d="M21 13 18 16"/><path d="M18 13 16 15"/>
+                    </svg>
+                    <svg v-else width="18" height="18" viewBox="0 0 24 24" fill="#9146FF" aria-hidden="true">
+                      <path d="M4 2L2.4 6v14.5h5V23h2.7l2.5-2.5h4L21.6 16V2H4zm15.3 13.1l-2.9 2.9h-4.4l-2.5 2.5v-2.5H6.7V3.7h12.6v11.4z"/>
+                      <path d="M11.1 7.1h1.7v5h-1.7zM15.7 7.1h1.7v5h-1.7z"/>
+                    </svg>
+                  </div>
+                  <span class="text-sm font-extrabold text-[#5f44ad]">{{ authStatusLabel }}</span>
+                  <span class="col-start-2 text-xs leading-relaxed text-[#6f6685]">{{ authStatusText }}</span>
+                </div>
+
+                <!-- Saved data -->
+                <div class="rounded-2xl border border-[#ede4fb] bg-[#fafafa] px-4 py-3.5">
+                  <p class="mb-3 text-[10px] font-bold uppercase tracking-[0.2em] text-[#a99fc0]">Gespeicherte Daten</p>
+                  <div class="space-y-2">
+                    <div class="flex items-center justify-between text-sm">
+                      <span class="text-[#6f6685]">{{ primaryIdentityLabel }}</span>
+                      <span class="font-semibold text-[#3f3556]">@{{ profileHandle }}</span>
+                    </div>
+                    <div class="flex items-center justify-between text-sm">
+                      <span class="text-[#6f6685]">Rolle</span>
+                      <span class="text-[10px] font-bold uppercase tracking-[0.1em] text-[#8b6cdb]">{{ role }}</span>
+                    </div>
+                    <div v-if="showTeamLoginDetail" class="flex items-center justify-between text-sm">
+                      <span class="text-[#6f6685]">Team-Login</span>
+                      <span class="font-semibold text-[#3f3556]">@{{ session?.teamLogin }}</span>
+                    </div>
+                    <div v-if="session?.boundTwitchUserId" class="flex items-center justify-between text-sm">
+                      <span class="text-[#6f6685]">Gebundenes Twitch</span>
+                      <span class="font-semibold text-[#3f3556]">@{{ session.boundTwitchUserId }}</span>
+                    </div>
+                    <template v-if="isParticipantSession">
+                      <div class="flex items-center justify-between text-sm">
+                        <span class="text-[#6f6685]">Einreichungen</span>
+                        <span class="font-semibold text-[#3f3556]">Clips, Votes, Nominierungen</span>
+                      </div>
+                    </template>
+                    <template v-else>
+                      <div class="flex items-start justify-between gap-4 text-sm">
+                        <span class="shrink-0 text-[#6f6685]">Accountverwaltung</span>
+                        <span class="text-right font-semibold text-[#3f3556]">Team-Accounts werden im Admin-Panel verwaltet.</span>
+                      </div>
+                    </template>
+                  </div>
+                </div>
+
+                <!-- Team Twitch binding -->
+                <section v-if="isTeamSession" class="rounded-2xl border border-[#ede4fb] bg-[#f8f5ff] p-4">
+                  <p class="text-[11px] font-bold uppercase tracking-[0.2em] text-[#8b6cdb]">Optionaler Admin-Login</p>
+                  <p v-if="hasBoundTwitch" class="mt-1.5 text-xs leading-relaxed text-[#6f6685]">
+                    Dein Team-Account ist mit Twitch verbunden. Entfernst du die Verknüpfung, ist der Admin-Login per Twitch nicht mehr möglich.
+                  </p>
+                  <p v-else class="mt-1.5 text-xs leading-relaxed text-[#6f6685]">
+                    Verbinde deinen privaten Twitch-Account. Danach kannst du dich im Admin-Panel per Twitch anmelden.
+                  </p>
+                  <div v-if="session?.boundTwitchUserId" class="mt-3 flex items-center justify-between rounded-xl border border-[#ede4fb] bg-white px-3.5 py-2.5 text-sm">
+                    <span class="text-[#6f6685]">Aktuell verbunden</span>
+                    <span class="font-extrabold text-[#3f3556]">@{{ session.boundTwitchUserId }}</span>
+                  </div>
+                  <p v-if="session?.mustChangePassword" class="mt-2 text-xs font-bold text-amber-600">Bitte ändere zuerst dein temporäres Passwort.</p>
+                  <p v-if="accountActionError" class="mt-2 text-xs font-bold text-rose-600">{{ accountActionError }}</p>
+                  <p v-if="accountActionSuccess" class="mt-2 text-xs font-bold text-emerald-600">{{ accountActionSuccess }}</p>
+                  <button
+                    v-if="!hasBoundTwitch"
+                    :disabled="authLoading || !canBindTwitch"
+                    type="button"
+                    class="mt-3 flex w-full items-center justify-center gap-2 rounded-xl bg-[#6f4fd1] px-4 py-2.5 text-sm font-extrabold text-white transition hover:bg-[#5f44ad] disabled:opacity-50"
+                    @click="$emit('bind-team-twitch')"
+                  >
+                    <svg width="15" height="15" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
+                      <path d="M4 2L2.4 6v14.5h5V23h2.7l2.5-2.5h4L21.6 16V2H4zm15.3 13.1l-2.9 2.9h-4.4l-2.5 2.5v-2.5H6.7V3.7h12.6v11.4z"/>
+                      <path d="M11.1 7.1h1.7v5h-1.7zM15.7 7.1h1.7v5h-1.7z"/>
+                    </svg>
+                    {{ authLoading ? 'Twitch wird geöffnet …' : 'Mit Twitch verbinden' }}
+                  </button>
+                  <button
+                    v-else
+                    :disabled="authLoading"
+                    type="button"
+                    class="mt-3 flex w-full items-center justify-center gap-2 rounded-xl border border-rose-200 bg-rose-50 px-4 py-2.5 text-sm font-extrabold text-rose-600 transition hover:bg-rose-100 disabled:opacity-50"
+                    @click="$emit('disconnect-team-twitch')"
+                  >
+                    <Unlink class="h-4 w-4" />
+                    {{ authLoading ? 'Entknüpft …' : 'Twitch entknüpfen' }}
+                  </button>
+                </section>
+
+                <!-- Privacy -->
+                <button
+                  type="button"
+                  class="flex w-full items-center gap-3 rounded-xl border border-[#ede4fb] bg-[#f9f6ff] px-4 py-3 text-left text-sm font-semibold text-[#6a4fb8] transition hover:bg-[#f1ecfb]"
+                  @click="$emit('open-privacy')"
+                >
+                  <Shield class="h-4 w-4 shrink-0" />
+                  Datenschutzerklärung lesen
                </button>
+
+                <!-- Logout -->
+                <button
+                  type="button"
+                  class="flex w-full items-center gap-3 rounded-xl border border-slate-200 bg-slate-50 px-4 py-3 text-left text-sm font-semibold text-slate-500 transition hover:bg-slate-100"
+                  @click="$emit('logout')"
+                >
+                  <LogOut class="h-4 w-4 shrink-0" />
+                  {{ logoutLabel }}
+                </button>
+
+                <!-- Delete request -->
+                <template v-if="isParticipantSession && !deleteConfirm">
+                  <button
+                    type="button"
+                    class="flex w-full items-center gap-3 rounded-xl border border-rose-100 bg-rose-50 px-4 py-3 text-left text-sm font-semibold text-rose-600 transition hover:bg-rose-100"
+                    @click="$emit('request-delete')"
+                  >
+                    <Trash2 class="h-4 w-4 shrink-0" />
+                    Meine Daten löschen (Löschrecht Art. 17 DSGVO)
+                  </button>
+                </template>
+
+                <!-- Delete confirmation -->
+                <template v-else-if="isParticipantSession">
+                  <div class="rounded-2xl border-[1.5px] border-rose-200 bg-rose-50 p-4">
+                    <p class="text-sm font-semibold text-rose-800">Alle deine Daten werden sofort gelöscht.</p>
+                    <p class="mt-1 text-xs leading-relaxed text-rose-600">Das umfasst Votes, Nominierungen und Clip-Einreichungen. Diese Aktion kann nicht rückgängig gemacht werden.</p>
+                    <p v-if="accountActionError" class="mt-2 text-xs font-bold text-rose-700">{{ accountActionError }}</p>
+                    <div class="mt-4 flex gap-2">
+                      <button
+                        :disabled="authLoading"
+                        type="button"
+                        class="flex-1 rounded-xl border border-[#e6dcf6] bg-white py-2.5 text-sm font-semibold text-[#6f6685] transition hover:bg-[#f9f6ff] disabled:opacity-50"
+                        @click="$emit('cancel-delete')"
+                      >Abbrechen</button>
+                      <button
+                        :disabled="authLoading"
+                        type="button"
+                        class="flex-1 rounded-xl bg-rose-600 py-2.5 text-sm font-bold text-white transition hover:bg-rose-700 disabled:opacity-50"
+                        @click="$emit('confirm-delete')"
+                      >{{ authLoading ? 'Löscht …' : 'Jetzt löschen' }}</button>
+                    </div>
+                  </div>
+                </template>
+
              </div>
            </div>
-          </template>
-        </div>
+          </div>
+        </Transition>
      </div>
-    </div>
+    </Transition>
  </Teleport>

+  <!-- ── Privacy Modal ─────────────────────────────────────── -->
  <Teleport to="body">
-    <div
-      v-if="privacyOpen"
-      style="position:fixed;inset:0;z-index:400;display:flex;align-items:center;justify-content:center;padding:24px;background:rgba(40,24,70,.55);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);"
-      @click.self="$emit('close-privacy')"
+    <Transition
+      enter-active-class="transition duration-200 ease-out"
+      enter-from-class="opacity-0"
+      enter-to-class="opacity-100"
+      leave-active-class="transition duration-150 ease-in"
+      leave-from-class="opacity-100"
+      leave-to-class="opacity-0"
    >
-      <div style="position:relative;width:100%;max-width:680px;max-height:88vh;overflow:hidden;display:flex;flex-direction:column;background:#fff;border-radius:24px;box-shadow:0 40px 90px rgba(40,24,70,.4);">
-        <div style="display:flex;align-items:center;justify-content:space-between;padding:24px 32px 18px;border-bottom:1px solid #f1ecfb;flex:none;">
-          <div>
-            <div style="font-size:11px;font-weight:700;letter-spacing:2px;text-transform:uppercase;color:#8b6cdb;margin-bottom:4px;">Rechtliches</div>
-            <h2 style="font-family:'Cormorant Garamond',serif;font-weight:700;font-size:26px;margin:0;color:#3f3556;">Datenschutzerklärung</h2>
-          </div>
-          <button style="width:34px;height:34px;border-radius:50%;border:none;background:#f1ecfb;color:#8b6cdb;font-size:18px;cursor:pointer;display:flex;align-items:center;justify-content:center;" @click="$emit('close-privacy')">✕</button>
-        </div>
-        <div style="overflow-y:auto;padding:28px 32px;flex:1;font-family:'Outfit',sans-serif;font-size:14px;line-height:1.65;color:#6f6685;">
-          <template v-if="privacyContentHtml">
-            <div class="app-shell-privacy-content" v-html="privacyContentHtml" />
-          </template>
-          <template v-else>
-            <div style="background:#f9f6ff;border:1px solid #ede4fb;border-radius:14px;padding:16px;">
-              <h3 style="font-size:15px;font-weight:700;color:#3f3556;margin:0 0 8px;">Datenschutztext wird geladen</h3>
-              <p style="margin:0;">Die Datenschutzerklärung wird aus der Landingpage-Konfiguration geladen.</p>
+      <div
+        v-if="privacyOpen"
+        class="fixed inset-0 z-[400] flex items-center justify-center p-6"
+        style="background:rgba(40,24,70,0.52);backdrop-filter:blur(6px);"
+        @click.self="$emit('close-privacy')"
+      >
+        <div class="flex max-h-[88vh] w-full max-w-[680px] flex-col overflow-hidden rounded-3xl bg-white shadow-[0_40px_90px_rgba(40,24,70,0.4)]">
+          <div class="flex shrink-0 items-center justify-between gap-4 border-b border-[#f1ecfb] px-8 py-5">
+            <div>
+              <p class="text-[10px] font-bold uppercase tracking-[0.2em] text-[#8b6cdb]">Rechtliches</p>
+              <h2 class="font-['Cormorant_Garamond'] text-2xl font-bold text-[#3f3556]">Datenschutzerklärung</h2>
            </div>
-          </template>
-          <p v-if="privacyEmail" style="font-size:12px;color:#a99fc0;margin:18px 0 0;">Kontakt: {{ privacyEmail }}</p>
+            <button
+              type="button"
+              class="grid h-9 w-9 shrink-0 place-items-center rounded-full bg-[#f1ecfb] text-[#8b6cdb] transition hover:bg-[#e6dcf6]"
+              aria-label="Datenschutz schließen"
+              @click="$emit('close-privacy')"
+            >
+              <X class="h-4 w-4" />
+            </button>
+          </div>
+          <div class="flex-1 overflow-y-auto px-8 py-7 text-sm leading-relaxed text-[#6f6685]">
+            <div v-if="privacyContentHtml" class="privacy-content" v-html="privacyContentHtml" />
+            <div v-else class="rounded-2xl border border-[#f1ecfb] bg-[#fcfbff] px-4 py-3 text-sm">
+              Datenschutzerklärung wird geladen.
+            </div>
+            <p v-if="privacyEmail" class="mt-5 text-xs text-[#a99fc0]">Kontakt: {{ privacyEmail }}</p>
+          </div>
        </div>
      </div>
-    </div>
+    </Transition>
  </Teleport>
 </template>

 <style scoped>
-.app-shell-privacy-content :deep(p) {
+.privacy-content :deep(p) {
  margin: 0 0 14px;
 }
-
-.app-shell-privacy-content :deep(p:last-child),
-.app-shell-privacy-content :deep(ul:last-child),
-.app-shell-privacy-content :deep(ol:last-child) {
+.privacy-content :deep(p:last-child),
+.privacy-content :deep(ul:last-child),
+.privacy-content :deep(ol:last-child) {
  margin-bottom: 0;
 }
-
-.app-shell-privacy-content :deep(ul),
-.app-shell-privacy-content :deep(ol) {
+.privacy-content :deep(ul),
+.privacy-content :deep(ol) {
  margin: 0 0 14px 20px;
  padding-left: 16px;
 }
-
-.app-shell-privacy-content :deep(li) {
+.privacy-content :deep(li) {
  margin: 3px 0;
 }
 </style>
@@ -128,9 +128,10 @@
 </template>

 <script setup lang="ts">
-import { onBeforeUnmount, onMounted, watch } from 'vue'
+import { onBeforeUnmount, onMounted } from 'vue'
 import { Braces, ExternalLink, GitCompareArrows, ListTree, ShieldCheck, X } from '@lucide/vue'

+import { useBodyScrollLock } from '../../composables/useBodyScrollLock'
 import type { AuditLogRow } from './useAdminAuditManager'

 const props = defineProps<{
@@ -145,18 +146,10 @@ function closeOnEscape(event: KeyboardEvent) {
  if (event.key === 'Escape' && props.entry) emit('close')
 }

-watch(
-  () => props.entry,
-  (entry) => {
-    if (typeof document !== 'undefined') {
-      document.body.style.overflow = entry ? 'hidden' : ''
-    }
-  },
-)
+useBodyScrollLock(() => Boolean(props.entry))

 onMounted(() => window.addEventListener('keydown', closeOnEscape))
 onBeforeUnmount(() => {
  window.removeEventListener('keydown', closeOnEscape)
-  if (typeof document !== 'undefined') document.body.style.overflow = ''
 })
 </script>
@@ -46,6 +46,7 @@
 import { X } from '@lucide/vue'
 import { computed } from 'vue'

+import { useBodyScrollLock } from '../../composables/useBodyScrollLock'
 import type { FaqFormItem } from './adminContentTypes'

 const props = defineProps<{
@@ -53,6 +54,8 @@ const props = defineProps<{
  faq: FaqFormItem[]
 }>()

+useBodyScrollLock(() => props.open)
+
 defineEmits<{
  close: []
 }>()
@@ -39,13 +39,17 @@
 <script setup lang="ts">
 import { X } from '@lucide/vue'

-defineProps<{
+import { useBodyScrollLock } from '../../composables/useBodyScrollLock'
+
+const props = defineProps<{
  open: boolean
  title: string
  url: string
  contentHtml: string
 }>()

+useBodyScrollLock(() => props.open)
+
 defineEmits<{
  close: []
 }>()
@@ -39,12 +39,16 @@
 <script setup lang="ts">
 import { X } from '@lucide/vue'

-defineProps<{
+import { useBodyScrollLock } from '../../composables/useBodyScrollLock'
+
+const props = defineProps<{
  open: boolean
  contentHtml: string
  updatedLabel: string
 }>()

+useBodyScrollLock(() => props.open)
+
 defineEmits<{
  close: []
 }>()
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { onBeforeUnmount, onMounted, watch } from 'vue'
+import { onBeforeUnmount, onMounted } from 'vue'
 import { Sparkles, X } from '@lucide/vue'

 import AdminReviewDecisionPanel from './AdminReviewDecisionPanel.vue'
@@ -7,6 +7,7 @@ import AdminReviewsHistorySection from './AdminReviewsHistorySection.vue'
 import AdminReviewsQueueHeader from './AdminReviewsQueueHeader.vue'
 import AdminReviewsQueueList from './AdminReviewsQueueList.vue'
 import { useAdminReviewsManager } from './useAdminReviewsManager'
+import { useBodyScrollLock } from '../../composables/useBodyScrollLock'
 import { watchAdminToast } from '../../composables/useAdminToast'

 const props = defineProps<{
@@ -55,20 +56,11 @@ function onKey(event: KeyboardEvent) {
  }
 }

-watch(
-  () => props.open,
-  (open) => {
-    if (typeof document !== 'undefined') {
-      document.body.style.overflow = open ? 'hidden' : ''
-    }
-  },
-  { immediate: true },
-)
+useBodyScrollLock(() => props.open)

 onMounted(() => window.addEventListener('keydown', onKey))
 onBeforeUnmount(() => {
  window.removeEventListener('keydown', onKey)
-  if (typeof document !== 'undefined') document.body.style.overflow = ''
 })
 </script>

@@ -1,6 +1,7 @@
 import { computed, onBeforeUnmount, onMounted, ref, watch } from 'vue'

 import { useAwardsStore } from '../../stores/awards'
+import { useAuthStore } from '../../stores/auth'
 import type { AdminAuditEntry, AdminAuditQueryOptions } from '../../types/awards'

 const auditPageLimit = 80
@@ -294,9 +295,9 @@ function getDateBoundary(value: string, isEndOfDay: boolean) {
  return Number.isNaN(date.getTime()) ? undefined : date.toISOString()
 }

-function buildRequestContextItems(entry: AdminAuditEntry) {
+function buildRequestContextItems(entry: AdminAuditEntry, canViewAuditIp: boolean) {
  return [
-    { key: 'IP', value: entry.createdFromIp || 'nicht erfasst' },
+    ...(canViewAuditIp ? [{ key: 'IP', value: entry.createdFromIp || 'nicht erfasst' }] : []),
    { key: 'User-Agent', value: entry.userAgent || 'nicht erfasst' },
  ]
 }
@@ -312,7 +313,7 @@ function buildRelatedLink(entry: AdminAuditEntry) {
  return route
 }

-function createAuditRow(entry: AdminAuditEntry): AuditLogRow {
+function createAuditRow(entry: AdminAuditEntry, canViewAuditIp: boolean): AuditLogRow {
  return {
    ...entry,
    actionLabel: humanizeAction(entry.actionType),
@@ -324,13 +325,13 @@ function createAuditRow(entry: AdminAuditEntry): AuditLogRow {
    ageLabel: formatAge(entry.createdAt),
    metadataItems: parseMetadata(entry.metadataJson),
    changeItems: parseChangeItems(entry.metadataJson),
-    requestContextItems: buildRequestContextItems(entry),
+    requestContextItems: buildRequestContextItems(entry, canViewAuditIp),
    relatedLink: buildRelatedLink(entry),
    rawMetadataJson: entry.metadataJson || '{}',
  }
 }

-function downloadCsv(entries: AdminAuditEntry[]) {
+function downloadCsv(entries: AdminAuditEntry[], canViewAuditIp: boolean) {
  const rows = [
    [
      'Id',
@@ -340,7 +341,7 @@ function downloadCsv(entries: AdminAuditEntry[]) {
      'Objekt-Id',
      'Zusammenfassung',
      'Zeitpunkt',
-      'IP',
+      ...(canViewAuditIp ? ['IP'] : []),
      'User-Agent',
      'Metadaten',
    ],
@@ -352,7 +353,7 @@ function downloadCsv(entries: AdminAuditEntry[]) {
      entry.entityId,
      entry.summary,
      new Date(entry.createdAt).toISOString(),
-      entry.createdFromIp,
+      ...(canViewAuditIp ? [entry.createdFromIp ?? ''] : []),
      entry.userAgent,
      entry.metadataJson,
    ]),
@@ -372,6 +373,7 @@ function downloadCsv(entries: AdminAuditEntry[]) {

 export function useAdminAuditManager() {
  const store = useAwardsStore()
+  const authStore = useAuthStore()
  const query = ref('')
  const selectedAdmin = ref(allFilter)
  const selectedAction = ref(allFilter)
@@ -405,9 +407,10 @@ export function useAdminAuditManager() {
      label: entityOptions.find((option) => option.value === item.key)?.label ?? item.key,
    })),
  )
-  const auditRows = computed<AuditLogRow[]>(() => auditEntries.value.map(createAuditRow))
+  const canViewAuditIp = computed(() => authStore.isOwnerOrCreator)
+  const auditRows = computed<AuditLogRow[]>(() => auditEntries.value.map((entry) => createAuditRow(entry, canViewAuditIp.value)))
  const metadataCount = computed(() => auditEntries.value.filter((entry) => parseMetadata(entry.metadataJson).length > 0).length)
-  const requestContextCount = computed(() => auditEntries.value.filter((entry) => entry.createdFromIp || entry.userAgent).length)
+  const requestContextCount = computed(() => auditEntries.value.filter((entry) => entry.userAgent || (canViewAuditIp.value && entry.createdFromIp)).length)
  const recentDayCount = computed(() => {
    const minTimestamp = Date.now() - 24 * 60 * 60 * 1000
    return auditEntries.value.filter((entry) => new Date(entry.createdAt).getTime() >= minTimestamp).length
@@ -419,7 +422,7 @@ export function useAdminAuditManager() {
    { label: 'Geladen', value: loadedCountLabel.value, note: `Page ${auditPageLimit}` },
    { label: 'Treffer', value: totalCountLabel.value, note: 'serverseitig gefiltert' },
    { label: '24h', value: recentDayCount.value.toLocaleString('de-DE'), note: 'neue Aktionen' },
-    { label: 'Kontext', value: requestContextCount.value.toLocaleString('de-DE'), note: 'mit IP oder User-Agent' },
+    { label: 'Kontext', value: requestContextCount.value.toLocaleString('de-DE'), note: canViewAuditIp.value ? 'mit IP oder User-Agent' : 'mit User-Agent' },
  ])
  const focusCards = computed<AuditFocusCard[]>(() => {
    const topAdmin = adminCounts.value[0]
@@ -532,7 +535,7 @@ export function useAdminAuditManager() {

  function exportAuditCsv() {
    if (auditEntries.value.length === 0) return
-    downloadCsv(auditEntries.value)
+    downloadCsv(auditEntries.value, canViewAuditIp.value)
    exportMessage.value = `CSV mit ${auditEntries.value.length.toLocaleString('de-DE')} geladenen Einträgen erstellt.`
    if (exportMessageTimer) window.clearTimeout(exportMessageTimer)
    exportMessageTimer = window.setTimeout(() => {
@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import { computed } from 'vue'
+import { LogOut, Shield, Trash2, X } from '@lucide/vue'

 import type { AuthSession } from '../../types/awards'

@@ -29,13 +30,14 @@ const isTeamPasswordSession = computed(() => Boolean(props.session?.teamLogin &&
 const isTeamSession = computed(() => Boolean(props.session?.teamLogin))
 const isParticipantSession = computed(() => !isTeamSession.value)
 const profileHandle = computed(() => props.session?.teamLogin ?? props.session?.twitchUserId ?? props.twitchUser)
+const displayInitial = computed(() => (props.session?.displayName ?? profileHandle.value).charAt(0).toUpperCase())
 const showTeamLoginDetail = computed(() => Boolean(props.session?.teamLogin && !isTeamSession.value))
-const statusLabel = computed(() => {
+const authStatusLabel = computed(() => {
  if (isTeamPasswordSession.value) return 'Angemeldet mit Team-Login'
  if (isTeamSession.value) return 'Admin-Login über Twitch'
  return 'Angemeldet über Twitch'
 })
-const statusText = computed(() => {
+const authStatusText = computed(() => {
  if (isTeamPasswordSession.value) return 'Diese Session läuft über deinen Team-Login.'
  if (isTeamSession.value) return 'Diese Admin-Session nutzt deinen verknüpften Twitch-Account.'
  return 'Diese Session nutzt deinen Twitch-Account.'
@@ -45,19 +47,34 @@ const logoutLabel = computed(() => !isTeamSession.value ? 'Von Twitch abmelden'
 </script>

 <template>
+  <!-- ── Privacy Modal ─────────────────────────────────────── -->
  <template v-if="props.privacyModalOpen">
-    <div class="home-modal-overlay" @click="props.onClosePrivacy" style="position:fixed;inset:0;z-index:400;display:flex;align-items:center;justify-content:center;padding:24px;background:rgba(40,24,70,.55);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);">
-      <div class="home-modal" @click="props.privacyModalStop" style="position:relative;width:100%;max-width:680px;max-height:88vh;overflow:hidden;display:flex;flex-direction:column;background:#fff;border-radius:24px;box-shadow:0 40px 90px rgba(40,24,70,.4);">
-        <div style="display:flex;align-items:center;justify-content:space-between;padding:24px 32px 18px;border-bottom:1px solid #f1ecfb;flex:none;">
+    <div
+      class="fixed inset-0 z-[400] flex items-center justify-center p-6"
+      style="background:rgba(40,24,70,0.52);backdrop-filter:blur(6px);"
+      @click="props.onClosePrivacy"
+    >
+      <div
+        class="flex max-h-[88vh] w-full max-w-[680px] flex-col overflow-hidden rounded-3xl bg-white shadow-[0_40px_90px_rgba(40,24,70,0.4)]"
+        @click="props.privacyModalStop"
+      >
+        <div class="flex shrink-0 items-center justify-between gap-4 border-b border-[#f1ecfb] px-8 py-5">
          <div>
-            <div style="font-size:11px;font-weight:700;letter-spacing:2px;text-transform:uppercase;color:#8b6cdb;margin-bottom:4px;">Rechtliches</div>
-            <h2 style="font-family:'Cormorant Garamond',serif;font-weight:700;font-size:26px;margin:0;color:#3f3556;">Datenschutzerklärung</h2>
+            <p class="text-[10px] font-bold uppercase tracking-[0.2em] text-[#8b6cdb]">Rechtliches</p>
+            <h2 class="font-['Cormorant_Garamond'] text-2xl font-bold text-[#3f3556]">Datenschutzerklärung</h2>
          </div>
-          <button @click="props.onClosePrivacy" style="width:34px;height:34px;border-radius:50%;border:none;background:#f1ecfb;color:#8b6cdb;font-size:18px;cursor:pointer;display:flex;align-items:center;justify-content:center;" style-hover="background:#e6dcf6;">✕</button>
+          <button
+            type="button"
+            class="grid h-9 w-9 shrink-0 place-items-center rounded-full bg-[#f1ecfb] text-[#8b6cdb] transition hover:bg-[#e6dcf6]"
+            aria-label="Datenschutz schließen"
+            @click="props.onClosePrivacy"
+          >
+            <X class="h-4 w-4" />
+          </button>
        </div>
-        <div style="overflow-y:auto;padding:28px 32px;flex:1;font-family:'Outfit',sans-serif;font-size:14px;line-height:1.7;color:#6f6685;">
-          <div v-if="props.privacyContentHtml" class="home-privacy-content" v-html="props.privacyContentHtml" />
-          <div v-else style="margin:0;padding:14px 16px;border-radius:16px;border:1px solid #f1ecfb;background:#fcfbff;">
+        <div class="flex-1 overflow-y-auto px-8 py-7 text-sm leading-relaxed text-[#6f6685]">
+          <div v-if="props.privacyContentHtml" class="privacy-content" v-html="props.privacyContentHtml" />
+          <div v-else class="rounded-2xl border border-[#f1ecfb] bg-[#fcfbff] px-4 py-3 text-sm">
            Datenschutzerklärung wird geladen.
          </div>
        </div>
@@ -65,60 +82,150 @@ const logoutLabel = computed(() => !isTeamSession.value ? 'Von Twitch abmelden'
    </div>
  </template>

+  <!-- ── Account Modal ─────────────────────────────────────── -->
  <template v-if="props.accountModalOpen">
-    <div class="home-modal-overlay" @click="props.onCloseAccount" style="position:fixed;inset:0;z-index:300;display:flex;align-items:center;justify-content:center;padding:24px;background:rgba(40,24,70,.55);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);">
-      <div class="home-modal" @click="props.accountModalStop" style="position:relative;width:100%;max-width:480px;background:#fff;border-radius:24px;box-shadow:0 40px 90px rgba(40,24,70,.4);overflow:hidden;">
-        <div style="display:flex;align-items:center;justify-content:space-between;padding:24px 28px 18px;border-bottom:1px solid #f1ecfb;">
-          <div>
-            <div style="font-size:11px;font-weight:700;letter-spacing:2px;text-transform:uppercase;color:#8b6cdb;margin-bottom:4px;">Mein Profil</div>
-            <h2 style="font-family:'Cormorant Garamond',serif;font-weight:700;font-size:24px;margin:0;color:#3f3556;">@{{ profileHandle }}</h2>
-          </div>
-          <button @click="props.onCloseAccount" style="width:34px;height:34px;border-radius:50%;border:none;background:#f1ecfb;color:#8b6cdb;font-size:18px;cursor:pointer;display:flex;align-items:center;justify-content:center;" style-hover="background:#e6dcf6;">✕</button>
-        </div>
-        <div style="padding:24px 28px;display:flex;flex-direction:column;gap:16px;">
-          <div style="display:grid;grid-template-columns:auto 1fr;gap:8px 12px;padding:14px 16px;border-radius:16px;background:#f6f1fd;border:1px solid #ede4fb;">
-            <svg v-if="isTeamPasswordSession" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="#8b6cdb" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M15 7a4 4 0 1 1-2.8-3.82"/><path d="M13 5 21 13"/><path d="M21 13 18 16"/><path d="M18 13 16 15"/></svg>
-            <svg v-else width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="#8b6cdb" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M4 2L2.4 6v14.5h5V23h2.7l2.5-2.5h4L21.6 16V2H4zm15.3 13.1l-2.9 2.9h-4.4l-2.5 2.5v-2.5H6.7V3.7h12.6v11.4z"/><path d="M11.1 7.1h1.7v5h-1.7zM15.7 7.1h1.7v5h-1.7z"/></svg>
-            <span style="font-size:14px;color:#5f44ad;font-weight:800;">{{ statusLabel }}</span>
-            <span style="grid-column:2;font-size:12.5px;color:#6f6685;line-height:1.45;">{{ statusText }}</span>
-          </div>
-          <div style="padding:16px;border-radius:14px;background:#fafafa;border:1px solid #f0eafc;">
-            <p style="font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:1.5px;color:#a99fc0;margin:0 0 10px;">Gespeicherte Daten</p>
-            <div style="display:flex;flex-direction:column;gap:7px;">
-              <div class="home-account-data-row" style="display:flex;justify-content:space-between;font-size:13.5px;"><span style="color:#6f6685;">{{ primaryIdentityLabel }}</span><span style="font-weight:600;color:#3f3556;">@{{ profileHandle }}</span></div>
-              <div v-if="showTeamLoginDetail" class="home-account-data-row" style="display:flex;justify-content:space-between;font-size:13.5px;"><span style="color:#6f6685;">Team-Login</span><span style="font-weight:600;color:#3f3556;">@{{ props.session?.teamLogin }}</span></div>
-              <div v-if="props.session?.boundTwitchUserId" class="home-account-data-row" style="display:flex;justify-content:space-between;font-size:13.5px;"><span style="color:#6f6685;">Gebundenes Twitch</span><span style="font-weight:600;color:#3f3556;">@{{ props.session.boundTwitchUserId }}</span></div>
-              <div class="home-account-data-row" style="display:flex;justify-content:space-between;font-size:13.5px;"><span style="color:#6f6685;">Rolle</span><span style="font-weight:700;color:#8b6cdb;text-transform:uppercase;font-size:11px;letter-spacing:1px;">{{ props.role }}</span></div>
-              <div v-if="isParticipantSession" class="home-account-data-row" style="display:flex;justify-content:space-between;font-size:13.5px;"><span style="color:#6f6685;">Einreichungen</span><span style="font-weight:600;color:#3f3556;">Clips, Votes, Nominierungen</span></div>
-              <div v-if="isParticipantSession" class="home-account-data-row" style="display:flex;justify-content:space-between;font-size:13.5px;"><span style="color:#6f6685;">Löschfrist</span><span style="font-weight:600;color:#059669;">März 2027 (auto.)</span></div>
-              <div v-else class="home-account-data-row" style="display:flex;justify-content:space-between;gap:16px;font-size:13.5px;"><span style="color:#6f6685;">Accountverwaltung</span><span style="font-weight:600;color:#3f3556;text-align:right;">Team-Accounts bleiben bestehen und werden im Admin-Panel verwaltet.</span></div>
+    <div
+      class="fixed inset-0 z-[300] flex items-end justify-center p-4 sm:items-center sm:p-6"
+      style="background:rgba(40,24,70,0.52);backdrop-filter:blur(6px);"
+      @click="props.onCloseAccount"
+    >
+      <div
+        class="w-full max-w-[480px] overflow-hidden rounded-3xl bg-white shadow-[0_40px_90px_rgba(40,24,70,0.38)]"
+        @click="props.accountModalStop"
+      >
+        <!-- Header -->
+        <div class="flex items-center justify-between gap-4 border-b border-[#f1ecfb] bg-gradient-to-br from-[#f7f2ff] to-[#fff7ed] px-7 py-5">
+          <div class="flex min-w-0 items-center gap-3.5">
+            <div class="grid h-11 w-11 shrink-0 place-items-center rounded-2xl bg-gradient-to-br from-[#8b6cdb] to-[#7355c8] text-base font-bold text-white shadow-[0_6px_18px_rgba(124,86,196,0.3)]">
+              {{ displayInitial }}
+            </div>
+            <div class="min-w-0">
+              <p class="text-[10px] font-bold uppercase tracking-[0.2em] text-[#8b6cdb]">Mein Profil</p>
+              <h2 class="truncate font-['Cormorant_Garamond'] text-2xl font-bold leading-tight text-[#3f3556]">
+                @{{ profileHandle }}
+              </h2>
            </div>
          </div>
-          <button @click="props.onOpenPrivacy" style="display:flex;align-items:center;gap:8px;padding:12px 16px;border-radius:12px;border:1px solid #ede4fb;background:#f9f6ff;color:#6a4fb8;font-family:'Outfit',sans-serif;font-size:13.5px;font-weight:600;cursor:pointer;text-align:left;width:100%;" style-hover="background:#f1ecfb;">
-            <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/></svg>
-            Datenschutzerklärung lesen
+          <button
+            type="button"
+            class="grid h-9 w-9 shrink-0 place-items-center rounded-full bg-[#f1ecfb] text-[#8b6cdb] transition hover:bg-[#e6dcf6]"
+            aria-label="Profil schließen"
+            @click="props.onCloseAccount"
+          >
+            <X class="h-4 w-4" />
          </button>
-          <button @click="props.onLogout" style="display:flex;align-items:center;gap:8px;padding:12px 16px;border-radius:12px;border:1px solid #e2e8f0;background:#f8fafc;color:#64748b;font-family:'Outfit',sans-serif;font-size:13.5px;font-weight:600;cursor:pointer;text-align:left;width:100%;" style-hover="background:#f1f5f9;">
-            <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4"/><polyline points="16 17 21 12 16 7"/><line x1="21" y1="12" x2="9" y2="12"/></svg>
-            {{ logoutLabel }}
-          </button>
-          <template v-if="isParticipantSession && props.deleteNotConfirm">
-            <button @click="props.onRequestDelete" style="display:flex;align-items:center;gap:8px;padding:12px 16px;border-radius:12px;border:1px solid #fecdd3;background:#fff5f5;color:#e11d48;font-family:'Outfit',sans-serif;font-size:13.5px;font-weight:600;cursor:pointer;text-align:left;width:100%;" style-hover="background:#ffe4e6;">
-              <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="3 6 5 6 21 6"/><path d="M19 6l-1 14H6L5 6"/><path d="M10 11v6M14 11v6"/></svg>
-              Meine Daten löschen (Löschrecht Art. 17 DSGVO)
-            </button>
-          </template>
-          <template v-if="isParticipantSession && props.deleteConfirm">
-            <div style="padding:16px;border-radius:14px;background:#fff5f5;border:1.5px solid #fecdd3;">
-              <p style="font-size:13.5px;color:#9f1239;font-weight:600;margin:0 0 6px;">Alle deine Daten werden sofort gelöscht.</p>
-              <p style="font-size:12.5px;color:#e11d48;margin:0 0 14px;line-height:1.5;">Das umfasst deine Votes, Nominierungen und Clip-Einreichungen. Diese Aktion kann nicht rückgängig gemacht werden.</p>
-              <p v-if="props.accountActionError" style="font-size:12.5px;color:#be123c;margin:0 0 12px;line-height:1.5;font-weight:600;">{{ props.accountActionError }}</p>
-              <div class="home-account-confirm-actions" style="display:flex;gap:8px;">
-                <button :disabled="props.authLoading" @click="props.onCancelDelete" style="flex:1;padding:10px;border-radius:10px;border:1px solid #e6dcf6;background:white;color:#6f6685;font-family:'Outfit',sans-serif;font-weight:600;font-size:13px;cursor:pointer;" style-hover="background:#f9f6ff;">Abbrechen</button>
-                <button :disabled="props.authLoading" @click="props.onConfirmDelete" style="flex:1;padding:10px;border-radius:10px;border:none;background:#e11d48;color:white;font-family:'Outfit',sans-serif;font-weight:700;font-size:13px;cursor:pointer;" style-hover="opacity:0.9;">{{ props.authLoading ? 'Löscht …' : 'Jetzt löschen' }}</button>
+        </div>
+
+        <!-- Scrollable body -->
+        <div class="max-h-[72vh] overflow-y-auto">
+          <div class="space-y-3 p-6">
+
+            <!-- Auth status -->
+            <div class="grid grid-cols-[auto_1fr] items-start gap-x-3 gap-y-1 rounded-2xl border border-[#ede4fb] bg-[#f6f1fd] px-4 py-3.5">
+              <div class="mt-0.5 shrink-0">
+                <svg v-if="isTeamPasswordSession" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="#8b6cdb" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
+                  <path d="M15 7a4 4 0 1 1-2.8-3.82"/><path d="M13 5 21 13"/><path d="M21 13 18 16"/><path d="M18 13 16 15"/>
+                </svg>
+                <svg v-else width="18" height="18" viewBox="0 0 24 24" fill="#9146FF" aria-hidden="true">
+                  <path d="M4 2L2.4 6v14.5h5V23h2.7l2.5-2.5h4L21.6 16V2H4zm15.3 13.1l-2.9 2.9h-4.4l-2.5 2.5v-2.5H6.7V3.7h12.6v11.4z"/>
+                  <path d="M11.1 7.1h1.7v5h-1.7zM15.7 7.1h1.7v5h-1.7z"/>
+                </svg>
+              </div>
+              <span class="text-sm font-extrabold text-[#5f44ad]">{{ authStatusLabel }}</span>
+              <span class="col-start-2 text-xs leading-relaxed text-[#6f6685]">{{ authStatusText }}</span>
+            </div>
+
+            <!-- Saved data -->
+            <div class="rounded-2xl border border-[#ede4fb] bg-[#fafafa] px-4 py-3.5">
+              <p class="mb-3 text-[10px] font-bold uppercase tracking-[0.2em] text-[#a99fc0]">Gespeicherte Daten</p>
+              <div class="space-y-2">
+                <div class="flex items-center justify-between text-sm">
+                  <span class="text-[#6f6685]">{{ primaryIdentityLabel }}</span>
+                  <span class="font-semibold text-[#3f3556]">@{{ profileHandle }}</span>
+                </div>
+                <div class="flex items-center justify-between text-sm">
+                  <span class="text-[#6f6685]">Rolle</span>
+                  <span class="text-[10px] font-bold uppercase tracking-[0.1em] text-[#8b6cdb]">{{ props.role }}</span>
+                </div>
+                <div v-if="showTeamLoginDetail" class="flex items-center justify-between text-sm">
+                  <span class="text-[#6f6685]">Team-Login</span>
+                  <span class="font-semibold text-[#3f3556]">@{{ props.session?.teamLogin }}</span>
+                </div>
+                <div v-if="props.session?.boundTwitchUserId" class="flex items-center justify-between text-sm">
+                  <span class="text-[#6f6685]">Gebundenes Twitch</span>
+                  <span class="font-semibold text-[#3f3556]">@{{ props.session.boundTwitchUserId }}</span>
+                </div>
+                <template v-if="isParticipantSession">
+                  <div class="flex items-center justify-between text-sm">
+                    <span class="text-[#6f6685]">Einreichungen</span>
+                    <span class="font-semibold text-[#3f3556]">Clips, Votes, Nominierungen</span>
+                  </div>
+                </template>
+                <template v-else>
+                  <div class="flex items-start justify-between gap-4 text-sm">
+                    <span class="shrink-0 text-[#6f6685]">Accountverwaltung</span>
+                    <span class="text-right font-semibold text-[#3f3556]">Team-Accounts werden im Admin-Panel verwaltet.</span>
+                  </div>
+                </template>
              </div>
            </div>
-          </template>
+
+            <!-- Privacy -->
+            <button
+              type="button"
+              class="flex w-full items-center gap-3 rounded-xl border border-[#ede4fb] bg-[#f9f6ff] px-4 py-3 text-left text-sm font-semibold text-[#6a4fb8] transition hover:bg-[#f1ecfb]"
+              @click="props.onOpenPrivacy"
+            >
+              <Shield class="h-4 w-4 shrink-0" />
+              Datenschutzerklärung lesen
+            </button>
+
+            <!-- Logout -->
+            <button
+              type="button"
+              class="flex w-full items-center gap-3 rounded-xl border border-slate-200 bg-slate-50 px-4 py-3 text-left text-sm font-semibold text-slate-500 transition hover:bg-slate-100"
+              @click="props.onLogout"
+            >
+              <LogOut class="h-4 w-4 shrink-0" />
+              {{ logoutLabel }}
+            </button>
+
+            <!-- Delete request -->
+            <template v-if="isParticipantSession && props.deleteNotConfirm">
+              <button
+                type="button"
+                class="flex w-full items-center gap-3 rounded-xl border border-rose-100 bg-rose-50 px-4 py-3 text-left text-sm font-semibold text-rose-600 transition hover:bg-rose-100"
+                @click="props.onRequestDelete"
+              >
+                <Trash2 class="h-4 w-4 shrink-0" />
+                Meine Daten löschen (Löschrecht Art. 17 DSGVO)
+              </button>
+            </template>
+
+            <!-- Delete confirmation -->
+            <template v-if="isParticipantSession && props.deleteConfirm">
+              <div class="rounded-2xl border-[1.5px] border-rose-200 bg-rose-50 p-4">
+                <p class="text-sm font-semibold text-rose-800">Alle deine Daten werden sofort gelöscht.</p>
+                <p class="mt-1 text-xs leading-relaxed text-rose-600">Das umfasst Votes, Nominierungen und Clip-Einreichungen. Diese Aktion kann nicht rückgängig gemacht werden.</p>
+                <p v-if="props.accountActionError" class="mt-2 text-xs font-bold text-rose-700">{{ props.accountActionError }}</p>
+                <div class="mt-4 flex gap-2">
+                  <button
+                    :disabled="props.authLoading"
+                    type="button"
+                    class="flex-1 rounded-xl border border-[#e6dcf6] bg-white py-2.5 text-sm font-semibold text-[#6f6685] transition hover:bg-[#f9f6ff] disabled:opacity-50"
+                    @click="props.onCancelDelete"
+                  >Abbrechen</button>
+                  <button
+                    :disabled="props.authLoading"
+                    type="button"
+                    class="flex-1 rounded-xl bg-rose-600 py-2.5 text-sm font-bold text-white transition hover:bg-rose-700 disabled:opacity-50"
+                    @click="props.onConfirmDelete"
+                  >{{ props.authLoading ? 'Löscht …' : 'Jetzt löschen' }}</button>
+                </div>
+              </div>
+            </template>
+
+          </div>
        </div>
      </div>
    </div>
@@ -126,23 +233,20 @@ const logoutLabel = computed(() => !isTeamSession.value ? 'Von Twitch abmelden'
 </template>

 <style scoped>
-.home-privacy-content :deep(p) {
+.privacy-content :deep(p) {
  margin: 0 0 14px;
 }
-
-.home-privacy-content :deep(p:last-child),
-.home-privacy-content :deep(ul:last-child),
-.home-privacy-content :deep(ol:last-child) {
+.privacy-content :deep(p:last-child),
+.privacy-content :deep(ul:last-child),
+.privacy-content :deep(ol:last-child) {
  margin-bottom: 0;
 }
-
-.home-privacy-content :deep(ul),
-.home-privacy-content :deep(ol) {
+.privacy-content :deep(ul),
+.privacy-content :deep(ol) {
  margin: 0 0 14px 20px;
  padding-left: 16px;
 }
-
-.home-privacy-content :deep(li) {
+.privacy-content :deep(li) {
  margin: 3px 0;
 }
 </style>
@@ -1,7 +1,9 @@
 <script setup lang="ts">
-import { computed, onBeforeUnmount, onMounted, watch } from 'vue'
+import { computed, onBeforeUnmount, onMounted } from 'vue'
 import { X } from '@lucide/vue'

+import { useBodyScrollLock } from '../../composables/useBodyScrollLock'
+
 const props = withDefaults(defineProps<{
  open: boolean
  title?: string
@@ -23,19 +25,11 @@ function onKey(event: KeyboardEvent) {
  if (event.key === 'Escape' && props.open) emit('close')
 }

-watch(
-  () => props.open,
-  (open) => {
-    if (typeof document !== 'undefined') {
-      document.body.style.overflow = open ? 'hidden' : ''
-    }
-  },
-)
+useBodyScrollLock(() => props.open)

 onMounted(() => window.addEventListener('keydown', onKey))
 onBeforeUnmount(() => {
  window.removeEventListener('keydown', onKey)
-  if (typeof document !== 'undefined') document.body.style.overflow = ''
 })
 </script>