<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Muzica - Upload Portal</title>
    <meta name="description" content="Muzica artist upload portal. Sign in to upload tracks, manage releases, and reach listeners on Muzica.">
    <!-- The portal is a sign-in-gated upload tool, not a page anyone should
         reach from a search. It used to canonicalise to muzica.cc, which now
         serves a different app entirely, so it was telling crawlers it was a
         duplicate of the studio. -->
    <meta name="robots" content="noindex, follow">
    <link rel="canonical" href="https://muzica-14a4f.web.app/">
    <link rel="icon" type="image/png" href="logo.png">
    <link rel="apple-touch-icon" href="logo.png">
    <link rel="stylesheet" href="styles.css">
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/gsap.min.js"></script>
</head>
<body>
    <!-- Auth Screen -->
    <div id="auth-screen" class="screen active">
        <!-- Animated floating orbs -->
        <div class="auth-orbs">
            <div class="auth-orb"></div>
            <div class="auth-orb"></div>
            <div class="auth-orb"></div>
            <div class="auth-orb"></div>
            <div class="auth-orb"></div>
        </div>
        <div class="auth-container glass-card">
            <div class="logo">
                <div class="logo-icon">
                    <img src="logo.png" alt="Muzica" style="width: 60px; height: 60px; border-radius: 12px;">
                </div>
                <img src="MUZICA.png" alt="Muzica" class="auth-logo-text">
                <p>Upload Portal</p>
            </div>
            <form id="login-form">
                <div class="input-group">
                    <span class="material-icons">email</span>
                    <input type="email" id="email" placeholder="Email" required>
                </div>
                <div class="input-group">
                    <span class="material-icons">lock</span>
                    <input type="password" id="password" placeholder="Password" required>
                </div>
                <div id="auth-error" class="error-message"></div>
                <div class="forgot-password-link">
                    <a href="#" id="forgot-password-btn">Forgot Password?</a>
                </div>
                <button type="submit" class="btn-primary" id="login-btn">
                    <span>Sign In</span>
                    <span class="loading-spinner" style="display: none;"></span>
                </button>
                <div class="auth-divider">
                    <span>or</span>
                </div>
                <button type="button" class="btn-secondary" id="signup-btn">
                    <span>Create Account</span>
                    <span class="loading-spinner" style="display: none;"></span>
                </button>
            </form>
        </div>
    </div>

    <!-- Main App -->
    <div id="app-screen" class="screen">
        <!-- Header -->
        <header class="header glass-card">
            <div class="header-left">
                <div class="logo-small">
                    <img src="logo.png" alt="Muzica">
                </div>
                <div class="header-brand">
                    <img src="MUZICA.png" alt="Muzica" class="brand-logo">
                    <span class="tagline">Upload Portal</span>
                </div>
            </div>
            <div class="header-right">
                <!-- Storage Dashboard Widget -->
                <div class="storage-widget" id="storage-widget" title="Storage Usage">
                    <div class="storage-widget-info">
                        <span class="storage-plan-badge" id="storage-plan-badge">Free</span>
                        <span class="storage-usage-text" id="storage-usage-text">0 MB / 1 GB</span>
                    </div>
                    <div class="storage-progress-mini">
                        <div class="storage-progress-fill" id="storage-progress-fill" style="width: 0%"></div>
                    </div>
                </div>
                <button id="upload-btn" class="upload-header-btn" title="Upload Music">
                    <span class="material-icons">cloud_upload</span>
                    <span class="upload-btn-text">Upload</span>
                </button>
                <div class="user-info" id="user-info-btn" title="Edit Profile">
                    <div id="user-avatar" class="user-avatar"></div>
                    <div class="user-info-text">
                        <span id="user-display-name" class="user-display-name"></span>
                        <span id="user-email" class="user-email-small"></span>
                    </div>
                </div>
                <div class="header-actions">
                    <button id="logout-btn" class="logout-btn" title="Sign Out">
                        <span class="material-icons">logout</span>
                    </button>
                </div>
            </div>
        </header>

        <!-- Hero Section - Cassette Player -->
        <section class="hero-section">
            <div id="prism-bg" class="prism-container"></div>
            <div class="turntable-container" id="turntable-container">
                <!-- Turntable Image -->
                <img
                    id="turntable-image"
                    src="turntable.png"
                    alt="Turntable"
                    class="turntable-media"
                >
                <!-- Spinning Vinyl Overlay -->
                <div class="vinyl-spinner" id="vinyl-spinner"></div>
                <!-- Glow Effect -->
                <div class="turntable-glow"></div>
            </div>
            <!-- Now Playing Info Below Boombox -->
            <div id="now-playing-info" class="now-playing-info">
                <div class="now-playing-text">
                    <span class="material-icons playing-icon">play_circle</span>
                    <span id="now-playing-status">Select a track to play</span>
                </div>
            </div>
            <!-- Playback Controls -->
            <div class="playback-controls">
                <button class="playback-btn prev-btn" id="prev-btn" title="Previous">
                    <span class="material-icons">skip_previous</span>
                </button>
                <button class="playback-btn stop-btn" id="stop-btn" title="Stop">
                    <span class="material-icons">stop</span>
                </button>
                <button class="playback-btn play-pause-btn" id="play-pause-btn" title="Play/Pause">
                    <span class="material-icons" id="play-pause-icon">play_arrow</span>
                </button>
                <button class="playback-btn next-btn" id="next-btn" title="Next">
                    <span class="material-icons">skip_next</span>
                </button>
            </div>
            <!-- Progress Bar -->
            <div class="progress-container" id="progress-container">
                <span class="time-display" id="current-time">0:00</span>
                <div class="progress-bar-wrapper" id="progress-bar-wrapper">
                    <div class="progress-bar-bg"></div>
                    <div class="progress-bar-fill" id="progress-bar-fill"></div>
                    <input
                        type="range"
                        class="progress-slider"
                        id="progress-slider"
                        min="0"
                        max="100"
                        value="0"
                    >
                </div>
                <span class="time-display" id="total-time">0:00</span>
            </div>
            <!-- Volume Control -->
            <div class="volume-control">
                <button id="volume-btn" class="volume-btn" title="Toggle mute">
                    <span class="material-icons" id="volume-icon">volume_up</span>
                </button>
                <div class="volume-slider-container">
                    <input
                        type="range"
                        id="volume-slider"
                        class="volume-slider"
                        min="0"
                        max="100"
                        value="80"
                    >
                </div>
            </div>
            <!-- Hidden Audio Player -->
            <audio id="audio-player"></audio>
        </section>

        <!-- Main Content -->
        <main class="main-content main-content-single">
            <!-- Library Section -->
            <section class="library-section">
                <div class="section-header glass-card">
                    <div class="library-tabs">
                        <button class="library-tab active" data-tab="library">
                            <span class="material-icons">library_music</span>
                            Library
                        </button>
                        <button class="library-tab" data-tab="liked">
                            <span class="material-icons">favorite</span>
                            Liked
                        </button>
                        <button class="library-tab" data-tab="artists">
                            <span class="material-icons">person</span>
                            Artists
                        </button>
                        <button class="library-tab" data-tab="playlists">
                            <span class="material-icons">queue_music</span>
                            Playlists
                        </button>
                    </div>
                    <div class="library-stats">
                        <span id="track-count">0 tracks</span>
                    </div>
                </div>
                <div id="library-list" class="flowing-menu">
                    <div class="loading-state">
                        <span class="loading-spinner"></span>
                        <p>Loading library...</p>
                    </div>
                </div>
            </section>
        </main>

        <!-- Track Edit Modal -->
        <div id="edit-modal" class="modal">
            <div class="modal-content glass-card">
                <div class="modal-header">
                    <h3>Edit Track</h3>
                    <button class="modal-close" id="close-modal">
                        <span class="material-icons">close</span>
                    </button>
                </div>
                <form id="edit-form">
                    <!-- Cover Art Upload -->
                    <div class="form-group artwork-upload-group">
                        <label>Cover Art</label>
                        <div class="artwork-upload-container">
                            <div id="artwork-preview" class="artwork-preview">
                                <span class="material-icons">image</span>
                            </div>
                            <div class="artwork-upload-actions">
                                <label class="btn-secondary btn-small">
                                    <span class="material-icons">upload</span>
                                    Upload Image
                                    <input type="file" id="edit-artwork" accept="image/*" hidden>
                                </label>
                                <button type="button" id="remove-artwork" class="btn-icon btn-small" title="Remove artwork" style="display: none;">
                                    <span class="material-icons">delete</span>
                                </button>
                            </div>
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="edit-title">Title</label>
                        <input type="text" id="edit-title" required>
                    </div>
                    <div class="form-group">
                        <label for="edit-artist">Artist</label>
                        <input type="text" id="edit-artist" required>
                    </div>
                    <div class="form-group">
                        <label for="edit-album">Album</label>
                        <input type="text" id="edit-album">
                    </div>
                    <div class="form-row">
                        <div class="form-group">
                            <label for="edit-track-number">Track #</label>
                            <input type="number" id="edit-track-number" min="1">
                        </div>
                        <div class="form-group">
                            <label for="edit-year">Year</label>
                            <input type="number" id="edit-year" min="1900" max="2100">
                        </div>
                    </div>
                    <div class="form-row">
                        <div class="form-group">
                            <label for="edit-category">Category</label>
                            <select id="edit-category">
                                <option value="">Select category</option>
                                <option value="pop">Pop</option>
                                <option value="rock">Rock</option>
                                <option value="hiphop">Hip Hop</option>
                                <option value="rnb">R&B</option>
                                <option value="jazz">Jazz</option>
                                <option value="classical">Classical</option>
                                <option value="electronic">Electronic</option>
                                <option value="country">Country</option>
                                <option value="reggae">Reggae</option>
                                <option value="blues">Blues</option>
                                <option value="folk">Folk</option>
                                <option value="latin">Latin</option>
                                <option value="metal">Metal</option>
                                <option value="punk">Punk</option>
                                <option value="soul">Soul</option>
                                <option value="indie">Indie</option>
                                <option value="kpop">K-Pop</option>
                                <option value="afrobeats">Afrobeats</option>
                                <option value="lofi">Lo-Fi</option>
                                <option value="ambient">Ambient</option>
                                <option value="gospel">Gospel</option>
                                <option value="religious">Religious</option>
                                <option value="soundtrack">Soundtrack</option>
                                <option value="other">Other</option>
                            </select>
                        </div>
                        <div class="form-group">
                            <label for="edit-language">Language</label>
                            <select id="edit-language">
                                <option value="">Select language</option>
                                <option value="english">English</option>
                                <option value="spanish">Spanish</option>
                                <option value="french">French</option>
                                <option value="german">German</option>
                                <option value="italian">Italian</option>
                                <option value="portuguese">Portuguese</option>
                                <option value="arabic">Arabic</option>
                                <option value="hindi">Hindi</option>
                                <option value="japanese">Japanese</option>
                                <option value="korean">Korean</option>
                                <option value="chinese">Chinese</option>
                                <option value="russian">Russian</option>
                                <option value="turkish">Turkish</option>
                                <option value="instrumental">Instrumental</option>
                                <option value="other">Other</option>
                            </select>
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="edit-genre">Genre</label>
                        <input type="text" id="edit-genre">
                    </div>
                    <div class="form-group">
                        <label for="edit-lyrics">Lyrics</label>
                        <textarea id="edit-lyrics" rows="4"></textarea>
                    </div>
                    <input type="hidden" id="edit-track-id">
                    <input type="hidden" id="edit-current-artwork-url">
                    <div class="form-actions">
                        <button type="button" class="btn-secondary" id="cancel-edit">Cancel</button>
                        <button type="submit" class="btn-primary">Save Changes</button>
                    </div>
                </form>
            </div>
        </div>
    </div>

    <!-- Profile Modal -->
    <div id="profile-modal" class="modal">
        <div class="modal-content glass-card profile-modal-content">
            <div class="modal-header">
                <h3>Edit Profile</h3>
                <button class="modal-close" id="close-profile-modal">
                    <span class="material-icons">close</span>
                </button>
            </div>
            <form id="profile-form">
                <!-- Profile Photo -->
                <div class="profile-photo-section">
                    <div id="profile-photo-preview" class="profile-photo-preview">
                        <span class="material-icons">person</span>
                    </div>
                    <div class="profile-photo-actions">
                        <label class="btn-secondary btn-small">
                            <span class="material-icons">photo_camera</span>
                            Change Photo
                            <input type="file" id="profile-photo-input" accept="image/*" hidden>
                        </label>
                        <button type="button" id="remove-profile-photo" class="btn-icon btn-small" title="Remove photo" style="display: none;">
                            <span class="material-icons">delete</span>
                        </button>
                    </div>
                </div>

                <!-- Basic Info Section -->
                <div class="profile-section">
                    <h4 class="profile-section-title">Basic Info</h4>

                    <div class="form-group">
                        <label for="profile-username">Username</label>
                        <input type="text" id="profile-username" placeholder="@username" maxlength="30">
                        <span class="input-hint">How you appear publicly</span>
                    </div>

                    <div class="form-row">
                        <div class="form-group">
                            <label for="profile-firstName">First Name</label>
                            <input type="text" id="profile-firstName" placeholder="Enter first name">
                        </div>
                        <div class="form-group">
                            <label for="profile-lastName">Last Name</label>
                            <input type="text" id="profile-lastName" placeholder="Enter last name">
                        </div>
                    </div>

                    <div class="form-group">
                        <label for="profile-bio">Bio</label>
                        <textarea id="profile-bio" placeholder="Tell us about yourself..." rows="3" maxlength="200"></textarea>
                        <span class="input-hint char-count"><span id="bio-char-count">0</span>/200</span>
                    </div>

                    <div class="form-group">
                        <label for="profile-email">Email</label>
                        <input type="email" id="profile-email" disabled>
                    </div>

                    <div class="form-row">
                        <div class="form-group">
                            <label for="profile-dob">Date of Birth</label>
                            <input type="date" id="profile-dob">
                        </div>
                        <div class="form-group">
                            <label for="profile-gender">Gender <span class="optional-label">(optional)</span></label>
                            <select id="profile-gender">
                                <option value="">Prefer not to say</option>
                                <option value="male">Male</option>
                                <option value="female">Female</option>
                                <option value="non-binary">Non-binary</option>
                                <option value="other">Other</option>
                            </select>
                        </div>
                    </div>

                    <div class="form-row">
                        <div class="form-group">
                            <label for="profile-country">Country</label>
                            <select id="profile-country">
                                <option value="">Select country</option>
                                <option value="us">United States</option>
                                <option value="uk">United Kingdom</option>
                                <option value="ca">Canada</option>
                                <option value="au">Australia</option>
                                <option value="de">Germany</option>
                                <option value="fr">France</option>
                                <option value="es">Spain</option>
                                <option value="it">Italy</option>
                                <option value="br">Brazil</option>
                                <option value="mx">Mexico</option>
                                <option value="jp">Japan</option>
                                <option value="kr">South Korea</option>
                                <option value="cn">China</option>
                                <option value="in">India</option>
                                <option value="ae">UAE</option>
                                <option value="sa">Saudi Arabia</option>
                                <option value="eg">Egypt</option>
                                <option value="lb">Lebanon</option>
                                <option value="ng">Nigeria</option>
                                <option value="za">South Africa</option>
                                <option value="gh">Ghana</option>
                                <option value="ke">Kenya</option>
                                <option value="other">Other</option>
                            </select>
                        </div>
                        <div class="form-group">
                            <label for="profile-language">Language</label>
                            <select id="profile-language">
                                <option value="">Select language</option>
                                <option value="english">English</option>
                                <option value="spanish">Spanish</option>
                                <option value="french">French</option>
                                <option value="german">German</option>
                                <option value="italian">Italian</option>
                                <option value="portuguese">Portuguese</option>
                                <option value="arabic">Arabic</option>
                                <option value="hindi">Hindi</option>
                                <option value="japanese">Japanese</option>
                                <option value="korean">Korean</option>
                                <option value="chinese">Chinese</option>
                                <option value="russian">Russian</option>
                                <option value="swahili">Swahili</option>
                            </select>
                        </div>
                    </div>
                </div>

                <!-- Social Links Section -->
                <div class="profile-section">
                    <h4 class="profile-section-title">Social Links <span class="optional-label">(optional)</span></h4>

                    <div class="form-group social-input">
                        <label for="profile-spotify"><span class="material-icons">music_note</span> Spotify</label>
                        <input type="url" id="profile-spotify" placeholder="https://open.spotify.com/user/...">
                    </div>
                    <div class="form-group social-input">
                        <label for="profile-soundcloud"><span class="material-icons">cloud</span> SoundCloud</label>
                        <input type="url" id="profile-soundcloud" placeholder="https://soundcloud.com/...">
                    </div>
                    <div class="form-group social-input">
                        <label for="profile-instagram"><span class="material-icons">photo_camera</span> Instagram</label>
                        <input type="text" id="profile-instagram" placeholder="@username">
                    </div>
                    <div class="form-group social-input">
                        <label for="profile-twitter"><span class="material-icons">tag</span> X (Twitter)</label>
                        <input type="text" id="profile-twitter" placeholder="@username">
                    </div>
                </div>

                <!-- Music Preferences Section -->
                <div class="profile-section">
                    <h4 class="profile-section-title">Music Preferences</h4>

                    <div class="form-group">
                        <label>Favorite Genres</label>
                        <div class="categories-grid" id="profile-categories">
                            <label class="category-chip"><input type="checkbox" value="pop"> Pop</label>
                            <label class="category-chip"><input type="checkbox" value="rock"> Rock</label>
                            <label class="category-chip"><input type="checkbox" value="hiphop"> Hip Hop</label>
                            <label class="category-chip"><input type="checkbox" value="rnb"> R&B</label>
                            <label class="category-chip"><input type="checkbox" value="jazz"> Jazz</label>
                            <label class="category-chip"><input type="checkbox" value="classical"> Classical</label>
                            <label class="category-chip"><input type="checkbox" value="electronic"> Electronic</label>
                            <label class="category-chip"><input type="checkbox" value="country"> Country</label>
                            <label class="category-chip"><input type="checkbox" value="reggae"> Reggae</label>
                            <label class="category-chip"><input type="checkbox" value="blues"> Blues</label>
                            <label class="category-chip"><input type="checkbox" value="folk"> Folk</label>
                            <label class="category-chip"><input type="checkbox" value="latin"> Latin</label>
                            <label class="category-chip"><input type="checkbox" value="metal"> Metal</label>
                            <label class="category-chip"><input type="checkbox" value="punk"> Punk</label>
                            <label class="category-chip"><input type="checkbox" value="indie"> Indie</label>
                            <label class="category-chip"><input type="checkbox" value="soul"> Soul</label>
                            <label class="category-chip"><input type="checkbox" value="kpop"> K-Pop</label>
                            <label class="category-chip"><input type="checkbox" value="afrobeats"> Afrobeats</label>
                            <label class="category-chip"><input type="checkbox" value="lofi"> Lo-Fi</label>
                            <label class="category-chip"><input type="checkbox" value="ambient"> Ambient</label>
                            <label class="category-chip"><input type="checkbox" value="gospel"> Gospel</label>
                        </div>
                    </div>
                </div>

                <!-- Notification Preferences Section -->
                <div class="profile-section">
                    <h4 class="profile-section-title">Notifications</h4>

                    <div class="notification-toggles">
                        <label class="toggle-item">
                            <span class="toggle-label">
                                <span class="material-icons">email</span>
                                Email Notifications
                            </span>
                            <input type="checkbox" id="profile-email-notifications" class="toggle-input">
                            <span class="toggle-switch"></span>
                        </label>
                        <label class="toggle-item">
                            <span class="toggle-label">
                                <span class="material-icons">notifications</span>
                                Push Notifications
                            </span>
                            <input type="checkbox" id="profile-push-notifications" class="toggle-input">
                            <span class="toggle-switch"></span>
                        </label>
                        <label class="toggle-item">
                            <span class="toggle-label">
                                <span class="material-icons">campaign</span>
                                Marketing & Promotions
                            </span>
                            <input type="checkbox" id="profile-marketing-notifications" class="toggle-input">
                            <span class="toggle-switch"></span>
                        </label>
                    </div>
                </div>

                <div class="form-actions">
                    <button type="button" class="btn-secondary" id="cancel-profile">Cancel</button>
                    <button type="submit" class="btn-primary">Save Profile</button>
                </div>

                <!-- Password Reset Section -->
                <div class="profile-section">
                    <h4 class="profile-section-title">
                        <span class="material-icons">lock_reset</span>
                        Password
                    </h4>
                    <p class="section-description">Send a password reset link to your email address.</p>
                    <button type="button" class="btn-secondary" id="profile-reset-password-btn">
                        <span class="material-icons">email</span>
                        Send Reset Link
                    </button>
                </div>

                <!-- Delete Account Section -->
                <div class="profile-section danger-section">
                    <h4 class="profile-section-title danger-title">
                        <span class="material-icons">warning</span>
                        Danger Zone
                    </h4>
                    <p class="danger-description">
                        Permanently delete your account and all associated data. This action cannot be undone.
                    </p>
                    <button type="button" class="btn-danger" id="delete-account-btn">
                        <span class="material-icons">delete_forever</span>
                        Delete Account
                    </button>
                </div>
            </form>
        </div>
    </div>

    <!-- Delete Account Confirmation Modal -->
    <div id="delete-account-modal" class="modal">
        <div class="modal-content glass-card delete-account-modal-content">
            <div class="modal-header">
                <h3 class="danger-title"><span class="material-icons">warning</span> Delete Account</h3>
                <button class="modal-close" id="close-delete-account-modal">
                    <span class="material-icons">close</span>
                </button>
            </div>
            <div class="delete-account-content">
                <p class="delete-warning">
                    This action is <strong>permanent</strong> and cannot be undone. All your data will be deleted, including:
                </p>
                <ul class="delete-items-list">
                    <li><span class="material-icons">person</span> Your profile and account</li>
                    <li><span class="material-icons">music_note</span> All uploaded music</li>
                    <li><span class="material-icons">favorite</span> Playlists and liked songs</li>
                    <li><span class="material-icons">verified_user</span> Verification documents</li>
                </ul>
                <div class="form-group">
                    <label for="delete-account-password">Enter your password to confirm:</label>
                    <input type="password" id="delete-account-password" placeholder="Password" required>
                </div>
                <div class="delete-account-actions">
                    <button type="button" class="btn-secondary" id="cancel-delete-account">Cancel</button>
                    <button type="button" class="btn-danger" id="confirm-delete-account">
                        <span class="material-icons">delete_forever</span>
                        Delete My Account
                    </button>
                </div>
            </div>
        </div>
    </div>

    <!-- Upload Modal -->
    <div id="upload-modal" class="modal">
        <div class="modal-content glass-card upload-modal-content">
            <div class="modal-header">
                <h3><span class="material-icons">cloud_upload</span> Upload Music</h3>
                <button class="modal-close" id="close-upload-modal">
                    <span class="material-icons">close</span>
                </button>
            </div>
            <div id="drop-zone" class="drop-zone">
                <span class="material-icons">upload_file</span>
                <p>Drag & drop audio files here</p>
                <span class="or">or</span>
                <label class="btn-secondary">
                    Browse Files
                    <input type="file" id="file-input" accept="audio/*" multiple hidden>
                </label>
            </div>

            <!-- Upload Queue -->
            <div id="upload-queue" class="upload-queue" style="display: none;">
                <h4>Upload Queue</h4>
                <div id="queue-list" class="queue-list"></div>
                <div class="queue-actions">
                    <button id="clear-queue-btn" class="btn-secondary">Clear</button>
                    <button id="upload-all-btn" class="btn-primary">Upload All</button>
                </div>
            </div>
        </div>
    </div>

    <!-- Billing Modal -->
    <div id="billing-modal" class="modal">
        <div class="modal-content glass-card billing-modal-content">
            <div class="modal-header">
                <h3><span class="material-icons">credit_card</span> Storage Plans</h3>
                <button class="modal-close" id="close-billing-modal">
                    <span class="material-icons">close</span>
                </button>
            </div>

            <!-- Current Plan Summary -->
            <div class="current-plan-section" id="current-plan-section">
                <div class="current-plan-header">
                    <div class="current-plan-info">
                        <span class="current-plan-label">Current Plan</span>
                        <span class="current-plan-name" id="current-plan-name">Free</span>
                    </div>
                    <button id="manage-billing-btn" class="btn-secondary btn-small" style="display: none;">
                        <span class="material-icons">settings</span>
                        Manage Billing
                    </button>
                </div>
                <div class="storage-usage-section">
                    <div class="storage-usage-header">
                        <span class="storage-usage-label">Storage Used</span>
                        <span class="storage-usage-value" id="storage-usage-value">0 MB / 1 GB</span>
                    </div>
                    <div class="storage-progress-bar">
                        <div class="storage-progress-fill-large" id="storage-progress-fill-large" style="width: 0%"></div>
                    </div>
                    <span class="storage-remaining" id="storage-remaining">1 GB remaining</span>
                </div>
            </div>

            <!-- Plan Cards -->
            <div class="plan-cards-section">
                <h4>Upgrade Your Storage</h4>
                <div class="plan-cards">
                    <!-- Plus Plan -->
                    <div class="plan-card" data-plan="plus">
                        <div class="plan-card-header">
                            <span class="plan-name">Plus</span>
                            <span class="plan-storage">10 GB</span>
                        </div>
                        <div class="plan-price">
                            <span class="price-amount">3.99</span>
                            <span class="price-currency">EUR</span>
                            <span class="price-period">/month</span>
                        </div>
                        <ul class="plan-features">
                            <li><span class="material-icons">check</span> 10 GB storage</li>
                            <li><span class="material-icons">check</span> Unlimited uploads</li>
                            <li><span class="material-icons">check</span> Priority support</li>
                        </ul>
                        <button class="btn-primary plan-upgrade-btn" data-plan="plus">
                            Upgrade to Plus
                        </button>
                    </div>

                    <!-- Pro Plan -->
                    <div class="plan-card recommended" data-plan="pro">
                        <div class="plan-badge">Most Popular</div>
                        <div class="plan-card-header">
                            <span class="plan-name">Pro</span>
                            <span class="plan-storage">50 GB</span>
                        </div>
                        <div class="plan-price">
                            <span class="price-amount">7.99</span>
                            <span class="price-currency">EUR</span>
                            <span class="price-period">/month</span>
                        </div>
                        <ul class="plan-features">
                            <li><span class="material-icons">check</span> 50 GB storage</li>
                            <li><span class="material-icons">check</span> Unlimited uploads</li>
                            <li><span class="material-icons">check</span> Priority support</li>
                            <li><span class="material-icons">check</span> Early access features</li>
                        </ul>
                        <button class="btn-primary plan-upgrade-btn" data-plan="pro">
                            Upgrade to Pro
                        </button>
                    </div>

                    <!-- Max Plan -->
                    <div class="plan-card" data-plan="max">
                        <div class="plan-card-header">
                            <span class="plan-name">Max</span>
                            <span class="plan-storage">200 GB</span>
                        </div>
                        <div class="plan-price">
                            <span class="price-amount">14.99</span>
                            <span class="price-currency">EUR</span>
                            <span class="price-period">/month</span>
                        </div>
                        <ul class="plan-features">
                            <li><span class="material-icons">check</span> 200 GB storage</li>
                            <li><span class="material-icons">check</span> Unlimited uploads</li>
                            <li><span class="material-icons">check</span> Priority support</li>
                            <li><span class="material-icons">check</span> Early access features</li>
                            <li><span class="material-icons">check</span> API access</li>
                        </ul>
                        <button class="btn-primary plan-upgrade-btn" data-plan="max">
                            Upgrade to Max
                        </button>
                    </div>
                </div>
            </div>

            <!-- Checkout Loading Overlay -->
            <div id="checkout-loading" class="checkout-loading" style="display: none;">
                <div class="checkout-loading-content">
                    <span class="loading-spinner large"></span>
                    <p>Redirecting to secure checkout...</p>
                </div>
            </div>
        </div>
    </div>

    <!-- Storage Quota Warning Modal -->
    <div id="quota-warning-modal" class="modal">
        <div class="modal-content glass-card quota-warning-content">
            <div class="modal-header">
                <h3><span class="material-icons warning-icon">warning</span> Storage Limit Reached</h3>
                <button class="modal-close" id="close-quota-warning">
                    <span class="material-icons">close</span>
                </button>
            </div>
            <div class="quota-warning-body">
                <p>You've reached your storage limit. Upgrade your plan to continue uploading music.</p>
                <div class="quota-warning-stats">
                    <span class="quota-stat">
                        <span class="material-icons">storage</span>
                        <span id="quota-warning-usage">1 GB / 1 GB used</span>
                    </span>
                </div>
            </div>
            <div class="quota-warning-actions">
                <button class="btn-secondary" id="quota-warning-cancel">Cancel</button>
                <button class="btn-primary" id="quota-warning-upgrade">
                    <span class="material-icons">upgrade</span>
                    Upgrade Plan
                </button>
            </div>
        </div>
    </div>

    <!-- Footer -->
    <footer class="app-footer">
        <div class="footer-legal">
            <a href="terms.html" class="legal-link">Terms & Conditions</a>
            <span class="legal-separator">|</span>
            <a href="privacy.html" class="legal-link">Privacy Policy</a>
        </div>
        <div class="dedication">
            <img src="MUZICA.png" alt="Muzica" class="footer-logo">
            <span class="dedication-text">is dedicated to</span>
            <img src="MONICA.png" alt="Monica" class="footer-logo monica-logo">
            <span class="footer-heart">♥</span>
        </div>
        <div class="footer-credit">
            Built by <a href="https://kodefoundry.com" target="_blank" rel="noopener noreferrer">Kodefoundry</a>
        </div>
    </footer>

    <!-- Toast Container -->
    <div id="toast-container" class="toast-container"></div>

    <!-- Firebase SDK -->
    <script type="module" src="billing.js"></script>
    <script type="module" src="app.js"></script>
</body>
</html>
