feat(podcasts): Download All queues in the LISTENING order + add-modal order dropdown

Download All previously queued in feed-native order — 'getting the
last chapter first doesn't help me'. Now the queue follows the feed's
effective listening order (§0 item 5b): QueueFeedDownloadsAs reads the
CALLER's order override and runs episodes through services.OrderEpisodes
(same helper as the sequence/reader/page surfaces — the consolidation
from item 5a landed with the reverse-order commit). Queue tickets
(SEQUENCE-stamped, item 4) make that enqueue order the claim order, so
chapters land in the order you'll actually listen.

Add modal (§0 item 5c): with 'Download all episodes now' checked, a
'Download order' select appears (pure-CSS :checked sibling reveal — no
JS island, CSP-clean). Its choice is the feed's INITIAL order override
(reader_settings upsert; 'feed' = no row) AND the queue order for the
initial batch. Per-book by design: the override IS the download order.

Test TestPodcastAddModalDownloadOrder: add with download_all+reverse →
the override row exists AND persisted tickets run position 3→1. Tickets
are asserted (not live queued rows) because the shared dev server's
worker legitimately races this test's queue — tickets survive every
state flip.

cmd/server/tests/podcast_test.go

@@ -1159,3 +1159,84 @@ func TestLogoutClearsSession(t *testing.T) {
 	}
 	assert.True(t, cleared, "cookie clear must not depend on the request body")
 }
+
+// ---- §0 item 5: add-modal Download order — override + queue order ----
+
+func TestPodcastAddModalDownloadOrder(t *testing.T) {
+	setup := setupTestServer(t)
+	lib, _ := createPodcastsLibrary(t, setup, "test AddOrder Podcasts")
+
+	mux := http.NewServeMux()
+	mux.HandleFunc("/feed.xml", func(w http.ResponseWriter, _ *http.Request) {
+		w.Header().Set("Content-Type", "application/rss+xml")
+		_, _ = w.Write([]byte(podcastFixture("AddOrder Feed", map[string]string{
+			"ao-1": "AddOrder One", "ao-2": "AddOrder Two", "ao-3": "AddOrder Three",
+		})))
+	})
+	srv := swapFeedServer(t, mux.ServeHTTP)
+
+	form := url.Values{}
+	form.Set("library_id", uuid.UUID(lib.ID.Bytes).String())
+	form.Set("url", srv.URL+"/feed.xml")
+	form.Set("download_all", "true")
+	form.Set("download_order", "reverse") // the add-modal dropdown (§0 item 5c)
+	resp, body := podcastAuthedForm(t, setup, setup.RegularToken, "POST", "/api/podcasts/feeds", form)
+	require.Equal(t, http.StatusCreated, resp, string(body))
+
+	regularID := getRegularUserID(t, setup.DB)
+	regularPG := pgtype.UUID{Bytes: regularID, Valid: true}
+	rctx := rls.WithUser(context.Background(), regularPG)
+	workerCtx := adminSeedCtx(t, setup)
+
+	feeds, _ := setup.DB.ListPodcastFeedsForPolling(rctx)
+	var feedID pgtype.UUID
+	for _, f := range feeds {
+		if f.Title == "AddOrder Feed" {
+			feedID = f.ID
+		}
+	}
+	require.True(t, feedID.Valid, "subscribed feed must exist")
+
+	// PIN 1: the override row exists (the dropdown IS the initial order).
+	row, err := setup.DB.GetUserSettingByKey(rctx, database.GetUserSettingByKeyParams{
+		UserID: regularPG, SettingKey: "podcast_order:" + feedID.String(),
+	})
+	require.NoError(t, err)
+	assert.Contains(t, string(row), "reverse", "PIN: the add-modal dropdown sets the caller's order override")
+
+	// PIN 2: the queue follows the LISTENING order — with reverse, the
+	// tickets run position 3 → 1 (claim order = download order). Read
+	// the PERSISTED tickets rather than live queued rows: the shared
+	// dev server's worker races this test's queue and flips rows to
+	// failed (its container can't reach the fixture URLs) — tickets
+	// survive every state flip.
+	var tickets []struct {
+		ID  string
+		Pos int64
+	}
+	adminScope := database.NewScopedDB(setup.DBPool)
+	ticketRows, err := adminScope.Query(workerCtx,
+		`SELECT id::TEXT, download_queue_pos FROM media_items
+		 WHERE source_feed_id = $1 AND download_queue_pos IS NOT NULL
+		 ORDER BY download_queue_pos ASC`, feedID)
+	require.NoError(t, err)
+	for ticketRows.Next() {
+		var id string
+		var pos int64
+		require.NoError(t, ticketRows.Scan(&id, &pos), "scan ticket")
+		tickets = append(tickets, struct {
+			ID  string
+			Pos int64
+		}{id, pos})
+	}
+	ticketRows.Close()
+	require.Len(t, tickets, 3, "all 3 episodes got tickets")
+	eps, err := setup.DB.ListPodcastEpisodes(workerCtx, feedID)
+	require.NoError(t, err)
+	byID := map[string]int32{}
+	for _, ep := range eps {
+		byID[uuid.UUID(ep.ID.Bytes).String()] = ep.FeedPosition.Int32
+	}
+	assert.Equal(t, int32(3), byID[tickets[0].ID], "PIN: reverse download order — position 3 claims first")
+	assert.Equal(t, int32(1), byID[tickets[2].ID])
+}

