/* ============================================================
   Nekomini Emerald 风格 (仿 komari-theme-emerald)
   顶部翠绿→柠檬渐变光晕 + 毛玻璃白卡片 + 细边框 + 深色按钮
   适用: Homepage 导航页 + Homepage 配置管理器 (共享)
   ============================================================ */

/* ---------- 背景: 浅色底 + 顶部翠绿→柠檬光晕 ---------- */
body {
  min-height: 100vh;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans SC", sans-serif;

  /* 浅色石板底 */
  background-color: #f8fafc !important;
  background-image:
    /* 顶部翠绿→柠檬径向光晕 (emerald-500 → lime-300) */
    radial-gradient(ellipse 80% 50% at 50% -10%, rgba(16, 185, 129, 0.28), rgba(190, 242, 100, 0.18) 45%, transparent 70%),
    /* 底部极淡斜纹网格 (emerald 主题的 skew 网格) */
    repeating-linear-gradient(-18deg, rgba(15, 23, 42, 0.025) 0 1px, transparent 1px 72px) !important;
  background-size: cover, auto !important;
  background-position: center, center !important;
  background-attachment: fixed, fixed !important;
}

/* config-manager 深色渐变背景覆盖修复 */
html,
#root > div,
[class*="bg-gradient"],
[style*="linear-gradient"] {
  background: transparent !important;
}

/* 让 Homepage 自带背景图被渐变覆盖时仍保底 */
#background {
  opacity: 0.9;
}

/* ---------- 主容器: 毛玻璃 ---------- */
.container,
body > div[class*="wrapper"],
.page-wrapper,
main {
  background: rgba(255, 255, 255, 0.8);
  backdrop-filter: blur(18px) saturate(140%);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
}

/* ---------- 卡片: 半透明白 + 细边框 + hover 翠绿光晕 ---------- */
.card,
.bookmark-group,
.group-card,
[class*="group"],
[class*="widget"],
.homepage-group {
  background: rgba(255, 255, 255, 0.88) !important;
  backdrop-filter: blur(12px) saturate(140%);
  -webkit-backdrop-filter: blur(12px) saturate(140%);
  border: 1px solid rgba(15, 23, 42, 0.08) !important;
  border-radius: 10px !important;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.05), 0 8px 24px rgba(15, 23, 42, 0.04);
  transition: all 0.2s ease;
}

.card:hover,
.bookmark-group:hover,
.group-card:hover {
  border-color: rgba(16, 185, 129, 0.35) !important;
  box-shadow: 0 0 20px rgba(16, 185, 129, 0.12), 0 0 0 1px rgba(16, 185, 129, 0.15), 0 8px 24px rgba(15, 23, 42, 0.06);
  transform: translateY(-2px);
}

/* ---------- 链接卡片标题 ---------- */
.card-title,
.group-title,
[class*="title"] h1,
[class*="title"] h2,
[class*="title"] h3 {
  font-weight: 600;
  color: #0f172a;
}

/* ---------- 文字可读性兜底: 阴影 (背景图场景, 排除按钮/深色元素) ---------- */
h1, h2, h3, h4, h5, h6,
p, a, li, label,
[class*="greeting"],
[class*="primary-text"] {
  text-shadow: 0 1px 2px rgba(255, 255, 255, 0.6);
}

/* ---------- 深色主按钮 ---------- */
button[type="submit"],
.btn-primary,
[class*="primary"],
button:not([class*="ghost"]):not([class*="link"]):not([class*="icon"]),
input[type="submit"] {
  background-color: #18181b !important;
  color: #fafafa !important;
  border: none !important;
  border-radius: 8px !important;
  transition: all 0.2s ease;
}

button[type="submit"]:hover,
.btn-primary:hover,
[class*="primary"]:hover {
  background-color: #10b981 !important;
  box-shadow: 0 0 16px rgba(16, 185, 129, 0.35);
}

/* ---------- 输入框 ---------- */
input,
select,
textarea {
  border-radius: 8px !important;
  border: 1px solid rgba(15, 23, 42, 0.12) !important;
  background: rgba(255, 255, 255, 0.85) !important;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

input:focus,
select:focus,
textarea:focus {
  border-color: rgba(16, 185, 129, 0.6) !important;
  box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.15) !important;
  outline: none !important;
}

/* ---------- 在线状态点: 翠绿呼吸 (emerald 主题特征) ---------- */
[class*="status"],
[class*="online"],
.dot-online,
.status-dot-online {
  background-color: #059669 !important;
}

/* ---------- 滚动条 (emerald 细滚动条) ---------- */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}
::-webkit-scrollbar-track {
  background: transparent;
}
::-webkit-scrollbar-thumb {
  background: rgba(16, 185, 129, 0.3);
  border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
  background: rgba(16, 185, 129, 0.5);
}

/* ---------- 分隔线: 虚线 (emerald 特征) ---------- */
hr,
[class*="divider"] {
  border-top: 2px dotted rgba(100, 116, 139, 0.2) !important;
}

/* ---------- 文字配色 ---------- */
a {
  color: #0f172a;
}
a:hover {
  color: #059669;
}