Fix API key guide with accurate step-by-step flow

Corrected based on actual Google Cloud Console experience:
- Step 3 is now 'Create credentials' button on the API details page (not left sidebar)
- Choose Public data → Next to generate the key
- Key shown immediately on screen; can copy and use as-is
- Optional restriction flow: Restrict key → type youtube → select API → OK → Save → Credentials sidebar → Show key

Co-Authored-By: claude-flow <ruv@ruv.net>

vidflow.html

@@ -302,14 +302,16 @@ body.idle .gt,body.idle .gb,body.idle .gr,body.idle .gl{opacity:0;transition:opa
     <div class="sp-label">What is an API key?</div>
     <p class="sp-hint">An API key is a short code that lets VidFlow talk to YouTube on your behalf so it can search for playlists. It is free, takes about 60 seconds to create, and you only ever need one.</p>
     <div class="sp-label">Step 1 &mdash; Open the YouTube API page</div>
-    <p class="sp-hint">Click the link below and sign in with any Google account (Gmail works fine).</p>
+    <p class="sp-hint">Click the link below and sign in with any Google account (Gmail works fine). Google may auto-create a project for you &mdash; that is normal.</p>
     <p style="margin-bottom:16px"><a href="https://console.cloud.google.com/marketplace/product/google/youtube.googleapis.com" target="_blank" rel="noopener" style="color:var(--accent2);font-size:12px;font-weight:700;letter-spacing:.5px">&#10697; YouTube Data API v3 on Google Cloud</a></p>
     <div class="sp-label">Step 2 &mdash; Enable the API</div>
-    <p class="sp-hint">Click the blue <strong>Enable</strong> button. If asked to create a project, click <strong>Create Project</strong> and accept the defaults.</p>
+    <p class="sp-hint">Click the blue <strong>Enable</strong> button. You will land on the API details page.</p>
-    <div class="sp-label">Step 3 &mdash; Create a key</div>
+    <div class="sp-label">Step 3 &mdash; Create credentials</div>
-    <p class="sp-hint">In the left sidebar click <strong>Credentials</strong>. Then click <strong>Create Credentials</strong> at the top and choose <strong>API Key</strong>. Google will generate a key instantly.</p>
+    <p class="sp-hint">On the API details page, click the <strong>Create credentials</strong> button in the top-right callout. Choose <strong>Public data</strong> and click <strong>Next</strong>.</p>
-    <div class="sp-label">Step 4 &mdash; Copy &amp; paste</div>
+    <div class="sp-label">Step 4 &mdash; Copy your key</div>
-    <p class="sp-hint" style="margin-bottom:20px">Click <strong>Copy</strong> on the key that appears, then paste it into the VidFlow setup screen and press Enter VidFlow.</p>
+    <p class="sp-hint">Your API key is shown immediately. Copy it and paste it into VidFlow &mdash; you can use it as-is. Google recommends restricting it (optional but good practice).</p>
+    <div class="sp-label">Optional &mdash; Restrict the key</div>
+    <p class="sp-hint" style="margin-bottom:20px">Click <strong>Restrict key</strong>, then open the <strong>Select API restrictions</strong> dropdown, type <em>youtube</em>, select <strong>YouTube Data API v3</strong>, click <strong>OK</strong>, then <strong>Save</strong>. After saving, go to <strong>Credentials</strong> in the left sidebar and click <strong>Show key</strong> to copy your final key.</p>
     <button class="btn-p" id="api-guide-close2">GOT IT</button>
   </div>
 </div>