/* =========================================================
   风格二 · 经典毛玻璃（原站视觉）
   作用域：html.theme-classic
   只换皮：配色 / 材质 / 背景，不改 DOM、不改内容、不改交互
   由侧栏「一览」右侧的小按钮切换，选择记在 localStorage
   ========================================================= */

/* ---------- 调色板：雾青 + 中性灰，方角毛玻璃 ---------- */
html.theme-classic {
  --bg: #13151c;
  --panel: rgba(255, 255, 255, 0.05);
  --panel-2: rgba(255, 255, 255, 0.08);
  --line: rgba(255, 255, 255, 0.09);
  --line-strong: rgba(255, 255, 255, 0.16);
  --text: #d5dde6;
  --muted: #8d98a6;

  /* 三色统一成同一个雾青，让所有渐变退化为纯色 */
  --c1: #7fd6c0;
  --c2: #7fd6c0;
  --c3: #7fd6c0;
  --accent: #7fd6c0;
  --grad: linear-gradient(100deg, #7fd6c0 0%, #7fd6c0 100%);

  --blur: blur(22px) saturate(150%);
}

/* =========================================================
   背景：关掉星海，换成模糊压暗的背景图
   ========================================================= */
/* 星海画布不隐藏、不改尺寸，只压到背景图下面一层（等于看不见） */
html.theme-classic #stars { z-index: -4; }

html.theme-classic body::before {
  content: "";
  position: fixed;
  inset: -40px;                       /* 外扩，防止模糊边缘露边 */
  z-index: -3;
  background: url("../bg.jpg") 35% 20% / 100% auto no-repeat;
  filter: blur(42px) brightness(0.55) saturate(0.9);
}

html.theme-classic .veil {
  background:
    radial-gradient(900px 520px at 12% -8%, rgba(127, 214, 192, 0.10), transparent 62%),
    radial-gradient(820px 460px at 108% 108%, rgba(126, 145, 255, 0.10), transparent 60%),
    linear-gradient(165deg, rgba(19, 21, 28, 0.82), rgba(22, 25, 33, 0.90));
}

/* =========================================================
   顶栏 / 侧栏
   ========================================================= */
html.theme-classic .topbar { background: var(--panel); }
html.theme-classic .topbar::after { opacity: 0.35; }
html.theme-classic .sidebar { background: var(--panel); }
html.theme-classic .sidebar-head { color: var(--c1); }
html.theme-classic .sidebar-foot { color: var(--muted); }

/* 头像：形状 / 尺寸 / 内边距一律不动，只跟随 --line-strong 变色 */
html.theme-classic .profile-name { color: #f0f4f9; }
html.theme-classic .profile-role { color: var(--c1); }

html.theme-classic .topbar-socials a:hover {
  color: var(--c1);
  border-color: var(--c1);
  background: rgba(127, 214, 192, 0.10);
}

/* =========================================================
   排版元素
   ========================================================= */
html.theme-classic .page-hero-title { color: #f0f4f9; }
html.theme-classic .page-hero-title .hl { color: var(--c1); }
/* 名字渐变在经典风格下也保留（这条只是为了不被上面的 color 覆盖掉） */
html.theme-classic .page-hero-title .hl.hl-name { color: transparent; }
html.theme-classic .block-title { color: #9fe8d4; }
html.theme-classic .block-title .tag {
  color: var(--c1);
  border: 1px solid var(--line-strong);
  background: var(--panel);
}
html.theme-classic .skill-tag {
  color: var(--c1);
  border-color: var(--line-strong);
  background: var(--panel);
}
html.theme-classic .skill-tag:hover {
  color: var(--c1);
  border-color: var(--line-strong);
  background: rgba(127, 214, 192, 0.12);
}
html.theme-classic .contact-chip {
  color: var(--muted);
  border-color: var(--line);
}
html.theme-classic .contact-chip:hover {
  color: var(--c1);
  border-color: var(--c1);
}

/* =========================================================
   成分卡片
   ========================================================= */
html.theme-classic .fav-card {
  border-color: var(--line);
  background: var(--panel);
}
html.theme-classic .fav-card:hover {
  border-color: var(--line-strong);
  background: rgba(255, 255, 255, 0.07);
}
html.theme-classic .fav-icon {
  color: var(--c1);
  background: var(--panel-2);
}
html.theme-classic .fav-body h4 { color: #f0f4f9; }
html.theme-classic .fav-tag {
  color: var(--c1);
  border-color: var(--line-strong);
  background: rgba(127, 214, 192, 0.08);
}

/* =========================================================
   画廊
   ========================================================= */
html.theme-classic .g-item {
  border-color: var(--line);
  background: var(--panel);
}
html.theme-classic .g-item:hover { border-color: var(--line-strong); }
html.theme-classic .g-item figcaption b { color: #fff; }
html.theme-classic .g-item figcaption span { color: var(--c1); }

/* =========================================================
   作品详情页
   ========================================================= */
/* 标题下的小条保留，只随 --c1 / --c2 变色 */
html.theme-classic .work-title { color: #f0f4f9; }

html.theme-classic .chip {
  color: var(--c1);
  border-color: var(--line-strong);
  background: var(--panel);
}
html.theme-classic .chip:hover { border-color: var(--c1); }

html.theme-classic .feat-list li b { color: var(--text); font-weight: 600; }

html.theme-classic .btn-primary {
  color: var(--c1);
  background: rgba(127, 214, 192, 0.08);
  border-color: var(--c1);
}
html.theme-classic .btn-primary:hover {
  color: #10201b;
  background: var(--c1);
  border-color: var(--c1);
}
html.theme-classic .btn-outline { border-color: var(--line-strong); color: var(--text); }
html.theme-classic .btn-outline:hover { border-color: var(--c1); color: var(--c1); }

html.theme-classic .shot { background: var(--panel); border-color: var(--line); }
html.theme-classic .shot:hover { border-color: var(--line-strong); }

/* =========================================================
   侧栏导航
   ========================================================= */
html.theme-classic .work-item { color: var(--muted); }
html.theme-classic .work-item .idx { color: rgba(255, 255, 255, 0.16); }
html.theme-classic .work-item:hover {
  color: var(--text);
  background: rgba(255, 255, 255, 0.05);
}
html.theme-classic .work-item.active {
  color: var(--c1);
  border-left-color: var(--c1);
  background: rgba(127, 214, 192, 0.10);
}
html.theme-classic .work-item.active .idx { color: var(--c1); }

/* 滚动条回到中性色 */
html.theme-classic .main::-webkit-scrollbar-thumb { background: var(--line-strong); }

/* 灯箱 */
html.theme-classic .lightbox { background: rgba(10, 12, 17, 0.88); }
html.theme-classic .lightbox img { border-color: var(--line-strong); }
html.theme-classic .lightbox-caption {
  color: var(--muted);
  border-color: var(--line);
  background: var(--panel);
}

/* 本文件只改「颜色 / 背景 / 材质」，
   不改任何尺寸、形状、间距、显示与否，也不改动效。 */