/* ==========================================================================
   HA之家 · 站点增强样式
   说明：本文件在 vue.css 之后加载，负责「设计变量 / 深色主题 / 排版优化 /
        站内搜索 / 目录 / 悬浮操作 / 代码复制 / 图片灯箱」。无外部字体依赖。
   ========================================================================== */

/* ---------- 1. 设计变量 ---------- */
:root {
  --ha-bg: #ffffff;
  --ha-bg-soft: #f6f8fa;
  --ha-bg-elev: #ffffff;
  --ha-text: #2c3e50;
  --ha-text-soft: #5c6b7a;
  --ha-text-mute: #8a97a4;
  --ha-border: rgba(16, 24, 40, 0.10);
  --ha-brand: #1976d2;
  --ha-brand-soft: rgba(25, 118, 210, 0.10);
  --ha-code-bg: #f6f8fa;
  --ha-code-inline: rgba(25, 118, 210, 0.08);
  --ha-shadow: 0 10px 30px rgba(16, 24, 40, 0.12);
  --ha-shadow-lg: 0 24px 60px rgba(16, 24, 40, 0.22);
  --ha-radius: 12px;
  --ha-font: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC",
    "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans CJK SC", "Source Han Sans SC",
    Roboto, Helvetica, Arial, sans-serif;
  --ha-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas,
    "Liberation Mono", "Courier New", monospace;
  --ha-safe-bottom: env(safe-area-inset-bottom, 0px);
}

html[data-theme="dark"] {
  --ha-bg: #141a21;
  --ha-bg-soft: #1a222b;
  --ha-bg-elev: #1e2731;
  --ha-text: #e3eaf2;
  --ha-text-soft: #a8b6c4;
  --ha-text-mute: #7d8b99;
  --ha-border: rgba(255, 255, 255, 0.10);
  --ha-brand: #4a9eff;
  --ha-brand-soft: rgba(74, 158, 255, 0.16);
  --ha-code-bg: #0f151c;
  --ha-code-inline: rgba(255, 255, 255, 0.09);
  --ha-shadow: 0 10px 30px rgba(0, 0, 0, 0.45);
  --ha-shadow-lg: 0 24px 60px rgba(0, 0, 0, 0.6);
}

[hidden] { display: none !important; }

/* ---------- 2. 基础排版 ---------- */
html { scroll-padding-top: 78px; }

