UI polish: radius tokens, layered shadows, pill selections, default filenames, live search, hidden result card, em dash removal

Fixes #6 #7 #8 #9 #10 #11 #13 #14 #15

web/static/app.css

@@ -3,7 +3,7 @@
   --bg: #241B30; --surface: #2D2340; --surface-2: #3A2D52;
   --muted: #7A6A9E; --muted-fg: #C0B2DE; --fg: #F2EDF8;
   --accent: #C4A8F0; --border: #42355C;
-  --radius: 20px;
+  --radius-lg: 20px; --radius: 10px; --radius-sm: 999px;
   --font-body: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
   --font-mono: ui-monospace, "JetBrains Mono", "Fira Code", monospace;
 }
@@ -31,15 +31,18 @@ body {
 .logo { font-weight: 700; font-size: 27.6px; letter-spacing: -0.02em; text-decoration: none; color: var(--fg); }
 .logo em { font-style: normal; color: var(--muted-fg); font-weight: 400; }
 .topbar nav { display: flex; gap: 4px; }
-.topbar nav a { color: var(--muted-fg); text-decoration: none; padding: 6px 12px; border-radius: 8px; font-size: 23.2px; }
+.topbar nav a { color: var(--muted-fg); text-decoration: none; padding: 6px 12px; border-radius: var(--radius); font-size: 23.2px; }
 .topbar nav a:hover { background: var(--surface-2); color: var(--fg); }
 .topbar nav a.on { background: var(--accent); color: var(--bg); }
 .topbar .spacer { flex: 1; }
-.kbd { font-family: var(--font-mono); font-size: 18.9px; border: 1px solid var(--border); border-radius: 5px; padding: 2px 6px; color: var(--muted-fg); }
+.kbd { font-family: var(--font-mono); font-size: 18.9px; border: 1px solid var(--border); border-radius: var(--radius); padding: 2px 6px; color: var(--muted-fg); }
 
 .float {
-  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
-  box-shadow: 0 2px 6px rgba(20,14,32,.25), 0 12px 32px rgba(20,14,32,.3);
+  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg);
+  box-shadow:
+    0 1px 2px rgba(0, 0, 0, .10),
+    0 2px 6px rgba(0, 0, 0, .08),
+    0 8px 24px rgba(0, 0, 0, .07);
   overflow: hidden;
 }
 
