/*
 * 不系舟 (Unmoored) 返回按钮统一样式
 *
 * 引入: <link rel="stylesheet" href="/assets/back-btn.css">
 * 用法: <a href="health.html" class="fh-back-link">‹ 健康</a>
 *
 * 所有页面共用此文件，修改后全站生效。
 */

/* ===== 左上角返回按钮（蓝色强调胶囊） ===== */
.fh-back-link {
  position: fixed;
  top: 12px;
  left: 12px;
  z-index: 200;
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 6px 14px;
  background: rgba(59, 130, 246, 0.15);
  border: 1px solid rgba(59, 130, 246, 0.3);
  border-radius: 20px;
  color: #60a5fa;
  text-decoration: none;
  font-size: 13px;
  font-weight: 600;
  transition: all 0.2s ease;
}
.fh-back-link:hover {
  background: rgba(59, 130, 246, 0.25);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(59, 130, 246, 0.2);
}
.fh-back-link:active {
  transform: scale(0.95);
}

/* 亮色模式适配 */
[data-theme="light"] .fh-back-link {
  background: rgba(59, 130, 246, 0.08);
  border-color: rgba(59, 130, 246, 0.2);
  color: #2563eb;
}
[data-theme="light"] .fh-back-link:hover {
  background: rgba(59, 130, 246, 0.15);
  box-shadow: 0 4px 12px rgba(59, 130, 246, 0.12);
}

/* ===== 页面底部返回按钮 ===== */
.fh-back-bottom {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 10px 24px;
  background: rgba(59, 130, 246, 0.15);
  border: 1px solid rgba(59, 130, 246, 0.3);
  border-radius: 20px;
  color: #60a5fa;
  text-decoration: none;
  font-size: 14px;
  font-weight: 600;
  transition: all 0.2s ease;
}
.fh-back-bottom:hover {
  background: rgba(59, 130, 246, 0.25);
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(59, 130, 246, 0.2);
}
.fh-back-bottom:active {
  transform: scale(0.95);
}
[data-theme="light"] .fh-back-bottom {
  background: rgba(59, 130, 246, 0.08);
  border-color: rgba(59, 130, 246, 0.2);
  color: #2563eb;
}
[data-theme="light"] .fh-back-bottom:hover {
  background: rgba(59, 130, 246, 0.15);
  box-shadow: 0 6px 16px rgba(59, 130, 246, 0.12);
}

/* ===== APP 内隐藏（原生 TopAppBar 已有返回按钮）===== */
.fh-in-app .fh-back-link,
.fh-in-app .fh-back-bottom {
  display: none !important;
}