@@ 第1行： / 第1行： @@
 /* --- 1. 全局与布局 --- */
+body.page-Main_Page, body.page-首页 {
-/* 页面背景 (仅在主页生效) */
+     background-color: #eef3f7; /* 更柔和的浅色背景 */
-body.page-Main_Page, body.page-首页 { /* 确保样式只应用在首页 */
+     color: #333;
-     background-color: #1a232b; /* 深色太空背景 */
-     color: #e0e0e0;
 }
-/* 内容区域重置 (仅在主页生效) */
 body.page-Main_Page #content, body.page-首页 #content {
-     background: none;
+     background: none; border: none; box-shadow: none;
-    border: none;
-    box-shadow: none;
 }
-/* 首页网格容器 */
 .home-grid-container {
-     max-width: 1400px;
+     max-width: 1200px; margin: 20px auto; display: grid;
-    margin: 20px auto;
+     grid-template-columns: repeat(6, 1fr); gap: 15px;
-    display: grid;
+     font-family: sans-serif;
-    /* 定义网格为6列，fr单位代表按比例分配可用空间 */
-     grid-template-columns: repeat(6, 1fr);
-    gap: 15px; /* 网格间距 */
-     font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
 }
 /* --- 2. 卡片通用样式 --- */
-/* 首页卡片基础样式 */
 .home-card {
-     background-color: #2c3a47; /* 卡片背景色 */
+     background-color: #ffffff;
-     border-radius: 8px;
+     border-radius: 12px;
      padding: 20px;
-     border: 1px solid #4a5a6a;
+     border: 1px solid #d8e1e8;
-     transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
+     box-shadow: 0 4px 6px rgba(0,0,0,0.05);
-     display: flex;
+     display: flex; flex-direction: column;
-    flex-direction: column;
 }
-/* 卡片悬浮效果 */
-.home-card:hover {
-    transform: translateY(-3px);
-    box-shadow: 0 5px 15px rgba(52, 152, 219, 0.2);
-    border-color: #3498db;
-}
-/* 卡片内部元素 */
 .home-card .card-label {
-     font-size: 12px;
+     font-size: 12px; font-weight: bold; text-transform: uppercase;
-    font-weight: bold;
+     color: #5a738c; margin-bottom: 2px;
-    text-transform: uppercase;
-     color: #9ab;
-    margin-bottom: 5px;
 }
 .home-card .card-header {
-     font-size: 22px;
+     font-size: 24px; font-weight: bold; color: #1c364e; margin: 0 0 15px 0;
-    font-weight: bold;
-    color: #ffffff;
-    margin: 0 0 15px 0;
-}
-.home-card .card-header a {
-    color: inherit;
-    text-decoration: none;
-    transition: color 0.2s ease;
 }
+.home-card .card-header a { color: inherit; text-decoration: none; }
+.home-card .card-content { flex-grow: 1; font-size: 14px; line-height: 1.6; }
-.home-card .card-header a:hover {
+/* 网格跨度 */
-    color: #3498db;
-}
-.home-card .card-content {
-    flex-grow: 1; /* 内容区自动占据剩余空间 */
-    font-size: 14px;
-    line-height: 1.6;
-}
-/* 网格跨度控制 */
 .col-span-2 { grid-column: span 2; }
 .col-span-3 { grid-column: span 3; }
 .col-span-4 { grid-column: span 4; }
 .col-span-6 { grid-column: span 6; }
-.row-span-2 { grid-row: span 2; }
 /* --- 3. 特定模块样式 --- */
