/* =============================================================
   云境次元 · 极简二次元 + 毛玻璃拟态 个人导航主页
   ---------------------------------------------------------------
   设计基调：低饱和粉紫 / 通透 / 柔和 / 有呼吸感
   - 全部颜色走 CSS 变量(:root)，改风格只需动这一处
   - 深浅色只需覆盖 :root 变量（见 body.dark）
   - 背景用 CSS 渐变模拟壁纸；如需换成真实壁纸图，见下方注释
   ============================================================= */

:root {
  /* ---- 背景（低饱和粉紫渐变） ---- */
  --bg-a: #e8d5f5;   /* 顶部淡紫 */
  --bg-b: #d5e5f7;   /* 底部淡蓝 */

  /* ---- 毛玻璃卡片 ---- */
  --glass: rgba(255, 255, 255, 0.60);       /* 卡片底 */
  --glass-strong: rgba(255, 255, 255, 0.85);/* 高亮卡片底 */
  --glass-border: rgba(255, 255, 255, 0.80);/* 卡片描边 */
  --blur: 12px;                             /* 背景模糊强度 */

  /* ---- 文字 ---- */
  --text-main: #2d3436;
  --text-sub: #636e72;
  --text-light: #9aa5ad;

  /* ---- 强调色（淡紫），按钮 / 链接 hover ---- */
  --accent: #a29bfe;
  --accent-strong: #7c6cf6;
  --accent-soft: rgba(162, 155, 254, 0.16);
  --accent-grad: linear-gradient(135deg, #b6a6ff 0%, #8e7cf0 100%);

  /* ---- 圆角 ---- */
  --radius-sm: 10px;
  --radius-md: 18px;
  --radius-lg: 26px;
  --radius-pill: 999px;

  /* ---- 阴影（柔和，低饱和） ---- */
  --shadow-sm: 0 2px 10px rgba(130, 120, 180, 0.08);
  --shadow-md: 0 10px 30px rgba(130, 120, 180, 0.12);
  --shadow-lg: 0 18px 44px rgba(130, 120, 180, 0.16);
  --shadow-accent: 0 10px 26px rgba(162, 155, 254, 0.35);

  /* ---- 樱花 ---- */
  --sakura-color: rgba(238, 148, 186, 0.75);

  --font-size: 14px;
}

/* 深色模式：仅重定义变量，实现"深蓝紫渐变壁纸氛围" */
body.dark {
  --bg-a: #191534;   /* 顶部深紫 */
  --bg-b: #1f2547;   /* 底部深蓝 */

  --glass: rgba(34, 32, 60, 0.55);
  --glass-strong: rgba(50, 46, 86, 0.70);
  --glass-border: rgba(255, 255, 255, 0.14);

  --text-main: #eceaf7;
  --text-sub: #b9b4d8;
  --text-light: #7d77a0;

  --accent: #a89bff;
  --accent-strong: #c0b6ff;
  --accent-soft: rgba(168, 155, 255, 0.20);
  --accent-grad: linear-gradient(135deg, #a89bff 0%, #7c6cf6 100%);

  --shadow-sm: 0 2px 10px rgba(0, 0, 0, 0.30);
  --shadow-md: 0 10px 30px rgba(0, 0, 0, 0.38);
  --shadow-lg: 0 18px 44px rgba(0, 0, 0, 0.46);
  --shadow-accent: 0 10px 26px rgba(168, 155, 255, 0.35);

  --sakura-color: rgba(190, 170, 230, 0.55);
}

/* =============================================================
   基础
   ============================================================= */
* { margin: 0; padding: 0; box-sizing: border-box; }
a { text-decoration: none; color: inherit; }
html { scroll-behavior: smooth; }

/* 页面加载 0.5s 渐显淡入 */
body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, "PingFang SC", "Microsoft YaHei", sans-serif;
  font-size: var(--font-size);
  color: var(--text-main);
  line-height: 1.7;
  min-height: 100vh;
  transition: color 0.3s, background 0.3s;
  background-color: var(--bg-b);
  animation: fadeIn 0.5s ease both;
}
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: none; }
}

