From 4dd2f9280ff6c903b95cc2624ee4e71fc8afec05 Mon Sep 17 00:00:00 2001
From: JetSprow <jetsprow.69e24a3d@example.invalid>
Date: Fri, 1 May 2026 00:58:46 +1000
Subject: [PATCH] polish: refine admin ui controls

---
 .../admin/announcements/announcement-form.tsx | 242 +++++++++++-------
 .../_components/discount-type-select.tsx      |  45 ++++
 src/app/(admin)/admin/commerce/page.tsx       |  16 +-
 src/app/(admin)/admin/nodes/node-actions.tsx  |   4 +-
 src/app/(admin)/admin/nodes/node-form.tsx     |  27 +-
 .../(admin)/admin/payments/config-form.tsx    |  29 ++-
 .../admin/plans/plan-basics-section.tsx       |  24 +-
 src/app/(admin)/admin/plans/plan-form.tsx     |  22 +-
 .../admin/plans/plan-policy-section.tsx       |  34 +--
 .../admin/plans/proxy-config-section.tsx      |  30 +--
 .../admin/plans/streaming-config-section.tsx  |   4 +-
 .../(admin)/admin/services/service-form.tsx   |  29 ++-
 .../(admin)/admin/settings/settings-form.tsx  |  55 ++--
 .../_components/support-ticket-meta-form.tsx  |  35 +--
 .../support-ticket-meta-selects.tsx           |  77 ++++++
 src/app/(admin)/admin/users/user-form.tsx     |  31 ++-
 .../(user)/store/latency-detail-dialog.tsx    |   2 +-
 src/app/(user)/store/proxy-detail-dialog.tsx  |  16 +-
 .../store/proxy-trace-detail-dialog.tsx       |   2 +-
 .../(user)/store/streaming-detail-dialog.tsx  |  11 +-
 .../_components/renewal-button.tsx            |   2 +-
 .../_components/traffic-topup-dialog.tsx      |   2 +-
 .../create-support-ticket-form.tsx            |  41 ++-
 src/components/admin/filter-bar.tsx           |  76 ++++--
 .../shared/confirm-action-button.tsx          |   2 +-
 .../subscription-risk-review-actions.tsx      |   2 +-
 src/components/ui/boolean-toggle.tsx          |  14 +-
 src/components/ui/dialog.tsx                  |  66 ++++-
 src/components/ui/input.tsx                   |   2 +-
 src/components/ui/select.tsx                  |  16 +-
 30 files changed, 651 insertions(+), 307 deletions(-)
 create mode 100644 src/app/(admin)/admin/commerce/_components/discount-type-select.tsx
 create mode 100644 src/app/(admin)/admin/support/_components/support-ticket-meta-selects.tsx

