refactor: complete border unification across all components

- Add border styles to JsonEditor (CodeMirror) with theme-responsive colors
- Update all dialog header/footer dividers to use border-border-default
- Replace remaining border-border instances in settings components
- Ensure all borders (including separators and container borders) use unified design system
- All borders now consistently use CSS variables and respond to light/dark themes

src/components/JsonEditor.tsx

@@ -86,6 +86,14 @@ const JsonEditor: React.FC<JsonEditorProps> = ({
           "ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace",
         fontSize: "14px",
       },
+      ".cm-editor": {
+        border: "1px solid hsl(var(--border))",
+        borderRadius: "0.5rem",
+      },
+      ".cm-editor.cm-focused": {
+        outline: "none",
+        borderColor: "hsl(var(--primary))",
+      },
     });
 
     const extensions = [

src/components/settings/AboutSection.tsx

@@ -140,7 +140,7 @@ export function AboutSection({ isPortable }: AboutSectionProps) {
         </p>
       </header>
 
-      <div className="space-y-4 rounded-lg border border-border p-4">
+      <div className="space-y-4 rounded-lg border border-border-default p-4">
         <div className="flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between">
           <div className="space-y-1">
             <p className="text-sm font-medium text-foreground">CC Switch</p>

src/components/settings/ImportExportSection.tsx

@@ -51,7 +51,7 @@ export function ImportExportSection({
         </p>
       </header>
 
-      <div className="space-y-3 rounded-lg border border-border p-4">
+      <div className="space-y-3 rounded-lg border border-border-default p-4">
         <Button
           type="button"
           className="w-full"
@@ -138,7 +138,7 @@ function ImportStatusMessage({
 
   if (status === "importing") {
     return (
-      <div className={`${baseClass} border-border bg-muted/40`}>
+      <div className={`${baseClass} border-border-default bg-muted/40`}>
         <Loader2 className="mt-0.5 h-4 w-4 animate-spin text-muted-foreground" />
         <div>
           <p className="font-medium">{t("settings.importing")}</p>

src/components/settings/LanguageSettings.tsx

@@ -18,7 +18,7 @@ export function LanguageSettings({ value, onChange }: LanguageSettingsProps) {
           {t("settings.languageHint")}
         </p>
       </header>
-      <div className="inline-flex gap-1 rounded-md border border-border bg-background p-1">
+      <div className="inline-flex gap-1 rounded-md border border-border-default bg-background p-1">
         <LanguageButton active={value === "zh"} onClick={() => onChange("zh")}>
           {t("settings.languageOptionChinese")}
         </LanguageButton>

src/components/settings/ThemeSettings.tsx

@@ -16,7 +16,7 @@ export function ThemeSettings() {
           {t("settings.themeHint")}
         </p>
       </header>
-      <div className="inline-flex gap-1 rounded-md border border-border bg-background p-1">
+      <div className="inline-flex gap-1 rounded-md border border-border-default bg-background p-1">
         <ThemeButton
           active={theme === "light"}
           onClick={() => setTheme("light")}

src/components/settings/WindowSettings.tsx

@@ -52,7 +52,7 @@ function ToggleRow({
   onCheckedChange,
 }: ToggleRowProps) {
   return (
-    <div className="flex items-start justify-between gap-4 rounded-lg border border-border p-4">
+    <div className="flex items-start justify-between gap-4 rounded-lg border border-border-default p-4">
       <div className="space-y-1">
         <p className="text-sm font-medium leading-none">{title}</p>
         {description ? (

src/components/ui/dialog.tsx

@@ -78,7 +78,7 @@ const DialogHeader = ({
 }: React.HTMLAttributes<HTMLDivElement>) => (
   <div
     className={cn(
-      "flex flex-col space-y-1.5 text-center sm:text-left px-6 py-5 border-b border-border bg-muted/20 flex-shrink-0",
+      "flex flex-col space-y-1.5 text-center sm:text-left px-6 py-5 border-b border-border-default bg-muted/20 flex-shrink-0",
       className,
     )}
     {...props}
@@ -92,7 +92,7 @@ const DialogFooter = ({
 }: React.HTMLAttributes<HTMLDivElement>) => (
   <div
     className={cn(
-      "flex flex-col-reverse gap-2 sm:flex-row sm:justify-end sm:items-center px-6 py-5 border-t border-border bg-muted/20 flex-shrink-0",
+      "flex flex-col-reverse gap-2 sm:flex-row sm:justify-end sm:items-center px-6 py-5 border-t border-border-default bg-muted/20 flex-shrink-0",
       className,
     )}
     {...props}