/* =============================================================
   背景壁纸：用 CSS 渐变 + 柔和光斑模拟动漫 / 风景壁纸氛围
   ----------------------------------------------------------------
   ✍ 以后想把背景换成一张本地壁纸图：
     在 body 的 background-image 末尾追加 ->
     url("assets/img/wallpaper.jpg") 并设
     background-size: cover; background-position: center;
     （删除或保留渐变均可，保留则图片叠在渐变上更柔和）
   ============================================================= */
body {
  background-image:
    radial-gradient(900px 600px at 82% 8%, rgba(255, 255, 255, 0.65), transparent 60%),
    radial-gradient(700px 500px at 12% 18%, rgba(190, 160, 255, 0.35), transparent 60%),
    radial-gradient(900px 640px at 88% 92%, rgba(255, 160, 205, 0.30), transparent 62%),
    radial-gradient(640px 480px at 6% 96%, rgba(150, 200, 255, 0.32), transparent 60%),
    linear-gradient(160deg, rgba(255, 245, 250, 0.45) 0%, rgba(240, 245, 255, 0.45) 100%),
    url("assets/img/wallpaper.jpg");
  background-color: var(--bg-b);
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
}
body.dark {
  background-image:
    radial-gradient(900px 600px at 82% 8%, rgba(120, 100, 220, 0.25), transparent 60%),
    radial-gradient(700px 500px at 12% 18%, rgba(90, 70, 190, 0.28), transparent 60%),
    radial-gradient(900px 640px at 88% 92%, rgba(60, 90, 200, 0.22), transparent 62%),
    radial-gradient(640px 480px at 6% 96%, rgba(120, 60, 180, 0.24), transparent 60%),
    linear-gradient(160deg, rgba(30, 25, 50, 0.72) 0%, rgba(20, 25, 45, 0.72) 100%),
    url("assets/img/wallpaper.jpg");
}

/* 樱花层：绝对铺满全屏，不阻挡交互、不遮挡内容 */
#sakuraLayer {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
}
#sakuraLayer .petal {
  position: absolute;
  top: 0;
  left: var(--petal-x, 10%);
  color: var(--sakura-color);
  user-select: none;
  pointer-events: none;
  will-change: transform, opacity;
  animation: petalFall var(--petal-dur, 12s) linear var(--petal-delay, 0s) infinite;
}
/* 自上而下飘落 + 左右摆动 + 轻柔旋转，出底后循环（infinite） */
@keyframes petalFall {
  0%   { transform: translate3d(0, -8vh, 0) rotate(0deg); }
  25%  { transform: translate3d(var(--sway-1, 40px), 24vh, 0) rotate(-25deg); }
  50%  { transform: translate3d(0, 50vh, 0) rotate(20deg); }
  75%  { transform: translate3d(var(--sway-2, -40px), 76vh, 0) rotate(-15deg); }
  100% { transform: translate3d(0, 110vh, 0) rotate(0deg); }
}