diff --git a/src/app/(admin)/admin/announcements/announcement-form.tsx b/src/app/(admin)/admin/announcements/announcement-form.tsx
index 016ce3a..5de5acb 100644
--- a/src/app/(admin)/admin/announcements/announcement-form.tsx
+++ b/src/app/(admin)/admin/announcements/announcement-form.tsx
@@ -15,6 +15,7 @@ import { BooleanToggle } from "@/components/ui/boolean-toggle";
 import { Button } from "@/components/ui/button";
 import {
   Dialog,
+  DialogBody,
   DialogContent,
   DialogHeader,
   DialogTitle,
@@ -22,6 +23,13 @@ import {
 } from "@/components/ui/dialog";
 import { Input } from "@/components/ui/input";
 import { Label } from "@/components/ui/label";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
 import { Textarea } from "@/components/ui/textarea";
 import { getErrorMessage } from "@/lib/errors";
 
@@ -43,6 +51,32 @@ interface AnnouncementFormData {
   endAt: Date | string | null;
 }
 
+const audienceLabels: Record<AnnouncementAudience, string> = {
+  PUBLIC: "公开",
+  USERS: "全部用户",
+  ADMINS: "全部管理员",
+  SPECIFIC_USER: "指定用户",
+};
+
+const displayTypeLabels: Record<AnnouncementDisplayType, string> = {
+  INLINE: "普通公告",
+  BIG: "大公告",
+  POPUP: "弹窗公告",
+};
+
+function getAudienceLabel(value: unknown) {
+  return audienceLabels[value as AnnouncementAudience] ?? "选择范围";
+}
+
+function getDisplayTypeLabel(value: unknown) {
+  return displayTypeLabels[value as AnnouncementDisplayType] ?? "选择展示方式";
+}
+
+function getTargetUserLabel(users: AnnouncementOptionUser[], value: unknown) {
+  if (!value) return "不指定";
+  return users.find((user) => user.id === value)?.email ?? "选择用户";
+}
+
 function toDateTimeLocalValue(value: Date | string | null) {
   if (!value) {
     return "";
@@ -94,48 +128,55 @@ export function AnnouncementForm({
       <DialogTrigger render={<Button variant={triggerVariant} size="sm" />}>
         {triggerLabel ?? "编辑"}
       </DialogTrigger>
-      <DialogContent className="sm:max-w-2xl">
-        <DialogHeader>
+      <DialogContent className="flex max-h-[min(90dvh,38rem)] flex-col overflow-hidden p-0 sm:max-w-[30rem]">
+        <DialogHeader className="border-b border-border/60 px-4 py-3 pr-10">
           <DialogTitle>编辑公告</DialogTitle>
         </DialogHeader>
-        <form action={handleSubmit} className="space-y-4">
-          <div className="grid gap-4 md:grid-cols-2">
-            <div className="space-y-2">
+        <DialogBody className="flex-1 px-4 py-3">
+        <form action={handleSubmit} className="space-y-3 text-[12px] leading-5 [&_[data-slot=input]]:!h-8 [&_[data-slot=input]]:!min-h-8 [&_[data-slot=input]]:!px-2.5 [&_[data-slot=input]]:!text-xs [&_[data-slot=label]]:!text-xs [&_[data-slot=select-trigger]]:!h-8 [&_[data-slot=select-trigger]]:!min-h-8 [&_[data-slot=select-trigger]]:!px-2.5 [&_[data-slot=select-trigger]]:!text-xs [&_textarea]:!text-xs">
+          <div className="grid gap-3 md:grid-cols-2">
+            <div className="space-y-1.5">
               <Label htmlFor={`title-${announcement.id}`}>标题</Label>
               <Input id={`title-${announcement.id}`} name="title" defaultValue={announcement.title} required />
             </div>
-            <div className="space-y-2">
+            <div className="space-y-1.5">
               <Label htmlFor={`audience-${announcement.id}`}>目标范围</Label>
-              <select
-                id={`audience-${announcement.id}`}
+              <Select
                 name="audience"
-                defaultValue={announcement.audience}
-                onChange={(event) => setAudience(event.target.value as AnnouncementAudience)}
-                className="h-10 w-full px-3 text-sm outline-none"
+                value={audience}
+                onValueChange={(value) => setAudience((value ?? "USERS") as AnnouncementAudience)}
               >
-                <option value="PUBLIC">公开（登录/注册页可见）</option>
-                <option value="USERS">全部用户</option>
-                <option value="ADMINS">全部管理员</option>
-                <option value="SPECIFIC_USER">指定用户</option>
-              </select>
+                <SelectTrigger id={`audience-${announcement.id}`} className="w-full">
+                  <SelectValue>{(value) => getAudienceLabel(value)}</SelectValue>
+                </SelectTrigger>
+                <SelectContent align="start">
+                  <SelectItem value="PUBLIC">公开（登录/注册页可见）</SelectItem>
+                  <SelectItem value="USERS">全部用户</SelectItem>
+                  <SelectItem value="ADMINS">全部管理员</SelectItem>
+                  <SelectItem value="SPECIFIC_USER">指定用户</SelectItem>
+                </SelectContent>
+              </Select>
             </div>
           </div>
 
-          <div className="grid gap-4 md:grid-cols-2">
-            <div className="space-y-2">
+          <div className="grid gap-3 md:grid-cols-2">
+            <div className="space-y-1.5">
               <Label htmlFor={`displayType-${announcement.id}`}>展示方式</Label>
-              <select
-                id={`displayType-${announcement.id}`}
+              <Select
                 name="displayType"
                 defaultValue={announcement.displayType}
-                className="h-10 w-full px-3 text-sm outline-none"
               >
-                <option value="INLINE">普通公告</option>
-                <option value="BIG">大公告</option>
-                <option value="POPUP">弹窗公告</option>
-              </select>
+                <SelectTrigger id={`displayType-${announcement.id}`} className="w-full">
+                  <SelectValue>{(value) => getDisplayTypeLabel(value)}</SelectValue>
+                </SelectTrigger>
+                <SelectContent align="start">
+                  <SelectItem value="INLINE">普通公告</SelectItem>
+                  <SelectItem value="BIG">大公告</SelectItem>
+                  <SelectItem value="POPUP">弹窗公告</SelectItem>
+                </SelectContent>
+              </Select>
             </div>
-            <div className="space-y-2">
+            <div className="space-y-1.5">
               <Label htmlFor={`dismissible-${announcement.id}`}>允许用户关闭</Label>
               <BooleanToggle
                 id={`dismissible-${announcement.id}`}
@@ -144,29 +185,33 @@ export function AnnouncementForm({
                 trueLabel="允许"
                 falseLabel="不允许"
                 ariaLabel="允许用户关闭"
+                size="compact"
               />
             </div>
           </div>
 
-          <div className="space-y-2">
+          <div className="space-y-1.5">
             <Label htmlFor={`targetUserId-${announcement.id}`}>指定用户（可选）</Label>
-            <select
-              id={`targetUserId-${announcement.id}`}
+            <Select
               name="targetUserId"
               defaultValue={announcement.targetUserId ?? ""}
               disabled={audience !== "SPECIFIC_USER"}
-              className="h-10 w-full px-3 text-sm outline-none disabled:cursor-not-allowed disabled:opacity-60"
             >
-              <option value="">不指定</option>
-              {users.map((user) => (
-                <option key={user.id} value={user.id}>
-                  {user.email}
-                </option>
-              ))}
-            </select>
+              <SelectTrigger id={`targetUserId-${announcement.id}`} className="w-full">
+                <SelectValue>{(value) => getTargetUserLabel(users, value)}</SelectValue>
+              </SelectTrigger>
+              <SelectContent align="start">
+                <SelectItem value="">不指定</SelectItem>
+                {users.map((user) => (
+                  <SelectItem key={user.id} value={user.id}>
+                    {user.email}
+                  </SelectItem>
+                ))}
+              </SelectContent>
+            </Select>
           </div>
 
-          <div className="space-y-2">
+          <div className="space-y-1.5">
             <Label htmlFor={`body-${announcement.id}`}>内容</Label>
             <Textarea
               id={`body-${announcement.id}`}
@@ -177,8 +222,8 @@ export function AnnouncementForm({
             />
           </div>
 
-          <div className="grid gap-4 md:grid-cols-2">
-            <div className="space-y-2">
+          <div className="grid gap-3 md:grid-cols-2">
+            <div className="space-y-1.5">
               <Label htmlFor={`startAt-${announcement.id}`}>开始时间（可选）</Label>
               <Input
                 id={`startAt-${announcement.id}`}
@@ -187,7 +232,7 @@ export function AnnouncementForm({
                 defaultValue={toDateTimeLocalValue(announcement.startAt)}
               />
             </div>
-            <div className="space-y-2">
+            <div className="space-y-1.5">
               <Label htmlFor={`endAt-${announcement.id}`}>结束时间（可选）</Label>
               <Input
                 id={`endAt-${announcement.id}`}
@@ -198,7 +243,7 @@ export function AnnouncementForm({
             </div>
           </div>
 
-          <div className="space-y-2">
+          <div className="space-y-1.5">
             <Label htmlFor={`sendNotification-${announcement.id}`}>同步发送站内通知</Label>
             <BooleanToggle
               id={`sendNotification-${announcement.id}`}
@@ -207,13 +252,15 @@ export function AnnouncementForm({
               trueLabel="发送"
               falseLabel="不发送"
               ariaLabel="同步发送站内通知"
+              size="compact"
             />
           </div>
 
-          <PendingSubmitButton className="w-full" pendingLabel="保存中...">
+          <PendingSubmitButton className="h-8 w-full" pendingLabel="保存中...">
             保存修改
           </PendingSubmitButton>
         </form>
+        </DialogBody>
       </DialogContent>
     </Dialog>
   );
@@ -239,50 +286,65 @@ export function CreateAnnouncementButton({
   }
 
   return (
-    <Dialog open={open} onOpenChange={setOpen}>
+    <Dialog
+      open={open}
+      onOpenChange={(nextOpen) => {
+        if (nextOpen) {
+          setAudience("USERS");
+        }
+        setOpen(nextOpen);
+      }}
+    >
       <DialogTrigger render={<Button />}>发布公告</DialogTrigger>
-      <DialogContent className="sm:max-w-2xl">
-        <DialogHeader>
+      <DialogContent className="flex max-h-[min(90dvh,38rem)] flex-col overflow-hidden p-0 sm:max-w-[30rem]">
+        <DialogHeader className="border-b border-border/60 px-4 py-3 pr-10">
           <DialogTitle>发布公告</DialogTitle>
         </DialogHeader>
-        <form action={handleSubmit} className="space-y-4">
-          <div className="grid gap-4 md:grid-cols-2">
-            <div className="space-y-2">
+        <DialogBody className="flex-1 px-4 py-3">
+        <form action={handleSubmit} className="space-y-3 text-[12px] leading-5 [&_[data-slot=input]]:!h-8 [&_[data-slot=input]]:!min-h-8 [&_[data-slot=input]]:!px-2.5 [&_[data-slot=input]]:!text-xs [&_[data-slot=label]]:!text-xs [&_[data-slot=select-trigger]]:!h-8 [&_[data-slot=select-trigger]]:!min-h-8 [&_[data-slot=select-trigger]]:!px-2.5 [&_[data-slot=select-trigger]]:!text-xs [&_textarea]:!text-xs">
+          <div className="grid gap-3 md:grid-cols-2">
+            <div className="space-y-1.5">
               <Label htmlFor="create-announcement-title">标题</Label>
               <Input id="create-announcement-title" name="title" required />
             </div>
-            <div className="space-y-2">
+            <div className="space-y-1.5">
               <Label htmlFor="create-announcement-audience">目标范围</Label>
-              <select
-                id="create-announcement-audience"
+              <Select
                 name="audience"
-                defaultValue="USERS"
-                onChange={(event) => setAudience(event.target.value as AnnouncementAudience)}
-                className="h-10 w-full px-3 text-sm outline-none"
+                value={audience}
+                onValueChange={(value) => setAudience((value ?? "USERS") as AnnouncementAudience)}
               >
-                <option value="PUBLIC">公开（登录/注册页可见）</option>
-                <option value="USERS">全部用户</option>
-                <option value="ADMINS">全部管理员</option>
-                <option value="SPECIFIC_USER">指定用户</option>
-              </select>
+                <SelectTrigger id="create-announcement-audience" className="w-full">
+                  <SelectValue>{(value) => getAudienceLabel(value)}</SelectValue>
+                </SelectTrigger>
+                <SelectContent align="start">
+                  <SelectItem value="PUBLIC">公开（登录/注册页可见）</SelectItem>
+                  <SelectItem value="USERS">全部用户</SelectItem>
+                  <SelectItem value="ADMINS">全部管理员</SelectItem>
+                  <SelectItem value="SPECIFIC_USER">指定用户</SelectItem>
+                </SelectContent>
+              </Select>
             </div>
           </div>
 
-          <div className="grid gap-4 md:grid-cols-2">
-            <div className="space-y-2">
+          <div className="grid gap-3 md:grid-cols-2">
+            <div className="space-y-1.5">
               <Label htmlFor="create-announcement-displayType">展示方式</Label>
-              <select
-                id="create-announcement-displayType"
+              <Select
                 name="displayType"
                 defaultValue="INLINE"
-                className="h-10 w-full px-3 text-sm outline-none"
               >
-                <option value="INLINE">普通公告</option>
-                <option value="BIG">大公告</option>
-                <option value="POPUP">弹窗公告</option>
-              </select>
+                <SelectTrigger id="create-announcement-displayType" className="w-full">
+                  <SelectValue>{(value) => getDisplayTypeLabel(value)}</SelectValue>
+                </SelectTrigger>
+                <SelectContent align="start">
+                  <SelectItem value="INLINE">普通公告</SelectItem>
+                  <SelectItem value="BIG">大公告</SelectItem>
+                  <SelectItem value="POPUP">弹窗公告</SelectItem>
+                </SelectContent>
+              </Select>
             </div>
-            <div className="space-y-2">
+            <div className="space-y-1.5">
               <Label htmlFor="create-announcement-dismissible">允许用户关闭</Label>
               <BooleanToggle
                 id="create-announcement-dismissible"
@@ -291,45 +353,49 @@ export function CreateAnnouncementButton({
                 trueLabel="允许"
                 falseLabel="不允许"
                 ariaLabel="允许用户关闭"
+                size="compact"
               />
             </div>
           </div>
 
-          <div className="space-y-2">
+          <div className="space-y-1.5">
             <Label htmlFor="create-announcement-targetUserId">指定用户（可选）</Label>
-            <select
-              id="create-announcement-targetUserId"
+            <Select
               name="targetUserId"
               defaultValue=""
               disabled={audience !== "SPECIFIC_USER"}
-              className="h-10 w-full px-3 text-sm outline-none disabled:cursor-not-allowed disabled:opacity-60"
             >
-              <option value="">不指定</option>
-              {users.map((user) => (
-                <option key={user.id} value={user.id}>
-                  {user.email}
-                </option>
-              ))}
-            </select>
+              <SelectTrigger id="create-announcement-targetUserId" className="w-full">
+                <SelectValue>{(value) => getTargetUserLabel(users, value)}</SelectValue>
+              </SelectTrigger>
+              <SelectContent align="start">
+                <SelectItem value="">不指定</SelectItem>
+                {users.map((user) => (
+                  <SelectItem key={user.id} value={user.id}>
+                    {user.email}
+                  </SelectItem>
+                ))}
+              </SelectContent>
+            </Select>
           </div>
 
-          <div className="space-y-2">
+          <div className="space-y-1.5">
             <Label htmlFor="create-announcement-body">内容</Label>
             <Textarea id="create-announcement-body" name="body" rows={5} required />
           </div>
 
-          <div className="grid gap-4 md:grid-cols-2">
-            <div className="space-y-2">
+          <div className="grid gap-3 md:grid-cols-2">
+            <div className="space-y-1.5">
               <Label htmlFor="create-announcement-startAt">开始时间（可选）</Label>
               <Input id="create-announcement-startAt" name="startAt" type="datetime-local" />
             </div>
-            <div className="space-y-2">
+            <div className="space-y-1.5">
               <Label htmlFor="create-announcement-endAt">结束时间（可选）</Label>
               <Input id="create-announcement-endAt" name="endAt" type="datetime-local" />
             </div>
           </div>
 
-          <div className="space-y-2">
+          <div className="space-y-1.5">
             <Label htmlFor="create-announcement-sendNotification">同步发送站内通知</Label>
             <BooleanToggle
               id="create-announcement-sendNotification"
@@ -338,13 +404,15 @@ export function CreateAnnouncementButton({
               trueLabel="发送"
               falseLabel="不发送"
               ariaLabel="同步发送站内通知"
+              size="compact"
             />
           </div>
 
-          <PendingSubmitButton className="w-full" pendingLabel="发布中...">
+          <PendingSubmitButton className="h-8 w-full" pendingLabel="发布中...">
             发布
           </PendingSubmitButton>
         </form>
+        </DialogBody>
       </DialogContent>
     </Dialog>
   );
diff --git a/src/app/(admin)/admin/commerce/_components/discount-type-select.tsx b/src/app/(admin)/admin/commerce/_components/discount-type-select.tsx
new file mode 100644
index 0000000..ed7cc65
--- /dev/null
+++ b/src/app/(admin)/admin/commerce/_components/discount-type-select.tsx
@@ -0,0 +1,45 @@
+"use client";
+
+import { useState } from "react";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+
+type DiscountType = "AMOUNT_OFF" | "PERCENT_OFF";
+
+const discountTypeLabels: Record<DiscountType, string> = {
+  AMOUNT_OFF: "立减金额",
+  PERCENT_OFF: "折扣百分比",
+};
+
+function getDiscountTypeLabel(value: unknown) {
+  return discountTypeLabels[value as DiscountType] ?? "选择优惠类型";
+}
+
+export function DiscountTypeSelect({
+  defaultValue = "AMOUNT_OFF",
+}: {
+  defaultValue?: DiscountType;
+}) {
+  const [value, setValue] = useState<DiscountType>(defaultValue);
+
+  return (
+    <Select
+      name="discountType"
+      value={value}
+      onValueChange={(nextValue) => setValue((nextValue ?? "AMOUNT_OFF") as DiscountType)}
+    >
+      <SelectTrigger id="coupon-type" className="w-full">
+        <SelectValue>{(selectedValue) => getDiscountTypeLabel(selectedValue)}</SelectValue>
+      </SelectTrigger>
+      <SelectContent align="start">
+        <SelectItem value="AMOUNT_OFF">立减金额</SelectItem>
+        <SelectItem value="PERCENT_OFF">折扣百分比</SelectItem>
+      </SelectContent>
+    </Select>
+  );
+}
diff --git a/src/app/(admin)/admin/commerce/page.tsx b/src/app/(admin)/admin/commerce/page.tsx
index 40b33f1..6958107 100644
--- a/src/app/(admin)/admin/commerce/page.tsx
+++ b/src/app/(admin)/admin/commerce/page.tsx
@@ -10,8 +10,15 @@ import { Label } from "@/components/ui/label";
 import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
 import { getCommerceData } from "./commerce-data";
 import { CommerceToggleButton } from "./_components/commerce-actions";
+import { DiscountTypeSelect } from "./_components/discount-type-select";
 
-const selectClassName = "premium-input w-full appearance-none px-3.5 py-2 text-sm outline-none";
+function formatCouponDiscount(type: string, value: unknown) {
+  const numericValue = Number(value);
+  if (type === "PERCENT_OFF") {
+    return `折扣 ${numericValue}%`;
+  }
+  return `立减 ¥${numericValue.toFixed(2)}`;
+}
 
 export const metadata: Metadata = {
   title: "商业配置",
@@ -51,10 +58,7 @@ export default async function AdminCommercePage() {
               <div className="grid gap-3 sm:grid-cols-2">
                 <div className="space-y-2">
                   <Label htmlFor="coupon-type">优惠类型</Label>
-                  <select id="coupon-type" name="discountType" className={selectClassName} defaultValue="AMOUNT_OFF">
-                    <option value="AMOUNT_OFF">立减金额</option>
-                    <option value="PERCENT_OFF">折扣百分比</option>
-                  </select>
+                  <DiscountTypeSelect />
                 </div>
                 <div className="space-y-2">
                   <Label htmlFor="coupon-value">优惠值</Label>
@@ -123,7 +127,7 @@ export default async function AdminCommercePage() {
                   </div>
                   <div className="flex flex-wrap gap-2">
                     <StatusBadge tone="warning">
-                      {coupon.discountType === "PERCENT_OFF" ? `${Number(coupon.discountValue)}%` : `¥${Number(coupon.discountValue).toFixed(2)}`}
+                      {formatCouponDiscount(coupon.discountType, coupon.discountValue)}
                     </StatusBadge>
                     <StatusBadge>{coupon.thresholdAmount == null ? "无门槛" : `满 ¥${Number(coupon.thresholdAmount).toFixed(2)}`}</StatusBadge>
                     <StatusBadge>{coupon.isPublic ? "公开展示" : "仅发放"}</StatusBadge>
diff --git a/src/app/(admin)/admin/nodes/node-actions.tsx b/src/app/(admin)/admin/nodes/node-actions.tsx
index 4806965..c111459 100644
--- a/src/app/(admin)/admin/nodes/node-actions.tsx
+++ b/src/app/(admin)/admin/nodes/node-actions.tsx
@@ -153,7 +153,7 @@ export function NodeActions({
       </ConfirmActionButton>
 
       <Dialog open={tokenDialogOpen} onOpenChange={setTokenDialogOpen}>
-        <DialogContent className="max-w-2xl">
+        <DialogContent className="max-w-[30rem]">
           <DialogHeader>
             <div className="inline-flex w-fit items-center gap-2 rounded-full border border-primary/15 bg-primary/10 px-3 py-1 text-xs font-semibold tracking-[0.14em] text-primary">
               <KeyRound className="size-3.5" /> PROBE TOKEN
@@ -161,7 +161,7 @@ export function NodeActions({
             <DialogTitle>探测 Token — {node.name}</DialogTitle>
             <DialogDescription>关闭后无法再次查看。</DialogDescription>
           </DialogHeader>
-          <div className="space-y-4">
+          <div className="space-y-3">
             <div className="space-y-2">
               <div className="text-xs font-semibold text-muted-foreground">探测 Token</div>
               <div className="rounded-lg border border-border bg-muted/30 p-3">
diff --git a/src/app/(admin)/admin/nodes/node-form.tsx b/src/app/(admin)/admin/nodes/node-form.tsx
index 2f73f29..69fea83 100644
--- a/src/app/(admin)/admin/nodes/node-form.tsx
+++ b/src/app/(admin)/admin/nodes/node-form.tsx
@@ -8,6 +8,7 @@ import { Input } from "@/components/ui/input";
 import { Label } from "@/components/ui/label";
 import {
   Dialog,
+  DialogBody,
   DialogContent,
   DialogDescription,
   DialogFooter,
@@ -72,8 +73,8 @@ export function NodeForm({
         {isEdit ? <Pencil className="size-3.5" /> : <Plus className="size-4" />}
         {triggerLabel || (isEdit ? "编辑" : "添加节点")}
       </DialogTrigger>
-      <DialogContent className="max-h-[calc(100dvh-2rem)] overflow-y-auto sm:max-w-3xl">
-        <DialogHeader>
+      <DialogContent className="flex max-h-[min(90dvh,38rem)] flex-col overflow-hidden p-0 sm:max-w-[34rem]">
+        <DialogHeader className="border-b border-border/60 px-4 py-3 pr-10">
           <div className="flex size-9 items-center justify-center rounded-lg border border-primary/15 bg-primary/10 text-primary">
             <Server className="size-4" />
           </div>
@@ -81,10 +82,11 @@ export function NodeForm({
           <DialogDescription>连接 3x-ui 面板并同步可售入站。</DialogDescription>
         </DialogHeader>
 
-        <form action={isEdit ? handleEdit : handleCreate} className="space-y-5">
-          <div className="rounded-lg border border-border bg-muted/20 p-4">
-            <div className="mb-3 text-sm font-semibold">基础信息</div>
-            <div className="grid gap-4 sm:grid-cols-2">
+        <DialogBody className="flex-1 px-4 py-3">
+        <form action={isEdit ? handleEdit : handleCreate} className="space-y-3 text-[12px] leading-5 [&_[data-slot=input]]:!h-8 [&_[data-slot=input]]:!min-h-8 [&_[data-slot=input]]:!px-2.5 [&_[data-slot=input]]:!text-xs [&_[data-slot=label]]:!text-xs">
+          <div className="rounded-lg border border-border bg-muted/20 p-3">
+            <div className="mb-2 text-xs font-semibold">基础信息</div>
+            <div className="grid gap-3 sm:grid-cols-2">
               <div className="space-y-2">
                 <Label htmlFor={nameId}>节点名称</Label>
                 <Input id={nameId} name="name" defaultValue={node?.name ?? ""} placeholder="HK-01" />
@@ -102,9 +104,9 @@ export function NodeForm({
             </div>
           </div>
 
-          <div className="rounded-lg border border-border bg-muted/20 p-4">
-            <div className="mb-3 text-sm font-semibold">面板凭据</div>
-            <div className="grid gap-4 sm:grid-cols-2">
+          <div className="rounded-lg border border-border bg-muted/20 p-3">
+            <div className="mb-2 text-xs font-semibold">面板凭据</div>
+            <div className="grid gap-3 sm:grid-cols-2">
               <div className="space-y-2">
                 <Label htmlFor={panelUsernameId}>面板用户名</Label>
                 <Input id={panelUsernameId} name="panelUsername" defaultValue={node?.panelUsername ?? ""} required />
@@ -123,15 +125,16 @@ export function NodeForm({
             </div>
           </div>
 
-          <DialogFooter className="-mx-6 -mb-6">
-            <Button type="button" variant="outline" size="lg" onClick={() => setOpen(false)}>
+          <DialogFooter className="-mx-4 -mb-3">
+            <Button type="button" variant="outline" className="h-8" onClick={() => setOpen(false)}>
               取消
             </Button>
-            <PendingSubmitButton size="lg" pendingLabel={isEdit ? "保存中..." : "创建中..."}>
+            <PendingSubmitButton className="h-8" pendingLabel={isEdit ? "保存中..." : "创建中..."}>
               {isEdit ? "保存并同步" : "创建并同步"}
             </PendingSubmitButton>
           </DialogFooter>
         </form>
+        </DialogBody>
       </DialogContent>
     </Dialog>
   );
diff --git a/src/app/(admin)/admin/payments/config-form.tsx b/src/app/(admin)/admin/payments/config-form.tsx
index a935bbe..90cd4ea 100644
--- a/src/app/(admin)/admin/payments/config-form.tsx
+++ b/src/app/(admin)/admin/payments/config-form.tsx
@@ -10,6 +10,7 @@ import { Button } from "@/components/ui/button";
 import { InlineHelp } from "@/components/ui/inline-help";
 import {
   Dialog,
+  DialogBody,
   DialogContent,
   DialogDescription,
   DialogFooter,
@@ -197,8 +198,8 @@ export function PaymentConfigItem({
           <Pencil className="size-3.5" />
           编辑配置
         </DialogTrigger>
-        <DialogContent className="max-h-[calc(100dvh-2rem)] overflow-y-auto bg-card sm:max-w-3xl">
-          <DialogHeader>
+        <DialogContent className="flex max-h-[min(90dvh,38rem)] flex-col overflow-hidden bg-card p-0 sm:max-w-[34rem]">
+          <DialogHeader className="border-b border-border/60 px-4 py-3 pr-10">
             <div className="flex size-9 items-center justify-center rounded-lg border border-primary/15 bg-primary/10 text-primary">
               <ShieldCheck className="size-4" />
             </div>
@@ -206,13 +207,14 @@ export function PaymentConfigItem({
             <DialogDescription>留空的密钥字段会保持原值。</DialogDescription>
           </DialogHeader>
 
-          <form onSubmit={handleSubmit} className="space-y-5">
-            <div className="grid gap-4 sm:grid-cols-2">
+          <DialogBody className="flex-1 px-4 py-3">
+          <form onSubmit={handleSubmit} className="space-y-3 text-[12px] leading-5 [&_[data-slot=input]]:!h-8 [&_[data-slot=input]]:!min-h-8 [&_[data-slot=input]]:!px-2.5 [&_[data-slot=input]]:!text-xs [&_[data-slot=label]]:!text-xs">
+            <div className="grid gap-3 sm:grid-cols-2">
               {fields.map((field) =>
                 field.type === "checkboxes" ? (
                   <div key={field.key} className="sm:col-span-2">
                     <Label>{field.label}</Label>
-                    <div className="mt-3 grid gap-2 sm:grid-cols-2">
+                    <div className="mt-2 grid gap-2 sm:grid-cols-2">
                       {field.options?.map((option) => {
                         const selected = checkboxValues[field.key]?.has(option.value) ?? false;
                         return (
@@ -222,7 +224,7 @@ export function PaymentConfigItem({
                             aria-pressed={selected}
                             onClick={() => toggleCheckbox(field.key, option.value)}
                             className={cn(
-                              "flex min-h-10 items-center justify-between gap-3 rounded-lg border px-3 py-2 text-left text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-[3px] focus-visible:ring-ring/20",
+                              "flex min-h-8 items-center justify-between gap-2 rounded-lg border px-2.5 py-1.5 text-left text-xs font-medium transition-colors focus-visible:outline-none focus-visible:ring-[3px] focus-visible:ring-ring/20",
                               selected
                                 ? "border-primary/35 bg-primary/10 text-primary"
                                 : "border-border bg-muted/20 text-muted-foreground hover:bg-muted/45 hover:text-foreground",
@@ -236,7 +238,7 @@ export function PaymentConfigItem({
                     </div>
                   </div>
                 ) : (
-                  <div key={field.key} className="space-y-2">
+                  <div key={field.key} className="space-y-1.5">
                     <Label htmlFor={`${provider}-${field.key}`}>{field.label}</Label>
                     <Input
                       id={`${provider}-${field.key}`}
@@ -253,11 +255,11 @@ export function PaymentConfigItem({
               )}
             </div>
 
-            <div className="rounded-lg border border-border bg-muted/20 p-3">
-              <div className="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
+            <div className="rounded-lg border border-border bg-muted/20 p-2.5">
+              <div className="flex flex-col gap-2 sm:flex-row sm:items-center sm:justify-between">
                 <div>
                   <div className="flex items-center gap-1.5">
-                    <Label className="whitespace-nowrap text-sm font-semibold">支付通道状态</Label>
+                    <Label className="whitespace-nowrap text-xs font-semibold">支付通道状态</Label>
                     <InlineHelp align="start">开关即时生效。</InlineHelp>
                   </div>
                 </div>
@@ -269,15 +271,16 @@ export function PaymentConfigItem({
               </div>
             </div>
 
-            <DialogFooter>
-              <Button type="button" variant="outline" onClick={() => setOpen(false)} disabled={saving}>
+            <DialogFooter className="-mx-4 -mb-3">
+              <Button type="button" variant="outline" className="h-8" onClick={() => setOpen(false)} disabled={saving}>
                 取消
               </Button>
-              <Button type="submit" disabled={saving}>
+              <Button type="submit" className="h-8" disabled={saving}>
                 {saving ? "保存中..." : "保存配置"}
               </Button>
             </DialogFooter>
           </form>
+          </DialogBody>
         </DialogContent>
       </Dialog>
     </section>
diff --git a/src/app/(admin)/admin/plans/plan-basics-section.tsx b/src/app/(admin)/admin/plans/plan-basics-section.tsx
index 2f94eac..8b4ba64 100644
--- a/src/app/(admin)/admin/plans/plan-basics-section.tsx
+++ b/src/app/(admin)/admin/plans/plan-basics-section.tsx
@@ -51,10 +51,13 @@ export function PlanBasicsFields({
 }: PlanBasicsFieldsProps) {
   return (
     <>
-      <div>
+      <div className="space-y-1.5">
         <Label htmlFor={fieldId("type")}>套餐类型</Label>
         {isEdit ? (
-          <div id={fieldId("type")} className="premium-input flex h-11 items-center px-3 text-sm font-medium">
+          <div
+            id={fieldId("type")}
+            className="premium-input flex h-8 min-h-8 items-center px-2.5 text-xs font-medium"
+          >
             {type === "PROXY" ? "代理节点套餐" : "流媒体套餐"}
           </div>
         ) : (
@@ -86,12 +89,12 @@ export function PlanBasicsFields({
         )}
       </div>
 
-      <div className="grid gap-4 sm:grid-cols-3">
-        <div>
+      <div className="grid gap-3 sm:grid-cols-3">
+        <div className="space-y-1.5">
           <Label htmlFor={fieldId("name")}>套餐名称</Label>
           <Input id={fieldId("name")} name="name" defaultValue={plan?.name ?? ""} required />
         </div>
-        <div>
+        <div className="space-y-1.5">
           <Label htmlFor={fieldId("durationDays")}>有效期（天）</Label>
           <Input
             id={fieldId("durationDays")}
@@ -101,7 +104,7 @@ export function PlanBasicsFields({
             required
           />
         </div>
-        <div>
+        <div className="space-y-1.5">
           <Label htmlFor={fieldId("sortOrder")}>排序</Label>
           <Input
             id={fieldId("sortOrder")}
@@ -113,7 +116,7 @@ export function PlanBasicsFields({
         </div>
       </div>
 
-      <div>
+      <div className="space-y-1.5">
         <Label htmlFor={fieldId("description")}>用户说明</Label>
         <Textarea
           id={fieldId("description")}
@@ -121,6 +124,7 @@ export function PlanBasicsFields({
           rows={2}
           defaultValue={plan?.description ?? ""}
           placeholder="展示给用户"
+          className="min-h-16 px-2.5 py-2 text-xs leading-5"
         />
       </div>
     </>
@@ -135,8 +139,8 @@ export function PlanLimitsFields({
   plan?: PlanFormValue;
 }) {
   return (
-    <div className="grid gap-4 sm:grid-cols-2">
-      <div>
+    <div className="grid gap-3 sm:grid-cols-2">
+      <div className="space-y-1.5">
         <Label htmlFor={fieldId("totalLimit")}>总库存</Label>
         <Input
           id={fieldId("totalLimit")}
@@ -147,7 +151,7 @@ export function PlanLimitsFields({
           placeholder="空=不限"
         />
       </div>
-      <div>
+      <div className="space-y-1.5">
         <Label htmlFor={fieldId("perUserLimit")}>每用户限购</Label>
         <Input
           id={fieldId("perUserLimit")}
diff --git a/src/app/(admin)/admin/plans/plan-form.tsx b/src/app/(admin)/admin/plans/plan-form.tsx
index 2e1157d..cab6d29 100644
--- a/src/app/(admin)/admin/plans/plan-form.tsx
+++ b/src/app/(admin)/admin/plans/plan-form.tsx
@@ -5,6 +5,7 @@ import { useRouter } from "next/navigation";
 import { Button } from "@/components/ui/button";
 import {
   Dialog,
+  DialogBody,
   DialogContent,
   DialogHeader,
   DialogTitle,
@@ -31,8 +32,8 @@ export type { PlanFormValue, StreamingServiceOption } from "./plan-form-types";
 
 function FormSection({ title, children }: { title: string; children: ReactNode }) {
   return (
-    <fieldset className="space-y-4 rounded-lg border border-border bg-muted/20 p-4">
-      <legend className="px-1.5 text-sm font-semibold">{title}</legend>
+    <fieldset className="space-y-3 rounded-lg border border-border bg-muted/20 p-3">
+      <legend className="px-1.5 text-xs font-semibold">{title}</legend>
       {children}
     </fieldset>
   );
@@ -171,13 +172,17 @@ export function PlanForm({
       >
         {triggerLabel ?? (isEdit ? "编辑" : "创建套餐")}
       </DialogTrigger>
-      <DialogContent className="max-h-[calc(100dvh-2rem)] overflow-y-auto sm:max-w-6xl xl:max-w-7xl">
-        <DialogHeader>
+      <DialogContent className="flex max-h-[min(90dvh,42rem)] flex-col overflow-hidden p-0 sm:max-w-[56rem]">
+        <DialogHeader className="border-b border-border/60 px-4 py-3 pr-10">
           <DialogTitle>{title}</DialogTitle>
         </DialogHeader>
-        <form onSubmit={(event) => void handleSubmit(event)} className="grid gap-4 lg:grid-cols-2">
+        <DialogBody className="flex-1 px-4 py-3">
+        <form
+          onSubmit={(event) => void handleSubmit(event)}
+          className="grid gap-3 text-[12px] leading-5 lg:grid-cols-2 [&_[data-slot=button]]:text-xs [&_[data-slot=input]]:!h-8 [&_[data-slot=input]]:!min-h-8 [&_[data-slot=input]]:!px-2.5 [&_[data-slot=input]]:!text-xs [&_[data-slot=label]]:!text-xs [&_[data-slot=select-trigger]]:!h-8 [&_[data-slot=select-trigger]]:!min-h-8 [&_[data-slot=select-trigger]]:!px-2.5 [&_[data-slot=select-trigger]]:!text-xs [&_textarea]:!text-xs"
+        >
           {/* Left column: basics + resource config */}
-          <div className="space-y-4">
+          <div className="space-y-3">
             <FormSection title="基础信息">
               <PlanBasicsFields
                 fieldId={fieldId}
@@ -224,7 +229,7 @@ export function PlanForm({
           </div>
 
           {/* Right column: pricing (proxy only) + sales policy + submit */}
-          <div className="space-y-4">
+          <div className="space-y-3">
             {type === "PROXY" && (
               <FormSection title="定价">
                 <ProxyPricingFields
@@ -253,11 +258,12 @@ export function PlanForm({
               />
             </FormSection>
 
-            <Button type="submit" size="lg" className="w-full" disabled={submitting}>
+            <Button type="submit" className="h-8 w-full" disabled={submitting}>
               {submitting ? "提交中..." : (isEdit ? "保存套餐" : "创建套餐")}
             </Button>
           </div>
         </form>
+        </DialogBody>
       </DialogContent>
     </Dialog>
   );
diff --git a/src/app/(admin)/admin/plans/plan-policy-section.tsx b/src/app/(admin)/admin/plans/plan-policy-section.tsx
index 41df36c..4edc1ac 100644
--- a/src/app/(admin)/admin/plans/plan-policy-section.tsx
+++ b/src/app/(admin)/admin/plans/plan-policy-section.tsx
@@ -44,14 +44,14 @@ function PolicyToggleRow({
   children: ReactNode;
 }) {
   return (
-    <div className="flex flex-col gap-3 rounded-lg bg-muted/20 p-3 sm:flex-row sm:items-center sm:justify-between">
+    <div className="flex flex-col gap-2 rounded-md bg-muted/20 p-2 sm:min-h-10 sm:flex-row sm:items-center sm:justify-between">
       <div className="flex min-w-fit shrink-0 items-center gap-1.5">
-        <p id={labelId} className="whitespace-nowrap text-sm font-medium">
+        <p id={labelId} className="whitespace-nowrap text-xs font-medium">
           {label}
         </p>
         <InlineHelp align="start">{help}</InlineHelp>
       </div>
-      <div className="w-full sm:w-40 sm:shrink-0">{children}</div>
+      <div className="w-full sm:w-32 sm:shrink-0">{children}</div>
     </div>
   );
 }
@@ -71,7 +71,7 @@ export function PlanPolicySection({
 }: PlanPolicySectionProps) {
   return (
     <>
-      <div className="form-panel grid gap-3 xl:grid-cols-2">
+      <div className="grid gap-2 rounded-lg border border-border bg-card/75 p-2 shadow-[var(--shadow-soft)] xl:grid-cols-2">
         <PolicyToggleRow
           labelId={fieldId("allowRenewal-label")}
           label="开放续费"
@@ -83,6 +83,7 @@ export function PlanPolicySection({
             trueLabel="开放"
             falseLabel="关闭"
             ariaLabel="开放续费"
+            size="compact"
           />
         </PolicyToggleRow>
         {type === "PROXY" && (
@@ -97,15 +98,16 @@ export function PlanPolicySection({
               trueLabel="开放"
               falseLabel="关闭"
               ariaLabel="开放增流量"
+              size="compact"
             />
           </PolicyToggleRow>
         )}
       </div>
 
       {allowRenewal && (
-        <div className="space-y-3 rounded-xl border border-border bg-muted/20 p-4">
+        <div className="space-y-2 rounded-lg border border-border bg-muted/15 p-3">
           <div className="grid gap-3 sm:grid-cols-2">
-            <div>
+            <div className="space-y-1.5">
               <Label htmlFor={fieldId("renewalPricingMode")}>续费计价</Label>
               <input type="hidden" name="renewalPricingMode" value={renewalPricingMode} />
               <Select value={renewalPricingMode} onValueChange={(value) => setRenewalPricingMode(value as RenewalPricingMode)}>
@@ -120,7 +122,7 @@ export function PlanPolicySection({
                 </SelectContent>
               </Select>
             </div>
-            <div>
+            <div className="space-y-1.5">
               <Label htmlFor={fieldId("renewalPrice")}>
                 {renewalPricingMode === "PER_DAY" ? "续费价格（¥/天）" : "续费价格（¥/周期）"}
               </Label>
@@ -139,7 +141,7 @@ export function PlanPolicySection({
 
           <div className="grid gap-3 sm:grid-cols-2">
             {renewalPricingMode === "FIXED_DURATION" ? (
-              <div>
+              <div className="space-y-1.5">
                 <Label htmlFor={fieldId("renewalDurationDays")}>周期天数</Label>
                 <Input
                   id={fieldId("renewalDurationDays")}
@@ -153,7 +155,7 @@ export function PlanPolicySection({
               </div>
             ) : (
               <>
-                <div>
+                <div className="space-y-1.5">
                   <Label htmlFor={fieldId("renewalMinDays")}>最小续费天数</Label>
                   <Input
                     id={fieldId("renewalMinDays")}
@@ -164,7 +166,7 @@ export function PlanPolicySection({
                     placeholder="1"
                   />
                 </div>
-                <div>
+                <div className="space-y-1.5">
                   <Label htmlFor={fieldId("renewalMaxDays")}>最大续费天数</Label>
                   <Input
                     id={fieldId("renewalMaxDays")}
@@ -182,9 +184,9 @@ export function PlanPolicySection({
       )}
 
       {type === "PROXY" && allowTrafficTopup && (
-        <div className="space-y-3 rounded-xl border border-border bg-muted/20 p-4">
+        <div className="space-y-2 rounded-lg border border-border bg-muted/15 p-3">
           <div className="grid gap-3 sm:grid-cols-2">
-            <div>
+            <div className="space-y-1.5">
               <Label htmlFor={fieldId("topupPricingMode")}>增流量计价</Label>
               <input type="hidden" name="topupPricingMode" value={topupPricingMode} />
               <Select value={topupPricingMode} onValueChange={(value) => setTopupPricingMode(value as TopupPricingMode)}>
@@ -200,7 +202,7 @@ export function PlanPolicySection({
               </Select>
             </div>
             {topupPricingMode === "PER_GB" ? (
-              <div>
+              <div className="space-y-1.5">
                 <Label htmlFor={fieldId("topupPricePerGb")}>加流量价格（¥/GB）</Label>
                 <Input
                   id={fieldId("topupPricePerGb")}
@@ -214,7 +216,7 @@ export function PlanPolicySection({
                 />
               </div>
             ) : (
-              <div>
+              <div className="space-y-1.5">
                 <Label htmlFor={fieldId("topupFixedPrice")}>固定加流量金额（¥）</Label>
                 <Input
                   id={fieldId("topupFixedPrice")}
@@ -231,7 +233,7 @@ export function PlanPolicySection({
           </div>
 
           <div className="grid gap-3 sm:grid-cols-2">
-            <div>
+            <div className="space-y-1.5">
               <Label htmlFor={fieldId("minTopupGb")}>最小增流量（GB）</Label>
               <Input
                 id={fieldId("minTopupGb")}
@@ -242,7 +244,7 @@ export function PlanPolicySection({
                 placeholder="1"
               />
             </div>
-            <div>
+            <div className="space-y-1.5">
               <Label htmlFor={fieldId("maxTopupGb")}>最大增流量（GB）</Label>
               <Input
                 id={fieldId("maxTopupGb")}
diff --git a/src/app/(admin)/admin/plans/proxy-config-section.tsx b/src/app/(admin)/admin/plans/proxy-config-section.tsx
index bac86f4..0b07bf3 100644
--- a/src/app/(admin)/admin/plans/proxy-config-section.tsx
+++ b/src/app/(admin)/admin/plans/proxy-config-section.tsx
@@ -43,7 +43,7 @@ export function ProxyNodeFields({
 }) {
   return (
     <>
-      <div>
+      <div className="space-y-1.5">
         <Label htmlFor={fieldId("nodeId")}>节点</Label>
         <Select
           value={nodeId}
@@ -71,7 +71,7 @@ export function ProxyNodeFields({
         </Select>
       </div>
 
-      <div>
+      <div className="space-y-1.5">
         <Label id={fieldId("inboundIds-label")}>可售入站（可多选）</Label>
         <input type="hidden" name="inboundIds" value={selectedInboundIds.join(",")} />
         <div className="grid gap-2 sm:grid-cols-2" role="group" aria-labelledby={fieldId("inboundIds-label")}>
@@ -82,17 +82,17 @@ export function ProxyNodeFields({
                 key={inbound.id}
                 type="button"
                 className={cn(
-                  "choice-card text-left px-3 py-2.5 text-sm",
+                  "choice-card flex min-h-8 items-center justify-between gap-2 px-2.5 py-1.5 text-left text-xs leading-4",
                   selected
                     ? "border-primary/30 bg-primary/10 text-primary"
                     : "hover:bg-muted/45",
                 )}
                 onClick={() => toggleInbound(inbound.id)}
               >
-                <p className="font-medium">
+                <span className="shrink-0 font-medium leading-4">
                   {inbound.protocol} · {inbound.port}
-                </p>
-                <p className="text-xs text-muted-foreground">{inbound.tag}</p>
+                </span>
+                <span className="min-w-0 truncate text-[11px] leading-4 text-muted-foreground">{inbound.tag}</span>
               </button>
             );
           })}
@@ -123,7 +123,7 @@ export function ProxyPricingFields({
 
   return (
     <>
-      <div>
+      <div className="space-y-1.5">
         <Label htmlFor={fieldId("pricingMode")}>售卖方式</Label>
         <Select value={pricingMode} onValueChange={(value) => setPricingMode(value as PlanPricingMode)}>
           <SelectTrigger id={fieldId("pricingMode")}>
@@ -139,8 +139,8 @@ export function ProxyPricingFields({
       </div>
 
       {pricingMode === "TRAFFIC_SLIDER" ? (
-        <div className="grid gap-4 sm:grid-cols-3">
-          <div>
+        <div className="grid gap-3 sm:grid-cols-3">
+          <div className="space-y-1.5">
             <Label htmlFor={fieldId("pricePerGb")}>价格（¥/GB）</Label>
             <Input
               id={fieldId("pricePerGb")}
@@ -151,7 +151,7 @@ export function ProxyPricingFields({
               placeholder="0.5"
             />
           </div>
-          <div>
+          <div className="space-y-1.5">
             <Label htmlFor={fieldId("minTrafficGb")}>最小 GB</Label>
             <Input
               id={fieldId("minTrafficGb")}
@@ -161,7 +161,7 @@ export function ProxyPricingFields({
               placeholder="10"
             />
           </div>
-          <div>
+          <div className="space-y-1.5">
             <Label htmlFor={fieldId("maxTrafficGb")}>最大 GB</Label>
             <Input
               id={fieldId("maxTrafficGb")}
@@ -173,8 +173,8 @@ export function ProxyPricingFields({
           </div>
         </div>
       ) : (
-        <div className="grid gap-4 sm:grid-cols-2">
-          <div>
+        <div className="grid gap-3 sm:grid-cols-2">
+          <div className="space-y-1.5">
             <Label htmlFor={fieldId("fixedTrafficGb")}>固定流量（GB）</Label>
             <Input
               id={fieldId("fixedTrafficGb")}
@@ -185,7 +185,7 @@ export function ProxyPricingFields({
               placeholder="200"
             />
           </div>
-          <div>
+          <div className="space-y-1.5">
             <Label htmlFor={fieldId("fixedPrice")}>固定价格（¥）</Label>
             <Input
               id={fieldId("fixedPrice")}
@@ -200,7 +200,7 @@ export function ProxyPricingFields({
         </div>
       )}
 
-      <div>
+      <div className="space-y-1.5">
         <Label htmlFor={fieldId("totalTrafficGb")}>总流量池（GB）</Label>
         <Input
           id={fieldId("totalTrafficGb")}
diff --git a/src/app/(admin)/admin/plans/streaming-config-section.tsx b/src/app/(admin)/admin/plans/streaming-config-section.tsx
index 53fe347..34018a8 100644
--- a/src/app/(admin)/admin/plans/streaming-config-section.tsx
+++ b/src/app/(admin)/admin/plans/streaming-config-section.tsx
@@ -34,7 +34,7 @@ export function StreamingConfigSection({
 }: StreamingConfigSectionProps) {
   return (
     <>
-      <div>
+      <div className="space-y-1.5">
         <Label htmlFor={fieldId("streamingServiceId")}>绑定流媒体服务</Label>
         <Select
           value={streamingServiceId}
@@ -72,7 +72,7 @@ export function StreamingConfigSection({
         )}
       </div>
 
-      <div>
+      <div className="space-y-1.5">
         <Label htmlFor={fieldId("price")}>价格（¥）</Label>
         <Input
           id={fieldId("price")}
diff --git a/src/app/(admin)/admin/services/service-form.tsx b/src/app/(admin)/admin/services/service-form.tsx
index 8203dc9..e2192d7 100644
--- a/src/app/(admin)/admin/services/service-form.tsx
+++ b/src/app/(admin)/admin/services/service-form.tsx
@@ -9,7 +9,9 @@ import { Label } from "@/components/ui/label";
 import { Textarea } from "@/components/ui/textarea";
 import {
   Dialog,
+  DialogBody,
   DialogContent,
+  DialogFooter,
   DialogHeader,
   DialogTitle,
   DialogTrigger,
@@ -50,17 +52,18 @@ export function ServiceForm({
       <DialogTrigger render={<Button variant={triggerVariant} size={isEdit ? "sm" : "default"} />}>
         {triggerLabel ?? (isEdit ? "编辑" : "添加服务")}
       </DialogTrigger>
-      <DialogContent className="max-w-2xl">
-        <DialogHeader>
+      <DialogContent className="flex max-h-[min(90dvh,34rem)] flex-col overflow-hidden p-0 sm:max-w-[30rem]">
+        <DialogHeader className="border-b border-border/60 px-4 py-3 pr-10">
           <DialogTitle>{isEdit ? "编辑流媒体服务" : "添加流媒体服务"}</DialogTitle>
-          <p className="text-sm leading-6 text-muted-foreground">凭据仅后台可见。</p>
+          <p className="text-xs leading-5 text-muted-foreground">凭据仅后台可见。</p>
         </DialogHeader>
-        <form action={handleSubmit} className="form-panel space-y-5">
-          <div>
+        <DialogBody className="flex-1 px-4 py-3">
+        <form action={handleSubmit} className="space-y-3 text-[12px] leading-5 [&_[data-slot=input]]:!h-8 [&_[data-slot=input]]:!min-h-8 [&_[data-slot=input]]:!px-2.5 [&_[data-slot=input]]:!text-xs [&_[data-slot=label]]:!text-xs [&_textarea]:!text-xs">
+          <div className="space-y-1.5">
             <Label>名称 (如 Netflix)</Label>
             <Input name="name" defaultValue={service?.name} required />
           </div>
-          <div>
+          <div className="space-y-1.5">
             <Label>凭据 (账号密码等)</Label>
             <Textarea
               name="credentials"
@@ -71,20 +74,24 @@ export function ServiceForm({
                   ? "重新输入凭据"
                   : "email: xxx&#10;password: xxx"
               }
+              className="min-h-20 px-2.5 py-2 text-xs leading-5"
             />
           </div>
-          <div>
+          <div className="space-y-1.5">
             <Label>最大共享人数</Label>
             <Input name="maxSlots" type="number" defaultValue={service?.maxSlots ?? 5} required />
           </div>
-          <div>
+          <div className="space-y-1.5">
             <Label>描述</Label>
             <Input name="description" defaultValue={service?.description ?? ""} />
           </div>
-          <PendingSubmitButton size="lg" className="w-full" pendingLabel={isEdit ? "保存中..." : "创建中..."}>
-            {isEdit ? "保存" : "创建"}
-          </PendingSubmitButton>
+          <DialogFooter className="-mx-4 -mb-3">
+            <PendingSubmitButton className="h-8 w-full sm:w-auto" pendingLabel={isEdit ? "保存中..." : "创建中..."}>
+              {isEdit ? "保存" : "创建"}
+            </PendingSubmitButton>
+          </DialogFooter>
         </form>
+        </DialogBody>
       </DialogContent>
     </Dialog>
   );
diff --git a/src/app/(admin)/admin/settings/settings-form.tsx b/src/app/(admin)/admin/settings/settings-form.tsx
index c75f3ee..eabb982 100644
--- a/src/app/(admin)/admin/settings/settings-form.tsx
+++ b/src/app/(admin)/admin/settings/settings-form.tsx
@@ -10,6 +10,13 @@ import { Button, buttonVariants } from "@/components/ui/button";
 import { InlineHelp } from "@/components/ui/inline-help";
 import { Input } from "@/components/ui/input";
 import { Label } from "@/components/ui/label";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
 import { Textarea } from "@/components/ui/textarea";
 import {
   saveAppSettings,
@@ -82,7 +89,6 @@ interface CouponOption {
   name: string;
 }
 
-const selectClassName = "premium-input w-full appearance-none px-3.5 py-2 text-sm outline-none";
 const sectionClassName = "surface-card scroll-mt-24 space-y-4 rounded-xl p-4";
 const sectionHeadingClassName = "flex items-center gap-2 text-sm font-semibold";
 
@@ -480,18 +486,21 @@ export function SettingsForm({ config, coupons }: { config: AppConfig; coupons:
           <div className="grid gap-4 lg:grid-cols-[minmax(0,1fr)_12rem_auto] lg:items-end">
             <div className="space-y-2">
               <Label htmlFor="manualCleanupTarget">手动清理范围</Label>
-              <select
-                id="manualCleanupTarget"
+              <Select
                 value={cleanupTarget}
-                onChange={(event) => setCleanupTarget(event.target.value as LogCleanupTarget)}
-                className={selectClassName}
+                onValueChange={(value) => setCleanupTarget((value ?? "ALL") as LogCleanupTarget)}
               >
-                {logCleanupTargetOptions.map((option) => (
-                  <option key={option.value} value={option.value}>
-                    {option.label}
-                  </option>
-                ))}
-              </select>
+                <SelectTrigger id="manualCleanupTarget" className="w-full">
+                  <SelectValue />
+                </SelectTrigger>
+                <SelectContent align="start">
+                  {logCleanupTargetOptions.map((option) => (
+                    <SelectItem key={option.value} value={option.value}>
+                      {option.label}
+                    </SelectItem>
+                  ))}
+                </SelectContent>
+              </Select>
             </div>
             <div className="space-y-2">
               <Label htmlFor="manualCleanupDays">清理几天前</Label>
@@ -510,6 +519,7 @@ export function SettingsForm({ config, coupons }: { config: AppConfig; coupons:
               description={`清理 ${manualCleanupDays || config.logRetentionDays || 30} 天前的${logCleanupTargetOptions.find((option) => option.value === cleanupTarget)?.label ?? "日志"}，无法恢复。`}
               confirmLabel="开始清理"
               errorMessage="清理日志失败"
+              size="lg"
               disabled={saving || hasPendingToggle || cleaningLogs}
               onConfirm={handleCleanupExpiredLogs}
             >
@@ -805,19 +815,22 @@ export function SettingsForm({ config, coupons }: { config: AppConfig; coupons:
           </div>
           <div className="space-y-2">
             <Label htmlFor="inviteRewardCouponId">自动发放优惠券</Label>
-            <select
-              id="inviteRewardCouponId"
+            <Select
               name="inviteRewardCouponId"
               defaultValue={config.inviteRewardCouponId ?? ""}
-              className={selectClassName}
             >
-              <option value="">不发放优惠券</option>
-              {coupons.map((coupon) => (
-                <option key={coupon.id} value={coupon.id}>
-                  {coupon.name} · {coupon.code}
-                </option>
-              ))}
-            </select>
+              <SelectTrigger id="inviteRewardCouponId" className="w-full">
+                <SelectValue />
+              </SelectTrigger>
+              <SelectContent align="start">
+                <SelectItem value="">不发放优惠券</SelectItem>
+                {coupons.map((coupon) => (
+                  <SelectItem key={coupon.id} value={coupon.id}>
+                    {coupon.name} · {coupon.code}
+                  </SelectItem>
+                ))}
+              </SelectContent>
+            </Select>
           </div>
         </div>
       </section>
diff --git a/src/app/(admin)/admin/support/_components/support-ticket-meta-form.tsx b/src/app/(admin)/admin/support/_components/support-ticket-meta-form.tsx
index 4e5d723..ab36235 100644
--- a/src/app/(admin)/admin/support/_components/support-ticket-meta-form.tsx
+++ b/src/app/(admin)/admin/support/_components/support-ticket-meta-form.tsx
@@ -1,44 +1,17 @@
 import { updateSupportTicketMeta } from "@/actions/admin/support";
 import { PendingSubmitButton } from "@/components/shared/pending-submit-button";
-import { Label } from "@/components/ui/label";
 import type { AdminSupportTicketDetail } from "../support-data";
+import { SupportTicketMetaSelects } from "./support-ticket-meta-selects";
 
 export function SupportTicketMetaForm({ ticket }: { ticket: AdminSupportTicketDetail }) {
   return (
     <form
       action={updateSupportTicketMeta}
-      className="surface-card flex flex-wrap items-end gap-3 rounded-xl p-4"
+      className="surface-card grid gap-3 rounded-xl p-4 sm:grid-cols-[minmax(10rem,12rem)_minmax(10rem,12rem)_auto] sm:items-end"
     >
       <input type="hidden" name="ticketId" value={ticket.id} />
-      <div className="space-y-2">
-        <Label htmlFor="status">状态</Label>
-        <select
-          id="status"
-          name="status"
-          defaultValue={ticket.status}
-          className="h-11 px-3 text-sm outline-none"
-        >
-          <option value="OPEN">待处理</option>
-          <option value="USER_REPLIED">用户已回复</option>
-          <option value="ADMIN_REPLIED">管理员已回复</option>
-          <option value="CLOSED">已关闭</option>
-        </select>
-      </div>
-      <div className="space-y-2">
-        <Label htmlFor="priority">优先级</Label>
-        <select
-          id="priority"
-          name="priority"
-          defaultValue={ticket.priority}
-          className="h-11 px-3 text-sm outline-none"
-        >
-          <option value="LOW">低</option>
-          <option value="NORMAL">普通</option>
-          <option value="HIGH">高</option>
-          <option value="URGENT">紧急</option>
-        </select>
-      </div>
-      <PendingSubmitButton variant="outline" size="lg" pendingLabel="更新中...">更新状态</PendingSubmitButton>
+      <SupportTicketMetaSelects status={ticket.status} priority={ticket.priority} />
+      <PendingSubmitButton variant="outline" size="lg" className="w-full sm:w-auto" pendingLabel="更新中...">更新状态</PendingSubmitButton>
     </form>
   );
 }
diff --git a/src/app/(admin)/admin/support/_components/support-ticket-meta-selects.tsx b/src/app/(admin)/admin/support/_components/support-ticket-meta-selects.tsx
new file mode 100644
index 0000000..c5e11c6
--- /dev/null
+++ b/src/app/(admin)/admin/support/_components/support-ticket-meta-selects.tsx
@@ -0,0 +1,77 @@
+"use client";
+
+import { useState } from "react";
+import type { SupportTicketPriority, SupportTicketStatus } from "@prisma/client";
+import { Label } from "@/components/ui/label";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+import {
+  supportTicketPriorityLabels,
+  supportTicketStatusLabels,
+} from "@/services/support-labels";
+
+function getStatusLabel(value: unknown) {
+  return supportTicketStatusLabels[value as SupportTicketStatus] ?? "选择状态";
+}
+
+function getPriorityLabel(value: unknown) {
+  return supportTicketPriorityLabels[value as SupportTicketPriority] ?? "选择优先级";
+}
+
+export function SupportTicketMetaSelects({
+  status,
+  priority,
+}: {
+  status: SupportTicketStatus;
+  priority: SupportTicketPriority;
+}) {
+  const [selectedStatus, setSelectedStatus] = useState(status);
+  const [selectedPriority, setSelectedPriority] = useState(priority);
+
+  return (
+    <>
+      <div className="min-w-44 space-y-2">
+        <Label htmlFor="status">状态</Label>
+        <Select
+          name="status"
+          value={selectedStatus}
+          onValueChange={(value) => setSelectedStatus((value ?? "OPEN") as SupportTicketStatus)}
+        >
+          <SelectTrigger id="status" className="w-full">
+            <SelectValue>{(value) => getStatusLabel(value)}</SelectValue>
+          </SelectTrigger>
+          <SelectContent align="start">
+            <SelectItem value="OPEN">待处理</SelectItem>
+            <SelectItem value="USER_REPLIED">用户已回复</SelectItem>
+            <SelectItem value="ADMIN_REPLIED">管理员已回复</SelectItem>
+            <SelectItem value="CLOSED">已关闭</SelectItem>
+          </SelectContent>
+        </Select>
+      </div>
+
+      <div className="min-w-40 space-y-2">
+        <Label htmlFor="priority">优先级</Label>
+        <Select
+          name="priority"
+          value={selectedPriority}
+          onValueChange={(value) => setSelectedPriority((value ?? "NORMAL") as SupportTicketPriority)}
+        >
+          <SelectTrigger id="priority" className="w-full">
+            <SelectValue>{(value) => getPriorityLabel(value)}</SelectValue>
+          </SelectTrigger>
+          <SelectContent align="start">
+            <SelectItem value="LOW">低</SelectItem>
+            <SelectItem value="NORMAL">普通</SelectItem>
+            <SelectItem value="HIGH">高</SelectItem>
+            <SelectItem value="URGENT">紧急</SelectItem>
+          </SelectContent>
+        </Select>
+      </div>
+    </>
+  );
+}
diff --git a/src/app/(admin)/admin/users/user-form.tsx b/src/app/(admin)/admin/users/user-form.tsx
index 6b4e475..051d7f1 100644
--- a/src/app/(admin)/admin/users/user-form.tsx
+++ b/src/app/(admin)/admin/users/user-form.tsx
@@ -6,6 +6,13 @@ import { PendingSubmitButton } from "@/components/shared/pending-submit-button";
 import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
 import { Label } from "@/components/ui/label";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
 import {
   Dialog,
   DialogContent,
@@ -54,11 +61,11 @@ export function UserForm({
           <DialogTitle>{isEdit ? "编辑用户" : "创建用户"}</DialogTitle>
         </DialogHeader>
         <form action={handleSubmit} className="space-y-5">
-          <div>
+          <div className="space-y-2">
             <Label>邮箱</Label>
             <Input name="email" type="email" defaultValue={user?.email} required />
           </div>
-          <div>
+          <div className="space-y-2">
             <Label>{isEdit ? "新密码（可留空）" : "密码"}</Label>
             <Input
               name="password"
@@ -68,20 +75,24 @@ export function UserForm({
               placeholder={isEdit ? "留空则保持不变" : undefined}
             />
           </div>
-          <div>
+          <div className="space-y-2">
             <Label>昵称</Label>
             <Input name="name" defaultValue={user?.name ?? ""} />
           </div>
-          <div>
-            <Label>角色</Label>
-            <select
+          <div className="space-y-2">
+            <Label htmlFor="user-role">角色</Label>
+            <Select
               name="role"
               defaultValue={user?.role ?? "USER"}
-              className="h-10 w-full px-3 text-sm outline-none"
             >
-              <option value="USER">普通用户</option>
-              <option value="ADMIN">管理员</option>
-            </select>
+              <SelectTrigger id="user-role" className="w-full">
+                <SelectValue />
+              </SelectTrigger>
+              <SelectContent align="start">
+                <SelectItem value="USER">普通用户</SelectItem>
+                <SelectItem value="ADMIN">管理员</SelectItem>
+              </SelectContent>
+            </Select>
           </div>
           <PendingSubmitButton className="w-full" pendingLabel={isEdit ? "保存中..." : "创建中..."}>
             {isEdit ? "保存" : "创建"}
diff --git a/src/app/(user)/store/latency-detail-dialog.tsx b/src/app/(user)/store/latency-detail-dialog.tsx
index e54f042..1d01a7f 100644
--- a/src/app/(user)/store/latency-detail-dialog.tsx
+++ b/src/app/(user)/store/latency-detail-dialog.tsx
@@ -74,7 +74,7 @@ export function LatencyDetailDialog({
 
   return (
     <Dialog open={open} onOpenChange={onOpenChange}>
-      <DialogContent className="sm:max-w-3xl max-h-[85vh] overflow-y-auto">
+      <DialogContent className="max-h-[85vh] overflow-y-auto sm:max-w-[34rem]">
         <DialogHeader>
           <DialogTitle className="inline-flex items-center gap-2">
             <Activity className="size-4 text-primary" /> 延迟趋势
diff --git a/src/app/(user)/store/proxy-detail-dialog.tsx b/src/app/(user)/store/proxy-detail-dialog.tsx
index 9a2005f..71b0367 100644
--- a/src/app/(user)/store/proxy-detail-dialog.tsx
+++ b/src/app/(user)/store/proxy-detail-dialog.tsx
@@ -98,7 +98,7 @@ export function ProxyDetailDialog({ open, onOpenChange, plan, networkInsightsEna
   return (
     <>
       <Dialog open={open} onOpenChange={onOpenChange}>
-        <DialogContent className="sm:max-w-4xl max-h-[90vh] overflow-hidden flex flex-col">
+        <DialogContent className="flex max-h-[90vh] flex-col overflow-hidden sm:max-w-[39rem]">
           <DialogHeader>
             <div className="inline-flex w-fit items-center gap-2 rounded-full border border-primary/15 bg-primary/10 px-2.5 py-1 text-[0.68rem] font-semibold tracking-[0.14em] text-primary">
               <Network className="size-3.5" /> PROXY
@@ -109,9 +109,9 @@ export function ProxyDetailDialog({ open, onOpenChange, plan, networkInsightsEna
             </DialogDescription>
           </DialogHeader>
 
-          <div className="overflow-y-auto -mx-6 px-6 space-y-4">
+          <div className="-mx-4 space-y-3 overflow-y-auto px-4">
             {/* Compact info row — above the grid so both columns align */}
-            <div className="flex flex-wrap gap-2 text-sm">
+            <div className="flex flex-wrap gap-2 text-xs">
               <span className="inline-flex items-center gap-1.5 rounded-md border border-border bg-muted/20 px-2.5 py-1.5">
                 <Server className="size-3.5 text-primary" />
                 {plan.nodeName}
@@ -122,7 +122,7 @@ export function ProxyDetailDialog({ open, onOpenChange, plan, networkInsightsEna
               </span>
             </div>
 
-            <div className={`grid items-start gap-6 ${networkInsightsEnabled ? "lg:grid-cols-[1fr_20rem]" : ""}`}>
+            <div className={`grid items-start gap-4 ${networkInsightsEnabled ? "lg:grid-cols-[1fr_14rem]" : ""}`}>
               {/* Left: purchase config — always visible without scrolling */}
               <div className="space-y-3">
                 <ProxyInboundSelect
@@ -154,9 +154,8 @@ export function ProxyDetailDialog({ open, onOpenChange, plan, networkInsightsEna
 
                 <div className="flex gap-2">
                   <Button
-                    size="lg"
                     variant="outline"
-                    className="flex-1"
+                    className="h-8 flex-1"
                     onClick={handleAddToCart}
                     disabled={cartLoading || !plan.isAvailable || !hasInboundOptions}
                   >
@@ -164,8 +163,7 @@ export function ProxyDetailDialog({ open, onOpenChange, plan, networkInsightsEna
                     {cartLoading ? "正在加入..." : "加入购物车"}
                   </Button>
                   <Button
-                    size="lg"
-                    className="flex-1"
+                    className="h-8 flex-1"
                     onClick={handlePurchase}
                     disabled={loading || !plan.isAvailable || !hasInboundOptions}
                   >
@@ -175,7 +173,7 @@ export function ProxyDetailDialog({ open, onOpenChange, plan, networkInsightsEna
                 </div>
 
                 {!plan.isAvailable && (
-                  <Button variant="outline" size="lg" className="w-full" onClick={checkAvailability} disabled={checking}>
+                  <Button variant="outline" className="h-8 w-full" onClick={checkAvailability} disabled={checking}>
                     {checking ? "查询中..." : "查看补位时间"}
                   </Button>
                 )}
diff --git a/src/app/(user)/store/proxy-trace-detail-dialog.tsx b/src/app/(user)/store/proxy-trace-detail-dialog.tsx
index 2ee86b9..6404063 100644
--- a/src/app/(user)/store/proxy-trace-detail-dialog.tsx
+++ b/src/app/(user)/store/proxy-trace-detail-dialog.tsx
@@ -17,7 +17,7 @@ interface ProxyTraceDetailDialogProps {
 export function ProxyTraceDetailDialog({ trace, onOpenChange }: ProxyTraceDetailDialogProps) {
   return (
     <Dialog open={trace !== null} onOpenChange={onOpenChange}>
-      <DialogContent className="sm:max-w-2xl max-h-[80vh] overflow-y-auto">
+      <DialogContent className="max-h-[80vh] overflow-y-auto sm:max-w-[30rem]">
         <DialogHeader>
           <DialogTitle>
             {trace ? `${getCarrierLabel(trace.carrier)} 路由 — ${trace.summary}` : "路由详情"}
diff --git a/src/app/(user)/store/streaming-detail-dialog.tsx b/src/app/(user)/store/streaming-detail-dialog.tsx
index 73c00eb..f1b50e5 100644
--- a/src/app/(user)/store/streaming-detail-dialog.tsx
+++ b/src/app/(user)/store/streaming-detail-dialog.tsx
@@ -60,7 +60,7 @@ export function StreamingDetailDialog({ open, onOpenChange, plan }: Props) {
 
   return (
     <Dialog open={open} onOpenChange={onOpenChange}>
-      <DialogContent className="max-w-2xl max-h-[90vh] overflow-hidden flex flex-col">
+      <DialogContent className="flex max-h-[90vh] max-w-[30rem] flex-col overflow-hidden">
         <DialogHeader>
           <div className="inline-flex w-fit items-center gap-2 rounded-full border border-amber-500/15 bg-amber-500/10 px-2.5 py-1 text-[0.68rem] font-semibold tracking-[0.14em] text-amber-700 dark:text-amber-300">
             <Film className="size-3.5" /> STREAMING
@@ -71,7 +71,7 @@ export function StreamingDetailDialog({ open, onOpenChange, plan }: Props) {
           </DialogDescription>
         </DialogHeader>
 
-        <div className="overflow-y-auto -mx-6 px-6 space-y-5">
+        <div className="-mx-4 space-y-3 overflow-y-auto px-4">
           {plan.description && (
             <div>
               <p className="mb-2 text-xs font-semibold tracking-[0.14em] text-muted-foreground">
@@ -102,7 +102,7 @@ export function StreamingDetailDialog({ open, onOpenChange, plan }: Props) {
 
           <div className="grid gap-2 sm:grid-cols-2">
             <Button
-              size="lg"
+              className="h-8"
               variant="outline"
               onClick={handleAddToCart}
               disabled={cartLoading || !plan.isAvailable}
@@ -111,7 +111,7 @@ export function StreamingDetailDialog({ open, onOpenChange, plan }: Props) {
               {cartLoading ? "正在加入..." : "加入购物车"}
             </Button>
             <Button
-              size="lg"
+              className="h-8"
               onClick={handlePurchase}
               disabled={loading || !plan.isAvailable}
             >
@@ -121,9 +121,8 @@ export function StreamingDetailDialog({ open, onOpenChange, plan }: Props) {
 
           {!plan.isAvailable && (
             <Button
-              size="lg"
               variant="outline"
-              className="w-full"
+              className="h-8 w-full"
               onClick={checkAvailability}
               disabled={checking}
             >
diff --git a/src/app/(user)/subscriptions/_components/renewal-button.tsx b/src/app/(user)/subscriptions/_components/renewal-button.tsx
index 82c0637..9e1061a 100644
--- a/src/app/(user)/subscriptions/_components/renewal-button.tsx
+++ b/src/app/(user)/subscriptions/_components/renewal-button.tsx
@@ -87,7 +87,7 @@ export function RenewalButton({
         续费
       </Button>
       <Dialog open={open} onOpenChange={setOpen}>
-        <DialogContent className="max-w-lg">
+        <DialogContent className="max-w-[24rem]">
           <DialogHeader>
             <div className="mb-1 inline-flex w-fit items-center gap-2 rounded-full border border-primary/15 bg-primary/10 px-3 py-1 text-xs font-semibold tracking-[0.14em] text-primary">
               <WalletCards className="size-3.5" /> RENEWAL
diff --git a/src/app/(user)/subscriptions/_components/traffic-topup-dialog.tsx b/src/app/(user)/subscriptions/_components/traffic-topup-dialog.tsx
index 2a22c0f..0974c6b 100644
--- a/src/app/(user)/subscriptions/_components/traffic-topup-dialog.tsx
+++ b/src/app/(user)/subscriptions/_components/traffic-topup-dialog.tsx
@@ -99,7 +99,7 @@ export function TrafficTopupDialog({
         增加流量
       </Button>
       <Dialog open={open} onOpenChange={setOpen}>
-        <DialogContent className="max-w-lg">
+        <DialogContent className="max-w-[24rem]">
           <DialogHeader>
             <div className="mb-1 inline-flex w-fit items-center gap-2 rounded-full border border-primary/15 bg-primary/10 px-3 py-1 text-xs font-semibold tracking-[0.14em] text-primary">
               <WalletCards className="size-3.5" /> TRAFFIC TOPUP
diff --git a/src/app/(user)/support/_components/create-support-ticket-form.tsx b/src/app/(user)/support/_components/create-support-ticket-form.tsx
index dc1cbcd..995ecc4 100644
--- a/src/app/(user)/support/_components/create-support-ticket-form.tsx
+++ b/src/app/(user)/support/_components/create-support-ticket-form.tsx
@@ -8,8 +8,16 @@ import { createSupportTicket } from "@/actions/user/support";
 import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
 import { Label } from "@/components/ui/label";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
 import { Textarea } from "@/components/ui/textarea";
 import { getErrorMessage } from "@/lib/errors";
+import { supportTicketPriorityLabels } from "@/services/support-labels";
 
 const ATTACHMENT_ACCEPT = "image/jpeg,image/png,image/webp,image/gif,image/avif";
 
@@ -21,6 +29,12 @@ type SupportTicketPreset = {
   body?: string;
 };
 
+type SupportTicketPriorityValue = NonNullable<SupportTicketPreset["priority"]>;
+
+function getPriorityLabel(value: unknown) {
+  return supportTicketPriorityLabels[value as SupportTicketPriorityValue] ?? "选择优先级";
+}
+
 export function CreateSupportTicketForm({
   defaultOpen = false,
   openTicketCount = 0,
@@ -35,6 +49,9 @@ export function CreateSupportTicketForm({
   const router = useRouter();
   const [open, setOpen] = useState(defaultOpen);
   const [submitting, setSubmitting] = useState(false);
+  const [priority, setPriority] = useState<SupportTicketPriorityValue>(
+    preset?.priority ?? "NORMAL",
+  );
   const submittingRef = useRef(false);
   const effectiveOpenTicketLimit = Math.max(1, openTicketLimit);
   const limitReached = openTicketCount >= effectiveOpenTicketLimit;
@@ -52,6 +69,7 @@ export function CreateSupportTicketForm({
       await createSupportTicket(formData);
       toast.success("工单已提交");
       form.reset();
+      setPriority(preset?.priority ?? "NORMAL");
       setOpen(false);
       router.refresh();
     } catch (error) {
@@ -120,17 +138,22 @@ export function CreateSupportTicketForm({
           </div>
           <div className="space-y-2">
             <Label htmlFor="priority">优先级</Label>
-            <select
-              id="priority"
+            <Select
               name="priority"
-              defaultValue={preset?.priority ?? "NORMAL"}
-              className="h-11 w-full px-3 text-sm outline-none disabled:cursor-not-allowed"
+              value={priority}
+              onValueChange={(value) => setPriority((value ?? "NORMAL") as SupportTicketPriorityValue)}
+              disabled={submitting}
             >
-              <option value="LOW">低</option>
-              <option value="NORMAL">普通</option>
-              <option value="HIGH">高</option>
-              <option value="URGENT">紧急</option>
-            </select>
+              <SelectTrigger id="priority" className="w-full">
+                <SelectValue>{(value) => getPriorityLabel(value)}</SelectValue>
+              </SelectTrigger>
+              <SelectContent align="start">
+                <SelectItem value="LOW">低</SelectItem>
+                <SelectItem value="NORMAL">普通</SelectItem>
+                <SelectItem value="HIGH">高</SelectItem>
+                <SelectItem value="URGENT">紧急</SelectItem>
+              </SelectContent>
+            </Select>
           </div>
         </div>
         <div className="space-y-2">
diff --git a/src/components/admin/filter-bar.tsx b/src/components/admin/filter-bar.tsx
index dadf400..9072473 100644
--- a/src/components/admin/filter-bar.tsx
+++ b/src/components/admin/filter-bar.tsx
@@ -4,6 +4,13 @@ import { useMemo, useState, type ReactNode } from "react";
 import { SlidersHorizontal, X } from "lucide-react";
 import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
 import { cn } from "@/lib/utils";
 
 export interface AdminFilterOption {
@@ -15,6 +22,18 @@ export interface AdminFilterSelect {
   name: string;
   value: string;
   options: AdminFilterOption[];
+  label?: string;
+}
+
+function getFilterSelectLabel(select: AdminFilterSelect) {
+  if (select.label) return select.label;
+  const firstLabel = select.options[0]?.label;
+  if (!firstLabel) return select.name;
+  return firstLabel.replace(/^全部/, "") || firstLabel;
+}
+
+function getFilterOptionLabel(select: AdminFilterSelect, value: string | null | undefined) {
+  return select.options.find((option) => option.value === (value ?? ""))?.label ?? select.options[0]?.label ?? "全部";
 }
 
 export function AdminFilterBar({
@@ -36,7 +55,7 @@ export function AdminFilterBar({
   const [mobileOpen, setMobileOpen] = useState(activeFilterCount > 0);
 
   return (
-    <form className="surface-card rounded-xl p-3" role="search">
+    <form className="surface-card rounded-xl p-3 sm:p-4" role="search">
       <div className="flex items-center justify-between gap-3 md:hidden">
         <button
           type="button"
@@ -55,40 +74,57 @@ export function AdminFilterBar({
           mobileOpen ? "mt-3 flex" : "hidden",
         )}
       >
-        <div className="min-w-0 md:min-w-[16rem] md:flex-[1_1_18rem]">
-          <label className="sr-only" htmlFor="admin-filter-search">
-            {searchPlaceholder ?? "搜索"}
+        <div className="min-w-0 space-y-1.5 md:min-w-[16rem] md:flex-[1_1_18rem]">
+          <label className="flex items-center gap-1.5 px-1 text-xs font-semibold whitespace-nowrap text-muted-foreground" htmlFor="admin-filter-search">
+            搜索
           </label>
           <Input
             id="admin-filter-search"
             name="q"
             defaultValue={q ?? ""}
             placeholder={searchPlaceholder ?? "搜索"}
-            className="h-10 md:h-11"
+            className="h-10 bg-muted/30 shadow-[var(--shadow-button)]"
           />
         </div>
         {selects.map((select) => (
-          <div key={select.name} className="md:min-w-[11rem] md:flex-[1_1_11rem]">
-            <label className="sr-only" htmlFor={`admin-filter-${select.name}`}>
-              {select.options[0]?.label ?? select.name}
+          <div key={select.name} className="space-y-1.5 md:min-w-[12rem] md:flex-[0_1_13rem]">
+            <label
+              className="flex items-center gap-1.5 px-1 text-xs font-semibold whitespace-nowrap text-muted-foreground"
+              htmlFor={`admin-filter-${select.name}`}
+            >
+              {getFilterSelectLabel(select)}
             </label>
-            <select
-              id={`admin-filter-${select.name}`}
+            <Select
+              key={`${select.name}-${select.value}`}
               name={select.name}
               defaultValue={select.value}
-              className="h-10 w-full px-3 text-sm outline-none md:h-11"
             >
-              {select.options.map((option) => (
-                <option key={option.value} value={option.value}>
-                  {option.label}
-                </option>
-              ))}
-            </select>
+              <SelectTrigger
+                id={`admin-filter-${select.name}`}
+                className={cn(
+                  "h-10 w-full justify-between rounded-lg px-3",
+                  select.value && "border-primary/35 bg-primary/10 text-primary",
+                )}
+              >
+                <SelectValue placeholder={select.options[0]?.label ?? "全部"}>
+                  {(value) => getFilterOptionLabel(select, value == null ? "" : String(value))}
+                </SelectValue>
+              </SelectTrigger>
+              <SelectContent align="start">
+                {select.options.map((option) => (
+                  <SelectItem key={option.value} value={option.value}>
+                    {option.label}
+                  </SelectItem>
+                ))}
+              </SelectContent>
+            </Select>
           </div>
         ))}
-        <Button type="submit" className="h-10 md:h-11 md:flex-none">
-          筛选
-        </Button>
+        <div className="md:self-end">
+          <Button type="submit" className="h-10 w-full md:w-auto">
+            筛选
+          </Button>
+        </div>
         {children && <div className="hidden md:block">{children}</div>}
       </div>
     </form>
diff --git a/src/components/shared/confirm-action-button.tsx b/src/components/shared/confirm-action-button.tsx
index b696890..60df69a 100644
--- a/src/components/shared/confirm-action-button.tsx
+++ b/src/components/shared/confirm-action-button.tsx
@@ -82,7 +82,7 @@ export function ConfirmActionButton({
         {children}
       </Button>
       <Dialog open={open} onOpenChange={setOpen}>
-        <DialogContent className="max-w-md">
+        <DialogContent className="max-w-[20rem]">
           <DialogHeader>
             <div className="mb-1 flex size-9 items-center justify-center rounded-lg border border-destructive/15 bg-destructive/10 text-destructive">
               <AlertTriangle className="size-5" />
diff --git a/src/components/subscriptions/subscription-risk-review-actions.tsx b/src/components/subscriptions/subscription-risk-review-actions.tsx
index 71d2b4e..dd2389e 100644
--- a/src/components/subscriptions/subscription-risk-review-actions.tsx
+++ b/src/components/subscriptions/subscription-risk-review-actions.tsx
@@ -277,7 +277,7 @@ export function SubscriptionRiskReviewActions({
       </div>
 
       <Dialog open={dialog != null} onOpenChange={(open) => !pending && !open && setDialog(null)}>
-        <DialogContent className={dialog?.type === "report" ? "sm:max-w-3xl" : "sm:max-w-lg"}>
+        <DialogContent className={dialog?.type === "report" ? "sm:max-w-[34rem]" : "sm:max-w-[24rem]"}>
           {dialog?.type === "review" && (
             <>
               <DialogHeader>
diff --git a/src/components/ui/boolean-toggle.tsx b/src/components/ui/boolean-toggle.tsx
index 5a9c43a..8730264 100644
--- a/src/components/ui/boolean-toggle.tsx
+++ b/src/components/ui/boolean-toggle.tsx
@@ -13,6 +13,7 @@ export interface BooleanToggleProps {
   falseLabel?: string;
   ariaLabel?: string;
   className?: string;
+  size?: "default" | "compact";
   disabled?: boolean;
 }
 
@@ -26,6 +27,7 @@ export function BooleanToggle({
   falseLabel = "关闭",
   ariaLabel,
   className,
+  size = "default",
   disabled = false,
 }: BooleanToggleProps) {
   const generatedId = useId();
@@ -46,7 +48,11 @@ export function BooleanToggle({
       <div
         role="group"
         aria-label={ariaLabel}
-        className="inline-flex min-h-10 w-full rounded-lg border border-border bg-muted/25 p-1"
+        data-slot="boolean-toggle"
+        className={cn(
+          "inline-flex w-full border border-border bg-muted/25",
+          size === "compact" ? "min-h-8 rounded-md p-0.5" : "min-h-10 rounded-lg p-1",
+        )}
       >
         {[
           { value: true, label: trueLabel },
@@ -60,8 +66,12 @@ export function BooleanToggle({
               aria-pressed={active}
               disabled={disabled}
               onClick={() => select(option.value)}
+              data-slot="boolean-toggle-option"
               className={cn(
-                "min-w-fit flex-1 whitespace-nowrap rounded-md px-3 py-1.5 text-sm font-medium transition-colors duration-150 focus-visible:outline-none focus-visible:ring-[3px] focus-visible:ring-ring/20 disabled:cursor-not-allowed disabled:opacity-60",
+                "min-w-fit flex-1 whitespace-nowrap font-medium transition-colors duration-150 focus-visible:outline-none focus-visible:ring-[3px] focus-visible:ring-ring/20 disabled:cursor-not-allowed disabled:opacity-60",
+                size === "compact"
+                  ? "rounded-[calc(var(--radius)-2px)] px-2 py-1 text-xs leading-4"
+                  : "rounded-md px-3 py-1.5 text-sm",
                 active
                   ? "bg-background text-foreground shadow-sm"
                   : "text-muted-foreground hover:bg-background/55 hover:text-foreground",
diff --git a/src/components/ui/dialog.tsx b/src/components/ui/dialog.tsx
index a38893d..97c9de8 100644
--- a/src/components/ui/dialog.tsx
+++ b/src/components/ui/dialog.tsx
@@ -50,11 +50,11 @@ function DialogContent({
   return (
     <DialogPortal>
       <DialogOverlay />
-      <div className="fixed inset-0 z-50 flex items-start justify-center overflow-y-auto p-4 sm:items-center sm:p-8">
+      <div className="fixed inset-0 z-50 flex items-start justify-center overflow-y-auto p-3 sm:items-center sm:p-5">
         <DialogPrimitive.Popup
           data-slot="dialog-content"
           className={cn(
-            "relative my-auto grid w-full max-w-[calc(100%-2rem)] gap-5 rounded-xl border border-border bg-popover p-6 text-sm text-popover-foreground opacity-100 shadow-xl outline-none sm:max-w-md data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-open:slide-in-from-bottom-2 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95 data-closed:slide-out-to-bottom-2",
+            "relative my-auto grid max-h-[calc(100dvh-1.5rem)] w-full max-w-[calc(100%-1rem)] overflow-y-auto gap-3 rounded-lg border border-border bg-popover p-4 text-[13px] text-popover-foreground opacity-100 shadow-xl outline-none sm:max-w-sm data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-open:slide-in-from-bottom-2 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95 data-closed:slide-out-to-bottom-2",
             className
           )}
           {...props}
@@ -66,7 +66,7 @@ function DialogContent({
               render={
                 <Button
                   variant="ghost"
-                  className="absolute right-3 top-3"
+                  className="absolute right-2.5 top-2.5"
                   size="icon-sm"
                 />
               }
@@ -85,7 +85,58 @@ function DialogHeader({ className, ...props }: React.ComponentProps<"div">) {
   return (
     <div
       data-slot="dialog-header"
-      className={cn("flex flex-col gap-2.5", className)}
+      className={cn("flex flex-col gap-1.5", className)}
+      {...props}
+    />
+  )
+}
+
+function canScrollElement(element: HTMLElement, deltaY: number) {
+  const style = window.getComputedStyle(element);
+  if (!/(auto|scroll)/.test(style.overflowY)) return false;
+  if (element.scrollHeight <= element.clientHeight) return false;
+  if (deltaY > 0) return element.scrollTop < element.scrollHeight - element.clientHeight;
+  if (deltaY < 0) return element.scrollTop > 0;
+  return false;
+}
+
+function DialogBody({ className, onWheel, ...props }: React.ComponentProps<"div">) {
+  const bodyRef = React.useRef<HTMLDivElement>(null);
+
+  React.useEffect(() => {
+    const body = bodyRef.current;
+    if (!body) return;
+    const scrollBody = body;
+
+    function handleWheel(event: WheelEvent) {
+      if (event.defaultPrevented || event.deltaY === 0) return;
+
+      let node = event.target instanceof HTMLElement ? event.target : null;
+      while (node && node !== scrollBody) {
+        if (canScrollElement(node, event.deltaY)) return;
+        node = node.parentElement;
+      }
+
+      const maxScrollTop = scrollBody.scrollHeight - scrollBody.clientHeight;
+      if (maxScrollTop <= 0) return;
+
+      const nextScrollTop = Math.min(maxScrollTop, Math.max(0, scrollBody.scrollTop + event.deltaY));
+      if (nextScrollTop === scrollBody.scrollTop) return;
+
+      scrollBody.scrollTop = nextScrollTop;
+      event.preventDefault();
+    }
+
+    scrollBody.addEventListener("wheel", handleWheel, { passive: false });
+    return () => scrollBody.removeEventListener("wheel", handleWheel);
+  }, []);
+
+  return (
+    <div
+      ref={bodyRef}
+      data-slot="dialog-body"
+      className={cn("min-h-0 overflow-y-auto", className)}
+      onWheel={onWheel}
       {...props}
     />
   )
@@ -103,7 +154,7 @@ function DialogFooter({
     <div
       data-slot="dialog-footer"
       className={cn(
-        "-mx-6 -mb-6 flex flex-col-reverse gap-2.5 rounded-b-xl border-t border-border/50 bg-muted/25 p-5 sm:flex-row sm:justify-end",
+        "-mx-4 -mb-4 flex flex-col-reverse gap-2 rounded-b-lg border-t border-border/50 bg-muted/25 p-3 sm:flex-row sm:justify-end",
         className
       )}
       {...props}
@@ -123,7 +174,7 @@ function DialogTitle({ className, ...props }: DialogPrimitive.Title.Props) {
     <DialogPrimitive.Title
       data-slot="dialog-title"
       className={cn(
-        "font-heading text-lg leading-tight font-semibold tracking-[-0.02em]",
+        "font-heading text-base leading-tight font-semibold tracking-[-0.02em]",
         className
       )}
       {...props}
@@ -139,7 +190,7 @@ function DialogDescription({
     <DialogPrimitive.Description
       data-slot="dialog-description"
       className={cn(
-        "text-sm leading-6 text-muted-foreground text-pretty *:[a]:underline *:[a]:underline-offset-3 *:[a]:hover:text-foreground",
+        "text-xs leading-5 text-muted-foreground text-pretty *:[a]:underline *:[a]:underline-offset-3 *:[a]:hover:text-foreground",
         className
       )}
       {...props}
@@ -149,6 +200,7 @@ function DialogDescription({
 
 export {
   Dialog,
+  DialogBody,
   DialogClose,
   DialogContent,
   DialogDescription,
diff --git a/src/components/ui/input.tsx b/src/components/ui/input.tsx
index 2443af1..6fc3510 100644
--- a/src/components/ui/input.tsx
+++ b/src/components/ui/input.tsx
@@ -9,7 +9,7 @@ function Input({ className, type, ...props }: React.ComponentProps<"input">) {
       type={type}
       data-slot="input"
       className={cn(
-        "premium-input w-full min-w-0 px-3.5 py-2 text-base outline-none file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-semibold file:text-foreground placeholder:text-muted-foreground disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-4 aria-invalid:ring-destructive/20 md:text-sm",
+        "premium-input h-10 w-full min-w-0 px-3.5 py-2 text-base outline-none file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-semibold file:text-foreground placeholder:text-muted-foreground disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-4 aria-invalid:ring-destructive/20 md:text-sm",
         className
       )}
       {...props}
diff --git a/src/components/ui/select.tsx b/src/components/ui/select.tsx
index 13fe9b4..4e48baa 100644
--- a/src/components/ui/select.tsx
+++ b/src/components/ui/select.tsx
@@ -6,7 +6,16 @@ import { Select as SelectPrimitive } from "@base-ui/react/select"
 import { cn } from "@/lib/utils"
 import { ChevronDownIcon, CheckIcon, ChevronUpIcon } from "lucide-react"
 
-const Select = SelectPrimitive.Root
+function Select<Value, Multiple extends boolean | undefined = false>({
+  children,
+  ...props
+}: SelectPrimitive.Root.Props<Value, Multiple>) {
+  return (
+    <span data-slot="select-root" className="block min-w-0">
+      <SelectPrimitive.Root {...props}>{children}</SelectPrimitive.Root>
+    </span>
+  )
+}
 
 function SelectGroup({ className, ...props }: SelectPrimitive.Group.Props) {
   return (
@@ -41,7 +50,8 @@ function SelectTrigger({
       data-slot="select-trigger"
       data-size={size}
       className={cn(
-        "premium-input no-underline flex w-fit items-center justify-between gap-1.5 py-2 pr-2 pl-3 text-sm whitespace-nowrap outline-none select-none disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-4 aria-invalid:ring-destructive/20 data-placeholder:text-muted-foreground data-[size=default]:h-11 data-[size=sm]:h-9 data-[size=sm]:rounded-xl *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-1.5 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        "premium-input no-underline flex w-fit items-center justify-between gap-2 border-border bg-muted/30 py-2 pr-2 pl-3 text-sm font-medium whitespace-nowrap shadow-[var(--shadow-button)] outline-none select-none transition-colors disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-4 aria-invalid:ring-destructive/20 data-placeholder:text-muted-foreground data-[popup-open]:border-primary/35 data-[popup-open]:bg-background hover:border-primary/30 hover:bg-muted/55 *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-1.5 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        size === "sm" ? "h-9 rounded-xl" : "h-10",
         className
       )}
       {...props}
@@ -49,7 +59,7 @@ function SelectTrigger({
       {children}
       <SelectPrimitive.Icon
         render={
-          <ChevronDownIcon className="pointer-events-none size-4 text-muted-foreground" />
+          <ChevronDownIcon className="pointer-events-none size-5 rounded-md bg-primary/10 p-0.5 text-primary" />
         }
       />
     </SelectPrimitive.Trigger>