/*!
 * 极简防走丢导航站 —— 前台样式（唯一入口样式表）
 *
 * 设计语言来源（子比主题 Zibll V9.1）：
 *   css/main.css :: .produck-wid-highlights        产品亮点卡片（卡片/图标块/标题/描述/悬停/响应式）
 *   css/main.css :: .produck-plan-card             产品选项卡（渐变色标 --t-jb 与渐变文字）
 *   css/main.css :: .produck-wid-stats.layout-split 数据卡片（顶部柔和渐变底铺）
 *   css/main.css :: body{--main-radius/--main-shadow/--muted-2-color ...} 设计令牌
 * 详见 docs/01-子比主题源码分析与设计借鉴.md
 *
 * 已精简的部分（本项目不需要）：
 *   图片位、功能勾选列表、按钮、多语言、暗黑模式切换、Swiper、Bootstrap、动画库。
 */

/* ==========================================================================
   1. 设计令牌（取值与子比主题 main.css 的 :root 变量保持一致）
   ========================================================================== */
:root {
  /* 与子比主题同源的令牌 */
  --main-radius: 8px;
  --mini-radius: calc(var(--main-radius) / 1.4);
  --key-color: #333;
  --main-color: #4e5358;
  --muted-color: #777;
  --muted-2-color: #999;
  --muted-3-color: #b1b1b1;
  --body-bg-color: #f5f6f7;
  --main-bg-color: #fff;
  --main-border-color: rgba(50, 50, 50, 0.06);
  --main-shadow: rgba(94, 104, 154, 0.12);

  /* 子比主题卡片间距 --t-gap: 20px */
  --t-gap: 20px;
  --card-min: 240px;
  --card-max: 300px;
  --page-max: 1040px;

  /* 强调色（后台可改），下面的衍生值自动跟随 */
  --accent: #5b7dff;
  --accent-soft: rgba(91, 125, 255, 0.1);

  /* 卡片默认配色（会被 .nav-card.scheme-* 覆盖） */
  --hl-glow: rgba(255, 120, 160, 0.1);
  --hl-glow-2: rgba(255, 160, 185, 0.07);
  --hl-icon-bg: linear-gradient(145deg, #ff5e8a, #ff7ba3);
  --hl-icon-color: #d83067;
  --hl-icon-shadow: rgba(216, 48, 103, 0.35);
  --hl-title-grad: linear-gradient(120deg, #d83067 0%, #ff7ba3 100%);
  --hl-shadow-hover: rgba(216, 48, 103, 0.22);

  /* 切换按钮 / 控件 */
  --ctl-bg: rgba(255, 255, 255, 0.82);
  --ctl-border: rgba(50, 50, 50, 0.08);
  --ctl-color: var(--muted-2-color);
  --ctl-hover-color: var(--accent);
  --ctl-active-bg: var(--accent);
  --ctl-active-color: #fff;
  color-scheme: light;
}

/* ==========================================================================
   1b. 夜间模式
   —— 只覆盖颜色令牌，布局与别处完全不重复
   ========================================================================== */

/* 由 JS 明确指定的主题 */
[data-theme="dark"] {
  --key-color: #f2f4f7;
  --main-color: #dfe3e9;
  --muted-color: #a7abb3;
  --muted-2-color: #8d9199;
  --muted-3-color: #6c7078;
  --body-bg-color: #232529;
  --main-bg-color: #2c2f34;
  --main-border-color: rgba(255, 255, 255, 0.08);
  --main-shadow: rgba(0, 0, 0, 0.34);

  --ctl-bg: rgba(44, 47, 52, 0.86);
  --ctl-border: rgba(255, 255, 255, 0.1);
  color-scheme: dark;
}

[data-theme="light"] {
  color-scheme: light;
}

/*
 * 没有 JS（或 JS 尚未执行）时，auto 交给系统的配色偏好。
 * 注意：只能放在 :root 之外的媒体查询里，避免覆盖用户在按钮上的显式选择。
 */
@media (prefers-color-scheme: dark) {
  html[data-theme="auto"] {
    --key-color: #f2f4f7;
    --main-color: #dfe3e9;
    --muted-color: #a7abb3;
    --muted-2-color: #8d9199;
    --muted-3-color: #6c7078;
    --body-bg-color: #232529;
    --main-bg-color: #2c2f34;
    --main-border-color: rgba(255, 255, 255, 0.08);
    --main-shadow: rgba(0, 0, 0, 0.34);

    --ctl-bg: rgba(44, 47, 52, 0.86);
    --ctl-border: rgba(255, 255, 255, 0.1);
    color-scheme: dark;
  }
}

/* ==========================================================================
   2. 基础重置
   ========================================================================== */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background-color: var(--body-bg-color);
  color: var(--main-color);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC",
    "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 15px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* 页面顶部极淡的强调色光晕，呼应子比卡片的角部晕染 */
body::before {
  content: "";
  position: fixed;
  inset: 0 0 auto 0;
  height: 320px;
  background: radial-gradient(ellipse 60% 100% at 50% 0%, var(--accent-soft) 0%, transparent 70%);
  opacity: 0.85;
  pointer-events: none;
  z-index: 0;
}

/* 夜间模式下光晕更弱，避免灰底上出现脏色块 */
[data-theme="dark"] body::before {
  opacity: 0.5;
}

@media (prefers-color-scheme: dark) {
  html[data-theme="auto"] body::before {
    opacity: 0.5;
  }
}

a {
  color: inherit;
  text-decoration: none;
}

img {
  max-width: 100%;
  height: auto;
  border: 0;
}

/* 键盘可达性：只在键盘聚焦时显示焦点环 */
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* 入场动画用的位移变量：默认 0，支持 translate 属性的浏览器由动画驱动，
   不支持的浏览器在下方 @supports not 里改用 transform 过渡 */
.nav-card {
  --i: 0;
  --rise: 0;
}

.nav-visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ==========================================================================
   3. 页面骨架
   ========================================================================== */
.nav-shell {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: var(--page-max);
  margin: 0 auto;
  padding: 52px 20px 0;
  display: flex;
  flex-direction: column;
}

/* ---------- 顶部区域：Logo + 站点名 + 一句说明 ---------- */
.nav-header {
  text-align: center;
  margin-bottom: 40px;
}

.nav-brand {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
}

.nav-logo {
  display: block;
  width: 56px;
  height: 56px;
  flex-shrink: 0;
  border-radius: 16px;
  object-fit: contain;
}

.nav-logo-svg svg {
  display: block;
  width: 100%;
  height: 100%;
}

.nav-title {
  margin: 0;
  font-size: 30px;
  font-weight: 800;
  line-height: 1.25;
  letter-spacing: -0.02em;
  /* 渐变文字：沿用子比 .produck-plan-card .plan-card-title 的手法 */
  background-image: linear-gradient(120deg, var(--accent) 0%, var(--accent-light, var(--accent)) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}

.nav-tagline {
  margin: 12px auto 0;
  max-width: 30em;
  font-size: 14.5px;
  color: var(--muted-2-color);
  line-height: 1.7;
}

/* 浏览器不支持 background-clip:text 时回退为纯色 */
@supports not ((-webkit-background-clip: text) or (background-clip: text)) {
  .nav-title {
    color: var(--accent);
    -webkit-text-fill-color: var(--accent);
    background-image: none;
  }
}

/* ==========================================================================
   4. 卡片网格
   —— 固定列数 + 限宽，避免 4 个入口被拉伸成占满整屏的大卡片
   ========================================================================== */
.nav-grid {
  display: grid;
  gap: var(--t-gap);
  grid-template-columns: repeat(var(--cols, 3), minmax(0, 1fr));
  max-width: calc(var(--cols, 3) * var(--card-max) + (var(--cols, 3) - 1) * var(--t-gap));
  margin: 0 auto;
  width: 100%;
  /* 列数由 body 上的 --cols 决定，见下方响应式段落 */
}

.nav-empty {
  margin: 0 auto;
  max-width: 420px;
  padding: 28px 22px;
  text-align: center;
  color: var(--muted-2-color);
  font-size: 14px;
  background-color: var(--main-bg-color);
  border-radius: var(--main-radius);
  box-shadow: 0 5px 20px 0 var(--main-shadow);
}

/* ==========================================================================
   5. 入口卡片
   —— 直接对应子比主题 .produck-wid-highlights .hl-card
   ========================================================================== */
.nav-card {
  position: relative;
  display: flex;
  align-items: center;
  gap: 14px;
  overflow: hidden;
  padding: 18px;
  /* 白底 + 角部极淡彩色晕染（子比 hl-card 的核心观感） */
  background:
    radial-gradient(ellipse 85% 75% at 92% 8%, var(--hl-glow) 0%, transparent 52%),
    radial-gradient(ellipse 70% 60% at 0% 100%, var(--hl-glow-2) 0%, transparent 45%),
    var(--main-bg-color);
  border-radius: var(--main-radius);
  box-shadow: 0 5px 20px 0 var(--main-shadow);
  transition: transform 0.35s ease, box-shadow 0.35s ease;
  -webkit-tap-highlight-color: transparent;
  min-width: 0;
}

/* 悬停：上移 3px，阴影稍收（与子比 hl-card:hover 一致） */
.nav-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 32px -16px var(--hl-shadow-hover);
}

/* 按下反馈 */
.nav-card:active {
  transform: translateY(-1px);
}

/* 卡片主体可点击范围覆盖整卡（链接是唯一可聚焦元素） */
.nav-card-link {
  position: absolute;
  inset: 0;
  z-index: 3;
  border-radius: inherit;
}

.nav-card:focus-within {
  box-shadow: 0 12px 32px -16px var(--hl-shadow-hover);
}

.nav-card:focus-within .nav-card-link:focus-visible {
  outline: 2px solid var(--hl-icon-color);
  outline-offset: -3px;
}

/* ---------- 图标块：48×48 圆角渐变方块（子比 .hl-icon-block） ---------- */
.nav-card-ico {
  width: 48px;
  height: 48px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: calc(var(--main-radius) - 2px);
  background: var(--hl-icon-bg);
  color: #fff;
  font-size: 24px;
  line-height: 1;
  box-shadow: 0 4px 12px -6px var(--hl-icon-shadow);
}

.nav-card-ico .fa {
  font-size: 22px;
}

.nav-card-ico .nav-ico-img {
  width: 26px;
  height: 26px;
  object-fit: contain;
}

/* ---------- 文字区 ---------- */
.nav-card-text {
  min-width: 0;
  flex: 1 1 auto;
  overflow: hidden;
}

/* 标题：18px / 700（子比 .hl-title） */
.nav-card-name {
  display: block;
  margin: 0;
  padding-right: 16px;
  font-size: 17px;
  font-weight: 700;
  line-height: 1.3;
  color: var(--main-color);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* 描述：13px / 淡色，默认不显示（后台每条可填，也可全局关闭） */
.nav-card-desc {
  display: block;
  margin-top: 4px;
  font-size: 13px;
  line-height: 1.5;
  color: var(--muted-2-color);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.nav-cards-show-desc .nav-card-desc {
  display: block;
}

/* 右下角的渐变小箭头（呼应子比 .hl-btn 的箭头位移反馈） */
.nav-card-arrow {
  position: absolute;
  right: 14px;
  bottom: 12px;
  font-size: 12px;
  color: var(--hl-icon-color);
  opacity: 0;
  transform: translateX(-4px);
  transition: opacity 0.3s ease, transform 0.3s ease;
  pointer-events: none;
}

.nav-card:hover .nav-card-arrow {
  opacity: 0.75;
  transform: translateX(0);
}

/* 「新窗口打开」标记 */
.nav-card-target {
  position: absolute;
  top: 12px;
  right: 12px;
  font-size: 10px;
  color: var(--muted-3-color);
  opacity: 0.7;
  transition: opacity 0.3s ease, color 0.3s ease;
  pointer-events: none;
}

.nav-card:hover .nav-card-target {
  color: var(--hl-icon-color);
  opacity: 1;
}

/* ---------- 6 套配色：变量集取自子比 .hl-card.color-* ---------- */
.nav-card.scheme-pink {
  --hl-glow: rgba(255, 120, 160, 0.1);
  --hl-glow-2: rgba(255, 160, 185, 0.07);
  --hl-icon-bg: linear-gradient(145deg, #ff5e8a, #ff7ba3);
  --hl-icon-color: #d83067;
  --hl-icon-shadow: rgba(216, 48, 103, 0.35);
  --hl-title-grad: linear-gradient(120deg, #d83067 0%, #ff7ba3 100%);
  --hl-shadow-hover: rgba(216, 48, 103, 0.24);
}

.nav-card.scheme-purple {
  --hl-glow: rgba(130, 115, 255, 0.09);
  --hl-glow-2: rgba(160, 148, 255, 0.06);
  --hl-icon-bg: linear-gradient(145deg, #6d5fff, #8f86ff);
  --hl-icon-color: #4d3fdb;
  --hl-icon-shadow: rgba(77, 63, 219, 0.32);
  --hl-title-grad: linear-gradient(120deg, #4d3fdb 0%, #8f86ff 100%);
  --hl-shadow-hover: rgba(77, 63, 219, 0.22);
}

.nav-card.scheme-orange {
  --hl-glow: rgba(255, 175, 90, 0.1);
  --hl-glow-2: rgba(255, 200, 130, 0.06);
  --hl-icon-bg: linear-gradient(145deg, #ffaa4d, #ffc060);
  --hl-icon-color: #e07810;
  --hl-icon-shadow: rgba(232, 138, 38, 0.32);
  --hl-title-grad: linear-gradient(120deg, #e07810 0%, #ffc060 100%);
  --hl-shadow-hover: rgba(232, 138, 38, 0.22);
}

.nav-card.scheme-blue {
  --hl-glow: rgba(82, 153, 251, 0.15);
  --hl-glow-2: rgba(135, 175, 255, 0.1);
  --hl-icon-bg: linear-gradient(145deg, #5b7dff, #7f9dff);
  --hl-icon-color: #3658e6;
  --hl-icon-shadow: rgba(54, 88, 230, 0.3);
  --hl-title-grad: linear-gradient(120deg, #3658e6 0%, #7f9dff 100%);
  --hl-shadow-hover: rgba(54, 88, 230, 0.22);
}

.nav-card.scheme-green {
  --hl-glow: rgba(60, 200, 140, 0.09);
  --hl-glow-2: rgba(100, 210, 160, 0.06);
  --hl-icon-bg: linear-gradient(145deg, #2dbb78, #52d598);
  --hl-icon-color: #1e9c63;
  --hl-icon-shadow: rgba(30, 156, 99, 0.3);
  --hl-title-grad: linear-gradient(120deg, #1e9c63 0%, #52d598 100%);
  --hl-shadow-hover: rgba(30, 156, 99, 0.22);
}

.nav-card.scheme-red {
  --hl-glow: rgba(255, 100, 100, 0.09);
  --hl-glow-2: rgba(255, 140, 140, 0.06);
  --hl-icon-bg: linear-gradient(145deg, #ff5e5e, #ff8585);
  --hl-icon-color: #e23535;
  --hl-icon-shadow: rgba(226, 53, 53, 0.32);
  --hl-title-grad: linear-gradient(120deg, #e23535 0%, #ff8585 100%);
  --hl-shadow-hover: rgba(226, 53, 53, 0.22);
}

/* 「渐变标题」模式：卡片名称也使用渐变文字（后台可开关） */
.nav-titles-gradient .nav-card-name {
  background-image: var(--hl-title-grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}

@supports not ((-webkit-background-clip: text) or (background-clip: text)) {
  .nav-titles-gradient .nav-card-name {
    color: var(--hl-icon-color);
    -webkit-text-fill-color: var(--hl-icon-color);
    background-image: none;
  }
}

/* 触屏设备不做悬停位移，避免 hover 状态残留 */
@media (hover: none) {
  .nav-card:hover {
    transform: none;
    box-shadow: 0 5px 20px 0 var(--main-shadow);
  }
}

/* 尊重「减少动态效果」的系统偏好 */
@media (prefers-reduced-motion: reduce) {
  .nav-card,
  .nav-card-arrow,
  .nav-card-target,
  .nav-card-ico {
    transition: none !important;
  }
  .nav-card {
    animation: none !important;
  }
  .nav-card:hover {
    transform: none;
  }
}

/* ---------- 入场动画：一次性淡入 + 上浮，逐张错开 ----------
   位移使用 translate 属性（而不是 transform），
   这样 @media (hover:none) 里取消 hover 位移的 transform:none 不会把动画抹掉。 */
@keyframes nav-rise {
  from {
    opacity: 0;
    translate: 0 10px;
  }
  to {
    opacity: 1;
    translate: 0 0;
  }
}

.nav-card {
  animation: nav-rise 0.42s cubic-bezier(0.22, 0.61, 0.36, 1) both;
  animation-delay: calc(var(--i) * 55ms);
}

/* 老浏览器不支持 translate 属性：只做透明度淡入，不做位移 */
@supports not (translate: 0 10px) {
  @keyframes nav-rise {
    from {
      opacity: 0;
    }
    to {
      opacity: 1;
    }
  }
}

/* ==========================================================================
   5b. 右上角控件（主题切换 / 语言切换）
   —— 不用导航栏，只是一组小按钮，保持"打开就能看到所有入口"
   ========================================================================== */
.nav-tools {
  position: fixed;
  top: 14px;
  right: 16px;
  z-index: 10;
  display: flex;
  align-items: center;
  gap: 6px;
}

.nav-tool {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  min-width: 34px;
  height: 34px;
  padding: 0 9px;
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 500;
  line-height: 1;
  color: var(--ctl-color);
  background-color: var(--ctl-bg);
  border: 1px solid var(--ctl-border);
  border-radius: 999px;
  cursor: pointer;
  text-decoration: none;
  box-shadow: 0 2px 10px -4px var(--main-shadow);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  transition: color 0.2s ease, border-color 0.2s ease, background-color 0.2s ease;
  -webkit-tap-highlight-color: transparent;
}

.nav-tool:hover {
  color: var(--ctl-hover-color);
  border-color: var(--ctl-hover-color);
  text-decoration: none;
}

.nav-tool .fa {
  font-size: 13px;
}

/* 当前语言高亮 */
.nav-tool.is-active {
  color: var(--ctl-active-color);
  background-color: var(--ctl-active-bg);
  border-color: var(--ctl-active-bg);
}

.nav-tool.is-active:hover {
  color: #fff;
}

/* 主题图标：日间显示月亮（点了会变暗），夜间显示太阳 */
.nav-tool-theme .fa-sun-o,
.nav-tool-theme .fa-moon-o {
  display: none;
}

[data-theme="light"] .nav-tool-theme .fa-moon-o {
  display: inline-block;
}

[data-theme="dark"] .nav-tool-theme .fa-sun-o {
  display: inline-block;
}

/* auto：按系统偏好显示对应图标；系统亮色给月亮 */
@media (prefers-color-scheme: light) {
  [data-theme="auto"] .nav-tool-theme .fa-moon-o {
    display: inline-block;
  }
}

@media (prefers-color-scheme: dark) {
  [data-theme="auto"] .nav-tool-theme .fa-sun-o {
    display: inline-block;
  }
}

/* 未加载 JS 时，主题按钮没有作用，隐藏以免误点 */
html:not(.nav-js) .nav-tool-theme {
  display: none;
}

@media (max-width: 767px) {
  .nav-tools {
    top: 10px;
    right: 10px;
    gap: 5px;
  }

  .nav-tool {
    min-width: 32px;
    height: 32px;
    padding: 0 8px;
    font-size: 12px;
  }
}

/* ==========================================================================
   6. 底部区域
   ========================================================================== */.nav-footer {
  /* margin-top:auto 把页脚推到底部，但不会把内容撑出多余空白 */
  margin-top: auto;
  padding: 36px 20px 32px;
  text-align: center;
}

.nav-footer-inner {
  width: 100%;
  max-width: var(--page-max);
  margin: 0 auto;
  padding-top: 20px;
  border-top: 1px solid var(--main-border-color);
  font-size: 12.5px;
  line-height: 1.8;
  color: var(--muted-2-color);
  word-break: break-word;
}

/* ==========================================================================
   7. 响应式
   ========================================================================== */

/* 桌面：默认 3 列 */
body {
  --cols: 3;
}

/* 平板：≤1024px → 2 列（同子比 1024px 断点） */
@media (max-width: 1024px) {
  body {
    --cols: 2;
  }

  .nav-shell {
    padding-top: 40px;
  }

  .nav-title {
    font-size: 27px;
  }
}

/* 手机：≤767px → 2 列、间距 12px（同子比 767px 断点） */
@media (max-width: 767px) {
  body {
    --cols: 2;
    --t-gap: 12px;
    --card-max: 100%;
  }

  .nav-shell {
    padding: 34px 14px 0;
  }

  .nav-header {
    margin-bottom: 26px;
  }

  .nav-logo {
    width: 48px;
    height: 48px;
    border-radius: 14px;
  }

  .nav-title {
    font-size: 22px;
  }

  .nav-tagline {
    margin-top: 8px;
    font-size: 13.5px;
  }

  .nav-grid {
    max-width: 100%;
  }

  /* 手机端卡片改为纵向：图标在上、名称在下，点击区域方正好按 */
  .nav-card {
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 10px;
    padding: 14px;
    min-height: 104px;
  }

  .nav-card-ico {
    width: 42px;
    height: 42px;
    font-size: 20px;
  }

  .nav-card-ico .fa {
    font-size: 19px;
  }

  .nav-card-ico .nav-ico-img {
    width: 22px;
    height: 22px;
  }

  .nav-card-name {
    font-size: 14.5px;
    white-space: normal;
    /* 最多两行，避免长名称撑破卡片 */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  .nav-card-desc {
    font-size: 12px;
    white-space: normal;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
  }

  .nav-card-text {
    width: 100%;
  }

  .nav-card-target,
  .nav-card-arrow {
    display: none;
  }

  .nav-footer {
    padding: 26px 14px 24px;
  }
}

/* 超窄屏（≤380px）保持 2 列但进一步压缩，确保不出横向滚动条 */
@media (max-width: 380px) {
  body {
    --t-gap: 10px;
  }

  .nav-shell {
    padding-left: 10px;
    padding-right: 10px;
  }

  .nav-card {
    padding: 13px 11px;
    min-height: 100px;
  }

  .nav-card-name {
    font-size: 13.5px;
  }
}

/* ==========================================================================
   8. 打印
   ========================================================================== */
@media print {
  body::before,
  .nav-card-arrow,
  .nav-card-target {
    display: none;
  }

  .nav-card {
    animation: none;
    box-shadow: none;
    border: 1px solid var(--main-border-color);
  }
}