/* ===================================================================
           BLOODLINE APP - ERWEITERTE FEATURES DOKUMENTATION
           ===================================================================

           VERSION: 2.0 - Click-Dummy mit Kaufprozess & Downloads
           DATUM: November 2025
           ZWECK: UI/UX Testing für kommende Features

           NEUE FEATURES IN DIESER VERSION:
           ============================================

           1. SPLASH SCREEN (Zeile 1260-1435)
              - BLOODLINE Logo-Animation beim App-Start
              - 6.5 Sekunden Animations-Sequenz
              - Automatischer Fade-out zur App

           2. KAUFPROZESS-SYSTEM (Zeile 855-1131)
              - 3-Schritte-Checkout (Übersicht → Zahlung → Erfolg)
              - Payment Methods: Apple Pay, Google Pay, Kreditkarte
              - Produktpreis: €9.99 (4K Bild mit kommerzieller Lizenz)
              - Kaufbutton nur im Zoom-Modal (Zeile 2663-2718)

           3. DOWNLOADS-SYSTEM (Zeile 1132-1259)
              - Listenansicht aller gekauften Bilder
              - Thumbnail + Kaufdatum + Download-Button
              - localStorage-basierte Persistierung
              - Icon-Only Tab im Profil

           4. NEUE LIKE-ANIMATION (Zeile 1436-1643)
              - Ersetzt alte einfache Animation
              - Komplexe Herz-Animation mit Partikeln
              - Ripple-Ringe und Glow-Effekte
              - Overlay über aktuellem Bild

           5. ICON-ONLY PROFIL-TABS (Zeile 2762-2784)
              - Favoriten: Bookmark-Icon
              - Geteilte Bilder: Share-Icon mit Badge
              - Downloads: Download-Icon
              - Cleanes, minimalistisches Design
              - Stats (Likes/Favorites) entfernt

           6. SPONSORED LABEL POSITION (Zeile 2579-2594)
              - Verschoben von oben rechts zu unten rechts
              - Bessere Sichtbarkeit bei gesponserten Bildern

           TECHNISCHE ARCHITEKTUR:
           ============================================

           DATENSPEICHERUNG:
           - localStorage 'purchasedImages': Array von Käufen
           - Struktur: { image, date, id, title }
           - Persistiert über Browser-Sessions

           JAVASCRIPT-MODULE:
           - app.js: Haupt-App Logik (bestehend)
           - bloodline_app.html <script>: Purchase & Downloads System
           - Integration via window.* globale Funktionen

           MODAL-HIERARCHIE (Z-Index):
           - Splash Screen: 10000 (höchste)
           - Like Animation: 9999
           - Modals: Variable (Standard)

           STATE-MANAGEMENT:
           - currentPurchaseStep (1-3)
           - selectedPaymentMethod (apple-pay|google-pay|credit-card)
           - currentPurchaseImage (URL)
           - purchasedImages (Array)

           UI/UX DESIGN-ENTSCHEIDUNGEN:
           ============================================

           KAUFBUTTON PLATZIERUNG:
           - Nur in Zoom-Modal (nicht im Grid)
           - Rationale: Bewusste Kaufentscheidung verhindern

           ICON-ONLY TABS:
           - Reduziert visuellen Clutter
           - Konsistent mit modernem App-Design
           - Tooltips für Accessibility

           SPLASH SCREEN DAUER:
           - 6.5 Sekunden Gesamt-Animation
           - Keine Skip-Option (Brand Experience)
           - Elegant, nicht aufdringlich

           PAYMENT METHODS:
           - Apple Pay: Schnell, Mobile-First
           - Google Pay: Android-Nutzer
           - Kreditkarte: Fallback für alle

           DOWNLOADS LISTENANSICHT:
           - Nicht Grid (bessere Übersicht)
           - Chronologisch sortiert (neueste oben)
           - Download-Button prominent platziert

           FARBSCHEMA:
           ============================================
           - Kaufbutton: var(--accent-favorite) #fcef59 (Gelb)
           - Like-Animation: #ff0e44 (Rot)
           - Success-State: #4caf50 (Grün)
           - Sponsored Label: unten rechts mit Backdrop-Blur

           PERFORMANCE-OPTIMIERUNGEN:
           ============================================
           - CSS-Animationen (GPU-beschleunigt)
           - Will-change für animierte Elemente
           - Lazy-Loading von Downloads
           - localStorage statt API-Calls (Demo)

           FUTURE CONSIDERATIONS:
           ============================================
           - Stripe-Integration für echte Zahlungen
           - Backend-API für Käufe
           - Download-History mit Pagination
           - Re-Download Funktion
           - Purchase Receipt/Invoice

           =================================================================== */

        /* === ELEGANTES DESIGN SYSTEM === */
        :root {
            /* Farben */
            --bg-primary: #0c0c0c;
            --bg-secondary: rgba(255,255,255,0.05);
            --bg-tertiary: rgba(255,255,255,0.1);
            --text-primary: #ffffff;
            --text-secondary: rgba(255,255,255,0.7);
            --text-primary-rgb: 255, 255, 255;

            /* Accents */
            --accent-like: #ff3040;
            --accent-favorite: #97794d;
            --accent-connect: #933c3c;

            /* Borders & Backgrounds */
            --border-color: rgba(255,255,255,0.1);
            --modal-overlay: rgba(0,0,0,0.95);
            --gradient-overlay: linear-gradient(to top, rgba(0,0,0,0.7), transparent);

            /* Layout */
            --border-radius: 12px;
            --spacing: 16px;
            --shadow: 0 4px 20px rgba(0,0,0,0.4);
            --transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
        }

        body.light-mode {
            /* Farben */
            --bg-primary: #fafafa;
            --bg-secondary: rgba(0,0,0,0.03);
            --bg-tertiary: rgba(0,0,0,0.08);
            --text-primary: #262626;
            --text-secondary: rgba(0,0,0,0.5);
            --text-primary-rgb: 0, 0, 0;

            /* Borders & Backgrounds */
            --border-color: rgba(0,0,0,0.1);
            --modal-overlay: rgba(255,255,255,0.98);
            --gradient-overlay: linear-gradient(to top, rgba(255,255,255,0.9), transparent);

            /* Shadow */
            --shadow: 0 4px 20px rgba(0,0,0,0.08);
        }

        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            -webkit-tap-highlight-color: transparent;
            user-select: none;
        }

        body {
            font-family: 'Ubuntu', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
            font-weight: 300;
            background: var(--bg-primary);
            overflow: hidden;
            height: 100vh;
            position: fixed;
            width: 100%;
            transition: var(--transition);
        }

        /* === Haupt-Container === */
        #app-container {
            width: 100vw;
            height: 100vh;
            position: relative;
            background: var(--bg-primary);
            cursor: grab;
            overflow: hidden;
            -webkit-overflow-scrolling: touch;
            touch-action: pan-y pan-x;
        }

        /* === Hintergrundbild-Overlay === */
        #app-container::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-image: url('ui/app_background.png');
            background-size: cover;
            background-position: center;
            background-repeat: no-repeat;
            opacity: 0.79; /* Hier die Opacity anpassen (0.0 - 1.0) */
            pointer-events: none;
            z-index: 0;
        }

        #app-container.dragging {
            cursor: grabbing;
            user-select: none;
            -webkit-user-select: none;
        }

        /* === TOP-BAR mit Zahnrad === */
        .top-bar {
            position: absolute;
            top: var(--spacing);
            width: 100%;
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 0 35px;
            z-index: 200;
            pointer-events: none;
        }

        .top-bar-left, .top-bar-center, .top-bar-right {
            display: flex;
            gap: 30px;
            pointer-events: all;
        }

        .top-bar-center {
            position: absolute;
            left: 50%;
            transform: translateX(-50%);
        }

        .info-toggle-button {
            width: 36px;
            height: 36px;
            cursor: pointer;
            background: var(--bg-secondary);
            backdrop-filter: blur(10px);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: var(--transition);
            border: 2px solid transparent;
        }

        .info-toggle-button.active {
            border-color: var(--accent-connect);
            background: rgba(147, 60, 60, 0.1);
        }

        .info-toggle-button svg {
            fill: var(--text-primary);
            width: 20px;
            height: 20px;
        }

        .info-toggle-button:hover {
            transform: scale(1.1);
        }

        .icon-button {
          

              /*
              width: 32px;
            height: 32px;
            cursor: pointer;
            opacity: 0.9;
            transition: var(--transition);
            background: var(--bg-secondary);
            backdrop-filter: blur(10px);
            border-radius: 50%;
            padding: 4px;
            display: flex;
            align-items: center;
            justify-content: center; */
        }

        .icon-button svg {
            fill: var(--text-primary);
            transition: var(--transition);
        }

        .icon-button:hover {
            opacity: 1;
            transform: scale(1.1);
        }

        .profile-button {
          /*   width: 36px;
            height: 36px;
            border-radius: 50%;
            background: linear-gradient(45deg, #f09433, #bc1888);
            cursor: pointer;
            border: 2px solid var(--text-primary);*/
            transition: var(--transition);
        }

        .profile-button:hover {
            transform: scale(1.1);
            box-shadow: 0 0 0 3px var(--accent-connect);
        }

        /* === Image-Stack === */
        .image-stack {
            width: 100%;
            height: 100%;
            position: relative;
            overflow: hidden;
            transform: translateZ(0);
            -webkit-transform: translateZ(0);
        }

        .image-wrapper {
            position: absolute;
            width: 100%;
            height: 100%;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: none;
            will-change: transform;
            transform-style: preserve-3d;
            backface-visibility: hidden;
            -webkit-backface-visibility: hidden;
        }

        /* === SNAPPY GAMIFICATION ANIMATIONEN === */
        .image-wrapper.exit-vertical {
            animation: exitVertical 0.25s cubic-bezier(0.4, 0, 0.2, 1) forwards;
        }

        .image-wrapper.enter-vertical {
            animation: enterVertical 0.3s cubic-bezier(0.4, 0, 0.2, 1) backwards;
        }

        .image-wrapper.exit-horizontal-left {
            animation: exitHorizontalLeft 0.2s cubic-bezier(0.4, 0, 0.2, 1) forwards;
        }

        .image-wrapper.exit-horizontal-right {
            animation: exitHorizontalRight 0.2s cubic-bezier(0.4, 0, 0.2, 1) forwards;
        }

        @keyframes exitVertical {
            0% {
                transform: translateY(0);
                opacity: 1;
            }
            100% {
                transform: translateY(-100vh);
                opacity: 0;
            }
        }

        @keyframes enterVertical {
            0% {
                transform: translateY(20vh);
                opacity: 0;
            }
            100% {
                transform: translateY(0);
                opacity: 1;
            }
        }

        @keyframes exitHorizontalLeft {
            0% {
                transform: translateX(0);
                opacity: 1;
            }
            100% {
                transform: translateX(-100vw);
                opacity: 0;
            }
        }

        @keyframes exitHorizontalRight {
            0% {
                transform: translateX(0);
                opacity: 1;
            }
            100% {
                transform: translateX(100vw);
                opacity: 0;
            }
        }

        /* === Bild-Rendering (850x850 Pixel-Perfect) === */
        .image-layer-container {
            position: relative;
            width: 850px;
            height: 850px;
            max-width: 96%;
            max-height: 96%;
        }

        .main-image {
            width: 100%;
            height: 100%;
            object-fit: contain;
            image-rendering: auto;
            transition: opacity 0.15s cubic-bezier(0.4, 0, 0.2, 1);
            will-change: opacity;
            transform: translateZ(0);
            -webkit-transform: translateZ(0);
        }

        .canvas-bg {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%) scaleY(1.08);
            width: 100%;
 
            object-fit: contain;
            z-index: 1;
            border-radius: 12px;
            filter: drop-shadow(0px 4px 6px rgba(0, 0, 0, 0.1)) drop-shadow(0px 2px 4px rgba(0, 0, 0, 0.06));
        }

        .asset-image {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            object-fit: contain;
            mix-blend-mode: normal;
            z-index: 2;
            /* Soft-Mask entfernt, da wir keinen Canvas mehr blenden */
            border-radius: 12px;
        }

        .asset-image.grayscale-effect {
            filter: grayscale(100%) contrast(1.1) !important;
        }

        .asset-image.illustration-view {
            width: 100%;
            transform: translate(-50%, -50%) scale(0.92);
            border-radius: 12px;
            mix-blend-mode: multiply;
            opacity: 0.9;
        }

        .asset-image.body-view {
            width: 100%;
            transform: translate(-50%, -50%) scale(1);
            mask-image: none;
            -webkit-mask-image: none;
            mix-blend-mode: normal;
            filter: drop-shadow(0px 4px 6px rgba(0, 0, 0, 0.2)) drop-shadow(0px 2px 4px rgba(0, 0, 0, 0.56));
        }

        /* === Info-Overlay (Tags und Likes) === */
        .image-info-overlay {
            position: absolute;
            bottom: 160px;
            left: 50%;
            transform: translateX(-50%);
            background: rgba(var(--text-primary-rgb), 0.04);
            backdrop-filter: blur(30px);
            border-radius: 20px;
            padding: 8px 16px;
            z-index: 350;
            opacity: 0;
            pointer-events: none;
            transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
            border: 1px solid rgba(var(--text-primary-rgb), 0.06);
            max-width: 90%;
            display: flex;
            align-items: flex-start;
            gap: 16px;
            flex-direction: column;
        }

        .image-info-overlay.visible {
            opacity: 1;
            pointer-events: all;
        }

        .image-info-top-row {
            display: flex;
            align-items: center;
            gap: 16px;
            width: 100%;
        }

        .image-info-likes {
            display: flex;
            align-items: center;
            gap: 6px;
            color: var(--text-secondary);
            font-size: 12px;
            font-weight: 500;
            white-space: nowrap;
            flex-shrink: 0;
        }

        .image-info-likes svg {
            width: 14px;
            height: 14px;
            fill: var(--text-secondary);
            opacity: 0.6;
        }

        #info-likes-count {
            font-weight: 700;
        }

        .image-info-tags {
            display: flex;
            flex-wrap: nowrap;
            gap: 6px;
            align-items: center;
            overflow: hidden;
            flex: 1;
            min-width: 0;
        }

        .image-info-tags.expanded {
            flex-wrap: wrap;
        }

        .image-tag {
            padding: 4px 10px;
            background: rgba(var(--text-primary-rgb), 0.05);
            border: 1px solid rgba(var(--text-primary-rgb), 0.1);
            border-radius: 12px;
            color: var(--text-secondary);
            font-size: 11px;
            font-weight: 500;
            cursor: pointer;
            transition: var(--transition);
            white-space: nowrap;
            flex-shrink: 0;
        }

        .image-tag.hidden {
            display: none;
        }

        .image-tag:hover {
            background: rgba(var(--text-primary-rgb), 0.1);
            border-color: rgba(var(--text-primary-rgb), 0.2);
            transform: translateY(-1px);
        }

        .image-tag:active {
            transform: translateY(0);
        }

        .tags-expand-btn {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 24px;
            height: 24px;
            background: rgba(var(--text-primary-rgb), 0.08);
            border: 1px solid rgba(var(--text-primary-rgb), 0.15);
            border-radius: 50%;
            cursor: pointer;
            transition: all 0.2s ease;
            flex-shrink: 0;
        }

        .tags-expand-btn svg {
            width: 14px;
            height: 14px;
            fill: var(--text-secondary);
            transition: transform 0.3s cubic-bezier(0.4, 0.0, 0.2, 1);
        }

        .tags-expand-btn.expanded svg {
            transform: rotate(180deg);
        }

        .tags-expand-btn:hover {
            background: rgba(var(--text-primary-rgb), 0.15);
            border-color: rgba(var(--text-primary-rgb), 0.25);
            transform: scale(1.1);
        }

        /* === Creator-Button (eleganter) === */
        .creator-button {
            position: absolute;
            top: 70px;
            left: 20px;
            background: var(--bg-secondary);
            backdrop-filter: blur(12px);
            padding: 10px 18px;
            border-radius: 24px;
            color: var(--text-primary);
            font-size: 14px;
            font-weight: 700;
            cursor: pointer;
            z-index: 150;
            opacity: 0;
            box-shadow: var(--shadow);
            border: 1px solid var(--border-color);
            transform: translateY(8px) scale(0.95);
            transition: opacity 0.15s cubic-bezier(0.4, 0, 0.2, 1),
                        transform 0.15s cubic-bezier(0.4, 0, 0.2, 1),
                        background 0.2s ease;
            will-change: opacity, transform;
        }

        .creator-button.visible {
            opacity: 1;
            transform: translateY(0) scale(1);
        }

        .creator-button:hover {
            background: var(--bg-tertiary);
            transform: translateY(-2px) scale(1);
        }

        /* === Action-Bar (nach Doppeltap) === */
        .action-bar {
            position: absolute;
            bottom: 35px;
            width: 100%;
            height: 90px;
            background:;
            display: flex;
            justify-content: center;
            align-items: center;
            gap: 70px;
            padding: 0 40px 20px 40px;
            z-index: 100;
            opacity: 0;
 
            transform: translateY(20px);
            transition: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
            pointer-events: none;
        }

        .action-bar.visible {
            opacity: 1;
            transform: translateY(0);
            pointer-events: all;
        }

        .action-icon {
            width: 30px;
            height: 30px;
            cursor: pointer;
            fill: #ffffff87;
            transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
            opacity: 0;
            transform: scale(0.5) translateY(10px);
        }

        .action-bar.visible .action-icon {
            opacity: 1;
            transform: scale(1) translateY(0);
        }

        .action-bar.visible .action-icon:nth-child(1) {
            transition-delay: 0.05s;
        }

        .action-bar.visible .action-icon:nth-child(2) {
            transition-delay: 0.1s;
        }

        .action-bar.visible .action-icon:nth-child(3) {
            transition-delay: 0.15s;
        }

        .action-bar.visible .action-icon:nth-child(4) {
            transition-delay: 0.2s;
        }

        .action-icon:active {
            transform: scale(1.3);
        }

        .action-icon.liked {
            fill: var(--accent-like);
        }

        .action-icon.favorited {
            fill: var(--accent-favorite);
        }

        /* === Like-Herz-Animation === */
        .like-heart {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%) scale(0);
            width: 120px;
            height: 120px;
            pointer-events: none;
            z-index: 50;
        }

        .like-heart.animate {
            animation: heartPop 0.6s cubic-bezier(0.17, 0.89, 0.32, 1.28);
        }

        @keyframes heartPop {
            0% { transform: translate(-50%, -50%) scale(0); opacity: 0; }
            15% { transform: translate(-50%, -50%) scale(1.3); opacity: 1; }
            30% { transform: translate(-50%, -50%) scale(0.9); }
            50% { transform: translate(-50%, -50%) scale(1.05); }
            70% { transform: translate(-50%, -50%) scale(0.98); }
            100% { transform: translate(-50%, -50%) scale(0); opacity: 0; }
        }

        /* === Variations-Punkte (zentriert) === */
        .variations-indicator {
            position: absolute;
            bottom: 170px;
            left: 50%;
            transform: translateX(-50%);
            display: flex;
            gap: 8px;
            z-index: 60;
            opacity: 0;
            transition: opacity 0.25s ease;
        }

        .variations-indicator.visible {
            opacity: 1;
        }

        .variation-dot {
            width: 7px;
            height: 7px;
            border-radius: 50%;
            background: var(--text-secondary);
            opacity: 0.5;
            transition: all 0.25s cubic-bezier(0.4, 0.0, 0.2, 1);
        }

        .variation-dot.active {
            background: var(--text-primary);
            opacity: 1;
            transform: scale(1.5);
        }

        /* === Modal-System (eleganter) === */
        .modal-overlay {
            position: fixed;
            top: 0;
            left: 0;
            width: 100vw;
            height: 100vh;
            background: var(--modal-overlay);
            z-index: 1000;
            opacity: 0;
            pointer-events: none;
            transition: opacity 0.35s cubic-bezier(0.4, 0.0, 0.2, 1);
            overflow-y: auto;
            backdrop-filter: blur(20px);
        }

        .modal-overlay.active {
            opacity: 1;
            pointer-events: all;
        }

        .modal-content {
            padding: 70px 24px 24px;
            color: var(--text-primary);
            max-width: 500px;
            margin: 0 auto;
        }

        .modal-content h2 {
            font-weight: 700;
            margin-bottom: 24px;
        }

        .modal-content h3 {
            font-weight: 700;
        }

        .modal-close {
            position: absolute;
            top: 20px;
            right: 24px;
            font-size: 32px;
            cursor: pointer;
            color: var(--text-primary);
            opacity: 0.8;
            transition: opacity 0.2s;
        }

        .modal-close:hover {
            opacity: 1;
        }

        /* === Profil-Screen === */
        .profile-header {
            display: flex;
            align-items: center;
            margin-bottom: 40px;
            gap: 20px;
            position: relative;
        }

        .profile-edit-button {
            position: absolute;
            top: 0;
            right: 0;
            width: 36px;
            height: 36px;
            background: var(--bg-secondary);
            border: 1px solid var(--border-color);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            transition: var(--transition);
        }

        .profile-edit-button svg {
            width: 18px;
            height: 18px;
            fill: var(--text-primary);
        }

        .profile-edit-button:hover {
            background: var(--accent-connect);
            border-color: var(--accent-connect);
            transform: scale(1.1);
        }

        .profile-edit-button:hover svg {
            fill: white;
        }

        .profile-avatar {
            width: 90px;
            height: 90px;
            border-radius: 50%;
            background: linear-gradient(45deg, #f09433, #bc1888);
            border: 3px solid var(--text-primary);
            cursor: pointer;
            transition: var(--transition);
            position: relative;
            overflow: hidden;
        }

        .profile-avatar img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

        .profile-avatar:hover {
            transform: scale(1.05);
            box-shadow: 0 0 0 4px rgba(147, 60, 60, 0.2);
        }

        .profile-avatar-edit-hint {
            position: absolute;
            bottom: 0;
            left: 0;
            right: 0;
            background: rgba(0, 0, 0, 0.7);
            color: white;
            font-size: 10px;
            padding: 4px;
            text-align: center;
            opacity: 0;
            transition: opacity 0.2s;
        }

        .profile-avatar:hover .profile-avatar-edit-hint {
            opacity: 1;
        }

        .profile-info h2 {
            font-size: 28px;
            margin-bottom: 10px;
            color: var(--text-primary);
            font-weight: 700;
        }

        .profile-stats {
            display: flex;
            gap: 30px;
            font-size: 15px;
            color: var(--text-secondary);
        }

        .profile-stats span {
            font-weight: 500;
        }

        #likes-count, #favorites-count, #creator-follower-count {
            font-weight: 700;
        }

        .follow-button {
            margin-top: 20px;
            padding: 12px 40px;
            background: var(--accent-connect);
            color: white;
            border: none;
            border-radius: 8px;
            font-size: 15px;
            font-weight: 300;
            cursor: pointer;
            transition: var(--transition);
            width: 100%;
        }

        .follow-button:hover {
            transform: translateY(-2px);
            box-shadow: 0 4px 12px rgba(147, 60, 60, 0.4);
        }

        .follow-button.following {
            background: var(--bg-secondary);
            color: var(--text-primary);
            border: 1px solid var(--border-color);
        }

        .follow-button.following:hover {
            background: var(--bg-tertiary);
        }

        .profile-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 3px;
            margin-top: 30px;
        }

        /* Creator-Profil Grid größer */
        #creator-grid {
            grid-template-columns: repeat(2, 1fr);
            gap: 6px;
        }

        .profile-grid-item {
            aspect-ratio: 1;
            background: var(--bg-secondary);
            border-radius: 8px;
            cursor: pointer;
            transition: opacity 0.2s ease;
            overflow: hidden;
        }

        .profile-grid-item:hover {
            opacity: 0.8;
        }

        /* ===================================================================
           KAUFPROZESS-SYSTEM (Purchase Flow)
           ===================================================================

           ÜBERSICHT:
           Der Kaufprozess ermöglicht es Nutzern, Bilder aus ihren Favoriten
           direkt in der App zu erwerben. Der Prozess ist als 3-Schritte-
           Checkout mit Stripe-Integration (simuliert) konzipiert.

           ABLAUF:
           1. Nutzer klickt auf Kaufbutton (nur in Zoom-Ansicht sichtbar)
           2. Schritt 1: Übersicht mit Produktdetails und Preis (€9.99)
           3. Schritt 2: Zahlungsmethode wählen (Apple Pay, Google Pay, Kreditkarte)
           4. Schritt 3: Erfolgsbestätigung mit Weiterleitung zu Downloads

           TECHNISCHE DETAILS:
           - Modal-basiertes UI mit Progress-Indicator
           - Alle Käufe werden in localStorage gespeichert
           - Nach Kauf erscheint Bild automatisch im Downloads-Tab
           - Kaufbutton nur in Zoom-Modal sichtbar (nicht im Favoriten-Grid)

           PAYMENT METHODS:
           - Apple Pay: Schnelle und sichere Zahlung
           - Google Pay: Einfach mit Google bezahlen
           - Kreditkarte: Visa, Mastercard, Amex

           PRODUKT-DETAILS:
           - Auflösung: 4K (3840 x 2160)
           - Lizenz: Kommerzielle Nutzung
           - Formate: JPG, PNG
           - Preis: €9.99 (fix)

           UI/UX DESIGN:
           - Gelber Kaufbutton (accent-favorite Farbe) als rundes Icon
           - 3-Step Progress Indicator mit visueller Status-Anzeige
           - Smooth Transitions zwischen Schritten
           - Success-Animation mit grünem Checkmark

           VERWENDETE KLASSEN:
           - .purchase-modal: Container mit max-width 500px
           - .purchase-steps: Progress Indicator Container
           - .purchase-step: Einzelner Step (1, 2, 3)
           - .purchase-content: Content-Bereich für jeden Step
           - .payment-method: Zahlungsmethode-Karte (hover + selected states)
           - .purchase-success: Success-Screen mit Icon und Buttons

           JAVASCRIPT-FUNKTIONEN:
           - openPurchaseModal(imageSrc): Öffnet Modal mit Bild
           - nextPurchaseStep(): Wechselt zum nächsten Schritt
           - previousPurchaseStep(): Zurück zum vorherigen Schritt
           - selectPaymentMethod(method): Wählt Zahlungsmethode
           - completePurchase(): Führt Kauf durch und speichert
           - buyFromZoom(): Wrapper für Kaufbutton in Zoom-Modal

           =================================================================== */

        .purchase-modal {
            max-width: 500px;
        }

        .purchase-steps {
            display: flex;
            justify-content: space-between;
            margin-bottom: 30px;
            position: relative;
        }

        .purchase-steps::before {
            content: '';
            position: absolute;
            top: 15px;
            left: 15px;
            right: 15px;
            height: 2px;
            background: var(--border-color);
            z-index: 0;
        }

        .purchase-step {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 8px;
            flex: 1;
            position: relative;
            z-index: 1;
        }

        .purchase-step-circle {
            width: 30px;
            height: 30px;
            border-radius: 50%;
            background: var(--bg-secondary);
            border: 2px solid var(--border-color);
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 12px;
            font-weight: 700;
            color: var(--text-secondary);
            transition: all 0.3s ease;
        }

        .purchase-step.active .purchase-step-circle {
            background: var(--accent-favorite);
            border-color: var(--accent-favorite);
            color: #000;
        }

        .purchase-step.completed .purchase-step-circle {
            background: #4caf50;
            border-color: #4caf50;
            color: #fff;
        }

        .purchase-step-label {
            font-size: 11px;
            color: var(--text-secondary);
            text-align: center;
        }

        .purchase-step.active .purchase-step-label {
            color: var(--text-primary);
            font-weight: 500;
        }

        .purchase-content {
            min-height: 300px;
        }

        .purchase-image-preview {
            width: 100%;
            max-width: 200px;
            margin: 0 auto 20px;
            border-radius: 8px;
            overflow: hidden;
        }

        .purchase-image-preview img {
            width: 100%;
            height: auto;
            display: block;
        }

        .purchase-info {
            background: var(--bg-secondary);
            padding: 16px;
            border-radius: 12px;
            margin-bottom: 20px;
        }

        .purchase-info-row {
            display: flex;
            justify-content: space-between;
            padding: 8px 0;
            border-bottom: 1px solid var(--border-color);
        }

        .purchase-info-row:last-child {
            border-bottom: none;
            padding-top: 12px;
            font-weight: 700;
            font-size: 18px;
        }

        .payment-methods {
            display: flex;
            flex-direction: column;
            gap: 12px;
            margin: 20px 0;
        }

        .payment-method {
            padding: 16px;
            background: var(--bg-secondary);
            border: 2px solid var(--border-color);
            border-radius: 12px;
            cursor: pointer;
            transition: all 0.2s ease;
            display: flex;
            align-items: center;
            gap: 12px;
        }

        .payment-method:hover {
            border-color: var(--accent-favorite);
            background: var(--bg-tertiary);
        }

        .payment-method.selected {
            border-color: var(--accent-favorite);
            background: rgba(252, 239, 89, 0.1);
        }

        .payment-icon {
            width: 40px;
            height: 40px;
            border-radius: 8px;
            background: var(--bg-primary);
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 20px;
        }

        .payment-details {
            flex: 1;
        }

        .payment-name {
            font-weight: 500;
            margin-bottom: 4px;
        }

        .payment-description {
            font-size: 12px;
            color: var(--text-secondary);
        }

        .purchase-buttons {
            display: flex;
            gap: 12px;
            margin-top: 20px;
        }

        .purchase-button {
            flex: 1;
            padding: 14px;
            border-radius: 12px;
            border: none;
            cursor: pointer;
            font-weight: 500;
            font-size: 14px;
            transition: all 0.2s ease;
        }

        .purchase-button-primary {
            background: var(--accent-favorite);
            color: #000;
        }

        .purchase-button-primary:hover {
            transform: scale(1.02);
            box-shadow: 0 4px 12px rgba(252, 239, 89, 0.3);
        }

        .purchase-button-secondary {
            background: var(--bg-secondary);
            color: var(--text-primary);
        }

        .purchase-button-secondary:hover {
            background: var(--bg-tertiary);
        }

        .purchase-success {
            text-align: center;
            padding: 40px 20px;
        }

        .purchase-success-icon {
            width: 80px;
            height: 80px;
            margin: 0 auto 20px;
            border-radius: 50%;
            background: rgba(76, 175, 80, 0.1);
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .purchase-success-icon svg {
            width: 40px;
            height: 40px;
            fill: #4caf50;
        }

        /* ===================================================================
           DOWNLOADS-SYSTEM (Downloads Management)
           ===================================================================

           ÜBERSICHT:
           Das Downloads-System verwaltet alle gekauften Bilder und ermöglicht
           es Nutzern, ihre erworbenen Assets herunterzuladen.

           FEATURES:
           - Listenansicht aller gekauften Bilder
           - Thumbnail-Preview (60x60px)
           - Kaufdatum in lesbarem Format (z.B. "17. November 2025")
           - Download-Button mit direktem Download-Link
           - Visual Feedback beim Download (grüner Success-State)

           TECHNISCHE DETAILS:
           - Alle Käufe in localStorage unter 'purchasedImages'
           - Automatisches Laden beim Öffnen des Downloads-Tab
           - Format: Array von Purchase-Objekten mit image, date, id, title

           PURCHASE-OBJEKT STRUKTUR:
           {
             image: "assets/path/to/image.avif",  // Bild-URL
             date: "2025-11-17T16:42:21.862Z",    // ISO Timestamp
             id: 1764002534862,                    // Unique ID
             title: "Bloodline Artwork #5"         // Anzeige-Titel
           }

           UI/UX DESIGN:
           - Listenansicht (nicht Grid) für bessere Übersicht
           - Kompakte Zeilen mit Thumbnail, Info und Action
           - Hover-Effekt auf ganzer Zeile
           - Download-Button in accent-favorite Farbe (gelb)
           - Empty-State: "Keine gekauften Bilder"

           VERWENDETE KLASSEN:
           - .downloads-list: Container für alle Download-Items
           - .download-item: Einzelnes Item (flex row)
           - .download-thumbnail: 60x60px Bildvorschau
           - .download-info: Title und Datum
           - .download-button: Action-Button mit Icon

           JAVASCRIPT-FUNKTIONEN:
           - updateDownloadsList(): Rendert die Liste neu
           - downloadImage(imageSrc, purchaseId): Triggert Download
           - initializePurchases(): Lädt Käufe aus localStorage

           INTEGRATION:
           - Icon-Only Tab im Profil (Download-Symbol)
           - Automatische Aktualisierung nach Kauf
           - Direkter Zugriff über Success-Screen

           =================================================================== */

        .downloads-list {
            display: flex;
            flex-direction: column;
            gap: 12px;
        }

        .download-item {
            display: flex;
            align-items: center;
            gap: 16px;
            padding: 12px;
            background: var(--bg-secondary);
            border-radius: 12px;
            transition: all 0.2s ease;
        }

        .download-item:hover {
            background: var(--bg-tertiary);
        }

        .download-thumbnail {
            width: 60px;
            height: 60px;
            border-radius: 8px;
            overflow: hidden;
            flex-shrink: 0;
        }

        .download-thumbnail img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

        .download-info {
            flex: 1;
        }

        .download-title {
            font-weight: 500;
            margin-bottom: 4px;
        }

        .download-date {
            font-size: 12px;
            color: var(--text-secondary);
        }

        .download-button {
            padding: 8px 16px;
            background: var(--accent-favorite);
            color: #000;
            border: none;
            border-radius: 8px;
            cursor: pointer;
            font-weight: 500;
            font-size: 13px;
            transition: all 0.2s ease;
            display: flex;
            align-items: center;
            gap: 6px;
        }

        .download-button:hover {
            transform: scale(1.05);
            box-shadow: 0 4px 12px rgba(252, 239, 89, 0.3);
        }

        .download-button svg {
            width: 16px;
            height: 16px;
            fill: #000;
        }

        /* ===================================================================
           SPLASH SCREEN (App Launch Animation)
           ===================================================================

           ÜBERSICHT:
           Der Splash Screen zeigt beim App-Start das BLOODLINE-Logo mit
           einer eleganten Animations-Sequenz. Nach Abschluss blendet die
           Animation sanft zur Hauptapp über.

           ANIMATIONS-ABLAUF:
           1. BLOOD-Buchstaben erscheinen (0-1.8s): Blur-fade-in
           2. B-Buchstabe erscheint (0-1.8s): Blur-fade-in parallel
           3. Rote Linie erscheint (1.9-3.4s): Von links nach rechts
           4. Gesamtes Logo verblasst (5.5-6.5s): Fade-out mit scale
           5. Splash Screen wird entfernt (6.5s): App wird sichtbar

           TECHNISCHE DETAILS:
           - Fixed Overlay mit z-index: 10000 (höchste Ebene)
           - Schwarzer Hintergrund (#000000)
           - SVG-basiertes Logo (responsive)
           - Automatisches Entfernen nach 6.5 Sekunden
           - Smooth Fade-out Transition (0.5s)

           ANIMATIONS-KEYFRAMES:
           - revealLettersBlood: Blur-in für BLOOD-Buchstaben
           - revealLettersB: Blur-in für B-Buchstabe
           - revealRedLine: Opacity-fade für rote Linie
           - revealRedLinePath: Clip-path Animation (left to right)
           - logoFadeOut: Final fade mit subtle scale-down

           SVG-STRUKTUR:
           - #letters-blood: BLOOD Textpfad (weiß)
           - #letters-b: B Textpfad (weiß)
           - #red-line: Rote horizontale Linie (rgb(255,14,68))
           - Drop-shadow Filter auf roter Linie für Glow-Effekt

           UI/UX DESIGN:
           - Logo bei 70% Container-Breite (max-width: 420px)
           - Zentriert (flex center)
           - Blur-Effekt für sanftes Erscheinen
           - Rote Linie mit Glow für Premium-Look
           - Finale Scale-Animation für eleganten Übergang

           JAVASCRIPT-STEUERUNG:
           - setTimeout(6500ms): Startet Fade-out
           - addClass('fade-out'): Triggert Transition
           - setTimeout(7000ms): Entfernt Element aus DOM
           - Kein User-Interaction während Splash

           PERFORMANCE:
           - Will-change auf animierten Elementen
           - CSS-Animationen (GPU-beschleunigt)
           - Kein JavaScript während Animation
           - Einmaliges Laden, dann Removal

           =================================================================== */

        #splash-screen {
            position: fixed;
            top: 0;
            left: 0;
            width: 100vw;
            height: 100vh;
            background-color: #000000;
            display: flex;
            justify-content: center;
            align-items: center;
            z-index: 10000;
            transition: opacity 0.5s ease-out;
        }

        #splash-screen.fade-out {
            opacity: 0;
            pointer-events: none;
        }

        .splash-container {
            width: 100%;
            max-width: 420px;
            padding: 40px;
            display: flex;
            justify-content: center;
            align-items: center;
        }

        .splash-container svg {
            width: 70%;
            height: auto;
            animation: logoFadeOut 1s ease-in-out 5.5s forwards;
        }

        #letters-blood {
            opacity: 0;
            animation: revealLettersBlood 1.8s ease-out forwards;
        }

        #letters-blood path {
            fill: white;
        }

        #letters-b {
            opacity: 0;
            animation: revealLettersB 1.8s ease-out forwards;
        }

        #letters-b path {
            fill: white;
        }

        #red-line {
            opacity: 0;
            animation: revealRedLine 1.5s ease-out 1.9s forwards;
        }

        #red-line path {
            animation: revealRedLinePath 1.5s ease-out 1.9s forwards;
        }

        @keyframes revealLettersBlood {
            0% {
                opacity: 0;
                filter: blur(8px);
            }
            100% {
                opacity: 1;
                filter: blur(0px);
            }
        }

        @keyframes revealLettersB {
            0% {
                opacity: 0;
                filter: blur(8px);
            }
            100% {
                opacity: 1;
                filter: blur(0px);
            }
        }

        @keyframes revealRedLine {
            0% {
                opacity: 0;
            }
            10% {
                opacity: 1;
            }
            100% {
                opacity: 1;
            }
        }

        @keyframes revealRedLinePath {
            0% {
                clip-path: polygon(0 0, 0 0, 0 100%, 0 100%);
            }
            100% {
                clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
            }
        }

        @keyframes logoFadeOut {
            0% {
                opacity: 1;
                transform: scale(1);
            }
            100% {
                opacity: 0;
                transform: scale(0.95);
            }
        }

        #red-line path {
            filter: drop-shadow(0 0 8px rgba(255, 14, 68, 0.8));
        }

        /* ===================================================================
           LIKE-ANIMATION OVERLAY (Enhanced Heart Animation)
           ===================================================================

           ÜBERSICHT:
           Die neue Like-Animation zeigt eine aufwendige Herz-Animation mit
           Partikel-Effekten und Ripple-Ringen als Overlay über dem aktuellen
           Bild. Diese ersetzt die alte, einfache Like-Animation.

           ANIMATIONS-ABLAUF:
           1. Herz erscheint (0-0.1s): Fade-in mit scale
           2. Herz-Pfad wird gezeichnet (0-0.5s): Stroke-dasharray Animation
           3. Herz wird gefüllt (0.5-0.7s): Fill-Animation
           4. Bounce-Effekt (0.45-0.7s): Scale 1.15 → 0.95 → 1.05 → 1.0
           5. Partikel explodieren (0.4-1.3s): 6 Partikel in verschiedene Richtungen
           6. Ripple-Ringe (0.25-1.05s): 3 Wellen expandieren nach außen
           7. Herz verschwindet (0.8-1.3s): Fade-out

           TECHNISCHE DETAILS:
           - Fixed Overlay mit z-index: 9999
           - Pointer-events: none (kein Blockieren der UI)
           - Zentriert über aktuellem Bild
           - Automatisches Zurücksetzen nach 1.3s
           - Doppel-Trigger-Schutz (verhindert Spam)

           ANIMATIONS-KOMPONENTEN:
           1. HERZ (heart-wrapper):
              - 180x180px Container
              - SVG-Pfad mit Stroke-Animation
              - Fill-Animation von transparent zu #ff0e44
              - Drop-shadow Glow-Effekt (20px + 40px)

           2. PARTIKEL (6 Stück):
              - 8x8px runde Partikel
              - Radial-gradient Background
              - Explosion in 6 Richtungen (-60px, 60px, -80px, 80px)
              - Gestaffelte Start-Delays (0.4-0.55s)
              - Fade-out während Bewegung

           3. RIPPLE-RINGE (3 Stück):
              - Start: 200x200px
              - End: 380x380px
              - Border-fade (2px → 0px)
              - Gestaffelte Start-Delays (0.25-0.45s)
              - Opacity-fade während Expansion

           KEYFRAME-ANIMATIONEN:
           - drawHeart: stroke-dashoffset von 2000 zu 0
           - fillHeart: fill von transparent zu #ff0e44, stroke-width zu 0
           - likeSequence: Opacity + Scale-Sequenz für Herz
           - explode: Partikel-Bewegung mit Opacity-fade
           - ripple: Ring-Expansion mit Border und Opacity-fade

           UI/UX DESIGN:
           - Erscheint über dem Bild (nicht schwarzer Hintergrund)
           - Rote Farbe (#ff0e44) passend zum App-Theme
           - Smooth, organische Bewegungen (cubic-bezier)
           - Visuell aufwendiger als Standard-Like
           - Professioneller, polierter Look

           VERWENDETE KLASSEN:
           - #like-animation-overlay: Container (fullscreen)
           - .heart-wrapper: Herz + Effekte Container
           - .heart-wrapper.liked: Trigger-Klasse für Animation
           - .particle-1 bis .particle-6: Einzelne Partikel
           - .ring-1 bis .ring-3: Ripple-Ringe

           JAVASCRIPT-INTEGRATION:
           - triggerLikeAnimation(): Globale Funktion zum Triggern
           - Wird von app.js aufgerufen bei toggleLike()
           - Automatisches Cleanup nach Animation
           - Verhindert Mehrfach-Trigger während Animation

           PERFORMANCE:
           - CSS-Animationen (GPU-beschleunigt)
           - Transform-basierte Bewegungen
           - Will-change für optimierte Performance
           - Keine JavaScript-Animationen (nur Trigger)

           UNTERSCHIED ZUR ALTEN ANIMATION:
           - Alt: Einfaches scale-up des Like-Icons
           - Neu: Komplexe Multi-Layer Animation mit Partikeln
           - Alt: Lokales Icon-Feedback
           - Neu: Fullscreen-Overlay für bessere Sichtbarkeit
           - Neu: Professionellere, aufwendigere Visualisierung

           =================================================================== */

        #like-animation-overlay {
            position: fixed;
            top: 0;
            left: 0;
            width: 100vw;
            height: 100vh;
            display: flex;
            justify-content: center;
            align-items: center;
            pointer-events: none;
            z-index: 9999;
        }

        .heart-wrapper {
            position: relative;
            width: 180px;
            height: 180px;
            display: flex;
            justify-content: center;
            align-items: center;
        }

        .heart-wrapper svg {
            width: 100%;
            height: 100%;
            opacity: 0;
            transform: scale(0.8);
        }

        .heart-wrapper svg path {
            fill: transparent;
            stroke: #ff0e44;
            stroke-width: 1.5;
            stroke-dasharray: 2000;
            stroke-dashoffset: 2000;
        }

        .heart-wrapper.liked svg {
            animation: likeSequence 1.3s ease-out forwards;
            filter: drop-shadow(0 0 20px rgba(255, 14, 68, 0.8))
                    drop-shadow(0 0 40px rgba(255, 14, 68, 0.5));
        }

        .heart-wrapper.liked svg path {
            animation: drawHeart 0.5s ease-out forwards,
                       fillHeart 0.2s ease-out 0.5s forwards;
        }

        @keyframes drawHeart {
            to {
                stroke-dashoffset: 0;
            }
        }

        @keyframes fillHeart {
            to {
                fill: #ff0e44;
                stroke-width: 0;
            }
        }

        @keyframes likeSequence {
            0% {
                opacity: 0;
                transform: scale(0.8);
            }
            10% {
                opacity: 1;
                transform: scale(0.8);
            }
            45% {
                opacity: 1;
                transform: scale(1);
            }
            50% {
                transform: scale(1.15);
            }
            60% {
                transform: scale(0.95);
            }
            65% {
                transform: scale(1.05);
            }
            70% {
                transform: scale(1);
            }
            80% {
                opacity: 1;
                transform: scale(1);
            }
            100% {
                opacity: 0;
                transform: scale(0.8);
            }
        }

        .particle {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            border-radius: 50%;
            background: radial-gradient(circle, rgba(255, 14, 68, 1), rgba(255, 14, 68, 0));
            pointer-events: none;
            opacity: 0;
            width: 8px;
            height: 8px;
        }

        .heart-wrapper.liked .particle-1 {
            animation: explode 0.9s ease-out 0.4s forwards;
            --tx: -60px;
            --ty: -60px;
        }

        .heart-wrapper.liked .particle-2 {
            animation: explode 0.9s ease-out 0.45s forwards;
            --tx: 60px;
            --ty: -60px;
        }

        .heart-wrapper.liked .particle-3 {
            animation: explode 0.9s ease-out 0.5s forwards;
            --tx: -60px;
            --ty: 60px;
        }

        .heart-wrapper.liked .particle-4 {
            animation: explode 0.9s ease-out 0.55s forwards;
            --tx: 60px;
            --ty: 60px;
        }

        .heart-wrapper.liked .particle-5 {
            animation: explode 0.9s ease-out 0.42s forwards;
            --tx: -80px;
            --ty: 0px;
        }

        .heart-wrapper.liked .particle-6 {
            animation: explode 0.9s ease-out 0.48s forwards;
            --tx: 80px;
            --ty: 0px;
        }

        @keyframes explode {
            0% {
                opacity: 0;
                transform: translate(-50%, -50%) translate(0, 0) scale(0);
            }
            20% {
                opacity: 1;
            }
            100% {
                opacity: 0;
                transform: translate(-50%, -50%) translate(var(--tx), var(--ty)) scale(0.5);
            }
        }

        .ring {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            border: 2px solid rgba(255, 14, 68, 0.4);
            border-radius: 50%;
            pointer-events: none;
            opacity: 0;
        }

        .heart-wrapper.liked .ring-1 {
            animation: ripple 0.8s ease-out 0.25s forwards;
        }

        .heart-wrapper.liked .ring-2 {
            animation: ripple 0.8s ease-out 0.35s forwards;
        }

        .heart-wrapper.liked .ring-3 {
            animation: ripple 0.8s ease-out 0.45s forwards;
        }

        .ring-1, .ring-2, .ring-3 {
            width: 200px;
            height: 200px;
        }

        @keyframes ripple {
            0% {
                width: 200px;
                height: 200px;
                opacity: 0;
                border-width: 2px;
            }
            20% {
                opacity: 0.8;
            }
            100% {
                width: 380px;
                height: 380px;
                opacity: 0;
                border-width: 0px;
            }
        }

        /* === Settings-Modal === */
        .settings-section {
            margin-bottom: 40px;
        }

        .settings-section h3 {
            margin-bottom: 20px;
            color: var(--text-secondary);
            font-size: 14px;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 1px;
        }

        .settings-item {
            padding: 18px 0;
            border-bottom: 1px solid var(--bg-secondary);
            cursor: pointer;
            transition: opacity 0.2s;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .settings-item:hover {
            opacity: 0.7;
        }

        .settings-item.danger {
            color: #ed4956;
            font-weight: 700;
        }

        /* === Theme Toggle === */
        .theme-toggle {
            position: relative;
            width: 50px;
            height: 28px;
            background: var(--bg-secondary);
            border-radius: 14px;
            cursor: pointer;
            transition: background 0.3s;
        }

        .theme-toggle.active {
            background: var(--accent-connect);
        }

        .theme-toggle-handle {
            position: absolute;
            top: 3px;
            left: 3px;
            width: 22px;
            height: 22px;
            background: var(--text-primary);
            border-radius: 50%;
            transition: transform 0.3s cubic-bezier(0.4, 0.0, 0.2, 1);
        }

        .theme-toggle.active .theme-toggle-handle {
            transform: translateX(22px);
        }

        /* === Creator Meta-Buttons === */
        .creator-meta-section {
            margin-top: 40px;
        }

        .collapsible-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            cursor: pointer;
            transition: var(--transition);
            user-select: none;
        }

        .collapsible-header:hover {
            opacity: 0.7;
        }

        .collapsible-arrow {
            width: 20px;
            height: 20px;
            fill: var(--text-secondary);
            transition: transform 0.3s cubic-bezier(0.4, 0.0, 0.2, 1);
        }

        .collapsible-header.collapsed .collapsible-arrow {
            transform: rotate(-90deg);
        }

        .creator-meta-grid {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 12px;
            margin-top: 20px;
            max-height: 500px;
            overflow: hidden;
            transition: max-height 0.4s cubic-bezier(0.4, 0.0, 0.2, 1), opacity 0.3s ease, margin-top 0.3s ease;
            opacity: 1;
        }

        .creator-meta-grid.collapsed {
            max-height: 0;
            opacity: 0;
            margin-top: 0;
        }


        .meta-preview-card {
            position: relative;
            aspect-ratio: 16/9;
            background: var(--bg-secondary);
            border-radius: 12px;
            cursor: pointer;
            transition: var(--transition);
            border: 1px solid var(--border-color);
            overflow: hidden;
        }

        .meta-preview-card img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

        .meta-preview-overlay {
            position: absolute;
            bottom: 0;
            left: 0;
            right: 0;
            padding: 12px;
            background: linear-gradient(to top, rgba(0,0,0,0.8), transparent);
            color: white;
            font-size: 13px;
            font-weight: 700;
            display: flex;
            align-items: center;
            gap: 6px;
        }

        .meta-preview-card.video .meta-preview-overlay::before {
            content: "▶";
            color: white;
            font-size: 16px;
        }

        .meta-preview-card:hover {
            transform: translateY(-4px);
            box-shadow: var(--shadow);
        }

        /* === Loading-Spinner === */
        .loading {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 44px;
            height: 44px;
            border: 3px solid rgba(255,255,255,0.2);
            border-top-color: var(--text-primary);
            border-radius: 50%;
            animation: spin 0.8s cubic-bezier(0.4, 0.0, 0.2, 1) infinite;
        }

        @keyframes spin {
            to { transform: translate(-50%, -50%) rotate(360deg); }
        }

        /* === Toast-Benachrichtigung === */
        .toast {
            position: fixed;
            bottom: 100px;
            left: 50%;
            transform: translateX(-50%);
            background: var(--bg-secondary);
            backdrop-filter: blur(10px);
            color: var(--text-primary);
            padding: 16px 24px;
            border-radius: 12px;
            font-size: 14px;
            font-weight: 500;
            z-index: 300;
            opacity: 0;
            transition: opacity 0.2s ease;
            box-shadow: var(--shadow);
            border: 1px solid var(--border-color);
        }

        .toast.show {
            opacity: 1;
        }

        /* === MODERNE SUCHE (Instagram-Style) === */
        .search-input {
            width: 100%;
            padding: 14px 20px 14px 44px;
            background: var(--bg-secondary);
            border: 1px solid var(--border-color);
            border-radius: 12px;
            color: var(--text-primary);
            font-size: 15px;
            font-family: inherit;
            outline: none;
            transition: var(--transition);
            margin: 20px 0;
            backdrop-filter: blur(10px);
        }

        .search-input:focus {
            background: var(--bg-secondary);
            border-color: var(--accent-connect);
            box-shadow: 0 0 0 3px rgba(147, 60, 60, 0.1);
        }

        .search-input::placeholder {
            color: var(--text-secondary);
        }

        .search-suggestions {
            display: flex;
            flex-wrap: wrap;
            gap: 10px;
            margin-top: 30px;
        }

        .search-tag {
            padding: 10px 20px;
            background: var(--bg-secondary);
            border: 1px solid var(--border-color);
            border-radius: 24px;
            color: var(--text-primary);
            font-size: 14px;
            font-weight: 500;
            cursor: pointer;
            transition: var(--transition);
            backdrop-filter: blur(10px);
        }

        .search-tag:hover {
            background: var(--accent-connect);
            border-color: var(--accent-connect);
            color: white;
            transform: translateY(-2px);
            box-shadow: 0 4px 12px rgba(147, 60, 60, 0.3);
        }

        .search-tag:active {
            transform: translateY(0);
        }

        /* === Such-Icon im Input === */
        .search-input-wrapper {
            position: relative;
        }

        .search-input-wrapper::before {
            content: '';
            position: absolute;
            left: 16px;
            top: 50%;
            transform: translateY(-50%);
            width: 18px;
            height: 18px;
            background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23999'%3E%3Cpath d='M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z'/%3E%3C/svg%3E");
            background-size: contain;
            background-repeat: no-repeat;
            pointer-events: none;
        }

        .search-suggestions {
            background: var(--bg-secondary);
            border: 1px solid var(--border-color);
            border-radius: 12px;
            margin-top: 20px;
            max-height: 400px;
            overflow-y: auto;
            display: none;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
        }

        .search-suggestions.visible {
            display: block;
        }

        .suggestion-category {
            padding: 12px 16px 8px 16px;
            font-size: 12px;
            font-weight: 700;
            color: var(--text-secondary);
            text-transform: uppercase;
            letter-spacing: 0.5px;
        }

        .suggestion-item {
            padding: 12px 16px;
            display: flex;
            align-items: center;
            gap: 12px;
            cursor: pointer;
            transition: background 0.2s;
            border-bottom: 1px solid var(--border-color);
        }

        .suggestion-item:last-child {
            border-bottom: none;
        }

        .suggestion-item:hover {
            background: var(--bg-primary);
        }

        .suggestion-avatar {
            width: 40px;
            height: 40px;
            border-radius: 50%;
            object-fit: cover;
            flex-shrink: 0;
        }

        .suggestion-info {
            flex: 1;
            min-width: 0;
        }

        .suggestion-name {
            font-weight: 700;
            color: var(--text-primary);
            font-size: 14px;
            margin-bottom: 2px;
        }

        .suggestion-username {
            font-size: 13px;
            color: var(--text-secondary);
        }

        .suggestion-tag {
            display: inline-flex;
            align-items: center;
            padding: 8px 16px;
            background: var(--bg-primary);
            border-radius: 20px;
            font-size: 14px;
            color: var(--text-primary);
        }

        .suggestion-tag:hover {
            background: rgba(147, 60, 60, 0.1);
        }

        /* === Avatar Auswahl === */
        .avatar-selection-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 12px;
            margin: 30px 0;
        }

        .avatar-option {
            aspect-ratio: 1;
            border-radius: 12px;
            overflow: hidden;
            cursor: pointer;
            transition: var(--transition);
            border: 3px solid transparent;
            position: relative;
        }

        .avatar-option img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

        .avatar-option:hover {
            transform: scale(1.05);
            border-color: var(--accent-connect);
        }

        .avatar-option.selected {
            border-color: var(--accent-connect);
            box-shadow: 0 0 0 3px rgba(147, 60, 60, 0.2);
        }

        /* === Share Friends List === */
        .share-friend-item {
            display: flex;
            align-items: center;
            gap: 12px;
            padding: 12px;
            border-radius: 12px;
            cursor: pointer;
            transition: background 0.2s;
            margin-bottom: 8px;
        }

        .share-friend-item:hover {
            background: var(--bg-primary);
        }

        .share-friend-avatar {
            width: 48px;
            height: 48px;
            border-radius: 50%;
            object-fit: cover;
            flex-shrink: 0;
        }

        .share-friend-info {
            flex: 1;
            min-width: 0;
        }

        .share-friend-name {
            font-weight: 700;
            color: var(--text-primary);
            font-size: 15px;
            margin-bottom: 2px;
        }

        .share-friend-username {
            font-size: 13px;
            color: var(--text-secondary);
        }

        .share-friend-checkbox {
            width: 24px;
            height: 24px;
            border: 2px solid var(--border-color);
            border-radius: 6px;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: all 0.2s;
        }

        .share-friend-item.selected .share-friend-checkbox {
            background: var(--accent-connect);
            border-color: var(--accent-connect);
        }

        .share-friend-item.selected .share-friend-checkbox::after {
            content: '✓';
            color: white;
            font-size: 16px;
            font-weight: 700;
        }

        .share-send-button {
            margin-top: 20px;
            padding: 14px 28px;
            background: var(--accent-connect);
            color: white;
            border: none;
            border-radius: 8px;
            cursor: pointer;
            width: 100%;
            font-size: 16px;
            font-weight: 700;
            transition: opacity 0.2s;
        }

        .share-send-button:disabled {
            opacity: 0.5;
            cursor: not-allowed;
        }

        .share-send-button:not(:disabled):hover {
            opacity: 0.9;
        }

        .avatar-editor-button {
            width: 100%;
            padding: 16px;
            background: var(--bg-secondary);
            border: 2px dashed var(--border-color);
            border-radius: 12px;
            color: var(--text-primary);
            font-size: 14px;
            font-weight: 700;
            cursor: pointer;
            transition: var(--transition);
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
            margin-top: 20px;
        }

        .avatar-editor-button:hover {
            background: var(--bg-tertiary);
            border-color: var(--accent-connect);
        }

        /* === Language Selection === */
        .language-selection {
            display: flex;
            flex-direction: column;
            gap: 12px;
            margin-top: 30px;
        }

        .language-option {
            padding: 16px 20px;
            background: var(--bg-secondary);
            border: 1px solid var(--border-color);
            border-radius: 12px;
            display: flex;
            align-items: center;
            gap: 16px;
            cursor: pointer;
            transition: var(--transition);
        }

        .language-option:hover {
            background: var(--bg-tertiary);
            border-color: var(--accent-connect);
            transform: translateX(4px);
        }

        .language-flag {
            font-size: 24px;
        }

        .language-option span:last-child {
            color: var(--text-primary);
            font-size: 16px;
            font-weight: 500;
        }

        #current-language {
            color: var(--text-secondary);
            font-size: 14px;
        }

        /* === Benachrichtigungssystem === */
        .notification-badge {
            position: absolute;
    top: 15px;
    right: 15px;
    min-width: 20px;
    height: 18px;
            background: var(--accent-like);
            color: white;
            border-radius: 10px;
            font-size: 11px;
            font-weight: 700;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 0 5px;
            border: 2px solid var(--bg-primary);
        }

        .notifications-panel {
            position: fixed;
            top: 70px;
            right: 20px;
            width: 360px;
            max-width: calc(100vw - 40px);
            max-height: 500px;
            background: var(--modal-overlay);
            backdrop-filter: blur(20px);
            border: 1px solid var(--border-color);
            border-radius: 16px;
            box-shadow: var(--shadow);
            z-index: 900;
            opacity: 0;
            transform: translateY(-10px) scale(0.95);
            pointer-events: none;
            transition: all 0.25s cubic-bezier(0.4, 0.0, 0.2, 1);
        }

        .notifications-panel.active {
            opacity: 1;
            transform: translateY(0) scale(1);
            pointer-events: all;
        }

        .notifications-header {
            padding: 16px 20px;
            border-bottom: 1px solid var(--border-color);
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .notifications-header h3 {
            font-size: 16px;
            font-weight: 700;
            color: var(--text-primary);
        }

        .notifications-close {
            font-size: 28px;
            color: var(--text-secondary);
            cursor: pointer;
            line-height: 1;
            transition: color 0.2s;
        }

        .notifications-close:hover {
            color: var(--text-primary);
        }

        .notifications-list {
            max-height: 440px;
            overflow-y: auto;
        }

        .notification-item {
            padding: 14px 20px;
            border-bottom: 1px solid var(--border-color);
            cursor: pointer;
            transition: background 0.2s;
            display: flex;
            gap: 12px;
            align-items: flex-start;
        }

        .notification-item:last-child {
            border-bottom: none;
        }

        .notification-item:hover {
            background: var(--bg-secondary);
        }

        .notification-item.unread {
            background: rgba(147, 60, 60, 0.05);
        }

        .notification-item.unread::before {
            content: '';
            width: 8px;
            height: 8px;
            background: var(--accent-connect);
            border-radius: 50%;
            flex-shrink: 0;
            margin-top: 6px;
        }

        .notification-avatar {
            width: 40px;
            height: 40px;
            border-radius: 50%;
            object-fit: cover;
            flex-shrink: 0;
        }

        .notification-content {
            flex: 1;
            min-width: 0;
        }

        .notification-text {
            color: var(--text-primary);
            font-size: 14px;
            line-height: 1.4;
            margin-bottom: 4px;
        }

        .notification-text strong {
            font-weight: 700;
        }

        .notification-time {
            color: var(--text-secondary);
            font-size: 12px;
        }

        .notification-image {
            width: 50px;
            height: 50px;
            border-radius: 8px;
            object-fit: cover;
            flex-shrink: 0;
        }

        .notifications-empty {
            padding: 60px 20px;
            text-align: center;
            color: var(--text-secondary);
            font-size: 14px;
        }

        /* === Profil-Tabs === */
        .profile-tabs {
            display: flex;
            gap: 0;
            margin-top: 30px;
            border-bottom: 2px solid var(--border-color);
        }

        .profile-tab {
            flex: 1;
            padding: 14px 20px;
            text-align: center;
            font-size: 15px;
            font-weight: 600;
            color: var(--text-secondary);
            cursor: pointer;
            border-bottom: 3px solid transparent;
            margin-bottom: -2px;
            transition: all 0.2s ease;
            position: relative;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
        }

        .profile-tab:hover {
            color: var(--text-primary);
        }

        .profile-tab.active {
            color: var(--text-primary);
            border-bottom-color: var(--accent-connect);
        }

        .shared-badge {
            background: var(--accent-like);
            color: white;
            border-radius: 10px;
            padding: 2px 8px;
            font-size: 11px;
            font-weight: 700;
            min-width: 20px;
            text-align: center;
        }

        .tab-content {
            display: none;
            margin-top: 20px;
        }

        .tab-content.active {
            display: block;
        }

        /* === Geteilte Bilder Sektionen === */
        .shared-section {
            margin-bottom: 24px;
            border: 1px solid var(--border-color);
            border-radius: 12px;
            overflow: hidden;
            background: var(--bg-secondary);
        }

        .shared-section-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 16px 20px;
            cursor: pointer;
            transition: background 0.2s;
            user-select: none;
        }

        .shared-section-header:hover {
            background: var(--bg-tertiary);
        }

        .shared-section-user {
            display: flex;
            align-items: center;
            gap: 12px;
        }

        .shared-section-avatar {
            width: 44px;
            height: 44px;
            border-radius: 50%;
            object-fit: cover;
        }

        .shared-section-info h4 {
            font-size: 15px;
            font-weight: 700;
            color: var(--text-primary);
            margin-bottom: 2px;
        }

        .shared-section-info p {
            font-size: 13px;
            color: var(--text-secondary);
        }

        .shared-section-actions {
            display: flex;
            align-items: center;
            gap: 12px;
        }

        .shared-section-delete {
            width: 32px;
            height: 32px;
            background: rgba(237, 73, 86, 0.1);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            color: #ed4956;
            font-size: 18px;
            cursor: pointer;
            transition: all 0.2s;
        }

        .shared-section-delete:hover {
            background: #ed4956;
            color: white;
            transform: scale(1.1);
        }

        .shared-section-toggle {
            width: 28px;
            height: 28px;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: transform 0.3s cubic-bezier(0.4, 0.0, 0.2, 1);
        }

        .shared-section-toggle svg {
            width: 20px;
            height: 20px;
            fill: var(--text-secondary);
        }

        .shared-section.collapsed .shared-section-toggle {
            transform: rotate(-90deg);
        }

        .shared-section-content {
            max-height: 1000px;
            overflow: hidden;
            transition: max-height 0.4s cubic-bezier(0.4, 0.0, 0.2, 1), opacity 0.3s ease;
            opacity: 1;
        }

        .shared-section.collapsed .shared-section-content {
            max-height: 0;
            opacity: 0;
        }

        .shared-images-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 4px;
            padding: 12px;
        }

        .shared-image-item {
            aspect-ratio: 1;
            position: relative;
            cursor: pointer;
            border-radius: 8px;
            overflow: hidden;
            transition: opacity 0.2s;
        }

        .shared-image-item:hover {
            opacity: 0.8;
        }

        .shared-image-item img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

        .shared-image-delete {
            position: absolute;
            top: 6px;
            right: 6px;
            width: 26px;
            height: 26px;
            background: rgba(0, 0, 0, 0.75);
            backdrop-filter: blur(10px);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            font-size: 20px;
            font-weight: 300;
            cursor: pointer;
            opacity: 0;
            transition: all 0.2s ease;
            z-index: 10;
        }

        .shared-image-item:hover .shared-image-delete {
            opacity: 1;
        }

        .shared-image-delete:hover {
            background: var(--accent-like);
            transform: scale(1.1);
        }

        /* === Zoom Modal Button === */
        .zoom-remove-favorite-btn {
            width: 100%;
            padding: 14px 24px;
            background: rgba(237, 73, 86, 0.1);
            border: 2px solid #ed4956;
            border-radius: 12px;
            color: #ed4956;
            font-size: 15px;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.2s ease;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-top: 20px;
        }

        .zoom-remove-favorite-btn:hover {
            background: #ed4956;
            color: white;
            transform: translateY(-2px);
            box-shadow: 0 4px 12px rgba(237, 73, 86, 0.3);
        }

        .zoom-remove-favorite-btn:active {
            transform: translateY(0);
        }

        /* ===================================================================
           KAUFBUTTON IM ZOOM-MODAL (Purchase Button in Image Detail View)
           ===================================================================

           POSITION & DESIGN:
           - Erscheint NUR im Zoom-Modal (große Bildansicht)
           - NICHT im Favoriten-Grid sichtbar
           - Unten links neben "Als Favorit entfernen" Button
           - Runder Button (56x56px) in accent-favorite Farbe (gelb)
           - Shopping Cart Icon (24x24px)

           VERHALTEN:
           - Hover: Scale 1.1 mit gelbem Glow-Shadow
           - Click: Öffnet Purchase-Modal mit 3-Schritte-Checkout
           - Active: Scale 0.95 für Feedback
           - Tooltip: "Bild kaufen"

           INTEGRATION:
           - Button im Zoom-Modal HTML (bloodline_app.html:2638-2642)
           - onClick: buyFromZoom() Funktion
           - Übergibt aktuelle Bild-URL an Purchase-Modal
           - Flex-Layout mit Remove-Button daneben

           UI/UX RATIONALE:
           - Nur in Detail-Ansicht = Bewusste Kaufentscheidung
           - Nicht im Grid = Vermeidet versehentliche Klicks
           - Gelbe Farbe = Konsistent mit Favoriten-Farbschema
           - Runde Form = Moderne, cleane Ästhetik
           - Icon-Only = Platz sparend, visuell klar

           =================================================================== */

        .zoom-buy-btn {
            width: 56px;
            height: 56px;
            padding: 0;
            background: var(--accent-favorite);
            border: none;
            border-radius: 50%;
            color: #000;
            cursor: pointer;
            transition: all 0.2s ease;
            display: flex;
            align-items: center;
            justify-content: center;
            flex-shrink: 0;
        }

        .zoom-buy-btn:hover {
            transform: scale(1.1);
            box-shadow: 0 4px 16px rgba(252, 239, 89, 0.4);
        }

        .zoom-buy-btn:active {
            transform: scale(0.95);
        }

        /* === Zoom Modal Navigation === */
        .zoom-image-container {
            position: relative;
            width: 100%;
        }

        .zoom-nav-btn {
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            width: 48px;
            height: 48px;
            background: rgba(0, 0, 0, 0.6);
            backdrop-filter: blur(10px);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            transition: all 0.2s ease;
            z-index: 10;
        }

        .zoom-nav-btn:hover {
            background: rgba(0, 0, 0, 0.8);
            transform: translateY(-50%) scale(1.1);
        }

        .zoom-nav-btn:active {
            transform: translateY(-50%) scale(0.95);
        }

        .zoom-nav-left {
            left: 16px;
        }

        .zoom-nav-right {
            right: 16px;
        }

        .zoom-variations-indicator {
            position: absolute;
            bottom: 16px;
            left: 50%;
            transform: translateX(-50%);
            display: flex;
            gap: 8px;
            z-index: 10;
        }

        .zoom-variation-dot {
            width: 8px;
            height: 8px;
            border-radius: 50%;
            background: rgba(255, 255, 255, 0.5);
            transition: all 0.25s cubic-bezier(0.4, 0.0, 0.2, 1);
        }

        .zoom-variation-dot.active {
            background: white;
            transform: scale(1.5);
        }

        /* === Zoom Modal Pairs Thumbnails === */
        .zoom-pairs-thumbnails {
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
            gap: 8px;
            margin-top: 15px;
            padding: 0 10px;
        }

        .zoom-pairs-thumb {
            width: calc(33.33% - 6px);
            aspect-ratio: 1;
            border-radius: 8px;
            overflow: hidden;
            cursor: pointer;
            border: 2px solid transparent;
            transition: all 0.2s ease;
            background: var(--bg-secondary);
        }

        .zoom-pairs-thumb:hover {
            border-color: var(--accent-connect);
            transform: scale(1.05);
        }

        .zoom-pairs-thumb.active {
            border-color: var(--accent-connect);
            opacity: 0.6;
        }

        .zoom-pairs-thumb img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

        /* === Password Strength Indicator === */
        .password-strength-indicator {
            margin-top: 12px;
        }

        .password-strength-bar {
            width: 100%;
            height: 6px;
            background: var(--bg-secondary);
            border-radius: 3px;
            overflow: hidden;
            margin-bottom: 8px;
        }

        .password-strength-fill {
            height: 100%;
            width: 0%;
            transition: all 0.3s ease;
            border-radius: 3px;
        }

        .password-strength-fill.weak {
            width: 33%;
            background: #ed4956;
        }

        .password-strength-fill.medium {
            width: 66%;
            background: #f5a623;
        }

        .password-strength-fill.strong {
            width: 100%;
            background: #4ade80;
        }

        .password-strength-text {
            font-size: 12px;
            font-weight: 600;
        }

        .password-strength-text.weak {
            color: #ed4956;
        }

        .password-strength-text.medium {
            color: #f5a623;
        }

        .password-strength-text.strong {
            color: #4ade80;
        }

        .password-match-error {
            display: block;
            margin-top: 6px;
        }

        /* === Ad Styles === */
        .ad-container {
            width: 100%;
            height: 100%;
            display: flex;
            align-items: center;
            justify-content: center;
            position: relative;
            background: var(--bg-primary);
        }

        .ad-video,
        .ad-image {
            max-width: 96%;
            max-height: 96%;
            width: auto;
            height: auto;
            object-fit: contain;
            border-radius: 4px;
        }

        .ad-label {
            position: absolute;
            bottom: 16px;
            right: 16px;
            background: rgba(0, 0, 0, 0.7);
            backdrop-filter: blur(10px);
            color: white;
            padding: 6px 12px;
            border-radius: 4px;
            font-size: 12px;
            font-weight: 500;
            text-transform: uppercase;
            letter-spacing: 0.5px;
            pointer-events: none;
            z-index: 10;
        }

        .is-ad .action-bar {
            opacity: 0.5;
            pointer-events: none;
        }