/* 主内容容器：盖在樱花 / 背景之上 */
.page {
  position: relative;
  z-index: 1;
  max-width: 1080px;
  margin: 0 auto;
  padding: 56px 24px 48px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* =============================================================
   右上角主题切换
   ============================================================= */
.theme-btn {
  position: fixed;
  top: 18px;
  right: 20px;
  z-index: 20;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid var(--glass-border);
  background: var(--glass);
  backdrop-filter: blur(var(--blur));
  -webkit-backdrop-filter: blur(var(--blur));
  color: var(--text-main);
  font-size: 18px;
  cursor: pointer;
  box-shadow: var(--shadow-sm);
  transition: transform 0.25s, box-shadow 0.25s, background 0.3s;
}
.theme-btn:hover {
  transform: translateY(-2px) rotate(12deg);
  box-shadow: var(--shadow-accent);
}

/* =============================================================
   顶部个人信息区
   ============================================================= */
.profile {
  text-align: center;
  margin-bottom: 36px;
}
/* 圆形头像：使用 assets/img/avatar.png */
.avatar {
  width: 96px;
  height: 96px;
  margin: 0 auto 22px;
  border-radius: 50%;
  object-fit: cover;
  background: var(--accent-grad);
  box-shadow: var(--shadow-accent), inset 0 0 0 5px rgba(255, 255, 255, 0.35);
}
.name {
  font-size: 30px;
  font-weight: 800;
  letter-spacing: 3px;
  line-height: 1.3;
  margin-bottom: 10px;
}
.kaomoji {
  font-size: 20px;
  font-weight: 600;
  letter-spacing: 0;
  color: var(--accent);
  margin-left: 6px;
}
.slogan {
  color: var(--text-sub);
  font-size: 14px;
  letter-spacing: 2px;
}

/* =============================================================
   搜索区（搜索引擎切换 + 输入框 + 今日一言）
   ============================================================= */
.search-zone {
  width: 100%;
  max-width: 600px;
  margin-bottom: 40px;
}
/* 今日一言：衬在搜索框上方，柔和小字 */
.quote {
  text-align: center;
  color: var(--text-sub);
  font-size: 13px;
  letter-spacing: 1px;
  min-height: 24px;
  margin-bottom: 16px;
  font-style: italic;
  opacity: 0.9;
}
.searchwrap { display: flex; flex-direction: column; gap: 14px; }

/* 引擎切换按钮组 */
.engines {
  display: flex;
  justify-content: center;
  gap: 10px;
}
.engines button {
  border: 1px solid var(--glass-border);
  background: var(--glass);
  backdrop-filter: blur(var(--blur));
  -webkit-backdrop-filter: blur(var(--blur));
  color: var(--text-sub);
  padding: 7px 20px;
  border-radius: var(--radius-pill);
  font-size: 13px;
  cursor: pointer;
  box-shadow: var(--shadow-sm);
  transition: all 0.25s;
}
.engines button:hover { color: var(--accent); transform: translateY(-2px); }
.engines button.active {
  background: var(--accent);
  border-color: transparent;
  color: #fff;
  font-weight: 600;
  box-shadow: var(--shadow-accent);
}

/* 毛玻璃搜索栏 */
.searchbar {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--glass);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-pill);
  padding: 7px 8px 7px 20px;
  backdrop-filter: blur(var(--blur));
  -webkit-backdrop-filter: blur(var(--blur));
  box-shadow: var(--shadow-md);
  transition: box-shadow 0.3s, border-color 0.3s;
}
.searchbar:focus-within {
  border-color: var(--accent);
  box-shadow: var(--shadow-accent);
}
.search-ico {
  color: var(--text-light);
  font-size: 20px;
  transform: rotate(-15deg);
}
.searchbar input {
  flex: 1;
  border: none;
  outline: none;
  background: transparent;
  color: var(--text-main);
  font-size: 15px;
  padding: 8px 0;
  min-width: 0;
}
.searchbar input::placeholder { color: var(--text-light); }
.go-btn {
  border: none;
  background: var(--accent-grad);
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  padding: 10px 24px;
  border-radius: var(--radius-pill);
  cursor: pointer;
  box-shadow: var(--shadow-accent);
  transition: transform 0.2s, filter 0.2s;
}
.go-btn:hover { transform: translateY(-2px); filter: brightness(1.05); }

/* =============================================================
   分类胶囊标签
   ============================================================= */
.cat-tabs {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  margin-bottom: 32px;
}
.cat-tabs button {
  border: 1px solid var(--glass-border);
  background: var(--glass);
  backdrop-filter: blur(var(--blur));
  -webkit-backdrop-filter: blur(var(--blur));
  color: var(--text-sub);
  padding: 9px 22px;
  border-radius: var(--radius-pill);
  font-size: 14px;
  cursor: pointer;
  box-shadow: var(--shadow-sm);
  transition: all 0.25s;
}
.cat-tabs button:hover { color: var(--accent); transform: translateY(-2px); }
.cat-tabs button.active {
  background: var(--accent);
  border-color: transparent;
  color: #fff;
  font-weight: 600;
  box-shadow: var(--shadow-accent);
}

