* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: "Microsoft Yahei", system-ui, -apple-system, sans-serif;
}
:root {
  --bg: #f6f7fb;
  --card: #ffffff;
  --card-shadow: 0 2px 12px rgba(150, 140, 220, 0.08);
  --card-shadow-hover: 0 6px 20px rgba(150, 140, 220, 0.15);
  --text-main: #1e2134;
  --text-sub: #747a9c;
  --border: #e2e6f7;
  --primary: #9d86f0;
  --primary-light: #c9bfff;
  --hover-bg: #f2eeff;
  --radius-sm: 10px;
  --radius-md: 14px;
  --radius-lg: 24px;
  --transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
html.dark {
  /* 深色模式改为纯黑色背景，去掉偏蓝底色 */
  --bg: #000000;
  --card: #1a1a1a;
  --card-shadow: 0 2px 12px rgba(255, 255, 255, 0.08);
  --card-shadow-hover: 0 6px 22px rgba(255, 255, 255, 0.12);
  --text-main: #e9ebf8;
  --text-sub: #949bbf;
  --border: #2c2c2c;
  --primary: #b49eff;
  --primary-light: #7b61d8;
  --hover-bg: #252525;
}

body {
  background: var(--bg);
  color: var(--text-main);
  min-height: 100vh;
  /* 把720改成900，内容变宽，左右边距直接收窄 */
  padding: 28px max(16px, calc(50vw - 1050px));
  transition: var(--transition);
}

/* 头部玻璃质感卡片 */
.header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 16px 20px;
  background: var(--card);
  border-radius: var(--radius-md);
  box-shadow: var(--card-shadow);
  border: 1px solid var(--border);
  margin-bottom: 30px;
}
.logo {
  display: flex;
  align-items: center;
  gap: 12px;
}
.logo h1 {
  font-size: 24px;
  font-weight: 600;
  color: var(--primary);
  letter-spacing: 0.5px;
}
.logo span {
  font-size: 13px;
  color: var(--text-sub);
}
.top-right {
  display: flex;
  gap: 12px;
  align-items: center;
}
#theme {
  padding: 8px 18px;
  border: 1px solid var(--border);
  background: transparent;
  color: var(--text-main);
  border-radius: var(--radius-lg);
  cursor: pointer;
  font-size: 14px;
  transition: var(--transition);
}
#theme:hover {
  background: var(--hover-bg);
  border-color: var(--primary);
}
.desc-text {
  color: var(--text-sub);
  font-size: 13px;
  margin-bottom: 26px;
  padding-left: 4px;
  letter-spacing: 0.3px;
}
/* 分类模块 */
.category {
  margin-bottom: 34px;
}
.category-title {
  font-size: 17px;
  font-weight: 500;
  margin-bottom: 16px;
  display: flex;
  align-items: center;
  gap: 8px;
  position: relative;
  padding-left: 12px;
}
.category-title::before {
  content: "";
  width: 4px;
  height: 18px;
  background: linear-gradient(180deg, var(--primary), var(--primary-light));
  border-radius: 4px;
}
/* 链接卡片网格 */
.link-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(136px, 1fr));
  gap: 12px;
}
.link-item a {
  display: block;
  padding: 12px 14px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  text-decoration: none;
  color: var(--text-main);
  font-size: 14px;
  font-weight: 400;
  box-shadow: var(--card-shadow);
  transition: var(--transition);
}
.link-item a:hover {
  transform: translateY(-4px);
  background: var(--hover-bg);
  border-color: var(--primary);
  box-shadow: var(--card-shadow-hover);
}
footer {
  margin-top: 90px;
  text-align: center;
  color: var(--text-sub);
  font-size: 12px;
  padding-top: 24px;
  border-top: 1px solid var(--border);
  background: linear-gradient(to top, transparent, rgba(157, 134, 240, 0.04));
  padding-bottom: 20px;
}
#maomao {
    position: fixed;
    bottom: 40px;
    right: -5px;
    width: 57px;
    height: 70px;
    background-image: url(https://cdn.jsdelivr.net/gh/muzihuaner/huancdn/img/20210808215127.svg);
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    transition: background 0.3s;
    cursor: pointer;
    z-index: 999;
}
#maomao:hover {
    background-position: 60px 50%;
}

.notice-card {
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 10px;
  margin: 16px 0 20px;
  color: var(--text-main);
  transition: all 0.3s ease;
  /* 取消整体内边距，拆分给头部和内容 */
  padding: 0;
}
/* 标题区域：上下内边距，左右无缩进 */
.notice-head {
  padding: 16px 24px 10px 24px;
}
.notice-title {
  font-size: clamp(16px, 2vw, 22px);
  text-align: center;
  margin: 0;
  font-weight: 500;
}
/* 分割线：100%铺满卡片，无任何边距 */
.notice-divider {
  width: 100%;
  height: 1px;
  background: var(--border);
}
/* 正文区域：保留你原来左侧60px大留白 */
.notice-content-wrap {
  padding: 12px 24px 16px 60px;
}
.notice-content p {
  font-size: clamp(12px, 1.4vw, 15px);
  line-height: 1.45;
  margin: 4px 0;
}

/* 主题按钮图标样式 */
#theme {
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  padding: 0;
}
.icon-sun {
  display: block;
}
.icon-moon {
  display: none;
}
html.dark .icon-sun {
  display: none;
}
html.dark .icon-moon {
  display: block;
}

/* 横幅图片卡片 */
.banner-card {
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 10px;
  margin: 16px 0;
  overflow: hidden;
  width: 100%;
}
.banner-img {
  width: 100%;
  height: 200px;
  display: block;
  object-fit: cover;
  object-position: center;
}

/* 深色模式下卡片颜色 匹配截图黑底深灰卡片 */
html.dark .notice-card,
html.dark .friend-card,
html.dark .more-wrap-card,
html.dark .banner-card {
  background: #1A1A1A;
  border: 1px solid #333;
}
html.dark body {
  background: #000;
}
html.dark .notice-divider, 
html.dark .more-divider {
  background: #444;
}

/* 浅色模式卡片阴影 */
html:not(.dark) .notice-card,
html:not(.dark) .friend-card,
html:not(.dark) .more-wrap-card,
html:not(.dark) .banner-card {
  box-shadow: 0 2px 12px rgba(0,0,0,0.08);
}
/* hover加深阴影 */
html:not(.dark) .notice-card:hover,
html:not(.dark) .friend-card:hover,
html:not(.dark) .more-wrap-card:hover,
html:not(.dark) .banner-card:hover {
  box-shadow: 0 6px 20px rgba(0,0,0,0.12);
}