<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  
  <!-- Primary Meta Tags -->
  <title>FH6 Tune Hub | Forza Horizon 6 Tuning Hub</title>
  <meta name="title" content="FH6 Tune Hub | Forza Horizon 6 Tuning Hub" />
  <meta name="description" content="Centralized database and tunes list for Forza Horizon 6 gathered from top community sources and spreadsheets." />
  <meta name="robots" content="index, follow" />
  <link rel="canonical" href="https://fh6tunehub.pages.dev/" />

  <!-- Open Graph / Facebook -->
  <meta property="og:type" content="website" />
  <meta property="og:url" content="https://fh6tunehub.pages.dev/" />
  <meta property="og:title" content="FH6 Tune Hub | Forza Horizon 6 Tuning Hub" />
  <meta property="og:description" content="Centralized database and tunes list for Forza Horizon 6 gathered from top community sources and spreadsheets." />
  <meta property="og:image" content="https://fh6tunehub.pages.dev/preview.jpg" />

  <!-- Twitter -->
  <meta property="twitter:card" content="summary_large_image" />
  <meta property="twitter:url" content="https://fh6tunehub.pages.dev/" />
  <meta property="twitter:title" content="FH6 Tune Hub | Forza Horizon 6 Tuning Hub" />
  <meta property="twitter:description" content="Centralized database and tunes list for Forza Horizon 6 gathered from top community sources and spreadsheets." />
  <meta property="twitter:image" content="https://fh6tunehub.pages.dev/preview.jpg" />

  <!-- Preconnect / Fonts / Icons -->
  <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=Outfit:wght@400;500;600;700;800;900&display=swap" rel="stylesheet">
  
  <!-- Stylesheets -->
  <script type="module" crossorigin src="/assets/main-_dDy3SFK.js"></script>
  <link rel="modulepreload" crossorigin href="/assets/profile-CkqWwFAw.js">
  <link rel="modulepreload" crossorigin href="/assets/auth-C4bUpOxE.js">
  <link rel="modulepreload" crossorigin href="/assets/sharecode-SaZQ3UNC.js">
  <link rel="modulepreload" crossorigin href="/assets/catalog-DpHPmZKJ.js">
  <link rel="modulepreload" crossorigin href="/assets/add-tune-DSjga-IL.js">
  <link rel="stylesheet" crossorigin href="/assets/profile-qjK9fA_P.css">
</head>
<body>
  <!-- Global Navigation -->
  <!-- Global Navigation Bar — shared across all pages -->
<nav class="global-nav" id="global-nav" role="navigation" aria-label="Main navigation">

  <!-- Hamburger — visible only on screens ≤1300px -->
  <button class="gnav-hamburger" id="gnav-hamburger" aria-label="Open menu" aria-expanded="false" aria-controls="nav-drawer">
    <span class="gnav-hamburger-bar"></span>
    <span class="gnav-hamburger-bar"></span>
    <span class="gnav-hamburger-bar"></span>
  </button>

  <!-- Zone 1: Brand -->
  <a href="/" class="gnav-brand" aria-label="FH6 Tune Hub — Home">
    <div class="gnav-badge">FH6</div>
    <span class="gnav-brand-name">Tune Hub</span>
  </a>

  <!-- Zone 2: Page Links (desktop only — hidden on mobile, moved to drawer) -->
  <div class="gnav-links" role="list">
    <a href="/" class="gnav-link" id="gnav-catalog" role="listitem" data-page="catalog" data-i18n="nav.catalog">
      <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="12" cy="12" r="10"></circle><polygon points="10 8 16 12 10 16 10 8"></polygon></svg>
      <span data-i18n-text>Catalog</span>
    </a>
    <a href="/leaderboard.html" class="gnav-link" id="gnav-leaderboard" role="listitem" data-page="leaderboard" data-i18n="nav.leaderboard">
      <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><polyline points="23 6 13.5 15.5 8.5 10.5 1 18"></polyline><polyline points="17 6 23 6 23 12"></polyline></svg>
      <span data-i18n-text>Leaderboard</span>
    </a>
    <a href="/about.html" class="gnav-link" id="gnav-about" role="listitem" data-page="about" data-i18n="nav.about">
      <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="12" cy="12" r="10"></circle><line x1="12" y1="16" x2="12" y2="12"></line><line x1="12" y1="8" x2="12.01" y2="8"></line></svg>
      <span data-i18n-text>About</span>
    </a>
    <a href="/contact.html" class="gnav-link" id="gnav-contact" role="listitem" data-page="contact" data-i18n="nav.contact">
      <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"></path><polyline points="22,6 12,13 2,6"></polyline></svg>
      <span data-i18n-text>Contact</span>
    </a>
    <button class="gnav-link support-us-btn" id="btnOpenSupport" role="listitem" data-i18n="nav.support_us_btn" style="background:none; border:none; font-family:inherit; cursor:pointer;">
      <span style="font-size:1.05rem; margin-right:-0.05rem;">☕</span>
      <span data-i18n-text>Support Us</span>
    </button>
    <a href="/invite.html" class="gnav-link gnav-link--admin hidden" id="gnav-admin" role="listitem" data-page="invite" data-i18n="nav.invite_codes">
      <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"></polygon></svg>
      <span data-i18n-text>Invite Codes</span>
    </a>
  </div>

  <!-- Zone 3: User Area & Language Switcher -->
  <div class="gnav-user-zone" id="gnav-user-zone">
    <!-- Rendered dynamically by JS -->
  </div>

