/* =========================================================
   全站公共样式 —— 所有页面都会加载
   ========================================================= */

/* 子页面：实色 indigo 顶栏 + 白字 */
.titleBarGobal.mdui-color-theme .mdui-toolbar {
  background-color: rgb(var(--mdx-theme-color)) !important;
}

/* ---------- 子页面：main-in-other 覆写 MDX 的 absolute 定位 ---------- */
/* MDX 原版 .main-in-other{position:absolute;top:290px;left:0} —— 绝对定位导致子页布局错乱 */
.main-in-other {
  position: static !important;
  left: auto !important;
  top: auto !important;
  width: auto !important;
  padding-top: 60px;   /* 给 titleBar 60px 留出空间 */
  padding-bottom: 20px;
  background-color: #fff;
}
.mdui-theme-layout-dark .main-in-other { background-color: #1a1a1a; }

/* ---------- 通用：返回顶部按钮 ---------- */
#indic {
  width: 48px; height: 48px;
  transform: scale(0);
  transition: transform .25s cubic-bezier(.4,0,.2,1);
}
#indic.show { transform: scale(1); }

/* ---------- Toast / Snackbar ---------- */
#toastBar {
  position: fixed;
  top: 20px;
  right: 20px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  z-index: 9999;
  pointer-events: none;
  max-width: 380px;
}
.btb-snackbar {
  /* 显式重置 vendor mdx-style.css 里同名/相似类的污染 */
  position: relative !important;
  top: auto !important;
  left: auto !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  width: auto !important;
  max-width: 100% !important;
  text-align: left !important;
  z-index: auto !important;

  pointer-events: auto;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px 12px 16px;
  border-radius: 12px;
  background-color: #ffffff;
  color: #1C1B1F;
  box-shadow:
    0 6px 18px rgba(0,0,0,0.12),
    0 2px 6px rgba(0,0,0,0.06),
    inset 4px 0 0 0 transparent;
  font-size: 14px;
  line-height: 1.45;
  opacity: 0;
  transform: translateX(40px) scale(0.96);
  transition:
    opacity .28s ease,
    transform .32s cubic-bezier(.22,1,.36,1);
  word-break: break-word;
  margin-bottom: 0 !important;
}
.btb-snackbar.btb-in {
  opacity: 1;
  transform: translateX(0) scale(1);
}
.btb-snackbar.btb-out {
  opacity: 0;
  transform: translateX(40px) scale(0.96);
}