-/* 3.1 欢迎与搜索框 */
+/* 3.1 顶部搜索区域 */
-.home-search-card {
+.home-header {
-    /* 您可以在此设置背景图，如果不用图片则会显示纯色 */
+     background-color: #1c364e; /* 深蓝色背景 */
-    /* background: linear-gradient(rgba(0,0,0,0.4), rgba(0,0,0,0.4)), url('YOUR_BANNER_IMAGE.png') center center / cover no-repeat; */
-     background-color: #34495e;
-    padding: 30px 20px;
-    align-items: center;
-    justify-content: center;
-    text-align: center;
-}
-.home-search-card .search-title {
-    font-size: 32px;
-    font-weight: bold;
      color: #ffffff;
-    text-shadow: 1px 1px 3px rgba(0,0,0,0.5);
-    margin: 0 0 10px 0;
-}
-.home-search-card .inputbox { /* MediaWiki生成的搜索框容器 */
-    width: 90%;
-    max-width: 600px;
-    margin: 0 auto;
-}
-.home-search-card .inputbox-input {
-    padding: 12px 15px;
-    font-size: 16px;
-    border: 2px solid #3498db;
-    border-radius: 6px 0 0 6px;
-    outline: none;
-    color: #333; /* 输入文字颜色 */
-}
-.home-search-card .inputbox-button {
-    padding: 12px 20px;
-    font-size: 16px;
-    background-color: #3498db;
-    color: white;
-    font-weight: bold;
-    border: 2px solid #3498db;
-    border-left: none;
-    border-radius: 0 6px 6px 0;
-    cursor: pointer;
-    transition: background-color 0.2s ease;
-}
-.home-search-card .inputbox-button:hover {
-    background-color: #2980b9;
-}
-/* 3.2 快速导航按钮 */
-.card-button-grid {
-    display: grid;
-    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
-    gap: 10px;
-}
-.card-button {
-    display: block;
-    background-color: #3e5060;
-    color: #e0e0e0;
-    padding: 10px;
      text-align: center;
-     border-radius: 5px;
+     padding: 40px 20px;
-    text-decoration: none;
-    font-weight: bold;
-    transition: background-color 0.2s ease, color 0.2s ease;
-}
-.card-button:hover {
-    background-color: #3498db;
-    color: #ffffff;
 }
+.home-header-title { font-size: 36px; font-weight: bold; margin: 0; }
+.home-header-subtitle { font-size: 16px; color: #a9c1d9; margin: 5px 0 25px 0; }
-/* 3.3 当月生日角色列表 */
+.home-search {
-.birthday-character-list {
+     display: inline-flex; align-items: center;
-     display: flex;
+     background-color: #ffffff; color: #333;
-     flex-wrap: wrap;
+    border-radius: 25px; /* 圆角 */
-     gap: 15px;
+     padding: 8px 15px;
+    width: 100%; max-width: 500px;
+    border: 1px solid #d8e1e8;
+    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
+    cursor: text;
 }
+.home-search-icon { margin-right: 10px; }
+.home-search-text { color: #555; }
-.character-item {
+/* 3.2 图像导航按钮 (图4效果) */
-    display: flex;
+.image-button-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 10px; }
-    align-items: center;
+.image-button {
-    gap: 10px;
+     position: relative; display: block; height: 50px;
-     background-color: #3e5060;
+     border-radius: 8px; overflow: hidden;
-    padding: 8px;
+     color: white; text-decoration: none;
-     border-radius: 6px;
+     box-shadow: inset 0 0 10px rgba(0,0,0,0.5);
-     min-width: 180px;
-     flex-grow: 1; /* 让项目能自动填充空间 */
 }
+.image-button:hover .image-button-bg { transform: scale(1.05); }
-.character-item img {
+.image-button-bg {
-     border-radius: 50%;
+     position: absolute; top: 0; left: 0; width: 100%; height: 100%;
-     border: 2px solid #3498db;
+    background-size: cover; background-position: center;
-     background-color: #2c3a47;
+     transition: transform 0.3s ease;
+     filter: brightness(0.7);
 }
+.image-button-text {
-.character-item span {
+     position: relative; z-index: 2;
-     font-size: 14px;
+     display: flex; align-items: center; justify-content: center;
-     line-height: 1.3;
+    height: 100%; font-weight: bold; text-shadow: 1px 1px 3px rgba(0,0,0,0.7);
 }
-.character-item a {
+/* 3.3 官方链接按钮 (图3效果) */
-     color: #fff;
+.link-button-list { display: flex; flex-direction: column; gap: 10px; }
-     font-weight: bold;
+.link-button {
-     text-decoration: none;
+     display: block; background-color: #eef3f7;
+     padding: 12px 15px; border-radius: 8px;
+     text-decoration: none; font-weight: 500; color: #1c364e;
+    border: 1px solid #d8e1e8;
+    transition: background-color 0.2s ease, border-color 0.2s ease;
 }
+.link-button:hover { background-color: #e1eaf2; border-color: #c1d0de; }
+.link-button img { vertical-align: middle; margin-left: 5px; }
-.character-item small {
+/* 修复内容区域的显示问题 */
-    color: #9ab;
+.card-content .error { display: none; } /* 隐藏模板不存在时的错误信息，更美观 */
-    font-size: 12px;
+.card-content .new { color: #cc0000; } /* 让不存在的模板链接显示为红色 */
-}
-/* 3.4 官方链接 */
-.official-links-grid {
-    display: grid;
-    grid-template-columns: 1fr 1fr;
-    gap: 10px;
-}
-.official-link-button {
-    display: block;
-    background-color: #3e5060;
-    color: #e0e0e0;
-    padding: 10px;
-    text-align: center;
-    border-radius: 5px;
-    text-decoration: none;
-    transition: background-color 0.2s ease;
-    font-weight: bold;
-}
-.official-link-button:hover {
-    background-color: #3498db;
-    color: #ffffff;
-}
-/* --- 4. 响应式设计 (可选，但强烈推荐) --- */
-/* 当屏幕宽度小于900px时，网格变为3列 */
-@media (max-width: 900px) {
-    .home-grid-container {
-        grid-template-columns: repeat(3, 1fr);
-    }
-}
-/* 当屏幕宽度小于600px时，网格变为1列 */
-@media (max-width: 600px) {
-    .home-grid-container {
-        grid-template-columns: 1fr;
-    }
-    /* 在单列视图下，所有卡片都应该横跨整列，所以重置跨度 */
-    .home-card {
-        grid-column: span 1 !important;
-        grid-row: auto !important;
-    }
-}