Add browse dashboard, tags, visibility control, export, QR sharing, and embed mode

- Browse dashboard at / with search, framework filter, tag pills, and pagination
- Tags system with autocomplete datalist and per-fiddle tag management
- Listed/unlisted toggle for visibility control (unlisted still accessible via direct URL)
- Export standalone HTML with inlined CSS/JS and framework CDN tags
- QR code modal for sharing fiddle URLs
- Embed mode at /embed/:id for minimal preview-only rendering
- Extract shared loadScript() utility from 4 files into utils.js
- Database schema: listed column, tags and fiddle_tags tables with index

public/css/style.css

@@ -204,6 +204,67 @@ body.resizing iframe { pointer-events: none; }
   padding: 4px 6px; border-radius: 4px; font-size: 12px; cursor: pointer;
 }
 
+/* Listed toggle */
+.listed-toggle {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  font-size: 12px;
+  color: var(--text-dim);
+  cursor: pointer;
+  user-select: none;
+}
+.listed-toggle input { cursor: pointer; }
+
+/* Tags input */
+.tags-input-wrap {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  max-width: 280px;
+}
+#tags-input {
+  background: transparent; border: 1px solid var(--border); color: var(--text);
+  padding: 3px 6px; border-radius: 4px; font-size: 12px; width: 100px;
+}
+#tags-input:focus { border-color: var(--accent); outline: none; }
+.tags-display { display: flex; gap: 3px; flex-wrap: nowrap; overflow: hidden; }
+.tag-pill {
+  display: inline-flex; align-items: center; gap: 2px;
+  background: var(--border); color: var(--text); padding: 1px 6px;
+  border-radius: 10px; font-size: 11px; white-space: nowrap;
+}
+.tag-pill .tag-remove {
+  cursor: pointer; color: var(--text-dim); font-size: 13px; line-height: 1;
+  background: none; border: none; padding: 0 0 0 2px;
+}
+.tag-pill .tag-remove:hover { color: #f44747; }
+
+/* Secondary buttons */
+.btn-secondary {
+  background: var(--surface); color: var(--text-dim); border: 1px solid var(--border);
+}
+.btn-secondary:hover { color: var(--text); background: var(--border); }
+
+/* QR Modal */
+.modal-overlay {
+  position: fixed; inset: 0; background: rgba(0,0,0,0.7);
+  display: flex; align-items: center; justify-content: center; z-index: 1000;
+}
+.modal-overlay.hidden { display: none; }
+.modal-content {
+  background: var(--surface); border: 1px solid var(--border);
+  border-radius: 8px; padding: 20px; min-width: 280px; text-align: center;
+}
+.modal-header {
+  display: flex; justify-content: space-between; align-items: center;
+  margin-bottom: 16px; font-size: 14px; font-weight: 600;
+}
+.modal-header .btn-small { font-size: 18px; padding: 0 4px; }
+#qr-canvas { display: flex; justify-content: center; margin-bottom: 12px; }
+#qr-canvas img, #qr-canvas canvas { border-radius: 4px; }
+.qr-url { font-size: 11px; color: var(--text-dim); word-break: break-all; }
+
 /* Toast */
 .toast {
   position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%);