/* ============================================================
   Homepage 自定义样式 —— 小清新风（清新 · 柔和 · 通透）
   背景图取自 mrzym.top 首页（海边黄昏咖啡屋，2560×1440）
   配色取自 mrzym.top 实际用色：#49b1f5 天蓝 / #cfebf3 / #efbcda / #74ebd5
   配主题切换 + 白天黑夜开关（custom.js）
   ============================================================ */

/* ---------- 小清新配色变量（浅色模式） ---------- */
:root {
  --fx-accent: #49b1f5;
  --fx-accent-soft: #aadafa;
  --fx-accent-deep: #2b96dc;
  --fx-pink: #efbcda;
  --fx-mint: #74ebd5;
  --fx-periwinkle: #9face6;
  --fx-yellow: #f5c518;

  --fx-card-bg: rgba(255, 255, 255, 0.72);
  --fx-card-bg-hover: rgba(255, 255, 255, 0.86);
  --fx-card-border: rgba(255, 255, 255, 0.9);
  --fx-text: #303030;
  --fx-text-sub: #575656;
  --fx-title: #4c4948;
  --fx-shadow: 0 6px 20px rgba(73, 177, 245, 0.14);
  --fx-shadow-hover: 0 12px 30px rgba(73, 177, 245, 0.24);
}

/* ---------- 深色模式 ---------- */
html.dark {
  --fx-card-bg: rgba(42, 48, 58, 0.72);
  --fx-card-bg-hover: rgba(52, 60, 72, 0.86);
  --fx-card-border: rgba(255, 255, 255, 0.16);
  --fx-text: #e8eaed;
  --fx-text-sub: #b8bcc4;
  --fx-title: #f0f2f5;
  --fx-shadow: 0 6px 20px rgba(0, 0, 0, 0.28);
  --fx-shadow-hover: 0 12px 30px rgba(0, 0, 0, 0.38);
}

/* ---------- 背景层：自建固定层，完全脱离 Homepage 的 DOM 结构 ----------
   渐变层已设为全透明（rgba(...,0)），直接显示原图，不加任何遮罩。
   浅色模式仅极轻微提亮，保证卡片文字可读。 */
html, body {
  min-height: 100%;
}
html {
  background-color: #dceef7 !important;
}
body {
  background: transparent !important;
  color: var(--fx-text) !important;
  font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Hiragino Sans GB",
               "Microsoft YaHei", "Segoe UI", sans-serif;
}

/* 固定背景层（body::before 在内容之下） */
body::before {
  content: "";
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: -1;
  background-color: #dceef7;
  background-image: linear-gradient(rgba(255, 255, 255, 0), rgba(255, 255, 255, 0)),
                    url("/images/home-bg.webp");
  background-size: cover;
  background-position: center top;
  background-repeat: no-repeat;
}

/* 深色模式：背景层压暗，保证文字可读 */
html.dark body::before {
  background-color: #16202b;
  background-image: linear-gradient(rgba(10, 14, 22, 0.5), rgba(10, 14, 22, 0.62)),
                    url("/images/home-bg.webp");
}

/* 若 Homepage 原生背景层存在，让位给它 */
body:has(#background)::before {
  display: none;
}

/* ---------- 隐藏版本号（settings 的 hideVersion 不生效时的兜底） ---------- */
#version,
#footer [class*="version"] {
  display: none !important;
}

/* ---------- 顶部标题：清透渐变 ---------- */
header h1,
h1[class*="title"] {
  background: linear-gradient(96deg, var(--fx-accent) 0%, var(--fx-periwinkle) 55%, var(--fx-pink) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent !important;
  filter: drop-shadow(0 2px 6px rgba(255, 255, 255, 0.6));
}
html.dark header h1,
html.dark h1[class*="title"] {
  filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.5));
}

/* ---------- 服务卡片：小清新玻璃质感 ---------- */
.service-card,
a[class*="service"],
div[class*="service"] {
  background: var(--fx-card-bg) !important;
  border: 1px solid var(--fx-card-border) !important;
  border-radius: 18px !important;
  backdrop-filter: blur(14px) saturate(120%);
  -webkit-backdrop-filter: blur(14px) saturate(120%);
  box-shadow: var(--fx-shadow);
  transition: transform .25s ease, background .25s ease,
              border-color .25s ease, box-shadow .25s ease !important;
}

.service-card:hover,
a[class*="service"]:hover,
div[class*="service"]:hover {
  transform: translateY(-4px);
  background: var(--fx-card-bg-hover) !important;
  border-color: var(--fx-accent-soft) !important;
  box-shadow: var(--fx-shadow-hover);
}

