diff --git a/frontend/src/App.css b/frontend/src/App.css
index 98cca68..4bd1b0c 100644
--- a/frontend/src/App.css
+++ b/frontend/src/App.css
@@ -734,3 +734,27 @@ body {
   border-radius: 6px; font-size: 0.88rem;
 }
 .mcp-form-actions { display: flex; gap: 0.5rem; }
+
+/* ====== Auth Code Input ====== */
+.header-code-form { display: flex; align-items: center; gap: 0.35rem; }
+.header-code-input {
+  background: rgba(255,255,255,0.15); border: 1px solid rgba(255,255,255,0.35);
+  border-radius: 6px; color: #fff; font-size: 0.82rem; padding: 0.3rem 0.6rem;
+  width: 180px; outline: none;
+}
+.header-code-input::placeholder { color: rgba(255,255,255,0.5); }
+.header-code-input:focus { border-color: rgba(255,255,255,0.7); background: rgba(255,255,255,0.2); }
+.header-code-btn {
+  background: rgba(255,255,255,0.2); border: 1px solid rgba(255,255,255,0.35);
+  border-radius: 6px; color: #fff; font-size: 1rem; padding: 0.2rem 0.6rem;
+  cursor: pointer; font-weight: 700;
+}
+.header-code-btn:hover { background: rgba(255,255,255,0.3); }
+
+.auth-pending-content { flex: 1; }
+.auth-code-form { display: flex; gap: 0.5rem; margin-top: 0.75rem; align-items: center; }
+.auth-code-input {
+  flex: 1; padding: 0.5rem 0.75rem; border: 1px solid var(--color-border);
+  border-radius: 6px; font-size: 0.9rem; font-family: monospace;
+}
+.auth-code-input:focus { outline: none; border-color: var(--color-primary); box-shadow: 0 0 0 2px rgba(37,99,235,0.15); }