/* ══════════════════════════════════════════════════════════════
   云崽全站「白天 / 黑夜」切换按钮（统一外观）
   ──────────────────────────────────────────────────────────────
   样式来源：/secure-share（security-share 单文件页内联版保持一致）。
   用法：
     <link rel="stylesheet" href="/assets/css/yz-theme-btn.css">
     <button class="yz-theme-btn" id="themeBtn" type="button"
             onclick="yzToggleTheme()" title="切换白天/黑夜">
       <svg class="ic-moon">…月亮…</svg>
       <svg class="ic-sun">…太阳…</svg>
     </button>
   主题判定同时兼容两种约定：本站阅读页/后台用 data-bs-theme，
   安全分享/官网首页用 data-theme。两个属性都写即可，互不干扰。
   ══════════════════════════════════════════════════════════════ */

.yz-theme-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
  padding: 0;
  border-radius: 999px;
  border: 1px solid var(--yz-theme-btn-bd, color-mix(in srgb, currentColor 24%, transparent));
  background: transparent;
  color: var(--yz-theme-btn-fg, inherit);
  cursor: pointer;
  line-height: 1;
  transition: color .18s ease, border-color .18s ease, background .18s ease, transform .18s ease;
}

.yz-theme-btn:hover {
  color: #6366f1;
  border-color: #6366f1;
  background: color-mix(in srgb, #6366f1 10%, transparent);
}

.yz-theme-btn:active { transform: scale(.94); }

.yz-theme-btn:focus-visible {
  outline: 2px solid #6366f1;
  outline-offset: 2px;
}

.yz-theme-btn svg { display: block; }

/* 月亮 = 当前为浅色（点击进入黑夜）；太阳 = 当前为深色（点击回到白天） */
.yz-theme-btn .ic-sun { display: none; }

html[data-theme="dark"] .yz-theme-btn .ic-sun,
html[data-bs-theme="dark"] .yz-theme-btn .ic-sun { display: inline; }

html[data-theme="dark"] .yz-theme-btn .ic-moon,
html[data-bs-theme="dark"] .yz-theme-btn .ic-moon { display: none; }

html[data-theme="dark"] .yz-theme-btn:hover,
html[data-bs-theme="dark"] .yz-theme-btn:hover { color: #a5b4fc; border-color: #a5b4fc; }

/* 顶栏为深色底、页面为浅色时的场景（如官网顶栏），可加 .yz-theme-btn--on-dark */
.yz-theme-btn--on-dark {
  --yz-theme-btn-fg: #c7d2fe;
  --yz-theme-btn-bd: rgba(199,210,254,.34);
}
.yz-theme-btn--on-dark:hover { color: #eef2ff; border-color: rgba(165,180,252,.85); background: rgba(99,102,241,.20); }