</nav>

<!-- Shared overlay — closes any open drawer when clicked -->
<div class="drawer-overlay" id="drawer-overlay" aria-hidden="true"></div>

<!-- ── Mobile Nav Drawer (left side) ── -->
<nav class="nav-drawer" id="nav-drawer" aria-label="Mobile navigation" aria-hidden="true">
  <div class="nav-drawer-header">
    <a href="/" class="gnav-brand nav-drawer-brand" aria-label="FH6 Tune Hub — Home">
      <div class="gnav-badge">FH6</div>
      <span class="gnav-brand-name">Tune Hub</span>
    </a>
    <button class="nav-drawer-close" id="nav-drawer-close" aria-label="Close menu">&times;</button>
  </div>

  <div class="nav-drawer-body">
    <a href="/" class="nav-drawer-link" id="gnav-drawer-catalog" data-page="catalog" data-i18n="nav.catalog">
      <svg width="17" height="17" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><circle cx="12" cy="12" r="10"></circle><polygon points="10 8 16 12 10 16 10 8"></polygon></svg>
      <span data-i18n-text>Catalog</span>
    </a>
    <a href="/leaderboard.html" class="nav-drawer-link" id="gnav-drawer-leaderboard" data-page="leaderboard" data-i18n="nav.leaderboard">
      <svg width="17" height="17" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><polyline points="23 6 13.5 15.5 8.5 10.5 1 18"></polyline><polyline points="17 6 23 6 23 12"></polyline></svg>
      <span data-i18n-text>Leaderboard</span>
    </a>
    <a href="/about.html" class="nav-drawer-link" id="gnav-drawer-about" data-page="about" data-i18n="nav.about">
      <svg width="17" height="17" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><circle cx="12" cy="12" r="10"></circle><line x1="12" y1="16" x2="12" y2="12"></line><line x1="12" y1="8" x2="12.01" y2="8"></line></svg>
      <span data-i18n-text>About</span>
    </a>
    <a href="/contact.html" class="nav-drawer-link" id="gnav-drawer-contact" data-page="contact" data-i18n="nav.contact">
      <svg width="17" height="17" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"></path><polyline points="22,6 12,13 2,6"></polyline></svg>
      <span data-i18n-text>Contact</span>
    </a>

    <div class="nav-drawer-divider"></div>

    <button class="nav-drawer-link nav-drawer-link--support" id="btnOpenSupportDrawer" data-i18n="nav.support_us_btn">
      <span aria-hidden="true">☕</span>
      <span data-i18n-text>Support Us</span>
    </button>

    <!-- Admin link — shown only to admins via JS -->
    <a href="/invite.html" class="nav-drawer-link nav-drawer-link--admin hidden" id="gnav-drawer-admin" data-page="invite" data-i18n="nav.invite_codes">
      <svg width="17" height="17" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"></polygon></svg>
      <span data-i18n-text>Invite Codes</span>
    </a>
  </div>
</nav>

<!-- Support Drawer (right side — unchanged) -->
<aside class="custom-drawer support-modal" id="supportModal" style="display:none;">
  <div class="custom-drawer-header">
    <h2 data-i18n="support.modal_title">☕ Support the Project</h2>
    <button class="drawer-close-btn" id="closeSupportModalBtn" aria-label="Close" data-i18n-aria-label="common.close">&times;</button>
  </div>
  <div class="custom-drawer-body support-modal-body">
    <p data-i18n="support.modal_text">If you are enjoying the FH6 Tune Hub, please consider supporting the development! Every contribution helps keep the project updated with new features and cars.</p>

    <div class="support-options-grid">
      <!-- Live Pix / PIX (BR) -->
      <div class="support-card livepix-card" id="supportCardLivepix">
        <button class="support-card-toggle" id="toggleLivepix" aria-expanded="true">
          <div class="support-card-header">
            <h3>⚡ LivePix (PIX)</h3>
            <span class="badge-tag">Brasil</span>
          </div>
          <span class="support-card-chevron" aria-hidden="true">▾</span>
        </button>
        <div class="support-card-body show" id="bodyLivepix">
          <p data-i18n="support.livepix_desc">Instant donation via PIX with custom messages.</p>
          <a href="https://livepix.gg/lipe123rec" target="_blank" rel="noopener noreferrer" class="support-link-btn livepix-btn" data-i18n="support.donate_livepix">Donate via LivePix</a>
        </div>
      </div>

      <!-- Buy Me a Coffee (Global) -->
      <div class="support-card buymeacoffee-card" id="supportCardBmc">
        <button class="support-card-toggle" id="toggleBmc" aria-expanded="true">
          <div class="support-card-header">
            <h3>☕ Buy Me a Coffee</h3>
            <span class="badge-tag">Global</span>
          </div>
          <span class="support-card-chevron" aria-hidden="true">▾</span>
        </button>
        <div class="support-card-body show" id="bodyBmc">
          <p data-i18n="support.bmc_desc">Support with Credit Card, PayPal, or Google Pay from all over the world.</p>
          <a href="https://buymeacoffee.com/lipe123rec" target="_blank" rel="noopener noreferrer" class="support-link-btn bmc-btn" data-i18n="support.donate_bmc">Buy Me a Coffee</a>
        </div>
      </div>
    </div>
  </div>
