security: gate app behind HF OAuth login

Public users see a full-page login screen instead of the annotation tool.
Only ALLOWED_USERS can sign in (checked in OAuth callback).

app/globals.css

@@ -94,6 +94,60 @@ 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;
+}
+
+.login-card h1 {
+  font-size: 1.5rem;
+  margin: 0 0 12px;
+  color: var(--text-color);
+}
+
+.login-card p {
+  color: #94a3b8;
+  font-size: 0.9rem;
+  margin: 0 0 24px;
+}
+
+.btn-login-large {
+  display: inline-block;
+  font-size: 1rem;
+  font-weight: 700;
+  color: #fff;
+  background: var(--accent);
+  padding: 12px 28px;
+  border-radius: 8px;
+  text-decoration: none;
+  transition: background 0.2s;
+}
+
+.btn-login-large:hover {
+  background: var(--accent-hover);
+}
+
+.login-note {
+  font-size: 0.75rem !important;
+  color: #64748b !important;
+  margin-top: 16px !important;
+}
+
 .container {
   display: flex;
   width: 100%;

app/page.js

@@ -347,6 +347,22 @@ export default function Home() {
         }
     };
 
+    // Gate: require HF OAuth login
+    if (!annotatorName) {
+        return (
+            <div className="login-gate">
+                <div className="login-card">
+                    <h1>🔒 Annotation Tool</h1>
+                    <p>Sign in with your HuggingFace account to access the annotation tool.</p>
+                    <a href="/api/auth/login" className="btn btn-login-large">
+                        🤗 Sign in with HuggingFace
+                    </a>
+                    <p className="login-note">Only authorized annotators can access this tool.</p>
+                </div>
+            </div>
+        );
+    }
+
     if (loading) {
         return (
             <div className="loading-container">