body {
  background: var(--ha-bg);
  color: var(--ha-text);
  font-family: var(--ha-font);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

body.ha-no-scroll { overflow: hidden; }

@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

/* 隐藏 vue.css 的默认 Loading 文案（由 .ha-boot 接管） */
div#app:empty::before { content: ""; }

.markdown-section {
  color: var(--ha-text);
  font-size: 16px;
  line-height: 1.78;
  max-width: 82%;
}

@media (min-width: 1600px) {
  .markdown-section { max-width: 900px; }
}

.markdown-section p,
.markdown-section li { word-break: break-word; }

.markdown-section h1,
.markdown-section h2,
.markdown-section h3,
.markdown-section h4,
.markdown-section h5,
.markdown-section strong {
  color: var(--ha-text);
  line-height: 1.35;
}

/* docsify 会把标题文字包进 .anchor > span，需解除 vue.css 的固定深灰
   （用 html[data-theme] 提升权重，避免被深色主题的链接配色覆盖） */
html[data-theme] .markdown-section .anchor,
html[data-theme] .markdown-section .anchor span {
  color: inherit;
}
.markdown-section .anchor:hover { text-decoration: none; }

.markdown-section h1 { font-size: 1.9rem; letter-spacing: -0.01em; }
.markdown-section h2 {
  font-size: 1.45rem;
  margin: 2.4em 0 0.9em;
  padding-bottom: 0.35em;
  border-bottom: 1px solid var(--ha-border);
  scroll-margin-top: 78px;
}
.markdown-section h3 {
  font-size: 1.15rem;
  margin: 1.9em 0 0.6em;
  scroll-margin-top: 78px;
}

.markdown-section a {
  color: var(--ha-brand);
  font-weight: 600;
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color 0.15s ease, color 0.15s ease;
}
.markdown-section a:hover { border-bottom-color: currentColor; }

.markdown-section em { color: var(--ha-text-soft); }

.markdown-section hr {
  border: none;
  border-bottom: 1px solid var(--ha-border);
  margin: 2.6em 0;
}

.markdown-section blockquote {
  border-left: 4px solid var(--ha-brand);
  background: var(--ha-bg-soft);
  border-radius: 0 var(--ha-radius) var(--ha-radius) 0;
  color: var(--ha-text-soft);
  margin: 1.6em 0;
  padding: 12px 18px;
}
.markdown-section blockquote p { font-weight: 400; margin: 0.4em 0; }

/* 表格：外层容器负责横向滚动，首列在小屏吸附，避免「宽表看不全」
   —— vue.css 原本让 table 自己 display:block + overflow:auto，
      改为由容器滚动后才能加边缘阴影、滑动提示与首列吸附 */
.markdown-section table {
  font-size: 0.94em;
  margin: 0;
}
.ha-table-wrap > table {
  display: table;
  width: 100%;
  overflow: visible;
  border-collapse: separate;
  border-spacing: 0;
}
.markdown-section th,
.markdown-section td {
  border-color: var(--ha-border);
  border-style: solid;
  border-width: 0 1px 1px 0;
  padding: 8px 12px;
  vertical-align: top;
}
.markdown-section th {
  background: var(--ha-bg-soft);
  white-space: nowrap;
  font-weight: 600;
}
.markdown-section tr { border-top: none; }
.markdown-section tr:nth-child(2n) { background: var(--ha-bg-soft); }
.markdown-section table img { vertical-align: middle; border-radius: 6px; }
/* 补齐外框：最后一列 / 最后一行不再画内侧边 */
.ha-table-wrap th:last-child,
.ha-table-wrap td:last-child { border-right: none; }
.ha-table-wrap tr:last-child th,
.ha-table-wrap tr:last-child td { border-bottom: none; }

/* 表格滚动容器 */
.ha-table-box { margin: 1.2em 0 1.6em; }
.ha-table-wrap {
  position: relative;
  margin: 0;
  border: 1px solid var(--ha-border);
  border-radius: 8px;
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;
  outline: none;
}
.ha-table-wrap:focus-visible { box-shadow: 0 0 0 2px var(--ha-brand); }
/* 只在真正溢出时显示左右阴影，提示还有内容 */
.ha-table-wrap::before,
.ha-table-wrap::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: 22px;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.2s ease;
  z-index: 3;
}
.ha-table-wrap::before {
  left: 0;
  background: linear-gradient(90deg, rgba(16, 24, 40, 0.13), rgba(16, 24, 40, 0));
}
.ha-table-wrap::after {
  right: 0;
  background: linear-gradient(270deg, rgba(16, 24, 40, 0.13), rgba(16, 24, 40, 0));
}
.ha-table-wrap.is-scrollable:not(.at-start)::before { opacity: 1; }
.ha-table-wrap.is-scrollable:not(.at-end)::after { opacity: 1; }

/* 滑动提示：仅在可滚动且为触摸设备时出现（左对齐，避开右下角悬浮按钮） */
.ha-table-hint {
  display: none;
  align-items: center;
  justify-content: flex-start;
  gap: 2px;
  margin: 5px 0 0;
  padding-left: 2px;
  color: var(--ha-text-mute);
  font-size: 12px;
}
@media (hover: none) {
  .ha-table-box.is-scrollable .ha-table-hint { display: flex; }
}
@media (max-width: 768px) {
  .ha-table-box.is-scrollable .ha-table-hint { display: flex; }
}

/* 行内代码 */
.markdown-section code {
  background: var(--ha-code-inline);
  border-radius: 5px;
  color: var(--ha-text);
  font-family: var(--ha-mono);
  font-size: 0.88em;
  padding: 0.18em 0.42em;
}
/* 覆盖 vue.css 中 .markdown-section > :not(h1)… code 的 0.8rem */
.markdown-section :not(pre) > code,
.markdown-section p code,
.markdown-section li code,
.markdown-section td code {
  background: var(--ha-code-inline);
  color: var(--ha-text);
  font-size: 0.86em;
}

.markdown-section pre {
  background: var(--ha-code-bg);
  border: 1px solid var(--ha-border);
  border-radius: 10px;
  padding: 0 1.2rem;
  margin: 1.4em 0;
}
.markdown-section pre > code {
  background: transparent;
  color: var(--ha-text);
  font-size: 0.83rem;
  padding: 2.4em 2px 1.4em;
}
.markdown-section pre::after {
  color: var(--ha-text-mute);
  right: auto;
  left: 12px;
  letter-spacing: 0.06em;
  text-transform: lowercase;
}

