<!DOCTYPE html>
<html lang="id" data-theme="dark">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>MahiRouter — High-Throughput AI Gateway & Key Provider</title>
  <link rel="icon" type="image/svg+xml" href="icon.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=Inter:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500;600;700&display=swap" rel="stylesheet">
  <link rel="stylesheet" href="style.css">
</head>
<body>

  <div class="workspace-shell">

    <!-- 1. PRIMARY TOP NAVIGATION BAR -->
    <header class="top-navigation-bar">
      <div class="nav-brand-cluster" onclick="switchSection('overview')">
        <div class="brand-glyph-box">
          <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
            <path d="M4 11a9 9 0 0 1 9 9"/>
            <path d="M4 4a16 16 0 0 1 16 16"/>
            <circle cx="5" cy="19" r="1"/>
          </svg>
        </div>
        <div class="brand-heading-text">
          <span>MahiRouter</span>
          <span class="status-indicator-dot" title="Operational"></span>
          <span class="brand-meta-badge">GATEWAY v2.5</span>
        </div>
      </div>

      <div class="nav-utility-cluster">
        <!-- Endpoint Domain Badge -->
        <div class="utility-pill" style="font-family: var(--font-mono); font-size: 11.5px; cursor: pointer;" onclick="copyBaseUrl()" title="Click to copy public endpoint">
          <span style="color: var(--text-muted);">https://</span><b>apirouter.mahicenter.cloud</b><span style="color: var(--text-muted);">/v1</span>
        </div>

        <!-- Edge Telemetry -->
        <div class="utility-pill">
          <span class="status-indicator-dot"></span>
          <span id="headerEdgeText">18ms • CGK-1 Edge</span>
        </div>

        <!-- Telegram Bot Badge -->
        <div class="utility-pill" style="color: var(--emerald-text);">
          <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M22 2L11 13"/><polygon points="22 2 15 22 11 13 2 9 22 2"/></svg>
          <span>@MahiCenterbot</span>
        </div>

        <!-- Command Palette Trigger -->
        <button class="btn-spotlight-capsule" onclick="openSpotlight()" title="Search commands (⌘K / Ctrl+K)">
          <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="11" cy="11" r="8"/><line x1="21" y1="21" x2="16.65" y2="16.65"/></svg>
          <span>Commands</span>
          <kbd class="kbd-badge">⌘K</kbd>
        </button>

        <!-- Theme Mode Switcher -->
        <div class="theme-toggle-cluster">
          <button class="btn-theme-switch" id="btnThemeLight" onclick="setTheme('light')" title="Light Mode">
            <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="5"/><line x1="12" y1="1" x2="12" y2="3"/><line x1="12" y1="21" x2="12" y2="23"/><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/><line x1="1" y1="12" x2="3" y2="12"/><line x1="21" y1="12" x2="23" y2="12"/><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/></svg>
          </button>
          <button class="btn-theme-switch active" id="btnThemeDark" onclick="setTheme('dark')" title="Dark Mode">
            <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"/></svg>
          </button>
        </div>
      </div>
    </header>

    <!-- 2. SEGMENTED NAVIGATION DECK -->
    <nav class="segmented-navigation-deck">
      <div class="tab-segments-stack">
        <button class="segment-tab-btn active" data-tab="overview" onclick="switchSection('overview')">
          <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="3" y="3" width="7" height="9"/><rect x="14" y="3" width="7" height="5"/><rect x="14" y="12" width="7" height="9"/><rect x="3" y="16" width="7" height="5"/></svg>
          Overview
        </button>
        <button class="segment-tab-btn" data-tab="account" onclick="switchSection('account')">
          <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"/><circle cx="12" cy="7" r="4"/></svg>
          My Account & Usage
        </button>
        <button class="segment-tab-btn" data-tab="leaderboard" onclick="switchSection('leaderboard')">
          <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><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"/></svg>
          Leaderboard
        </button>
        <button class="segment-tab-btn" data-tab="models" onclick="switchSection('models')">
          <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"/><path d="M12 2a14.5 14.5 0 0 0 0 20 14.5 14.5 0 0 0 0-20"/><path d="M2 12h20"/></svg>
          Model Catalog
        </button>
        <button class="segment-tab-btn" data-tab="logs" onclick="switchSection('logs')">
          <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="22 12 18 12 15 21 9 3 6 12 2 12"/></svg>
          Audit Logs
        </button>
        <button class="segment-tab-btn" data-tab="admin" onclick="switchSection('admin')">
          <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="3"/><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"/></svg>
          Admin & Keys
        </button>
      </div>

      <!-- Auth Session Slot -->
      <div class="session-profile-slot" id="navSessionSlot">
        <!-- Rendered dynamically by JS -->
      </div>
    </nav>

    <!-- ==========================================================================
         SECTION 1: OVERVIEW & TELEMETRY
         ========================================================================== -->
    <main>
      <section id="deck-overview" class="content-deck-panel active">
        <!-- Metric Tiles Matrix -->
        <div class="metric-tiles-matrix">
          <div class="metric-tile">
            <div class="metric-tile-header">
              <span class="metric-tile-label">TOTAL REQUESTS</span>
              <span class="brand-meta-badge">24H</span>
            </div>
            <div class="metric-tile-value" id="statTotalRequests">0</div>
            <div class="metric-tile-sub" id="statLatencySubtitle">18ms average latency • 100.0% success</div>
          </div>

          <div class="metric-tile">
            <div class="metric-tile-header">
              <span class="metric-tile-label">TOKENS PROCESSED</span>
              <span class="status-indicator-dot"></span>
            </div>
            <div class="metric-tile-value" id="statTotalTokens">0</div>
            <div class="metric-tile-sub">Real-time SSE stream telemetry</div>
          </div>

          <div class="metric-tile">
            <div class="metric-tile-header">
              <span class="metric-tile-label">ACTIVE PROVIDERS</span>
              <span class="brand-meta-badge">BRIDGE</span>
            </div>
            <div class="metric-tile-value" id="statActiveProviders">5</div>
            <div class="metric-tile-sub">9Router Core Bridge • Port 20128</div>
          </div>

          <div class="metric-tile">
            <div class="metric-tile-header">
              <span class="metric-tile-label">SYSTEM HEALTH</span>
              <span class="brand-meta-badge" style="color: var(--emerald-text);">PASS</span>
            </div>
            <div class="metric-tile-value" style="color: var(--emerald-text);">100%</div>
            <div class="metric-tile-sub">Argon, Opus/Sonnet 5.5, Deprecated 3.6/3.7 Blocked</div>
          </div>
        </div>

        <!-- Overview Split Grid -->
        <div class="overview-split-grid">
          <div class="panel-card-standard">
            <div class="panel-card-head">
              <div>
                <h3 class="panel-title">Inference Volume & Network Activity</h3>
                <p class="panel-subtitle">Hourly distribution and stream throughput</p>
              </div>
              <span class="brand-meta-badge">7-DAY HISTORIC</span>
            </div>

            <div class="telemetry-bar-rail">
              <div class="bar-slot">
                <div class="bar-column-fill" style="height: 40%;"></div>
                <span class="bar-label-text">MON</span>
              </div>
              <div class="bar-slot">
                <div class="bar-column-fill" style="height: 65%;"></div>
                <span class="bar-label-text">TUE</span>
              </div>
              <div class="bar-slot">
                <div class="bar-column-fill" style="height: 35%;"></div>
                <span class="bar-label-text">WED</span>
              </div>
              <div class="bar-slot">
                <div class="bar-column-fill" style="height: 80%;"></div>
                <span class="bar-label-text">THU</span>
              </div>
              <div class="bar-slot">
                <div class="bar-column-fill" style="height: 95%;"></div>
                <span class="bar-label-text">FRI</span>
              </div>
              <div class="bar-slot">
                <div class="bar-column-fill" style="height: 70%;"></div>
                <span class="bar-label-text">SAT</span>
              </div>
              <div class="bar-slot">
                <div class="bar-column-fill" style="height: 85%;"></div>
                <span class="bar-label-text">SUN</span>
              </div>
            </div>
          </div>

          <div class="panel-card-standard" style="display: flex; flex-direction: column; justify-content: space-between;">
            <div>
              <div class="panel-card-head" style="margin-bottom: 12px;">
                <h3 class="panel-title">Gateway Architecture</h3>
                <span class="status-indicator-dot"></span>
              </div>
              <p class="panel-subtitle" style="margin-bottom: 16px;">Core routing engine specifications</p>

              <div style="display: flex; flex-direction: column; gap: 10px; font-size: 13px;">
                <div style="display: flex; justify-content: space-between; border-bottom: 1px solid var(--border-subtle); padding-bottom: 6px;">
                  <span style="color: var(--text-muted);">Upstream Router:</span>
                  <b style="font-family: var(--font-mono);">9Router :20128</b>
                </div>
                <div style="display: flex; justify-content: space-between; border-bottom: 1px solid var(--border-subtle); padding-bottom: 6px;">
                  <span style="color: var(--text-muted);">Key Standard:</span>
                  <code style="font-family: var(--font-mono); font-size: 11px;">mahi-rtr-{32 alnum}</code>
                </div>
                <div style="display: flex; justify-content: space-between; border-bottom: 1px solid var(--border-subtle); padding-bottom: 6px;">
                  <span style="color: var(--text-muted);">Telegram Sync:</span>
                  <span style="color: var(--emerald-text); font-weight: 600;">@MahiCenterbot</span>
                </div>
                <div style="display: flex; justify-content: space-between;">
                  <span style="color: var(--text-muted);">Strict Filter:</span>
                  <span style="color: var(--rose-main); font-weight: 600;">Argon • 5.5 • 3.6/3.7</span>
                </div>
              </div>
            </div>

            <button class="btn-auth-action" onclick="switchSection('account')" style="margin-top: 20px; width: 100%; justify-content: center;">
              Check Account & Quota
            </button>
          </div>
        </div>
      </section>

      <!-- ==========================================================================
           SECTION 2: MY ACCOUNT & USAGE
           ========================================================================== -->
      <section id="deck-account" class="content-deck-panel">
        <!-- Guest Onboarding Well -->
        <div id="accountGuestWell" class="guest-onboarding-card" style="display: none;">
          <h2 style="font-size: 1.25rem; font-weight: 700; margin-bottom: 6px; letter-spacing: -0.02em;">Account Ledger & Quota Analytics</h2>
          <p style="font-size: 13px; color: var(--text-secondary); margin-bottom: 22px; line-height: 1.5;">
            Enter your API Key to inspect real-time token consumption, linked Telegram user, global leaderboard standing, and SDK snippets.
          </p>
          <div style="display: flex; gap: 8px; justify-content: center; flex-wrap: wrap;">
            <button class="btn-auth-action" onclick="openLoginModal()">
              Enter Client API Key
            </button>
            <button class="btn-form-secondary" onclick="loginWithDemoSultanKey()">
              Load Demo Sultan Account
            </button>
          </div>
        </div>

        <!-- Logged In Account Deck -->
        <div id="accountActiveDeck" class="account-ledger-deck" style="display: none;">
          <!-- Account Identity Row -->
          <div class="account-identity-row">
            <div class="identity-user-cluster">
              <div class="avatar-monogram" id="accountAvatar">VI</div>
              <div class="identity-titles-block">
                <div class="identity-name-line">
                  <span class="identity-user-name" id="accountName">VIP Sultan Tester</span>
                  <span class="tier-badge-pill" id="accountTier">Diamond VIP</span>
                  <span class="rank-standing-pill" id="accountRankPill">Rank #02 Global</span>
                </div>
                <div class="identity-telegram-line">
                  <span>Telegram: <a href="#" class="telegram-handle-link" id="accountTelegram">-</a></span>
                  <span>•</span>
                  <span>ID: <code id="accountTelegramId" style="font-family: var(--font-mono);">-</code></span>
                  <span>•</span>
                  <span style="color: var(--emerald-text);">Synced with @MahiCenterbot</span>
                </div>
              </div>
            </div>

            <!-- Expiry Clock -->
            <div class="countdown-clock-unit">
              <div class="clock-caption">ACTIVE SESSION REMAINING</div>
              <div class="clock-value-string" id="accountCountdown">29d 23h 59m 50s</div>
            </div>
          </div>

          <!-- Gauges Grid -->
          <div class="account-gauges-grid">
            <div class="gauge-cell">
              <div class="gauge-cell-label">
                <span>TOKENS CONSUMED</span>
                <span id="accountUsagePct" style="color: var(--emerald-text);">3.7%</span>
              </div>
              <div class="gauge-cell-value" id="accountTokensUsed" style="color: var(--emerald-text);">185,343</div>
              <div class="progress-track-hairline">
                <div class="progress-fill-active" id="accountQuotaBar" style="width: 3.7%;"></div>
              </div>
            </div>

            <div class="gauge-cell">
              <div class="gauge-cell-label">
                <span>QUOTA CEILING</span>
                <span>Limit</span>
              </div>
              <div class="gauge-cell-value" id="accountTokenQuota">5,000,000</div>
              <div style="font-size: 11px; color: var(--text-muted); margin-top: 8px;" id="accountQuotaRemaining">
                4,814,657 tokens remaining
              </div>
            </div>

            <div class="gauge-cell">
              <div class="gauge-cell-label">
                <span>TOTAL INVOCATIONS</span>
                <span>Calls</span>
              </div>
              <div class="gauge-cell-value" id="accountTotalRequests">143</div>
              <div style="font-size: 11px; color: var(--text-muted); margin-top: 8px;">
                All verified models allowed
              </div>
            </div>

            <div class="gauge-cell">
              <div class="gauge-cell-label">
                <span>RATE LIMIT (RPM)</span>
                <span>Dedicated</span>
              </div>
              <div class="gauge-cell-value" id="accountRateLimit">120 RPM</div>
              <div style="font-size: 11px; color: var(--text-muted); margin-top: 8px;">
                Priority unbuffered pipeline
              </div>
            </div>
          </div>

          <!-- Credentials Deck Row -->
          <div class="credentials-deck-row">
            <div class="credential-cell">
              <div class="credential-label-line">
                <span>CLIENT API KEY (BEARER TOKEN)</span>
                <button class="btn-chip-signout" onclick="toggleClientKeyMask()" id="btnToggleKeyMask">Reveal</button>
              </div>
              <div class="input-with-copy-group">
                <input type="password" id="accountKeyInput" class="code-field-input" readonly value="">
                <button class="btn-inline-copy" onclick="copyText('accountKeyInput', 'API Key copied to clipboard')">Copy</button>
              </div>
            </div>

            <div class="credential-cell">
              <div class="credential-label-line">
                <span>OPENAI COMPATIBLE BASE URL</span>
                <span style="color: var(--emerald-text); font-family: var(--font-mono); font-size: 10px;">V1 SPEC</span>
              </div>
              <div class="input-with-copy-group">
                <input type="text" id="accountBaseUrlInput" class="code-field-input" readonly value="">
                <button class="btn-inline-copy" onclick="copyText('accountBaseUrlInput', 'Base URL copied')">Copy</button>
              </div>
            </div>
          </div>

          <!-- Telegram Sync Bar -->
          <div class="telegram-sync-bar">
            <div class="sync-bar-desc">
              <b>Link Telegram Handle</b> — Associate this key with your Telegram identity for bot commands and verified leaderboard listing.
            </div>
            <div class="sync-bar-form">
              <input type="text" id="bindTgInput" class="form-input-control" placeholder="@username" style="width: 170px; padding: 6px 10px; font-size: 12px;">
              <button class="btn-auth-action" onclick="submitTelegramBind()" style="padding: 6px 14px;">Save Link</button>
            </div>
          </div>

          <!-- Developer Quickstart Sandbox -->
          <div class="snippets-sandbox-frame">
            <div class="snippets-header-bar">
              <div class="lang-selector-group">
                <button class="lang-tab-pill active" data-lang="curl" onclick="switchSnippetLang('curl')">cURL</button>
                <button class="lang-tab-pill" data-lang="python" onclick="switchSnippetLang('python')">Python (OpenAI)</button>
                <button class="lang-tab-pill" data-lang="node" onclick="switchSnippetLang('node')">Node.js</button>
                <button class="lang-tab-pill" data-lang="go" onclick="switchSnippetLang('go')">Go</button>
              </div>
              <button class="btn-inline-copy" onclick="copyCurrentSnippet()" style="padding: 3px 8px; font-size: 11px;">Copy Code</button>
            </div>
            <pre class="snippet-terminal-display" id="snippetCodeDisplay"></pre>
          </div>
        </div>
      </section>

      <!-- ==========================================================================
           SECTION 3: LEADERBOARD
           ========================================================================== -->
      <section id="deck-leaderboard" class="content-deck-panel">
        <div style="margin-bottom: 20px;">
          <h2 style="font-size: 1.25rem; font-weight: 700; letter-spacing: -0.02em;">Global Usage Leaderboard</h2>
          <p style="font-size: 13px; color: var(--text-muted); margin-top: 2px;">
            Real-time ranking of token consumption and API invocation frequency across registered keys and bots.
          </p>
        </div>

        <!-- Top 3 Highlight Cards -->
        <div class="leaderboard-cards-deck" id="leaderboardTopCards">
          <!-- Rendered dynamically by JS -->
        </div>

        <!-- Full Data Table -->
        <div class="data-table-chassis">
          <table class="enterprise-data-table">
            <thead>
              <tr>
                <th style="width: 70px;">Rank</th>
                <th>Client / Account</th>
                <th>Telegram</th>
                <th>Tier</th>
                <th>Tokens Used</th>
                <th>Requests</th>
                <th>Quota Limit</th>
                <th>Status</th>
              </tr>
            </thead>
            <tbody id="leaderboardTableBody">
              <tr>
                <td colspan="8" style="text-align: center; padding: 30px; color: var(--text-muted);">
                  Loading leaderboard telemetry...
                </td>
              </tr>
            </tbody>
          </table>
        </div>
      </section>

      <!-- ==========================================================================
           SECTION 4: MODEL CATALOG (No Argon • No 5.5 • No Deprecated 3.6/3.7)
           ========================================================================== -->
      <section id="deck-models" class="content-deck-panel">
        <div class="catalog-controls-deck">
          <div class="catalog-search-pill">
            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="var(--text-muted)" stroke-width="2"><circle cx="11" cy="11" r="8"/><line x1="21" y1="21" x2="16.65" y2="16.65"/></svg>
            <input type="text" id="modelSearchInput" placeholder="Filter model identifier..." oninput="filterModels()">
          </div>

          <div class="filter-categories-strip">
            <button class="category-filter-btn active" data-filter="all" onclick="setCatalogFilter('all')">All Verified</button>
            <button class="category-filter-btn" data-filter="gemini" onclick="setCatalogFilter('gemini')">Gemini 3.8</button>
            <button class="category-filter-btn" data-filter="deepseek" onclick="setCatalogFilter('deepseek')">DeepSeek V4</button>
            <button class="category-filter-btn" data-filter="glm" onclick="setCatalogFilter('glm')">GLM 5.3</button>
            <button class="category-filter-btn" data-filter="claude" onclick="setCatalogFilter('claude')">Claude 4.6</button>
            <button class="category-filter-btn" data-filter="nemotron" onclick="setCatalogFilter('nemotron')">NVIDIA / Others</button>
          </div>
        </div>

        <div class="models-inventory-grid" id="modelsGridContainer">
          <!-- Rendered dynamically by JS -->
          <div style="grid-column: 1 / -1; text-align: center; padding: 40px; color: var(--text-muted);">
            Querying active verified models...
          </div>
        </div>
      </section>

      <!-- ==========================================================================
           SECTION 5: AUDIT LOGS
           ========================================================================== -->
      <section id="deck-logs" class="content-deck-panel">
        <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px;">
          <div>
            <h3 style="font-size: 1.1rem; font-weight: 700; letter-spacing: -0.02em;">Real-Time Request Ledger</h3>
            <p style="font-size: 12px; color: var(--text-muted);">Live audit stream of invocations proxied through gateway</p>
          </div>
          <button class="btn-form-secondary" onclick="fetchLogs()">Refresh Ledger</button>
        </div>

        <div class="data-table-chassis">
          <table class="enterprise-data-table">
            <thead>
              <tr>
                <th>Timestamp</th>
                <th>Client Key</th>
                <th>Model</th>
                <th>Prompt</th>
                <th>Completion</th>
                <th>Latency</th>
                <th>Status</th>
              </tr>
            </thead>
            <tbody id="logsTableBody">
              <tr>
                <td colspan="7" style="text-align: center; padding: 30px; color: var(--text-muted);">
                  No request events recorded yet.
                </td>
              </tr>
            </tbody>
          </table>
        </div>
      </section>

      <!-- ==========================================================================
           SECTION 6: ADMIN & KEYS
           ========================================================================== -->
      <section id="deck-admin" class="content-deck-panel">
        <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 18px; flex-wrap: wrap; gap: 12px;">
          <div>
            <h3 style="font-size: 1.15rem; font-weight: 700; letter-spacing: -0.02em;">Key Management & Telegram Bot Deck</h3>
            <p style="font-size: 12px; color: var(--text-muted);">
              Issue 32-character alphanumeric keys <code>mahi-rtr-{32 alnum}</code> and manage quota ceilings.
            </p>
          </div>
          <button class="btn-auth-action" onclick="openCreateKeyModal()">
            Issue New Key
          </button>
        </div>

        <div class="data-table-chassis">
          <table class="enterprise-data-table">
            <thead>
              <tr>
                <th>Client Label</th>
                <th>Telegram</th>
                <th>API Key Token</th>
                <th>Tier</th>
                <th>Quota Limit</th>
                <th>Consumed</th>
                <th>Calls</th>
                <th>Status</th>
                <th style="text-align: right;">Action</th>
              </tr>
            </thead>
            <tbody id="adminKeysTableBody">
              <tr>
                <td colspan="9" style="text-align: center; padding: 30px; color: var(--text-muted);">
                  Loading registered keys...
                </td>
              </tr>
            </tbody>
          </table>
        </div>
      </section>
    </main>

  </div>

  <!-- ==========================================================================
       MODALS
       ========================================================================== -->

  <!-- 1. Client Login Modal -->
  <div class="modal-overlay-chassis" id="modal-client-login" onclick="handleModalOverlay(event, 'modal-client-login')">
    <div class="modal-content-card" onclick="event.stopPropagation()">
      <div class="modal-header-deck">
        <h4 style="font-size: 0.95rem; font-weight: 700;">Account Authentication & Quota Ledger</h4>
        <button class="btn-chip-signout" onclick="closeLoginModal()">✕</button>
      </div>

      <div class="modal-body-deck">
        <div class="form-field-unit">
          <label class="form-field-label">CLIENT API KEY</label>
          <input type="text" id="clientLoginKeyInput" class="form-input-control" placeholder="mahi-rtr-V5yye3drtBdv1TN5qfcHZjSnudG3VTAT" autofocus>
          <div style="font-size: 11px; color: var(--text-muted); margin-top: 6px;">
            Supports standard 32-character alphanumeric keys.
          </div>
        </div>
      </div>

      <div class="modal-footer-deck">
        <button class="btn-form-secondary" onclick="closeLoginModal()">Cancel</button>
        <button class="btn-form-primary" onclick="submitClientLogin()">Authenticate Key</button>
      </div>
    </div>
  </div>

  <!-- 2. Create Key Modal -->
  <div class="modal-overlay-chassis" id="modal-create-key" onclick="handleModalOverlay(event, 'modal-create-key')">
    <div class="modal-content-card" onclick="event.stopPropagation()">
      <div class="modal-header-deck">
        <h4 style="font-size: 0.95rem; font-weight: 700;">Issue New 32-Alphanumeric Client Key</h4>
        <button class="btn-chip-signout" onclick="closeCreateKeyModal()">✕</button>
      </div>

      <div class="modal-body-deck">
        <div class="form-field-unit">
          <label class="form-field-label">CLIENT NAME / LABEL</label>
          <input type="text" id="newKeyName" class="form-input-control" placeholder="Alfath Sultan VIP">
        </div>

        <div class="form-field-unit">
          <label class="form-field-label">TELEGRAM USERNAME (OPTIONAL)</label>
          <input type="text" id="newKeyTelegram" class="form-input-control" placeholder="@username">
        </div>

        <div class="form-field-unit">
          <label class="form-field-label">QUOTA PRESET</label>
          <select id="newKeyQuotaPreset" class="form-input-control">
            <option value="-1">Unlimited VIP Tier</option>
            <option value="5000000" selected>Enterprise 5,000,000 Tokens</option>
            <option value="1000000">Pro 1,000,000 Tokens</option>
            <option value="500000">Starter 500,000 Tokens</option>
          </select>
        </div>

        <div class="form-field-unit">
          <label class="form-field-label">VALIDITY (DAYS)</label>
          <input type="number" id="newKeyDays" class="form-input-control" value="30">
        </div>
      </div>

      <div class="modal-footer-deck">
        <button class="btn-form-secondary" onclick="closeCreateKeyModal()">Cancel</button>
        <button class="btn-form-primary" onclick="submitCreateKey()">Generate Key</button>
      </div>
    </div>
  </div>

  <!-- 3. Spotlight Command Palette (⌘K) -->
  <div class="modal-overlay-chassis" id="modal-spotlight" onclick="handleModalOverlay(event, 'modal-spotlight')">
    <div class="modal-content-card" style="max-width: 540px;" onclick="event.stopPropagation()">
      <div style="display: flex; align-items: center; gap: 10px; padding: 12px 16px; border-bottom: 1px solid var(--border-default);">
        <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="var(--emerald-main)" stroke-width="2"><circle cx="11" cy="11" r="8"/><line x1="21" y1="21" x2="16.65" y2="16.65"/></svg>
        <input type="text" id="spotlightInput" placeholder="Navigate or run command..." oninput="handleSpotlightInput()" style="flex:1; border:none; background:transparent; font-size:13px; color:var(--text-primary); outline:none;">
        <kbd class="kbd-badge">ESC</kbd>
      </div>
      <div id="spotlightResultsList" style="max-height: 280px; overflow-y: auto; padding: 6px;"></div>
    </div>
  </div>

  <!-- Toast Notification Stack -->
  <div class="toast-stack-container" id="toastContainer"></div>

  <!-- Engine Script -->
  <script src="app.js"></script>
</body>
</html>