</aside>


  <div class="app-layout">

    <!-- Page Header: Title + Stats -->
    <div class="page-hero">
      <div class="page-hero-text">
        <h1 class="page-hero-title" data-i18n="hero.title">Tune Collection Hub</h1>
        <p class="page-hero-subtitle" data-i18n="hero.subtitle">Centralized database of Forza Horizon 6 tunes from community sources</p>
      </div>
      <div class="stats-summary">
        <div class="stat-card">
          <span class="stat-value" id="total-tunes-count">0</span>
          <span class="stat-label" data-i18n="hero.total_tunes">Total Tunes</span>
        </div>
        <div class="stat-card">
          <span class="stat-value" id="total-sources-count">0</span>
          <span class="stat-label" data-i18n="hero.active_sources">Active Sources</span>
        </div>
      </div>
    </div>

    <!-- In-page Sub-tabs (All Tunes / My Garage) & Share Tune Button -->
    <div class="page-tabs-row">
      <div class="page-tabs-bar" id="view-tabs-bar" role="tablist">
        <button class="page-tab-btn active" id="tab-all-tunes" data-tab="all" role="tab" aria-selected="true" data-i18n="tabs.all_tunes">
          <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"></circle><polygon points="10 8 16 12 10 16 10 8"></polygon></svg>
          <span data-i18n-text>All Tunes</span>
        </button>
        <button class="page-tab-btn" id="tab-my-garage" data-tab="garage" role="tab" aria-selected="false" data-i18n="tabs.my_garage">
          <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"></path><polyline points="9 22 9 12 15 12 15 22"></polyline></svg>
          <span data-i18n-text>My Garage</span> <span class="gnav-garage-badge" id="garage-count-badge">0</span>
        </button>
      </div>

      <button class="page-btn active-btn share-tune-btn" id="open-add-tune-modal-btn" data-i18n-title="actions.share_tune">
        <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><line x1="12" y1="5" x2="12" y2="19"></line><line x1="5" y1="12" x2="19" y2="12"></line></svg>
        <span class="share-tune-label" data-i18n="actions.share_tune">Share Tune</span>
      </button>
    </div>

    <!-- Sources Selector Bar -->
    <div class="sources-bar" id="sources-bar">
      <span class="sources-label" data-i18n="actions.sources_label">Sources:</span>
      <button class="source-pill active" data-source="ALL" data-i18n="actions.all_sources">All Sources</button>
    </div>

    <!-- Controls & Filtering Section -->
    <section class="controls-panel">
      <div class="search-bar-row">
        <div class="search-input-wrapper">
          <svg class="search-icon" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="11" cy="11" r="8"></circle><line x1="21" y1="21" x2="16.65" y2="16.65"></line></svg>
          <input type="text" id="global-search" data-i18n-placeholder="search.placeholder" placeholder="Search make, model, tuner, tune name or sharecode..." />
        </div>
        
        <!-- Cogwheel Columns Config Button -->
        <button class="config-cols-btn" id="open-cols-modal-btn" data-i18n-title="actions.columns">
          <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="3"></circle><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"></path></svg>
          <span data-i18n="actions.columns">Columns</span>
        </button>

        <button class="clear-btn" id="reset-filters-btn">
          <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M3 6h18M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"></path></svg>
          <span data-i18n="actions.reset_filters">Reset Filters</span>
        </button>
      </div>

      <div class="filters-grid">
        <div class="filter-group">
          <label for="filter-make" data-i18n="filters.make">Make</label>
          <select id="filter-make"><option value="" data-i18n="filters.all_makes">All Makes</option></select>
        </div>

        <div class="filter-group">
          <label for="filter-model" data-i18n="filters.model">Model / Car</label>
          <select id="filter-model"><option value="" data-i18n="filters.all_models">All Models</option></select>
        </div>

        <div class="filter-group">
          <label for="filter-class" data-i18n="filters.class">Class</label>
          <select id="filter-class"><option value="" data-i18n="filters.all_classes">All Classes</option></select>
        </div>

        <div class="filter-group">
          <label for="filter-drivetrain" data-i18n="filters.drivetrain">Drivetrain</label>
          <select id="filter-drivetrain"><option value="" data-i18n="filters.all_drivetrains">All Drivetrains</option></select>
        </div>

        <div class="filter-group">
          <label for="filter-tuner" data-i18n="filters.tuner">Tuner</label>
          <select id="filter-tuner"><option value="" data-i18n="filters.all_tuners">All Tuners</option></select>
        </div>

        <div class="filter-group">
          <label for="filter-suspension" data-i18n="filters.suspension">Suspension</label>
          <select id="filter-suspension"><option value="" data-i18n="filters.all_suspensions">All Suspensions</option></select>
        </div>

        <div class="filter-group">
          <label for="filter-tire" data-i18n="filters.tire">Tire Compound</label>
          <select id="filter-tire"><option value="" data-i18n="filters.all_tires">All Tires</option></select>
        </div>

        <div class="filter-group">
          <label for="filter-source" data-i18n="filters.source">Source</label>
          <select id="filter-source"><option value="" data-i18n="filters.all_sources">All Sources</option></select>
        </div>
      </div>
    </section>

    <!-- Tunes Data Table -->
    <main class="table-wrapper">
      <table class="tunes-table">
        <thead>
          <tr id="table-header-row">
            <!-- Headers rendered dynamically by JS based on user's column configuration -->
          </tr>
        </thead>
        <tbody id="tunes-table-body">
          <!-- Rendered by JS -->
        </tbody>
      </table>
    </main>

    <!-- Pagination Bar -->
    <div class="pagination-wrapper">
      <div id="pagination-info">Showing 0 tunes</div>
      <div class="pagination-controls">
        <button class="page-btn" id="prev-page-btn" disabled data-i18n="table.prev">Previous</button>
        <span id="page-num-display" style="align-self: center; font-weight: 600;">Page 1</span>
        <button class="page-btn" id="next-page-btn" disabled data-i18n="table.next">Next</button>
      </div>
    </div>

    <!-- Teaser Unlock Banner (Visible only for non-logged in users) -->
    <div id="teaser-unlock-banner" class="teaser-banner" style="display:none;">
      <div class="teaser-banner-content">
        <div class="teaser-banner-icon">🔒</div>
        <div class="teaser-banner-text">
          <h3 data-i18n="hero.teaser_title">Viewing 10 Sample Tunes</h3>
          <p data-i18n="hero.teaser_desc">Sign in or request an invite code to unlock the full catalog, advanced search, and over 1,700+ community tunes!</p>
        </div>
      </div>
      <a href="/contact.html" class="page-btn active-btn teaser-banner-btn" data-i18n="hero.request_invite_btn">Request Invite Code</a>
    </div>
  </div>

  <!-- Dynamic Hover Preview Card -->
  <div id="hover-card-preview" class="hover-card"></div>

  <!-- Shared Modals Partials -->
  <!-- Columns Modal Partial -->
