优化 App、Header 和 Server 组件的布局，调整样式以提升用户体验和界面整洁性。同时移除不必要的动画效果，简化代码结构。

src/App.tsx

@@ -82,7 +82,7 @@ const App: React.FC = () => {
             "bg-background": !customBackgroundImage,
           })}
         >
-          <main className="flex z-20 min-h-[calc(100vh-calc(var(--spacing)*16))] flex-1 flex-col gap-4 p-4 md:p-10 md:pt-8">
+          <main className="flex z-20 min-h-[calc(100vh-calc(var(--spacing)*8))] flex-1 flex-col gap-2 p-2 md:p-6 md:pt-4">
             <RefreshToast />
             <Header />
             <DashCommand />

src/components/Header.tsx

@@ -6,7 +6,7 @@ import { fetchLoginUser, fetchSetting } from "@/lib/nezha-api"
 import { cn } from "@/lib/utils"
 import NumberFlow, { NumberFlowGroup } from "@number-flow/react"
 import { useQuery } from "@tanstack/react-query"
-import { AnimatePresence, m } from "framer-motion"
+import { AnimatePresence } from "framer-motion"
 import { ImageMinus } from "lucide-react"
 import { DateTime } from "luxon"
 import { useEffect, useRef, useState } from "react"
@@ -74,7 +74,7 @@ function Header() {
   const customBackgroundImage = backgroundImage
 
   return (
-    <div className="mx-auto w-full max-w-5xl">
+    <div className="mx-auto w-full max-w-7xl">
       <section className="flex items-center justify-between header-top">
         <section
           onClick={() => {
@@ -191,18 +191,14 @@ export function RefreshToast() {
 
   return (
     <AnimatePresence>
-      <m.div
-        initial={{ opacity: 0, filter: "blur(10px)", scale: 0.8 }}
-        animate={{ opacity: 1, filter: "blur(0px)", scale: 1 }}
-        exit={{ opacity: 0, filter: "blur(10px)", scale: 0.8 }}
-        transition={{ type: "spring", duration: 0.8 }}
+      <div
         className="fixed left-1/2 -translate-x-1/2 top-8 z-[999] flex items-center justify-between gap-4 rounded-[50px] border-[1px] border-solid bg-white px-2 py-1.5 shadow-xl shadow-black/5 dark:border-stone-700 dark:bg-stone-800 dark:shadow-none"
       >
         <section className="flex items-center gap-1.5">
           <LoadingSpinner />
           <p className="text-[12.5px] font-medium">{t("refreshing")}...</p>
         </section>
-      </m.div>
+      </div>
     </AnimatePresence>
   )
 }
@@ -281,7 +277,7 @@ function Overview() {
     return () => clearInterval(timer)
   }, [])
   return (
-    <section className={"mt-10 flex flex-col md:mt-16 header-timer"}>
+    <section className={"mt-6 flex flex-col md:mt-8 header-timer"}>
       <p className="text-base font-semibold">👋 {t("overview")}</p>
       <div className="flex items-center gap-1.5">
         <p className="text-sm font-medium opacity-50">{t("whereTheTimeIs")}</p>

src/pages/Server.tsx

@@ -274,7 +274,7 @@ export default function Servers() {
   })
 
   return (
-    <div className="mx-auto w-full max-w-5xl px-0">
+    <div className="mx-auto w-full max-w-7xl px-0">
       <ServerOverview
         total={totalServers}
         online={onlineServers}
@@ -284,7 +284,7 @@ export default function Servers() {
         upSpeed={upSpeed}
         downSpeed={downSpeed}
       />
-      <div className="flex mt-6 items-center justify-between gap-2 server-overview-controls">
+      <div className="flex mt-4 items-center justify-between gap-2 server-overview-controls">
         <section className="flex items-center gap-2 w-full overflow-hidden">
           <button
             onClick={() => {
@@ -394,7 +394,7 @@ export default function Servers() {
       {showServices === "1" && <ServiceTracker serverList={filteredServers} />}
       
       {/* 优化直接国家选择器 */}
-      <div className="mt-4">
+      <div className="mt-3">
         <DirectCountrySelect 
           countries={countryTabs.filter(tab => tab !== "All")}
           currentCountry={currentCountry}
@@ -402,7 +402,7 @@ export default function Servers() {
         />
       </div>
       
-      <section ref={containerRef} className="grid grid-cols-1 gap-4 md:grid-cols-3 mt-4 server-card-list">
+      <section ref={containerRef} className="grid grid-cols-1 gap-6 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 mt-4 server-card-list">
         {filteredServers.map((serverInfo) => {
           // 查找服务器所属的分组
           const serverGroup = groupData?.data?.find(