/* ============================================================
   导航站 三套主题（银白 Light / 深空 Dark / 流光 Aurora）
   通过 <html data-theme="light|dark|aurora"> 切换，变量由各模板引用
   ============================================================ */

:root,
[data-theme="light"] {
  --page-bg: #f4f8fb;                          /* 页面底色 */
  --page-bg-grad: none;
  --card-bg: rgba(255, 255, 255, 0.55);         /* 毛玻璃卡片 */
  --card-solid: #ffffff;
  --card-border: rgba(0, 0, 0, 0.05);
  --card-hover: #eef2ff1a;
  --text: #333333;
  --text-2: #555555;
  --text-sub: #999999;
  --accent: #4e6ef2;
  --accent-2: #304ece;
  --accent-hover: #4662d9;
  --shadow: rgba(0, 0, 0, 0.08);
  --glass: 10px;
  --banner-cover: linear-gradient(rgba(255,255,255,0) 0%, rgba(244,248,251,.1) 50%, #ffffff52 100%);
  --topbar-bg: linear-gradient(rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0.12) 100%);
  --nav-text: #ffffff;
  --title-shadow: 1px 1px 8px #504b4b;
  --swatch: #f4f8fb;
}

[data-theme="dark"] {
  --page-bg: #16233c;
  --page-bg-grad: linear-gradient(160deg, #111b30 0%, #1a2a47 55%, #223556 100%);
  --card-bg: rgba(38, 52, 82, 0.80);
  --card-solid: #26334f;
  --card-border: rgba(140, 170, 255, 0.16);
  --card-hover: rgba(140, 170, 255, 0.12);
  --text: #eef2fb;
  --text-2: #cbd4e8;
  --text-sub: #9aa8c8;
  --accent: #6e8cf7;
  --accent-2: #8aa0ff;
  --accent-hover: #5a78e8;
  --shadow: rgba(0, 0, 20, 0.5);
  --glass: 14px;
  --banner-cover: linear-gradient(rgba(22,35,60,0) 0%, rgba(22,35,60,.72) 55%, #16233c 100%);
  --topbar-bg: linear-gradient(rgba(12, 20, 38, 0.55) 0%, rgba(12, 20, 38, 0.16) 100%);
  --nav-text: #eef2fb;
  --title-shadow: 1px 1px 12px rgba(0, 0, 0, 0.8);
  --swatch: #16233c;
}

[data-theme="aurora"] {
  --page-bg: #6a5cff;
  --page-bg-grad: linear-gradient(135deg, #5b6cf9 0%, #9d5ce4 45%, #d96bd8 100%);
  --card-bg: rgba(255, 255, 255, 0.20);
  --card-solid: rgba(255, 255, 255, 0.28);
  --card-border: rgba(255, 255, 255, 0.25);
  --card-hover: rgba(255, 255, 255, 0.18);
  --text: #ffffff;
  --text-2: #f2eefe;
  --text-sub: rgba(255, 255, 255, 0.75);
  --accent: #7c6bff;
  --accent-2: #b06bff;
  --accent-hover: #6a56f0;
  --shadow: rgba(70, 30, 130, 0.35);
  --glass: 18px;
  --banner-cover: linear-gradient(rgba(91,108,249,0) 0%, rgba(91,108,249,.35) 55%, rgba(91,108,249,.85) 100%);
  --topbar-bg: linear-gradient(rgba(30, 20, 70, 0.5) 0%, rgba(30, 20, 70, 0.12) 100%);
  --nav-text: #ffffff;
  --title-shadow: 1px 1px 12px rgba(90, 30, 160, 0.6);
  --swatch: linear-gradient(135deg, #5b6cf9, #d96bd8);
}

[data-theme="sunrise"] {
  --page-bg: #fff3e4;
  --page-bg-grad: linear-gradient(160deg, #ffe7c4 0%, #ffd0a8 45%, #ffb8a8 100%);
  --card-bg: rgba(255, 255, 255, 0.55);
  --card-solid: rgba(255, 255, 255, 0.72);
  --card-border: rgba(255, 255, 255, 0.6);
  --card-hover: rgba(255, 255, 255, 0.35);
  --text: #4a3a30;
  --text-2: #6b5547;
  --text-sub: #a08a78;
  --accent: #f2795c;
  --accent-2: #e05f3e;
  --accent-hover: #e06a48;
  --shadow: rgba(180, 100, 60, 0.28);
  --glass: 14px;
  --banner-cover: linear-gradient(rgba(255,231,196,0) 0%, rgba(255,231,196,.55) 55%, #fff3e4 100%);
  --topbar-bg: linear-gradient(rgba(120, 60, 30, 0.5) 0%, rgba(120, 60, 30, 0.12) 100%);
  --nav-text: #ffffff;
  --title-shadow: 1px 1px 10px rgba(120, 60, 30, 0.5);
  --swatch: linear-gradient(135deg, #ffd0a8, #ff8f7a);
}

[data-theme="mint"] {
  --page-bg: #eefaf3;
  --page-bg-grad: linear-gradient(160deg, #dcf5e8 0%, #bcefd6 45%, #9ce4cf 100%);
  --card-bg: rgba(255, 255, 255, 0.5);
  --card-solid: rgba(255, 255, 255, 0.7);
  --card-border: rgba(255, 255, 255, 0.65);
  --card-hover: rgba(255, 255, 255, 0.4);
  --text: #1f3a33;
  --text-2: #3a574f;
  --text-sub: #7aa094;
  --accent: #1db98a;
  --accent-2: #0f9d73;
  --accent-hover: #17a67c;
  --shadow: rgba(20, 120, 90, 0.28);
  --glass: 14px;
  --banner-cover: linear-gradient(rgba(220,245,232,0) 0%, rgba(220,245,232,.55) 55%, #eefaf3 100%);
  --topbar-bg: linear-gradient(rgba(10, 90, 60, 0.5) 0%, rgba(10, 90, 60, 0.12) 100%);
  --nav-text: #ffffff;
  --title-shadow: 1px 1px 10px rgba(10, 90, 60, 0.5);
  --swatch: linear-gradient(135deg, #7fe0b8, #2bc98f);
}

/* ---- 深色主题下搜索引擎文字：覆盖内联深色，统一高对比亮色 ---- */
[data-theme="dark"] .search-type li label,
[data-theme="midnight"] .search-type li label,
[data-theme="aurora"] .search-type li label,
[data-theme="dark"] .search-type li label span,
[data-theme="midnight"] .search-type li label span,
[data-theme="aurora"] .search-type li label span { color: var(--text) !important; }
[data-theme="dark"] .search-type input:checked + label,
[data-theme="dark"] .search-type input:hover + label,
[data-theme="midnight"] .search-type input:checked + label,
[data-theme="midnight"] .search-type input:hover + label,
[data-theme="aurora"] .search-type input:checked + label,
[data-theme="aurora"] .search-type input:hover + label { background-color: var(--card-solid); }

[data-theme="midnight"] {
  --page-bg: #0b1220;
  --page-bg-grad: linear-gradient(160deg, #0b1220 0%, #111b3a 50%, #16264f 100%);
  --card-bg: rgba(28, 40, 72, 0.72);
  --card-solid: #1c2848;
  --card-border: rgba(120, 150, 255, 0.16);
  --card-hover: rgba(120, 150, 255, 0.14);
  --text: #e9edff;
  --text-2: #c6ceee;
  --text-sub: #8a95c4;
  --accent: #5b8cff;
  --accent-2: #8aa0ff;
  --accent-hover: #4a78ee;
  --shadow: rgba(0, 0, 20, 0.55);
  --glass: 14px;
  --banner-cover: linear-gradient(rgba(11,18,32,0) 0%, rgba(11,18,32,.72) 55%, #0b1220 100%);
  --topbar-bg: linear-gradient(rgba(0, 0, 20, 0.55) 0%, rgba(0, 0, 20, 0.16) 100%);
  --nav-text: #e9edff;
  --title-shadow: 1px 1px 12px rgba(0, 0, 10, 0.85);
  --swatch: linear-gradient(135deg, #0b1220, #26386e);
}

/* ---- 通用毛玻璃工具类 ---- */
.glass {
  background: var(--card-bg);
  -webkit-backdrop-filter: blur(var(--glass)) saturate(160%);
  backdrop-filter: blur(var(--glass)) saturate(160%);
  border: 1px solid var(--card-border);
}

/* ---- 主题切换：悬浮按钮 + 展开面板 ---- */
.theme-fab {
  position: fixed;
  right: 18px;
  bottom: 18px;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: none;
  cursor: pointer;
  z-index: 9999;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  color: #fff;
  background: var(--accent);
  -webkit-box-shadow: 0 8px 24px var(--shadow);
  box-shadow: 0 8px 24px var(--shadow);
  -webkit-transition: -webkit-transform .25s ease;
  transition: transform .25s ease;
}
.theme-fab:hover { -webkit-transform: scale(1.08); transform: scale(1.08); }
.theme-fab svg { width: 22px; height: 22px; fill: currentColor; }

.theme-panel {
  position: fixed;
  right: 18px;
  bottom: 74px;
  z-index: 9998;
  min-width: 148px;
  padding: 10px;
  border-radius: 16px;
  background: var(--card-solid);
  border: 1px solid var(--card-border);
  -webkit-box-shadow: 0 12px 32px var(--shadow);
  box-shadow: 0 12px 32px var(--shadow);
  -webkit-transform: translateY(12px) scale(.96);
  transform: translateY(12px) scale(.96);
  opacity: 0;
  visibility: hidden;
  -webkit-transition: all .22s ease;
  transition: all .22s ease;
}
.theme-panel.open {
  -webkit-transform: translateY(0) scale(1);
  transform: translateY(0) scale(1);
  opacity: 1;
  visibility: visible;
}
.theme-panel .tp-title {
  font-size: 12px;
  color: var(--text-sub);
  margin: 0 0 8px 4px;
}
.theme-opt {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  width: 100%;
  padding: 7px 8px;
  border: none;
  background: transparent;
  border-radius: 10px;
  cursor: pointer;
  font-size: 14px;
  color: var(--text);
  text-align: left;
}
.theme-opt:hover { background: var(--card-hover); }
.theme-opt.active { background: var(--card-hover); }
.theme-opt .sw {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  margin-right: 9px;
  -ms-flex-negative: 0;
  flex-shrink: 0;
  border: 1px solid rgba(0, 0, 0, 0.12);
  -webkit-box-shadow: inset 0 0 0 1px rgba(255,255,255,.25);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.25);
}
.theme-opt .sw.light { background: #f4f8fb; }
.theme-opt .sw.dark { background: #16233c; }
.theme-opt .sw.aurora { background: linear-gradient(135deg, #5b6cf9, #d96bd8); }
.theme-opt .sw.sunrise { background: linear-gradient(135deg, #ffd0a8, #ff8f7a); }
.theme-opt .sw.mint { background: linear-gradient(135deg, #7fe0b8, #2bc98f); }
.theme-opt .sw.midnight { background: linear-gradient(135deg, #0b1220, #26386e); }
.theme-opt .ck {
  margin-left: auto;
  color: var(--accent);
  font-weight: 700;
  visibility: hidden;
}
.theme-opt.active .ck { visibility: visible; }

/* 弹窗内（我的导航“设置”）内嵌切换器：横排小圆点 */
.theme-inline { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; gap: 8px; }
.theme-inline .dot {
  width: 26px; height: 26px; border-radius: 50%;
  cursor: pointer; border: 2px solid transparent;
  -webkit-box-shadow: inset 0 0 0 1px rgba(255,255,255,.3);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.3);
  -webkit-transition: -webkit-transform .18s ease;
  transition: transform .18s ease;
}
.theme-inline .dot:hover { -webkit-transform: scale(1.12); transform: scale(1.12); }
.theme-inline .dot.active { border-color: var(--accent); }
.theme-inline .dot.light { background: #f4f8fb; }
.theme-inline .dot.dark { background: #16233c; }
.theme-inline .dot.aurora { background: linear-gradient(135deg, #5b6cf9, #d96bd8); }
.theme-inline .dot.sunrise { background: linear-gradient(135deg, #ffd0a8, #ff8f7a); }
.theme-inline .dot.mint { background: linear-gradient(135deg, #7fe0b8, #2bc98f); }
.theme-inline .dot.midnight { background: linear-gradient(135deg, #0b1220, #26386e); }

/* 首页导航「主题」项：标签 + 小圆点，视觉与 .nav-link 对齐 */
.theme-nav-item {
  display: -webkit-box; display: -ms-flexbox; display: flex;
  -webkit-box-align: center; -ms-flex-align: center; align-items: center;
  padding: 8px 0.5rem;
  cursor: default;
  white-space: nowrap;
}
.theme-nav-label {
  color: var(--nav-text, #fff);
  font-size: 16px;
  font-weight: bold;
  text-shadow: 0 1px 0 #000;
  margin-right: 10px;
  line-height: 1;
}
.theme-nav-dots .theme-inline { gap: 6px; }
.theme-nav-dots .dot { width: 20px; height: 20px; border-width: 2px; }

@media screen and (max-width: 991px) {
  /* 手机端并入汉堡菜单：纵向排列，圆点随行 */
  .theme-nav-item { padding: 10px 15px; }
  .theme-nav-dots .dot { width: 22px; height: 22px; }
}

@media screen and (max-width: 767px) {
  .theme-fab { width: 42px; height: 42px; right: 12px; bottom: 12px; }
  .theme-panel { right: 12px; bottom: 62px; min-width: 132px; }
}