/* Only HTML/interaction adapters live here. Visual component rules come from Vue. */
:root { --app-font: 'HarmonyOS Sans SC', 'PingFang SC', 'Microsoft YaHei', sans-serif; }
body { font-family: var(--app-font); }
.html-content img { max-width: 100% !important; height: auto !important; display: block; }
[hidden] { display: none !important; }
.navbar .dropdown-menu { display: none; }
.navbar .has-children:hover > .dropdown-menu,
.navbar .has-children:focus-within > .dropdown-menu { display: block; }
.navbar .menu-item, .navbar .submenu-item { text-decoration: none; }
.navbar .menu-item-container > button.menu-item { width: 100%; border: 0; background: none; font-family: inherit; }
.navbar .mobile-search .search-icon, .navbar .expand-arrow { border: 0; padding: 0; background: none; }
.el-carousel__item[data-slide] { transform: none; }
.el-carousel__arrow { font-size: 26px; padding: 0; }
.filter-btn[data-v-public-cards] { border: 1px solid var(--color-border); border-radius: 8px; text-decoration: none; }
.article-heading { font-size: 1.5em; line-height: normal; margin: 0; }
.article-view .sidebar-item:is(button), .article-view .mobile-action-item:is(button) {
  border: 0; border-radius: 0; background: none; width: 100%; font-size: inherit; font-weight: inherit; text-align: left;
}
.article-view .sidebar-item:is(button):hover { background: var(--color-menu-hover); }
.article-view .mobile-action-item:is(button) { width: auto; border-radius: 8px; }
.article-view .mobile-actions { display: none; }
.qr-code-popup { display: none; }
.qr-code-item:hover .qr-code-popup, .qr-code-item:focus-within .qr-code-popup { display: block; }
.qr-code-image { background: white; width: 150px; height: 150px; }
.article-view .article-content { min-width: 0; }
.article-view .comments-sidebar { flex-shrink: 0; }
.md-editor-preview pre { overflow-x: auto; max-width: 100%; -webkit-overflow-scrolling: touch; }
.md-editor-preview table { display: block; width: 100%; max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.md-editor-preview video { max-width: 100%; }
.site-toast { position: fixed; top: 80px; left: 50%; transform: translateX(-50%); max-width: 85vw; padding: 14px 24px; border-radius: 6px; border: 1px solid var(--color-border); background: var(--color-card-background); color: var(--color-text-primary); box-shadow: 0 4px 20px #0002; z-index: 12000; }
.seo-pagination { display: flex; justify-content: center; gap: 16px; margin: 16px 0; }
/* Keep crawlable home pagination without adding a new visible control to Vue's home layout. */
.seo-pagination { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.seo-pagination:focus-within { position: static; width: auto; height: auto; clip-path: none; }
@media (max-width: 1024px) { .article-view .mobile-actions { display: flex; } .article-view .floating-sidebar { display: none; } }
@media (max-width: 768px) { .beian-info { flex-wrap: wrap; justify-content: center; row-gap: 8px; } }

/* ===== 手机端：背景滚动锁定 ===== */
html body.scroll-locked { overflow: hidden; touch-action: none; }
.mobile-sidebar { height: 100vh; height: 100dvh; }

/* ===== 手机端：底部“获取资源”入口 ===== */
.fetch-resource-bar {
  display: none;
  position: fixed;
  left: 50%;
  bottom: calc(12px + env(safe-area-inset-bottom, 0px));
  transform: translateX(-50%);
  z-index: 900;
  min-width: min(72vw, 280px);
  justify-content: center;
  align-items: center;
  padding: 13px 28px;
  border: 0;
  border-radius: 999px;
  background: var(--color-primary);
  color: #fff;
  font-size: 16px;
  font-weight: 600;
  font-family: inherit;
  letter-spacing: 0.04em;
  box-shadow: 0 8px 24px rgba(64, 158, 255, 0.4);
  cursor: pointer;
  transition: opacity 0.2s ease, transform 0.2s ease;
}
.fetch-resource-bar.is-hidden { opacity: 0; pointer-events: none; transform: translateX(-50%) translateY(12px); }
.download-section.download-highlight { outline: 2px solid var(--color-primary); outline-offset: 6px; border-radius: 8px; }
@media (max-width: 1024px) {
  .fetch-resource-bar { display: flex; }
  .article-view:has(.fetch-resource-bar) .main-container { padding-bottom: 76px; }
}

/* ===== 手机端：可折叠目录 ===== */
.article-toc { margin: 0 0 16px; }
.article-toc-panel {
  border: 1px solid var(--color-border);
  border-radius: 10px;
  background: var(--color-card-background);
  overflow: hidden;
}
.article-toc-summary {
  list-style: none;
  cursor: pointer;
  padding: 12px 16px;
  font-size: 15px;
  font-weight: 600;
  color: var(--color-text-primary);
  user-select: none;
}
.article-toc-summary::-webkit-details-marker { display: none; }
.article-toc-summary::after { content: '▾'; float: right; color: var(--color-text-secondary); transition: transform 0.2s ease; }
.article-toc-panel:not([open]) .article-toc-summary::after { transform: rotate(-90deg); }
.article-toc-nav { display: flex; flex-direction: column; padding: 0 12px 12px; max-height: 46vh; overflow-y: auto; }
.article-toc-link {
  padding: 8px 10px;
  border-radius: 6px;
  color: var(--color-text-primary);
  text-decoration: none;
  font-size: 14px;
  line-height: 1.45;
}
.article-toc-link:hover { background: var(--color-menu-hover); color: var(--color-primary); }
.article-toc-link--h3 { padding-left: 26px; font-size: 13px; color: var(--color-text-secondary); }

/* ===== 手机端：弹窗高度与键盘适配 ===== */
@media (max-width: 768px) {
  .article-view .modal-overlay { padding: 12px; box-sizing: border-box; align-items: flex-end; }
  .article-view .modal-content {
    width: 100%;
    max-width: none;
    max-height: min(92dvh, calc(100vh - 24px));
    display: flex;
    flex-direction: column;
    overflow: hidden;
  }
  .article-view .modal-body { overflow-y: auto; -webkit-overflow-scrolling: touch; padding-bottom: max(20px, env(safe-area-inset-bottom, 0px)); }
  .article-view .modal-header { flex-shrink: 0; }
  .custom-popup-overlay { padding: 12px; padding-bottom: max(12px, env(safe-area-inset-bottom, 0px)); align-items: flex-end; }
  .custom-popup { max-height: min(88dvh, calc(100vh - 24px)); }
}