@@ -62,7 +65,7 @@ body {
 }
 .editor-head select {
   border: 1px solid var(--border); background: var(--surface-2); color: var(--muted-fg);
-  border-radius: 7px; padding: 4px 10px; font: inherit; font-size: 21.6px; cursor: pointer;
+  border-radius: var(--radius); padding: 4px 10px; font: inherit; font-size: 21.6px; cursor: pointer;
 }
 .editor-wrap { flex: 1; display: flex; min-height: 0; }
 .gutter {
@@ -83,21 +86,21 @@ body {
 .actionbar .btn { padding: 10px 26px; }
 .btn {
   background: var(--accent); color: var(--bg); border: none; cursor: pointer;
-  padding: 8px 18px; border-radius: 8px; font: inherit; font-size: 22.4px; font-weight: 600;
+  padding: 8px 18px; border-radius: var(--radius); font: inherit; font-size: 22.4px; font-weight: 600;
 }
 .btn:hover { filter: brightness(1.08); }
 .hint { font-size: 20.7px; color: var(--muted-fg); }
 .hint b { color: var(--fg); font-weight: 550; }
 .seg { display: flex; flex-direction: column; gap: 2px; }
-.seg label { display: flex; align-items: center; gap: 8px; padding: 5px 8px; border-radius: 7px; cursor: pointer; font-size: 22.4px; }
+.seg label { display: flex; align-items: center; gap: 8px; padding: 5px 8px; border-radius: var(--radius); cursor: pointer; font-size: 22.4px; }
 .seg label:hover { background: var(--surface-2); }
 .seg input { accent-color: var(--accent); }
-.toggle { display: flex; align-items: center; gap: 8px; font-size: 22.4px; cursor: pointer; padding: 5px 8px; border-radius: 7px; }
+.toggle { display: flex; align-items: center; gap: 8px; font-size: 22.4px; cursor: pointer; padding: 5px 8px; border-radius: var(--radius); }
 .toggle:hover { background: var(--surface-2); }
 .toggle input { accent-color: var(--accent); }
 .deck .row { display: flex; justify-content: space-between; align-items: center; font-size: 22.4px; padding: 4px 0; }
 .row input[type="text"] {
-  border: 1px solid var(--border); border-radius: 7px; padding: 5px 8px; background: var(--bg);
+  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;
 }
 .created-banner {
@@ -109,10 +112,10 @@ body {
 /* paste view */
 .meta-bar { display: flex; align-items: center; gap: 12px; padding: 12px 18px; flex-wrap: wrap; }
 .meta-bar h1 { font-size: 29.2px; font-weight: 600; }
-.slug { font-family: var(--font-mono); font-size: 21.6px; color: var(--muted-fg); background: var(--surface-2); padding: 3px 9px; border-radius: 7px; }
-.tag { font-size: 19.8px; color: var(--muted-fg); border: 1px solid var(--border); border-radius: 999px; padding: 2px 9px; }
+.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); }
+.tag { font-size: 19.8px; color: var(--muted-fg); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 2px 9px; }
 .meta-bar .spacer { flex: 1; }
-.iconbtn { border: 1px solid var(--border); background: var(--surface-2); color: var(--muted-fg); border-radius: 8px; padding: 5px 12px; font: inherit; font-size: 21.6px; cursor: pointer; text-decoration: none; }
+.iconbtn { border: 1px solid var(--border); background: var(--surface-2); color: var(--muted-fg); border-radius: var(--radius); padding: 5px 12px; font: inherit; font-size: 21.6px; cursor: pointer; text-decoration: none; }
 .iconbtn:hover { color: var(--fg); border-color: var(--muted); }
 .iconbtn.danger:hover { color: #ff8fa3; border-color: #ff8fa3; }
 .code-head {
@@ -134,7 +137,7 @@ body {
 .head-row h1 { font-size: 34.5px; font-weight: 600; }
 .search {
   display: flex; align-items: center; gap: 8px; background: var(--surface);
-  border: 1px solid var(--border); border-radius: 10px; padding: 8px 14px; width: 260px;
+  border: 1px solid var(--border); border-radius: var(--radius); padding: 8px 14px; width: 260px;
 }
 .search input { border: none; outline: none; background: transparent; color: var(--fg); font: inherit; font-size: 22.4px; width: 100%; }
 table { width: 100%; border-collapse: collapse; font-size: 22.4px; table-layout: fixed; }
@@ -149,12 +152,12 @@ tr.row:hover td { background: var(--surface-2); }
 tr.row:hover td a.slug { color: var(--accent); }
 td a.slug { font-family: var(--font-mono); font-size: 21.6px; color: var(--fg); text-decoration: none; }
 td a.slug:hover { color: var(--accent); }
-.badge { font-size: 18.9px; border: 1px solid var(--border); color: var(--muted-fg); border-radius: 999px; padding: 1px 8px; }
+.badge { font-size: 18.9px; border: 1px solid var(--border); color: var(--muted-fg); border-radius: var(--radius-sm); padding: 1px 8px; }
 .badge.lock { color: var(--accent); border-color: var(--accent); }
 .dim { color: var(--muted-fg); white-space: nowrap; }
 .pager { display: flex; align-items: center; justify-content: space-between; padding: 12px 16px; font-size: 21.6px; color: var(--muted-fg); }
 .pager .pg { display: flex; gap: 6px; }
-.pager button { border: 1px solid var(--border); background: var(--surface-2); color: var(--muted-fg); border-radius: 7px; padding: 4px 11px; font: inherit; font-size: 21.6px; cursor: pointer; }
+.pager button { border: 1px solid var(--border); background: var(--surface-2); color: var(--muted-fg); border-radius: var(--radius); padding: 4px 11px; font: inherit; font-size: 21.6px; cursor: pointer; }
 .pager button:hover:not(:disabled) { color: var(--fg); border-color: var(--muted); }
 .pager button.on { background: var(--accent); color: var(--bg); border-color: var(--accent); }
 .pager button:disabled { opacity: .4; cursor: default; }
@@ -171,7 +174,7 @@ td a.slug:hover { color: var(--accent); }
 .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; }
 .pwinput {
-  width: 100%; padding: 10px 14px; border: 1px solid var(--border); border-radius: 9px;
+  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;
   letter-spacing: .12em;
 }
@@ -180,4 +183,31 @@ td a.slug:hover { color: var(--accent); }
 .err { display: none; margin-top: 12px; font-size: 21.6px; color: #ff8fa3; }
 .center .foot { font-size: 20.7px; color: var(--muted-fg); padding: 14px; border-top: 1px solid var(--border); }
 
-.btn-icon { padding: 6px 10px; font-size: 24.2px; line-height: 1; }
+.btn-icon {
+  padding: 4px 8px; font-size: 24.2px; line-height: 1;
+  display: inline-flex; align-items: center; justify-content: center;
+  min-width: 40px; height: 36px;
+}
+
+/* selection controls: pill-style selected states (#14) */
+.seg label, .toggle {
+  border: 1px solid transparent;
+  transition: background .12s ease, border-color .12s ease, color .12s ease;
+}
+.seg label:hover, .toggle:hover {
+  background: var(--surface-2);
+  color: var(--fg);
+}
+.seg label:has(input:checked),
+.toggle:has(input:checked) {
+  background: var(--surface-2);
+  border-color: var(--accent);
+  color: var(--fg);
+  border-radius: var(--radius-sm);
+}
+.seg label:has(input:focus-visible),
+.toggle:has(input:focus-visible) {
+  outline: 2px solid var(--accent);
+  outline-offset: 1px;
+}
+.seg input, .toggle input { accent-color: var(--accent); width: 16px; height: 16px; margin: 0; }