/* 卡片图标：hover 轻微放大 */
.service-card svg,
a[class*="service"] svg,
div[class*="service"] img {
  transition: transform .3s ease;
}
.service-card:hover svg,
a[class*="service"]:hover svg,
div[class*="service"]:hover img {
  transform: scale(1.08);
}

/* ---------- 分组标题：小清新下划线 ---------- */
.group h2,
section[class*="group"] h2 {
  color: var(--fx-title) !important;
  text-shadow: 0 1px 3px rgba(255, 255, 255, 0.55);
}
html.dark .group h2,
html.dark section[class*="group"] h2 {
  text-shadow: none;
}
.group h2::after,
section[class*="group"] h2::after {
  content: "";
  display: block;
  width: 44px;
  height: 3px;
  margin-top: 7px;
  border-radius: 3px;
  background: linear-gradient(90deg, var(--fx-accent), var(--fx-mint));
}

/* ---------- 顶部小部件：清透玻璃条 ---------- */
[class*="widget"],
.widget,
[class*="resources"] {
  background: var(--fx-card-bg) !important;
  border: 1px solid var(--fx-card-border) !important;
  border-radius: 16px !important;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: var(--fx-shadow);
}

/* ---------- 搜索框 ---------- */
input[type="text"],
input[type="search"] {
  border-radius: 20px !important;
  border: 1px solid var(--fx-card-border) !important;
  background: var(--fx-card-bg) !important;
  color: var(--fx-text) !important;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  transition: border-color .2s ease, box-shadow .2s ease !important;
}
input[type="text"]:focus,
input[type="search"]:focus {
  border-color: var(--fx-accent) !important;
  box-shadow: 0 0 0 3px rgba(73, 177, 245, 0.22) !important;
}

/* ---------- 滚动条 ---------- */
::-webkit-scrollbar { width: 9px; height: 9px; }
::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, var(--fx-accent-soft), var(--fx-accent));
  border-radius: 8px;
}
::-webkit-scrollbar-track { background: transparent; }

/* ============================================================
   主题切换悬浮按钮（custom.js 注入）
   ============================================================ */
.fx-panel {
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 10px;
  font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", sans-serif;
}

/* 主按钮：小清新圆形渐变 */
.fx-fab {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.75);
  cursor: pointer;
  background: linear-gradient(135deg, var(--fx-accent) 0%, var(--fx-periwinkle) 100%);
  box-shadow: 0 6px 18px rgba(73, 177, 245, 0.38);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 21px;
  transition: transform .22s ease, box-shadow .22s ease;
}
.fx-fab:hover {
  transform: scale(1.1) rotate(8deg);
  box-shadow: 0 8px 24px rgba(73, 177, 245, 0.5);
}

/* 菜单面板 */
.fx-menu {
  display: none;
  flex-direction: column;
  gap: 7px;
  min-width: 172px;
  padding: 12px;
  border-radius: 16px;
  background: var(--fx-card-bg-hover);
  border: 1px solid var(--fx-card-border);
  backdrop-filter: blur(18px) saturate(130%);
  -webkit-backdrop-filter: blur(18px) saturate(130%);
  box-shadow: var(--fx-shadow-hover);
}
.fx-menu.open { display: flex; }

.fx-menu-title {
  font-size: 11px;
  letter-spacing: .08em;
  color: var(--fx-text-sub);
  padding: 0 4px 2px;
}

/* 配色按钮 */
.fx-color {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 8px 11px;
  border: none;
  border-radius: 11px;
  cursor: pointer;
  background: transparent;
  color: var(--fx-text);
  font-size: 13px;
  text-align: left;
  transition: background .16s ease;
}
.fx-color:hover { background: rgba(73, 177, 245, 0.14); }
.fx-color.on { background: rgba(73, 177, 245, 0.2); font-weight: 600; }
.fx-color .swatch {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  flex-shrink: 0;
  box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, 0.7);
}

/* 分隔线 */
.fx-divider {
  height: 1px;
  margin: 3px 2px;
  background: rgba(128, 128, 128, 0.22);
}

/* 白天黑夜开关行 */
.fx-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 7px 11px;
  font-size: 13px;
  color: var(--fx-text);
}

/* 滑动开关 */
.fx-toggle {
  position: relative;
  width: 46px;
  height: 25px;
  border-radius: 13px;
  border: none;
  cursor: pointer;
  background: rgba(140, 150, 165, 0.35);
  transition: background .25s ease;
  flex-shrink: 0;
}
.fx-toggle::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 19px;
  height: 19px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.22);
  transition: transform .25s ease;
}
.fx-toggle.on { background: var(--fx-accent); }
.fx-toggle.on::after { transform: translateX(21px); }