security: gate app behind HF OAuth login

- Unauthenticated users see a login screen instead of the app
- Document fetch skipped when no hf_user cookie
- Login card with centered 'Sign in with Hugging Face' button
- No data visible without signing in

app/globals.css

@@ -94,6 +94,55 @@ h4 {
   background: var(--accent-hover);
 }
 
+/* ── Login Gate ───────────────────────────────── */
+
+.login-gate {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  height: 100vh;
+  background: var(--bg-color);
+}
+
+.login-card {
+  text-align: center;
+  background: var(--pane-bg);
+  border: 1px solid var(--border-color);
+  border-radius: 16px;
+  padding: 48px 40px;
+  max-width: 420px;
+  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
+}
+
+.login-card h1 {
+  font-size: 1.6rem;
+  margin-bottom: 12px;
+}
+
+.login-card p {
+  color: #94a3b8;
+  margin-bottom: 28px;
+  line-height: 1.5;
+}
+
+.btn-login-large {
+  display: inline-block;
+  font-size: 1rem;
+  font-weight: 700;
+  color: #fff;
+  background: var(--accent);
+  padding: 12px 28px;
+  border-radius: 10px;
+  text-decoration: none;
+  transition: background 0.2s, transform 0.1s;
+}
+
+.btn-login-large:hover {
+  background: var(--accent-hover);
+  transform: translateY(-1px);
+}
+
 .container {
   display: flex;
   width: 100%;

app/page.js

@@ -62,12 +62,14 @@ export default function Home() {
             console.warn('Could not read hf_user cookie', e);
         }
 
-        // 2. Fetch documents (filtered by user if logged in)
-        const url = username
-            ? `/api/documents?user=${encodeURIComponent(username)}`
-            : '/api/documents';
+        // Not signed in — don't fetch anything, show login screen
+        if (!username) {
+            setLoading(false);
+            return;
+        }
 
-        fetch(url)
+        // 2. Fetch documents (filtered by user)
+        fetch(`/api/documents?user=${encodeURIComponent(username)}`)
             .then(res => res.json())
             .then(data => {
                 setDocuments(data);
@@ -358,6 +360,21 @@ export default function Home() {
         );
     }
 
+    // Gate: require login
+    if (!annotatorName) {
+        return (
+            <div className="login-gate">
+                <div className="login-card">
+                    <h1>🏷️ Annotation Tool</h1>
+                    <p>Sign in with your Hugging Face account to start annotating.</p>
+                    <a href="/api/auth/login" className="btn btn-login-large">
+                        🤗 Sign in with Hugging Face
+                    </a>
+                </div>
+            </div>
+        );
+    }
+
     return (
         <div className="app-wrapper">
             {/* Top bar with user identity */}