/* ---------- 3. 深色主题细化 ---------- */
html[data-theme="dark"] body { background: var(--ha-bg); }

html[data-theme="dark"] .sidebar {
  background: var(--ha-bg-soft);
  border-right-color: var(--ha-border);
}
html[data-theme="dark"] .sidebar ul li a { color: var(--ha-text-soft); }
html[data-theme="dark"] .sidebar ul li.active > a,
html[data-theme="dark"] .sidebar ul li a:hover { color: var(--ha-brand); }

html[data-theme="dark"] .sidebar-toggle {
  background-color: var(--ha-bg-elev);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.4);
}
html[data-theme="dark"] .sidebar-toggle span { background-color: var(--ha-text); }

html[data-theme="dark"] .progress { background-color: var(--ha-brand); }
html[data-theme="dark"] .markdown-section a { color: var(--ha-brand); }
html[data-theme="dark"] .markdown-section h1,
html[data-theme="dark"] .markdown-section h2,
html[data-theme="dark"] .markdown-section h3,
html[data-theme="dark"] .markdown-section h4,
html[data-theme="dark"] .markdown-section strong { color: var(--ha-text); }

html[data-theme="dark"] .markdown-section p.tip {
  background: var(--ha-bg-soft);
  border-left-color: #ff6b6b;
  color: var(--ha-text-soft);
}
html[data-theme="dark"] .markdown-section p.tip code { background: var(--ha-code-inline); }
html[data-theme="dark"] .markdown-section p.warn {
  background: var(--ha-brand-soft);
  color: var(--ha-text-soft);
}
html[data-theme="dark"] kbd {
  border-color: var(--ha-border);
  background: var(--ha-bg-elev);
  color: var(--ha-text);
}

