Sticky nav, avatar dropdown menu, mobile responsive layout

static/css/style.css

@@ -339,6 +339,9 @@ input:focus, select:focus, textarea:focus {
 
 /* ---- Nav ---- */
 .nav {
+  position: sticky;
+  top: 0;
+  z-index: 100;
   display: flex;
   align-items: center;
   justify-content: space-between;
@@ -362,25 +365,75 @@ input:focus, select:focus, textarea:focus {
 }
 .nav-brand svg { stroke: #fff !important; }
 .nav-user {
+  position: relative;
+}
+
+/* Avatar button */
+.nav-avatar {
+  width: 36px;
+  height: 36px;
+  border-radius: 50%;
+  border: 2px solid rgba(255,255,255,0.35);
+  background: rgba(255,255,255,0.15);
+  color: #fff;
   display: flex;
   align-items: center;
-  gap: 0.75rem;
+  justify-content: center;
+  cursor: pointer;
+  transition: all var(--transition);
 }
-.user-badge {
-  font-size: 0.8rem;
-  color: rgba(255,255,255,0.9);
-  background: rgba(255,255,255,0.15);
-  padding: 0.3rem 0.7rem;
-  border-radius: 20px;
-  border: 1px solid rgba(255,255,255,0.25);
+.nav-avatar:hover {
+  background: rgba(255,255,255,0.25);
+  border-color: rgba(255,255,255,0.5);
+}
+
+/* Dropdown */
+.nav-dropdown {
+  position: absolute;
+  top: calc(100% + 0.5rem);
+  right: 0;
+  min-width: 220px;
+  background: var(--bg-card);
+  border: 1px solid var(--border);
+  border-radius: var(--radius-sm);
+  box-shadow: 0 8px 32px rgba(0,0,0,0.12);
+  padding: 0.5rem 0;
+  animation: dropIn 0.15s ease;
+  z-index: 200;
+}
+@keyframes dropIn {
+  from { opacity: 0; transform: translateY(-6px); }
+  to { opacity: 1; transform: translateY(0); }
 }
-.nav .btn-ghost {
-  color: rgba(255,255,255,0.8);
+.nav-dropdown-email {
+  padding: 0.6rem 1rem;
+  font-size: 0.82rem;
+  color: var(--text-muted);
+  word-break: break-all;
 }
-.nav .btn-ghost:hover {
-  color: #fff;
-  background: rgba(255,255,255,0.1);
+.nav-dropdown-divider {
+  height: 1px;
+  background: var(--border);
+  margin: 0.25rem 0;
 }
+.nav-dropdown-item {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  width: 100%;
+  padding: 0.55rem 1rem;
+  border: none;
+  background: none;
+  color: var(--text);
+  font-family: var(--font-sans);
+  font-size: 0.85rem;
+  cursor: pointer;
+  transition: background var(--transition);
+}
+.nav-dropdown-item:hover {
+  background: var(--bg-elevated);
+}
+.nav-dropdown-item svg { color: var(--text-dim); }
 
 /* ---- Page header ---- */
 .page-header { margin-bottom: 1.75rem; }
@@ -778,3 +831,40 @@ input:focus, select:focus, textarea:focus {
 .mt-1 { margin-top: 0.5rem; }
 .mt-2 { margin-top: 1.25rem; }
 .mb-2 { margin-bottom: 1rem; }
+
+/* ---- Mobile responsive ---- */
+@media (max-width: 768px) {
+  .app { padding: 1rem; }
+
+  .nav {
+    margin-top: -1rem;
+    padding: 0.75rem 1rem;
+  }
+
+  .page-header h1 { font-size: 1.3rem; }
+  .page-header p { font-size: 0.82rem; }
+
+  .auth-container { margin: 2rem auto; }
+  .auth-container .card { padding: 1.5rem; }
+
+  .options-row { flex-direction: column; }
+  .options-row .form-group { min-width: 100%; }
+
+  .result-stats { grid-template-columns: repeat(2, 1fr); }
+
+  .history-item { flex-direction: column; align-items: flex-start; gap: 0.5rem; }
+  .history-actions { align-self: flex-end; }
+
+  .app-footer {
+    margin-bottom: -1rem;
+    padding: 1rem;
+  }
+
+  .card { padding: 1.15rem; }
+  .card-header { margin-bottom: 1rem; }
+
+  .regions-table { font-size: 0.78rem; }
+  .regions-table th, .regions-table td { padding: 0.45rem 0.5rem; }
+
+  .nav-dropdown { right: -0.5rem; min-width: 200px; }
+}

static/js/app.js

@@ -114,9 +114,22 @@ document.querySelectorAll('[data-view]').forEach((a) => {
 document.getElementById('btn-logout')?.addEventListener('click', async () => {
   try { await fetch(API_BASE + '/api/auth/logout', { method: 'POST', credentials: 'include' }); } catch (_) {}
   setToken(null);
+  document.getElementById('nav-dropdown')?.classList.add('hidden');
   showView('login');
 });
 
+// ---- Avatar dropdown toggle ----
+document.getElementById('btn-avatar')?.addEventListener('click', (e) => {
+  e.stopPropagation();
+  document.getElementById('nav-dropdown')?.classList.toggle('hidden');
+});
+document.addEventListener('click', (e) => {
+  const dd = document.getElementById('nav-dropdown');
+  if (dd && !dd.classList.contains('hidden') && !e.target.closest('.nav-user')) {
+    dd.classList.add('hidden');
+  }
+});
+
 async function init() {
   const token = getToken();
   if (!token) { showView('login'); return; }

templates/index.html

@@ -138,11 +138,17 @@
           <span>SatDetect</span>
         </div>
         <div class="nav-user">
-          <span class="user-badge" id="user-email"></span>
-          <button type="button" class="btn btn-ghost btn-sm" id="btn-logout">
-            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M9 21H5a2 2 0 01-2-2V5a2 2 0 012-2h4"/><polyline points="16 17 21 12 16 7"/><line x1="21" y1="12" x2="9" y2="12"/></svg>
-            Log out
+          <button type="button" class="nav-avatar" id="btn-avatar" aria-label="Account menu">
+            <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M20 21v-2a4 4 0 00-4-4H8a4 4 0 00-4 4v2"/><circle cx="12" cy="7" r="4"/></svg>
           </button>
+          <div class="nav-dropdown hidden" id="nav-dropdown">
+            <div class="nav-dropdown-email" id="user-email"></div>
+            <div class="nav-dropdown-divider"></div>
+            <button type="button" class="nav-dropdown-item" id="btn-logout">
+              <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M9 21H5a2 2 0 01-2-2V5a2 2 0 012-2h4"/><polyline points="16 17 21 12 16 7"/><line x1="21" y1="12" x2="9" y2="12"/></svg>
+              Log out
+            </button>
+          </div>
         </div>
       </nav>
 
@@ -282,6 +288,6 @@
     </div>
   </div>
 
-  <script src="/static/js/app.js?v=9"></script>
+  <script src="/static/js/app.js?v=10"></script>
 </body>
 </html>