<div id="cols-modal" class="modal-overlay">
  <div class="modal-content">
    <div class="modal-header">
      <h3>
        <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="3"></circle><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"></path></svg>
        <span data-i18n="cols_modal.title">Configure Table Columns</span>
      </h3>
      <button class="modal-close-btn" id="close-cols-modal-btn">&times;</button>
    </div>
    <div class="modal-body">
      <p class="modal-desc" data-i18n="cols_modal.desc">Select which columns to display in the main table. Information for unselected columns will still be available in the hover preview card.</p>
      
      <div class="checkbox-grid" id="checkbox-grid">
        <!-- Dynamically filled with column checkboxes -->
      </div>

      <div class="preset-row">
        <button class="preset-btn" id="preset-compact-btn">Compact Preset (Recommended)</button>
        <button class="preset-btn" id="preset-all-btn">Select All</button>
      </div>
    </div>
    <div class="modal-footer">
      <button class="page-btn" id="save-cols-modal-btn" style="background: var(--primary-neon); color: #000; font-weight: 700;">Apply Changes</button>
    </div>
  </div>
</div>

  <!-- Auth Modal (Sign In / Register / Password Recovery) Partial -->
<div id="auth-modal" class="modal-overlay">
  <div class="modal-content auth-modal-content">
    <div class="modal-header">
      <div class="auth-tabs" id="auth-tabs">
        <button type="button" class="auth-tab-btn active" id="auth-tab-login" data-tab="login" data-i18n="auth.login_tab">Sign In</button>
        <button type="button" class="auth-tab-btn" id="auth-tab-register" data-tab="register" data-i18n="auth.register_tab">Register Account</button>
      </div>
      <h3 id="auth-modal-title" style="display:none; margin:0; font-size:1.1rem; color:var(--text-bright);" data-i18n="auth.reset_password_title">Password Recovery</h3>
      <button class="modal-close-btn" id="close-auth-modal-btn">&times;</button>
    </div>
    <div class="modal-body">
      <form id="auth-form">
        <!-- Email Field -->
        <div class="form-group" id="auth-email-group">
          <label for="auth-email" data-i18n="auth.email_label">Email Address</label>
          <input type="email" id="auth-email" placeholder="your.email@example.com" autocomplete="email" />
        </div>

        <!-- Password Field -->
        <div class="form-group" id="auth-password-group">
          <label for="auth-password" data-i18n="auth.password_label">Password</label>
          <input type="password" id="auth-password" minlength="6" placeholder="••••••••" autocomplete="current-password" />
          <div id="auth-forgot-wrapper" style="text-align: right; margin-top: 0.35rem;">
            <a href="#" id="auth-forgot-link" class="auth-link" data-i18n="auth.forgot_password">Forgot password?</a>
          </div>
        </div>

        <!-- Register Only Section -->
        <div id="register-fields-group" style="display: none; margin-top:0.8rem; padding-top:0.8rem; border-top:1px dashed var(--border-color);">
          <div class="form-group" style="margin-bottom:0.8rem;">
            <label for="auth-gamertag" data-i18n="auth.gamertag_label">Xbox Gamertag</label>
            <input type="text" id="auth-gamertag" placeholder="e.g. ChronicJSR" spellcheck="false" autocomplete="username" />
          </div>

          <div class="form-group">
            <label for="auth-invite-code" style="color:var(--accent-amber); display:flex; justify-content:space-between; align-items:center;">
              <span data-i18n="auth.invite_code_label">Invite Code</span>
              <span style="font-weight:400; font-size:0.75rem; opacity:0.8;" data-i18n="auth.invite_hint">(Required to Register)</span>
            </label>
            <input type="text" id="auth-invite-code" placeholder="e.g. XYZ-8X9A2-Z7MX2" style="font-family:monospace; text-transform:uppercase;" spellcheck="false" autocomplete="off" />
          </div>
        </div>

        <!-- Update Password Only Section -->
        <div id="update-password-fields-group" style="display: none;">
          <div class="form-group" style="margin-bottom:0.8rem;">
            <label for="auth-new-password" data-i18n="auth.new_password_label">New Password</label>
            <input type="password" id="auth-new-password" minlength="6" placeholder="••••••••" autocomplete="new-password" />
          </div>
          <div class="form-group">
            <label for="auth-confirm-password" data-i18n="auth.confirm_password_label">Confirm New Password</label>
            <input type="password" id="auth-confirm-password" minlength="6" placeholder="••••••••" autocomplete="new-password" />
          </div>
        </div>

        <div id="auth-error-msg" class="auth-error-msg" style="display: none;"></div>
        <div id="auth-success-msg" class="auth-success-msg" style="display: none;"></div>

        <div class="auth-action-row" style="margin-top: 1.2rem; display: flex; flex-direction: column; gap: 0.6rem;">
          <button type="submit" id="auth-submit-btn" class="page-btn active-btn" style="width:100%; padding:0.65rem;" data-i18n="auth.submit_login">
            Sign In
          </button>
          <div id="auth-back-to-login-row" style="display: none; text-align: center;">
            <a href="#" id="auth-back-to-login-btn" class="auth-back-link" data-i18n="auth.back_to_login">← Back to Sign In</a>
          </div>
        </div>
      </form>
    </div>
  </div>