/* 代码高亮（深色下换一套更易读的色板） */
html[data-theme="dark"] .token.comment,
html[data-theme="dark"] .token.prolog,
html[data-theme="dark"] .token.doctype,
html[data-theme="dark"] .token.cdata { color: #7d8b99; }
html[data-theme="dark"] .token.punctuation { color: #b6c2cf; }
html[data-theme="dark"] .token.namespace { opacity: 0.8; }
html[data-theme="dark"] .token.boolean,
html[data-theme="dark"] .token.number { color: #f0a06a; }
html[data-theme="dark"] .token.string,
html[data-theme="dark"] .token.attr-value { color: #7ee2a8; }
html[data-theme="dark"] .token.keyword,
html[data-theme="dark"] .token.function { color: #ff9d7a; }
html[data-theme="dark"] .token.tag,
html[data-theme="dark"] .token.attr-name { color: #7cc2ff; }
html[data-theme="dark"] .token.property { color: #e6c07b; }
html[data-theme="dark"] .token.selector { color: #b3a4ff; }
html[data-theme="dark"] .token.placeholder,
html[data-theme="dark"] .token.variable { color: #86c7f5; }
html[data-theme="dark"] .token.entity,
html[data-theme="dark"] .token.url { color: #67d6e8; }

/* 深色下图片略降亮度，避免白底截图刺眼 */
html[data-theme="dark"] .markdown-section img:not(.emoji) {
  filter: brightness(0.92) contrast(1.02);
  transition: filter 0.2s ease;
}
html[data-theme="dark"] .markdown-section img:not(.emoji):hover { filter: none; }

/* 侧栏滚动条 */
html[data-theme="dark"] .sidebar::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.14); }

/* ---------- 4. 侧栏优化 ---------- */
.sidebar {
  border-right: 1px solid var(--ha-border);
  padding-top: 28px;
  font-family: var(--ha-font);
}
.sidebar > h1 {
  font-size: 1.15rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  margin: 0 auto 1.1rem;
  padding: 0 24px;
  text-align: left;
}
.sidebar > h1 a { color: var(--ha-text); }

.sidebar ul { margin: 0; padding: 0; }
.sidebar ul li { margin: 3px 0; }
.sidebar ul li a {
  border-radius: 8px;
  color: var(--ha-text-soft);
  font-size: 14.5px;
  line-height: 1.5;
  padding: 7px 12px;
  margin: 0 10px;
  transition: background 0.15s ease, color 0.15s ease;
}
.sidebar ul li a:hover {
  background: var(--ha-brand-soft);
  color: var(--ha-brand);
  text-decoration: none;
}
/* 标题里的语义高亮不应传染到侧栏导航 */
.sidebar .hl-red,
.sidebar .hl-green,
.sidebar .hl-blue {
  color: inherit !important;
  font-weight: inherit;
}
.sidebar ul li.active > a {
  background: var(--ha-brand-soft);
  color: var(--ha-brand);
  font-weight: 600;
  border-right: none; /* 去掉 vue.css 的 2px 右边框，避免圆角处出现残缺弧线 */
}

/* 子级导航：竖线引导，替代默认的 "-" 前缀 */
.sidebar .app-sub-sidebar {
  border-left: 1px solid var(--ha-border);
  margin: 4px 0 8px 26px;
  padding: 0;
}
.sidebar .app-sub-sidebar li::before { content: none; }
.sidebar .app-sub-sidebar li a {
  margin: 0;
  padding: 4px 10px;
  border-radius: 0 6px 6px 0;
}
.sidebar ul li ul { margin-left: 14px; }
.sidebar ul li ul li a { font-size: 13.5px; padding: 5px 10px; }

/* ---------- 5. 页脚 ---------- */
.ha-footer {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 18px;
  justify-content: center;
  color: var(--ha-text-mute);
  font-size: 13px;
  padding: 8px 0 32px;
}
.ha-footer a { color: var(--ha-text-mute); }
.ha-footer a:hover { color: var(--ha-brand); }

/* ---------- 6. 首屏加载 / 无脚本 ---------- */
.ha-boot {
  position: fixed;
  inset: 0;
  z-index: 9000;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 20px;
  background: var(--ha-bg);
  transition: opacity 0.35s ease, visibility 0.35s ease;
}
body.ready .ha-boot,
html.ha-ready .ha-boot {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}
.ha-boot-logo {
  width: 62px;
  height: 62px;
  border-radius: 16px;
  background: linear-gradient(135deg, #1976d2, #42a5f5);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font: 700 22px/1 var(--ha-font);
  letter-spacing: 0.04em;
  box-shadow: 0 12px 30px rgba(25, 118, 210, 0.35);
  animation: ha-pulse 1.6s ease-in-out infinite;
}
.ha-boot-bar {
  width: 128px;
  height: 3px;
  border-radius: 3px;
  background: var(--ha-border);
  overflow: hidden;
}
.ha-boot-bar i {
  display: block;
  width: 40%;
  height: 100%;
  border-radius: 3px;
  background: var(--ha-brand);
  animation: ha-slide 1.2s ease-in-out infinite;
}
@keyframes ha-pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.06); }
}
@keyframes ha-slide {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(250%); }
}

.ha-noscript {
  max-width: 620px;
  margin: 12vh auto;
  padding: 0 24px;
  font: 15px/1.7 var(--ha-font);
  color: #2c3e50;
}
.ha-noscript h1 { font-size: 1.4rem; }

/* ---------- 7. 代码复制按钮 ---------- */
.markdown-section pre { position: relative; }
.ha-copy {
  position: absolute;
  right: 10px;
  bottom: 8px;
  z-index: 2;
  padding: 4px 10px;
  font: 600 12px/1.6 var(--ha-font);
  color: var(--ha-text-soft);
  background: var(--ha-bg-elev);
  border: 1px solid var(--ha-border);
  border-radius: 6px;
  cursor: pointer;
  opacity: 0;
  transform: translateY(2px);
  transition: opacity 0.18s ease, transform 0.18s ease, color 0.18s ease, border-color 0.18s ease;
}
.markdown-section pre:hover .ha-copy,
.ha-copy:focus-visible { opacity: 1; transform: none; }
.ha-copy:hover {
  color: var(--ha-brand);
  border-color: var(--ha-brand);
}
.ha-copy.is-ok {
  color: #1a9c5b;
  border-color: #1a9c5b;
  opacity: 1;
}
@media (hover: none) {
  .ha-copy { opacity: 0.85; transform: none; }
}

/* ---------- 8. 图片放大 ---------- */
.markdown-section img.ha-zoomable {
  cursor: zoom-in;
  border-radius: 8px;
  transition: box-shadow 0.2s ease, transform 0.2s ease;
}
.markdown-section img.ha-zoomable:hover {
  box-shadow: var(--ha-shadow);
  transform: translateY(-1px);
}

.ha-lightbox {
  position: fixed;
  inset: 0;
  z-index: 999998;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 4vh 4vw;
  background: rgba(10, 14, 20, 0.86);
  backdrop-filter: blur(6px);
  cursor: zoom-out;
}
.ha-lightbox.is-on { display: flex; animation: ha-fade 0.18s ease; }
.ha-lightbox img {
  max-width: 92vw;
  max-height: 88vh;
  border-radius: 10px;
  background: #fff;
  box-shadow: var(--ha-shadow-lg);
}
.ha-lightbox-close {
  position: absolute;
  top: 18px;
  right: 22px;
  width: 40px;
  height: 40px;
  border: none;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.14);
  color: #fff;
  font-size: 18px;
  cursor: pointer;
}
.ha-lightbox-close:hover { background: rgba(255, 255, 255, 0.26); }
@keyframes ha-fade { from { opacity: 0; } to { opacity: 1; } }

/* ---------- 9. 站内搜索 ---------- */
.ha-search-btn {
  position: fixed;
  top: 14px;
  right: 20px;
  z-index: 8000;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 34px;
  padding: 0 12px;
  border: 1px solid var(--ha-border);
  border-radius: 999px;
  background: var(--ha-bg-elev);
  color: var(--ha-text-soft);
  font: 500 13px/1 var(--ha-font);
  cursor: pointer;
  box-shadow: 0 2px 10px rgba(16, 24, 40, 0.06);
  transition: color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}
.ha-search-btn:hover {
  color: var(--ha-brand);
  border-color: var(--ha-brand);
  box-shadow: var(--ha-shadow);
}
.ha-search-btn kbd {
  font: 500 11px/1 var(--ha-mono);
  padding: 3px 5px;
  border-radius: 5px;
  border: 1px solid var(--ha-border);
  background: var(--ha-bg-soft);
  color: var(--ha-text-mute);
}

.ha-search {
  position: fixed;
  inset: 0;
  z-index: 999999;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 12vh 20px 20px;
}
.ha-search-mask {
  position: absolute;
  inset: 0;
  background: rgba(10, 14, 20, 0.55);
  backdrop-filter: blur(4px);
  animation: ha-fade 0.15s ease;
}
.ha-search-box {
  position: relative;
  width: 100%;
  max-width: 660px;
  max-height: 72vh;
  display: flex;
  flex-direction: column;
  background: var(--ha-bg-elev);
  border: 1px solid var(--ha-border);
  border-radius: 14px;
  box-shadow: var(--ha-shadow-lg);
  overflow: hidden;
  animation: ha-pop 0.18s ease;
}
@keyframes ha-pop {
  from { opacity: 0; transform: translateY(-8px) scale(0.99); }
  to { opacity: 1; transform: none; }
}
.ha-search-field {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--ha-border);
  color: var(--ha-text-mute);
}
.ha-search-field input {
  flex: 1;
  min-width: 0;
  border: none;
  outline: none;
  background: transparent;
  color: var(--ha-text);
  font: 400 16px/1.4 var(--ha-font);
}
.ha-search-field input::placeholder { color: var(--ha-text-mute); }
.ha-search-field kbd {
  font: 500 10px/1 var(--ha-mono);
  padding: 4px 6px;
  border-radius: 5px;
  border: 1px solid var(--ha-border);
  color: var(--ha-text-mute);
}
.ha-search-cancel {
  border: none;
  background: none;
  padding: 4px 2px 4px 6px;
  color: var(--ha-brand);
  font: 600 14px/1 var(--ha-font);
  cursor: pointer;
}
.ha-search-cancel:hover { text-decoration: underline; }
.ha-search-hint {
  padding: 10px 16px 6px;
  color: var(--ha-text-mute);
  font-size: 12.5px;
}
.ha-search-results {
  overflow-y: auto;
  padding: 4px 8px 10px;
  overscroll-behavior: contain;
}
.ha-hit {
  display: block;
  padding: 10px 12px;
  border-radius: 10px;
  text-decoration: none;
  border-bottom: none !important;
  color: inherit;
}
.ha-hit:hover,
.ha-hit.is-active { background: var(--ha-bg-soft); }
.ha-hit-head {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 3px;
  font-size: 12.5px;
  color: var(--ha-text-mute);
  overflow: hidden;
}
.ha-hit-page {
  flex: none;
  padding: 1px 7px;
  border-radius: 999px;
  background: var(--ha-brand-soft);
  color: var(--ha-brand);
  font-weight: 600;
}
.ha-hit-title {
  color: var(--ha-text);
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ha-hit-text {
  color: var(--ha-text-soft);
  font-size: 13.5px;
  line-height: 1.6;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.ha-hit-text mark,
.ha-search mark {
  background: rgba(255, 196, 0, 0.28);
  color: inherit;
  padding: 0 1px;
  border-radius: 3px;
}
.ha-empty {
  padding: 26px 16px 34px;
  text-align: center;
  color: var(--ha-text-mute);
  font-size: 14px;
}

/* ---------- 10. 悬浮操作 ---------- */
.ha-fab {
  position: fixed;
  right: 20px;
  bottom: calc(20px + var(--ha-safe-bottom));
  z-index: 900;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.ha-fab-btn {
  width: 44px;
  height: 44px;
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 1px solid var(--ha-border);
  border-radius: 50%;
  background: var(--ha-bg-elev);
  color: var(--ha-text-soft);
  cursor: pointer;
  box-shadow: 0 6px 18px rgba(16, 24, 40, 0.12);
  transition: color 0.16s ease, transform 0.16s ease, box-shadow 0.16s ease;
}
.ha-fab-btn:hover {
  color: var(--ha-brand);
  transform: translateY(-2px);
  box-shadow: var(--ha-shadow);
}
.ha-fab-btn:active { transform: none; }

#ha-top-btn {
  opacity: 0;
  visibility: hidden;
  transform: translateY(6px);
  transition: opacity 0.2s ease, visibility 0.2s ease, transform 0.2s ease, color 0.16s ease;
}
#ha-top-btn.is-on { opacity: 1; visibility: visible; transform: none; }

/* DOORLINK AI 入口由 chat.js 注入该插槽，与其它悬浮按钮共用同一套样式 */
.ha-ai-slot { display: flex; }
.ha-ai-slot:empty { display: none; } /* 未挂载时不占 gap，避免多出一段空隙 */
.ha-fab-ai.is-open {
  color: var(--ha-brand);
  border-color: var(--ha-brand);
  background: var(--ha-brand-soft);
}

/* 图标按主题切换显示 */
html[data-theme="dark"] #ha-theme-btn .icon-sun { display: block; }
html[data-theme="dark"] #ha-theme-btn .icon-moon { display: none; }
html[data-theme="light"] #ha-theme-btn .icon-sun { display: none; }
html[data-theme="light"] #ha-theme-btn .icon-moon { display: block; }

/* ---------- 11. 提示条 ---------- */
#ha-toast {
  position: fixed;
  left: 50%;
  bottom: 40px;
  z-index: 999997;
  transform: translate(-50%, 12px);
  max-width: 80vw;
  padding: 10px 18px;
  border-radius: 999px;
  background: rgba(28, 36, 46, 0.94);
  color: #fff;
  font: 500 13.5px/1.5 var(--ha-font);
  box-shadow: var(--ha-shadow);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s ease;
}
#ha-toast.is-on {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, 0);
}

/* 动态链接失败态 */
.dynamic-link.is-broken {
  opacity: 0.55;
  cursor: not-allowed;
  text-decoration: line-through;
}
.ha-qr-fail {
  display: inline-block;
  padding: 6px 10px;
  border: 1px dashed var(--ha-border);
  border-radius: 8px;
  color: var(--ha-text-mute);
  font-size: 12px;
}

/* ---------- 12. 语义高亮（替代已废弃的 <font>） ---------- */
.hl-red { color: #dd3b3b; font-weight: 600; }
.hl-green { color: #1a9c5b; font-weight: 600; }
.hl-blue { color: var(--ha-brand); font-weight: 600; }
html[data-theme="dark"] .hl-red { color: #ff7b72; }
html[data-theme="dark"] .hl-green { color: #57d69a; }

/* ---------- 12.5 首页 ---------- */
.home-lead {
  color: var(--ha-text-mute);
  font-size: 0.95rem;
  letter-spacing: 0.02em;
  margin: -2px 0 30px;
}

.home-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  margin: 18px 0 10px;
}
.markdown-section a.home-card {
  display: block;
  padding: 18px 18px 16px;
  border: 1px solid var(--ha-border);
  border-bottom: 1px solid var(--ha-border);
  border-radius: 14px;
  background: var(--ha-bg-elev);
  text-decoration: none;
  color: inherit;
  font-weight: 400;
  transition: transform 0.16s ease, box-shadow 0.16s ease, border-color 0.16s ease;
}
.markdown-section a.home-card:hover {
  transform: translateY(-3px);
  border-color: var(--ha-brand);
  box-shadow: var(--ha-shadow);
}
.home-card-tag {
  display: inline-block;
  padding: 2px 9px;
  border-radius: 999px;
  background: var(--ha-brand-soft);
  color: var(--ha-brand);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.04em;
}
.markdown-section .home-card h3 {
  margin: 10px 0 6px;
  font-size: 1.05rem;
  color: var(--ha-text);
}
.markdown-section .home-card p {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.65;
  color: var(--ha-text-soft);
}

/* ---------- 13. 移动端 ---------- */
@media (max-width: 768px) {
  .markdown-section {
    max-width: 100%;
    padding: 20px 16px 40px;
    font-size: 15.5px;
  }
  .markdown-section h1 { font-size: 1.6rem; }
  .markdown-section h2 { font-size: 1.3rem; margin-top: 2em; }
  .markdown-section pre { border-radius: 8px; padding: 0 0.9rem; }

  /* 窄屏表格：缩小字号、降低内边距，并给单元格一个最小宽度，
     否则表格会被压成「一个字一行」而不触发横向滚动 */
  .markdown-section table { font-size: 0.86em; }
  .ha-table-wrap th { white-space: normal; }
  .ha-table-wrap th,
  .ha-table-wrap td {
    padding: 7px 8px;
    min-width: 84px;
  }
  .ha-table-wrap th:first-child,
  .ha-table-wrap td:first-child {
    position: sticky;
    left: 0;
    z-index: 2;
    min-width: 100px;
    /* 吸附列必须不透明，否则滚动时会被下面的单元格透视出来 */
    background: var(--ha-bg);
  }
  .ha-table-wrap th:first-child { background: var(--ha-bg-soft); z-index: 3; }
  .ha-table-wrap tr:nth-child(2n) td:first-child { background: var(--ha-bg-soft); }
  /* 吸附列右侧加一条分隔线，明确「这列是固定的」 */
  .ha-table-wrap th:first-child,
  .ha-table-wrap td:first-child { box-shadow: 1px 0 0 var(--ha-border); }

  .ha-search { padding: 0; }
  .ha-search-box {
    max-width: none;
    max-height: 100dvh;
    height: 100dvh;
    border-radius: 0;
    border: none;
  }
  .ha-search-field { padding: calc(15px + env(safe-area-inset-top, 0px)) 16px 15px; }
  .ha-search-field input { font-size: 16px; } /* 避免 iOS 聚焦缩放 */
  .ha-search-field kbd { display: none; }

  .ha-search-btn {
    top: 12px;
    right: 12px;
    width: 38px;
    height: 38px;
    padding: 0;
    justify-content: center;
  }
  .ha-search-btn span,
  .ha-search-btn kbd { display: none; }

  .ha-fab { right: 16px; bottom: calc(16px + var(--ha-safe-bottom)); }
  .ha-fab-btn { width: 42px; height: 42px; }

  .home-grid { grid-template-columns: 1fr; }

  .sidebar > h1 { text-align: center; padding: 0 16px; }
  .sidebar { padding-top: 20px; }

  .ha-footer { font-size: 12px; }
  #ha-toast { bottom: calc(24px + var(--ha-safe-bottom)); }
}

/* ---------- 14. 打印 ---------- */
@media print {
  .ha-boot,
  .ha-fab,
  .ha-ai-slot,
  .ha-search,
  .ha-search-btn,
  .ha-lightbox,
  .ha-copy,
  .ha-table-hint,
  #ha-toast { display: none !important; }

  .markdown-section { max-width: 100%; }
  /* 打印时取消横向滚动，整表铺开 */
  .ha-table-box { margin: 1em 0; }
  .ha-table-wrap { overflow: visible; border: none; }
  .ha-table-wrap > table { width: 100% !important; font-size: 0.8em; }
  .markdown-section pre { border: 1px solid #ddd; page-break-inside: avoid; }
  .markdown-section h2, .markdown-section h3 { page-break-after: avoid; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 0.8em; color: #666; }
}