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/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 ? (