</div>

  <!-- Profile Modal Partial -->
<div id="profile-modal" class="modal-overlay">
  <div class="modal-content" style="max-width:420px;">
    <div class="modal-header">
      <h3 data-i18n="auth.profile_title">User Profile & Settings</h3>
      <button class="modal-close-btn" id="close-profile-modal-btn">&times;</button>
    </div>
    <form id="profile-form" style="display: flex; flex-direction: column; flex: 1;">
      <div class="modal-body">
        <div class="form-group">
          <label for="profile-email" data-i18n="auth.email_label">Email Address</label>
          <input type="email" id="profile-email" disabled style="opacity:0.7; cursor:not-allowed;" />
        </div>
        <div class="form-group" style="margin-top:0.8rem;">
          <label for="profile-gamertag" data-i18n="auth.gamertag_label">Xbox Gamertag</label>
          <input type="text" id="profile-gamertag" placeholder="e.g. ChronicJSR" spellcheck="false" required />
        </div>

        <!-- Password Change Fields -->
        <div style="margin-top:1.1rem; padding-top:0.9rem; border-top:1px dashed var(--border-color);">
          <div style="font-size:0.82rem; font-weight:700; color:var(--text-bright); margin-bottom:0.6rem; display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:0.2rem;">
            <div style="display:flex; align-items:center; gap:0.4rem;">
              <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="var(--accent-amber)" stroke-width="2.2"><rect x="3" y="11" width="18" height="11" rx="2" ry="2"></rect><path d="M7 11V7a5 5 0 0 1 10 0v4"></path></svg>
              <span data-i18n="auth.change_password_heading">Change Password</span>
            </div>
            <span style="font-size:0.72rem; font-weight:400; color:var(--text-muted);" data-i18n="auth.leave_blank_hint">(Leave blank to keep current)</span>
          </div>
          <div class="form-group" style="margin-bottom:0.7rem;">
            <label for="profile-new-password" data-i18n="auth.new_password_label">New Password</label>
            <input type="password" id="profile-new-password" minlength="6" placeholder="••••••••" autocomplete="new-password" />
          </div>
          <div class="form-group">
            <label for="profile-confirm-password" data-i18n="auth.confirm_password_label">Confirm New Password</label>
            <input type="password" id="profile-confirm-password" minlength="6" placeholder="••••••••" autocomplete="new-password" />
          </div>
        </div>

        <div id="profile-msg" style="display:none; margin-top:0.8rem; font-size:0.82rem; font-weight:600;"></div>
      </div>
      <div class="modal-footer" style="flex-shrink: 0;">
        <button type="button" class="page-btn outline-btn" id="cancel-profile-btn" data-i18n="common.cancel">Cancel</button>
        <button type="submit" id="save-profile-btn" class="page-btn active-btn" data-i18n="auth.update_gamertag">Save Changes</button>
      </div>
    </form>
  </div>
