feat(reader): EPUB highlights & notes — selection popover, overlayer rendering, annotations drawer

Phase 3 (EPUB half) of the reader redesign:

- Select text in a reflowable book → floating glass popover at the
  selection (5 colors, note, copy). Clicking a color creates the
  highlight via POST /api/media-items/:id/highlights, anchored by the
  foliate range CFI (epubcfi_start) with percentage position.
- Highlights render through foliate's overlayer pipeline: draw-
  annotation draws Overlayer.highlight with the stored color,
  create-overlay re-adds persisted highlights as sections load,
  show-annotation opens the edit popover when a highlight is clicked
  (recolor, edit note, copy, delete).
- Backend: highlight create/update accept epubcfi_start/end,
  note_text, and percentage fields; position validation relaxed
  (CFIs exceed the old 100-char cap); PUT routes through
  AnnotationService.SaveHighlight so edits get dedup/LWW treatment
  and actually persist note_text (the plain query can't).
- Bookmarks drawer becomes the Annotations drawer with tabs:
  Highlights (color-bar list, note previews, jump/edit/delete),
  Notes (add note at current position, list, delete — backed by the
  existing notes API), and Bookmarks (unchanged behavior).
- Popover dismissed on outside click, collapsed selection, page
  navigation, or Esc (new top-priority Esc branch).

web/src/reader/reader.ts

@@ -1,9 +1,18 @@
 import "foliate-js/view.js";
 import { config as foliateConfig } from "@bookhoard/foliate-js/pdf.js";
+import { Overlayer } from "@bookhoard/foliate-js/overlayer.js";
 import { Alpine } from "../alpine";
 import { loadSettings, saveSettings } from "./settings-manager";
 import { getToken } from "../storage";
 
+const HIGHLIGHT_COLORS = [
+  "#ffd54f",
+  "#a5d6a7",
+  "#90caf9",
+  "#f48fb1",
+  "#ce93d8",
+];
+
 foliateConfig.pdfjsPath = (path) => `/static/vendor/pdfjs/${path}`;
 
 const FONT_MAP: Record<string, string> = {
@@ -378,6 +387,30 @@ document.addEventListener("alpine:init", () => {
     tapZonesEnabled: true as boolean,
     tapZoneSize: 30 as number,
     tapZoneTimer: null as ReturnType<typeof setTimeout> | null,
+    highlightItems: [] as {
+      id: string;
+      text: string;
+      note: string;
+      color: string;
+      cfi: string;
+      percentage: number;
+    }[],
+    noteItems: [] as { id: string; content: string; positionLabel: string }[],
+    annotationsTab: "highlights" as string,
+    newNoteText: "",
+    highlightColors: HIGHLIGHT_COLORS,
+    selectionPopover: {
+      open: false,
+      mode: "create" as "create" | "edit",
+      x: 0,
+      y: 0,
+      text: "",
+      cfi: "",
+      id: "",
+      color: "#ffd54f",
+      note: "",
+      noteOpen: false,
+    },
     progressText: "",
     progressLabel: "",
     progressMain: "",
@@ -548,7 +581,7 @@ document.addEventListener("alpine:init", () => {
         this.renderer.setStyles?.(this.buildCSS());
       }
       this.view.addEventListener("load", (e: any) => {
-        const { doc } = e.detail;
+        const { doc, index } = e.detail;
         const link = doc.createElement("link");
         link.rel = "stylesheet";
         link.href = "/static/reader-fonts.css";
@@ -566,14 +599,87 @@ document.addEventListener("alpine:init", () => {
         if (window.matchMedia("(pointer: coarse)").matches) {
           this.attachTapZoneListeners(doc as unknown as HTMLElement, true);
         }
+        // Text selection → highlight popover (reflowable EPUB only;
+        // fixed-layout highlight overlays are a later milestone).
+        if (!this.isFixedLayout) {
+          const checkSelection = () => {
+            const sel = doc.getSelection();
+            if (!sel || sel.isCollapsed || !sel.rangeCount) {
+              if (this.selectionPopover.mode === "create")
+                this.hideSelectionPopover();
+              return;
+            }
+            const range = sel.getRangeAt(0);
+            const text = sel.toString().replace(/\s+/g, " ").trim();
+            if (!text) return;
+            let cfi: string;
+            try {
+              cfi = this.view.getCFI(index, range);
+            } catch {
+              return;
+            }
+            const frame = doc.defaultView?.frameElement as HTMLElement | null;
+            const iframeRect = frame?.getBoundingClientRect();
+            const rect = range.getBoundingClientRect();
+            this.openSelectionPopover({
+              mode: "create",
+              x: (iframeRect?.left ?? 0) + rect.left + rect.width / 2,
+              y: (iframeRect?.top ?? 0) + rect.top,
+              text,
+              cfi,
+            });
+          };
+          doc.addEventListener(
+            "pointerup",
+            () => setTimeout(checkSelection, 0),
+            { passive: true },
+          );
+          doc.addEventListener(
+            "keyup",
+            (ev: KeyboardEvent) => {
+              if (ev.shiftKey) setTimeout(checkSelection, 0);
+            },
+            { passive: true },
+          );
+        }
         if (!this.isFixedLayout) {
           this.computeChapterPageBoundaries(doc);
           doc.fonts.ready.then(() => this.computeChapterPageBoundaries(doc));
         }
       });
+      // ----- highlight rendering (foliate overlayer pipeline) -----
+      this.view.addEventListener("draw-annotation", (e: any) => {
+        const { draw, annotation } = e.detail;
+        draw(Overlayer.highlight, { color: annotation.color || "#ffd54f" });
+      });
+      this.view.addEventListener("show-annotation", (e: any) => {
+        const { value, index, range } = e.detail;
+        const h = this.highlightItems.find((x) => x.cfi === value);
+        if (!h) return;
+        const doc = this.renderer
+          ?.getContents?.()
+          ?.find((c: any) => c.index === index)?.doc;
+        const frame = doc?.defaultView?.frameElement as HTMLElement | null;
+        const iframeRect = frame?.getBoundingClientRect();
+        const rect = range.getBoundingClientRect();
+        this.openSelectionPopover({
+          mode: "edit",
+          x: (iframeRect?.left ?? 0) + rect.left + rect.width / 2,
+          y: (iframeRect?.top ?? 0) + rect.top,
+          text: h.text,
+          cfi: h.cfi,
+          id: h.id,
+          color: h.color,
+          note: h.note,
+        });
+      });
+      this.view.addEventListener("create-overlay", () => {
+        this.renderAllHighlights();
+      });
       this.view.addEventListener("relocate", (e: any) => {
         const { fraction, location, pageItem, cfi, tocItem, section } =
           e.detail;
+        this.hideSelectionPopover();
         this.lastRelocateDetail = {
           fraction,
           location,
@@ -634,6 +740,7 @@ document.addEventListener("alpine:init", () => {
       }
       this.initTime = Date.now();
       this.fetchReadingSpeed();
+      this.refreshAnnotations();
       this.setupChrome();
       this.setupTapZones();
     },
@@ -644,6 +751,13 @@ document.addEventListener("alpine:init", () => {
       document.addEventListener("pointermove", () => this.pokeChrome(), {
         passive: true,
       });
+      // Dismiss the selection popover on clicks outside it (iframe clicks
+      // are covered by the selection tracker's collapsed check).
+      document.addEventListener("pointerdown", (e: PointerEvent) => {
+        if (!this.selectionPopover.open) return;
+        if ((e.target as HTMLElement)?.closest?.("#selection-popover")) return;
+        this.hideSelectionPopover();
+      }, { passive: true });
       if (this.chromeBehavior === "always-visible") {
         this.chromeVisible = true;
         return;
@@ -774,6 +888,237 @@ document.addEventListener("alpine:init", () => {
         tap_zone_size: this.tapZoneSize,
       });
     },
+    // ----- annotations (highlights + notes) -----
+    openSelectionPopover(opts: {
+      mode: "create" | "edit";
+      x: number;
+      y: number;
+      text: string;
+      cfi: string;
+      id?: string;
+      color?: string;
+      note?: string;
+    }) {
+      const p = this.selectionPopover;
+      p.mode = opts.mode;
+      p.text = opts.text;
+      p.cfi = opts.cfi;
+      p.id = opts.id ?? "";
+      p.color = opts.color || "#ffd54f";
+      p.note = opts.note ?? "";
+      p.noteOpen = !!p.note && opts.mode === "edit";
+      // Clamp so the popover stays on screen (it anchors bottom-center).
+      const w = window.innerWidth;
+      const h = window.innerHeight;
+      p.x = Math.min(Math.max(opts.x, 90), w - 90);
+      p.y = Math.min(Math.max(opts.y, 60), h - 60);
+      p.open = true;
+    },
+    hideSelectionPopover() {
+      this.selectionPopover.open = false;
+      this.selectionPopover.noteOpen = false;
+    },
+    renderAllHighlights() {
+      for (const hl of this.highlightItems) {
+        this.view
+          ?.addAnnotation({
+            value: hl.cfi,
+            color: hl.color,
+            note: hl.note,
+            id: hl.id,
+          })
+          ?.catch?.(() => {});
+      }
+    },
+    mapHighlightRow(r: any) {
+      return {
+        id: r.id,
+        text: r.selection_text ?? "",
+        note: r.note_text ?? "",
+        color: r.color ?? "#ffff00",
+        cfi: r.epubcfi_start ?? "",
+        percentage: r.percentage_start ?? 0,
+      };
+    },
+    async refreshAnnotations() {
+      const token = getToken();
+      if (!token || !this.mediaItemId) return;
+      try {
+        const [hlResp, noteResp] = await Promise.all([
+          fetch(`/api/media-items/${this.mediaItemId}/highlights`, {
+            headers: { Authorization: `Bearer ${token}` },
+          }),
+          fetch(`/api/media-items/${this.mediaItemId}/notes`, {
+            headers: { Authorization: `Bearer ${token}` },
+          }),
+        ]);
+        if (hlResp.ok) {
+          const rows = await hlResp.json();
+          this.highlightItems = (rows as any[])
+            .map((r) => this.mapHighlightRow(r))
+            .filter((hl: any) => hl.cfi);
+          this.renderAllHighlights();
+        }
+        if (noteResp.ok) {
+          const rows = await noteResp.json();
+          this.noteItems = (rows as any[]).map((r) => ({
+            id: r.id,
+            content: r.content ?? "",
+            positionLabel: r.position ?? "",
+          }));
+        }
+      } catch (_e) {
+        /* annotations are non-critical; leave lists as-is */
+      }
+    },
+    async createHighlight(color: string) {
+      const p = this.selectionPopover;
+      const token = getToken();
+      if (!token || !this.mediaItemId || !p.cfi) return;
+      try {
+        const resp = await fetch(
+          `/api/media-items/${this.mediaItemId}/highlights`,
+          {
+            method: "POST",
+            headers: {
+              Authorization: `Bearer ${token}`,
+              "Content-Type": "application/json",
+            },
+            body: JSON.stringify({
+              selection_text: p.text,
+              start_position: "",
+              end_position: "",
+              epubcfi_start: p.cfi,
+              color,
+              note_text: "",
+              percentage_start: this.lastRelocateDetail?.fraction ?? 0,
+            }),
+          },
+        );
+        if (!resp.ok) return;
+        const row = await resp.json();
+        this.highlightItems.push(this.mapHighlightRow(row));
+        this.view?.addAnnotation({
+          value: p.cfi,
+          color,
+          note: "",
+          id: row.id,
+        });
+        this.hideSelectionPopover();
+      } catch (_e) {
+        /* ignore highlight errors */
+      }
+    },
+    async saveHighlightChanges() {
+      const p = this.selectionPopover;
+      const token = getToken();
+      if (!token || !this.mediaItemId || !p.id) return;
+      try {
+        const resp = await fetch(
+          `/api/media-items/${this.mediaItemId}/highlights/${p.id}`,
+          {
+            method: "PUT",
+            headers: {
+              Authorization: `Bearer ${token}`,
+              "Content-Type": "application/json",
+            },
+            body: JSON.stringify({
+              selection_text: p.text,
+              start_position: "",
+              end_position: "",
+              epubcfi_start: p.cfi,
+              color: p.color,
+              note_text: p.note,
+            }),
+          },
+        );
+        if (!resp.ok) return;
+        const row = await resp.json();
+        const idx = this.highlightItems.findIndex((h) => h.id === p.id);
+        if (idx !== -1) this.highlightItems[idx] = this.mapHighlightRow(row);
+        // Re-add so the overlay redraws with the new color.
+        this.view?.addAnnotation({
+          value: p.cfi,
+          color: p.color,
+          note: p.note,
+          id: p.id,
+        });
+        p.noteOpen = false;
+      } catch (_e) {
+        /* ignore highlight errors */
+      }
+    },
+    async deleteHighlightById(id: string) {
+      const token = getToken();
+      if (!token || !this.mediaItemId) return;
+      const hl = this.highlightItems.find((h) => h.id === id);
+      try {
+        const resp = await fetch(
+          `/api/media-items/${this.mediaItemId}/highlights/${id}`,
+          { method: "DELETE", headers: { Authorization: `Bearer ${token}` } },
+        );
+        if (!resp.ok && resp.status !== 204) return;
+        this.highlightItems = this.highlightItems.filter((h) => h.id !== id);
+        if (hl?.cfi) this.view?.deleteAnnotation({ value: hl.cfi });
+        this.hideSelectionPopover();
+      } catch (_e) {
+        /* ignore highlight errors */
+      }
+    },
+    async copySelectionText() {
+      try {
+        await navigator.clipboard.writeText(this.selectionPopover.text);
+        this.hideSelectionPopover();
+      } catch (_e) {
+        /* clipboard unavailable */
+      }
+    },
+    goToHighlight(hl: { cfi: string }) {
+      if (!hl.cfi) return;
+      this.view?.showAnnotation({ value: hl.cfi })?.catch?.(() => {});
+      this.closeDrawers();
+    },
+    async addNote(content: string) {
+      const token = getToken();
+      if (!token || !this.mediaItemId || !content.trim()) return;
+      try {
+        const resp = await fetch(
+          `/api/media-items/${this.mediaItemId}/notes`,
+          {
+            method: "POST",
+            headers: {
+              Authorization: `Bearer ${token}`,
+              "Content-Type": "application/json",
+            },
+            body: JSON.stringify({
+              content,
+              position: !this.isFixedLayout
+                ? `cfi:${this.view?.lastLocation?.cfi ?? ""}`
+                : `page:${(this.renderer?.index ?? 0) + 1}`,
+            }),
+          },
+        );
+        if (!resp.ok) return;
+        await this.refreshAnnotations();
+      } catch (_e) {
+        /* ignore note errors */
+      }
+    },
+    async deleteNoteById(id: string) {
+      const token = getToken();
+      if (!token || !this.mediaItemId) return;
+      try {
+        const resp = await fetch(
+          `/api/media-items/${this.mediaItemId}/notes/${id}`,
+          { method: "DELETE", headers: { Authorization: `Bearer ${token}` } },
+        );
+        if (resp.ok || resp.status === 204) {
+          this.noteItems = this.noteItems.filter((n) => n.id !== id);
+        }
+      } catch (_e) {
+        /* ignore note errors */
+      }
+    },
     debouncedSaveProgress(fraction: number, location: any, cfi: string) {
       if (Date.now() - this.initTime < 5000) return;
       if (this.saveTimeout) clearTimeout(this.saveTimeout);
@@ -1395,7 +1740,9 @@ document.addEventListener("alpine:init", () => {
       else if (k === "-" || k === "_") this.zoomOut();
       else if (k === "0") this.resetZoom();
       else if (k === "Escape") {
-        if (this.anyDrawerOpen()) {
+        if (this.selectionPopover.open) {
+          this.hideSelectionPopover();
+        } else if (this.anyDrawerOpen()) {
           this.closeDrawers();
         } else if (this.isFixedLayout && this.renderer?.zoomMagnifierEnabled) {
           this.toggleMagnifier();

web/static/input.css

@@ -907,6 +907,90 @@
     border-color: #3b82f6;
   }
 
+  /* Selection popover & annotations drawer widgets */
+  .reader-popover {
+    position: fixed;
+    transform: translate(-50%, calc(-100% - 10px));
+    background-color: color-mix(in srgb, var(--bg-primary) 85%, transparent);
+    -webkit-backdrop-filter: blur(16px) saturate(1.3);
+    backdrop-filter: blur(16px) saturate(1.3);
+    border: 1px solid color-mix(in srgb, var(--border) 70%, transparent);
+    border-radius: 0.75rem;
+    box-shadow: 0 8px 28px rgba(0, 0, 0, 0.35);
+    padding: 0.5rem 0.625rem;
+    z-index: 60;
+  }
+  .color-dot {
+    width: 1.375rem;
+    height: 1.375rem;
+    border-radius: 9999px;
+    border: 2px solid rgba(0, 0, 0, 0.25);
+    transition: transform 0.12s ease;
+  }
+  .color-dot:hover {
+    transform: scale(1.15);
+  }
+  .color-dot.selected {
+    border-color: #ffffff;
+    box-shadow: 0 0 0 2px #3b82f6;
+  }
+  .reader-popover-btn {
+    padding: 0.3rem;
+    border-radius: 0.375rem;
+    color: inherit;
+  }
+  .reader-popover-btn:hover {
+    background-color: color-mix(in srgb, currentColor 13%, transparent);
+  }
+  .reader-popover-btn.danger:hover {
+    background-color: rgba(153, 27, 27, 0.6);
+  }
+  .reader-note-input {
+    width: 100%;
+    resize: vertical;
+    padding: 0.5rem;
+    border-radius: 0.5rem;
+    font-size: 0.875rem;
+    color: inherit;
+    background-color: color-mix(in srgb, var(--bg-primary) 55%, transparent);
+    border: 1px solid color-mix(in srgb, var(--border) 70%, transparent);
+  }
+  .reader-note-input:focus {
+    outline: 2px solid #3b82f6;
+    outline-offset: 1px;
+  }
+  .reader-tabs {
+    display: flex;
+    border-bottom: 1px solid var(--border);
+    flex-shrink: 0;
+  }
+  .reader-tabs button {
+    flex: 1;
+    padding: 0.5rem 0.25rem;
+    font-size: 0.8125rem;
+    color: var(--text-secondary);
+    border-bottom: 2px solid transparent;
+  }
+  .reader-tabs button.active {
+    color: var(--text-primary);
+    border-bottom-color: #3b82f6;
+  }
+  .reader-tab-count {
+    display: inline-block;
+    min-width: 1.25rem;
+    margin-left: 0.25rem;
+    padding: 0 0.25rem;
+    border-radius: 9999px;
+    font-size: 0.6875rem;
+    line-height: 1.1rem;
+    background-color: color-mix(in srgb, currentColor 13%, transparent);
+  }
+  .reader-hl-row {
+    display: flex;
+    align-items: center;
+    gap: 0.25rem;
+  }
+
   /* ---------- Series stacked covers ---------- */
   .stacked-covers {
     position: relative;

web/static/style.css

@@ -1,2 +1,2 @@
 *,:after,:before{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgba(59,130,246,.5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }::backdrop{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgba(59,130,246,.5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }
-/*! tailwindcss v3.4.19 | MIT License | https://tailwindcss.com*/*,:after,:before{box-sizing:border-box;border:0 solid #e5e7eb}:after,:before{--tw-content:""}:host,html{line-height:1.5;-webkit-text-size-adjust:100%;-moz-tab-size:4;-o-tab-size:4;tab-size:4;font-family:ui-sans-serif,system-ui,sans-serif,Noto Sans SC,Noto Sans TC,Noto Sans JP,Noto Sans KR,PingFang SC,Microsoft YaHei,Hiragino Sans,Apple SD Gothic Neo,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji;font-feature-settings:normal;font-variation-settings:normal;-webkit-tap-highlight-color:transparent}body{margin:0;line-height:inherit}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,pre,samp{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;font-feature-settings:normal;font-variation-settings:normal;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}button,input,optgroup,select,textarea{font-family:inherit;font-feature-settings:inherit;font-variation-settings:inherit;font-size:100%;font-weight:inherit;line-height:inherit;letter-spacing:inherit;color:inherit;margin:0;padding:0}button,select{text-transform:none}button,input:where([type=button]),input:where([type=reset]),input:where([type=submit]){-webkit-appearance:button;background-color:transparent;background-image:none}:-moz-focusring{outline:auto}:-moz-ui-invalid{box-shadow:none}progress{vertical-align:baseline}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}blockquote,dd,dl,figure,h1,h2,h3,h4,h5,h6,hr,p,pre{margin:0}fieldset{margin:0}fieldset,legend{padding:0}menu,ol,ul{list-style:none;margin:0;padding:0}dialog{padding:0}textarea{resize:vertical}input::-moz-placeholder,textarea::-moz-placeholder{opacity:1;color:#9ca3af}input::placeholder,textarea::placeholder{opacity:1;color:#9ca3af}[role=button],button{cursor:pointer}:disabled{cursor:default}audio,canvas,embed,iframe,img,object,svg,video{display:block;vertical-align:middle}img,video{max-width:100%;height:auto}[hidden]:where(:not([hidden=until-found])){display:none}input:where(:not([type])),input:where([type=date]),input:where([type=datetime-local]),input:where([type=email]),input:where([type=month]),input:where([type=number]),input:where([type=password]),input:where([type=search]),input:where([type=tel]),input:where([type=text]),input:where([type=time]),input:where([type=url]),input:where([type=week]),select,select:where([multiple]),textarea{-webkit-appearance:none;-moz-appearance:none;appearance:none;background-color:#fff;border-color:#6b7280;border-width:1px;border-radius:0;padding:.5rem .75rem;font-size:1rem;line-height:1.5rem;--tw-shadow:0 0 #0000}input:where(:not([type])):focus,input:where([type=date]):focus,input:where([type=datetime-local]):focus,input:where([type=email]):focus,input:where([type=month]):focus,input:where([type=number]):focus,input:where([type=password]):focus,input:where([type=search]):focus,input:where([type=tel]):focus,input:where([type=text]):focus,input:where([type=time]):focus,input:where([type=url]):focus,input:where([type=week]):focus,select:focus,select:where([multiple]):focus,textarea:focus{outline:2px solid transparent;outline-offset:2px;--tw-ring-inset:var(--tw-empty,/*!*/ /*!*/);--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:#2563eb;--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow);border-color:#2563eb}input::-moz-placeholder,textarea::-moz-placeholder{color:#6b7280;opacity:1}input::placeholder,textarea::placeholder{color:#6b7280;opacity:1}::-webkit-datetime-edit-fields-wrapper{padding:0}::-webkit-date-and-time-value{min-height:1.5em;text-align:inherit}::-webkit-datetime-edit{display:inline-flex}::-webkit-datetime-edit,::-webkit-datetime-edit-day-field,::-webkit-datetime-edit-hour-field,::-webkit-datetime-edit-meridiem-field,::-webkit-datetime-edit-millisecond-field,::-webkit-datetime-edit-minute-field,::-webkit-datetime-edit-month-field,::-webkit-datetime-edit-second-field,::-webkit-datetime-edit-year-field{padding-top:0;padding-bottom:0}select{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3E%3Cpath Line truncated
+/*! tailwindcss v3.4.19 | MIT License | https://tailwindcss.com*/*,:after,:before{box-sizing:border-box;border:0 solid #e5e7eb}:after,:before{--tw-content:""}:host,html{line-height:1.5;-webkit-text-size-adjust:100%;-moz-tab-size:4;-o-tab-size:4;tab-size:4;font-family:ui-sans-serif,system-ui,sans-serif,Noto Sans SC,Noto Sans TC,Noto Sans JP,Noto Sans KR,PingFang SC,Microsoft YaHei,Hiragino Sans,Apple SD Gothic Neo,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji;font-feature-settings:normal;font-variation-settings:normal;-webkit-tap-highlight-color:transparent}body{margin:0;line-height:inherit}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,pre,samp{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;font-feature-settings:normal;font-variation-settings:normal;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}button,input,optgroup,select,textarea{font-family:inherit;font-feature-settings:inherit;font-variation-settings:inherit;font-size:100%;font-weight:inherit;line-height:inherit;letter-spacing:inherit;color:inherit;margin:0;padding:0}button,select{text-transform:none}button,input:where([type=button]),input:where([type=reset]),input:where([type=submit]){-webkit-appearance:button;background-color:transparent;background-image:none}:-moz-focusring{outline:auto}:-moz-ui-invalid{box-shadow:none}progress{vertical-align:baseline}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}blockquote,dd,dl,figure,h1,h2,h3,h4,h5,h6,hr,p,pre{margin:0}fieldset{margin:0}fieldset,legend{padding:0}menu,ol,ul{list-style:none;margin:0;padding:0}dialog{padding:0}textarea{resize:vertical}input::-moz-placeholder,textarea::-moz-placeholder{opacity:1;color:#9ca3af}input::placeholder,textarea::placeholder{opacity:1;color:#9ca3af}[role=button],button{cursor:pointer}:disabled{cursor:default}audio,canvas,embed,iframe,img,object,svg,video{display:block;vertical-align:middle}img,video{max-width:100%;height:auto}[hidden]:where(:not([hidden=until-found])){display:none}input:where(:not([type])),input:where([type=date]),input:where([type=datetime-local]),input:where([type=email]),input:where([type=month]),input:where([type=number]),input:where([type=password]),input:where([type=search]),input:where([type=tel]),input:where([type=text]),input:where([type=time]),input:where([type=url]),input:where([type=week]),select,select:where([multiple]),textarea{-webkit-appearance:none;-moz-appearance:none;appearance:none;background-color:#fff;border-color:#6b7280;border-width:1px;border-radius:0;padding:.5rem .75rem;font-size:1rem;line-height:1.5rem;--tw-shadow:0 0 #0000}input:where(:not([type])):focus,input:where([type=date]):focus,input:where([type=datetime-local]):focus,input:where([type=email]):focus,input:where([type=month]):focus,input:where([type=number]):focus,input:where([type=password]):focus,input:where([type=search]):focus,input:where([type=tel]):focus,input:where([type=text]):focus,input:where([type=time]):focus,input:where([type=url]):focus,input:where([type=week]):focus,select:focus,select:where([multiple]):focus,textarea:focus{outline:2px solid transparent;outline-offset:2px;--tw-ring-inset:var(--tw-empty,/*!*/ /*!*/);--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:#2563eb;--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow);border-color:#2563eb}input::-moz-placeholder,textarea::-moz-placeholder{color:#6b7280;opacity:1}input::placeholder,textarea::placeholder{color:#6b7280;opacity:1}::-webkit-datetime-edit-fields-wrapper{padding:0}::-webkit-date-and-time-value{min-height:1.5em;text-align:inherit}::-webkit-datetime-edit{display:inline-flex}::-webkit-datetime-edit,::-webkit-datetime-edit-day-field,::-webkit-datetime-edit-hour-field,::-webkit-datetime-edit-meridiem-field,::-webkit-datetime-edit-millisecond-field,::-webkit-datetime-edit-minute-field,::-webkit-datetime-edit-month-field,::-webkit-datetime-edit-second-field,::-webkit-datetime-edit-year-field{padding-top:0;padding-bottom:0}select{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3E%3Cpath Line truncated