internal/handlers/podcast.go

@@ -90,6 +90,11 @@ type AddPodcastFeedRequest struct {
 	LibraryID   string   `json:"library_id" form:"library_id" validate:"required"`
 	URL         string   `json:"url" form:"url" validate:"required"`
 	DownloadAll FlexBool `json:"download_all" form:"download_all"`
+	// DownloadOrder: the initial listening order for THIS feed, applied
+	// only with DownloadAll (§0 item 5c) — it both seeds the queue in
+	// listening order and sets the caller's order override. ""/"feed" =
+	// no override row.
+	DownloadOrder string `json:"download_order,omitempty" form:"download_order"`
 }
 
 // FlexBool binds checkbox-style booleans on every wire. echo bool-binds
@@ -182,7 +187,23 @@ func (h *PodcastHandler) AddFeed(c *echo.Context) error {
 		return podcastErrorResponse(c, err)
 	}
 	if req.DownloadAll && res.Feed != nil {
-		if _, err := h.worker.QueueFeedDownloads(c.Request().Context(), res.Feed.ID); err != nil {
+		// §0 item 5c: the add modal's order dropdown is the feed's
+		// INITIAL listening order — it IS the download order (the queue
+		// seeds in that order below). 'feed'/'native' = no override row.
+		order := "native"
+		switch req.DownloadOrder {
+		case "reverse", "oldest", "newest":
+			order = req.DownloadOrder
+			payload, _ := json.Marshal(map[string]string{"order": order})
+			if err := h.db.UpsertUserSettingByKey(c.Request().Context(), database.UpsertUserSettingByKeyParams{
+				UserID: user.ID, SettingKey: podcastOrderSettingKey(res.Feed.ID.String()), SettingValue: payload,
+			}); err != nil {
+				// subscription + queue stand; the dropdown just won't
+				// preselect it (surfaced on the next order set).
+				_ = err
+			}
+		}
+		if _, err := h.worker.QueueFeedDownloadsAs(c.Request().Context(), user.ID, res.Feed.ID); err != nil {
 			// subscription stands; download-all failure surfaces via the
 			// episode list states.
 		}
@@ -412,7 +433,8 @@ func (h *PodcastHandler) DownloadEpisodes(c *echo.Context) error {
 	eidRaw := c.Param("eid")
 	if eidRaw == "all" {
 		// Download All affordance: exactly the non-downloaded set (pin).
-		queued, err := h.worker.QueueFeedDownloads(ctx, feedID)
+		// Queues in the CALLER's listening order (§0 item 5b).
+		queued, err := h.worker.QueueFeedDownloadsAs(ctx, user.ID, feedID)
 		if err != nil {
 			return podcastErrorResponse(c, err)
 		}

internal/services/podcast_worker.go

@@ -301,6 +301,15 @@ func (w *PodcastDownloadWorker) QueueEpisode(ctx context.Context, episodeID, fee
 // QueueFeedDownloads implements "Download All" (D8): queue exactly the
 // non-downloaded set — pending AND failed rows (retry is the same path).
 func (w *PodcastDownloadWorker) QueueFeedDownloads(ctx context.Context, feedID pgtype.UUID) (int, error) {
+	return w.QueueFeedDownloadsAs(ctx, pgtype.UUID{}, feedID)
+}
+
+// QueueFeedDownloadsAs is Download All honoring the CALLER's listening
+// order (§0 item 5b): episodes queue in the feed's effective order (the
+// caller's override, feed-native fallback). Tickets (§0 item 4) make
+// that queue order the download order — "getting the last chapter
+// first doesn't help me". userID zero = no override (feed order).
+func (w *PodcastDownloadWorker) QueueFeedDownloadsAs(ctx context.Context, userID, feedID pgtype.UUID) (int, error) {
 	actx, err := w.svc.adminCtx(ctx)
 	if err != nil {
 		return 0, err
@@ -313,6 +322,23 @@ func (w *PodcastDownloadWorker) QueueFeedDownloads(ctx context.Context, feedID p
 	if err != nil {
 		return 0, err
 	}
+
+	order := "native"
+	if userID.Valid {
+		order = w.orderOverrideFor(actx, userID, feedID)
+	}
+	// THE order helper (§0 item 5a) — same semantics as the sequence,
+	// reader chain, and page list; no per-surface sort drift.
+	OrderEpisodes(eps, order,
+		func(ep database.MediaItems) int32 { return ep.FeedPosition.Int32 },
+		func(ep database.MediaItems) string {
+			if ep.DatePublished.Valid {
+				return ep.DatePublished.Time.Format("2006-01-02")
+			}
+			return ""
+		},
+	)
+
 	queued := 0
 	for _, ep := range eps {
 		if _, err := w.db.SetPodcastEpisodeDownloadQueued(actx, ep.ID); err == nil {
@@ -323,6 +349,24 @@ func (w *PodcastDownloadWorker) QueueFeedDownloads(ctx context.Context, feedID p
 	return queued, nil
 }
 
+// orderOverrideFor reads a user's podcast_order override via the
+// reader_settings KV (the D5 storage; native when absent/invalid).
+func (w *PodcastDownloadWorker) orderOverrideFor(ctx context.Context, userID, feedID pgtype.UUID) string {
+	row, err := w.db.GetUserSettingByKey(ctx, database.GetUserSettingByKeyParams{
+		UserID: userID, SettingKey: "podcast_order:" + feedID.String(),
+	})
+	if err != nil {
+		return "native"
+	}
+	var v struct {
+		Order string `json:"order"`
+	}
+	if json.Unmarshal(row, &v) != nil || !ValidPodcastEpisodeOrder(v.Order) {
+		return "native"
+	}
+	return v.Order
+}
+
 // ApplyAutoPolicies unions subscriber policies for a feed (D6: most
 // aggressive wins for what ARRIVES — deletion stays admin-only) and
 // queues the target set, respecting the auto-retry attempt cap.

templates/podcasts.templ

@@ -238,10 +238,24 @@ templ PodcastAddFeedModal(libraries []LibraryData) {
 				} else if len(libraries) == 1 {
 					<input type="hidden" name="library_id" value={ libraries[0].ID }/>
 				}
-				<label class="flex items-center gap-2 text-sm" style="color: var(--text-secondary)">
+				<div class="flex items-center gap-2 text-sm">
-					<input type="checkbox" name="download_all" value="true" class="cursor-pointer"/>
+					<input type="checkbox" id="podcast-download-all" name="download_all" value="true" class="cursor-pointer"/>
-					Download all episodes now
+					<label for="podcast-download-all" style="color: var(--text-secondary)">Download all episodes now</label>
-				</label>
+				</div>
+				<div class="podcast-add-order flex items-center gap-2 text-sm pl-6">
+					<label for="podcast-download-order" style="color: var(--text-secondary)">Download order</label>
+					<select
+						id="podcast-download-order"
+						name="download_order"
+						class="input w-auto py-1.5 cursor-pointer"
+						title="Listen/download order for this feed — chapters land in this order"
+					>
+						<option value="feed" selected>Feed order</option>
+						<option value="reverse">Feed order (reversed)</option>
+						<option value="oldest">Oldest first (pub date)</option>
+						<option value="newest">Newest first (pub date)</option>
+					</select>
+				</div>
 				<div id="podcast-add-feed-error" class="text-sm hidden" style="color: var(--status-danger)"></div>
 				<div class="flex justify-end gap-2">
 					<button type="button" class="btn btn-secondary" @click="hideAddFeed()">Cancel</button>

templates/podcasts_templ.go

@@ -709,7 +709,7 @@ func PodcastAddFeedModal(libraries []LibraryData) templ.Component {
 				return templ_7745c5c3_Err
 			}
 		}
-		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 60, "<label class=\"flex items-center gap-2 text-sm\" style=\"color: var(--text-secondary)\"><input type=\"checkbox\" name=\"download_all\" value=\"true\" class=\"cursor-pointer\"> Download all episodes now</label><div id=\"podcast-add-feed-error\" class=\"text-sm hidden\" style=\"color: var(--status-danger)\"></div><div class=\"flex justify-end gap-2\"><button type=\"button\" class=\"btn btn-secondary\" @click=\"hideAddFeed()\">Cancel</button> <button type=\"submit\" class=\"btn btn-primary\">")
+		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 60, "<div class=\"flex items-center gap-2 text-sm\"><input type=\"checkbox\" id=\"podcast-download-all\" name=\"download_all\" value=\"true\" class=\"cursor-pointer\"> <label for=\"podcast-download-all\" style=\"color: var(--text-secondary)\">Download all episodes now</label></div><div class=\"podcast-add-order flex items-center gap-2 text-sm pl-6\"><label for=\"podcast-download-order\" style=\"color: var(--text-secondary)\">Download order</label> <select id=\"podcast-download-order\" name=\"download_order\" class=\"input w-auto py-1.5 cursor-pointer\" title=\"Listen/download order for this feed — chapters land in this order\"><option value=\"feed\" selected>Feed order</option> <option value=\"reverse\">Feed order (reversed)</option> <option value=\"oldest\">Oldest first (pub date)</option> <option value=\"newest\">Newest first (pub date)</option></select></div><div id=\"podcast-add-feed-error\" class=\"text-sm hidden\" style=\"color: var(--status-danger)\"></div><div class=\"flex justify-end gap-2\"><button type=\"button\" class=\"btn btn-secondary\" @click=\"hideAddFeed()\">Cancel</button> <button type=\"submit\" class=\"btn btn-primary\">")
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}

web/static/input.css

@@ -2141,3 +2141,9 @@
   animation: podcast-indeterminate 1.3s ease-in-out infinite;
 }
 
+/* ---------- Add-feed modal: order dropdown reveals with the
+   "Download all" checkbox (§0 item 5c) — pure CSS, no JS island. The
+   select is a sibling of the checkbox label's input. */
+.podcast-add-order { display: none; }
+#podcast-download-all:checked ~ .podcast-add-order { display: flex; }
+

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