diff --git a/internal/handlers/handlers.go b/internal/handlers/handlers.go
index b592438..364df0f 100644
--- a/internal/handlers/handlers.go
+++ b/internal/handlers/handlers.go
@@ -115,6 +115,10 @@ var basePage = template.Must(template.New("base").Parse(`
+
{{.Content}}
diff --git a/internal/templates/layout.html b/internal/templates/layout.html
index a951bd0..b7a1c00 100644
--- a/internal/templates/layout.html
+++ b/internal/templates/layout.html
@@ -13,6 +13,10 @@
+
{{template "content" .}}
diff --git a/static/style.css b/static/style.css
index e867918..d4bea3d 100644
--- a/static/style.css
+++ b/static/style.css
@@ -47,10 +47,53 @@ body {
-moz-osx-font-smoothing: grayscale;
}
+/* Top bar */
+.top-bar {
+ position: sticky;
+ top: 0;
+ z-index: 100;
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ padding: var(--spacing-sm) var(--spacing-lg);
+ padding-top: max(var(--spacing-sm), env(safe-area-inset-top));
+ background: var(--bg-secondary);
+ border-bottom: 1px solid var(--border);
+}
+
+.top-bar-title {
+ font-size: var(--font-base);
+ font-weight: 600;
+ color: var(--text-primary);
+}
+
+.refresh-btn {
+ background: none;
+ border: none;
+ color: var(--text-secondary);
+ font-size: 1.4rem;
+ padding: var(--spacing-xs) var(--spacing-sm);
+ cursor: pointer;
+ -webkit-tap-highlight-color: transparent;
+ line-height: 1;
+ border-radius: var(--radius-sm);
+ transition: color 0.15s ease, background 0.15s ease;
+}
+
+.refresh-btn:active {
+ color: var(--accent-blue);
+ background: var(--bg-tertiary);
+}
+
+.refresh-btn.htmx-request {
+ animation: spin 0.6s linear infinite;
+ pointer-events: none;
+}
+
/* Content area */
.content {
padding: var(--spacing-lg);
- padding-top: max(var(--spacing-lg), env(safe-area-inset-top));
+ padding-top: var(--spacing-lg);
max-width: 640px;
margin: 0 auto;
}