new paste tab: rework number box submenus (#157 )

Give the custom expiry and readable N times submenus a shared boxed container with proper padding, indent them under their parent option, and style the number inputs and unit select with palette vars, the existing radius scale, and the select chevron. No em dashes, no hard coded colors in new rules.
2026-09-10 09:02:16 -05:00
48 changed files with 1067 additions and 2030 deletions
@@ -1,7 +1,7 @@
 # Palette

 Palette is a fast, self-hosted pastebin. One Go binary, a SQLite database, and
-a web UI for sharing text and small files.
+a web UI for sharing text and small files

 > [!NOTE]
 > <table><tr><td>
@@ -10,27 +10,22 @@ a web UI for sharing text and small files.

 ## Features

- Text pastes and cans (multiple items in one share)
- File attachments (one file per paste, up to 25 MB)
+- Multiple files in one paste
 - Password protected pastes
- Expire after a specified time
+- Expir after a specified time
 - Burn after a number of views
 - Custom URLs
 - Syntax highlighting with language auto-detection (go-enry)
- Public paste listing with search, sort and pagination
- Cookie based saved pastes and settings
- Five base themes (midnight, smooth, pastel-lavender, pastel-peach, pastel-cloud), each with a dark and light variant
- Dark mode toggle in the topbar and settings, with a configurable default
- Polished code viewer: line-number gutter sized to the widest number and pinned during horizontal scroll, optional line wrap, jump-to-top/bottom buttons, and theme-aware scrollbars
+- Local cookie based submission history
+- Cookie based settings
+- Themes!

 ## Screenshots

 | | |
 |---|---|
-| ![Editor in midnight (dark)](https://git.archfox.org/poslop/palette/wiki/raw/palette-previews%2Fdesktop-editor-new.png) | ![Paste view in pastel-peach (light)](https://git.archfox.org/poslop/palette/wiki/raw/palette-previews%2Fdesktop-paste-pastel-peach-light.png) |
-| ![Public pastes list](https://git.archfox.org/poslop/palette/wiki/raw/palette-previews%2Fdesktop-public.png) | ![Settings and theme picker](https://git.archfox.org/poslop/palette/wiki/raw/palette-previews%2Fdesktop-settings-themes.png) |
-
-
+| ![Editor in midnight](https://git.archfox.org/poslop/palette/wiki/raw/palette-previews%2Fmidnight-new.png) | ![Paste view in pastel-peach](https://git.archfox.org/poslop/palette/wiki/raw/palette-previews%2Fpastel-peach-paste.png) |
+| ![History in pastel-lavender](https://git.archfox.org/poslop/palette/wiki/raw/palette-previews%2Fpastel-lavender-history.png) | ![Saved in pastel-cloud](https://git.archfox.org/poslop/palette/wiki/raw/palette-previews%2Fpastel-cloud-mine.png) |

 ## Get Started

@@ -66,14 +61,12 @@ go build -o palette ./cmd/palette
 | `PALETTE_ADDR` | `:8080` | Listen address |
 | `PALETTE_DB` | `palette.db` | SQLite database path |
 | `PALETTE_MAX_TEXT` | `5242880` | Max paste size in bytes (5 MB) |
-| `PALETTE_MAX_ITEM` | `26214400` | Max can item / file attachment size in bytes (25 MB) |
+| `PALETTE_MAX_ITEM` | `26214400` | Max can item size in bytes (25 MB) |
 | `PALETTE_ADMIN_KEY` | generated | Admin key; if unset a 32-char hex key is generated and persisted to `<db-dir>/admin-key` (0600) |
 | `PALETTE_DEFAULT_DARK` | dark on | Default dark mode for new visitors. Set `false`, `0`, or `off` to default to light mode. Visitors who toggle dark mode keep their choice in their browser. |
-| `PALETTE_UNLOCK_SECRET` | random per start | HMAC secret for password-unlock cookies. Set a fixed value to keep unlock sessions across restarts or across replicas. |
-| `PALETTE_TRUSTED_IP_HEADER` | unset | Name of a proxy-controlled client-IP header to key API rate limits on (e.g. `CF-Connecting-IP` when Cloudflare is the ingress; Cloudflare strips any client-supplied value). Unset: rate limits key on the peer address only, and all client-supplied IP headers (X-Forwarded-For, X-Real-Ip) are ignored. (#280) |

 An `/admin` page exists for runtime settings, protected by a key set at
-install (`PALETTE_ADMIN_KEY` env var) and resettable locally. See
+install (`PALETTE_ADMIN_KEY` env var) and resettable locally — see
 [API](https://git.archfox.org/poslop/palette/wiki/API) and the [design docs](https://git.archfox.org/poslop/palette/wiki/Home) in the wiki for details.

 ## API
@@ -102,4 +95,4 @@ data loss, or legal issues arising from use of the software. You use it
 at your own risk.

 If you run a modified version of Palette as a network service, the AGPL
-requires you to offer your modified source code to its users.
+requires you to offer your modified source code to its users.
@@ -32,16 +32,10 @@ services:
      # Default: 5242880 (5 MiB).
      # PALETTE_MAX_TEXT: "5242880"

-      # Max size in bytes of a single can item (file/text inside a can) or a
-      # paste file attachment.
+      # Max size in bytes of a single can item (file/text inside a can).
      # Default: 26214400 (25 MiB).
      # PALETTE_MAX_ITEM: "26214400"

-      # Default dark mode for new visitors. Unset = dark on; set to "false",
-      # "0" or "off" to default to light mode. Visitors who toggle dark mode
-      # keep their choice in their browser.
-      # PALETTE_DEFAULT_DARK: "false"
-
      # HMAC secret for password-unlock cookies. Default: random per start,
      # which logs out every unlocked browser session on restart. Set a fixed
      # secret (any random string) to keep unlock sessions across restarts,
@@ -306,64 +306,3 @@ func TestMultipartPasswordFieldAccepted(t *testing.T) {
 		t.Fatalf("paste should require password, got %d", rec2.Code)
 	}
 }
-
-// #281: /raw/{id} must stream the attachment blob for ALL attachment mimes,
-// not just raster images (the old isImageMime gate left non-image
-// attachments serving an empty body from row.Content).
-func TestRawStreamsNonImageAttachment(t *testing.T) {
-	s := testServer(t)
-	h := s.routes()
-
-	body := []byte("hello, this is a plain text attachment body")
-	rec, resp := multipartCreate(t, h, "notes.txt", body, nil)
-	if rec.Code != 201 {
-		t.Fatalf("create: %d %s", rec.Code, rec.Body.String())
-	}
-	if resp["attachment"] == nil {
-		t.Fatalf("no attachment in response: %v", resp)
-	}
-	id, _ := resp["id"].(string)
-
-	req := httptest.NewRequest("GET", "/raw/"+id, nil)
-	rec2 := httptest.NewRecorder()
-	h.ServeHTTP(rec2, req)
-	if rec2.Code != 200 {
-		t.Fatalf("raw: %d %s", rec2.Code, rec2.Body.String())
-	}
-	if got := rec2.Header().Get("Content-Type"); got != "text/plain; charset=utf-8" {
-		t.Fatalf("Content-Type = %q", got)
-	}
-	if got := rec2.Header().Get("X-Content-Type-Options"); got != "nosniff" {
-		t.Fatalf("nosniff = %q", got)
-	}
-	if !bytes.Equal(rec2.Body.Bytes(), body) {
-		t.Fatalf("raw bytes differ: got %d bytes want %d", rec2.Body.Len(), len(body))
-	}
-}
-
-// #281: active-content attachment types still get forced to text/plain on
-// /raw, same rule as the /f/ serving path (#34).
-func TestRawHtmlAttachmentServesAsPlainText(t *testing.T) {
-	s := testServer(t)
-	h := s.routes()
-
-	html := []byte("<html><body><script>alert(1)</script></body></html>")
-	rec, resp := multipartCreate(t, h, "page.html", html, nil)
-	if rec.Code != 201 {
-		t.Fatalf("create: %d %s", rec.Code, rec.Body.String())
-	}
-	id, _ := resp["id"].(string)
-
-	req := httptest.NewRequest("GET", "/raw/"+id, nil)
-	rec2 := httptest.NewRecorder()
-	h.ServeHTTP(rec2, req)
-	if rec2.Code != 200 {
-		t.Fatalf("raw: %d %s", rec2.Code, rec2.Body.String())
-	}
-	if got := rec2.Header().Get("Content-Type"); got != "text/plain; charset=utf-8" {
-		t.Fatalf("Content-Type = %q", got)
-	}
-	if !bytes.Equal(rec2.Body.Bytes(), html) {
-		t.Fatal("raw bytes differ from upload")
-	}
-}
@@ -1,57 +0,0 @@
-// clientIP extracts the client IP for rate-limit keying.
-//
-// Trust boundary (issue #280): the bucket key MUST NOT come from any header a
-// client can influence. The previous rightmost-X-Forwarded-For scheme (#85)
-// assumed Traefik appends the real client IP, but the deployed ingress does
-// not rewrite XFF, so a client rotating its own XFF value got a fresh bucket
-// per request and the limit was unenforceable (pentest H1: 6x201 across 8
-// rotating-XFF creates).
-//
-// Default: key on the actual peer address (RemoteAddr) only. Behind any
-// reverse proxy this is the proxy's address, so all clients share one bucket
-// per endpoint — coarse, but safe.
-//
-// Proxy-honoring mode: a deployment in front of a proxy that OVERWRITES (not
-// appends to) a client-IP header can set PALETTE_TRUSTED_IP_HEADER (e.g.
-// CF-Connecting-IP when Cloudflare is the ingress; Cloudflare strips any
-// client-supplied value). The header is honored ONLY when explicitly
-// configured at startup, and X-Forwarded-For / X-Real-Ip are never trusted.
-package api
-
-import (
-	"net"
-	"net/http"
-	"sync"
-)
-
-var (
-	trustedIPMu     sync.RWMutex
-	trustedIPHeader string // empty = never trust any client-IP header
-)
-
-// SetTrustedIPHeader configures the single proxy-controlled header whose
-// value may key rate-limit buckets. Called at startup; tests may reset it.
-func SetTrustedIPHeader(name string) {
-	trustedIPMu.Lock()
-	defer trustedIPMu.Unlock()
-	trustedIPHeader = name
-}
-
-func getTrustedIPHeader() string {
-	trustedIPMu.RLock()
-	defer trustedIPMu.RUnlock()
-	return trustedIPHeader
-}
-
-func clientIP(r *http.Request) string {
-	if name := getTrustedIPHeader(); name != "" {
-		if v := r.Header.Get(name); v != "" {
-			return v
-		}
-	}
-	host := r.RemoteAddr
-	if h, _, err := net.SplitHostPort(r.RemoteAddr); err == nil {
-		host = h
-	}
-	return host
-}
@@ -91,15 +91,7 @@ func TestCreatedBannerViaCookie(t *testing.T) {
 	if rec2.Code != 200 {
 		t.Fatalf("paste view: got %d", rec2.Code)
 	}
-	// #168: the created pill no longer prints the deletion token; the token
-	// still arrives via the one-time cookie flow (re-set on the view response).
-	var got bool
-	for _, c := range rec2.Result().Cookies() {
-		if c.Name == "tok_"+id && c.Value == tok {
-			got = true
-		}
-	}
-	if !got {
-		t.Error("created view did not re-set the deletion token cookie (#143 cookie flow broken)")
+	if !strings.Contains(rec2.Body.String(), tok) {
+		t.Error("created banner does not show the deletion token (#143 cookie flow broken)")
 	}
 }
@@ -29,7 +29,7 @@ func newTestServer138(t *testing.T) *httptest.ResponseRecorder {
 	globalSettingsFn = ss.get
 	t.Cleanup(func() { globalSettingsFn = nil })
 	a := &apiServer{store: st, cfg: cfg, ui: ui, settings: ss, adminKey: "test-admin-key"}
-	req := httptest.NewRequest("GET", "/public", nil)
+	req := httptest.NewRequest("GET", "/history", nil)
 	rec := httptest.NewRecorder()
 	a.routes().ServeHTTP(rec, req)
 	return rec
@@ -1,40 +0,0 @@
-package api
-
-import "testing"
-
-// #235: Type column. Text pastes show the language, attachment pastes show
-// the file extension (lowercase, no dot).
-func TestDisplayType(t *testing.T) {
-	lang := "python"
-	cases := []struct {
-		lang *string
-		att  string
-		want string
-	}{
-		{nil, "", "text"},
-		{&lang, "", "python"},
-		{&lang, "report.pdf", "pdf"},
-		{nil, "photo.PNG", "png"},
-		{&lang, "archive.tar.gz", "gz"},
-		{&lang, "noext", "python"},     // no extension: fall back to language
-		{&lang, ".hidden", "python"},   // dotfile: no extension
-		{&lang, "dir/name.txt", "txt"}, // path component only
-	}
-	for _, c := range cases {
-		if got := displayType(c.lang, c.att); got != c.want {
-			t.Errorf("displayType(%v, %q) = %q, want %q", c.lang, c.att, got, c.want)
-		}
-	}
-}
-
-func TestAttachmentExtName(t *testing.T) {
-	cases := map[string]string{
-		"a.txt": "txt", "A.PNG": "png", "noext": "", ".hidden": "",
-		"x.": "", "dir/b.md": "md", "": "",
-	}
-	for in, want := range cases {
-		if got := attachmentExtName(in); got != want {
-			t.Errorf("attachmentExtName(%q) = %q, want %q", in, got, want)
-		}
-	}
-}
@@ -299,27 +299,3 @@ func TestNotFound(t *testing.T) {
 		t.Fatalf("expected 404, got %d", rec.Code)
 	}
 }
-
-// #173: a missing paste ID on the UI route (/p/{id}, i.e. /{id} HTML view)
-// should render the main UI page with a friendly "Paste ID not found"
-// message, not a bare text 404. Status stays 404.
-func TestPasteViewNotFoundFriendly(t *testing.T) {
-	s := testServer(t)
-	h := s.routes()
-	req := httptest.NewRequest("GET", "/zzzzzz", nil)
-	rec := httptest.NewRecorder()
-	h.ServeHTTP(rec, req)
-	if rec.Code != http.StatusNotFound {
-		t.Fatalf("expected 404 status, got %d", rec.Code)
-	}
-	body := rec.Body.String()
-	if !strings.Contains(body, "Paste ID not found") {
-		t.Fatalf("expected friendly message in body, got: %.200s", body)
-	}
-	if !strings.Contains(body, "<nav>") {
-		t.Fatalf("expected main UI chrome in body")
-	}
-	if strings.Contains(body, "404 page not found") {
-		t.Fatalf("body still contains bare Go 404 text")
-	}
-}
@@ -58,7 +58,7 @@ func TestMineCreateListDelete(t *testing.T) {
 	a := &apiServer{store: st, cfg: cfg, ui: ui, settings: ss, adminKey: "test-admin-key"}
 	h := a.routes()

-	alice := viewerCookieFor(t, h, "/public")
+	alice := viewerCookieFor(t, h, "/history")
 	if alice == "" {
 		t.Fatal("no viewer cookie issued")
 	}
@@ -89,7 +89,7 @@ func TestMineCreateListDelete(t *testing.T) {
 	}

 	// a different browser's cookie does NOT see it
-	bob := viewerCookieFor(t, h, "/public")
+	bob := viewerCookieFor(t, h, "/history")
 	rec = doReq(t, h, "GET", "/api/mine", bob, "")
 	json.Unmarshal(rec.Body.Bytes(), &list)
 	if list.Total != 0 {
@@ -3,6 +3,7 @@ package api
 import (
 	"net/http"
 	"strconv"
+	"strings"
 	"sync"
 	"time"
 )
@@ -47,6 +48,35 @@ func (l *limiter) allow(key string, rate, burst float64) bool {
 	return true
 }

+// clientIP extracts the client IP for rate-limit keying (#85).
+//
+// Trust boundary: palette runs behind exactly ONE trusted reverse proxy
+// (Traefik in the k3s pod network). Traefik APPENDS the real client IP to
+// X-Forwarded-For, so the RIGHTMOST entry is the last value the trusted
+// proxy observed and is unspoofable by the client (a client-supplied fake
+// entry only lands on the LEFT and is ignored). This matches chi's
+// middleware.RealIP semantics for a single trusted proxy hop.
+//
+// Direct connections (no XFF header) fall back to RemoteAddr. Directly
+// reachable deployments must NOT expose the app to untrusted networks
+// without a proxy in front, or attackers could forge the rightmost entry.
+func clientIP(r *http.Request) string {
+	if xff := r.Header.Get("X-Forwarded-For"); xff != "" {
+		if i := strings.LastIndex(xff, ","); i >= 0 {
+			return strings.TrimSpace(xff[i+1:])
+		}
+		return strings.TrimSpace(xff)
+	}
+	if xr := r.Header.Get("X-Real-Ip"); xr != "" {
+		return strings.TrimSpace(xr)
+	}
+	host := r.RemoteAddr
+	if i := strings.LastIndex(host, ":"); i > 0 {
+		host = host[:i]
+	}
+	return host
+}
+
 var globalLimiter = newLimiter()

 // globalSettingsFn is set at startup; tests can point it at fixed settings.
@@ -166,11 +166,8 @@ func TestHighlightCode(t *testing.T) {
 	if plain != "&lt;b&gt;x&lt;/b&gt;" {
 		t.Fatalf("plain escaping wrong: %q", plain)
 	}
-	// #205: newline join preserved as the delimiter paste-lines.js splits on;
-	// per-line segments survive and the client joins with '' so no newline
-	// text node reaches the rendered DOM.
-	hl := lang.HighlightCode("a\nb\nc", "go")
-	if got := len(splitLines(hl)); got != 3 {
+	// line count preserved (gutter alignment)
+	if got := len(splitLines(lang.HighlightCode("a\nb\nc", "go"))); got != 3 {
 		t.Fatalf("want 3 lines, got %d", got)
 	}
 }
@@ -1,57 +1,85 @@
 package api

+// Issue #85: the rate limit key must use the rightmost X-Forwarded-For entry
+// (appended by the trusted Traefik proxy), never the raw/leftmost header
+// value a client can forge. A spoofed FIRST XFF entry must not bypass the
+// limit or rotate buckets.
+
 import (
-	"fmt"
+	"bytes"
 	"net/http/httptest"
 	"testing"
 )

-func TestClientIPUsesRemoteAddrNotXFF(t *testing.T) {
-	SetTrustedIPHeader("")
-	defer SetTrustedIPHeader("")
-	r := httptest.NewRequest("POST", "/api/pastes", nil)
-	r.RemoteAddr = "203.0.113.7:4432"
+func TestClientIPTakesRightmostXFF(t *testing.T) {
+	r := httptest.NewRequest("POST", "/", nil)
+	r.RemoteAddr = "10.42.0.7:51000" // trusted Traefik pod
 	r.Header.Set("X-Forwarded-For", "1.2.3.4, 1.2.3.5, 203.0.113.9")
+	if got := clientIP(r); got != "203.0.113.9" {
+		t.Fatalf("clientIP = %q, want rightmost 203.0.113.9", got)
+	}
+}
+
+func TestClientIPXRealIPFallback(t *testing.T) {
+	r := httptest.NewRequest("POST", "/", nil)
+	r.RemoteAddr = "10.42.0.7:51000"
 	r.Header.Set("X-Real-Ip", "203.0.113.10")
-	if got := clientIP(r); got != "203.0.113.7" {
-		t.Fatalf("clientIP = %q, want peer 203.0.113.7", got)
+	if got := clientIP(r); got != "203.0.113.10" {
+		t.Fatalf("clientIP = %q, want 203.0.113.10", got)
 	}
 }

-func TestClientIPTrustedHeaderOnlyWhenConfigured(t *testing.T) {
-	SetTrustedIPHeader("")
-	defer SetTrustedIPHeader("")
-	r := httptest.NewRequest("POST", "/api/pastes", nil)
-	r.RemoteAddr = "10.0.1.47:9999"
-	r.Header.Set("CF-Connecting-IP", "198.51.100.9")
-	if got := clientIP(r); got != "10.0.1.47" {
-		t.Fatalf("unconfigured: clientIP = %q, want peer 10.0.1.47", got)
-	}
-	SetTrustedIPHeader("CF-Connecting-IP")
-	if got := clientIP(r); got != "198.51.100.9" {
-		t.Fatalf("configured: clientIP = %q, want CF-Connecting-IP value", got)
+func TestClientIPDirectFallback(t *testing.T) {
+	r := httptest.NewRequest("POST", "/", nil)
+	r.RemoteAddr = "198.51.100.5:51000"
+	if got := clientIP(r); got != "198.51.100.5" {
+		t.Fatalf("clientIP = %q, want 198.51.100.5", got)
 	}
 }

-// Issue #280: rotating X-Forwarded-For must NOT reset the bucket. Pentest
-// repro was 8 creates with rotating XFF -> 6x201.
-func TestRotatingXFFDoesNotResetBucket(t *testing.T) {
-	globalLimiter = newLimiter()
-	defer SetTrustedIPHeader("")
-	SetTrustedIPHeader("")
-	s := defaultSettings(Config{}) // burst/limit defaults; any header values are ignored anyway
-	var allowed, limited int
-	for i := 0; i < 8; i++ {
-		r := httptest.NewRequest("POST", "/api/pastes", nil)
-		r.RemoteAddr = "198.51.100.1:5000"
-		r.Header.Set("X-Forwarded-For", fmt.Sprintf("9.9.9.%d", i))
-		if rateLimitCreate(r, s) {
-			allowed++
-		} else {
-			limited++
+// TestRateLimitSpoofedFirstXFFDoesNotBypass: an attacker rotating a fake
+// leftmost XFF entry stays limited on their real (rightmost) IP.
+func TestRateLimitSpoofedFirstXFFDoesNotBypass(t *testing.T) {
+	srv := newTestServer(t)
+	h := srv.routes()
+	for i := 0; i < 5; i++ {
+		req := httptest.NewRequest("POST", "/api/pastes", bytes.NewReader([]byte(`{"content":"hi"}`)))
+		req.RemoteAddr = "10.42.0.7:51000"
+		// each request spoofs a DIFFERENT leftmost entry
+		req.Header.Set("X-Forwarded-For", spoofN(i)+", 203.0.113.9")
+		rr := httptest.NewRecorder()
+		h.ServeHTTP(rr, req)
+		if rr.Code != 201 {
+			t.Fatalf("req %d: want 201, got %d", i, rr.Code)
 		}
 	}
-	if float64(allowed) != s.RateLimitBurst || limited != 8-int(s.RateLimitBurst) {
-		t.Fatalf("rotating XFF: allowed=%d limited=%d, want allowed=%v (burst), limited=%d", allowed, limited, s.RateLimitBurst, 8-int(s.RateLimitBurst))
+	// 6th request, still the same real IP, new spoofed prefix: must 429
+	req := httptest.NewRequest("POST", "/api/pastes", bytes.NewReader([]byte(`{"content":"hi"}`)))
+	req.RemoteAddr = "10.42.0.7:51000"
+	req.Header.Set("X-Forwarded-For", "9.9.9.9, 203.0.113.9")
+	rr := httptest.NewRecorder()
+	h.ServeHTTP(rr, req)
+	if rr.Code != 429 {
+		t.Fatalf("spoofed 6th req: want 429, got %d", rr.Code)
+	}
+}
+
+func spoofN(i int) string {
+	return "1.2.3." + string(rune('0'+i))
+}
+
+// Distinct real IPs must still get distinct buckets (no over-limiting).
+func TestRateLimitDistinctRightmostIPsIndependent(t *testing.T) {
+	srv := newTestServer(t)
+	h := srv.routes()
+	for _, ip := range []string{"203.0.113.20", "203.0.113.21"} {
+		req := httptest.NewRequest("POST", "/api/pastes", bytes.NewReader([]byte(`{"content":"hi"}`)))
+		req.RemoteAddr = "10.42.0.7:51000"
+		req.Header.Set("X-Forwarded-For", "6.6.6.6, "+ip)
+		rr := httptest.NewRecorder()
+		h.ServeHTTP(rr, req)
+		if rr.Code != 201 {
+			t.Fatalf("ip %s: want 201, got %d", ip, rr.Code)
+		}
 	}
 }
@@ -1,52 +0,0 @@
-package api
-
-// #256: renamed page routes; old URLs redirect.
-import (
-	"palette/internal/store"
-	"palette/internal/web"
-
-	"net/http"
-	"net/http/httptest"
-	"testing"
-)
-
-func TestRenamedPageRoutes(t *testing.T) {
-	globalLimiter = newLimiter() // fresh rate-limit buckets
-	st, err := store.OpenStore(":memory:")
-	if err != nil {
-		t.Fatal(err)
-	}
-	ui, err := web.New()
-	if err != nil {
-		t.Fatal(err)
-	}
-	cfg := Config{MaxTextBytes: 5 * 1024 * 1024}
-	ss := NewTestSettingsStore(t, cfg)
-	globalSettingsFn = ss.get
-	t.Cleanup(func() { globalSettingsFn = nil })
-	a := &apiServer{store: st, cfg: cfg, ui: ui, settings: ss, adminKey: "test-admin-key"}
-	h := a.routes()
-
-	// new routes render pages
-	for _, path := range []string{"/public", "/saved"} {
-		req := httptest.NewRequest("GET", path, nil)
-		rec := httptest.NewRecorder()
-		h.ServeHTTP(rec, req)
-		if rec.Code != http.StatusOK {
-			t.Fatalf("GET %s: %d, want 200", path, rec.Code)
-		}
-	}
-
-	// old routes redirect
-	for _, tc := range [][2]string{{"/history", "/public"}, {"/mine", "/saved"}, {"/", "/public"}} {
-		req := httptest.NewRequest("GET", tc[0], nil)
-		rec := httptest.NewRecorder()
-		h.ServeHTTP(rec, req)
-		if rec.Code != http.StatusMovedPermanently && rec.Code != http.StatusFound {
-			t.Fatalf("GET %s: %d, want redirect", tc[0], rec.Code)
-		}
-		if loc := rec.Header().Get("Location"); loc != tc[1] {
-			t.Fatalf("GET %s redirects to %s, want %s", tc[0], loc, tc[1])
-		}
-	}
-}
@@ -28,10 +28,6 @@ type Config struct {
 	DBPath       string
 	MaxTextBytes int64
 	MaxItemBytes int64
-	// TrustedIPHeader optionally names a proxy-controlled client-IP header
-	// (e.g. CF-Connecting-IP behind Cloudflare) to key rate limits on. Empty
-	// (default) keys on the peer address only. See clientip.go (#280).
-	TrustedIPHeader string
 }

 type apiServer struct {
@@ -43,7 +39,6 @@ type apiServer struct {
 }

 func NewServer(st *store.Store, cfg Config, ui *web.UI, ss *settingsStore, adminKey string) *apiServer {
-	SetTrustedIPHeader(cfg.TrustedIPHeader) // #280
 	return &apiServer{store: st, cfg: cfg, ui: ui, settings: ss, adminKey: adminKey}
 }

@@ -123,26 +118,20 @@ func (a *apiServer) routes() http.Handler {
 	r.Get("/raw/{id}", a.handleRaw)

 	// web pages
-	r.Get("/", http.RedirectHandler("/public", http.StatusFound).ServeHTTP)
+	r.Get("/", http.RedirectHandler("/history", http.StatusFound).ServeHTTP)
 	r.Get("/new", a.ui.Handlers().HandleNewPage)
-	r.Get("/public", a.ui.Handlers().HandleHistoryPage)
-	r.Get("/saved", a.ui.Handlers().HandleMinePage)
+	r.Get("/history", a.ui.Handlers().HandleHistoryPage)
 	r.Get("/settings", a.ui.Handlers().HandleSettingsPage)
-	// #256: old URLs redirect to the renamed pages
-	r.Get("/history", http.RedirectHandler("/public", http.StatusMovedPermanently).ServeHTTP)
-	r.Get("/mine", http.RedirectHandler("/saved", http.StatusMovedPermanently).ServeHTTP)
+	r.Get("/mine", a.ui.Handlers().HandleMinePage)
 	r.Handle("/static/*", a.ui.StaticHandler())
 	r.Get("/unlock/{id}", a.handlePasteView)
 	r.Post("/unlock/{id}", a.handlePasteView)
 	r.Get("/{id}", a.handlePasteView)
 	r.Post("/{id}", a.handlePasteView)

-// #173: missing paste URLs render the main UI with a friendly not-found
-// message instead of a bare JSON 404. Known routes (above) handle real pages;
-// anything else is a nonexistent paste ID or typo.
-r.NotFound(func(w http.ResponseWriter, r *http.Request) {
-	a.webHandlers().HandleNotFoundPage(w, r)
-})
+	r.NotFound(func(w http.ResponseWriter, r *http.Request) {
+		writeErr(w, 404, "not found")
+	})
 	return r
 }

@@ -323,26 +312,11 @@ func (a *apiServer) handleGetPaste(w http.ResponseWriter, r *http.Request) {
 	writeJSON(w, 200, map[string]any{
 		"id": row.ID, "content": row.Content, "content_type": row.ContentType,
 		"language": store.NullStrPtr(row.Language), "title": store.NullStrPtr(row.Title), "created_at": row.CreatedAt,
-		"type":     a.pasteTypeLabel(row),
 		"view_count": row.ViewCount, "visibility": row.Visibility,
 		"reads_remaining": rem,
 	})
 }

-// pasteTypeLabel computes the Type value for a single paste (#235): file
-// extension for attachment pastes, else the stored language, else "text".
-func (a *apiServer) pasteTypeLabel(row *store.PasteRow) string {
-	if att, err := a.store.GetAttachmentForPaste(row.ID); err == nil && att != nil {
-		if ext := attachmentExtName(att.Filename); ext != "" {
-			return ext
-		}
-	}
-	if !row.Language.Valid || row.Language.String == "" {
-		return "text"
-	}
-	return row.Language.String
-}
-
 func (a *apiServer) handleDeletePaste(w http.ResponseWriter, r *http.Request) {
 	id := chi.URLParam(r, "id")
 	row, err := a.store.GetPaste(id)
@@ -399,33 +373,6 @@ func (a *apiServer) deletionAuthorized(r *http.Request, row *store.PasteRow) boo
 		row.ViewerID.String != "" && row.ViewerID.String == vid
 }

-// displayType returns the Type-column value for a list row (#235): the file
-// extension for attachment pastes, otherwise the detected language (default
-// "text").
-func displayType(lang *string, attFilename string) string {
-	if ext := attachmentExtName(attFilename); ext != "" {
-		return ext
-	}
-	if lang == nil || *lang == "" {
-		return "text"
-	}
-	return *lang
-}
-
-// attachmentExtName returns the lowercase extension (without dot) of a
-// filename, or "" when there is none.
-func attachmentExtName(filename string) string {
-	name := filename
-	if i := strings.LastIndexByte(name, '/'); i >= 0 {
-		name = name[i+1:]
-	}
-	i := strings.LastIndexByte(name, '.')
-	if i <= 0 || i == len(name)-1 {
-		return ""
-	}
-	return strings.ToLower(name[i+1:])
-}
-
 // handleListMine serves /api/mine: pastes created from this browser (#37).
 func (a *apiServer) handleListMine(w http.ResponseWriter, r *http.Request) {
 	vid := currentViewerID(r)
@@ -444,7 +391,7 @@ func (a *apiServer) handleListMine(w http.ResponseWriter, r *http.Request) {
 	for _, row := range rows {
 		lang, title := store.NullStrPtr(row.Language), store.NullStrPtr(row.Title)
 		items = append(items, map[string]any{
-			"id": row.ID, "title": title, "language": lang, "type": displayType(lang, row.AttFilename),
+			"id": row.ID, "title": title, "language": lang,
 			"created_at": row.CreatedAt, "view_count": row.ViewCount, "size": row.Size,
 			"custom_slug": store.NullStrPtr(row.CustomSlug), "visibility": row.Visibility,
 			"is_can": row.IsCan,
@@ -465,7 +412,7 @@ func (a *apiServer) handleListPublic(w http.ResponseWriter, r *http.Request) {
 	for _, row := range rows {
 		lang, title := store.NullStrPtr(row.Language), store.NullStrPtr(row.Title)
 		items = append(items, map[string]any{
-			"id": row.ID, "title": title, "language": lang, "type": displayType(lang, row.AttFilename),
+			"id": row.ID, "title": title, "language": lang,
 			"created_at": row.CreatedAt, "view_count": row.ViewCount, "size": row.Size,
 			"custom_slug": store.NullStrPtr(row.CustomSlug),
 			"is_can":      row.IsCan,
@@ -501,25 +448,6 @@ func (a *apiServer) handleRaw(w http.ResponseWriter, r *http.Request) {
 		http.Error(w, "not found", 404)
 		return
 	}
-	// #221: raw view of a paste backed by an attachment serves the stored
-	// blob bytes with the sniffed mime, not the (empty) text content — for
-	// ALL attachment mimes (#281); /raw/{id} is the raw fetch for the file
-	// too. serveContentType still forces active-content types (html, svg,
-	// xml) to text/plain per the #34 rule below.
-	if att, err := a.store.GetAttachmentForPaste(row.ID); err == nil && att != nil {
-		blobs := a.store.Blobs()
-		if blobs != nil {
-			if blob, err := blobs.Get(row.ID + "/" + att.SHA256); err == nil {
-				defer blob.Close()
-				a.store.IncrementViews(row.ID, "", 0) // raw views always count (#49/#95)
-				w.Header().Set("Content-Type", serveContentType(att.Mime))
-				w.Header().Set("X-Content-Type-Options", "nosniff")
-				w.Header().Set("Content-Length", fmt.Sprintf("%d", att.Size))
-				http.ServeContent(w, r, "", time.Unix(att.CreatedAt, 0), blob)
-				return
-			}
-		}
-	}
 	// #34: content_type is attacker-controlled via the create API. Serving it
 	// verbatim let a paste be stored with text/html (or image/svg+xml) and
 	// render as active content on this origin when fetched from /raw —
@@ -146,9 +146,5 @@ func HighlightCode(content, langID string) string {
 	for i, line := range lines {
 		out[i] = highlightLine(line, h, langID)
 	}
-	// Note: lines are joined with "\n" on purpose — paste-lines.js splits on
-	// the newline to build its per-line .codeline blocks, then joins those
-	// with "" and strips whitespace-only text nodes (#205), so no newline
-	// text node ever reaches the rendered DOM.
 	return strings.Join(out, "\n")
 }
@@ -26,10 +26,7 @@ type Attachment struct {
 	SizeHuman string `json:"-"` // template-only: human-readable size
 }

-// MaxFilenameLen caps stored attachment filenames (bytes) to bound DB
-// rows and Content-Disposition echoes. 128 keeps names readable while
-// stopping filename-bloat abuse; longer names truncate.
-const MaxFilenameLen = 128
+const MaxFilenameLen = 255

 // ErrFileTooLarge is returned when an attachment exceeds the per-file cap.
 var ErrFileTooLarge = errors.New("file too large")
@@ -105,9 +105,4 @@ func TestSanitizeFilename(t *testing.T) {
 	if got := SanitizeFilename(long); len(got) != MaxFilenameLen {
 		t.Errorf("long name len = %d want %d", len(got), MaxFilenameLen)
 	}
-	// issue #248: a 250-char multipart filename must truncate to the cap
-	repro := strings.Repeat("b", 246) + ".txt"
-	if got := SanitizeFilename(repro); len(got) != MaxFilenameLen {
-		t.Errorf("repro name len = %d want %d", len(got), MaxFilenameLen)
-	}
 }
@@ -13,7 +13,6 @@ var reservedSlugs = map[string]bool{
 	"api": true, "raw": true, "can": true, "cans": true, "public": true,
 	"history": true, "static": true, "assets": true, "favicon.ico": true,
 	"new": true, "login": true, "logout": true, "admin": true, "settings": true,
-	"mine": true, "saved": true, "unlock": true, "guess": true, "f": true,
 }

 var ErrInvalidSlug = errors.New("custom slug must be 1-64 chars: letters, digits, dash, underscore; must start with letter or digit")
@@ -63,7 +63,6 @@ type PasteRow struct {
 	DeletionToken sql.NullString
 	ViewerID      sql.NullString
 	IsCan         bool // set on list rows that are cans (#4)
-	AttFilename   string // attachment filename when the paste is a file paste (#235); empty otherwise
 }

 type CanRow struct {
@@ -305,12 +304,11 @@ func (s *Store) GetPaste(idOrSlug string) (*PasteRow, error) {
 // listed, and password-protected pastes are excluded at the query level
 // (#65) so their metadata (title, slug, existence) never leaks.
 func (s *Store) ListPublic(limit, offset int) ([]PasteRow, int, error) {
-	rows, err := s.db.Query(`SELECT p.id, p.custom_slug, p.content_type, p.language, p.title, p.visibility, p.created_at, p.view_count, LENGTH(p.content), 0, COALESCE(a.filename, '')
-		FROM pastes p
-		LEFT JOIN attachments a ON a.paste_id = p.id
-		WHERE p.visibility='public' AND p.deleted_at IS NULL AND p.can_id IS NULL AND p.password_hash IS NULL AND (p.expires_at IS NULL OR p.expires_at > ?)
+	rows, err := s.db.Query(`SELECT id, custom_slug, content_type, language, title, visibility, created_at, view_count, LENGTH(content), 0
+		FROM pastes
+		WHERE visibility='public' AND deleted_at IS NULL AND can_id IS NULL AND password_hash IS NULL AND (expires_at IS NULL OR expires_at > ?)
 		UNION ALL
-		SELECT id, NULL, 'text/plain', NULL, title, visibility, created_at, 0, 0, 1, ''
+		SELECT id, NULL, 'text/plain', NULL, title, visibility, created_at, 0, 0, 1
 		FROM paste_cans
 		WHERE visibility='public' AND deleted_at IS NULL AND (expires_at IS NULL OR expires_at > ?)
 		ORDER BY created_at DESC LIMIT ? OFFSET ?`, time.Now().Unix(), time.Now().Unix(), limit, offset)
@@ -323,7 +321,7 @@ func (s *Store) ListPublic(limit, offset int) ([]PasteRow, int, error) {
 		var r PasteRow
 		var cs, lang, title sql.NullString
 		var isCan int
-		if err := rows.Scan(&r.ID, &cs, &r.ContentType, &lang, &title, &r.Visibility, &r.CreatedAt, &r.ViewCount, &r.Size, &isCan, &r.AttFilename); err != nil {
+		if err := rows.Scan(&r.ID, &cs, &r.ContentType, &lang, &title, &r.Visibility, &r.CreatedAt, &r.ViewCount, &r.Size, &isCan); err != nil {
 			return nil, 0, err
 		}
 		r.CustomSlug = cs
@@ -341,12 +339,11 @@ func (s *Store) ListPublic(limit, offset int) ([]PasteRow, int, error) {

 // ListMine lists pastes created from the given viewer id (browser cookie), newest first.
 func (s *Store) ListMine(viewerID string, limit, offset int) ([]PasteRow, int, error) {
-	rows, err := s.db.Query(`SELECT p.id, p.custom_slug, p.language, p.title, p.visibility, p.created_at, p.view_count, LENGTH(p.content), 0, COALESCE(a.filename, '')
-		FROM pastes p
-		LEFT JOIN attachments a ON a.paste_id = p.id
-		WHERE p.viewer_id = ? AND p.deleted_at IS NULL AND p.can_id IS NULL AND (p.expires_at IS NULL OR p.expires_at > ?)
+	rows, err := s.db.Query(`SELECT id, custom_slug, language, title, visibility, created_at, view_count, LENGTH(content), 0
+		FROM pastes
+		WHERE viewer_id = ? AND deleted_at IS NULL AND can_id IS NULL AND (expires_at IS NULL OR expires_at > ?)
 		UNION ALL
-		SELECT id, NULL, NULL, title, visibility, created_at, 0, 0, 1, ''
+		SELECT id, NULL, NULL, title, visibility, created_at, 0, 0, 1
 		FROM paste_cans
 		WHERE viewer_id = ? AND deleted_at IS NULL AND (expires_at IS NULL OR expires_at > ?)
 		ORDER BY created_at DESC LIMIT ? OFFSET ?`, viewerID, time.Now().Unix(), viewerID, time.Now().Unix(), limit, offset)
@@ -359,7 +356,7 @@ func (s *Store) ListMine(viewerID string, limit, offset int) ([]PasteRow, int, e
 		var r PasteRow
 		var cs, lang, title sql.NullString
 		var isCan int
-		if err := rows.Scan(&r.ID, &cs, &lang, &title, &r.Visibility, &r.CreatedAt, &r.ViewCount, &r.Size, &isCan, &r.AttFilename); err != nil {
+		if err := rows.Scan(&r.ID, &cs, &lang, &title, &r.Visibility, &r.CreatedAt, &r.ViewCount, &r.Size, &isCan); err != nil {
 			return nil, 0, err
 		}
 		r.CustomSlug, r.Language, r.Title = cs, lang, title
@@ -1,56 +0,0 @@
-package web
-
-import (
-	"embed"
-	"io/fs"
-	"regexp"
-	"strings"
-	"testing"
-)
-
-// #139 regression guards: with CSP script-src/style-src 'self' (no
-// 'unsafe-inline'), the templates must not carry inline <script> blocks or
-// style="" attributes, and the external scripts referenced must exist.
-func TestNoInlineScripts(t *testing.T) {
-	entries, err := fs.ReadDir(tmplFS, "templates")
-	if err != nil {
-		t.Fatal(err)
-	}
-	re := regexp.MustCompile(`(?s)<script[^>]*>.*?</script>`)
-	srcOnly := regexp.MustCompile(`<script[^>]+src=`)
-	for _, e := range entries {
-		b, err := fs.ReadFile(tmplFS, "templates/"+e.Name())
-		if err != nil {
-			t.Fatal(err)
-		}
-		for _, m := range re.FindAll(b, -1) {
-			if srcOnly.Match(m) {
-				continue // external script tag with src: fine
-			}
-			t.Errorf("%s: inline <script> block found (CSP #139): %q", e.Name(), string(m[:60]))
-		}
-		if strings.Contains(string(b), " onclick=") || strings.Contains(string(b), "onload=") {
-			t.Errorf("%s: inline event handler attribute found (CSP #139)", e.Name())
-		}
-		if strings.Contains(string(b), "style=\"") {
-			t.Errorf("%s: inline style attribute found (CSP #139)", e.Name())
-		}
-	}
-}
-
-func TestReferencedStaticScriptsExist(t *testing.T) {
-	entries, _ := fs.ReadDir(tmplFS, "templates")
-	var staticFiles embed.FS = staticFS
-	for _, e := range entries {
-		b, err := fs.ReadFile(tmplFS, "templates/"+e.Name())
-		if err != nil {
-			t.Fatal(err)
-		}
-		for _, m := range regexp.MustCompile(`<script src="/static/([^"]+)"`).FindAllSubmatch(b, -1) {
-			name := string(m[1])
-			if _, err := fs.ReadFile(staticFiles, "static/"+name); err != nil {
-				t.Errorf("%s references /static/%s: %v", e.Name(), name, err)
-			}
-		}
-	}
-}
@@ -16,7 +16,7 @@ func TestSecurityHeaders(t *testing.T) {
 	h := SecurityHeaders(pages)
 	rec := httptest.NewRecorder()
 	h.ServeHTTP(rec, httptest.NewRequest("GET", "/", nil))
-	wantCSP := "default-src 'self'; script-src 'self'; style-src 'self'; img-src 'self' data:; frame-ancestors 'none'"
+	wantCSP := "default-src 'self'; script-src 'self' 'unsafe-inline'; style-src 'self' 'unsafe-inline'; img-src 'self' data:; frame-ancestors 'none'"
 	if got := rec.Header().Get("Content-Security-Policy"); got != wantCSP {
 		t.Errorf("CSP = %q, want %q", got, wantCSP)
 	}
@@ -1,74 +0,0 @@
-// #99/#139: admin lock + settings panel. Key lives in sessionStorage for this visit only.
-(function () {
-  var KEY = 'palette_admin_key';
-  var keyInput = document.getElementById('admin-key');
-  var status = document.getElementById('admin-key-status');
-  var panel = document.getElementById('admin-panel');
-
-  function key() { return sessionStorage.getItem(KEY) || ''; }
-
-  function api(path, opts) {
-    opts = opts || {};
-    // allow callers to override the key header (e.g. validating a typed key, #99)
-    opts.headers = Object.assign({ 'X-Admin-Key': key() }, opts.headers || {});
-    if (opts.body) opts.headers['Content-Type'] = 'application/json';
-    return fetch(path, opts);
-  }
-
-  function loadSettings() {
-    api('/admin/api/settings').then(function (r) {
-      if (r.status !== 200) { showLock(); return; }
-      return r.json();
-    }).then(function (s) {
-      if (!s) return;
-      document.getElementById('rl-burst').value = s.rate_limit_burst;
-      document.getElementById('rl-refill').value = s.rate_limit_per_minute;
-      document.getElementById('max-content').value = s.max_content_bytes;
-      document.getElementById('default-expiry').value = s.default_expiry;
-      document.getElementById('slug-days').value = s.custom_slug_reservation_days;
-      document.getElementById('burn-window').value = s.burn_viewer_window_minutes;
-      panel.classList.remove('hidden');
-    });
-  }
-
-  function showLock() {
-    panel.classList.add('hidden');
-    sessionStorage.removeItem(KEY);
-  }
-
-  document.getElementById('admin-key-form').addEventListener('submit', function (e) {
-    e.preventDefault();
-    // #99: don't persist the key until the server accepts it
-    api('/admin/api/settings', { headers: { 'X-Admin-Key': keyInput.value } }).then(function (r) {
-      if (r.status === 200) {
-        sessionStorage.setItem(KEY, keyInput.value);
-        status.textContent = '✓';
-        keyInput.value = '';
-        loadSettings();
-      } else {
-        status.textContent = 'invalid key';
-        showLock();
-      }
-    });
-  });
-
-  document.getElementById('admin-settings-form').addEventListener('submit', function (e) {
-    e.preventDefault();
-    var body = {
-      rate_limit_burst: parseFloat(document.getElementById('rl-burst').value),
-      rate_limit_per_minute: parseFloat(document.getElementById('rl-refill').value),
-      max_content_bytes: parseInt(document.getElementById('max-content').value, 10),
-      default_expiry: document.getElementById('default-expiry').value,
-      custom_slug_reservation_days: parseInt(document.getElementById('slug-days').value, 10),
-      burn_viewer_window_minutes: parseInt(document.getElementById('burn-window').value, 10)
-    };
-    api('/admin/api/settings', { method: 'POST', body: JSON.stringify(body) }).then(function (r) {
-      document.getElementById('admin-save-status').textContent = r.status === 200 ? 'saved' : 'error';
-      if (r.status !== 200) showLock();
-    });
-  });
-
-  // #112: always show the lock on fresh load — do not auto-restore the
-  // panel from a stale sessionStorage key. The key is only written after a
-  // successful unlock (above) so in-page actions still work within this visit.
-})();
@@ -150,7 +150,8 @@ body {
 }
 .editor-head-title { flex: 1; min-width: 0; }
 .editor-head-settings { flex: 0 0 fit-content; }
-.editor-head-title:focus-within { border-color: var(--accent); }
+.editor-head-title:focus-within,
+.editor-head-settings:focus-within { border-color: var(--accent); }
 .editor-head input {
  border: none; outline: none; background: transparent; color: var(--fg); font: inherit; font-size: 23.2px; flex: 1;
 }
@@ -197,17 +198,11 @@ body {
  border: 1px solid var(--border); border-radius: var(--radius); padding: 5px 8px; background: var(--bg);
  color: var(--fg); font: inherit; font-size: 21.6px; width: 130px;
 }
-/* #168: compact side notification pill (paste-created feedback) */
-.created-pill {
-  position: fixed; right: 12px; bottom: 12px; z-index: 200;
-  background: var(--surface-2); color: var(--ok); border: 1px solid var(--ok);
-  border-radius: var(--radius-sm); padding: 2px 8px; font-size: 11.5px;
-  opacity: 0; pointer-events: none; transform: translateY(6px);
-  transition: opacity .25s ease, transform .25s ease;
-  box-shadow: 0 4px 16px rgba(0,0,0,.25);
+.created-banner {
+  display: none; padding: 10px 16px; font-size: 22.4px; background: var(--surface-2);
+  border-bottom: 1px solid var(--border); word-break: break-all;
 }
-.created-pill.show { opacity: 1; transform: translateY(0); }
-@media (max-width: 640px) { .created-pill { right: 12px; bottom: 12px; } }
+.created-banner a { color: var(--accent); }

 /* paste view */
 .meta-bar { display: flex; align-items: center; gap: 12px; padding: 12px 18px; flex-wrap: wrap; }
@@ -215,18 +210,15 @@ body {
 .slug { font-family: var(--font-mono); font-size: 21.6px; color: var(--muted-fg); background: var(--surface-2); padding: 3px 9px; border-radius: var(--radius-sm); }
 .tag { font-size: 19.8px; color: var(--muted-fg); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 2px 9px; }
 .paste-title-bar { display: flex; align-items: center; gap: 12px; padding: 12px 18px; flex-wrap: wrap; }
-.paste-title-bar h1 { font-size: 29.2px; font-weight: 600; margin: 0; word-break: normal; overflow-wrap: anywhere; }
-/* #222: .float already draws the border + radius and clips corners; the pill's own
-   tighter border curve was getting clipped thin at the corners. Let .float be the
-   only border/paint surface for the details pill (collapsed and expanded). */
-.stats-pill { border: 0; border-radius: 0; overflow: hidden; }
-.stats-head { display: flex; align-items: center; gap: 16px; width: 100%; background: none; border: 0; border-bottom: 1px solid var(--border); color: var(--muted-fg); font: inherit; font-size: 21.6px; padding: 14px 18px; cursor: pointer; text-align: left; }
+.paste-title-bar h1 { font-size: 29.2px; font-weight: 600; margin: 0; }
+.stats-pill { border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; }
+.stats-head { display: flex; align-items: center; gap: 16px; width: 100%; background: none; border: 0; color: var(--muted-fg); font: inherit; font-size: 21.6px; padding: 14px 18px; cursor: pointer; text-align: left; }
 .stats-head:hover { color: var(--fg); background: var(--surface-2); }
 .stats-chev { width: 18px; height: 18px; flex: none; transition: transform 0.15s ease; }
 .stats-pill.open .stats-chev { transform: rotate(180deg); }
 .stats-summary { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; letter-spacing: .01em; }
@media (max-width: 640px) { .stats-summary { white-space: normal; word-break: break-word; } }
-.stats-body { /* #169: divider under the dropdown title is the head's own persistent border-bottom */ }
+.stats-body { border-top: 1px solid var(--border); }
 .stats-grid { display: grid; grid-template-columns: max-content 1fr; gap: 6px 18px; padding: 12px 16px; font-size: 20.7px; }
 .stats-k { color: var(--muted-fg); }
 .stats-v { color: var(--fg); word-break: break-all; }
@@ -256,12 +248,6 @@ body {
 .settings-section-title { color: var(--fg); font-size: 24px; margin-bottom: 6px; }
 /* theme switcher cards (#100) */
 .theme-grid { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 14px; }
-
-/* #161: more breathing room between settings sections */
-/* #207 r2: owner wants the toggle left aligned (revert #197 centering) */
-#settings-dark-toggle { margin-bottom: 20px; }
-.settings-body h3 { margin-top: 28px; }
-.settings-body .theme-grid { margin-bottom: 8px; }
 .theme-card {
  display: flex; flex-direction: column; gap: 10px; align-items: flex-start;
  padding: 14px 16px; min-width: 180px;
@@ -275,18 +261,10 @@ body {
 .theme-name { font-weight: 600; }
 .iconbtn:hover { color: var(--fg); border-color: var(--muted); }
 /* #130: line wrap toggle, accent when active like other toggles */
-/* #166: wrap toggle must show its state: neutral when off, accent when on.
-   The .btn base is accent filled, which made on and off look identical. */
-.btn-icon.wrap-toggle { background: var(--surface-2); color: var(--muted-fg); font-size: 21.6px; font-weight: inherit; border: 1px solid var(--border); }
-.btn-icon.wrap-toggle:hover { color: var(--fg); border-color: var(--muted-fg); filter: none; }
 .iconbtn.wrap-toggle[aria-pressed="true"],
 .btn-icon.wrap-toggle[aria-pressed="true"] { background: var(--accent); color: var(--bg); border-color: var(--accent); }
 /* #152: wrap ON must break long unbroken tokens mid-word and allow no horizontal scrolling */
 html[data-wrap] .codebody { white-space: pre-wrap; overflow-wrap: anywhere; word-break: break-all; overflow-x: hidden; }
-/* #167: overflow:hidden zeroes the flex auto-minimum, so the codebody must
-   be told to fill the space left of the gutter or it collapses and the
-   gutter (flex-shrink:0) consumes the whole row */
-html[data-wrap] .code .codebody { flex: 1 1 auto; min-width: 0; }
 html[data-wrap] .editor { white-space: pre-wrap; overflow-wrap: anywhere; word-break: break-all; overflow-x: hidden; }
 /* #152: with wrap on nothing may scroll horizontally, including the code container and mobile floats */
 html[data-wrap] .code { overflow-x: hidden; }
@@ -299,33 +277,12 @@ html[data-wrap] .float { overflow-x: hidden; }
 .code-head .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); }
 .code {
  font-family: var(--font-mono); font-size: var(--code-fs); line-height: var(--code-lh);
-  padding: 14px 0; display: flex; overflow-x: hidden;
+  padding: 14px 0; display: flex; overflow-x: auto;
 }
-/* #261: horizontal scroll must live on the codebody, not the .code flex
-   container — a container-level scroll takes the gutter with it when the
-   user scrolls long lines. The gutter sits OUTSIDE the scroll container and
-   stays visible; the codebody shrinks to the remaining space and scrolls
-   (min-width: 0 lets it shrink below its content width inside the flex row). */
-.code .codebody { flex: 1 1 auto; min-width: 0; overflow-x: auto; }
-/* #167: the gutter must not drive the flex layout — its content width
-   (row count × number width) shrinks the code column, which re-wraps lines,
-   which grows the gutter: a feedback loop. Pin the gutter with a fixed
-   basis, take its width out of the negotiation, and let the codebody take
-   the rest. */
-.code .gutter { flex: 0 0 auto; width: 3ch; min-width: 3ch; overflow: visible; }
 .code .gutter { flex-shrink: 0; }
 /* gutter/code share line metrics; the editor gutter keeps its own padding (#50) */
 .code .gutter { padding-top: 0; padding-bottom: 0; }
-.codebody { padding: 0 18px; white-space: pre; overflow-x: auto; }
-/* #167: each logical line is its own block so offsetTop identifies its first visual row */
-.codeline { display: block; }
-/* #167: gutter number spans must stack one per visual row (wrap on).
-   #274: the /new editor gutter uses the same .gutline blocks when its own
-   wrap toggle is on, so scope the rule to any gutter, not just .code. */
-.code .gutter .gutline, .editor-wrap .gutter .gutline { display: block; }
-/* #194: codeline blocks are adjacent (no '\n' text between them), so an
-   empty block (blank source line) needs its own line box to stay one row */
-.codeline:empty::before { content: "\200B"; }
+.codebody { padding: 0 18px; white-space: pre; }
 /* syntax highlight tokens (#1) */
 .tok-kw { color: #c792ea; }
 .tok-str { color: #a5e075; }
@@ -379,9 +336,6 @@ td a.slug.paste-name { background: none; padding: 0; border-radius: 0; font-fami
 }
 .inner h1 { font-size: 29.2px; font-weight: 600; margin-bottom: 6px; }
 .inner .sub { font-size: 22.4px; color: var(--muted-fg); margin-bottom: 20px; }
-/* #173: missing paste message box */
-.notfound-err { color: var(--err); }
-.notfound-card .btn { display: block; margin-top: 10px; }
 .pwinput {
  width: 100%; padding: 10px 14px; border: 1px solid var(--border); border-radius: var(--radius);
  background: var(--bg); color: var(--fg); font: inherit; font-size: 23.2px; outline: none; text-align: center;
@@ -421,15 +375,15 @@ td a.slug.paste-name { background: none; padding: 0; border-radius: 0; font-fami
 }
 .seg input, .toggle input { accent-color: var(--accent); width: 16px; height: 16px; margin: 0; }

-/* toast (#19, #168): small pill anchored to the corner, out of content flow */
+/* toast (#19) */
 .toast {
-  position: fixed; right: 16px; bottom: 16px;
+  position: fixed; left: 50%; bottom: 32px; transform: translateX(-50%) translateY(8px);
  background: var(--surface-2); color: var(--fg); border: 1px solid var(--border);
-  border-radius: var(--radius-sm); padding: 6px 12px; font-size: 13px;
+  border-radius: var(--radius-sm); padding: 6px 18px; font-size: 20.7px;
  opacity: 0; pointer-events: none; transition: opacity .25s ease, transform .25s ease; z-index: 200;
  box-shadow: 0 4px 16px rgba(0,0,0,.25);
 }
-.toast.show { opacity: 1; transform: translateY(0); }
+.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
 /* status variants (#16) */
 .toast.success { border-color: var(--ok); color: var(--ok); }
 .toast.error { border-color: var(--err); color: var(--err); }
@@ -443,15 +397,13 @@ td a.slug.paste-name { background: none; padding: 0; border-radius: 0; font-fami

 /* protection section rhythm (#20) */
 .protect { display: flex; flex-direction: column; gap: 2px; }
-.protect .pw-row:not(.submenu) { padding: 2px 8px 4px; }
+.protect .pw-row { padding: 2px 8px 4px; }

 /* submenu number boxes (#157): styled number inputs + unit selects,
   padded + indented to line up with parent option labels */
 .submenu {
-  /* #240: indent the box under the parent option LABEL text (8px row padding
-     + 16px control + 8px gap = 32px), and match the row control padding rhythm */
-  margin: 4px 0 4px 32px;
-  padding: 6px 10px;
+  margin: 6px 0 4px 8px;
+  padding: 8px 10px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
@@ -536,11 +488,12 @@ td .id-link:hover { color: var(--accent); }
 th.sortable { cursor: pointer; user-select: none; }
 th.sortable:hover { color: var(--fg); }
 th.sortable { cursor: pointer; user-select: none; white-space: nowrap; }
-/* #209: arrow sits RIGHT of the label, vertically centered, and absolutely
-   positioned so it never shifts the label text; label aligns with column contents. */
+/* #101: arrow sits LEFT of the label, further spaced, vertically centered,
+   and absolutely positioned so it never shifts the label text. */
+th.sortable { position: relative; padding-left: 24px; }
 th.sortable .sort-ind {
-  /* #209 r2: inline right after the label text with a fixed gap, not pinned to the column edge */
-  display: inline-block; width: 0; height: 0; margin-left: 6px; vertical-align: middle;
+  position: absolute; left: 8px; top: 50%; transform: translateY(-50%);
+  display: inline-block; width: 0; height: 0;
  border-left: 5px solid transparent; border-right: 5px solid transparent;
 }
 th.sorted.asc .sort-ind { border-bottom: 6px solid var(--accent); }
@@ -588,20 +541,6 @@ a.admin-link:hover { color: var(--fg); text-decoration: underline; }
  border-color: var(--ok);
 }

-/* #260: static-width success feedback. Label and checkmark stack in one
-   grid cell, so the button is always as wide as the wider of the two and
-   never shifts on click. Feedback is a pure .ok class toggle. */
-.swapbtn {
-  display: inline-grid;
-}
-.swapbtn > * {
-  grid-area: 1 / 1;
-  justify-self: center;
-}
-.swapbtn .swap-check { visibility: hidden; }
-.swapbtn.ok .swap-check { visibility: visible; }
-.swapbtn.ok .swap-label { visibility: hidden; }
-
 /* headings: unified treatment (mirrors .side-section h3) */
 .settings-head h1, .paste-title-bar h1, .head-row h1, .inner h1 {
  letter-spacing: -0.01em;
@@ -671,12 +610,9 @@ a.admin-link:hover { color: var(--fg); text-decoration: underline; }
  .stats-head { font-size: 13px; }
  .stats-grid { font-size: 13px; padding: 10px 12px; }
  .code { font-size: 13px; }
-  /* #167: gutter and code must share one line box at mobile width too — a
-     taller gutter font stacks its rows taller than the code rows and every
-     number drifts off its line start */
-  .code .gutter { font-size: 13px; }
  .codebody { padding: 0 12px; }
  .footnote { font-size: 12px; padding: 8px 12px; gap: 10px; }
+  .created-banner { font-size: 13px; }
  .iconbtn { font-size: 13px; padding: 6px 10px; }

  /* unlock card */
@@ -697,13 +633,6 @@ a.admin-link:hover { color: var(--fg); text-decoration: underline; }
 .can-item-head strong { flex: 1; word-break: break-all; }
 .can-item-body { margin-top: 8px; }
 .can-item-body summary { cursor: pointer; font-size: 19px; color: var(--muted, #888); }
-/* #169: divider between the dropdown title and body must be persistent
-   (not hover dependent) and extend the full width of the card left and right */
-.can-item-body[open] summary {
-  border-bottom: 1px solid var(--border);
-  margin: 0 -14px 8px;
-  padding: 0 14px 8px;
-}
 .can-item-body pre.code { margin: 8px 0 0; overflow-x: auto; }
 .can-item-row { margin-top: 8px; }
 .can-item-row .can-item-title { width: 100%; margin-bottom: 6px; }
@@ -810,19 +739,6 @@ button[type="submit"]:focus-visible,
  background: var(--surface-2);
 }
 .dropzone.dragover { border-width: 2px; }
-/* #171: uploaded-file preview replaces the editor area; image fitted inside */
-.file-preview {
-  flex: 1;
-  min-width: 0;
-  min-height: 0;
-  max-width: 100%;
-  max-height: 100%;
-  object-fit: contain;
-  border-radius: 8px;
-}
-.editor-wrap.previewing .editor,
-.editor-wrap.previewing .gutter { display: none; }
-
 .file-chip {
  display: flex; align-items: center; gap: 10px;
  border: 1px solid var(--border); border-radius: var(--radius);
@@ -836,106 +752,13 @@ button[type="submit"]:focus-visible,
  font-size: 22px; padding: 0 4px; border-radius: var(--radius-sm);
 }
 .file-chip .file-chip-remove:hover { color: var(--danger, #c0392b); }
-.attachment-bar { display: flex; flex-direction: column; gap: 10px; padding: 12px; }
-/* #221: the link pill under an image preview stays a small inline chip,
-   left-aligned under the image, not stretched above it. */
-.attachment-bar .attachment-chip {
+.attachment-bar { display: flex; flex-direction: column; gap: 10px; }
+.attachment-chip {
  display: inline-flex; align-items: center; gap: 12px; align-self: flex-start;
  border: 1px solid var(--border); border-radius: var(--radius);
-  padding: 6px 14px; text-decoration: none; color: var(--fg);
-  background: var(--surface-2); font-size: 19px;
+  padding: 8px 16px; text-decoration: none; color: var(--fg);
+  background: var(--surface-2); font-size: 21.6px;
 }
-.attachment-bar .attachment-chip:hover { border-color: var(--accent); }
-.attachment-bar .attachment-chip .attachment-name {
-  min-width: 0;
-  flex: 1;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-/* #232: long filenames are truncated but the pill stays a reasonable
-   width; on narrow viewports it shrinks to the container instead of
-   overflowing the card. */
-.attachment-bar .attachment-chip {
-  max-width: 100%;
-}
-.attachment-bar .attachment-chip .attachment-name:hover {
-  white-space: normal;
-  overflow-wrap: anywhere;
-}
-/* #221: images scale to fit the viewer box, aspect ratio preserved. */
-.attachment-preview {
-  max-width: 100%;
-  align-self: flex-start;
-  /* #229: no inner border/radius of its own; the .float wrapper already
-     frames the pill (inner borders get corner-clipped by overflow:hidden).
-     Padding on .attachment-bar gives the image breathing room from the
-     pill border. */
-  border: 0;
-  border-radius: 0;
-  background: var(--surface-2);
-  overflow: hidden;
-}
-.attachment-preview img {
-  display: block;
-  max-width: 100%;
-  max-height: 70vh;
-  width: auto;
-  height: auto;
-  object-fit: contain;
-}
-
-/* #139: CSP-safe replacements for inline style attributes (style-src 'self') */
-.hidden { display: none; }
-.can-page { max-width: 900px; width: 100%; }
-.col-a { width: 260px; } .col-b { width: 140px; } .col-c { width: 120px; }
-.col-d { width: 96px; } .col-d2 { width: 150px; } .col-e { width: 190px; }
-.col-f { width: 100px; } .col-g { width: 190px; }
-/* #255: history's URL column had its own narrow width (col-f doubles as
-   /mine's ID column); give it a dedicated class. */
-.col-url { width: 150px; }
-/* #210: /mine rows render a delete button cell that had no declared column,
-   so under table-layout:fixed it overlapped the ID column. */
-.col-del { width: 64px; }
-.spacer-flex { flex: 1; }
-.input-num { width: 80px; }
-.input-num-sm { width: 64px; }
-.danger-hint { color: var(--danger, #c0392b); margin-top: 6px; }
-.hint-lg { font-size: 19px; }
-.mt6 { margin-top: 6px; }
-.mt18 { margin-top: 18px; }
-.toggle-inline { display: inline-flex; }
-.wrap-normal { word-break: normal; overflow-wrap: break-word; }
-.created-banner { display: block; }
-/* #167: gutter rows for wrapped paste view — one row per visual code line */
-.gutline { display: block; }
-
-/* #267: jump to top/bottom pills for long pastes and the editor.
-   Hidden unless JS (jump.js) detects content more than 2x the viewport. */
-.jumpnav {
-  position: fixed;
-  right: 18px;
-  bottom: 18px;
-  z-index: 50;
-  display: flex;
-  flex-direction: column;
-  gap: 8px;
-}
-.jumpnav.hidden { display: none; }
-.jump-btn { box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25); }
-
-/* #273: theme-aware scrollbars. Standard properties first (Firefox, and
-   Chromium >= 121 honors scrollbar-color), then ::-webkit rules for finer
-   Chromium styling. Colors come from CSS vars so they track the preset. */
-* {
-  scrollbar-width: thin;
-  scrollbar-color: var(--border) transparent;
-}
-::-webkit-scrollbar { width: 10px; height: 10px; }
-::-webkit-scrollbar-track { background: transparent; }
-::-webkit-scrollbar-thumb {
-  background: var(--border);
-  border-radius: 5px;
-}
-::-webkit-scrollbar-thumb:hover { background: var(--muted-fg); }
-::-webkit-scrollbar-corner { background: transparent; }
+.attachment-chip:hover { border-color: var(--accent); }
+.attachment-chip .attachment-size { color: var(--muted-fg); font-size: 19px; }
+.attachment-preview img { max-width: 480px; max-height: 360px; border-radius: var(--radius); border: 1px solid var(--border); }
@@ -1,9 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
-  <rect width="32" height="32" rx="7" fill="#7B5FC0"/>
-  <g fill="none" stroke="#ffffff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
-    <path d="M16 7a9 9 0 1 0 0 18c1.4 0 2-1 2-2s-.7-2.2-.7-3c0-1.1.9-2 2-2h3.2A2.5 2.5 0 0 0 25 15.5 9 9 0 0 0 16 7z"/>
-    <circle cx="11.5" cy="14.5" r="1.6" fill="#ffffff" stroke="none"/>
-    <circle cx="16" cy="11.5" r="1.6" fill="#ffffff" stroke="none"/>
-    <circle cx="20.8" cy="13.8" r="1.6" fill="#ffffff" stroke="none"/>
-  </g>
-</svg>
@@ -1,19 +0,0 @@
-// #46: live relative-time counters: tick any [data-ts] (epoch seconds) every second
-(function () {
-  function fmt(ts) {
-    const s = Math.max(0, Math.floor(Date.now() / 1000) - ts);
-    if (s < 60) return s + 's ago';
-    if (s < 3600) return Math.floor(s / 60) + 'm ago';
-    if (s < 86400) return Math.floor(s / 3600) + 'h ago';
-    return Math.floor(s / 86400) + 'd ago';
-  }
-  function tick() {
-    document.querySelectorAll('[data-ts]').forEach(el => {
-      const ts = parseInt(el.dataset.ts, 10);
-      if (!isNaN(ts)) el.textContent = fmt(ts);
-    });
-  }
-  setInterval(tick, 1000);
-  document.addEventListener('DOMContentLoaded', tick);
-  tick();
-})();
@@ -1,20 +0,0 @@
-// #139: public history table + 30s auto-refresh.
-const t = PaletteTable.init({
-  endpoint: '/api/public',
-  perPage: 25,
-  hasPager: true,
-  rowHtml: it =>
-    `<tr class="row" data-href="/${t.esc(it.id)}"><td>` +
-    (it.title
-      ? `${t.esc(it.title)}${it.is_can ? ' <span class="badge" title="Can — bundle of items">can</span>' : ''}`
-      : `<a class="slug paste-name" href="/${t.esc(it.id)}">${t.esc(it.id)}</a>${it.is_can ? ' <span class="badge" title="Can — bundle of items">can</span>' : ''}`) +
-    `</td>` +
-    `<td><span class="badge">${t.esc(it.type || it.language || 'text')}</span></td>` +
-    `<td class="dim">${t.fmtSize(it.size)}</td><td class="dim">${it.view_count}</td><td class="dim" data-ts="${it.created_at}">${t.ago(it.created_at)}</td>` +
-    (it.custom_slug ? `<td><a class="slug url-link" href="/${t.esc(it.custom_slug)}">/${t.esc(it.custom_slug)}</a></td>` : `<td class="dim">none</td>`) +
-    `<td class="dim"><a class="id-link" href="/${t.esc(it.id)}">${t.esc(it.id)}</a></td></tr>`,
-  emptyFiltered: 'No pastes match your search.',
-  emptyAll: 'No pastes yet. Create the first one.',
-});
-t.load();
-setInterval(t.load, 30000); // auto-refresh history every 30s
@@ -1,51 +0,0 @@
-/* #267: jump to top / bottom controls for long content.
-   Paste view scrolls the window; the /new editor scrolls its textarea.
-   The active scroller is chosen via data-jump-scroll on the script tag. */
-(function () {
-  var nav = document.getElementById('jumpnav');
-  if (!nav) return;
-  var scroller = window;
-  var sel = nav.dataset.jumpScroll;
-  if (sel) scroller = document.querySelector(sel);
-
-  function el() {
-    return scroller === window ? document.scrollingElement : scroller;
-  }
-  function isLarge() {
-    var e = el();
-    if (!e) return false;
-    var visible = scroller === window ? window.innerHeight : e.clientHeight;
-    return e.scrollHeight > visible * 2;
-  }
-  function refresh() {
-    nav.classList.toggle('hidden', !isLarge());
-  }
-  function jump(toTop) {
-    var e = el();
-    if (!e) return;
-    if (scroller === window) {
-      window.scrollTo({ top: toTop ? 0 : e.scrollHeight });
-    } else {
-      e.scrollTop = toTop ? 0 : e.scrollHeight;
-    }
-  }
-  nav.addEventListener('click', function (ev) {
-    var b = ev.target.closest('[data-jump]');
-    if (!b) return;
-    ev.preventDefault();
-    jump(b.dataset.jump === 'top');
-  });
-  window.addEventListener('resize', refresh);
-  if (scroller !== window && scroller) scroller.addEventListener('input', refresh);
-  refresh();
-  /* #282: the first evaluation can run before the layout settles (media
-     queries, web fonts, async highlighting) and under-measure the content,
-     leaving the nav hidden on long pages. Re-check once a real layout exists
-     and after load; the ResizeObserver also catches late content growth. */
-  requestAnimationFrame(function () { requestAnimationFrame(refresh); });
-  window.addEventListener('load', refresh);
-  window.setTimeout(refresh, 300);
-  if (window.ResizeObserver && scroller === window && document.body) {
-    new ResizeObserver(refresh).observe(document.body);
-  }
-})();
@@ -1,46 +0,0 @@
-// #139: saved pastes table.
-function toast(msg, kind) {
-  let t = document.querySelector('.toast');
-  if (!t) { t = document.createElement('div'); t.className = 'toast'; document.body.appendChild(t); }
-  t.textContent = msg;
-  t.classList.remove('success', 'error');
-  if (kind === 'success') t.classList.add('success');
-  if (kind === 'error') t.classList.add('error');
-  t.classList.add('show');
-  clearTimeout(t._h);
-  t._h = setTimeout(() => t.classList.remove('show'), 2000);
-}
-
-const t = PaletteTable.init({
-  endpoint: '/api/mine',
-  perPage: 25,
-  hasPager: true,
-  rowHtml: it =>
-    `<tr class="row" data-href="/${t.esc(it.id)}"><td>` +
-    (it.title
-      ? `${t.esc(it.title)}${it.is_can ? ' <span class="badge" title="Can — bundle of items">can</span>' : ''}`
-      : `<a class="slug paste-name" href="/${t.esc(it.id)}">${t.esc(it.id)}</a>${it.is_can ? ' <span class="badge" title="Can — bundle of items">can</span>' : ''}`) +
-    `</td>` +
-    `<td><span class="badge">${t.esc(it.type || it.language || 'text')}</span></td>` +
-    `<td class="dim">${t.fmtSize(it.size)}</td><td class="dim" data-ts="${it.created_at}">${t.ago(it.created_at)}</td>` +
-    (it.custom_slug ? `<td><a class="slug url-link" href="/${t.esc(it.custom_slug)}">/${t.esc(it.custom_slug)}</a></td>` : `<td class="dim">none</td>`) +
-    `<td class="dim"><a class="id-link" href="/${t.esc(it.id)}">${t.esc(it.id)}</a></td>` +
-    `<td><button class="btn btn-icon del" data-id="${t.esc(it.id)}" title="Delete paste" aria-label="Delete paste">&times;</button></td></tr>`,
-  emptyFiltered: 'No pastes from this browser match your search.',
-  emptyAll: 'No pastes from this browser yet.',
-});
-
-// delete buttons (viewer-scoped, enforced server-side #37)
-document.getElementById('rows').addEventListener('click', async e => {
-  const del = e.target.closest('button.del');
-  if (!del) return;
-  e.stopPropagation();
-  del.disabled = true;
-  try {
-    const res = await fetch('/api/pastes/' + del.dataset.id, { method: 'DELETE' });
-    if (res.ok) { toast('Deleted', 'success'); t.load(); }
-    else { toast('Delete failed', 'error'); del.disabled = false; }
-  } catch (err) { toast('Delete failed', 'error'); del.disabled = false; }
-});
-
-t.load();
@@ -1,487 +0,0 @@
-// #139: editor page logic (gutter, expiry, burn, attachments, create).
-const $ = id => document.getElementById(id);
-const content = $('content'), gutter = $('gutter');
-
-// #274: with wrap on, a logical line occupies several VISUAL rows in the
-// textarea, so one number per logical line drifts off its text (same bug the
-// paste view fixed in #167). A textarea can't be split into spans, so the
-// wrapped row count per logical line is measured with a hidden mirror div
-// that shares the editor's font, line metrics and wrapping rules, and the
-// gutter renders one .gutline block per visual row with the number on the
-// FIRST row of its logical line (fillers elsewhere).
-let mirror = null;
-function measureRows(lines) {
-  if (!mirror) {
-    mirror = document.createElement('div');
-    mirror.style.position = 'absolute';
-    mirror.style.visibility = 'hidden';
-    mirror.style.top = '0';
-    mirror.style.left = '-9999px';
-    document.body.appendChild(mirror);
-  }
-  const cs = getComputedStyle(content);
-  mirror.style.font = cs.font;
-  mirror.style.lineHeight = cs.lineHeight;
-  mirror.style.whiteSpace = 'pre-wrap';
-  mirror.style.overflowWrap = 'anywhere';
-  mirror.style.wordBreak = 'break-all';
-  mirror.style.width = (content.clientWidth - parseFloat(cs.paddingLeft) - parseFloat(cs.paddingRight)) + 'px';
-  const lh = parseFloat(cs.lineHeight) || 1;
-  const starts = [];
-  let total = 0;
-  const n = Math.max(lines.length, 1);
-  for (let i = 0; i < n; i++) {
-    // A trailing newline yields an empty last line: it still occupies one row.
-    mirror.textContent = lines[i] + '\n';
-    let rows = Math.max(1, Math.round(mirror.getBoundingClientRect().height / lh));
-    starts.push(total);
-    total += rows;
-  }
-  return { starts, total };
-}
-
-function updateGutter() {
-  const lines = content.value.split('\n');
-  const n = Math.max(lines.length, 1);
-  if (!document.documentElement.hasAttribute('data-wrap')) {
-    let s = '';
-    for (let i = 1; i <= n; i++) s += i + '\n';
-    gutter.textContent = s.slice(0, -1);
-    return;
-  }
-  const { starts, total } = measureRows(lines);
-  gutter.textContent = '';
-  const frag = document.createDocumentFragment();
-  const spans = [];
-  for (let r = 0; r < total; r++) {
-    const c = document.createElement('span');
-    c.className = 'gutline';
-    c.textContent = '\u00a0';
-    spans.push(c);
-    frag.appendChild(c);
-  }
-  gutter.appendChild(frag);
-  for (let j = 0; j < starts.length; j++) spans[starts[j]].textContent = String(j + 1);
-}
-content.addEventListener('input', updateGutter);
-// #274: the wrap toggle and width changes re-wrap the textarea; re-measure.
-new MutationObserver(updateGutter).observe(document.documentElement, { attributes: true, attributeFilter: ['data-wrap'] });
-window.addEventListener('resize', updateGutter);
-// #259: the editor scrolls itself; keep the gutter's numbers in step with it.
-content.addEventListener('scroll', () => { gutter.scrollTop = content.scrollTop; });
-updateGutter();
-
-function toast(msg, kind) {
-  let t = document.querySelector('.toast');
-  if (!t) { t = document.createElement('div'); t.className = 'toast'; document.body.appendChild(t); }
-  t.textContent = msg;
-  t.classList.remove('success', 'error');
-  if (kind === 'success') t.classList.add('success');
-  if (kind === 'error') t.classList.add('error');
-  t.classList.add('show');
-  clearTimeout(t._h);
-  t._h = setTimeout(() => t.classList.remove('show'), 2000);
-}
-const setHidden = (id, hid) => { const el = $(id); if (el) el.classList.toggle('hidden', hid); };
-$('haspw').addEventListener('change', e => setHidden('pwrow', !e.target.checked));
-$('burn').addEventListener('change', e => setHidden('burnrow', !e.target.checked));
-document.querySelectorAll('input[name="exp"]').forEach(r => r.addEventListener('change', () => {
-  setHidden('customexp-row', document.querySelector('input[name="exp"]:checked').value !== 'custom');
-  setHidden('customexp-err', true);
-}));
-
-// compose the expires_in Go-duration string when Custom is checked (#48).
-// Returns the string, or null with an inline error shown.
-function composeCustomExpiry() {
-  const n = parseInt($('expnum').value, 10);
-  const unit = $('expunit').value;
-  let mins = NaN;
-  if (n > 0) {
-    if (unit === 'm') mins = n;
-    else if (unit === 'h') mins = n * 60;
-    else if (unit === 'd') mins = n * 1440;
-    else if (unit === 'w') mins = n * 10080;
-    else if (unit === 'mo') mins = n * 43200; // months counted as 30 days
-  }
-  const err = $('customexp-err');
-  if (!(mins >= 1)) {
-    err.textContent = 'Enter a duration of at least 1 minute.';
-    err.classList.remove('hidden');
-    return null;
-  }
-  if (mins > 525600) { // more than 1 year
-    err.textContent = 'Custom expiry cannot exceed 1 year.';
-    err.classList.remove('hidden');
-    return null;
-  }
-  err.classList.add('hidden');
-  // compose as h (+d/m remainders); Go parses '336h', '90m', '6h30m' fine
-  const hours = Math.floor(mins / 60), rem = mins % 60;
-  if (rem === 0) return hours + 'h';
-  if (hours === 0) return rem + 'm';
-  return hours + 'h' + rem + 'm';
-}
-
-$('pwreveal').addEventListener('click', () => {
-  const pw = $('password');
-  const show = pw.type === 'password';
-  pw.type = show ? 'text' : 'password';
-  $('pwreveal').classList.toggle('off', !show);
-  $('pwreveal').title = show ? 'Hide password' : 'Show password';
-});
-
-let guessed = ''; // last auto-detected language, '' = user override
-
-// #105: map backend machine-readable error codes to plain-language guidance.
-// Unknown codes fall back to a generic message; the technical detail stays
-// in the API response for API consumers.
-const ERROR_MESSAGES = {
-  slug_taken: 'That Custom URL is already taken. Try another.',
-  slug_reserved: 'That Custom URL is reserved. Try another.',
-  slug_invalid: 'Please keep the Custom URL under 64 characters, using only letters, numbers, dashes, or underscores.',
-  content_empty: 'Write or paste something first.',
-  content_too_large: 'This paste is too large. The limit is 5 MB.',
-  file_too_large: 'File is too large. The limit is 25 MB.',
-  one_file_only: 'Choose either text or a file for now.',
-  expiry_invalid: 'Please pick an expiry between 1 minute and 1 year.',
-  rate_limited: 'Too many tries. Wait a minute and try again.',
-};
-const GENERIC_ERROR = 'Something went wrong. Please try again.';
-
-function friendlyError(data) {
-  return ERROR_MESSAGES[data && data.code] || GENERIC_ERROR;
-}
-
-// #105: color the result box by outcome — success (ok), error (err),
-// warning (warn) — with a colored left border (CSS .result-ok/.result-err).
-function setResultKind(kind) {
-  const card = $('result-card');
-  card.classList.remove('result-ok', 'result-err', 'result-warn');
-  if (kind) card.classList.add('result-' + kind);
-}
-
-function showResult(html, kind) {
-  $('result').innerHTML = html;
-  $('result').dataset.token = kind === 'ok' ? ($('result').dataset.token || '') : ($('result').dataset.token || '');
-  setHidden('result-card', false);
-  setResultKind(kind === 'ok' ? 'ok' : (kind === 'warn' ? 'warn' : 'err'));
-}
-function defaultFilename(lang) {
-  const names = {
-    python: 'Python.py', go: 'main.go', javascript: 'script.js', typescript: 'index.ts',
-    rust: 'main.rs', c: 'main.c', cpp: 'main.cpp', java: 'Main.java', bash: 'script.sh',
-    sql: 'query.sql', yaml: 'config.yaml', json: 'data.json', html: 'index.html',
-    css: 'style.css', xml: 'doc.xml', php: 'index.php', ruby: 'main.rb',
-    perl: 'main.pl', lua: 'main.lua', dockerfile: 'Dockerfile', toml: 'config.toml',
-    ini: 'config.ini', diff: 'changes.diff',
-    markdown: 'notes.md', text: 'Text.txt',
-  };
-  return names[lang] || '';
-}
-// fill default filename when title is still blank
-function maybeSetDefaultTitle(lang) {
-  const title = $('title');
-  if (lang && !title.value.trim()) {
-    const fn = defaultFilename(lang);
-    if (fn) title.value = fn;
-  }
-}
-
-async function guessLang() {
-  if (!content.value.trim()) return;
-  try {
-    const res = await fetch('/api/guess-language', {
-      method: 'POST',
-      headers: {'Content-Type': 'application/json'},
-      body: JSON.stringify({content: content.value}),
-    });
-    const data = await res.json();
-    if (res.ok && data.language) {
-      guessed = data.language;
-      $('language').value = data.language;
-      maybeSetDefaultTitle(data.language);
-    }
-  } catch(e) {}
-}
-
-// refresh button: always re-detect, even if user picked something
-$('reguess').addEventListener('click', guessLang);
-
-// auto-guess when pasting into the editor
-content.addEventListener('paste', () => setTimeout(guessLang, 0));
-
-async function create() {
-  // #38: file attached -> file paste (1 file = 1 paste; text is ignored)
-  if (attachedFile) return createFilePaste();
-
-  const body = {
-    content: content.value,
-    title: $('title').value || null,
-    language: $('language').value || null,
-    custom_slug: $('custom').value || null,
-    burn_after_read: $('burn').checked,
-  };
-  if ($('burn').checked) body.burn_after_reads = parseInt($('burnreads').value, 10) || 1;
-  if ($('haspw').checked) body.password = $('password').value;
-  const exp = document.querySelector('input[name="exp"]:checked').value;
-  if (exp === 'custom') {
-    const dur = composeCustomExpiry();
-    if (dur === null) { toast('Check the custom expiry', 'error'); return; }
-    body.expires_in = dur;
-  } else if (exp) {
-    body.expires_in = exp;
-  }
-
-  const res = await fetch('/api/pastes', {
-    method: 'POST',
-    headers: {'Content-Type': 'application/json'},
-    body: JSON.stringify(body),
-  });
-  const data = await res.json();
-  if (!res.ok) {
-    showResult(friendlyError(data), 'err');
-    toast('Create failed', 'error');
-    return;
-  }
-  finishCreate(data);
-}
-
-// shared success handling for both create paths (#38): result box, copy
-// button, password auto-unlock, then redirect to the paste.
-function finishCreate(data) {
-  const url = location.origin + '/' + (data.custom_slug || data.id);
-  // #260 attempt 2: .swapbtn markup — label and checkmark share one grid
-  // cell, so the button width is static and feedback is a class toggle.
-  showResult('<a href="' + url + '">' + url + '</a> <button class="btn btn-icon swapbtn" id="result-copy" title="Copy URL" type="button"><span class="swap-label">Copy</span><span class="swap-check">✓</span></button>', 'ok');
-  $('result').dataset.token = data.deletion_token || '';
-  const copyBtn = document.getElementById('result-copy');
-  copyBtn.addEventListener('click', () => {
-    try {
-      navigator.clipboard.writeText(url);
-      copyBtn.classList.add('ok');               // in-place success feedback (#53)
-      setTimeout(() => copyBtn.classList.remove('ok'), 2000);
-    } catch(e) { toast('Copy failed', 'error'); }
-  });
-  // token carried via sessionStorage, never in the URL (#143)
-  const dest = '/' + data.id + '?created=1';
-  try { sessionStorage.setItem('deletion_token_' + data.id, data.deletion_token || ''); } catch(e) {}
-  // password-protected: unlock now with the password we already have (#26)
-  if ($('haspw').checked && data.id) {
-    const fd = new FormData();
-    fd.append('password', $('password').value);
-    fd.append('next', dest);
-    try {
-      fetch('/' + data.id, {method: 'POST', body: fd}).finally(() => { location.href = dest; });
-      return;
-    } catch(e) {}
-  }
-  // show the paste
-  location.href = dest;
-}
-$('create').addEventListener('click', create);
-
-// #38: file attachment support — 1 file = 1 paste. Three input paths:
-// Ctrl+V paste of a file, upload button (file picker), drag-and-drop.
-const MAX_FILE_BYTES = 25 * 1024 * 1024;
-let attachedFile = null; // the single attached File, or null
-
-function humanSize(n) {
-  if (n >= 1048576) return (n / 1048576).toFixed(1) + ' MB';
-  if (n >= 1024) return (n / 1024).toFixed(1) + ' KB';
-  return n + ' B';
-}
-
-// #171: text-file extensions -> language key for title placeholder
-// convention (e.g. Python.py); fallback Text.
-const LANG_BY_EXT = {
-  py: 'python', go: 'go', js: 'javascript', mjs: 'javascript', ts: 'typescript',
-  tsx: 'typescript', rs: 'rust', c: 'c', h: 'c', cpp: 'cpp', cc: 'cpp', hpp: 'cpp',
-  java: 'java', cs: 'csharp', sh: 'bash', bash: 'bash', sql: 'sql', yml: 'yaml',
-  yaml: 'yaml', json: 'json', html: 'html', htm: 'html', css: 'css', xml: 'xml',
-  php: 'php', rb: 'ruby', pl: 'perl', lua: 'lua', toml: 'toml', ini: 'ini',
-  diff: 'diff', md: 'markdown', txt: 'text', log: 'text',
-};
-const TEXT_EXTS = new Set(Object.keys(LANG_BY_EXT));
-
-function extOf(name) {
-  const i = name.lastIndexOf('.');
-  return i >= 0 ? name.slice(i + 1).toLowerCase() : '';
-}
-
-// #171: when a file is attached it takes over the main editing area.
-// Images render fitted into the editor area; text files load their
-// content into the editor. Title auto-fills only if still blank (house
-// rule: never overwrite a typed title).
-const IMAGE_RE = /^image\//;
-let previewURL = null;
-
-// #171: CSP img-src only allows 'self' and data:, so blob: URLs are
-// blocked — read the file as a data: URL via FileReader instead.
-function readFileDataURL(file, cb) {
-  const r = new FileReader();
-  r.onload = () => cb(r.result);
-  r.readAsDataURL(file);
-}
-
-async function showFileInEditor(file) {
-  const wrap = document.querySelector('.editor-wrap');
-  const img = $('file-preview');
-  if (IMAGE_RE.test(file.type)) {
-    readFileDataURL(file, (dataURL) => {
-      previewURL = dataURL;
-      img.src = dataURL;
-      img.alt = file.name;
-      wrap.classList.add('previewing');
-      img.classList.remove('hidden');
-    });
-    return;
-  }
-  wrap.classList.remove('previewing');
-  img.classList.add('hidden');
-  if (!TEXT_EXTS.has(extOf(file.name))) return; // unknown binary: leave editor alone
-  try {
-    const text = await file.text();
-    // #184: the file replaces the main editing area, so the text always
-    // loads over whatever was in the editor (same rule as images, which
-    // hide the editor entirely).
-    content.value = text;
-    updateGutter();
-    guessLang();
-  } catch (e) {}
-}
-
-function clearPreview() {
-  const wrap = document.querySelector('.editor-wrap');
-  const img = $('file-preview');
-  wrap.classList.remove('previewing');
-  img.classList.add('hidden');
-  img.removeAttribute('src');
-  if (previewURL) { URL.revokeObjectURL(previewURL); previewURL = null; }
-}
-
-function setAttachedFile(file) {
-  if (!file) return clearAttachedFile();
-  if (file.size > MAX_FILE_BYTES) {
-    toast('File is too large. The limit is 25 MB.', 'error');
-    return;
-  }
-  attachedFile = file;
-  renderFileChip();
-  setHidden('file-text-note', false);
-  // #233: title auto-fill — the file's own name always wins when the
-  // title is still blank; fallback is date.fileextension (e.g.
-  // 2026-09-10.txt) when the name is missing or unusable. Never
-  // overwrite a typed title.
-  if (!$('title').value.trim()) {
-    const raw = (file.name || '').trim();
-    if (raw) {
-      $('title').value = raw;
-    } else {
-      const d = new Date();
-      const iso = d.getFullYear() + '-' + String(d.getMonth() + 1).padStart(2, '0') + '-' + String(d.getDate()).padStart(2, '0');
-      const ext = extOf(raw || file.name);
-      $('title').value = ext ? iso + '.' + ext : iso;
-    }
-  }
-  showFileInEditor(file);
-}
-
-function clearAttachedFile() {
-  attachedFile = null;
-  $('file-input').value = '';
-  renderFileChip();
-  setHidden('file-text-note', true);
-  clearPreview();
-}
-
-function renderFileChip() {
-  const slot = $('file-chip-slot');
-  slot.innerHTML = '';
-  if (!attachedFile) return;
-  const chip = document.createElement('div');
-  chip.className = 'file-chip';
-  chip.innerHTML = '<span class="file-chip-name"></span>' +
-    '<span class="file-chip-size">' + humanSize(attachedFile.size) + '</span>' +
-    '<button type="button" class="file-chip-remove" title="Remove file">&times;</button>';
-  chip.querySelector('.file-chip-name').textContent = attachedFile.name;
-  chip.querySelector('.file-chip-remove').addEventListener('click', clearAttachedFile);
-  slot.appendChild(chip);
-}
-
-// (1) file picker via the dropzone click
-$('dropzone').addEventListener('click', () => $('file-input').click());
-$('file-input').addEventListener('change', () => {
-  if ($('file-input').files.length) setAttachedFile($('file-input').files[0]);
-});
-
-// (2) drag-and-drop onto the dropzone (and the page broadly)
-const dz = $('dropzone');
-['dragenter', 'dragover'].forEach(ev => {
-  document.addEventListener(ev, e => {
-    if (!e.dataTransfer || ![...e.dataTransfer.types].includes('Files')) return;
-    e.preventDefault();
-    dz.classList.add('dragover');
-  });
-});
-['dragleave', 'drop'].forEach(ev => {
-  document.addEventListener(ev, e => {
-    if (ev === 'drop') e.preventDefault();
-    if (e.target === dz || ev === 'drop') dz.classList.remove('dragover');
-  });
-});
-document.addEventListener('drop', e => {
-  if (!e.dataTransfer || !e.dataTransfer.files.length) return;
-  e.preventDefault();
-  setAttachedFile(e.dataTransfer.files[0]);
-});
-
-// (3) Ctrl+V of a file anywhere on the page
-document.addEventListener('paste', e => {
-  const files = e.clipboardData && e.clipboardData.files;
-  if (!files || !files.length) return; // normal text paste into the editor
-  e.preventDefault();
-  setAttachedFile(files[0]);
-});
-
-// file create path: POST multipart. 1 file = 1 paste: when a file is
-// attached the editor text is ignored (server enforces this too).
-async function createFilePaste() {
-  const fd = new FormData();
-  fd.append('file', attachedFile);
-  if ($('title').value) fd.append('title', $('title').value);
-  if ($('custom').value) fd.append('custom_slug', $('custom').value);
-  if ($('haspw').checked) fd.append('password', $('password').value);
-  if ($('burn').checked) {
-    fd.append('burn_after_read', 'true');
-    fd.append('burn_after_reads', String(parseInt($('burnreads').value, 10) || 1));
-  }
-  if ($('unlisted').checked) fd.append('visibility', 'unlisted');
-  const exp = document.querySelector('input[name="exp"]:checked').value;
-  if (exp === 'custom') {
-    const dur = composeCustomExpiry();
-    if (dur === null) { toast('Check the custom expiry', 'error'); return; }
-    fd.append('expires_in', dur);
-  } else if (exp) {
-    fd.append('expires_in', exp);
-  }
-  const res = await fetch('/api/pastes', { method: 'POST', body: fd });
-  const data = await res.json();
-  if (!res.ok) {
-    showResult(friendlyError(data), 'err');
-    toast('Create failed', 'error');
-    return;
-  }
-  finishCreate(data);
-}
-
-// reset stale result state when returning via Back (bfcache) (#28)
-window.addEventListener('pageshow', e => {
-  if (!e.persisted) return;
-  const rc = document.getElementById('result-card');
-  if (rc) rc.classList.add('hidden');
-  const r = document.getElementById('result');
-  if (r) { r.innerHTML = 'empty'; delete r.dataset.token; }
-});
-document.addEventListener('keydown', e => {
-  if ((e.ctrlKey || e.metaKey) && e.key === 'Enter') { e.preventDefault(); create(); }
-});
@@ -1,140 +0,0 @@
-// #167: with line wrapping on, a logical line can occupy several visual
-// lines; the gutter must show one number per VISUAL line, and each number
-// must sit on the visual row where its logical line STARTS. Per-line spans
-// give each logical line its own box so offsetTop order stays correct even
-// when highlighting spans cross no line boundaries.
-(function () {
-  var body = document.getElementById('codebody');
-  var gutter = document.getElementById('gutter');
-  var code = document.getElementById('code');
-  if (!body || !gutter || !code) return;
-
-  var wrapOn = function () {
-    return document.documentElement.hasAttribute('data-wrap');
-  };
-
-  // Wrap each logical line (split on newline; spans never contain newlines
-  // because HighlightCode highlights per line) in a .codeline block. The
-  // spans are display:block, so they are joined with '' — a '\n' join leaves
-  // newline text nodes between blocks that pre-wrap renders as an extra line
-  // box per line, which would shift every following number down one row (#167,
-  // #205). Whitespace-only text nodes are also stripped defensively below: any
-  // that reach the DOM (older cached HTML, other templates) render as phantom
-  // rows under white-space: pre and drift the gutter.
-  function splitLines() {
-    var html = body.innerHTML;
-    var parts = html.split('\n');
-    var out = [];
-    for (var i = 0; i < parts.length; i++) {
-      out.push('<span class="codeline">' + parts[i] + '</span>');
-    }
-    body.innerHTML = out.join('');
-    // #205: strip whitespace-only text nodes between the .codeline blocks.
-    var ws = [];
-    for (var n = body.firstChild; n; n = n.nextSibling) {
-      if (n.nodeType === 3 && !/\S/.test(n.nodeValue)) ws.push(n);
-    }
-    for (var w = 0; w < ws.length; w++) body.removeChild(ws[w]);
-  }
-
-  // One .gutline block per visual row. The gutter must reproduce the code
-  // column's REAL rendered rows: each number goes on the visual row whose top
-  // matches its .codeline's top (a line wrapping to N rows gets its number on
-  // the FIRST of those rows), and filler rows pad the gaps. Geometry is
-  // measured, not derived from span counts or heights.
-  function renumber() {
-    var lines = body.querySelectorAll('.codeline');
-    // #257: size the gutter column to the widest line number so numbers in
-    // the 100s+ fit their own column instead of bleeding into the code text.
-    // The gutter is box-sizing: border-box, so the column width must be the
-    // digits PLUS the 10px left + 10px right padding; at the CSS default 3ch
-    // the padding alone leaves only ~19px of content, and any 2+ digit
-    // number overflows into the code. Numbers are right-aligned, and the
-    // width below fits the widest number exactly. Set via CSSOM (CSP
-    // forbids inline style attributes). Only touch the width when it
-    // changes: the resize observer below re-runs renumber() when the gutter
-    // width reflows the code column, and rewriting the same value would
-    // ping-pong the fixed point forever.
-    var digits = String(lines.length || 1).length;
-    var w = 'calc(' + digits + 'ch + 20px)';
-    if (gutter.style.width !== w) {
-      gutter.style.minWidth = w;
-      gutter.style.width = w;
-    }
-    if (!wrapOn() || !lines.length) {
-      // wrap OFF: one number per logical line (pre-existing behavior,
-      // including the gutter scrolling with horizontal scroll).
-      var s = '';
-      for (var k = 1; k <= lines.length; k++) s += k + '\n';
-      gutter.textContent = lines.length ? s.slice(0, -1) : '1';
-      return;
-    }
-
-    // Read all rects first: batching layout reads before the writes below
-    // avoids interleaved read/write reflows.
-    var bodyTop = body.getBoundingClientRect().top;
-    var lh = parseFloat(getComputedStyle(body).lineHeight) || 1;
-    var rowIdx = [];
-    var totalRows = 1;
-    for (var i = 0; i < lines.length; i++) {
-      var row = Math.round((lines[i].getBoundingClientRect().top - bodyTop) / lh);
-      if (row < 0) row = 0;
-      rowIdx.push(row);
-      if (row + 1 > totalRows) totalRows = row + 1;
-    }
-    if (totalRows < lines.length) totalRows = lines.length;
-    gutter.textContent = '';
-    var frag = document.createDocumentFragment();
-    var spans = [];
-    for (var r = 0; r < totalRows; r++) {
-      var cell = document.createElement('span');
-      cell.className = 'gutline';
-      cell.textContent = '\u00a0';
-      spans.push(cell);
-      frag.appendChild(cell);
-    }
-    gutter.appendChild(frag);
-    for (var j = 0; j < rowIdx.length; j++) {
-      spans[rowIdx[j]].textContent = String(j + 1);
-    }
-    // A wrapped line whose last visual row is only partially filled can
-    // settle a hair under N * line-height after the gutter is rebuilt; a
-    // gutter pass that changes the code column width reflows it. Verify the
-    // placement one frame later and re-run if any line's row moved (#167).
-    var placed = [];
-    for (var p = 0; p < rowIdx.length; p++) placed.push(rowIdx[p]);
-    requestAnimationFrame(function () {
-      var moved = false;
-      var bodyTop2 = body.getBoundingClientRect().top;
-      var lh2 = parseFloat(getComputedStyle(body).lineHeight) || lh;
-      var tops2 = [];
-      for (var q2 = 0; q2 < lines.length; q2++) tops2.push(lines[q2].getBoundingClientRect().top);
-      for (var q3 = 0; q3 < tops2.length; q3++) {
-        if (Math.round((tops2[q3] - bodyTop2) / lh2) !== placed[q3]) { moved = true; break; }
-      }
-      if (moved) renumber();
-    });
-  }
-
-  splitLines();
-  renumber();
-
-  // Re-renumber on toggle (theme.js toggles data-wrap on <html>) and on any
-  // size change (paste of lots of text, window resize, zoom). Only width
-  // changes of the code column affect wrapping, so observe width only —
-  // height changes caused by our own renumbering must not re-trigger.
-  var mo = new MutationObserver(renumber);
-  mo.observe(document.documentElement, { attributes: true, attributeFilter: ['data-wrap'] });
-  var lastW = body.getBoundingClientRect().width;
-  if (window.ResizeObserver) {
-    var ro = new ResizeObserver(function () {
-      var w = body.getBoundingClientRect().width;
-      if (Math.abs(w - lastW) < 0.5) return;
-      lastW = w;
-      renumber();
-    });
-    ro.observe(body);
-  } else {
-    window.addEventListener('resize', renumber);
-  }
-})();
@@ -1,65 +0,0 @@
-// #53/#139: paste viewer page logic. Paste id arrives via <body data-paste-id>.
-function toast(msg) {
-  let t = document.querySelector('.toast');
-  if (!t) { t = document.createElement('div'); t.className = 'toast'; document.body.appendChild(t); }
-  t.textContent = msg;
-  t.classList.add('show');
-  clearTimeout(t._h);
-  t._h = setTimeout(() => t.classList.remove('show'), 2000);
-}
-function toggleStats() {
-  const body = document.getElementById('stats-body');
-  const pill = document.getElementById('stats-pill');
-  const btn = document.getElementById('stats-toggle');
-  const open = body.hidden;
-  body.hidden = !open;
-  pill.classList.toggle('open', open);
-  btn.setAttribute('aria-expanded', open ? 'true' : 'false');
-}
-function copyFeedback(btn) {
-  if (!btn) return;
-  // #260 attempt 2: .swapbtn stacks the label and checkmark in the same grid
-  // cell, so the button width is always the wider of the two and never moves.
-  // Feedback is a pure class toggle; no width pinning, no textContent swap.
-  btn.classList.add('ok');
-  clearTimeout(btn._okh);
-  btn._okh = setTimeout(() => btn.classList.remove('ok'), 2000);
-}
-function copyContent(btn) {
-  navigator.clipboard.writeText(document.getElementById('raw-content').value)
-    .then(() => copyFeedback(btn))
-    .catch(() => toast('Copy failed'));
-}
-// #243: copy the paste LINK (full URL), not the paste id or content
-function copyLink(btn) {
-  const url = location.origin + location.pathname;
-  navigator.clipboard.writeText(url)
-    .then(() => copyFeedback(btn))
-    .catch(() => toast('Copy failed'));
-}
-function redeem() {
-  if (!confirm('Hard delete this paste immediately?')) return;
-  let tok = '';
-  try { tok = sessionStorage.getItem('deletion_token_' + PASTE_ID) || ''; } catch(e) {}
-  if (!tok) { alert('deletion token not available in this browser'); return; }
-  fetch('/api/pastes/' + PASTE_ID + '/redeem', {method: 'DELETE', headers: {'Authorization': 'Bearer ' + tok}})
-    .then(r => { if (r.ok) location.href = '/public'; else alert('delete failed'); });
-}
-
-// wiring (moved from inline handlers for CSP #139)
-var PASTE_ID = document.currentScript.getAttribute('data-paste-id');
-var copyBtn = document.getElementById('copy-btn');
-if (copyBtn) copyBtn.addEventListener('click', function (e) { e.preventDefault(); copyContent(copyBtn); });
-var copyLinkBtn = document.getElementById('copy-link-btn');
-if (copyLinkBtn) copyLinkBtn.addEventListener('click', function (e) { e.preventDefault(); copyLink(copyLinkBtn); });
-var delBtn = document.getElementById('delete-btn');
-
-// #168: show the compact paste-created pill in the bottom corner, then fade it out
-const createdPill = document.getElementById('created-pill');
-if (createdPill) {
-  requestAnimationFrame(() => createdPill.classList.add('show'));
-  setTimeout(() => createdPill.classList.remove('show'), 4000);
-}
-if (delBtn) delBtn.addEventListener('click', function (e) { e.preventDefault(); redeem(); });
-var statsToggle = document.getElementById('stats-toggle');
-if (statsToggle) statsToggle.addEventListener('click', toggleStats);
@@ -1,105 +0,0 @@
-// #112/#127/#139: theme switcher. Swatch colors are derived from computed CSS vars per preset.
-(function () {
-  // #112: derive each preset's swatches from the real CSS variables in
-  // app.css by temporarily applying data-preset, so they can never drift.
-  // #127: 5 theme pairs, light swatches top row, dark bottom row.
-  var pairs = [
-    { id: 'midnight',        name: 'Midnight' },
-    { id: 'smooth',          name: 'Smooth' },
-    { id: 'pastel-lavender', name: 'Pastel Lavender' },
-    { id: 'pastel-peach',    name: 'Pastel Peach' },
-    { id: 'pastel-cloud',    name: 'Pastel Cloud' }
-  ];
-  var SWATCH_VARS = ['--bg', '--surface', '--surface-2', '--muted', '--accent'];
-
-  function presetColors(id) {
-    var root = document.documentElement;
-    var prev = root.getAttribute('data-preset');
-    root.setAttribute('data-preset', id);
-    var cs = getComputedStyle(root);
-    var colors = SWATCH_VARS.map(function (v) { return cs.getPropertyValue(v).trim(); });
-    if (prev === null) root.removeAttribute('data-preset'); else root.setAttribute('data-preset', prev);
-    return colors;
-  }
-
-  // current base pair + dark flag from the resolved data-preset.
-  // "midnight" is itself the dark variant, so check dark ids first.
-  function state() {
-    var p = document.documentElement.dataset.preset || 'midnight';
-    if (p === 'midnight' || /-dark$/.test(p)) {
-      return { base: p === 'midnight' ? 'midnight' : p.replace(/-dark$/, ''), dark: true };
-    }
-    return { base: p === 'midnight-light' ? 'midnight' : p, dark: false };
-  }
-
-  var grid = document.getElementById('theme-grid');
-  var cards = {};
-  // #132: midnight is dark-first (root preset = midnight = dark; its light
-  // variant is midnight-light), the others are light-first. Resolve the
-  // LIGHT and DARK preset ids generically so the light swatches always
-  // render in the top row of every card.
-  function lightPreset(id) {
-    if (id === 'midnight') return 'midnight-light';
-    return id; // light-first bases use themselves as the light variant
-  }
-  function darkPreset(id) {
-    if (id === 'midnight') return 'midnight'; // root preset is midnight's dark
-    return id + '-dark';
-  }
-  pairs.forEach(function (t) {
-    var light = presetColors(lightPreset(t.id));
-    var dark = presetColors(darkPreset(t.id));
-    var btn = document.createElement('button');
-    btn.type = 'button';
-    btn.className = 'theme-card';
-    btn.setAttribute('aria-pressed', 'false');
-    btn.setAttribute('data-pair', t.id);
-    // #139: build the swatches via DOM APIs (CSSOM styles) instead of
-    // innerHTML strings: re-parsing serialized inline styles would trip
-    // style-src 'self'.
-    var label = document.createElement('strong');
-    label.textContent = t.name;
-    btn.appendChild(label);
-    [light, dark].forEach(function (colors) {
-      var row = document.createElement('span');
-      row.className = 'swatches';
-      colors.forEach(function (c) {
-        var sw = document.createElement('span');
-        sw.className = 'swatch';
-        sw.style.backgroundColor = c;
-        row.appendChild(sw);
-      });
-      btn.appendChild(row);
-    });
-    btn.addEventListener('click', function () {
-      var dark = state().dark;
-      document.documentElement.dataset.preset = dark ? t.id + '-dark' : t.id;
-      try { localStorage.setItem('palette-theme', t.id); } catch (e) {}
-      Object.keys(cards).forEach(function (k) { cards[k].setAttribute('aria-pressed', 'false'); });
-      btn.setAttribute('aria-pressed', 'true');
-    });
-    cards[t.id] = btn;
-    grid.appendChild(btn);
-  });
-
-  function sync() {
-    var s = state();
-    Object.keys(cards).forEach(function (k) {
-      cards[k].setAttribute('aria-pressed', k === s.base ? 'true' : 'false');
-    });
-    var dt = document.getElementById('settings-dark-toggle');
-    if (dt) dt.setAttribute('aria-pressed', s.dark ? 'true' : 'false');
-  }
-  sync();
-  // topbar.js already binds every .dark-toggle (deferred, so the settings
-  // button exists by then). Only wire here if it somehow did not run,
-  // otherwise the button would toggle twice per click and never change (#197).
-  var dt = document.getElementById('settings-dark-toggle');
-  if (dt && !dt.dataset.darkWired) {
-    dt.addEventListener('click', function () {
-      var btns = document.querySelectorAll('.topbar .dark-toggle');
-      if (btns.length) btns[0].click(); else document.dispatchEvent(new CustomEvent('palette-darkchange'));
-    });
-  }
-  document.addEventListener('palette-darkchange', sync);
-})();
@@ -16,7 +16,7 @@ const PaletteTable = (() => {
  const sortVal = (it, k) => {
    let v = it[k];
    if (k === 'title' || k === 'custom_slug') v = (v == null || v === '') ? null : String(v).toLowerCase();
-    if (k === 'language' || k === 'type') v = (v == null || v === '') ? 'text' : String(v).toLowerCase();
+    if (k === 'language') v = (v == null || v === '') ? 'text' : String(v).toLowerCase();
    if (k === 'size' || k === 'view_count' || k === 'created_at') return v == null ? -1 : v;
    return v == null ? null : v;
  };
@@ -79,10 +79,10 @@ const PaletteTable = (() => {
        const rows = $('rows'), empty = $('empty');
        if (!items.length) {
          rows.innerHTML = '';
-          empty.classList.remove('hidden');
+          empty.style.display = 'block';
          empty.textContent = filtered ? opts.emptyFiltered : opts.emptyAll;
        } else {
-          empty.classList.add('hidden');
+          empty.style.display = 'none';
          rows.innerHTML = items.map(opts.rowHtml).join('');
        }

@@ -97,14 +97,14 @@ const PaletteTable = (() => {
            const view = items.slice(fOff, fOff + opts.perPage);
            rows.innerHTML = view.length ? view.map(opts.rowHtml).join('') : '';
            if (!view.length) {
-              empty.classList.remove('hidden');
+              empty.style.display = 'block';
              empty.textContent = filtered ? opts.emptyFiltered : opts.emptyAll;
            }
            showing.textContent = `Showing ${view.length === 0 ? 0 : fOff+1}–${fOff+view.length} of ${items.length.toLocaleString()} ${filtered ? 'matches' : 'sorted'} · page ${state.page} of ${filtPages}`;
            const btns = [];
            const add = (label, target, o={}) => btns.push(`<button ${o.on?'class="on"':''} ${o.dis?'disabled':''} data-p="${target}">${label}</button>`);
            add('‹', state.page-1, {dis: state.page===1});
-            const win = new Set([1, state.page-1, state.page, state.page+1, filtPages]);
+            const win = new Set([1, 2, state.page-1, state.page, state.page+1, filtPages]);
            let last = 0;
            for (let i = 1; i <= filtPages; i++) {
              if (win.has(i)) {
@@ -121,7 +121,7 @@ const PaletteTable = (() => {
            const btns = [];
            const add = (label, target, o={}) => btns.push(`<button ${o.on?'class="on"':''} ${o.dis?'disabled':''} data-p="${target}">${label}</button>`);
            add('‹', state.page-1, {dis: state.page===1});
-            const win = new Set([1, state.page-1, state.page, state.page+1, pages]);
+            const win = new Set([1, 2, state.page-1, state.page, state.page+1, pages]);
            let last = 0;
            for (let i = 1; i <= pages; i++) {
              if (win.has(i)) {
@@ -1,78 +0,0 @@
-// #16/#100/#127: theme preset resolution. Runs in <head> (blocking) so the
-// correct data-preset is set before first paint. The server default dark flag
-// arrives via the script tag's data-default-dark attribute so no inline script is needed.
-// #130: shared line wrap preference (localStorage 'palette-wrap', default off).
-// preset hook (#16): ?theme= wins; else persisted choice (#100).
-// #127: theme pairs - each base theme has a light and dark variant;
-// palette-theme stores the base id, palette-dark the dark flag.
-(function () {
-  var PAIRS = {
-    'midnight':        { light: 'midnight-light',       dark: 'midnight' },
-    'smooth':          { light: 'smooth',               dark: 'smooth-dark' },
-    'pastel-lavender': { light: 'pastel-lavender',      dark: 'pastel-lavender-dark' },
-    'pastel-peach':    { light: 'pastel-peach',         dark: 'pastel-peach-dark' },
-    'pastel-cloud':    { light: 'pastel-cloud',         dark: 'pastel-cloud-dark' }
-  };
-  function resolve(t, dark) {
-    for (var base in PAIRS) {
-      if (t === PAIRS[base].light || t === PAIRS[base].dark) return t;
-      if (t === base) return dark ? PAIRS[base].dark : PAIRS[base].light;
-    }
-    return null;
-  }
-  var t = new URLSearchParams(location.search).get('theme');
-  // precedence: URL ?theme= > stored pair+dark prefs > server default dark > dark on
-  var dark = (document.currentScript && document.currentScript.getAttribute('data-default-dark')) === '1';
-  try {
-    var stored = localStorage.getItem('palette-dark');
-    if (stored !== null) dark = stored !== 'false';
-  } catch (e) {}
-  if (t) {
-    // URL ?theme= wins and accepts both base and variant ids; a variant id
-    // also sets the dark flag and normalizes t back to its base pair id.
-    var found = false;
-    for (var base in PAIRS) {
-      if (t === PAIRS[base].dark) { dark = true; t = base; found = true; break; }
-      if (t === PAIRS[base].light) { dark = false; t = base; found = true; break; }
-      if (t === base) { found = true; break; }
-    }
-    if (!found) t = null;
-  }
-  if (!t) {
-    try { t = localStorage.getItem('palette-theme'); } catch (e) {}
-  }
-  if (!PAIRS[t]) t = 'midnight';
-  // do not persist anything here: URL theme is a one-off override
-  document.documentElement.dataset.preset = dark ? PAIRS[t].dark : PAIRS[t].light;
-})();
-// #130: shared line wrap preference (localStorage 'palette-wrap', default off)
-(function () {
-  function wrapOn() {
-    try { return localStorage.getItem('palette-wrap') === '1'; } catch (e) { return false; }
-  }
-  function wrapApply(on) {
-    if (on) document.documentElement.setAttribute('data-wrap', '1');
-    else document.documentElement.removeAttribute('data-wrap');
-    document.querySelectorAll('.wrap-toggle').forEach(function (b) {
-      b.setAttribute('aria-pressed', on ? 'true' : 'false');
-    });
-    var s = document.getElementById('wrap-setting');
-    if (s) s.checked = on;
-  }
-  window.paletteWrapToggle = function () {
-    var on = !wrapOn();
-    try { localStorage.setItem('palette-wrap', on ? '1' : '0'); } catch (e) {}
-    wrapApply(on);
-    return on;
-  };
-  document.addEventListener('DOMContentLoaded', function () {
-    wrapApply(wrapOn());
-    document.querySelectorAll('.wrap-toggle').forEach(function (b) {
-      b.addEventListener('click', function () { window.paletteWrapToggle(); });
-    });
-    var s = document.getElementById('wrap-setting');
-    if (s) s.addEventListener('change', function () {
-      if (s.checked !== wrapOn()) window.paletteWrapToggle();
-    });
-  });
-})();
@@ -1,47 +0,0 @@
-// #127: dark mode toggle: flips to the other variant of the active pair.
-// #127: dark mode toggle - flips to the other variant of the active pair.
-  (function () {
-    var PAIRS = {
-      'midnight':        { light: 'midnight-light',       dark: 'midnight' },
-      'smooth':          { light: 'smooth',               dark: 'smooth-dark' },
-      'pastel-lavender': { light: 'pastel-lavender',      dark: 'pastel-lavender-dark' },
-      'pastel-peach':    { light: 'pastel-peach',         dark: 'pastel-peach-dark' },
-      'pastel-cloud':    { light: 'pastel-cloud',         dark: 'pastel-cloud-dark' }
-    };
-    var root = document.documentElement;
-    function state() {
-      var p = root.dataset.preset || 'midnight';
-      for (var base in PAIRS) {
-        if (p === PAIRS[base].dark) return { base: base, dark: true };
-        if (p === PAIRS[base].light) return { base: base, dark: false };
-      }
-      return { base: 'midnight', dark: true };
-    }
-    function apply() {
-      var s = state();
-      document.body.classList.toggle('dark', s.dark);
-      root.classList.toggle('dark', s.dark);
-    }
-    function sync(btns) {
-      btns.forEach(function (b) {
-        b.setAttribute('aria-pressed', state().dark ? 'true' : 'false');
-      });
-    }
-    var btns = document.querySelectorAll('.dark-toggle');
-    apply();
-    sync(Array.prototype.slice.call(btns));
-    btns.forEach(function (b) {
-      // mark as wired so settings.js does not add a second handler
-      // (#197: double-binding made the settings toggle flip twice = no-op)
-      b.dataset.darkWired = '1';
-      b.addEventListener('click', function () {
-        var s = state();
-        var dark = !s.dark;
-        root.dataset.preset = dark ? PAIRS[s.base].dark : PAIRS[s.base].light;
-        try { localStorage.setItem('palette-dark', dark ? 'true' : 'false'); } catch (e) {}
-        apply();
-        sync(Array.prototype.slice.call(btns));
-        document.dispatchEvent(new CustomEvent('palette-darkchange'));
-      });
-    });
-  })();
@@ -1,7 +0,0 @@
-// #139: unlock page: password reveal toggle.
-document.getElementById('pwreveal').addEventListener('click', () => {
-  const pw = document.getElementById('password');
-  const show = pw.type === 'password';
-  pw.type = show ? 'text' : 'password';
-  document.getElementById('pwreveal').title = show ? 'Hide password' : 'Show password';
-});
@@ -12,7 +12,7 @@
        <span id="admin-key-status"></span>
      </form>

-      <div id="admin-panel" class="hidden">
+      <div id="admin-panel" style="display:none">
        <h2>Settings</h2>
        <form id="admin-settings-form">
          <table>
@@ -30,5 +30,79 @@
    </div>
  </div>
 </div>
-<script src="/static/admin.js" defer></script>
+<script>
+(function () {
+  var KEY = 'palette_admin_key';
+  var keyInput = document.getElementById('admin-key');
+  var status = document.getElementById('admin-key-status');
+  var panel = document.getElementById('admin-panel');
+
+  function key() { return sessionStorage.getItem(KEY) || ''; }
+
+  function api(path, opts) {
+    opts = opts || {};
+    // allow callers to override the key header (e.g. validating a typed key, #99)
+    opts.headers = Object.assign({ 'X-Admin-Key': key() }, opts.headers || {});
+    if (opts.body) opts.headers['Content-Type'] = 'application/json';
+    return fetch(path, opts);
+  }
+
+  function loadSettings() {
+    api('/admin/api/settings').then(function (r) {
+      if (r.status !== 200) { showLock(); return; }
+      return r.json();
+    }).then(function (s) {
+      if (!s) return;
+      document.getElementById('rl-burst').value = s.rate_limit_burst;
+      document.getElementById('rl-refill').value = s.rate_limit_per_minute;
+      document.getElementById('max-content').value = s.max_content_bytes;
+      document.getElementById('default-expiry').value = s.default_expiry;
+      document.getElementById('slug-days').value = s.custom_slug_reservation_days;
+      document.getElementById('burn-window').value = s.burn_viewer_window_minutes;
+      panel.style.display = '';
+    });
+  }
+
+  function showLock() {
+    panel.style.display = 'none';
+    sessionStorage.removeItem(KEY);
+  }
+
+  document.getElementById('admin-key-form').addEventListener('submit', function (e) {
+    e.preventDefault();
+    // #99: don't persist the key until the server accepts it
+    api('/admin/api/settings', { headers: { 'X-Admin-Key': keyInput.value } }).then(function (r) {
+      if (r.status === 200) {
+        sessionStorage.setItem(KEY, keyInput.value);
+        status.textContent = '✓';
+        keyInput.value = '';
+        loadSettings();
+      } else {
+        status.textContent = 'invalid key';
+        showLock();
+      }
+    });
+  });
+
+  document.getElementById('admin-settings-form').addEventListener('submit', function (e) {
+    e.preventDefault();
+    var body = {
+      rate_limit_burst: parseFloat(document.getElementById('rl-burst').value),
+      rate_limit_per_minute: parseFloat(document.getElementById('rl-refill').value),
+      max_content_bytes: parseInt(document.getElementById('max-content').value, 10),
+      default_expiry: document.getElementById('default-expiry').value,
+      custom_slug_reservation_days: parseInt(document.getElementById('slug-days').value, 10),
+      burn_viewer_window_minutes: parseInt(document.getElementById('burn-window').value, 10)
+    };
+    api('/admin/api/settings', { method: 'POST', body: JSON.stringify(body) }).then(function (r) {
+      document.getElementById('admin-save-status').textContent = r.status === 200 ? 'saved' : 'error';
+      if (r.status !== 200) showLock();
+    });
+  });
+
+  // #112: always show the lock on fresh load — do not auto-restore the
+  // panel from a stale sessionStorage key. The key is only written after a
+  // successful unlock (above) so in-page actions still work within this visit.
+})();
+</script>
 {{template "foot" .}}
@@ -1,7 +1,7 @@
 {{template "head" .}}
 {{template "topbar" .}}
 <div class="center">
-  <div class="float can-page">
+  <div class="float can-page" style="max-width:900px; width:100%;">
    <div class="inner">
      <h1>{{.Title}} <span class="badge" title="This is a can — a bundle of pastes">can</span></h1>
      {{if .HasDescription}}<p class="sub">{{.Description}}</p>{{end}}
@@ -1 +1,21 @@
-{{define "foot"}}<script src="/static/foot.js" defer></script>{{end}}
+{{define "foot"}}<script>
+// live relative-time counters (#46): tick any [data-ts] (epoch seconds) every second
+(function () {
+  function fmt(ts) {
+    const s = Math.max(0, Math.floor(Date.now() / 1000) - ts);
+    if (s < 60) return s + 's ago';
+    if (s < 3600) return Math.floor(s / 60) + 'm ago';
+    if (s < 86400) return Math.floor(s / 3600) + 'h ago';
+    return Math.floor(s / 86400) + 'd ago';
+  }
+  function tick() {
+    document.querySelectorAll('[data-ts]').forEach(el => {
+      const ts = parseInt(el.dataset.ts, 10);
+      if (!isNaN(ts)) el.textContent = fmt(ts);
+    });
+  }
+  setInterval(tick, 1000);
+  document.addEventListener('DOMContentLoaded', tick);
+  tick();
+})();
+</script>{{end}}
@@ -8,19 +8,19 @@
  <div class="search"><input id="filter" placeholder="Search…"><span class="search-spinner" id="search-spinner"></span></div>
  <div class="float">
    <table>
-      <colgroup><col class="col-a"><col class="col-b"><col class="col-c"><col class="col-d"><col class="col-e"><col class="col-url"><col class="col-g"></colgroup>
+      <colgroup><col style="width:260px"><col style="width:140px"><col style="width:120px"><col style="width:96px"><col style="width:140px"><col style="width:190px"><col style="width:100px"></colgroup>
      <thead><tr>
-        <th data-sort="title" class="sortable">Paste<span class="sort-ind"></span></th>
-        <th data-sort="type" class="sortable">Type<span class="sort-ind"></span></th>
-        <th data-sort="size" class="sortable">Size<span class="sort-ind"></span></th>
-        <th data-sort="view_count" class="sortable">Views<span class="sort-ind"></span></th>
-        <th data-sort="created_at" class="sortable">Created<span class="sort-ind"></span></th>
-        <th data-sort="custom_slug" class="sortable">URL<span class="sort-ind"></span></th>
-        <th data-sort="id" class="sortable">ID<span class="sort-ind"></span></th>
+        <th data-sort="title" class="sortable"><span class="sort-ind"></span>Paste</th>
+        <th data-sort="language" class="sortable"><span class="sort-ind"></span>Language</th>
+        <th data-sort="size" class="sortable"><span class="sort-ind"></span>Size</th>
+        <th data-sort="view_count" class="sortable"><span class="sort-ind"></span>Views</th>
+        <th data-sort="created_at" class="sortable"><span class="sort-ind"></span>Created</th>
+        <th data-sort="custom_slug" class="sortable"><span class="sort-ind"></span>URL</th>
+        <th data-sort="id" class="sortable"><span class="sort-ind"></span>ID</th>
      </tr></thead>
      <tbody id="rows"></tbody>
    </table>
-    <div class="empty hidden" id="empty">No pastes yet. Create the first one.</div>
+    <div class="empty" id="empty" style="display:none">No pastes yet. Create the first one.</div>
  </div>
  <div class="pager float">
    <span id="showing"></span>
@@ -28,5 +28,25 @@
  </div>
 </div>
 <script src="/static/table.js"></script>
-<script src="/static/history.js" defer></script>
+<script>
+const t = PaletteTable.init({
+  endpoint: '/api/public',
+  perPage: 25,
+  hasPager: true,
+  rowHtml: it =>
+    `<tr class="row" data-href="/${t.esc(it.id)}"><td>` +
+    (it.title
+      ? `${t.esc(it.title)}${it.is_can ? ' <span class="badge" title="Can — bundle of items">can</span>' : ''}`
+      : `<a class="slug paste-name" href="/${t.esc(it.id)}">${t.esc(it.id)}</a>${it.is_can ? ' <span class="badge" title="Can — bundle of items">can</span>' : ''}`) +
+    `</td>` +
+    `<td><span class="badge">${t.esc(it.language || 'text')}</span></td>` +
+    `<td class="dim">${t.fmtSize(it.size)}</td><td class="dim">${it.view_count}</td><td class="dim" data-ts="${it.created_at}">${t.ago(it.created_at)}</td>` +
+    (it.custom_slug ? `<td><a class="slug url-link" href="/${t.esc(it.custom_slug)}">/${t.esc(it.custom_slug)}</a></td>` : `<td class="dim">none</td>`) +
+    `<td class="dim"><a class="id-link" href="/${t.esc(it.id)}">${t.esc(it.id)}</a></td></tr>`,
+  emptyFiltered: 'No pastes match your search.',
+  emptyAll: 'No pastes yet. Create the first one.',
+});
+t.load();
+setInterval(t.load, 30000); // auto-refresh history every 30s
+</script>
 {{template "foot" .}}
@@ -2,17 +2,91 @@
 <meta charset="utf-8">
 <meta name="viewport" content="width=device-width, initial-scale=1">
 <link rel="stylesheet" href="/static/app.css">
-<link rel="icon" type="image/svg+xml" href="/static/favicon.svg">
-<script src="/static/theme.js" data-default-dark="{{ if defaultDark }}1{{ else }}0{{ end }}"></script>
+<script>
+// preset hook (#16): ?theme= wins; else persisted choice (#100).
+// #127: theme pairs - each base theme has a light and dark variant;
+// palette-theme stores the base id, palette-dark the dark flag.
+(function () {
+  var PAIRS = {
+    'midnight':        { light: 'midnight-light',       dark: 'midnight' },
+    'smooth':          { light: 'smooth',               dark: 'smooth-dark' },
+    'pastel-lavender': { light: 'pastel-lavender',      dark: 'pastel-lavender-dark' },
+    'pastel-peach':    { light: 'pastel-peach',         dark: 'pastel-peach-dark' },
+    'pastel-cloud':    { light: 'pastel-cloud',         dark: 'pastel-cloud-dark' }
+  };
+  function resolve(t, dark) {
+    for (var base in PAIRS) {
+      if (t === PAIRS[base].light || t === PAIRS[base].dark) return t;
+      if (t === base) return dark ? PAIRS[base].dark : PAIRS[base].light;
+    }
+    return null;
+  }
+  var t = new URLSearchParams(location.search).get('theme');
+  // precedence: URL ?theme= > stored pair+dark prefs > server default dark > dark on
+  var dark = {{ defaultDark }};
+  try {
+    var stored = localStorage.getItem('palette-dark');
+    if (stored !== null) dark = stored !== 'false';
+  } catch (e) {}
+  if (t) {
+    // URL ?theme= wins and accepts both base and variant ids; a variant id
+    // also sets the dark flag and normalizes t back to its base pair id.
+    var found = false;
+    for (var base in PAIRS) {
+      if (t === PAIRS[base].dark) { dark = true; t = base; found = true; break; }
+      if (t === PAIRS[base].light) { dark = false; t = base; found = true; break; }
+      if (t === base) { found = true; break; }
+    }
+    if (!found) t = null;
+  }
+  if (!t) {
+    try { t = localStorage.getItem('palette-theme'); } catch (e) {}
+  }
+  if (!PAIRS[t]) t = 'midnight';
+  // do not persist anything here: URL theme is a one-off override
+  document.documentElement.dataset.preset = dark ? PAIRS[t].dark : PAIRS[t].light;
+})();
+// #130: shared line wrap preference (localStorage 'palette-wrap', default off)
+(function () {
+  function wrapOn() {
+    try { return localStorage.getItem('palette-wrap') === '1'; } catch (e) { return false; }
+  }
+  function wrapApply(on) {
+    if (on) document.documentElement.setAttribute('data-wrap', '1');
+    else document.documentElement.removeAttribute('data-wrap');
+    document.querySelectorAll('.wrap-toggle').forEach(function (b) {
+      b.setAttribute('aria-pressed', on ? 'true' : 'false');
+    });
+    var s = document.getElementById('wrap-setting');
+    if (s) s.checked = on;
+  }
+  window.paletteWrapToggle = function () {
+    var on = !wrapOn();
+    try { localStorage.setItem('palette-wrap', on ? '1' : '0'); } catch (e) {}
+    wrapApply(on);
+    return on;
+  };
+  document.addEventListener('DOMContentLoaded', function () {
+    wrapApply(wrapOn());
+    document.querySelectorAll('.wrap-toggle').forEach(function (b) {
+      b.addEventListener('click', function () { window.paletteWrapToggle(); });
+    });
+    var s = document.getElementById('wrap-setting');
+    if (s) s.addEventListener('change', function () {
+      if (s.checked !== wrapOn()) window.paletteWrapToggle();
+    });
+  });
+})();
+</script>
 {{end}}

 {{define "topbar"}}
  <div class="topbar">
-    <a class="logo" href="/public">Palette <em>/ {{ version }}</em></a>
+    <a class="logo" href="/history">Palette <em>/ {{ version }}</em></a>
    <nav>
      <a href="/new" {{if eq .Page "new"}}class="on"{{end}}>New</a>
-      <a href="/public" {{if eq .Page "public"}}class="on"{{end}}>Public</a>
-      <a href="/saved" {{if eq .Page "saved"}}class="on"{{end}}>Saved</a>
+      <a href="/history" {{if eq .Page "history"}}class="on"{{end}}>Public</a>
+      <a href="/mine" {{if eq .Page "mine"}}class="on"{{end}}>Saved</a>
      <a href="https://git.archfox.org/poslop/palette" target="_blank" rel="noopener">Git<svg class="ext" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"/><polyline points="15 3 21 3 21 9"/><line x1="10" y1="14" x2="21" y2="3"/></svg></a>
    </nav>
    <div class="spacer"></div>
@@ -24,5 +98,49 @@
      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="12" cy="12" r="3"/><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"/></svg>
    </a>
  </div>
-  <script src="/static/topbar.js" defer></script>
+  <script>
+  // #127: dark mode toggle - flips to the other variant of the active pair.
+  (function () {
+    var PAIRS = {
+      'midnight':        { light: 'midnight-light',       dark: 'midnight' },
+      'smooth':          { light: 'smooth',               dark: 'smooth-dark' },
+      'pastel-lavender': { light: 'pastel-lavender',      dark: 'pastel-lavender-dark' },
+      'pastel-peach':    { light: 'pastel-peach',         dark: 'pastel-peach-dark' },
+      'pastel-cloud':    { light: 'pastel-cloud',         dark: 'pastel-cloud-dark' }
+    };
+    var root = document.documentElement;
+    function state() {
+      var p = root.dataset.preset || 'midnight';
+      for (var base in PAIRS) {
+        if (p === PAIRS[base].dark) return { base: base, dark: true };
+        if (p === PAIRS[base].light) return { base: base, dark: false };
+      }
+      return { base: 'midnight', dark: true };
+    }
+    function apply() {
+      var s = state();
+      document.body.classList.toggle('dark', s.dark);
+      root.classList.toggle('dark', s.dark);
+    }
+    function sync(btns) {
+      btns.forEach(function (b) {
+        b.setAttribute('aria-pressed', state().dark ? 'true' : 'false');
+      });
+    }
+    var btns = document.querySelectorAll('.dark-toggle');
+    apply();
+    sync(Array.prototype.slice.call(btns));
+    btns.forEach(function (b) {
+      b.addEventListener('click', function () {
+        var s = state();
+        var dark = !s.dark;
+        root.dataset.preset = dark ? PAIRS[s.base].dark : PAIRS[s.base].light;
+        try { localStorage.setItem('palette-dark', dark ? 'true' : 'false'); } catch (e) {}
+        apply();
+        sync(Array.prototype.slice.call(btns));
+        document.dispatchEvent(new CustomEvent('palette-darkchange'));
+      });
+    });
+  })();
+  </script>
 {{end}}
@@ -8,19 +8,18 @@
  <div class="search"><input id="filter" placeholder="Search…"><span class="search-spinner" id="search-spinner"></span></div>
  <div class="float">
    <table>
-      <colgroup><col class="col-a"><col class="col-b"><col class="col-c"><col class="col-d2"><col class="col-e"><col class="col-f"><col class="col-del"></colgroup>
+      <colgroup><col style="width:260px"><col style="width:140px"><col style="width:120px"><col style="width:150px"><col style="width:190px"><col style="width:100px"></colgroup>
      <thead><tr>
-        <th data-sort="title" class="sortable">Paste<span class="sort-ind"></span></th>
-        <th data-sort="type" class="sortable">Type<span class="sort-ind"></span></th>
-        <th data-sort="size" class="sortable">Size<span class="sort-ind"></span></th>
-        <th data-sort="created_at" class="sortable">Created<span class="sort-ind"></span></th>
-        <th data-sort="custom_slug" class="sortable">URL<span class="sort-ind"></span></th>
-        <th data-sort="id" class="sortable">ID<span class="sort-ind"></span></th>
-        <th aria-label="Delete"></th>
+        <th data-sort="title" class="sortable"><span class="sort-ind"></span>Paste</th>
+        <th data-sort="language" class="sortable"><span class="sort-ind"></span>Language</th>
+        <th data-sort="size" class="sortable"><span class="sort-ind"></span>Size</th>
+        <th data-sort="created_at" class="sortable"><span class="sort-ind"></span>Created</th>
+        <th data-sort="custom_slug" class="sortable"><span class="sort-ind"></span>URL</th>
+        <th data-sort="id" class="sortable"><span class="sort-ind"></span>ID</th>
      </tr></thead>
      <tbody id="rows"></tbody>
    </table>
-    <div class="empty hidden" id="empty">No pastes from this browser yet.</div>
+    <div class="empty" id="empty" style="display:none">No pastes from this browser yet.</div>
  </div>
  <div class="pager float">
    <span id="showing"></span>
@@ -28,5 +27,51 @@
  </div>
 </div>
 <script src="/static/table.js"></script>
-<script src="/static/mine.js" defer></script>
+<script>
+function toast(msg, kind) {
+  let t = document.querySelector('.toast');
+  if (!t) { t = document.createElement('div'); t.className = 'toast'; document.body.appendChild(t); }
+  t.textContent = msg;
+  t.classList.remove('success', 'error');
+  if (kind === 'success') t.classList.add('success');
+  if (kind === 'error') t.classList.add('error');
+  t.classList.add('show');
+  clearTimeout(t._h);
+  t._h = setTimeout(() => t.classList.remove('show'), 2000);
+}
+
+const t = PaletteTable.init({
+  endpoint: '/api/mine',
+  perPage: 25,
+  hasPager: true,
+  rowHtml: it =>
+    `<tr class="row" data-href="/${t.esc(it.id)}"><td>` +
+    (it.title
+      ? `${t.esc(it.title)}${it.is_can ? ' <span class="badge" title="Can — bundle of items">can</span>' : ''}`
+      : `<a class="slug paste-name" href="/${t.esc(it.id)}">${t.esc(it.id)}</a>${it.is_can ? ' <span class="badge" title="Can — bundle of items">can</span>' : ''}`) +
+    `</td>` +
+    `<td><span class="badge">${t.esc(it.language || 'text')}</span></td>` +
+    `<td class="dim">${t.fmtSize(it.size)}</td><td class="dim" data-ts="${it.created_at}">${t.ago(it.created_at)}</td>` +
+    (it.custom_slug ? `<td><a class="slug url-link" href="/${t.esc(it.custom_slug)}">/${t.esc(it.custom_slug)}</a></td>` : `<td class="dim">none</td>`) +
+    `<td class="dim"><a class="id-link" href="/${t.esc(it.id)}">${t.esc(it.id)}</a></td>` +
+    `<td><button class="btn btn-icon del" data-id="${t.esc(it.id)}" title="Delete paste" aria-label="Delete paste">&times;</button></td></tr>`,
+  emptyFiltered: 'No pastes from this browser match your search.',
+  emptyAll: 'No pastes from this browser yet.',
+});
+
+// delete buttons (viewer-scoped, enforced server-side #37)
+document.getElementById('rows').addEventListener('click', async e => {
+  const del = e.target.closest('button.del');
+  if (!del) return;
+  e.stopPropagation();
+  del.disabled = true;
+  try {
+    const res = await fetch('/api/pastes/' + del.dataset.id, { method: 'DELETE' });
+    if (res.ok) { toast('Deleted', 'success'); t.load(); }
+    else { toast('Delete failed', 'error'); del.disabled = false; }
+  } catch (err) { toast('Delete failed', 'error'); del.disabled = false; }
+});
+
+t.load();
+</script>
 {{template "foot" .}}
@@ -19,24 +19,20 @@
          <option>markdown</option><option>text</option>
        </select>
        <button class="btn btn-icon" id="reguess" title="Re-detect language" type="button"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M21 12a9 9 0 1 1-2.64-6.36"/><polyline points="21 3 21 9 15 9"/></svg></button>
-        <button type="button" class="btn btn-icon wrap-toggle" id="wrap-toggle" title="Toggle line wrap" aria-pressed="false">Wrap</button>
+        <button type="button" class="btn btn-icon wrap-toggle" id="wrap-toggle" title="Toggle line wrap" aria-pressed="false">wrap</button>
        </div>
      </div>
    </div>
    <div class="float editor-wrap">
      <div class="gutter" id="gutter">1</div>
      <textarea class="editor" id="content" placeholder="Paste your code, text, or notes here…" spellcheck="false"></textarea>
-      <img id="file-preview" class="file-preview hidden" alt="File preview">
    </div>
+    <div class="created-banner" id="created"></div>
    <div class="actionbar">
      <span class="hint">Ctrl+Enter to create</span>
-      <div class="spacer spacer-flex"></div>
+      <div class="spacer" style="flex:1"></div>
      <button class="btn" id="create">Create</button>
    </div>
-    <div class="jumpnav hidden" id="jumpnav" data-jump-scroll="#content">
-      <button type="button" class="btn jump-btn" data-jump="top">Top</button>
-      <button type="button" class="btn jump-btn" data-jump="bottom">Bottom</button>
-    </div>
  </div>

  <div class="pane-r">
@@ -50,7 +46,7 @@
        <label><input type="radio" name="exp" value="720h"> 30 days</label>
        <label><input type="radio" name="exp" value="custom"> Custom</label>
      </div>
-      <div class="pw-row submenu hidden" id="customexp-row">
+      <div class="pw-row submenu" id="customexp-row" style="display:none">
        <div class="exp-group">
          <input type="number" class="num-input" id="expnum" min="1" placeholder="90" aria-label="Custom expiry amount">
          <select id="expunit" class="unit-select">
@@ -61,16 +57,22 @@
            <option value="mo">months</option>
          </select>
        </div>
-        <div class="hint danger-hint hidden" id="customexp-err"></div>
+        <div class="hint" id="customexp-err" style="display:none; color:var(--err, #c0392b); margin-top:6px;"></div>
      </div>
    </div>
    <div class="float side-section">
      <h3>Protection</h3>
      <div class="protect">
        <label class="toggle"><input type="checkbox" id="haspw"> Password lock</label>
-        <div class="pw-row hidden" id="pwrow"><div class="pw-field"><input type="password" id="password" placeholder="Password" autocomplete="new-password"><button type="button" class="reveal" id="pwreveal" title="Show password" tabindex="-1"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M1 12s4-7 11-7 11 7 11 7-4 7-11 7-11-7-11-7z"/><circle cx="12" cy="12" r="3"/><line class="eye-slash" x1="4" y1="4" x2="20" y2="20"/></svg></button></div></div>
+        <div class="pw-row" id="pwrow" style="display:none"><div class="pw-field"><input type="password" id="password" placeholder="Password" autocomplete="new-password"><button type="button" class="reveal" id="pwreveal" title="Show password" tabindex="-1"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M1 12s4-7 11-7 11 7 11 7-4 7-11 7-11-7-11-7z"/><circle cx="12" cy="12" r="3"/><line class="eye-slash" x1="4" y1="4" x2="20" y2="20"/></svg></button></div></div>
        <label class="toggle"><input type="checkbox" id="burn"> Burn after read</label>
-        <div class="pw-row submenu hidden" id="burnrow"><div class="exp-group readable-group"><label class="hint readable-label">Readable</label><input type="number" class="num-input" id="burnreads" min="1" value="1" aria-label="Times readable"><label class="hint readable-label">times</label></div></div>
+        <div class="pw-row submenu" id="burnrow" style="display:none">
+          <div class="exp-group readable-group">
+            <label class="hint readable-label">Readable</label>
+            <input type="number" class="num-input" id="burnreads" min="1" value="1" aria-label="Times readable">
+            <label class="hint readable-label">times</label>
+          </div>
+        </div>
        <label class="toggle"><input type="checkbox" id="unlisted"> Unlisted</label>
      </div>
    </div>
@@ -81,18 +83,414 @@
      </div>
      <input type="file" id="file-input" class="file-input" aria-label="Choose a file">
      <div id="file-chip-slot"></div>
-      <div class="hint hint-lg hidden mt6" id="file-text-note">File pastes ignore the text editor (one file per paste)</div>
+      <div class="hint" style="margin-top:6px; font-size:19px; display:none" id="file-text-note">File pastes ignore the text editor (one file per paste)</div>
    </div>
    <div class="float side-section">
      <h3>Custom URL</h3>
      <input type="text" id="custom" class="custom-input" placeholder="my-snippet">
    </div>
-    <div class="float side-section hidden" id="result-card">
+    <div class="float side-section" id="result-card" style="display:none">
      <h3>Result</h3>
-      <div class="hint wrap-normal" id="result">empty</div>
+      <div class="hint" id="result" style="word-break:normal;overflow-wrap:break-word">empty</div>
    </div>
  </div>
 </div>
-<script src="/static/new.js" defer></script>
-<script src="/static/jump.js" defer></script>
+<script>
+const $ = id => document.getElementById(id);
+const content = $('content'), gutter = $('gutter');
+
+function updateGutter() {
+  const lines = content.value.split('\n').length;
+  let s = '';
+  for (let i = 1; i <= Math.max(lines, 1); i++) s += i + '\n';
+  gutter.textContent = s;
+}
+content.addEventListener('input', updateGutter);
+updateGutter();
+
+function toast(msg, kind) {
+  let t = document.querySelector('.toast');
+  if (!t) { t = document.createElement('div'); t.className = 'toast'; document.body.appendChild(t); }
+  t.textContent = msg;
+  t.classList.remove('success', 'error');
+  if (kind === 'success') t.classList.add('success');
+  if (kind === 'error') t.classList.add('error');
+  t.classList.add('show');
+  clearTimeout(t._h);
+  t._h = setTimeout(() => t.classList.remove('show'), 2000);
+}
+$('haspw').addEventListener('change', e => { $('pwrow').style.display = e.target.checked ? 'block' : 'none'; });
+$('burn').addEventListener('change', e => { $('burnrow').style.display = e.target.checked ? 'block' : 'none'; });
+document.querySelectorAll('input[name="exp"]').forEach(r => r.addEventListener('change', () => {
+  $('customexp-row').style.display = document.querySelector('input[name="exp"]:checked').value === 'custom' ? 'block' : 'none';
+  $('customexp-err').style.display = 'none';
+}));
+
+// compose the expires_in Go-duration string when Custom is checked (#48).
+// Returns the string, or null with an inline error shown.
+function composeCustomExpiry() {
+  const n = parseInt($('expnum').value, 10);
+  const unit = $('expunit').value;
+  let mins = NaN;
+  if (n > 0) {
+    if (unit === 'm') mins = n;
+    else if (unit === 'h') mins = n * 60;
+    else if (unit === 'd') mins = n * 1440;
+    else if (unit === 'w') mins = n * 10080;
+    else if (unit === 'mo') mins = n * 43200; // months counted as 30 days
+  }
+  const err = $('customexp-err');
+  if (!(mins >= 1)) {
+    err.textContent = 'Enter a duration of at least 1 minute.';
+    err.style.display = 'block';
+    return null;
+  }
+  if (mins > 525600) { // more than 1 year
+    err.textContent = 'Custom expiry cannot exceed 1 year.';
+    err.style.display = 'block';
+    return null;
+  }
+  err.style.display = 'none';
+  // compose as h (+d/m remainders); Go parses '336h', '90m', '6h30m' fine
+  const hours = Math.floor(mins / 60), rem = mins % 60;
+  if (rem === 0) return hours + 'h';
+  if (hours === 0) return rem + 'm';
+  return hours + 'h' + rem + 'm';
+}
+
+$('pwreveal').addEventListener('click', () => {
+  const pw = $('password');
+  const show = pw.type === 'password';
+  pw.type = show ? 'text' : 'password';
+  $('pwreveal').classList.toggle('off', !show);
+  $('pwreveal').title = show ? 'Hide password' : 'Show password';
+});
+
+let guessed = ''; // last auto-detected language, '' = user override
+
+// #105: map backend machine-readable error codes to plain-language guidance.
+// Unknown codes fall back to a generic message; the technical detail stays
+// in the API response for API consumers.
+const ERROR_MESSAGES = {
+  slug_taken: 'That Custom URL is already taken. Try another.',
+  slug_reserved: 'That Custom URL is reserved. Try another.',
+  slug_invalid: 'Please keep the Custom URL under 64 characters, using only letters, numbers, dashes, or underscores.',
+  content_empty: 'Write or paste something first.',
+  content_too_large: 'This paste is too large. The limit is 5 MB.',
+  file_too_large: 'File is too large. The limit is 25 MB.',
+  one_file_only: 'Choose either text or a file for now.',
+  expiry_invalid: 'Please pick an expiry between 1 minute and 1 year.',
+  rate_limited: 'Too many tries. Wait a minute and try again.',
+};
+const GENERIC_ERROR = 'Something went wrong. Please try again.';
+
+function friendlyError(data) {
+  return ERROR_MESSAGES[data && data.code] || GENERIC_ERROR;
+}
+
+// #105: color the result box by outcome — success (ok), error (err),
+// warning (warn) — with a colored left border (CSS .result-ok/.result-err).
+function setResultKind(kind) {
+  const card = $('result-card');
+  card.classList.remove('result-ok', 'result-err', 'result-warn');
+  if (kind) card.classList.add('result-' + kind);
+}
+
+function showResult(html, kind) {
+  $('result').innerHTML = html;
+  $('result').dataset.token = kind === 'ok' ? ($('result').dataset.token || '') : ($('result').dataset.token || '');
+  $('result-card').style.display = 'block';
+  setResultKind(kind === 'ok' ? 'ok' : (kind === 'warn' ? 'warn' : 'err'));
+}
+function defaultFilename(lang) {
+  const names = {
+    python: 'Python.py', go: 'main.go', javascript: 'script.js', typescript: 'index.ts',
+    rust: 'main.rs', c: 'main.c', cpp: 'main.cpp', java: 'Main.java', bash: 'script.sh',
+    sql: 'query.sql', yaml: 'config.yaml', json: 'data.json', html: 'index.html',
+    css: 'style.css', xml: 'doc.xml', php: 'index.php', ruby: 'main.rb',
+    perl: 'main.pl', lua: 'main.lua', dockerfile: 'Dockerfile', toml: 'config.toml',
+    ini: 'config.ini', diff: 'changes.diff',
+    markdown: 'notes.md', text: 'Text.txt',
+  };
+  return names[lang] || '';
+}
+// fill default filename when title is still blank
+function maybeSetDefaultTitle(lang) {
+  const title = $('title');
+  if (lang && !title.value.trim()) {
+    const fn = defaultFilename(lang);
+    if (fn) title.value = fn;
+  }
+}
+
+async function guessLang() {
+  if (!content.value.trim()) return;
+  try {
+    const res = await fetch('/api/guess-language', {
+      method: 'POST',
+      headers: {'Content-Type': 'application/json'},
+      body: JSON.stringify({content: content.value}),
+    });
+    const data = await res.json();
+    if (res.ok && data.language) {
+      guessed = data.language;
+      $('language').value = data.language;
+      maybeSetDefaultTitle(data.language);
+    }
+  } catch(e) {}
+}
+
+// refresh button: always re-detect, even if user picked something
+$('reguess').addEventListener('click', guessLang);
+
+// auto-guess when pasting into the editor
+content.addEventListener('paste', () => setTimeout(guessLang, 0));
+
+async function create() {
+  // #4: can mode — bundle the editor + extra items into a can via multipart
+  if ($('iscan').checked) return createCan();
+  // #38: file attached -> file paste (1 file = 1 paste; text is ignored)
+  if (attachedFile) return createFilePaste();
+
+  const body = {
+    content: content.value,
+    title: $('title').value || null,
+    language: $('language').value || null,
+    custom_slug: $('custom').value || null,
+    burn_after_read: $('burn').checked,
+  };
+  if ($('burn').checked) body.burn_after_reads = parseInt($('burnreads').value, 10) || 1;
+  if ($('haspw').checked) body.password = $('password').value;
+  const exp = document.querySelector('input[name="exp"]:checked').value;
+  if (exp === 'custom') {
+    const dur = composeCustomExpiry();
+    if (dur === null) { toast('Check the custom expiry', 'error'); return; }
+    body.expires_in = dur;
+  } else if (exp) {
+    body.expires_in = exp;
+  }
+
+  const res = await fetch('/api/pastes', {
+    method: 'POST',
+    headers: {'Content-Type': 'application/json'},
+    body: JSON.stringify(body),
+  });
+  const data = await res.json();
+  if (!res.ok) {
+    showResult(friendlyError(data), 'err');
+    toast('Create failed', 'error');
+    return;
+  }
+  finishCreate(data);
+}
+
+// shared success handling for both create paths (#38): result box, copy
+// button, password auto-unlock, then redirect to the paste.
+function finishCreate(data) {
+  const url = location.origin + '/' + (data.custom_slug || data.id);
+  showResult('<a href="' + url + '">' + url + '</a> <button class="btn btn-icon" id="result-copy" title="Copy URL" type="button">⧉</button>', 'ok');
+  $('result').dataset.token = data.deletion_token || '';
+  const copyBtn = document.getElementById('result-copy');
+  copyBtn.addEventListener('click', () => {
+    try {
+      navigator.clipboard.writeText(url);
+      copyBtn.classList.add('ok');               // in-place success feedback (#53)
+      copyBtn.textContent = 'Success!';
+      setTimeout(() => { copyBtn.classList.remove('ok'); copyBtn.textContent = '⧉'; }, 2000);
+    } catch(e) { toast('Copy failed', 'error'); }
+  });
+  // token carried via sessionStorage, never in the URL (#143)
+  const dest = '/' + data.id + '?created=1';
+  try { sessionStorage.setItem('deletion_token_' + data.id, data.deletion_token || ''); } catch(e) {}
+  // password-protected: unlock now with the password we already have (#26)
+  if ($('haspw').checked && data.id) {
+    const fd = new FormData();
+    fd.append('password', $('password').value);
+    fd.append('next', dest);
+    try {
+      fetch('/' + data.id, {method: 'POST', body: fd}).finally(() => { location.href = dest; });
+      return;
+    } catch(e) {}
+  }
+  // show the paste
+  location.href = dest;
+}
+$('create').addEventListener('click', create);
+
+// #38: file attachment support — 1 file = 1 paste. Three input paths:
+// Ctrl+V paste of a file, upload button (file picker), drag-and-drop.
+const MAX_FILE_BYTES = 25 * 1024 * 1024;
+let attachedFile = null; // the single attached File, or null
+
+function humanSize(n) {
+  if (n >= 1048576) return (n / 1048576).toFixed(1) + ' MB';
+  if (n >= 1024) return (n / 1024).toFixed(1) + ' KB';
+  return n + ' B';
+}
+
+function setAttachedFile(file) {
+  if (!file) return clearAttachedFile();
+  if (file.size > MAX_FILE_BYTES) {
+    toast('File is too large. The limit is 25 MB.', 'error');
+    return;
+  }
+  attachedFile = file;
+  renderFileChip();
+  $('file-text-note').style.display = 'block';
+}
+
+function clearAttachedFile() {
+  attachedFile = null;
+  $('file-input').value = '';
+  renderFileChip();
+  $('file-text-note').style.display = 'none';
+}
+
+function renderFileChip() {
+  const slot = $('file-chip-slot');
+  slot.innerHTML = '';
+  if (!attachedFile) return;
+  const chip = document.createElement('div');
+  chip.className = 'file-chip';
+  chip.innerHTML = '<span class="file-chip-name"></span>' +
+    '<span class="file-chip-size">' + humanSize(attachedFile.size) + '</span>' +
+    '<button type="button" class="file-chip-remove" title="Remove file">&times;</button>';
+  chip.querySelector('.file-chip-name').textContent = attachedFile.name;
+  chip.querySelector('.file-chip-remove').addEventListener('click', clearAttachedFile);
+  slot.appendChild(chip);
+}
+
+// (1) file picker via the dropzone click
+$('dropzone').addEventListener('click', () => $('file-input').click());
+$('file-input').addEventListener('change', () => {
+  if ($('file-input').files.length) setAttachedFile($('file-input').files[0]);
+});
+
+// (2) drag-and-drop onto the dropzone (and the page broadly)
+const dz = $('dropzone');
+['dragenter', 'dragover'].forEach(ev => {
+  document.addEventListener(ev, e => {
+    if (!e.dataTransfer || ![...e.dataTransfer.types].includes('Files')) return;
+    e.preventDefault();
+    dz.classList.add('dragover');
+  });
+});
+['dragleave', 'drop'].forEach(ev => {
+  document.addEventListener(ev, e => {
+    if (ev === 'drop') e.preventDefault();
+    if (e.target === dz || ev === 'drop') dz.classList.remove('dragover');
+  });
+});
+document.addEventListener('drop', e => {
+  if (!e.dataTransfer || !e.dataTransfer.files.length) return;
+  e.preventDefault();
+  setAttachedFile(e.dataTransfer.files[0]);
+});
+
+// (3) Ctrl+V of a file anywhere on the page
+document.addEventListener('paste', e => {
+  const files = e.clipboardData && e.clipboardData.files;
+  if (!files || !files.length) return; // normal text paste into the editor
+  e.preventDefault();
+  setAttachedFile(files[0]);
+});
+
+// file create path: POST multipart. 1 file = 1 paste: when a file is
+// attached the editor text is ignored (server enforces this too).
+async function createFilePaste() {
+  const fd = new FormData();
+  fd.append('file', attachedFile);
+  if ($('title').value) fd.append('title', $('title').value);
+  if ($('custom').value) fd.append('custom_slug', $('custom').value);
+  if ($('haspw').checked) fd.append('password', $('password').value);
+  if ($('burn').checked) {
+    fd.append('burn_after_read', 'true');
+    fd.append('burn_after_reads', String(parseInt($('burnreads').value, 10) || 1));
+  }
+  if ($('unlisted').checked) fd.append('visibility', 'unlisted');
+  const exp = document.querySelector('input[name="exp"]:checked').value;
+  if (exp === 'custom') {
+    const dur = composeCustomExpiry();
+    if (dur === null) { toast('Check the custom expiry', 'error'); return; }
+    fd.append('expires_in', dur);
+  } else if (exp) {
+    fd.append('expires_in', exp);
+  }
+  const res = await fetch('/api/pastes', { method: 'POST', body: fd });
+  const data = await res.json();
+  if (!res.ok) {
+    showResult(friendlyError(data), 'err');
+    toast('Create failed', 'error');
+    return;
+  }
+  finishCreate(data);
+}
+
+// #4: can creation — POST multipart to /api/pastes/can. The main editor is
+// the first item; each extra can-item row is another text item.
+async function createCan() {
+  const items = [];
+  if (content.value.trim()) {
+    items.push({title: $('title').value || 'main', content: content.value, language: $('language').value || ''});
+  }
+  document.querySelectorAll('#can-items .can-item-row').forEach(row => {
+    const t = row.querySelector('.can-item-title').value.trim();
+    const c = row.querySelector('.can-item-content').value;
+    if (c.trim()) items.push({title: t || ('item-' + (items.length + 1)), content: c});
+  });
+  if (!items.length) { toast('Nothing to put in the can', 'error'); return; }
+
+  const fd = new FormData();
+  fd.append('title', $('title').value || 'Untitled can');
+  fd.append('json_items', JSON.stringify(items));
+  if ($('haspw').checked) fd.append('password', $('password').value);
+  if ($('unlisted').checked) fd.append('visibility', 'unlisted');
+  const exp = document.querySelector('input[name="exp"]:checked').value;
+  if (exp === 'custom') {
+    const dur = composeCustomExpiry();
+    if (dur === null) { toast('Check the custom expiry', 'error'); return; }
+    if (dur) fd.append('expires_in', dur);
+  } else if (exp) {
+    fd.append('expires_in', exp);
+  }
+  if ($('custom').value.trim()) fd.append('custom_slug', $('custom').value.trim());
+
+  const res = await fetch('/api/pastes/can', {method: 'POST', body: fd});
+  const data = await res.json();
+  if (!res.ok) {
+    showResult(friendlyError(data), 'err');
+    toast('Can create failed', 'error');
+    return;
+  }
+  const url = location.origin + data.url;
+  showResult('<a href="' + url + '">' + url + '</a> <button class="btn btn-icon" id="result-copy" title="Copy URL" type="button">⧉</button>', 'ok');
+  const copyBtn = document.getElementById('result-copy');
+  copyBtn.addEventListener('click', () => {
+    try {
+      navigator.clipboard.writeText(url);
+      copyBtn.classList.add('ok');
+      copyBtn.textContent = 'Success!';
+      setTimeout(() => { copyBtn.classList.remove('ok'); copyBtn.textContent = '⧉'; }, 2000);
+    } catch(e) { toast('Copy failed', 'error'); }
+  });
+  // password-protected can: unlock now with the password we already have (#26 parity)
+  if ($('haspw').checked && data.id) {
+    const pd = new FormData();
+    pd.append('password', $('password').value);
+    try { await fetch('/can/' + data.id, {method: 'POST', body: pd}); } catch(e) {}
+  }
+  location.href = data.url;
+}
+// reset stale result state when returning via Back (bfcache) (#28)
+window.addEventListener('pageshow', e => {
+  if (!e.persisted) return;
+  const rc = document.getElementById('result-card');
+  if (rc) rc.style.display = 'none';
+  const r = document.getElementById('result');
+  if (r) { r.innerHTML = 'empty'; delete r.dataset.token; }
+});
+document.addEventListener('keydown', e => {
+  if ((e.ctrlKey || e.metaKey) && e.key === 'Enter') { e.preventDefault(); create(); }
+});
+</script>
 {{template "foot" .}}
@@ -1,13 +0,0 @@
-{{template "head" .}}
-{{template "topbar" .}}
-<div class="center">
-  <div class="float notfound-card">
-    <div class="inner">
-      <div class="lockring"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="12" cy="12" r="10"/><line x1="12" y1="8" x2="12" y2="12"/><line x1="12" y1="16" x2="12.01" y2="16"/></svg></div>
-      <h1>Paste ID not found</h1>
-      <p class="sub">The paste <span class="slug">/{{.ID}}</span> does not exist, has expired, or was burned.</p>
-      <a class="btn" href="/new">Create a new paste</a>
-    </div>
-  </div>
-</div>
-{{template "foot" .}}
@@ -6,22 +6,21 @@
      <h1>{{if .Title}}{{.Title}}{{else}}Untitled paste{{end}}</h1>
      {{if .CustomSlug}}<span class="slug">/{{.CustomSlug}}</span>{{end}}
      <div class="spacer"></div>
-      <button type="button" class="iconbtn wrap-toggle" title="Toggle line wrap" aria-pressed="false">Wrap</button>
-      <a class="iconbtn" href="/raw/{{.ID}}">Raw</a>
-      <a class="iconbtn swapbtn" href="#" id="copy-link-btn"><span class="swap-label">Link</span><span class="swap-check">✓</span></a>
-      <a class="iconbtn swapbtn" href="#" id="copy-btn"><span class="swap-label">Copy</span><span class="swap-check">✓</span></a>
-      {{if .DeletionToken}}<a class="iconbtn danger" href="#" id="delete-btn">Delete</a>{{end}}
+      <button type="button" class="iconbtn wrap-toggle" title="Toggle line wrap" aria-pressed="false">wrap</button>
+      <a class="iconbtn" href="/raw/{{.ID}}">raw</a>
+      <a class="iconbtn" href="#" id="copy-btn" onclick="copyContent(this); return false;">copy</a>
+      {{if .DeletionToken}}<a class="iconbtn danger" href="#" onclick="redeem(); return false;">delete</a>{{end}}
    </div>
  </div>
  <div class="float">
    <div class="stats-pill" id="stats-pill">
-      <button type="button" class="stats-head" id="stats-toggle" aria-expanded="false">
+      <button type="button" class="stats-head" id="stats-toggle" aria-expanded="false" onclick="toggleStats()">
        <svg class="stats-chev" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><polyline points="6 9 12 15 18 9"/></svg>
        <span class="stats-summary">{{.StatsSummary}}</span>
      </button>
      <div class="stats-body" id="stats-body" hidden>
        <div class="stats-grid">
-          <span class="stats-k">Type</span><span class="stats-v">{{.TypeLabel}}</span>
+          <span class="stats-k">Language</span><span class="stats-v">{{if .Language}}{{.Language}}{{else}}text{{end}}</span>
          <span class="stats-k">Size</span><span class="stats-v">{{.SizeHuman}} ({{.LineCount}} lines)</span>
          <span class="stats-k">Views</span><span class="stats-v">{{.ViewCount}}</span>
          <span class="stats-k">Created</span><span class="stats-v" data-ts="{{.CreatedAtUnix}}">{{.CreatedAgo}}</span>
@@ -35,33 +34,68 @@
    </div>
  </div>
  {{if .JustCreated}}
-  <div class="created-pill" id="created-pill" role="status">Paste Created</div>
+  <div class="float">
+    <div class="created-banner" style="display:block">
+      Paste created. Link copied to clipboard: <a href="/{{.ID}}">{{.Host}}/{{.ID}}</a>
+      {{if .DeletionToken}} · deletion token: <code>{{.DeletionToken}}</code>{{end}}
+    </div>
+  </div>
  {{end}}
  {{if .Attachment}}
  <div class="float">
    <div class="attachment-bar">
-      {{if .AttachmentImage}}
-      <div class="attachment-preview"><img src="/f/{{.Attachment.ID}}/{{.Attachment.Filename}}" alt="{{.Attachment.Filename}}"></div>
-      {{end}}
      <a class="attachment-chip" href="/f/{{.Attachment.ID}}/{{.Attachment.Filename}}" data-mime="{{.Attachment.Mime}}">
        <span class="attachment-name">{{.Attachment.Filename}}</span>
        <span class="attachment-size">{{.Attachment.SizeHuman}}</span>
      </a>
+      {{if or (eq .Attachment.Mime "image/png") (eq .Attachment.Mime "image/jpeg") (eq .Attachment.Mime "image/gif") (eq .Attachment.Mime "image/webp")}}
+      <div class="attachment-preview"><img src="/f/{{.Attachment.ID}}/{{.Attachment.Filename}}" alt="{{.Attachment.Filename}}"></div>
+      {{end}}
    </div>
  </div>
  {{end}}
-  {{if not .Attachment}}
  <div class="float">
-    <div class="code" id="code"><div class="gutter" id="gutter">{{.Gutter}}</div><div class="codebody" id="codebody">{{.ContentHTML}}</div></div>
-  </div>
-  {{end}}
-  <div class="jumpnav hidden" id="jumpnav">
-    <button type="button" class="btn jump-btn" data-jump="top">Top</button>
-    <button type="button" class="btn jump-btn" data-jump="bottom">Bottom</button>
+    <div class="code"><div class="gutter">{{.Gutter}}</div><div class="codebody" id="codebody">{{.ContentHTML}}</div></div>
  </div>
 </div>
 <input type="hidden" id="raw-content" value="{{.ContentAttr}}">
-<script src="/static/paste.js" defer data-paste-id="{{.ID}}"></script>
-<script src="/static/paste-lines.js" defer></script>
-<script src="/static/jump.js" defer></script>
+<script>
+function toast(msg) {
+  let t = document.querySelector('.toast');
+  if (!t) { t = document.createElement('div'); t.className = 'toast'; document.body.appendChild(t); }
+  t.textContent = msg;
+  t.classList.add('show');
+  clearTimeout(t._h);
+  t._h = setTimeout(() => t.classList.remove('show'), 2000);
+}
+function toggleStats() {
+  const body = document.getElementById('stats-body');
+  const pill = document.getElementById('stats-pill');
+  const btn = document.getElementById('stats-toggle');
+  const open = body.hidden;
+  body.hidden = !open;
+  pill.classList.toggle('open', open);
+  btn.setAttribute('aria-expanded', open ? 'true' : 'false');
+}
+function copyContent(btn) {
+  navigator.clipboard.writeText(document.getElementById('raw-content').value);
+  // in-place success feedback (#53)
+  if (btn) {
+    btn.classList.add('ok');
+    btn.textContent = 'Success!';
+    clearTimeout(btn._okh);
+    btn._okh = setTimeout(() => { btn.classList.remove('ok'); btn.textContent = 'copy'; }, 2000);
+  } else {
+    toast('Copied', 'success');
+  }
+}
+function redeem() {
+  if (!confirm('Hard delete this paste immediately?')) return;
+  let tok = '';
+  try { tok = sessionStorage.getItem('deletion_token_{{.ID}}') || ''; } catch(e) {}
+  if (!tok) { alert('deletion token not available in this browser'); return; }
+  fetch('/api/pastes/{{.ID}}/redeem', {method: 'DELETE', headers: {'Authorization': 'Bearer ' + tok}})
+    .then(r => { if (r.ok) location.href = '/history'; else alert('delete failed'); });
+}
+</script>
 {{template "foot" .}}
@@ -13,11 +13,102 @@
      </button>
      <h3>Theme</h3>
      <div class="theme-grid" id="theme-grid"></div>
-      <h3 class="mt18">Editor</h3>
-      <label class="toggle toggle-inline" for="wrap-setting"><input type="checkbox" id="wrap-setting"> Line wrap</label>
+      <h3 style="margin-top:18px">Editor</h3>
+      <label class="toggle" for="wrap-setting" style="display:inline-flex"><input type="checkbox" id="wrap-setting"> Line wrap</label>
      <p class="admin-link-row"><a class="admin-link" href="/admin">Admin</a></p>
    </div>
  </div>
 </div>
-<script src="/static/settings.js" defer></script>
+<script>
+(function () {
+  // #112: derive each preset's swatches from the real CSS variables in
+  // app.css by temporarily applying data-preset, so they can never drift.
+  // #127: 5 theme pairs, light swatches top row, dark bottom row.
+  var pairs = [
+    { id: 'midnight',        name: 'Midnight' },
+    { id: 'smooth',          name: 'Smooth' },
+    { id: 'pastel-lavender', name: 'Pastel Lavender' },
+    { id: 'pastel-peach',    name: 'Pastel Peach' },
+    { id: 'pastel-cloud',    name: 'Pastel Cloud' }
+  ];
+  var SWATCH_VARS = ['--bg', '--surface', '--surface-2', '--muted', '--accent'];
+
+  function presetColors(id) {
+    var root = document.documentElement;
+    var prev = root.getAttribute('data-preset');
+    root.setAttribute('data-preset', id);
+    var cs = getComputedStyle(root);
+    var colors = SWATCH_VARS.map(function (v) { return cs.getPropertyValue(v).trim(); });
+    if (prev === null) root.removeAttribute('data-preset'); else root.setAttribute('data-preset', prev);
+    return colors;
+  }
+
+  // current base pair + dark flag from the resolved data-preset.
+  // "midnight" is itself the dark variant, so check dark ids first.
+  function state() {
+    var p = document.documentElement.dataset.preset || 'midnight';
+    if (p === 'midnight' || /-dark$/.test(p)) {
+      return { base: p === 'midnight' ? 'midnight' : p.replace(/-dark$/, ''), dark: true };
+    }
+    return { base: p === 'midnight-light' ? 'midnight' : p, dark: false };
+  }
+
+  var grid = document.getElementById('theme-grid');
+  var cards = {};
+  // #132: midnight is dark-first (root preset = midnight = dark; its light
+  // variant is midnight-light), the others are light-first. Resolve the
+  // LIGHT and DARK preset ids generically so the light swatches always
+  // render in the top row of every card.
+  function lightPreset(id) {
+    if (id === 'midnight') return 'midnight-light';
+    return id; // light-first bases use themselves as the light variant
+  }
+  function darkPreset(id) {
+    if (id === 'midnight') return 'midnight'; // root preset is midnight's dark
+    return id + '-dark';
+  }
+  pairs.forEach(function (t) {
+    var light = presetColors(lightPreset(t.id));
+    var dark = presetColors(darkPreset(t.id));
+    var btn = document.createElement('button');
+    btn.type = 'button';
+    btn.className = 'theme-card';
+    btn.setAttribute('aria-pressed', 'false');
+    btn.setAttribute('data-pair', t.id);
+    btn.innerHTML = '<strong>' + t.name + '</strong>' +
+      '<span class="swatches">' + light.map(function (c) {
+        return '<span class="swatch" style="background:' + c + '"></span>';
+      }).join('') + '</span>' +
+      '<span class="swatches">' + dark.map(function (c) {
+        return '<span class="swatch" style="background:' + c + '"></span>';
+      }).join('') + '</span>';
+    btn.addEventListener('click', function () {
+      var dark = state().dark;
+      document.documentElement.dataset.preset = dark ? t.id + '-dark' : t.id;
+      try { localStorage.setItem('palette-theme', t.id); } catch (e) {}
+      Object.keys(cards).forEach(function (k) { cards[k].setAttribute('aria-pressed', 'false'); });
+      btn.setAttribute('aria-pressed', 'true');
+    });
+    cards[t.id] = btn;
+    grid.appendChild(btn);
+  });
+
+  function sync() {
+    var s = state();
+    Object.keys(cards).forEach(function (k) {
+      cards[k].setAttribute('aria-pressed', k === s.base ? 'true' : 'false');
+    });
+    var dt = document.getElementById('settings-dark-toggle');
+    if (dt) dt.setAttribute('aria-pressed', s.dark ? 'true' : 'false');
+  }
+  sync();
+  // the topbar script runs before this button exists, so wire it here
+  var dt = document.getElementById('settings-dark-toggle');
+  dt.addEventListener('click', function () {
+    var btns = document.querySelectorAll('.topbar .dark-toggle');
+    if (btns.length) btns[0].click(); else document.dispatchEvent(new CustomEvent('palette-darkchange'));
+  });
+  document.addEventListener('palette-darkchange', sync);
+})();
+</script>
 {{template "foot" .}}
@@ -18,5 +18,12 @@
    <div class="foot">Created <span data-ts="{{.CreatedAtUnix}}">{{.CreatedAgo}}</span></div>
  </div>
 </div>
-<script src="/static/unlock.js" defer></script>
+<script>
+document.getElementById('pwreveal').addEventListener('click', () => {
+  const pw = document.getElementById('password');
+  const show = pw.type === 'password';
+  pw.type = show ? 'text' : 'password';
+  document.getElementById('pwreveal').title = show ? 'Hide password' : 'Show password';
+});
+</script>
 {{template "foot" .}}
@@ -104,13 +104,6 @@ func (h *Handlers) renderPage(w http.ResponseWriter, name string, data any) {
 	}
 }

-// RenderNotFoundPage is the exported not-found renderer used by the api
-// package (#173): the router's NotFound handler renders the main UI with a
-// friendly "Paste ID not found" message, still with HTTP 404.
-func (h *Handlers) RenderNotFoundPage(w http.ResponseWriter, r *http.Request) {
-	h.renderNotFound(w, r, r.URL.Path)
-}
-
 // RenderPage is the exported wrapper used by the api package (#4 can pages).
 func (h *Handlers) RenderPage(w http.ResponseWriter, name string, data any) {
 	h.renderPage(w, name, data)
@@ -207,44 +200,6 @@ func (h *Handlers) writeRateLimited(w http.ResponseWriter, retryAfterSecs int) {
 	w.Write([]byte(`{"error":"rate limit exceeded"}`))
 }

-// renderNotFound serves the friendly not-found page (#173): the main UI
-// chrome (topbar, centered card) with a "Paste ID not found" message in the
-// result card, instead of a bare text 404. Still returns HTTP 404 so
-// crawlers/validators see the correct status.
-func (h *Handlers) renderNotFound(w http.ResponseWriter, r *http.Request, id string) {
-	h.renderPageStatus(w, "notfound.html", http.StatusNotFound, map[string]any{"Page": "notfound", "ID": id})
-}
-
-// HandleNotFoundPage serves the friendly not-found page for unknown routes
-// (#173): main UI chrome with a "Paste ID not found" message. Called from the
-// chi NotFound handler in the api package.
-func (h *Handlers) HandleNotFoundPage(w http.ResponseWriter, r *http.Request) {
-	h.renderNotFound(w, r, r.URL.Path)
-}
-
-// renderPageStatus renders a template with an explicit HTTP status code.
-func (h *Handlers) renderPageStatus(w http.ResponseWriter, name string, status int, data any) {
-	w.Header().Set("Content-Type", "text/html; charset=utf-8")
-	w.WriteHeader(status)
-	if err := h.UI.tmpl.ExecuteTemplate(w, name, data); err != nil {
-		http.Error(w, "template error: "+err.Error(), 500)
-	}
-}
-
-// attachmentExt returns the lowercase file extension (without dot) of a
-// filename, or "" when the name has none. Used by the Type display (#235).
-func attachmentExt(filename string) string {
-	name := filename
-	if i := strings.LastIndexByte(name, '/'); i >= 0 {
-		name = name[i+1:]
-	}
-	i := strings.LastIndexByte(name, '.')
-	if i <= 0 || i == len(name)-1 {
-		return ""
-	}
-	return strings.ToLower(name[i+1:])
-}
-
 func (h *Handlers) renderPaste(w http.ResponseWriter, row *store.PasteRow, justCreated bool, deletionToken string, readsRemaining *int) {
 	lines := strings.Count(row.Content, "\n") + 1
 	gutter := ""
@@ -259,62 +214,27 @@ func (h *Handlers) renderPaste(w http.ResponseWriter, row *store.PasteRow, justC
 	if lang == "" {
 		lang = "text"
 	}
+	summary := fmt.Sprintf("%s · %s · %d views · %s", lang, humanSize(len(row.Content)), row.ViewCount, agoString(row.CreatedAt))
 	// #38: one optional file attachment per paste; nil when none.
 	attachment, err := h.Store.GetAttachmentForPaste(row.ID)
 	if err != nil {
 		http.Error(w, "db error", 500)
 		return
 	}
-	// #221: for attachment pastes the stored text content is empty (the file
-	// replaced it), so the summary size must come from the attachment blob,
-	// not len(row.Content), or the summary shows "0 B".
-	summarySize := len(row.Content)
-	if attachment != nil {
-		summarySize = int(attachment.Size)
-	}
-	// #235: column renamed to "Type". Text pastes keep the detected
-	// language; attachment pastes show the file extension instead.
-	attExt := ""
-	typeLabel := lang
-	if attachment != nil {
-		if ext := attachmentExt(attachment.Filename); ext != "" {
-			attExt = ext
-			typeLabel = ext
-		}
-	}
-	summary := fmt.Sprintf("%s · %s · %d views · %s", typeLabel, humanSize(summarySize), row.ViewCount, agoString(row.CreatedAt))
-	// #221: image attachments render the image, not a text/code box. Size
-	// comes from the attachment's actual file size, not the text content.
-	attImage := false
-	if attachment != nil {
-		switch attachment.Mime {
-		case "image/png", "image/jpeg", "image/gif", "image/webp":
-			attImage = true
-		}
-	}
-	sizeHuman := humanSize(len(row.Content))
-	lineCount := lines
-	if attachment != nil {
-		sizeHuman = attachment.SizeHuman
-		lineCount = 1
-	}
 	data := map[string]any{
 		"Page":          "paste",
 		"ID":            row.ID,
 		"Title":         row.Title.String,
-		"Language":      typeLabel,
-		"TypeLabel":     typeLabel,
-		"HasAttachment":  attachment != nil,
-		"AttachmentExt": attExt,
+		"Language":      row.Language.String,
 		"StatsSummary":  summary,
-		"SizeHuman":     sizeHuman,
+		"SizeHuman":     humanSize(len(row.Content)),
 		"HasPassword":   row.PasswordHash.Valid,
 		"BurnAfterRead": row.BurnAfterRead,
 		"CustomSlug":    row.CustomSlug.String,
 		"ContentHTML":   template.HTML(langpkg.HighlightCode(row.Content, row.Language.String)), // safe: HighlightCode escapes all non-span text
 		"ContentAttr":   row.Content,
 		"Gutter":        strings.TrimSuffix(gutter, "\n"),
-		"LineCount":     lineCount,
+		"LineCount":     lines,
 		"SizeBytes":     len(row.Content),
 		"CreatedAgo":    agoString(row.CreatedAt),
 		"CreatedAtUnix": row.CreatedAt,
@@ -328,7 +248,6 @@ func (h *Handlers) renderPaste(w http.ResponseWriter, row *store.PasteRow, justC
 		"ReadsTotal":    int(row.ReadsLimit.Int64),
 		"JustCreated":   justCreated,
 		"Attachment":    attachment,
-		"AttachmentImage": attImage,
 		"Host":          "this host",
 	}
 	h.renderPage(w, "paste.html", data)
@@ -343,14 +262,11 @@ func (h *Handlers) HandlePasteView(w http.ResponseWriter, r *http.Request) {
 		return
 	}
 	if row == nil {
-		// #173: a missing paste ID gets the main UI with a friendly message,
-		// not a bare text 404 page.
-		h.renderNotFound(w, r, id)
+		http.NotFound(w, r)
 		return
 	}
 	if row.ExpiresAt.Valid && row.ExpiresAt.Int64 < time.Now().Unix() {
-		// #173: expired pastes render the same friendly not-found UI.
-		h.renderNotFound(w, r, id)
+		http.Error(w, "paste expired", 404)
 		return
 	}
 	if row.PasswordHash.Valid {
@@ -402,7 +318,7 @@ func (h *Handlers) HandlePasteView(w http.ResponseWriter, r *http.Request) {
 		token = c.Value
 	}
 	if justCreated && token != "" {
-		// one-time display of the deletion token via sessionStorage (#143)
+		// one-time display of the deletion token via the created banner
 		http.SetCookie(w, &http.Cookie{Name: "tok_" + row.ID, Value: token, Path: "/", MaxAge: 60, HttpOnly: true, SameSite: http.SameSiteLaxMode})
 	}
 	// Count the view for real page renders, deduped per-viewer within the
@@ -417,8 +333,8 @@ func (h *Handlers) HandlePasteView(w http.ResponseWriter, r *http.Request) {
 	// Just-created first render does not count as a read for the creator.
 	if !justCreated {
 		rem, admitted := h.Store.RegisterRead(row, h.ViewerID(r), h.BurnWindowMin())
-		if !admitted { // #58: lost the burn claim; #173: friendly not-found UI
-			h.renderNotFound(w, r, row.ID)
+		if !admitted { // #58: lost the burn claim; do not render content
+			http.NotFound(w, r)
 			return
 		}
 		h.renderPaste(w, row, false, "", rem)
@@ -433,9 +349,9 @@ func (h *Handlers) HandleNewPage(w http.ResponseWriter, r *http.Request) {
 	h.renderPage(w, "new.html", map[string]any{"Page": "new"})
 }

-// HandleHistoryPage serves /public.
+// HandleHistoryPage serves /history.
 func (h *Handlers) HandleHistoryPage(w http.ResponseWriter, r *http.Request) {
-	h.renderPage(w, "history.html", map[string]any{"Page": "public"})
+	h.renderPage(w, "history.html", map[string]any{"Page": "history"})
 }

 // HandleSettingsPage serves /settings.
@@ -452,9 +368,9 @@ func (h *Handlers) HandleSettingsPage(w http.ResponseWriter, r *http.Request) {
 	h.renderPage(w, "settings.html", map[string]any{"Page": "settings", "Themes": themes})
 }

-// HandleMinePage serves /saved.
+// HandleMinePage serves /mine.
 func (h *Handlers) HandleMinePage(w http.ResponseWriter, r *http.Request) {
-	h.renderPage(w, "mine.html", map[string]any{"Page": "saved"})
+	h.renderPage(w, "mine.html", map[string]any{"Page": "mine"})
 }

 // HandleAdminPage serves /admin.
@@ -467,12 +383,8 @@ func (u *UI) Handlers() *Handlers { return &Handlers{UI: u} }

 // #59: security headers for rendered HTML pages. Applied wherever the
 // response is text/html (page templates and the inline can page); JSON API
-// responses and /raw content pass through untouched.
-// #139: script-src and style-src no longer allow 'unsafe-inline'. All
-// previously-inline scripts moved to external files under static/ (page data
-// reaches them via data-* attributes on the script tags), inline style
-// attributes became CSS classes, and JS sets swatch colors via CSSOM. The
-// img-src data: allowance stays: SVG data-URI backgrounds in app.css need it.
+// responses and /raw content pass through untouched. script-src allows
+// 'unsafe-inline' because the page templates carry inline scripts; CSP
 // default-src 'self' still blocks external content and object/frame embeds,
 // and frame-ancestors 'none' closes the clickjacking gap flagged in the #34
 // pentest. Runs after the handler so the Content-Type is already set.
@@ -484,7 +396,7 @@ func SecurityHeaders(next http.Handler) http.Handler {
 		// is harmless and arguably desirable.
 		h := w.Header()
 		h.Set("Content-Security-Policy",
-			"default-src 'self'; script-src 'self'; style-src 'self'; img-src 'self' data:; frame-ancestors 'none'")
+			"default-src 'self'; script-src 'self' 'unsafe-inline'; style-src 'self' 'unsafe-inline'; img-src 'self' data:; frame-ancestors 'none'")
 		h.Set("Referrer-Policy", "no-referrer")
 		h.Set("X-Content-Type-Options", "nosniff")
 		next.ServeHTTP(w, r)