/* 左侧色条 + 主题色调 */
.btb-info    { box-shadow: 0 6px 18px rgba(63,81,181,0.20), 0 2px 6px rgba(0,0,0,0.06), inset 4px 0 0 0 #3f51b5; }
.btb-success { box-shadow: 0 6px 18px rgba(67,160,71,0.20), 0 2px 6px rgba(0,0,0,0.06), inset 4px 0 0 0 #43a047; }
.btb-error   { box-shadow: 0 6px 18px rgba(229,57,53,0.22),  0 2px 6px rgba(0,0,0,0.06), inset 4px 0 0 0 #e53935; }
.btb-warn    { box-shadow: 0 6px 18px rgba(255,152,0,0.22),   0 2px 6px rgba(0,0,0,0.06), inset 4px 0 0 0 #ff9800; }

/* 图标 */
.btb-icon {
  flex-shrink: 0;
  font-size: 22px;
}
.btb-info    .btb-icon { color: #3f51b5; }
.btb-success .btb-icon { color: #2e7d32; }
.btb-error   .btb-icon { color: #c62828; }
.btb-warn    .btb-icon { color: #ef6c00; }

/* 文案 */
.btb-msg {
  flex: 1 1 auto;
  min-width: 0;
}

/* 关闭按钮 */
.btb-close {
  flex-shrink: 0;
  font-size: 18px;
  color: #999;
  cursor: pointer;
  padding: 4px;
  border-radius: 50%;
  transition: background-color .15s, color .15s;
}
.btb-close:hover {
  background-color: rgba(0,0,0,0.06);
  color: #333;
}

/* ---------- 暗色主题 ---------- */
.mdui-theme-layout-dark .btb-snackbar {
  background-color: #2B2A33;
  color: #E6E1E5;
  box-shadow:
    0 8px 22px rgba(0,0,0,0.50),
    0 2px 6px rgba(0,0,0,0.25),
    inset 4px 0 0 0 transparent;
}
.mdui-theme-layout-dark .btb-info    { box-shadow: 0 8px 22px rgba(63,81,181,0.45), 0 2px 6px rgba(0,0,0,0.25), inset 4px 0 0 0 #7986cb; }
.mdui-theme-layout-dark .btb-success { box-shadow: 0 8px 22px rgba(67,160,71,0.40), 0 2px 6px rgba(0,0,0,0.25), inset 4px 0 0 0 #81c784; }
.mdui-theme-layout-dark .btb-error   { box-shadow: 0 8px 22px rgba(229,57,53,0.50),  0 2px 6px rgba(0,0,0,0.25), inset 4px 0 0 0 #ef5350; }
.mdui-theme-layout-dark .btb-warn    { box-shadow: 0 8px 22px rgba(255,152,0,0.45),   0 2px 6px rgba(0,0,0,0.25), inset 4px 0 0 0 #ffb74d; }

.mdui-theme-layout-dark .btb-info    .btb-icon { color: #7986cb; }
.mdui-theme-layout-dark .btb-success .btb-icon { color: #81c784; }
.mdui-theme-layout-dark .btb-error   .btb-icon { color: #ef5350; }
.mdui-theme-layout-dark .btb-warn    .btb-icon { color: #ffb74d; }

.mdui-theme-layout-dark .btb-close { color: #777; }
.mdui-theme-layout-dark .btb-close:hover { background-color: rgba(255,255,255,0.08); color: #ccc; }

/* ---------- 移动端 ---------- */
@media (max-width: 640px) {
  #toastBar {
    top: auto;
    bottom: 16px;
    right: 12px;
    left: 12px;
    max-width: none;
  }
  .btb-snackbar {
    border-radius: 10px;
    font-size: 13.5px;
    transform: translateY(20px) scale(0.98);
  }
  .btb-snackbar.btb-in { transform: translateY(0) scale(1); }
  .btb-snackbar.btb-out { transform: translateY(20px) scale(0.98); }
}

/* =========================================================
   动态页脚（由 api.js renderFooter 渲染）
   —— Material Design 3 风格 + 主题色适配 + 亮/暗双主题
   主题主色通过 rgb(var(--mdx-theme-color)) 注入
   亮色（默认）：浅灰白色系；暗色：深灰紫黑系
   ========================================================= */

/* ======= 亮色主题（默认，无 .mdui-theme-layout-dark）======= */
.foot {
  background-color: #F3F3F5;                /* 浅灰白 */
  background-image: linear-gradient(
    180deg,
    rgba(var(--mdx-theme-color), 0.08) 0%,
    rgba(var(--mdx-theme-color), 0.02) 50%,
    transparent 100%
  );
  background-blend-mode: normal;
  color: #1C1B1F;
  padding: 64px 20px 32px;
  text-align: center;
  margin-top: 0;
  font-size: 14px;
  line-height: 1.8;
  position: relative;
}
/* 顶部主题色高光细线 */
.foot::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(
    90deg,
    transparent,
    rgb(var(--mdx-theme-color)),
    transparent
  );
  opacity: 0.75;
}
.foot .footer-inner {
  max-width: 960px; margin: 0 auto;
}

/* ---- 社交图标栏（亮色：白卡 + 细边 + 柔阴影）---- */
.footer-social {
  display: flex; justify-content: center; gap: 16px;
  margin-bottom: 32px;
}
.footer-social-item {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px;
  border-radius: 12px;
  background-color: #FFFFFF;
  color: #49454F;
  text-decoration: none;
  border: 1px solid rgba(0,0,0,0.06);
  box-shadow: 0 1px 3px rgba(0,0,0,0.04);
  transition: background-color .2s ease, color .2s ease,
              transform .25s cubic-bezier(.2,0,0,1),
              box-shadow .25s ease, border-color .2s ease;
  position: relative;
  overflow: hidden;
}
.footer-social-item:hover {
  background-color: rgb(var(--mdx-theme-color));
  color: #FFFFFF;
  border-color: rgb(var(--mdx-theme-color));
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(var(--mdx-theme-color), 0.35);
}
.footer-social-item:active { transform: translateY(0); }
.footer-social-item .material-icons { font-size: 22px; }

/* ---- 标题区（亮色：高对比深色）---- */
.footer-title {
  font-size: 24px;
  font-weight: 600;
  color: #1C1B1F;
  letter-spacing: 0.5px;
  margin-bottom: 4px;
  line-height: 1.3;
}
.footer-subtitle {
  font-size: 13px;
  color: #79747E;
  margin-bottom: 32px;
  letter-spacing: 0.1px;
}

/* ---- 自定义 footer HTML ---- */
.footer-custom {
  margin: 8px 0;
  color: #49454F;
  font-size: 13px;
}

/* ---- 版权 ---- */
.footer-copyright {
  font-size: 12px;
  color: #79747E;
  margin-top: 16px;
  letter-spacing: 0.4px;
}
.footer-copyright a {
  color: #49454F;
  text-decoration: none;
  transition: color .15s ease;
}
.footer-copyright a:hover { color: rgb(var(--mdx-theme-color)); }

/* ---- 备案号 ---- */
.footer-filing {
  margin-top: 8px;
  font-size: 12px;
  color: #79747E;
}
.footer-filing a {
  color: #79747E;
  text-decoration: none;
  margin: 0 8px;
  transition: color .15s ease;
}
.footer-filing a:hover { color: rgb(var(--mdx-theme-color)); }

/* 页脚"加载中"占位 */
.foot .foot-loading { color: #79747E; font-size: 13px; }


/* ======= 暗色主题（.mdui-theme-layout-dark）======= */
.mdui-theme-layout-dark .foot {
  background-color: #101014;
  background-image: linear-gradient(
    180deg,
    rgba(var(--mdx-theme-color), 0.10) 0%,
    rgba(var(--mdx-theme-color), 0.03) 40%,
    transparent 100%
  );
  color: #E6E1E5;
}
.mdui-theme-layout-dark .foot::before { opacity: 0.55; }

.mdui-theme-layout-dark .footer-social-item {
  background-color: rgba(255,255,255,0.05);
  color: rgba(255,255,255,0.72);
  border: 1px solid rgba(255,255,255,0.06);
  box-shadow: none;
}
.mdui-theme-layout-dark .footer-social-item:hover {
  background-color: rgba(var(--mdx-theme-color), 0.22);
  color: rgb(var(--mdx-theme-color));
  border-color: transparent;
  box-shadow: 0 6px 18px rgba(0,0,0,0.55),
              0 0 0 1px rgba(var(--mdx-theme-color), 0.25);
}

.mdui-theme-layout-dark .footer-title { color: #FFFFFF; }
.mdui-theme-layout-dark .footer-subtitle { color: rgba(255,255,255,0.52); }
.mdui-theme-layout-dark .footer-custom { color: rgba(255,255,255,0.68); }
.mdui-theme-layout-dark .footer-copyright,
.mdui-theme-layout-dark .footer-filing { color: rgba(255,255,255,0.45); }
.mdui-theme-layout-dark .footer-copyright a { color: rgba(255,255,255,0.68); }


/* ======= 移动端 ======= */
@media (max-width: 640px) {
  .foot { padding: 48px 16px 24px; }
  .footer-social { gap: 12px; margin-bottom: 24px; }
  .footer-social-item { width: 40px; height: 40px; border-radius: 10px; }
  .footer-social-item .material-icons { font-size: 20px; }
  .footer-title { font-size: 20px; letter-spacing: 0.3px; }
  .footer-subtitle { font-size: 12px; margin-bottom: 24px; }
  .footer-copyright { font-size: 11px; }
  .footer-filing { font-size: 11px; }
}