</div>

  <!-- Garage Modal Partial -->
<div id="garage-modal" class="modal-overlay">
  <div class="modal-content">
    <div class="modal-header">
      <h3 id="garage-modal-title" data-i18n="garage.modal_title">Garage Settings</h3>
      <button class="modal-close-btn" id="close-garage-modal-btn">&times;</button>
    </div>
    <form id="garage-form" style="display: flex; flex-direction: column; flex: 1;">
      <div class="modal-body">
        <input type="hidden" id="garage-tune-id" />
        <div class="form-group-checkbox">
          <label>
            <input type="checkbox" id="garage-built-checkbox" />
            <span data-i18n="garage.built_in_game">Built in-game</span>
          </label>
        </div>
        <div class="form-group" style="margin-top:0.8rem;">
          <label for="garage-notes" data-i18n="leaderboard.notes_label">Personal Notes / Setup Info</label>
          <textarea id="garage-notes" rows="3" data-i18n-placeholder="garage.notes_placeholder" placeholder="Add personal notes (e.g. S1 900 Road, easy drive...)"></textarea>
        </div>
      </div>
      <div class="modal-footer" style="flex-shrink: 0; justify-content: space-between; display: flex; width: 100%; box-sizing: border-box;">
        <button type="button" class="page-btn danger-btn" id="remove-garage-btn" data-i18n="garage.remove">Remove from Garage</button>
        <div style="display: flex; gap: 0.6rem; margin-left: auto;">
          <button type="button" class="page-btn outline-btn" id="cancel-garage-btn" data-i18n="common.cancel">Cancel</button>
          <button type="submit" class="page-btn active-btn" data-i18n="garage.save">Save</button>
        </div>
      </div>
    </form>
  </div>
</div>

  <!-- Laps Modal Partial -->
<div id="laps-view-modal" class="modal-overlay">
  <div class="modal-content" style="max-width: 600px;">
    <div class="modal-header">
      <div>
        <h3 id="laps-modal-car-title" data-i18n="laps_modal.submit_title_default">Enviar tempo de volta</h3>
        <p id="laps-modal-car-subtitle" style="display:none;"></p>
      </div>
      <button class="modal-close-btn" id="close-laps-view-modal-btn">&times;</button>
    </div>
    <div class="modal-body">

      <!-- Car Details Card (Make, Model, Class Badge, Sharecode, Tuner) -->
      <div id="laps-modal-car-card" style="background:var(--card-bg, rgba(255,255,255,0.03)); border:1px solid rgba(255,255,255,0.08); border-radius:8px; padding:0.85rem 1.1rem; margin-bottom:1rem;">
        <div style="display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:0.5rem; margin-bottom:0.4rem;">
          <div id="laps-modal-car-name" style="font-size:1.05rem; font-weight:700; color:var(--text-main, #fff);"></div>
          <div id="laps-modal-car-class-badge"></div>
        </div>
        <div style="display:flex; align-items:center; gap:1.4rem; font-size:0.82rem; color:var(--text-muted); flex-wrap:wrap;">
          <div><span style="opacity:0.75;" data-i18n="laps_modal.sharecode">Share code</span>: <strong id="laps-modal-car-sharecode" style="font-family:monospace; color:var(--primary-neon, #00ffc8); letter-spacing:0.04em;"></strong></div>
          <div><span style="opacity:0.75;" data-i18n="laps_modal.tuner">Tuner</span>: <strong id="laps-modal-car-tuner" style="color:var(--accent-amber, #ffb703);"></strong></div>
        </div>
      </div>

      <!-- Top Times for THIS tune on THIS track (shown after track is selected, placed right below car card) -->
      <div id="lap-top5-container" style="display:none; margin-bottom:1rem; background:rgba(0,0,0,0.25); border:1px solid rgba(255,255,255,0.07); border-radius:6px; padding:0.75rem;">
        <div style="font-size:0.75rem; font-weight:700; letter-spacing:0.06em; text-transform:uppercase; color:var(--primary-neon); margin-bottom:0.5rem; display:flex; align-items:center; gap:0.35rem;">
          <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"></polygon></svg>
          <span data-i18n="laps_modal.tune_times_title">Top tempos desta tune nesta pista</span>
        </div>
        <div id="lap-top5-list" style="display:flex; flex-direction:column; gap:0.3rem;"></div>
      </div>

      <!-- Hidden fallback for officialLapsList if referenced anywhere -->
      <div id="official-laps-section" style="display:none;">
        <div id="official-laps-list"></div>
      </div>

      <!-- Form Container (Continuous Step 1 -> Step 2 -> Step 3) -->
      <div id="admin-add-lap-container" class="admin-lap-section" style="margin-top:0;">
        <form id="admin-laptime-form" class="admin-lap-form">
          <input type="hidden" id="admin-laptime-tune-id" />

          <!-- Step 1: Race Type -->
          <div class="form-group">
            <label for="admin-laptime-race-type">
              <span class="lap-step-num">1</span> <span data-i18n="laps_modal.step_race_type">Race Type</span>
            </label>
            <select id="admin-laptime-race-type">
              <option value="" data-i18n="laps_modal.select_race_type">— Select a race type —</option>
            </select>
          </div>

          <!-- Step 2: Track Name (combobox) -->
          <div class="form-group">
            <label for="admin-laptime-track-search">
              <span class="lap-step-num">2</span> <span data-i18n="laps_modal.step_track_name">Track Name</span>
            </label>
            <div class="track-picker" id="admin-track-picker">
              <input type="text" id="admin-laptime-track-search"
                     placeholder="Select a race type first"
                     data-i18n-placeholder="laps_modal.select_race_type_first"
                     autocomplete="off" spellcheck="false" />
              <div class="track-picker-dropdown" id="admin-track-picker-dropdown" style="display:none;"></div>
              <input type="hidden" id="admin-laptime-track" />
            </div>
          </div>

          <!-- Step 3: Add Time Card (Lap time + Notes + Save button) -->
          <div class="admin-lap-section-card" style="background:var(--card-bg, rgba(255,255,255,0.02)); border:1px solid rgba(255,255,255,0.06); border-radius:6px; padding:0.85rem; margin-top:0.5rem;">
            <div class="admin-lap-row">
              <div class="form-group" style="margin-bottom:0;">
                <label for="admin-laptime-time">
                  <span class="lap-step-num">3</span> <span data-i18n="laps_modal.step_lap_time">Lap Time</span>
                </label>
                <input type="text" id="admin-laptime-time" required placeholder="01:12.198" />
                <span class="form-field-hint" data-i18n="laps_modal.time_input_hint" style="font-size: 0.72rem; color: var(--text-muted); margin-top: 0.25rem; display: block; font-weight: 500; opacity: 0.85;">Type only the 7 digits (e.g. 0112198) and it will format to 01:12.198.</span>
              </div>
              <div class="form-group" style="margin-bottom:0;">
                <label for="admin-laptime-notes"><span data-i18n="laps_modal.notes">Notes</span> <span style="opacity:.5;font-weight:400;" data-i18n="common.optional">(optional)</span></label>
                <input type="text" id="admin-laptime-notes" placeholder="e.g. Dry weather, S1 900" data-i18n-placeholder="laps_modal.notes_placeholder" />
              </div>
            </div>

            <button type="submit" class="page-btn active-btn" style="width:100%; margin-top:0.85rem;" data-i18n="laps_modal.save_time_btn">
              Save Track Time
            </button>
          </div>
        </form>
      </div>
    </div>
  </div>