/* =============================================================
   资源卡片网格：桌面 4-5 列 / 平板 3 列 / 手机 2 列
   ============================================================= */
.grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
  width: 100%;
  margin-bottom: 40px;
}

/* 卡片 = 毛玻璃小卡：图标 + 名 + 一行简介 */
.card {
  background: var(--glass);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-md);
  padding: 20px 18px;
  backdrop-filter: blur(var(--blur));
  -webkit-backdrop-filter: blur(var(--blur));
  box-shadow: var(--shadow-sm);
  display: flex;
  flex-direction: column;
  gap: 7px;
  transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease, background 0.3s;
}
.card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
  border-color: var(--accent);
  background: var(--glass-strong);
}
.card .ico { font-size: 28px; line-height: 1; }
.card .cname {
  font-size: 14.5px;
  font-weight: 700;
  color: var(--text-main);
}
.card .cdesc {
  font-size: 12px;
  color: var(--text-sub);
  line-height: 1.6;
}

/* 照片卡片（分类里配了 img 的卡片）：图片铺满顶部，形成照片墙 */
.card-photo {
  padding: 0;
  overflow: hidden;
}
.card-photo .ico {
  display: block;
  width: 100%;
  height: 132px;
  object-fit: cover;
  border-radius: var(--radius-md) var(--radius-md) 0 0;
  background: rgba(127,127,127,.12);
}
.card-photo .cname {
  padding: 11px 14px 0;
}
.card-photo .cdesc {
  padding: 4px 14px 14px;
}

/* 图片灯箱：点击照片弹出大图 */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 999;
  background: rgba(0, 0, 0, .82);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  cursor: zoom-out;
}
.lightbox.show { display: flex; }
.lightbox .lb-img {
  max-width: 88vw;
  max-height: 76vh;
  border-radius: 12px;
  object-fit: contain;
  box-shadow: 0 20px 60px rgba(0, 0, 0, .55);
}
.lightbox .lb-cap {
  color: #fff;
  font-size: 14px;
  opacity: .85;
}
.lightbox .lb-close {
  position: absolute;
  top: 20px;
  right: 30px;
  font-size: 38px;
  line-height: 1;
  color: #fff;
  opacity: .75;
  cursor: pointer;
}
.lightbox .lb-close:hover { opacity: 1; }

/* 空分类占位提示 */
.empty-tip {
  grid-column: 1 / -1;
  text-align: center;
  color: var(--text-light);
  padding: 30px 0;
  font-size: 13px;
}

/* =============================================================
   底部：社交 + 版权
   ============================================================= */
.footer {
  width: 100%;
  text-align: center;
  padding-top: 12px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: center;
}
.social {
  display: flex;
  gap: 26px;
  justify-content: center;
}
.social a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--text-sub);
  font-size: 13.5px;
  padding: 8px 18px;
  border-radius: var(--radius-pill);
  background: var(--glass);
  border: 1px solid var(--glass-border);
  backdrop-filter: blur(var(--blur));
  -webkit-backdrop-filter: blur(var(--blur));
  box-shadow: var(--shadow-sm);
  transition: all 0.25s;
}
.social a:hover {
  color: var(--accent);
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}
.bili-ico { font-size: 15px; }
.copyright {
  color: var(--text-light);
  font-size: 12px;
  letter-spacing: 1px;
}

/* =============================================================
   响应式
   ============================================================= */
@media (max-width: 1024px) {
  .grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 640px) {
  .page { padding: 40px 16px 36px; }
  .grid { grid-template-columns: repeat(2, 1fr); gap: 14px; }
  .name { font-size: 24px; letter-spacing: 2px; }
  .avatar { width: 80px; height: 80px; object-fit: cover; }
  .go-btn { padding: 10px 18px; }
}