Add Voices page, usage tracker, smart quota error CTAs

index.html

@@ -36,7 +36,6 @@ body {
   overflow: hidden;
 }
 
-/* ── Layout ── */
 .app-layout {
   display: grid;
   grid-template-columns: 260px 1fr;
@@ -44,7 +43,6 @@ body {
   height: 100vh;
 }
 
-/* ── Header ── */
 .header {
   grid-column: 1 / -1;
   display: flex;
@@ -100,7 +98,6 @@ body {
   border-radius: 50%;
 }
 
-/* ── Sidebar ── */
 .sidebar {
   background: var(--surface);
   border-right: 1px solid var(--border);
@@ -143,7 +140,7 @@ body {
 .nav-item.active { background: var(--accent-subtle); color: var(--accent-hover); }
 .nav-item svg { width: 18px; height: 18px; flex-shrink: 0; }
 
-.voice-list {
+.sidebar-voices {
   flex: 1;
   overflow-y: auto;
   padding: 0 12px 12px;
@@ -173,58 +170,62 @@ body {
   justify-content: center;
   font-size: 16px;
   flex-shrink: 0;
+  color: white;
+  font-weight: 600;
 }
 
-.voice-meta {
-  flex: 1;
-  min-width: 0;
-}
-
-.voice-name {
-  font-size: 13px;
-  font-weight: 500;
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-}
-
-.voice-detail {
-  font-size: 11px;
-  color: var(--text-muted);
-}
+.voice-meta { flex: 1; min-width: 0; }
+.voice-name { font-size: 13px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+.voice-detail { font-size: 11px; color: var(--text-muted); }
 
 .voice-card .delete-voice {
-  opacity: 0;
-  padding: 4px;
-  border: none;
-  background: none;
-  color: var(--text-muted);
-  cursor: pointer;
-  border-radius: 4px;
-  transition: all 0.1s;
+  opacity: 0; padding: 4px; border: none; background: none;
+  color: var(--text-muted); cursor: pointer; border-radius: 4px; transition: all 0.1s;
 }
-
 .voice-card:hover .delete-voice { opacity: 1; }
 .voice-card .delete-voice:hover { color: var(--danger); background: rgba(239,68,68,0.1); }
 
-.add-voice-btn {
+/* ── Usage tracker ── */
+.usage-tracker {
+  padding: 12px;
+  margin: 0 12px 12px;
+  background: var(--surface2);
+  border: 1px solid var(--border);
+  border-radius: 10px;
+}
+
+.usage-header {
   display: flex;
   align-items: center;
-  gap: 8px;
-  padding: 10px;
-  border-radius: 8px;
-  font-size: 13px;
-  color: var(--text-muted);
-  cursor: pointer;
-  border: 1px dashed var(--border);
-  background: none;
+  justify-content: space-between;
+  margin-bottom: 8px;
+}
+
+.usage-label { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; color: var(--text-muted); }
+.usage-value { font-size: 11px; color: var(--text-secondary); font-variant-numeric: tabular-nums; }
+
+.usage-bar {
   width: 100%;
-  transition: all 0.15s;
+  height: 4px;
+  background: var(--surface3);
+  border-radius: 2px;
+  overflow: hidden;
+  margin-bottom: 6px;
+}
+
+.usage-fill {
+  height: 100%;
+  background: var(--accent);
+  border-radius: 2px;
+  transition: width 0.5s ease;
 }
 
-.add-voice-btn:hover { border-color: var(--accent); color: var(--accent-hover); }
+.usage-fill.warning { background: var(--warning); }
+.usage-fill.danger { background: var(--danger); }
 
-/* ── Main Content ── */
+.usage-sub { font-size: 10px; color: var(--text-muted); }
+
+/* ── Content ── */
 .content {
   overflow-y: auto;
   padding: 32px;
@@ -232,345 +233,216 @@ body {
   justify-content: center;
 }
 
-.content-inner {
-  width: 100%;
-  max-width: 720px;
-}
+.content-inner { width: 100%; max-width: 720px; }
 
-/* ── Page: Speech Synthesis ── */
 .page { display: none; }
 .page.active { display: block; }
 
-.page-header {
-  margin-bottom: 28px;
-}
-
-.page-title {
-  font-size: 22px;
-  font-weight: 700;
-  letter-spacing: -0.5px;
-  margin-bottom: 6px;
-}
-
-.page-desc {
-  font-size: 14px;
-  color: var(--text-muted);
-}
+.page-header { margin-bottom: 28px; }
+.page-title { font-size: 22px; font-weight: 700; letter-spacing: -0.5px; margin-bottom: 6px; }
+.page-desc { font-size: 14px; color: var(--text-muted); }
 
-/* Voice selector inline */
+/* Voice selector */
 .voice-selector {
-  display: flex;
-  align-items: center;
-  gap: 12px;
-  padding: 14px 16px;
-  background: var(--surface);
-  border: 1px solid var(--border);
-  border-radius: 12px;
-  margin-bottom: 16px;
-  cursor: pointer;
-  transition: border-color 0.15s;
+  display: flex; align-items: center; gap: 12px;
+  padding: 14px 16px; background: var(--surface); border: 1px solid var(--border);
+  border-radius: 12px; margin-bottom: 16px; cursor: pointer; transition: border-color 0.15s;
 }
-
 .voice-selector:hover { border-color: var(--border-hover); }
-
 .voice-selector .voice-avatar { width: 40px; height: 40px; }
-
 .voice-selector-info { flex: 1; }
+.voice-selector-name { font-size: 14px; font-weight: 600; }
+.voice-selector-hint { font-size: 12px; color: var(--text-muted); }
+.voice-selector-change { font-size: 12px; color: var(--accent); font-weight: 500; }
 
-.voice-selector-name {
-  font-size: 14px;
-  font-weight: 600;
-}
-
-.voice-selector-hint {
-  font-size: 12px;
-  color: var(--text-muted);
-}
-
-.voice-selector-change {
-  font-size: 12px;
-  color: var(--accent);
-  font-weight: 500;
-}
-
-/* Text editor area */
+/* Editor */
 .editor {
-  background: var(--surface);
-  border: 1px solid var(--border);
-  border-radius: 12px;
-  overflow: hidden;
-  margin-bottom: 16px;
+  background: var(--surface); border: 1px solid var(--border);
+  border-radius: 12px; overflow: hidden; margin-bottom: 16px;
 }
-
 .editor textarea {
-  width: 100%;
-  min-height: 180px;
-  background: transparent;
-  border: none;
-  padding: 20px;
-  color: var(--text);
-  font-family: 'Inter', sans-serif;
-  font-size: 15px;
-  line-height: 1.6;
-  resize: vertical;
+  width: 100%; min-height: 180px; background: transparent; border: none;
+  padding: 20px; color: var(--text); font-family: 'Inter', sans-serif;
+  font-size: 15px; line-height: 1.6; resize: vertical;
 }
-
 .editor textarea:focus { outline: none; }
-
 .editor textarea::placeholder { color: var(--text-muted); }
 
 .editor-footer {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  padding: 10px 20px;
-  border-top: 1px solid var(--border);
-  background: var(--surface2);
-}
-
-.editor-left {
-  display: flex;
-  align-items: center;
-  gap: 12px;
-}
-
-.editor-stat {
-  font-size: 12px;
-  color: var(--text-muted);
+  display: flex; align-items: center; justify-content: space-between;
+  padding: 10px 20px; border-top: 1px solid var(--border); background: var(--surface2);
 }
+.editor-left { display: flex; align-items: center; gap: 12px; }
+.editor-stat { font-size: 12px; color: var(--text-muted); }
 
 .lang-select {
-  padding: 4px 8px;
-  background: var(--surface3);
-  border: 1px solid var(--border);
-  border-radius: 6px;
-  color: var(--text-secondary);
-  font-size: 12px;
-  font-family: 'Inter', sans-serif;
+  padding: 4px 8px; background: var(--surface3); border: 1px solid var(--border);
+  border-radius: 6px; color: var(--text-secondary); font-size: 12px; font-family: 'Inter', sans-serif;
 }
-
 .lang-select:focus { outline: none; border-color: var(--accent); }
 
-/* Settings panel */
-.settings-row {
-  display: grid;
-  grid-template-columns: 1fr 1fr;
-  gap: 12px;
-  margin-bottom: 16px;
-}
-
-.setting-group {
-  background: var(--surface);
-  border: 1px solid var(--border);
-  border-radius: 10px;
-  padding: 14px 16px;
-}
-
-.setting-label {
-  font-size: 11px;
-  font-weight: 600;
-  text-transform: uppercase;
-  letter-spacing: 0.5px;
-  color: var(--text-muted);
-  margin-bottom: 8px;
-}
-
-.setting-value {
-  display: flex;
-  align-items: center;
-  gap: 10px;
-}
-
-.setting-value input[type="range"] {
-  flex: 1;
-  accent-color: var(--accent);
-  height: 4px;
-}
-
-.setting-num {
-  font-size: 13px;
-  color: var(--text-secondary);
-  min-width: 30px;
-  text-align: right;
-  font-variant-numeric: tabular-nums;
-}
+/* Settings */
+.settings-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 16px; }
+.setting-group { background: var(--surface); border: 1px solid var(--border); border-radius: 10px; padding: 14px 16px; }
+.setting-label { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; color: var(--text-muted); margin-bottom: 8px; }
+.setting-value { display: flex; align-items: center; gap: 10px; }
+.setting-value input[type="range"] { flex: 1; accent-color: var(--accent); height: 4px; }
+.setting-num { font-size: 13px; color: var(--text-secondary); min-width: 30px; text-align: right; font-variant-numeric: tabular-nums; }
 
-/* Generate button */
-.generate-bar {
-  display: flex;
-  gap: 12px;
-  align-items: center;
-}
+/* Generate */
+.generate-bar { display: flex; gap: 12px; align-items: center; }
 
 .btn-generate {
-  flex: 1;
-  padding: 14px 24px;
+  flex: 1; padding: 14px 24px;
   background: linear-gradient(135deg, var(--accent), #7c3aed);
-  color: white;
-  border: none;
-  border-radius: 10px;
-  font-size: 14px;
-  font-weight: 600;
-  font-family: 'Inter', sans-serif;
-  cursor: pointer;
-  transition: all 0.2s;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  gap: 8px;
+  color: white; border: none; border-radius: 10px;
+  font-size: 14px; font-weight: 600; font-family: 'Inter', sans-serif;
+  cursor: pointer; transition: all 0.2s;
+  display: flex; align-items: center; justify-content: center; gap: 8px;
 }
-
 .btn-generate:hover { filter: brightness(1.1); transform: translateY(-1px); }
 .btn-generate:active { transform: translateY(0); }
 .btn-generate:disabled { opacity: 0.4; cursor: not-allowed; transform: none; filter: none; }
-
-.btn-generate .spinner {
-  width: 16px;
-  height: 16px;
-  border: 2px solid rgba(255,255,255,0.3);
-  border-top-color: white;
-  border-radius: 50%;
-  animation: spin 0.6s linear infinite;
-  display: none;
-}
-
+.btn-generate .spinner { width: 16px; height: 16px; border: 2px solid rgba(255,255,255,0.3); border-top-color: white; border-radius: 50%; animation: spin 0.6s linear infinite; display: none; }
 .btn-generate.loading .spinner { display: block; }
 .btn-generate.loading .btn-text { display: none; }
-
 @keyframes spin { to { transform: rotate(360deg); } }
 
 /* Status */
 .status-bar {
-  margin-top: 12px;
-  padding: 10px 14px;
-  border-radius: 8px;
-  font-size: 13px;
-  display: none;
-  align-items: center;
-  gap: 8px;
+  margin-top: 12px; padding: 10px 14px; border-radius: 8px;
+  font-size: 13px; display: none; gap: 8px; flex-direction: column;
 }
-
 .status-bar.visible { display: flex; }
 .status-bar.info { background: rgba(139,92,246,0.08); color: var(--accent-hover); border: 1px solid rgba(139,92,246,0.15); }
 .status-bar.success { background: rgba(34,197,94,0.08); color: var(--success); border: 1px solid rgba(34,197,94,0.15); }
 .status-bar.error { background: rgba(239,68,68,0.08); color: var(--danger); border: 1px solid rgba(239,68,68,0.15); }
 
-.progress-track {
-  width: 100%;
-  height: 3px;
-  background: var(--surface3);
-  border-radius: 2px;
-  margin-top: 6px;
-  overflow: hidden;
-  display: none;
+.status-text { line-height: 1.4; }
+
+.status-cta {
+  display: inline-flex; align-items: center; gap: 6px;
+  padding: 6px 14px; border-radius: 6px; font-size: 12px; font-weight: 600;
+  font-family: 'Inter', sans-serif; cursor: pointer; border: none;
+  transition: all 0.15s; margin-top: 4px; text-decoration: none; width: fit-content;
 }
+.status-cta.upgrade { background: #ff9d00; color: #000; }
+.status-cta.upgrade:hover { background: #ffb340; }
+.status-cta.credits { background: var(--accent); color: white; }
+.status-cta.credits:hover { background: var(--accent-hover); }
 
+.progress-track { width: 100%; height: 3px; background: var(--surface3); border-radius: 2px; margin-top: 6px; overflow: hidden; display: none; }
 .progress-track.visible { display: block; }
+.progress-fill { height: 100%; background: linear-gradient(90deg, var(--accent), #ec4899); border-radius: 2px; transition: width 0.3s; width: 0%; }
 
-.progress-fill {
-  height: 100%;
-  background: linear-gradient(90deg, var(--accent), #ec4899);
-  border-radius: 2px;
-  transition: width 0.3s;
-  width: 0%;
+/* Player */
+.player-card { margin-top: 16px; background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: 16px 20px; display: none; }
+.player-card.visible { display: block; }
+.player-top { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
+
+.play-btn {
+  width: 40px; height: 40px; border-radius: 50%; background: var(--accent);
+  border: none; color: white; cursor: pointer;
+  display: flex; align-items: center; justify-content: center; flex-shrink: 0; transition: all 0.15s;
 }
+.play-btn:hover { background: var(--accent-hover); transform: scale(1.05); }
+.play-btn svg { width: 18px; height: 18px; }
 
-/* Result player */
-.player-card {
-  margin-top: 16px;
-  background: var(--surface);
-  border: 1px solid var(--border);
-  border-radius: 12px;
-  padding: 16px 20px;
-  display: none;
+.player-info { flex: 1; }
+.player-title { font-size: 14px; font-weight: 500; }
+.player-meta { font-size: 12px; color: var(--text-muted); }
+
+.icon-btn {
+  width: 32px; height: 32px; border-radius: 6px; border: 1px solid var(--border);
+  background: transparent; color: var(--text-secondary); cursor: pointer;
+  display: flex; align-items: center; justify-content: center; transition: all 0.1s;
 }
+.icon-btn:hover { background: var(--surface2); color: var(--text); border-color: var(--border-hover); }
 
-.player-card.visible { display: block; }
+.player-audio { width: 100%; height: 32px; }
 
-.player-top {
-  display: flex;
-  align-items: center;
+/* ── Voices Page ── */
+.voices-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
   gap: 12px;
-  margin-bottom: 12px;
 }
 
-.play-btn {
-  width: 40px;
-  height: 40px;
-  border-radius: 50%;
-  background: var(--accent);
-  border: none;
-  color: white;
-  cursor: pointer;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  flex-shrink: 0;
+.voice-tile {
+  background: var(--surface);
+  border: 1px solid var(--border);
+  border-radius: 12px;
+  padding: 20px;
   transition: all 0.15s;
+  cursor: default;
+  position: relative;
 }
 
-.play-btn:hover { background: var(--accent-hover); transform: scale(1.05); }
+.voice-tile:hover { border-color: var(--border-hover); }
 
-.play-btn svg { width: 18px; height: 18px; }
+.voice-tile-avatar {
+  width: 48px; height: 48px; border-radius: 12px;
+  display: flex; align-items: center; justify-content: center;
+  font-size: 22px; font-weight: 700; color: white; margin-bottom: 12px;
+}
 
-.player-info { flex: 1; }
-.player-title { font-size: 14px; font-weight: 500; }
-.player-meta { font-size: 12px; color: var(--text-muted); }
+.voice-tile-name { font-size: 15px; font-weight: 600; margin-bottom: 4px; }
+.voice-tile-file { font-size: 12px; color: var(--text-muted); margin-bottom: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
 
-.player-actions {
-  display: flex;
-  gap: 6px;
+.voice-tile-actions { display: flex; gap: 6px; }
+
+.voice-tile-btn {
+  padding: 6px 12px; border-radius: 6px; font-size: 12px; font-weight: 500;
+  font-family: 'Inter', sans-serif; cursor: pointer; border: none; transition: all 0.1s;
 }
 
-.icon-btn {
-  width: 32px;
-  height: 32px;
-  border-radius: 6px;
-  border: 1px solid var(--border);
+.voice-tile-btn.use { background: var(--accent); color: white; }
+.voice-tile-btn.use:hover { background: var(--accent-hover); }
+.voice-tile-btn.del { background: transparent; color: var(--text-muted); border: 1px solid var(--border); }
+.voice-tile-btn.del:hover { color: var(--danger); border-color: var(--danger); }
+
+.voice-tile-date {
+  position: absolute; top: 12px; right: 12px;
+  font-size: 10px; color: var(--text-muted);
+}
+
+.add-voice-tile {
   background: transparent;
-  color: var(--text-secondary);
-  cursor: pointer;
+  border: 2px dashed var(--border);
+  border-radius: 12px;
+  padding: 20px;
   display: flex;
+  flex-direction: column;
   align-items: center;
   justify-content: center;
-  transition: all 0.1s;
+  gap: 8px;
+  cursor: pointer;
+  color: var(--text-muted);
+  font-size: 13px;
+  transition: all 0.15s;
+  min-height: 160px;
 }
 
-.icon-btn:hover { background: var(--surface2); color: var(--text); border-color: var(--border-hover); }
-
-.player-audio { width: 100%; height: 32px; }
+.add-voice-tile:hover { border-color: var(--accent); color: var(--accent-hover); }
+.add-voice-tile svg { opacity: 0.5; }
 
-/* ── Page: History ── */
+/* ── History ── */
 .history-list { display: flex; flex-direction: column; gap: 8px; }
 
 .history-item {
-  display: flex;
-  align-items: center;
-  gap: 14px;
-  padding: 14px 16px;
-  background: var(--surface);
-  border: 1px solid var(--border);
-  border-radius: 10px;
-  transition: border-color 0.1s;
+  display: flex; align-items: center; gap: 14px;
+  padding: 14px 16px; background: var(--surface); border: 1px solid var(--border);
+  border-radius: 10px; transition: border-color 0.1s;
 }
-
 .history-item:hover { border-color: var(--border-hover); }
 
 .history-play {
-  width: 36px;
-  height: 36px;
-  border-radius: 50%;
-  background: var(--surface3);
-  border: 1px solid var(--border);
-  color: var(--text-secondary);
-  cursor: pointer;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  flex-shrink: 0;
-  transition: all 0.1s;
+  width: 36px; height: 36px; border-radius: 50%;
+  background: var(--surface3); border: 1px solid var(--border);
+  color: var(--text-secondary); cursor: pointer;
+  display: flex; align-items: center; justify-content: center;
+  flex-shrink: 0; transition: all 0.1s;
 }
-
 .history-play:hover { background: var(--accent); color: white; border-color: var(--accent); }
 .history-play svg { width: 14px; height: 14px; }
 
@@ -579,65 +451,30 @@ body {
 .history-sub { font-size: 11px; color: var(--text-muted); margin-top: 2px; }
 
 .history-download {
-  padding: 6px 12px;
-  border-radius: 6px;
-  border: 1px solid var(--border);
-  background: transparent;
-  color: var(--text-secondary);
-  font-size: 12px;
-  cursor: pointer;
-  font-family: 'Inter', sans-serif;
-  transition: all 0.1s;
+  padding: 6px 12px; border-radius: 6px; border: 1px solid var(--border);
+  background: transparent; color: var(--text-secondary); font-size: 12px;
+  cursor: pointer; font-family: 'Inter', sans-serif; transition: all 0.1s;
 }
-
 .history-download:hover { background: var(--surface2); color: var(--text); }
 
-.empty-state {
-  text-align: center;
-  padding: 60px 20px;
-  color: var(--text-muted);
-  font-size: 14px;
-}
-
+.empty-state { text-align: center; padding: 60px 20px; color: var(--text-muted); font-size: 14px; }
 .empty-state-icon { font-size: 40px; margin-bottom: 12px; opacity: 0.5; }
 
-/* ── Page: API ── */
-.api-tabs {
-  display: flex;
-  gap: 2px;
-  background: var(--surface2);
-  border-radius: 8px;
-  padding: 3px;
-  margin-bottom: 16px;
-}
-
+/* ── API ── */
+.api-tabs { display: flex; gap: 2px; background: var(--surface2); border-radius: 8px; padding: 3px; margin-bottom: 16px; }
 .api-tab {
-  padding: 7px 16px;
-  border-radius: 6px;
-  font-size: 13px;
-  cursor: pointer;
-  color: var(--text-muted);
-  background: transparent;
-  border: none;
-  font-family: 'Inter', sans-serif;
-  font-weight: 500;
-  transition: all 0.1s;
+  padding: 7px 16px; border-radius: 6px; font-size: 13px; cursor: pointer;
+  color: var(--text-muted); background: transparent; border: none;
+  font-family: 'Inter', sans-serif; font-weight: 500; transition: all 0.1s;
 }
-
 .api-tab.active { background: var(--surface3); color: var(--text); }
 .api-tab:hover { color: var(--text-secondary); }
 
 pre {
-  background: var(--surface);
-  border: 1px solid var(--border);
-  border-radius: 10px;
-  padding: 20px;
-  overflow-x: auto;
-  font-size: 13px;
-  line-height: 1.6;
+  background: var(--surface); border: 1px solid var(--border); border-radius: 10px;
+  padding: 20px; overflow-x: auto; font-size: 13px; line-height: 1.6;
   font-family: 'JetBrains Mono', 'Fira Code', monospace;
 }
-
 .cm { color: var(--text-muted); }
 .s { color: #86efac; }
 .k { color: #c4b5fd; }
@@ -645,96 +482,39 @@ pre {
 
 /* ── Modal ── */
 .modal-overlay {
-  position: fixed;
-  inset: 0;
-  background: rgba(0,0,0,0.6);
-  backdrop-filter: blur(4px);
-  display: none;
-  align-items: center;
-  justify-content: center;
-  z-index: 100;
+  position: fixed; inset: 0; background: rgba(0,0,0,0.6);
+  backdrop-filter: blur(4px); display: none; align-items: center;
+  justify-content: center; z-index: 100;
 }
-
 .modal-overlay.visible { display: flex; }
 
 .modal {
-  background: var(--surface);
-  border: 1px solid var(--border);
-  border-radius: 16px;
-  padding: 28px;
-  width: 440px;
-  max-width: 90vw;
-}
-
-.modal-title {
-  font-size: 17px;
-  font-weight: 600;
-  margin-bottom: 6px;
-}
-
-.modal-desc {
-  font-size: 13px;
-  color: var(--text-muted);
-  margin-bottom: 20px;
+  background: var(--surface); border: 1px solid var(--border);
+  border-radius: 16px; padding: 28px; width: 440px; max-width: 90vw;
 }
-
+.modal-title { font-size: 17px; font-weight: 600; margin-bottom: 6px; }
+.modal-desc { font-size: 13px; color: var(--text-muted); margin-bottom: 20px; }
 .modal-field { margin-bottom: 16px; }
-
-.modal-field label {
-  display: block;
-  font-size: 12px;
-  font-weight: 500;
-  color: var(--text-secondary);
-  margin-bottom: 6px;
-}
-
+.modal-field label { display: block; font-size: 12px; font-weight: 500; color: var(--text-secondary); margin-bottom: 6px; }
 .modal-field input[type="text"] {
-  width: 100%;
-  padding: 10px 12px;
-  background: var(--surface2);
-  border: 1px solid var(--border);
-  border-radius: 8px;
-  color: var(--text);
-  font-family: 'Inter', sans-serif;
-  font-size: 14px;
+  width: 100%; padding: 10px 12px; background: var(--surface2);
+  border: 1px solid var(--border); border-radius: 8px; color: var(--text);
+  font-family: 'Inter', sans-serif; font-size: 14px;
 }
-
 .modal-field input:focus { outline: none; border-color: var(--accent); }
 
 .upload-area {
-  border: 2px dashed var(--border);
-  border-radius: 10px;
-  padding: 28px;
-  text-align: center;
-  cursor: pointer;
-  transition: all 0.15s;
-  color: var(--text-muted);
-  font-size: 13px;
+  border: 2px dashed var(--border); border-radius: 10px; padding: 28px;
+  text-align: center; cursor: pointer; transition: all 0.15s;
+  color: var(--text-muted); font-size: 13px;
 }
-
 .upload-area:hover { border-color: var(--accent); color: var(--text-secondary); }
 .upload-area.has-file { border-color: var(--success); border-style: solid; color: var(--success); }
 .upload-area input { display: none; }
 .upload-area-sub { font-size: 11px; margin-top: 4px; opacity: 0.7; }
 
-.modal-actions {
-  display: flex;
-  gap: 8px;
-  justify-content: flex-end;
-  margin-top: 20px;
-}
-
-.btn-modal {
-  padding: 9px 20px;
-  border-radius: 8px;
-  font-size: 13px;
-  font-weight: 500;
-  font-family: 'Inter', sans-serif;
-  cursor: pointer;
-  transition: all 0.1s;
-  border: none;
-}
-
+.modal-actions { display: flex; gap: 8px; justify-content: flex-end; margin-top: 20px; }
+.btn-modal { padding: 9px 20px; border-radius: 8px; font-size: 13px; font-weight: 500; font-family: 'Inter', sans-serif; cursor: pointer; transition: all 0.1s; border: none; }
 .btn-cancel { background: var(--surface2); color: var(--text-secondary); border: 1px solid var(--border); }
 .btn-cancel:hover { background: var(--surface3); color: var(--text); }
 .btn-save { background: var(--accent); color: white; }
@@ -743,72 +523,40 @@ pre {
 
 /* ── Landing ── */
 #landing {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  min-height: 100vh;
-  text-align: center;
-  gap: 20px;
+  display: flex; flex-direction: column; align-items: center; justify-content: center;
+  min-height: 100vh; text-align: center; gap: 20px;
   background: radial-gradient(ellipse at 50% 0%, var(--accent-glow) 0%, transparent 60%);
 }
-
 #landing h1 {
-  font-size: 52px;
-  font-weight: 700;
-  letter-spacing: -1.5px;
+  font-size: 52px; font-weight: 700; letter-spacing: -1.5px;
   background: linear-gradient(135deg, var(--text) 0%, var(--text-secondary) 100%);
-  -webkit-background-clip: text;
-  -webkit-text-fill-color: transparent;
-}
-
-#landing .subtitle {
-  color: var(--text-muted);
-  font-size: 17px;
-  max-width: 420px;
-  line-height: 1.5;
+  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
 }
+#landing .subtitle { color: var(--text-muted); font-size: 17px; max-width: 420px; line-height: 1.5; }
 
 .btn-hf {
-  padding: 13px 32px;
-  background: #ff9d00;
-  color: #000;
-  border: none;
-  border-radius: 10px;
-  font-size: 15px;
-  font-weight: 600;
-  font-family: 'Inter', sans-serif;
-  cursor: pointer;
-  display: inline-flex;
-  align-items: center;
-  gap: 8px;
-  transition: all 0.2s;
+  padding: 13px 32px; background: #ff9d00; color: #000; border: none; border-radius: 10px;
+  font-size: 15px; font-weight: 600; font-family: 'Inter', sans-serif; cursor: pointer;
+  display: inline-flex; align-items: center; gap: 8px; transition: all 0.2s;
 }
-
 .btn-hf:hover { background: #ffb340; transform: translateY(-1px); }
+.landing-note { font-size: 12px; color: var(--text-muted); }
 
-.landing-note {
-  font-size: 12px;
-  color: var(--text-muted);
-}
-
-/* ── Scrollbar ── */
 ::-webkit-scrollbar { width: 6px; }
 ::-webkit-scrollbar-track { background: transparent; }
 ::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }
 ::-webkit-scrollbar-thumb:hover { background: var(--border-hover); }
 
-/* ── Responsive ── */
 @media (max-width: 768px) {
   .app-layout { grid-template-columns: 1fr; }
   .sidebar { display: none; }
   #landing h1 { font-size: 36px; }
+  .voices-grid { grid-template-columns: 1fr; }
 }
 </style>
 </head>
 <body>
 
-<!-- ── Landing ── -->
 <div id="landing">
   <div class="logo-icon" style="width:56px;height:56px;font-size:28px;border-radius:14px">🎙</div>
   <h1>OpenAudioLabs</h1>
@@ -817,10 +565,8 @@ pre {
   <p class="landing-note">Uses your HF ZeroGPU quota &middot; Free tier included</p>
 </div>
 
-<!-- ── App Shell ── -->
 <div id="app" class="app-layout" style="display:none">
 
-  <!-- Header -->
   <div class="header">
     <div class="logo">
       <div class="logo-icon">🎙</div>
@@ -834,43 +580,47 @@ pre {
     </div>
   </div>
 
-  <!-- Sidebar -->
   <div class="sidebar">
     <div class="sidebar-section">
       <div class="sidebar-label">Create</div>
-      <button class="nav-item active" onclick="showPage('synthesis', this)">
+      <button class="nav-item active" data-page="synthesis" onclick="showPage('synthesis', this)">
         <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 2a3 3 0 0 0-3 3v7a3 3 0 0 0 6 0V5a3 3 0 0 0-3-3Z"/><path d="M19 10v2a7 7 0 0 1-14 0v-2"/><line x1="12" y1="19" x2="12" y2="22"/></svg>
         Speech Synthesis
       </button>
-      <button class="nav-item" onclick="showPage('history', this)">
+      <button class="nav-item" data-page="voices" onclick="showPage('voices', this)">
+        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M22 21v-2a4 4 0 0 0-3-3.87"/><path d="M16 3.13a4 4 0 0 1 0 7.75"/></svg>
+        Voices
+      </button>
+      <button class="nav-item" data-page="history" onclick="showPage('history', this)">
         <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"/><polyline points="12 6 12 12 16 14"/></svg>
         History
       </button>
-      <button class="nav-item" onclick="showPage('api', this)">
+      <button class="nav-item" data-page="api" onclick="showPage('api', this)">
         <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="16 18 22 12 16 6"/><polyline points="8 6 2 12 8 18"/></svg>
         API
       </button>
     </div>
 
     <div class="sidebar-section">
-      <div class="sidebar-label">Voice Library</div>
-    </div>
-    <div class="voice-list" id="voice-list">
-      <!-- populated by JS -->
+      <div class="sidebar-label">Quick Select</div>
     </div>
-    <div style="padding:0 12px 12px">
-      <button class="add-voice-btn" onclick="openAddVoice()">
-        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/></svg>
-        Add Voice
-      </button>
+    <div class="sidebar-voices" id="voice-list"></div>
+
+    <!-- Usage Tracker -->
+    <div class="usage-tracker" id="usage-tracker">
+      <div class="usage-header">
+        <span class="usage-label">Session Usage</span>
+        <span class="usage-value" id="usage-value">0s used</span>
+      </div>
+      <div class="usage-bar"><div class="usage-fill" id="usage-fill" style="width:0%"></div></div>
+      <div class="usage-sub" id="usage-sub">Estimated from generation durations</div>
     </div>
   </div>
 
-  <!-- Content -->
   <div class="content">
     <div class="content-inner">
 
-      <!-- Speech Synthesis Page -->
+      <!-- Synthesis Page -->
       <div class="page active" id="page-synthesis">
         <div class="page-header">
           <div class="page-title">Speech Synthesis</div>
@@ -881,7 +631,7 @@ pre {
           <div class="voice-avatar" id="sel-voice-avatar" style="background:var(--surface3)">🎤</div>
           <div class="voice-selector-info">
             <div class="voice-selector-name" id="sel-voice-name">No voice selected</div>
-            <div class="voice-selector-hint" id="sel-voice-hint">Click to add a voice from your library</div>
+            <div class="voice-selector-hint" id="sel-voice-hint">Click to add a voice</div>
           </div>
           <div class="voice-selector-change">Change</div>
         </div>
@@ -939,7 +689,7 @@ pre {
 
         <div class="player-card" id="result">
           <div class="player-top">
-            <button class="play-btn" id="play-btn" onclick="togglePlay()">
+            <button class="play-btn" onclick="togglePlay()">
               <svg id="play-icon" viewBox="0 0 24 24" fill="currentColor"><polygon points="5 3 19 12 5 21 5 3"/></svg>
               <svg id="pause-icon" viewBox="0 0 24 24" fill="currentColor" style="display:none"><rect x="6" y="4" width="4" height="16"/><rect x="14" y="4" width="4" height="16"/></svg>
             </button>
@@ -947,7 +697,7 @@ pre {
               <div class="player-title" id="player-title">Generated audio</div>
               <div class="player-meta" id="player-meta"></div>
             </div>
-            <div class="player-actions">
+            <div style="display:flex;gap:6px">
               <button class="icon-btn" onclick="downloadAudio()" title="Download">
                 <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="7 10 12 15 17 10"/><line x1="12" y1="15" x2="12" y2="3"/></svg>
               </button>
@@ -957,6 +707,15 @@ pre {
         </div>
       </div>
 
+      <!-- Voices Page -->
+      <div class="page" id="page-voices">
+        <div class="page-header">
+          <div class="page-title">Voice Library</div>
+          <div class="page-desc">Create and manage your cloned voices. Voices are stored in your browser.</div>
+        </div>
+        <div class="voices-grid" id="voices-grid"></div>
+      </div>
+
       <!-- History Page -->
       <div class="page" id="page-history">
         <div class="page-header">
@@ -964,10 +723,7 @@ pre {
           <div class="page-desc">Your recent generations.</div>
         </div>
         <div id="history-container">
-          <div class="empty-state">
-            <div class="empty-state-icon">🕐</div>
-            <div>No generations yet. Create your first one!</div>
-          </div>
+          <div class="empty-state"><div class="empty-state-icon">🕐</div><div>No generations yet</div></div>
         </div>
       </div>
 
@@ -975,15 +731,13 @@ pre {
       <div class="page" id="page-api">
         <div class="page-header">
           <div class="page-title">API</div>
-          <div class="page-desc">Use your HF token to call the OmniVoice API directly. File objects need <code style="background:var(--surface2);padding:2px 6px;border-radius:4px;font-size:12px">meta: {"_type": "gradio.FileData"}</code>.</div>
+          <div class="page-desc">Use your HF token to call OmniVoice directly. File objects need <code style="background:var(--surface2);padding:2px 6px;border-radius:4px;font-size:12px">meta: {"_type": "gradio.FileData"}</code>.</div>
         </div>
-
         <div class="api-tabs">
           <button class="api-tab active" onclick="showApiTab('curl', this)">curl</button>
           <button class="api-tab" onclick="showApiTab('javascript', this)">JavaScript</button>
           <button class="api-tab" onclick="showApiTab('python', this)">Python</button>
         </div>
-
         <div id="api-curl">
 <pre><code><span class="cm"># 1. Upload reference audio</span>
 UPLOAD_PATH=$(<span class="f">curl</span> -s -X POST \
@@ -998,13 +752,11 @@ SESSION=$(<span class="f">uuidgen</span>)
   -H <span class="s">"Content-Type: application/json"</span> \
   -H <span class="s">"Authorization: Bearer $HF_TOKEN"</span> \
   -d <span class="s">'{
-    "data": [
-      "Your text here", "English",
+    "data": ["Your text here", "English",
       {"path": "'$UPLOAD_PATH'",
        "meta": {"_type": "gradio.FileData"},
        "orig_name": "voice.mp3"},
-      "", "", 32, 2.0, true, 1.0, 0, true, true
-    ],
+      "", "", 32, 2.0, true, 1.0, 0, true, true],
     "fn_index": 0,
     "session_hash": "'$SESSION'"
   }'</span>
@@ -1014,16 +766,14 @@ SESSION=$(<span class="f">uuidgen</span>)
   <span class="s">"https://k2-fsa-omnivoice.hf.space/gradio_api/queue/data?session_hash=$SESSION"</span> \
   -H <span class="s">"Authorization: Bearer $HF_TOKEN"</span></code></pre>
         </div>
-
         <div id="api-javascript" style="display:none">
 <pre><code><span class="k">const</span> BASE = <span class="s">"https://k2-fsa-omnivoice.hf.space/gradio_api"</span>;
-<span class="k">const</span> TOKEN = <span class="s">"hf_..."</span>;
 <span class="k">const</span> SESSION = <span class="f">crypto.randomUUID</span>();
 
-<span class="cm">// 1. Upload reference audio</span>
+<span class="cm">// 1. Upload</span>
 <span class="k">const</span> form = <span class="k">new</span> <span class="f">FormData</span>();
 form.<span class="f">append</span>(<span class="s">"files"</span>, audioFile);
-<span class="k">const</span> [uploadPath] = <span class="k">await</span> <span class="f">fetch</span>(<span class="s">`${BASE}/upload`</span>, {
+<span class="k">const</span> [path] = <span class="k">await</span> <span class="f">fetch</span>(<span class="s">`${BASE}/upload`</span>, {
   method: <span class="s">"POST"</span>,
   headers: { Authorization: <span class="s">`Bearer ${TOKEN}`</span> },
   body: form
@@ -1032,32 +782,26 @@ form.<span class="f">append</span>(<span class="s">"files"</span>, audioFile);
 <span class="cm">// 2. Join queue</span>
 <span class="k">await</span> <span class="f">fetch</span>(<span class="s">`${BASE}/queue/join`</span>, {
   method: <span class="s">"POST"</span>,
-  headers: {
-    <span class="s">"Content-Type"</span>: <span class="s">"application/json"</span>,
-    Authorization: <span class="s">`Bearer ${TOKEN}`</span>
-  },
+  headers: { <span class="s">"Content-Type"</span>: <span class="s">"application/json"</span>,
+    Authorization: <span class="s">`Bearer ${TOKEN}`</span> },
   body: <span class="f">JSON.stringify</span>({
-    data: [<span class="s">"Your text"</span>, <span class="s">"English"</span>,
-      { path: uploadPath,
-        meta: { _type: <span class="s">"gradio.FileData"</span> },
+    data: [<span class="s">"Text"</span>, <span class="s">"English"</span>,
+      { path, meta: { _type: <span class="s">"gradio.FileData"</span> },
         orig_name: <span class="s">"voice.mp3"</span> },
       <span class="s">""</span>, <span class="s">""</span>, 32, 2.0, true, 1.0, 0, true, true],
-    fn_index: 0, session_hash: SESSION
-  })
+    fn_index: 0, session_hash: SESSION })
 });
 
-<span class="cm">// 3. Stream results via SSE</span>
-<span class="k">const</span> res = <span class="k">await</span> <span class="f">fetch</span>(
+<span class="cm">// 3. Stream SSE</span>
+<span class="k">const</span> r = <span class="k">await</span> <span class="f">fetch</span>(
   <span class="s">`${BASE}/queue/data?session_hash=${SESSION}`</span>,
   { headers: { Authorization: <span class="s">`Bearer ${TOKEN}`</span> } }
 );</code></pre>
         </div>
-
         <div id="api-python" style="display:none">
 <pre><code><span class="k">from</span> gradio_client <span class="k">import</span> Client, handle_file
 
 client = <span class="f">Client</span>(<span class="s">"k2-fsa/OmniVoice"</span>)
-
 result = client.<span class="f">predict</span>(
     text=<span class="s">"Your text here"</span>,
     lang=<span class="s">"English"</span>,
@@ -1103,14 +847,19 @@ import { oauthLoginUrl, oauthHandleRedirectIfPresent } from "https://esm.sh/@hug
 
 const OMNIVOICE_BASE = "https://k2-fsa-omnivoice.hf.space/gradio_api";
 const COLORS = ["#7c3aed","#ec4899","#f59e0b","#22c55e","#3b82f6","#ef4444","#06b6d4","#8b5cf6"];
+const QUOTA_FREE = 240;
+const QUOTA_PRO = 1500;
 
 let accessToken = null;
+let userInfo = null;
+let isPro = false;
 let selectedVoice = null;
 let resultAudioUrl = null;
 let modalFileData = null;
 let history = JSON.parse(localStorage.getItem("oal_history") || "[]");
+let sessionUsage = parseFloat(sessionStorage.getItem("oal_usage") || "0");
 
-// ── Voices (IndexedDB) ──
+// ── IndexedDB ──
 
 function openDB() {
   return new Promise((resolve, reject) => {
@@ -1123,67 +872,95 @@ function openDB() {
 
 async function getVoices() {
   const db = await openDB();
-  return new Promise((resolve, reject) => {
-    const tx = db.transaction("voices", "readonly");
-    const store = tx.objectStore("voices");
-    const req = store.getAll();
-    req.onsuccess = () => resolve(req.result);
-    req.onerror = () => reject(req.error);
+  return new Promise((res, rej) => {
+    const r = db.transaction("voices","readonly").objectStore("voices").getAll();
+    r.onsuccess = () => res(r.result);
+    r.onerror = () => rej(r.error);
   });
 }
 
-async function putVoice(voice) {
+async function putVoice(v) {
   const db = await openDB();
-  return new Promise((resolve, reject) => {
-    const tx = db.transaction("voices", "readwrite");
-    tx.objectStore("voices").put(voice);
-    tx.oncomplete = () => resolve();
-    tx.onerror = () => reject(tx.error);
+  return new Promise((res, rej) => {
+    const tx = db.transaction("voices","readwrite");
+    tx.objectStore("voices").put(v);
+    tx.oncomplete = () => res();
+    tx.onerror = () => rej(tx.error);
   });
 }
 
 async function deleteVoiceDB(id) {
   const db = await openDB();
-  return new Promise((resolve, reject) => {
-    const tx = db.transaction("voices", "readwrite");
+  return new Promise((res, rej) => {
+    const tx = db.transaction("voices","readwrite");
     tx.objectStore("voices").delete(id);
-    tx.oncomplete = () => resolve();
-    tx.onerror = () => reject(tx.error);
+    tx.oncomplete = () => res();
+    tx.onerror = () => rej(tx.error);
   });
 }
 
-async function renderVoices() {
+// ── Render sidebar voices ──
+
+async function renderSidebarVoices() {
   const voices = await getVoices();
-  const list = document.getElementById("voice-list");
-  list.innerHTML = voices.map(v => `
+  document.getElementById("voice-list").innerHTML = voices.map(v => `
     <div class="voice-card ${selectedVoice?.id === v.id ? 'selected' : ''}" onclick="selectVoice('${v.id}')">
       <div class="voice-avatar" style="background:${v.color}">${v.name[0].toUpperCase()}</div>
       <div class="voice-meta">
         <div class="voice-name">${v.name}</div>
         <div class="voice-detail">${v.fileName}</div>
       </div>
-      <button class="delete-voice" onclick="event.stopPropagation();deleteVoice('${v.id}')" title="Remove">
-        <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg>
-      </button>
     </div>
   `).join("");
 }
 
+// ── Render Voices page grid ──
+
+async function renderVoicesPage() {
+  const voices = await getVoices();
+  const grid = document.getElementById("voices-grid");
+  grid.innerHTML = voices.map(v => {
+    const date = new Date(v.createdAt).toLocaleDateString();
+    return `<div class="voice-tile">
+      <div class="voice-tile-date">${date}</div>
+      <div class="voice-tile-avatar" style="background:${v.color}">${v.name[0].toUpperCase()}</div>
+      <div class="voice-tile-name">${v.name}</div>
+      <div class="voice-tile-file">${v.fileName}</div>
+      <div class="voice-tile-actions">
+        <button class="voice-tile-btn use" onclick="selectVoiceAndGo('${v.id}')">Use Voice</button>
+        <button class="voice-tile-btn del" onclick="deleteVoiceFromPage('${v.id}')">Remove</button>
+      </div>
+    </div>`;
+  }).join("") + `
+    <div class="add-voice-tile" onclick="openAddVoice()">
+      <svg width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/></svg>
+      Add New Voice
+    </div>`;
+}
+
 window.selectVoice = async function(id) {
   const voices = await getVoices();
   selectedVoice = voices.find(v => v.id === id);
-  renderVoices();
+  renderSidebarVoices();
   updateVoiceSelector();
   updateGenerateBtn();
 };
 
+window.selectVoiceAndGo = async function(id) {
+  await window.selectVoice(id);
+  document.querySelector('[data-page="synthesis"]').click();
+};
+
 window.deleteVoice = async function(id) {
   await deleteVoiceDB(id);
   if (selectedVoice?.id === id) { selectedVoice = null; updateVoiceSelector(); }
-  renderVoices();
+  renderSidebarVoices();
+  renderVoicesPage();
   updateGenerateBtn();
 };
 
+window.deleteVoiceFromPage = window.deleteVoice;
+
 function updateVoiceSelector() {
   const avatar = document.getElementById("sel-voice-avatar");
   const name = document.getElementById("sel-voice-name");
@@ -1197,16 +974,79 @@ function updateVoiceSelector() {
     avatar.textContent = "🎤";
     avatar.style.background = "var(--surface3)";
     name.textContent = "No voice selected";
-    hint.textContent = "Click to add a voice from your library";
+    hint.textContent = "Click to add a voice";
+  }
+}
+
+// ── Usage Tracker ──
+
+function updateUsageTracker(addSeconds) {
+  if (addSeconds) {
+    sessionUsage += addSeconds;
+    sessionStorage.setItem("oal_usage", sessionUsage.toString());
+  }
+  const quota = isPro ? QUOTA_PRO : QUOTA_FREE;
+  const pct = Math.min((sessionUsage / quota) * 100, 100);
+  const fill = document.getElementById("usage-fill");
+  fill.style.width = `${pct}%`;
+  fill.className = "usage-fill" + (pct > 80 ? " danger" : pct > 50 ? " warning" : "");
+
+  const mins = Math.floor(sessionUsage / 60);
+  const secs = Math.round(sessionUsage % 60);
+  document.getElementById("usage-value").textContent = mins > 0 ? `${mins}m ${secs}s` : `${secs}s`;
+
+  const quotaMins = Math.round(quota / 60);
+  const tier = isPro ? "Pro" : "Free";
+  document.getElementById("usage-sub").textContent = `~${Math.round(sessionUsage)}s of ${quotaMins}m ${tier} daily quota (est.)`;
+}
+
+// ── Smart Error CTAs ──
+
+function showStatusWithCTA(errorMsg) {
+  const el = document.getElementById("status");
+  const isQuotaError = errorMsg.includes("GPU quota");
+  const isFreeQuota = errorMsg.includes("free GPU quota");
+
+  if (isQuotaError) {
+    const tryAgainMatch = errorMsg.match(/Try again in ([\d:]+)/);
+    const waitTime = tryAgainMatch ? tryAgainMatch[1] : null;
+
+    let html = `<div class="status-text">${errorMsg}</div>`;
+
+    if (isFreeQuota) {
+      html += `<a class="status-cta upgrade" href="https://huggingface.co/subscribe/pro" target="_blank">
+        🤗 Upgrade to HF Pro &mdash; 25 min/day GPU quota
+      </a>`;
+    } else {
+      html += `<a class="status-cta credits" href="https://huggingface.co/settings/billing" target="_blank">
+        Buy additional GPU credits &mdash; $1 per 10 min
+      </a>`;
+    }
+
+    if (waitTime && waitTime !== "0:00:00") {
+      html += `<div style="font-size:11px;color:var(--text-muted);margin-top:2px">Or wait ${waitTime} for your quota to reset</div>`;
+    }
+
+    el.className = "status-bar visible error";
+    el.innerHTML = html;
+  } else {
+    el.className = "status-bar visible error";
+    el.innerHTML = `<div class="status-text">${errorMsg}</div>`;
   }
 }
 
+function showStatus(type, msg) {
+  const el = document.getElementById("status");
+  el.className = `status-bar visible ${type}`;
+  el.innerHTML = `<div class="status-text">${msg}</div>`;
+}
+
 // ── Modal ──
 
 window.openAddVoice = function() {
   document.getElementById("add-voice-modal").classList.add("visible");
   document.getElementById("voice-name-input").value = "";
-  document.getElementById("modal-upload-label").textContent = "Drop audio file here or click to browse";
+  document.getElementById("modal-upload-label").innerHTML = 'Drop audio file here or click to browse<div class="upload-area-sub">MP3, WAV, FLAC &middot; 5-30 seconds recommended</div>';
   document.getElementById("modal-upload").classList.remove("has-file");
   document.getElementById("save-voice-btn").disabled = true;
   modalFileData = null;
@@ -1218,13 +1058,9 @@ window.closeModal = function() {
 
 const modalUpload = document.getElementById("modal-upload");
 const modalFileInput = document.getElementById("modal-file-input");
-
 modalUpload.addEventListener("click", () => modalFileInput.click());
-modalUpload.addEventListener("dragover", e => { e.preventDefault(); });
-modalUpload.addEventListener("drop", e => {
-  e.preventDefault();
-  if (e.dataTransfer.files.length) handleModalFile(e.dataTransfer.files[0]);
-});
+modalUpload.addEventListener("dragover", e => e.preventDefault());
+modalUpload.addEventListener("drop", e => { e.preventDefault(); if (e.dataTransfer.files.length) handleModalFile(e.dataTransfer.files[0]); });
 modalFileInput.addEventListener("change", () => { if (modalFileInput.files.length) handleModalFile(modalFileInput.files[0]); });
 
 function handleModalFile(file) {
@@ -1239,18 +1075,14 @@ function handleModalFile(file) {
 }
 
 document.getElementById("voice-name-input").addEventListener("input", checkModalSave);
-
 function checkModalSave() {
-  document.getElementById("save-voice-btn").disabled = !(
-    document.getElementById("voice-name-input").value.trim() && modalFileData
-  );
+  document.getElementById("save-voice-btn").disabled = !(document.getElementById("voice-name-input").value.trim() && modalFileData);
 }
 
 window.saveVoice = async function() {
-  const name = document.getElementById("voice-name-input").value.trim();
   const voice = {
     id: crypto.randomUUID(),
-    name,
+    name: document.getElementById("voice-name-input").value.trim(),
     fileName: modalFileData.name,
     audioData: modalFileData.data,
     audioType: modalFileData.type,
@@ -1260,7 +1092,8 @@ window.saveVoice = async function() {
   await putVoice(voice);
   selectedVoice = voice;
   closeModal();
-  renderVoices();
+  renderSidebarVoices();
+  renderVoicesPage();
   updateVoiceSelector();
   updateGenerateBtn();
 };
@@ -1271,22 +1104,31 @@ async function initOAuth() {
   const result = await oauthHandleRedirectIfPresent();
   if (result) {
     accessToken = result.accessToken;
-    showApp(result.userInfo);
+    userInfo = result.userInfo;
+    // Check Pro status
+    try {
+      const whoami = await fetch("https://huggingface.co/api/whoami-v2", {
+        headers: { Authorization: `Bearer ${accessToken}` }
+      }).then(r => r.json());
+      isPro = !!whoami.isPro;
+    } catch { isPro = false; }
+    showApp();
   }
 }
 
 window.login = async function() {
-  const url = await oauthLoginUrl({ scopes: "openid profile read-billing" });
-  window.location.href = url;
+  window.location.href = await oauthLoginUrl({ scopes: "openid profile read-billing" });
 };
 
-function showApp(userInfo) {
+function showApp() {
   document.getElementById("landing").style.display = "none";
   document.getElementById("app").style.display = "grid";
   document.getElementById("user-avatar").src = userInfo.avatarUrl;
   document.getElementById("user-name").textContent = userInfo.name;
-  renderVoices();
+  renderSidebarVoices();
+  renderVoicesPage();
   renderHistory();
+  updateUsageTracker();
 }
 
 // ── Pages ──
@@ -1296,6 +1138,8 @@ window.showPage = function(page, el) {
   document.getElementById(`page-${page}`).classList.add("active");
   document.querySelectorAll(".nav-item").forEach(n => n.classList.remove("active"));
   el.classList.add("active");
+  if (page === "voices") renderVoicesPage();
+  if (page === "history") renderHistory();
 };
 
 window.showApiTab = function(tab, el) {
@@ -1305,14 +1149,13 @@ window.showApiTab = function(tab, el) {
   el.classList.add("active");
 };
 
-// ── Text Input ──
+// ── Text ──
 
 const textInput = document.getElementById("text-input");
 textInput.addEventListener("input", () => {
   document.getElementById("char-count").textContent = textInput.value.length;
   updateGenerateBtn();
 });
-
 function updateGenerateBtn() {
   document.getElementById("generate-btn").disabled = !(selectedVoice && textInput.value.trim());
 }
@@ -1345,7 +1188,6 @@ window.generate = async function() {
   progressFill.style.width = "0%";
 
   try {
-    // Upload voice from IndexedDB
     const blob = new Blob([selectedVoice.audioData], { type: selectedVoice.audioType || "audio/mpeg" });
     const form = new FormData();
     form.append("files", blob, selectedVoice.fileName);
@@ -1367,16 +1209,12 @@ window.generate = async function() {
         ...(accessToken ? { Authorization: `Bearer ${accessToken}` } : {})
       },
       body: JSON.stringify({
-        data: [
-          text, lang,
+        data: [text, lang,
           { path: uploadPath, meta: { _type: "gradio.FileData" }, orig_name: selectedVoice.fileName },
-          "", "", steps, 2.0, true, speed, 0, true, true
-        ],
-        fn_index: 0,
-        session_hash: sessionHash
+          "", "", steps, 2.0, true, speed, 0, true, true],
+        fn_index: 0, session_hash: sessionHash
       })
     });
-
     if (!joinRes.ok) throw new Error(`Queue join failed: ${joinRes.status}`);
 
     const streamRes = await fetch(
@@ -1411,21 +1249,25 @@ window.generate = async function() {
         } else if (data.msg === "process_completed") {
           progressFill.style.width = "100%";
           if (data.success) {
+            const dur = data.output.duration || 0;
             resultAudioUrl = data.output.data[0].url;
             document.getElementById("audio-player").src = resultAudioUrl;
             document.getElementById("player-title").textContent = text.slice(0, 60) + (text.length > 60 ? "..." : "");
-            document.getElementById("player-meta").textContent = `${selectedVoice.name} · ${data.output.duration?.toFixed(1)}s · ${text.length} chars`;
+            document.getElementById("player-meta").textContent = `${selectedVoice.name} · ${dur.toFixed(1)}s · ${text.length} chars`;
             result.classList.add("visible");
-            showStatus("success", `Generated in ${data.output.duration?.toFixed(1)}s`);
-            addToHistory(text, selectedVoice.name, data.output.duration, resultAudioUrl);
+            showStatus("success", `Generated in ${dur.toFixed(1)}s`);
+            addToHistory(text, selectedVoice.name, dur, resultAudioUrl);
+            // Estimate GPU usage (~50% of wall time based on our measurements)
+            updateUsageTracker(dur * 0.5);
           } else {
-            showStatus("error", data.output?.error || "Generation failed");
+            const errMsg = data.output?.error || "Generation failed";
+            showStatusWithCTA(errMsg);
           }
         }
       }
     }
   } catch (err) {
-    showStatus("error", err.message);
+    showStatusWithCTA(err.message);
   } finally {
     btn.disabled = false;
     btn.classList.remove("loading");
@@ -1433,34 +1275,16 @@ window.generate = async function() {
   }
 };
 
-function showStatus(type, msg) {
-  const el = document.getElementById("status");
-  el.className = `status-bar visible ${type}`;
-  el.textContent = msg;
-}
-
 // ── Player ──
 
 const audioEl = document.getElementById("audio-player");
-
-window.togglePlay = function() {
-  if (audioEl.paused) { audioEl.play(); } else { audioEl.pause(); }
-};
-
-audioEl.addEventListener("play", () => {
-  document.getElementById("play-icon").style.display = "none";
-  document.getElementById("pause-icon").style.display = "block";
-});
-
-audioEl.addEventListener("pause", () => {
-  document.getElementById("play-icon").style.display = "block";
-  document.getElementById("pause-icon").style.display = "none";
-});
+window.togglePlay = function() { audioEl.paused ? audioEl.play() : audioEl.pause(); };
+audioEl.addEventListener("play", () => { document.getElementById("play-icon").style.display = "none"; document.getElementById("pause-icon").style.display = "block"; });
+audioEl.addEventListener("pause", () => { document.getElementById("play-icon").style.display = "block"; document.getElementById("pause-icon").style.display = "none"; });
 
 window.downloadAudio = async function() {
   if (!resultAudioUrl) return;
-  const res = await fetch(resultAudioUrl);
-  const blob = await res.blob();
+  const blob = await fetch(resultAudioUrl).then(r => r.blob());
   const a = document.createElement("a");
   a.href = URL.createObjectURL(blob);
   a.download = "openaudio_output.wav";
@@ -1478,44 +1302,22 @@ function addToHistory(text, voiceName, duration, url) {
 }
 
 function renderHistory() {
-  const container = document.getElementById("history-container");
-  if (!history.length) {
-    container.innerHTML = '<div class="empty-state"><div class="empty-state-icon">🕐</div><div>No generations yet</div></div>';
-    return;
-  }
-  container.innerHTML = '<div class="history-list">' + history.map((h, i) => {
-    const date = new Date(h.timestamp);
-    const timeStr = date.toLocaleTimeString([], { hour: "2-digit", minute: "2-digit" });
+  const c = document.getElementById("history-container");
+  if (!history.length) { c.innerHTML = '<div class="empty-state"><div class="empty-state-icon">🕐</div><div>No generations yet</div></div>'; return; }
+  c.innerHTML = '<div class="history-list">' + history.map((h, i) => {
+    const t = new Date(h.timestamp).toLocaleTimeString([], { hour: "2-digit", minute: "2-digit" });
     return `<div class="history-item">
-      <button class="history-play" onclick="playHistory(${i})">
-        <svg viewBox="0 0 24 24" fill="currentColor"><polygon points="5 3 19 12 5 21 5 3"/></svg>
-      </button>
-      <div class="history-info">
-        <div class="history-text">${h.text}</div>
-        <div class="history-sub">${h.voiceName} · ${h.duration?.toFixed(1)}s · ${timeStr}</div>
-      </div>
+      <button class="history-play" onclick="playHistory(${i})"><svg viewBox="0 0 24 24" fill="currentColor"><polygon points="5 3 19 12 5 21 5 3"/></svg></button>
+      <div class="history-info"><div class="history-text">${h.text}</div><div class="history-sub">${h.voiceName} · ${h.duration?.toFixed(1)}s · ${t}</div></div>
       <button class="history-download" onclick="downloadHistoryItem(${i})">Download</button>
     </div>`;
   }).join("") + '</div>';
 }
 
-window.playHistory = function(i) {
-  const h = history[i];
-  if (h.url) { audioEl.src = h.url; audioEl.play(); }
-};
-
+window.playHistory = function(i) { const h = history[i]; if (h.url) { audioEl.src = h.url; audioEl.play(); } };
 window.downloadHistoryItem = async function(i) {
-  const h = history[i];
-  if (!h.url) return;
-  try {
-    const res = await fetch(h.url);
-    const blob = await res.blob();
-    const a = document.createElement("a");
-    a.href = URL.createObjectURL(blob);
-    a.download = `openaudio_${i}.wav`;
-    a.click();
-    URL.revokeObjectURL(a.href);
-  } catch { /* URL may have expired */ }
+  const h = history[i]; if (!h.url) return;
+  try { const b = await fetch(h.url).then(r=>r.blob()); const a=document.createElement("a"); a.href=URL.createObjectURL(b); a.download=`openaudio_${i}.wav`; a.click(); URL.revokeObjectURL(a.href); } catch {}
 };
 
 // ── Init ──