</div>

  <!-- Modal: Add New Tune to Catalog -->
<div id="add-tune-modal" class="modal-overlay" style="display:none;">
  <div class="modal-content modal-content--wide">

    <div class="modal-header">
      <div class="modal-title-group">
        <h3 class="modal-title">
          <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="var(--primary-neon)" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"></circle><line x1="12" y1="8" x2="12" y2="16"></line><line x1="8" y1="12" x2="16" y2="12"></line></svg>
          <span data-i18n="add_tune_modal.title">Share New Tune</span>
        </h3>
        <p class="modal-subtitle" data-i18n="add_tune_modal.desc">Share a tune code with the FH6 community catalog.</p>
      </div>
      <button class="modal-close-btn" id="close-add-tune-modal-btn" aria-label="Close modal">&times;</button>
    </div>

    <form id="add-tune-form" style="display: flex; flex-direction: column; flex: 1; overflow: hidden;">
      <div class="modal-body atm-body">

        <!-- Messages -->
        <div id="add-tune-error-msg" class="admin-msg error" style="display:none;"></div>
        <div id="add-tune-success-msg" class="admin-msg success" style="display:none;"></div>

        <!-- ── Section 1: Car ── -->
        <div class="atm-section">
          <div class="atm-section-label">
            <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><rect x="1" y="3" width="15" height="13" rx="1"></rect><path d="M16 8h4l3 3v5h-7V8z"></path><circle cx="5.5" cy="18.5" r="2.5"></circle><circle cx="18.5" cy="18.5" r="2.5"></circle></svg>
            <span data-i18n="add_tune_modal.section_car">Car</span>
          </div>
          <!-- Year | Make | Model (3 col) -->
          <div class="atm-row atm-row--3">
            <div class="form-group">
              <label for="add-tune-year">Year <span class="required-asterisk">*</span></label>
              <input type="number" id="add-tune-year" placeholder="e.g. 2021" min="1900" max="2030" required autocomplete="off" />
            </div>
            <div class="form-group">
              <label for="add-tune-make"><span data-i18n="add_tune_modal.make_label">Make</span> <span class="required-asterisk">*</span></label>
              <input type="text" id="add-tune-make" placeholder="e.g. Porsche" required autocomplete="off" />
            </div>
            <div class="form-group">
              <label for="add-tune-model"><span data-i18n="add_tune_modal.model_label">Model</span> <span class="required-asterisk">*</span></label>
              <input type="text" id="add-tune-model" placeholder="e.g. 911 GT3 RS" required autocomplete="off" />
            </div>
          </div>
          <!-- Class | Drivetrain (2 col) -->
          <div class="atm-row atm-row--2">
            <div class="form-group">
              <label for="add-tune-class"><span data-i18n="add_tune_modal.class_label">Class</span> <span class="required-asterisk">*</span></label>
              <select id="add-tune-class" required>
                <option value="">Select Class</option>
                <option value="D">D</option>
                <option value="C">C</option>
                <option value="B">B</option>
                <option value="A">A</option>
                <option value="S1">S1</option>
                <option value="S2">S2</option>
                <option value="X">X</option>
                <option value="R">R</option>
              </select>
            </div>
            <div class="form-group">
              <label for="add-tune-drivetrain"><span data-i18n="add_tune_modal.drivetrain_label">Drivetrain</span> <span class="required-asterisk">*</span></label>
              <select id="add-tune-drivetrain" required>
                <option value="">Select Drivetrain</option>
                <option value="AWD">AWD</option>
                <option value="RWD">RWD</option>
                <option value="FWD">FWD</option>
              </select>
            </div>
          </div>
        </div>

        <!-- ── Section 2: Tune ── -->
        <div class="atm-section">
          <div class="atm-section-label">
            <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><circle cx="12" cy="12" r="3"></circle><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1-2.83 2.83l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-4 0v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83-2.83l.06-.06A1.65 1.65 0 0 0 4.68 15a1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1 0-4h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 2.83-2.83l.06.06A1.65 1.65 0 0 0 9 4.68a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 4 0v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 2.83l-.06.06A1.65 1.65 0 0 0 19.4 9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 0 4h-.09a1.65 1.65 0 0 0-1.51 1z"></path></svg>
            <span data-i18n="add_tune_modal.section_tune">Tune</span>
          </div>
          <!-- Tune Name | Tuner | Sharecode (3 col) -->
          <div class="atm-row atm-row--3">
            <div class="form-group">
              <label for="add-tune-name"><span data-i18n="add_tune_modal.tune_name_label">Tune Name</span> <span class="required-asterisk">*</span></label>
              <input type="text" id="add-tune-name" placeholder="e.g. Meta Road Grip" required autocomplete="off" />
            </div>
            <div class="form-group">
              <label for="add-tune-tuner" style="display: flex; align-items: baseline; flex-wrap: wrap; gap: 0.25rem;">
                <span data-i18n="add_tune_modal.tuner_label">Tuner Gamertag</span>
                <span class="required-asterisk">*</span>
                <span class="atm-field-hint" data-i18n="add_tune_modal.tuner_hint">(change if needed)</span>
              </label>
              <input type="text" id="add-tune-tuner" placeholder="Creator's gamertag" required autocomplete="off" />
            </div>
            <div class="form-group">
              <label for="add-tune-sharecode"><span data-i18n="add_tune_modal.sharecode_label">Share Code</span> <span class="required-asterisk">*</span></label>
              <input type="text" id="add-tune-sharecode" placeholder="123 456 789" required autocomplete="off" spellcheck="false" class="atm-sharecode" />
            </div>
          </div>
        </div>

        <!-- ── Section 3: Build Details (optional) ── -->
        <div class="atm-section atm-section--optional">
          <div class="atm-section-label atm-section-label--optional">
            <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path><polyline points="14 2 14 8 20 8"></polyline><line x1="16" y1="13" x2="8" y2="13"></line><line x1="16" y1="17" x2="8" y2="17"></line><polyline points="10 9 9 9 8 9"></polyline></svg>
            <span data-i18n="add_tune_modal.section_build">Build Details</span>
            <span class="atm-optional-badge" data-i18n="common.optional">optional</span>
          </div>
          <!-- Power | Weight | Suspension | Tire (4 col) -->
          <div class="atm-row atm-row--4">
            <div class="form-group">
              <label for="add-tune-power" data-i18n="add_tune_modal.power_label">Power</label>
              <input type="text" id="add-tune-power" placeholder="e.g. 750 bhp" autocomplete="off" />
            </div>
            <div class="form-group">
              <label for="add-tune-weight" data-i18n="add_tune_modal.weight_label">Weight</label>
              <input type="text" id="add-tune-weight" placeholder="e.g. 1250 kg" autocomplete="off" />
            </div>
            <div class="form-group">
              <label for="add-tune-suspension" data-i18n="add_tune_modal.suspension_label">Suspension</label>
              <input type="text" id="add-tune-suspension" placeholder="e.g. Race" autocomplete="off" />
            </div>
            <div class="form-group">
              <label for="add-tune-tire" data-i18n="add_tune_modal.tire_label">Tire Compound</label>
              <input type="text" id="add-tune-tire" placeholder="e.g. Semi-Slick" autocomplete="off" />
            </div>
          </div>
        </div>

      </div>

      <div class="modal-footer" style="flex-shrink: 0;">
        <button type="button" class="page-btn outline-btn" id="cancel-add-tune-btn" data-i18n="common.cancel">Cancel</button>
        <button type="submit" class="page-btn active-btn" id="submit-add-tune-btn" style="display: inline-flex; align-items: center; gap: 0.45rem;">
          <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><polyline points="20 6 9 17 4 12"></polyline></svg>
          <span data-i18n="add_tune_modal.submit">Publish Tune</span>
        </button>
      </div>
    </form>

  </div>
</div>


</body>
</html>
