refactor: update agent API schemas, standardize UI text styling, and enhance settlement credit ledger components

src/modules/settings/panels/draw-settings-panel.tsx

@@ -113,22 +113,22 @@ export function DrawSettingsPanel() {
         title={t("system.sections.draw", { ns: "config" })}
         description={t("system.sections.drawDescription", { ns: "config" })}
       >
-        <div className="space-y-5">
-          <div className="flex flex-wrap items-center justify-between gap-3">
-            <Label className="text-sm font-medium">{t("system.fields.manualReview", { ns: "config" })}</Label>
-            <Switch
-              checked={draft.requireManualReview}
-              disabled={!canManage || loading || saving}
-              aria-label={t("system.fields.manualReview", { ns: "config" })}
-              onCheckedChange={(value) => updateField("requireManualReview", value)}
-            />
+        <div className="space-y-6">
+          <div className="rounded-xl border border-border/70 bg-card overflow-hidden shadow-sm">
+            <div className="flex flex-wrap items-center justify-between gap-3 px-4 py-3.5 bg-background/50 transition-colors hover:bg-muted/30">
+              <Label className="font-medium cursor-pointer" onClick={() => updateField("requireManualReview", !draft.requireManualReview)}>{t("system.fields.manualReview", { ns: "config" })}</Label>
+              <Switch
+                checked={draft.requireManualReview}
+                disabled={!canManage || loading || saving}
+                aria-label={t("system.fields.manualReview", { ns: "config" })}
+                onCheckedChange={(value) => updateField("requireManualReview", value)}
+              />
+            </div>
           </div>
 
-          <div className="h-px bg-border/60" />
-
-          <div className="grid grid-cols-1 gap-4 md:grid-cols-2">
-            <div className="grid gap-2">
-              <Label htmlFor="default-currency" className="text-sm font-medium">
+          <div className="grid gap-x-6 gap-y-5 sm:grid-cols-2 lg:grid-cols-3">
+            <div className="space-y-2">
+              <Label htmlFor="default-currency" className="text-muted-foreground">
                 {t("system.fields.defaultCurrency", { ns: "config" })}
               </Label>
               <Input
@@ -138,10 +138,11 @@ export function DrawSettingsPanel() {
                 onChange={(e) => updateField("defaultCurrency", e.target.value.toUpperCase())}
                 disabled={!canManage || loading || saving}
                 maxLength={16}
+                className="h-10 bg-background/50 transition-colors focus:bg-background"
               />
             </div>
-            <div className="grid gap-2">
-              <Label htmlFor="draw-interval-minutes" className="text-sm font-medium">
+            <div className="space-y-2">
+              <Label htmlFor="draw-interval-minutes" className="text-muted-foreground">
                 {t("system.fields.drawIntervalMinutes", { ns: "config" })}
               </Label>
               <Input
@@ -154,10 +155,11 @@ export function DrawSettingsPanel() {
                 placeholder={t("system.placeholders.drawIntervalMinutes", { ns: "config" })}
                 onChange={(e) => updateField("drawIntervalMinutes", e.target.value)}
                 disabled={!canManage || loading || saving}
+                className="h-10 bg-background/50 transition-colors focus:bg-background"
               />
             </div>
-            <div className="grid gap-2">
-              <Label htmlFor="draw-betting-window-seconds" className="text-sm font-medium">
+            <div className="space-y-2">
+              <Label htmlFor="draw-betting-window-seconds" className="text-muted-foreground">
                 {t("system.fields.drawBettingWindowSeconds", { ns: "config" })}
               </Label>
               <Input
@@ -169,10 +171,11 @@ export function DrawSettingsPanel() {
                 placeholder={t("system.placeholders.drawBettingWindowSeconds", { ns: "config" })}
                 onChange={(e) => updateField("drawBettingWindowSeconds", e.target.value)}
                 disabled={!canManage || loading || saving}
+                className="h-10 bg-background/50 transition-colors focus:bg-background"
               />
             </div>
-            <div className="grid gap-2">
-              <Label htmlFor="draw-close-before-seconds" className="text-sm font-medium">
+            <div className="space-y-2">
+              <Label htmlFor="draw-close-before-seconds" className="text-muted-foreground">
                 {t("system.fields.drawCloseBeforeDrawSeconds", { ns: "config" })}
               </Label>
               <Input
@@ -184,10 +187,11 @@ export function DrawSettingsPanel() {
                 placeholder={t("system.placeholders.drawCloseBeforeDrawSeconds", { ns: "config" })}
                 onChange={(e) => updateField("drawCloseBeforeDrawSeconds", e.target.value)}
                 disabled={!canManage || loading || saving}
+                className="h-10 bg-background/50 transition-colors focus:bg-background"
               />
             </div>
-            <div className="grid gap-2">
-              <Label htmlFor="draw-buffer-ahead" className="text-sm font-medium">
+            <div className="space-y-2">
+              <Label htmlFor="draw-buffer-ahead" className="text-muted-foreground">
                 {t("system.fields.drawBufferDrawsAhead", { ns: "config" })}
               </Label>
               <Input
@@ -199,10 +203,11 @@ export function DrawSettingsPanel() {
                 placeholder={t("system.placeholders.drawBufferDrawsAhead", { ns: "config" })}
                 onChange={(e) => updateField("drawBufferDrawsAhead", e.target.value)}
                 disabled={!canManage || loading || saving}
+                className="h-10 bg-background/50 transition-colors focus:bg-background"
               />
             </div>
-            <div className="grid gap-2">
-              <Label htmlFor="cooldown-minutes" className="text-sm font-medium">
+            <div className="space-y-2">
+              <Label htmlFor="cooldown-minutes" className="text-muted-foreground">
                 {t("system.fields.cooldownMinutes", { ns: "config" })}
               </Label>
               <Input
@@ -214,6 +219,7 @@ export function DrawSettingsPanel() {
                 placeholder={t("system.placeholders.cooldownMinutes", { ns: "config" })}
                 onChange={(e) => updateField("cooldownMinutes", e.target.value)}
                 disabled={!canManage || loading || saving}
+                className="h-10 bg-background/50 transition-colors focus:bg-background"
               />
             </div>
           </div>

src/modules/settings/panels/frontend-settings-panel.tsx

@@ -71,15 +71,17 @@ export function FrontendSettingsPanel() {
   return (
     <>
       <AdminPageCard title={t("system.frontendConfig", { ns: "config" })}>
-        <div className="grid gap-2">
-          <Label className="text-sm font-medium">
-            {t("system.fields.playRulesHtml", { ns: "config" })}
-          </Label>
-          <p className="text-xs text-muted-foreground">
-            {t("system.fields.playRulesHtmlDesc", { ns: "config" })}
-          </p>
+        <div className="grid gap-4">
+          <div className="space-y-1">
+            <Label className="font-medium text-muted-foreground">
+              {t("system.fields.playRulesHtml", { ns: "config" })}
+            </Label>
+            <p className="text-xs text-muted-foreground/80">
+              {t("system.fields.playRulesHtmlDesc", { ns: "config" })}
+            </p>
+          </div>
           <Tabs defaultValue="zh" className="w-full">
-            <TabsList className="w-full max-w-md">
+            <TabsList className="w-full max-w-md bg-muted/40">
               <TabsTrigger value="zh">{t("play.locales.zh", { ns: "config" })}</TabsTrigger>
               <TabsTrigger value="en">{t("play.locales.en", { ns: "config" })}</TabsTrigger>
               <TabsTrigger value="ne">{t("play.locales.ne", { ns: "config" })}</TabsTrigger>
@@ -90,7 +92,7 @@ export function FrontendSettingsPanel() {
                 value={draft.playRulesHtmlZh}
                 onChange={(e) => updateField("playRulesHtmlZh", e.target.value)}
                 disabled={!canManage || loading || saving}
-                className="min-h-[200px] font-mono text-xs"
+                className="min-h-[200px] font-mono text-xs bg-background/50 transition-colors focus:bg-background"
                 placeholder="<div>...</div>"
               />
             </TabsContent>
@@ -100,7 +102,7 @@ export function FrontendSettingsPanel() {
                 value={draft.playRulesHtmlEn}
                 onChange={(e) => updateField("playRulesHtmlEn", e.target.value)}
                 disabled={!canManage || loading || saving}
-                className="min-h-[200px] font-mono text-xs"
+                className="min-h-[200px] font-mono text-xs bg-background/50 transition-colors focus:bg-background"
                 placeholder="<div>...</div>"
               />
             </TabsContent>
@@ -110,7 +112,7 @@ export function FrontendSettingsPanel() {
                 value={draft.playRulesHtmlNe}
                 onChange={(e) => updateField("playRulesHtmlNe", e.target.value)}
                 disabled={!canManage || loading || saving}
-                className="min-h-[200px] font-mono text-xs"
+                className="min-h-[200px] font-mono text-xs bg-background/50 transition-colors focus:bg-background"
                 placeholder="<div>...</div>"
               />
             </TabsContent>

src/modules/settings/panels/settlement-settings-panel.tsx

@@ -82,53 +82,49 @@ export function SettlementSettingsPanel() {
         description={t("system.sections.settlementDescription", { ns: "config" })}
       >
         <div className="space-y-5">
-          <div className="flex flex-wrap items-center justify-between gap-3">
-            <Label className="text-sm font-medium">{t("system.fields.autoSettlement", { ns: "config" })}</Label>
-            <Switch
-              checked={draft.autoSettlement}
-              disabled={loading || saving}
-              aria-label={t("system.fields.autoSettlement", { ns: "config" })}
-              onCheckedChange={(value) => updateField("autoSettlement", value)}
-            />
-          </div>
-
-          <div className="h-px bg-border/60" />
-
-          <div className="flex flex-wrap items-center justify-between gap-3">
-            <Label className="text-sm font-medium">{t("system.fields.autoApprove", { ns: "config" })}</Label>
-            <Switch
-              checked={draft.autoApprove}
-              disabled={loading || saving}
-              aria-label={t("system.fields.autoApprove", { ns: "config" })}
-              onCheckedChange={(value) => updateField("autoApprove", value)}
-            />
-          </div>
-
-          <div className="h-px bg-border/60" />
-
-          <div className="flex flex-wrap items-center justify-between gap-3">
-            <Label className="text-sm font-medium">{t("system.fields.autoPayout", { ns: "config" })}</Label>
-            <Switch
-              checked={draft.autoPayout}
-              disabled={loading || saving}
-              aria-label={t("system.fields.autoPayout", { ns: "config" })}
-              onCheckedChange={(value) => updateField("autoPayout", value)}
-            />
-          </div>
-
-          <div className="h-px bg-border/60" />
-
-          <div className="flex flex-wrap items-center justify-between gap-3">
-            <div className="min-w-0 space-y-1 pr-4">
-              <Label className="text-sm font-medium">{t("system.fields.applyRebateToPayout", { ns: "config" })}</Label>
-              <p className="text-xs text-muted-foreground">{t("system.hints.applyRebateToPayout", { ns: "config" })}</p>
+          <div className="rounded-xl border border-border/70 bg-card overflow-hidden shadow-sm">
+            <div className="flex flex-wrap items-center justify-between gap-3 px-4 py-3.5 bg-background/50 transition-colors hover:bg-muted/30 border-b border-border/50">
+              <Label className="font-medium cursor-pointer" onClick={() => updateField("autoSettlement", !draft.autoSettlement)}>{t("system.fields.autoSettlement", { ns: "config" })}</Label>
+              <Switch
+                checked={draft.autoSettlement}
+                disabled={loading || saving}
+                aria-label={t("system.fields.autoSettlement", { ns: "config" })}
+                onCheckedChange={(value) => updateField("autoSettlement", value)}
+              />
+            </div>
+
+            <div className="flex flex-wrap items-center justify-between gap-3 px-4 py-3.5 bg-background/50 transition-colors hover:bg-muted/30 border-b border-border/50">
+              <Label className="font-medium cursor-pointer" onClick={() => updateField("autoApprove", !draft.autoApprove)}>{t("system.fields.autoApprove", { ns: "config" })}</Label>
+              <Switch
+                checked={draft.autoApprove}
+                disabled={loading || saving}
+                aria-label={t("system.fields.autoApprove", { ns: "config" })}
+                onCheckedChange={(value) => updateField("autoApprove", value)}
+              />
+            </div>
+
+            <div className="flex flex-wrap items-center justify-between gap-3 px-4 py-3.5 bg-background/50 transition-colors hover:bg-muted/30 border-b border-border/50">
+              <Label className="font-medium cursor-pointer" onClick={() => updateField("autoPayout", !draft.autoPayout)}>{t("system.fields.autoPayout", { ns: "config" })}</Label>
+              <Switch
+                checked={draft.autoPayout}
+                disabled={loading || saving}
+                aria-label={t("system.fields.autoPayout", { ns: "config" })}
+                onCheckedChange={(value) => updateField("autoPayout", value)}
+              />
+            </div>
+
+            <div className="flex flex-wrap items-center justify-between gap-3 px-4 py-3.5 bg-background/50 transition-colors hover:bg-muted/30">
+              <div className="min-w-0 space-y-1 pr-4 cursor-pointer" onClick={() => updateField("applyRebateToPayout", !draft.applyRebateToPayout)}>
+                <Label className="font-medium cursor-pointer">{t("system.fields.applyRebateToPayout", { ns: "config" })}</Label>
+                <p className="text-[11px] text-muted-foreground/80">{t("system.hints.applyRebateToPayout", { ns: "config" })}</p>
+              </div>
+              <Switch
+                checked={draft.applyRebateToPayout}
+                disabled={loading || saving}
+                aria-label={t("system.fields.applyRebateToPayout", { ns: "config" })}
+                onCheckedChange={(value) => updateField("applyRebateToPayout", value)}
+              />
             </div>
-            <Switch
-              checked={draft.applyRebateToPayout}
-              disabled={loading || saving}
-              aria-label={t("system.fields.applyRebateToPayout", { ns: "config" })}
-              onCheckedChange={(value) => updateField("applyRebateToPayout", value)}
-            />
           </div>
 
           <SettingsSectionActions