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/templates/new.html

@@ -47,11 +47,11 @@
     </div>
     <div class="float side-section">
       <h3>Custom URL</h3>
-      <div class="row"><span>/</span><input type="text" id="custom" placeholder="my-snippet"></div>
+      <div class="row" style="justify-content:flex-start; gap:6px; align-items:center;"><span>/</span><input type="text" id="custom" placeholder="my-snippet" style="text-align:left; flex:1; min-width:0;"></div>
     </div>
-    <div class="float side-section">
+    <div class="float side-section" id="result-card" style="display:none">
       <h3>Result</h3>
-      <div class="hint" id="result" style="word-break:break-all">—</div>
+      <div class="hint" id="result" style="word-break:break-all">empty</div>
     </div>
   </div>
 </div>
@@ -72,6 +72,29 @@ $('haspw').addEventListener('change', e => { $('password').style.display = e.tar
 
 let guessed = ''; // last auto-detected language, '' = user override
 
+function showResult(html, isError) {
+  $('result').innerHTML = html;
+  $('result').dataset.token = isError ? '' : ($('result').dataset.token || '');
+  $('result-card').style.display = 'block';
+}
+function defaultFilename(lang) {
+  const names = {
+    python: 'Python.py', go: 'main.go', javascript: 'script.js', rust: 'main.rs',
+    c: 'main.c', cpp: 'main.cpp', java: 'Main.java', bash: 'script.sh',
+    sql: 'query.sql', yaml: 'config.yaml', json: 'data.json',
+    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 {
@@ -84,6 +107,7 @@ async function guessLang() {
     if (res.ok && data.language) {
       guessed = data.language;
       $('language').value = data.language;
+      maybeSetDefaultTitle(data.language);
     }
   } catch(e) {}
 }
@@ -113,11 +137,11 @@ async function create() {
   });
   const data = await res.json();
   if (!res.ok) {
-    $('result').textContent = 'Error: ' + (data.error || res.status);
+    showResult('Error: ' + (data.error || res.status), true);
     return;
   }
   const url = location.origin + '/' + (data.custom_slug || data.id);
-  $('result').innerHTML = '<a href="' + url + '">' + url + '</a>';
+  showResult('<a href="' + url + '">' + url + '</a>', false);
   $('result').dataset.token = data.deletion_token || '';
   try { navigator.clipboard.writeText(url); } catch(e) {}
   // show the paste