Fix blank episode form: move all CSS to external static files

- Go html/template rejects <style> blocks and inline style attributes
  when template expressions are present in URL/CSS contexts
- Move all inline CSS to static/auth.css, static/episode.css,
  static/dashboard.css
- Serve static files from embedded FS via /static/ handler
- Fix missing </div> in episode form audio file group

main.go

@@ -15,6 +15,9 @@ import (
 //go:embed template/*.html
 var templateFS embed.FS
 
+//go:embed static/*
+var staticFS embed.FS
+
 func main() {
 	dbPath := os.Getenv("PODSTALK_DB")
 	if dbPath == "" {
@@ -81,6 +84,8 @@ func main() {
 
 	// Public uploaded files.
 	http.HandleFunc("/uploads/", epH.ServeUpload)
+	// Static files.
+	http.Handle("/static/", http.FileServer(http.FS(staticFS)))
 
 	port := envOrDefault("PORT", "8080")
 	addr := fmt.Sprintf(":%s", port)

static/auth.css

@@ -0,0 +1,7 @@
+body { max-width: 960px; margin: 0 auto; padding: 2rem 1rem; }
+.container { margin-top: 2rem; }
+.flash { padding: 0.75rem 1rem; margin-bottom: 1rem; border: 2px solid #000; }
+.flash-error { background: #ffcdd2; }
+.form-group { margin-bottom: 1rem; }
+.form-group label { display: block; margin-bottom: 0.25rem; font-weight: bold; }
+.form-actions { display: flex; gap: 0.5rem; margin-top: 1.5rem; }

static/dashboard.css

@@ -0,0 +1,20 @@
+body { max-width: 960px; margin: 0 auto; padding: 2rem 1rem; }
+.container { margin-top: 2rem; }
+.flash { padding: 0.75rem 1rem; margin-bottom: 1rem; border: 2px solid #000; }
+.flash-error { background: #ffcdd2; }
+.flash-success { background: #c8e6c9; }
+.hidden { display: none; }
+.episode-actions { display: flex; gap: 0.5rem; }
+.settings-section { margin-bottom: 2rem; padding-bottom: 1.5rem; border-bottom: 2px solid #ddd; }
+.settings-form { display: flex; gap: 1rem; align-items: flex-end; flex-wrap: wrap; }
+.settings-form .form-group { margin-bottom: 0; }
+.file-upload { position: relative; display: inline-block; }
+.file-upload input[type="file"] { position: absolute; opacity: 0; width: 100%; height: 100%; cursor: pointer; }
+.file-name { margin-left: 0.5rem; font-size: 0.85rem; color: #666; }
+.form-flex-1 { flex: 1; min-width: 200px; }
+.form-flex-slug { flex: 1; min-width: 160px; }
+.podcast-img-preview { margin-top: 1rem; }
+.podcast-img-preview img { max-width: 150px; max-height: 150px; border: 2px solid #000; }
+.rss-card { margin-bottom: 1.5rem; }
+.new-ep-row { margin-bottom: 1.5rem; }
+.ep-thumb { max-width: 48px; max-height: 48px; border: 1px solid #000; }

static/episode.css

@@ -0,0 +1,11 @@
+body { max-width: 960px; margin: 0 auto; padding: 2rem 1rem; }
+.container { margin-top: 2rem; }
+.flash { padding: 0.75rem 1rem; margin-bottom: 1rem; border: 2px solid #000; }
+.flash-error { background: #ffcdd2; }
+.form-group { margin-bottom: 1rem; }
+.form-group label { display: block; margin-bottom: 0.25rem; font-weight: bold; }
+.form-actions { display: flex; gap: 0.5rem; margin-top: 1.5rem; }
+.current-file { font-size: 0.85rem; color: #666; margin-top: 0.25rem; }
+.file-upload { position: relative; display: inline-block; }
+.file-upload input[type="file"] { position: absolute; opacity: 0; width: 100%; height: 100%; cursor: pointer; }
+.file-name { margin-left: 0.5rem; font-size: 0.85rem; color: #666; }

template/dashboard.html

@@ -5,28 +5,7 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Podstalk — Dashboard</title>
     <link rel="stylesheet" href="https://unpkg.com/neobrutalismcss@latest" />
-    <style>
+    <link rel="stylesheet" href="/static/dashboard.css" />
-        body { max-width: 960px; margin: 0 auto; padding: 2rem 1rem; }
-        .container { margin-top: 2rem; }
-        .flash { padding: 0.75rem 1rem; margin-bottom: 1rem; border: 2px solid #000; }
-        .flash-error { background: #ffcdd2; }
-        .flash-success { background: #c8e6c9; }
-        .hidden { display: none; }
-        .episode-actions { display: flex; gap: 0.5rem; }
-        .settings-section { margin-bottom: 2rem; padding-bottom: 1.5rem; border-bottom: 2px solid #ddd; }
-        .settings-form { display: flex; gap: 1rem; align-items: flex-end; flex-wrap: wrap; }
-        .settings-form .form-group { margin-bottom: 0; }
-        .file-upload { position: relative; display: inline-block; }
-        .file-upload input[type="file"] { position: absolute; opacity: 0; width: 100%; height: 100%; cursor: pointer; }
-        .file-name { margin-left: 0.5rem; font-size: 0.85rem; color: #666; }
-        .form-flex-1 { flex: 1; min-width: 200px; }
-        .form-flex-slug { flex: 1; min-width: 160px; }
-        .podcast-img-preview { margin-top: 1rem; }
-        .podcast-img-preview img { max-width: 150px; max-height: 150px; border: 2px solid #000; }
-        .rss-card { margin-bottom: 1.5rem; }
-        .new-ep-row { margin-bottom: 1.5rem; }
-        .ep-thumb { max-width: 48px; max-height: 48px; border: 1px solid #000; }
-    </style>
 </head>
 <body>
     <nav class="nb-navbar" role="navigation" aria-label="Main navigation">

template/episode_form.html

@@ -5,18 +5,7 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Podstalk — {{if .Editing}}Edit Episode{{else}}New Episode{{end}}</title>
     <link rel="stylesheet" href="https://unpkg.com/neobrutalismcss@latest" />
-    <style>
+    <link rel="stylesheet" href="/static/episode.css" />
-        body { max-width: 960px; margin: 0 auto; padding: 2rem 1rem; }
-        .container { margin-top: 2rem; }
-        .flash { padding: 0.75rem 1rem; margin-bottom: 1rem; border: 2px solid #000; }
-        .flash-error { background: #ffcdd2; }
-        .form-group { margin-bottom: 1rem; }
-        .form-group label { display: block; margin-bottom: 0.25rem; font-weight: bold; }
-        .form-actions { display: flex; gap: 0.5rem; margin-top: 1.5rem; }
-        .current-file { font-size: 0.85rem; color: #666; margin-top: 0.25rem; }
-        .file-upload { position: relative; display: inline-block; }
-        .file-upload input[type="file"] { position: absolute; opacity: 0; width: 100%; height: 100%; cursor: pointer; }
-        .file-name { margin-left: 0.5rem; font-size: 0.85rem; color: #666; }
 </head>
 <body>
     <nav class="nb-navbar" role="navigation" aria-label="Main navigation">
@@ -57,6 +46,7 @@
                     {{if .Episode.AudioPath}}Current: {{.Episode.AudioPath}}{{else}}No audio file uploaded.{{end}}
                 </div>
                 {{end}}
+            </div>
             <div class="nb-form-group">
                 <label for="image_file">Episode Image (optional)</label>
                 <div class="file-upload">

template/signin.html

@@ -5,15 +5,7 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Podstalk — Sign In</title>
     <link rel="stylesheet" href="https://unpkg.com/neobrutalismcss@latest" />
-    <style>
+    <link rel="stylesheet" href="/static/auth.css" />
-        body { max-width: 960px; margin: 0 auto; padding: 2rem 1rem; }
-        .container { margin-top: 2rem; }
-        .flash { padding: 0.75rem 1rem; margin-bottom: 1rem; border: 2px solid #000; }
-        .flash-error { background: #ffcdd2; }
-        .form-group { margin-bottom: 1rem; }
-        .form-group label { display: block; margin-bottom: 0.25rem; font-weight: bold; }
-        .form-actions { display: flex; gap: 0.5rem; margin-top: 1.5rem; }
-    </style>
 </head>
 <body>
     <nav class="nb-navbar" role="navigation" aria-label="Main navigation">

template/signup.html

@@ -5,15 +5,7 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Podstalk — Sign Up</title>
     <link rel="stylesheet" href="https://unpkg.com/neobrutalismcss@latest" />
-    <style>
+    <link rel="stylesheet" href="/static/auth.css" />
-        body { max-width: 960px; margin: 0 auto; padding: 2rem 1rem; }
-        .container { margin-top: 2rem; }
-        .flash { padding: 0.75rem 1rem; margin-bottom: 1rem; border: 2px solid #000; }
-        .flash-error { background: #ffcdd2; }
-        .form-group { margin-bottom: 1rem; }
-        .form-group label { display: block; margin-bottom: 0.25rem; font-weight: bold; }
-        .form-actions { display: flex; gap: 0.5rem; margin-top: 1.5rem; }
-    </style>
 </head>
 <body>
     <nav class="nb-navbar" role="navigation" aria-label="Main navigation">