/* ==========================================================================
   ai007 · 复刻 ai-bot.cn（onenav）布局 + 透明毛玻璃
   ---------------------------------------------------------------------
   结构对齐参考站：固定左侧栏 220px / 顶栏 74px / Hero 大 Logo + 超级搜索 /
   频道标签 / 卡片栅格（xl 每行 6 卡）
   视觉升级：内容容器改为「半透明白 + backdrop-filter 模糊」的毛玻璃
   ========================================================================== */

:root {
  --pri: #1e80ff;
  --pri-hover: #0060df;
  --pri-l: rgba(30, 128, 255, .10);
  --pri-bd: rgba(30, 128, 255, .30);

  --text: #1d2129;
  --text-2: #4e5969;
  --text-3: #86909c;
  --bg: #f7f8fa;

  --g-bg: rgba(255, 255, 255, .78);
  --g-bg-hi: rgba(255, 255, 255, .92);
  --g-bg-lo: rgba(255, 255, 255, .58);
  --g-bd: rgba(255, 255, 255, .70);
  /* 控件描边：--g-bd 在浅色下是「白色高光」语义，拿来当按钮边框会白底白边看不出边界。
     这个变量专供 chip / 按钮 / 输入框，浅色下是可见的浅灰，深色下是可见的浅白。 */
  --ctl-bd: rgba(29, 33, 41, .16);
  --ctl-bd-hover: rgba(29, 33, 41, .26);
  --g-edge: rgba(29, 33, 41, .07);
  --g-shadow: 0 4px 24px rgba(0, 0, 0, .06);
  --g-shadow-hover: 0 12px 32px -12px rgba(30, 128, 255, .28);
  --blur: 20px;

  /* 弹窗：遮罩、投影、悬停底色。深色下必须单独给值，
     否则弹窗会是一块刺眼的白板 */
  --mask: rgba(17, 21, 28, .48);
  --panel-shadow: 0 18px 60px rgba(17, 21, 28, .22);
  --hover-bg: rgba(29, 33, 41, .06);
  color-scheme: light;

  --sidebar-w: 220px;
  --header-h: 74px;
  --radius: .45rem;
  --radius-lg: .75rem;
}

html[data-theme="dark"] {
  --text: #e6e8ee;
  --text-2: #a8aeba;
  --text-3: #757c8a;
  --bg: #12161f;

  --g-bg: rgba(28, 33, 44, .78);
  --g-bg-hi: rgba(38, 45, 60, .92);
  --g-bg-lo: rgba(24, 29, 40, .60);
  --g-bd: rgba(255, 255, 255, .09);
  --ctl-bd: rgba(255, 255, 255, .16);
  --ctl-bd-hover: rgba(255, 255, 255, .26);
  --g-edge: rgba(255, 255, 255, .06);
  --g-shadow: 0 2px 12px rgba(0, 0, 0, .30);
  --g-shadow-hover: 0 26px 40px -24px rgba(0, 0, 0, .65);
  --pri-l: rgba(90, 167, 255, .16);
  --pri-bd: rgba(90, 167, 255, .34);

  --mask: rgba(0, 0, 0, .62);
  --panel-shadow: 0 18px 60px rgba(0, 0, 0, .62);
  --hover-bg: rgba(255, 255, 255, .08);

  /* 让原生控件跟着变暗：<select> 的下拉浮层、滚动条、日期选择器
     都由浏览器绘制，不受 CSS 背景控制，只能靠 color-scheme 通知它 */
  color-scheme: dark;
}

* { box-sizing: border-box; }
html, body { height: 100%; }

body {
  margin: 0;
  font-family: "PingFang SC", "HarmonyOS Sans SC", "Microsoft YaHei", -apple-system,
    BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: 14px;
  line-height: 1.5;
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

a { color: inherit; text-decoration: none; }
img { border: 0; }
button { font-family: inherit; }

/* ---------- 背景：复刻参考站顶部 550px 模糊色斑 ---------- */
.bg-canvas {
  position: fixed;
  inset: 0;
  z-index: -2;
  overflow: hidden;
  background:
    radial-gradient(ellipse 80% 55% at 15% 8%, rgba(255, 230, 180, .55) 0%, transparent 60%),
    radial-gradient(ellipse 70% 50% at 85% 25%, rgba(180, 215, 255, .55) 0%, transparent 55%),
    radial-gradient(ellipse 85% 65% at 50% 100%, rgba(232, 205, 255, .45) 0%, transparent 60%),
    linear-gradient(180deg, #fff8ee 0%, #eef5ff 45%, #f6f0ff 100%);
}
html[data-theme="dark"] .bg-canvas {
  background:
    radial-gradient(ellipse 80% 55% at 15% 8%, rgba(58, 76, 118, .55) 0%, transparent 60%),
    radial-gradient(ellipse 70% 50% at 85% 25%, rgba(28, 78, 148, .50) 0%, transparent 55%),
    radial-gradient(ellipse 85% 65% at 50% 100%, rgba(68, 48, 108, .45) 0%, transparent 60%),
    linear-gradient(180deg, #16181d 0%, #12161f 45%, #14121b 100%);
}

/* 雨滴涟漪动画层：在渐变之上、内容之下 */
.rain-bg {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  overflow: hidden;
}
.rain-bg canvas { width: 100%; height: 100%; display: block; }

/* ---------- 毛玻璃通用 ---------- */
.glass {
  background: var(--g-bg);
  border: 1px solid var(--g-bd);
  box-shadow: var(--g-shadow);
  backdrop-filter: blur(var(--blur)) saturate(180%);
  -webkit-backdrop-filter: blur(var(--blur)) saturate(180%);
}

/* ==========================================================================
   左侧固定侧边栏
   ========================================================================== */
.sidebar {
  position: fixed;
  left: 0; top: 0;
  width: var(--sidebar-w);
  height: 100vh;
  z-index: 1081;
  display: flex;
  flex-direction: column;
  background: var(--g-bg);
  border-right: 1px solid var(--g-bd);
  box-shadow: var(--g-shadow);
  backdrop-filter: blur(26px) saturate(180%);
  -webkit-backdrop-filter: blur(26px) saturate(180%);
  transition: width .3s, transform .3s;
}

.sidebar-logo {
  height: var(--header-h);
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
  border-bottom: 1px solid var(--g-edge);
}
.sidebar-logo .lg {
  max-height: 40px;
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 19px;
  font-weight: 800;
  letter-spacing: -.5px;
  color: var(--text);
}
.sidebar-logo .mark {
  width: 34px; height: 34px;
  border-radius: 10px;
  display: grid; place-items: center;
  background: linear-gradient(135deg, var(--pri) 0%, var(--pri-hover) 100%);
  color: #fff;
  font-size: 14px;
  font-weight: 900;
  box-shadow: 0 6px 16px rgba(30, 128, 255, .35);
  flex: none;
}

.sidebar-menu {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 8px 0;
  scrollbar-width: thin;
}
.sidebar-menu::-webkit-scrollbar { width: 5px; }
.sidebar-menu::-webkit-scrollbar-thumb { background: rgba(136, 136, 136, .25); border-radius: 3px; }

.side-item {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 1.5px 8px;
  padding: 10px;
  border-radius: var(--radius);
  color: var(--text-2);
  font-size: 14px;
  white-space: nowrap;
  transition: all .25s;
}
.side-item:hover { background: var(--pri-l); color: var(--pri); }
.side-item.on { background: var(--pri-l); color: var(--pri); font-weight: 600; }
.side-item .ic { width: 18px; height: 18px; flex: none; display: grid; place-items: center; }
.side-item .cnt {
  margin-left: auto;
  font-size: 11px;
  padding: 0 6px;
  border-radius: 20px;
  background: rgba(136, 136, 136, .14);
  color: var(--text-3);
  font-variant-numeric: tabular-nums;
}
.side-sub { margin: 0 0 6px; padding: 0; list-style: none; }
.side-sub a {
  display: flex;
  align-items: center;
  padding: 7px 10px 7px 38px;
  margin: 1px 8px;
  border-radius: var(--radius);
  font-size: 13px;
  color: var(--text-3);
  transition: all .2s;
}
.side-sub a:hover { color: var(--pri); background: var(--pri-l); }

.sidebar-foot {
  flex: none;
  padding: 10px 14px;
  border-top: 1px solid var(--g-edge);
  font-size: 11.5px;
  color: var(--text-3);
  line-height: 1.7;
}

/* ==========================================================================
   主内容区
   ========================================================================== */
.main-content { margin-left: var(--sidebar-w); min-height: 100vh; display: flex; flex-direction: column; }

.page-header {
  position: sticky;
  top: 0;
  z-index: 1080;
  height: var(--header-h);
  background: var(--g-bg-lo);
  border-bottom: 1px solid var(--g-bd);
  box-shadow: 0 0 25px 5px rgba(10, 10, 10, .05);
  backdrop-filter: blur(22px) saturate(180%);
  -webkit-backdrop-filter: blur(22px) saturate(180%);
}
html[data-theme="dark"] .page-header { box-shadow: 0 0 25px 5px rgba(0, 0, 0, .35); }

.header-inner { height: 100%; display: flex; align-items: center; gap: 4px; padding: 0 22px; }

.header-nav { display: flex; align-items: center; }
.header-nav a {
  display: block;
  padding: 10px 15px;
  font-size: 14px;
  color: #777;
  border-radius: var(--radius);
  transition: color .2s, background .2s;
}
html[data-theme="dark"] .header-nav a { color: var(--text-2); }
.header-nav a:hover { color: var(--pri); background: var(--pri-l); }
.header-nav a.on { color: var(--pri); font-weight: 600; }

.sp { flex: 1; }

.hdr-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 38px;
  padding: 0 16px;
  border-radius: 50px;
  border: 1px solid var(--g-bd);
  background: var(--g-bg-hi);
  color: var(--text-2);
  font-size: 13.5px;
  cursor: pointer;
  transition: all .25s;
  backdrop-filter: blur(12px);
  white-space: nowrap;
}
.hdr-btn:hover { color: var(--pri); border-color: var(--pri-bd); transform: translateY(-1px); }
.hdr-btn.primary {
  border: none;
  color: #fff;
  background: var(--pri);
  box-shadow: 0 5px 20px -3px rgba(30, 128, 255, .6);
}
.hdr-btn.primary:hover { background: var(--pri-hover); box-shadow: 0 5px 20px -3px rgba(0, 96, 223, .6); }
.hdr-btn[disabled] { opacity: .6; cursor: not-allowed; transform: none; }

.icon-btn {
  width: 38px; height: 38px;
  display: grid; place-items: center;
  border-radius: 50%;
  border: 1px solid var(--ctl-bd);
  background: var(--g-bg-hi);
  color: var(--text-2);
  cursor: pointer;
  transition: all .2s;
}
.icon-btn:hover { color: var(--pri); border-color: var(--pri-bd); }

.menu-btn { display: none; }

/* ---------- Hero：大 Logo + 超级搜索 ---------- */
.hero-big { padding: 46px 0 30px; text-align: center; }
.hero-logo { display: inline-flex; align-items: center; gap: 14px; margin-bottom: 26px; }
.hero-logo .mark-lg {
  width: 84px; height: 84px;
  border-radius: 24px;
  display: grid; place-items: center;
  background: linear-gradient(135deg, var(--pri) 0%, var(--pri-hover) 100%);
  color: #fff;
  font-size: 34px;
  font-weight: 900;
  letter-spacing: -1px;
  box-shadow: 0 16px 40px -12px rgba(30, 128, 255, .65);
}
.hero-logo .tt { text-align: left; }
.hero-logo h1 { margin: 0; font-size: 30px; font-weight: 800; letter-spacing: -.8px; line-height: 1.15; }
.hero-logo p { margin: 4px 0 0; font-size: 13.5px; color: var(--text-3); letter-spacing: .2px; }

.super-search { width: min(680px, calc(100% - 48px)); margin: 0 auto; position: relative; }

.search-tabs { display: flex; justify-content: center; flex-wrap: wrap; gap: 2px; margin-bottom: 14px; }
.search-tab {
  padding: 5px 16px;
  border-radius: 50px;
  font-size: 14px;
  color: var(--text-3);
  cursor: pointer;
  border: none;
  background: transparent;
  transition: all .22s;
}
.search-tab:hover { color: var(--pri); }
.search-tab.active { color: var(--pri); font-weight: 600; background: var(--pri-l); }

.sform {
  display: flex;
  align-items: center;
  height: 56px;
  padding: 0 6px 0 22px;
  border-radius: 50px;
  background: var(--g-bg-hi);
  border: 1px solid var(--g-bd);
  box-shadow: 0 10px 34px -12px rgba(50, 60, 120, .28);
  backdrop-filter: blur(26px) saturate(180%);
  -webkit-backdrop-filter: blur(26px) saturate(180%);
  transition: box-shadow .28s, transform .28s;
}
.sform:focus-within { box-shadow: 0 16px 44px -12px rgba(30, 128, 255, .42); transform: translateY(-1px); }
.sform input {
  flex: 1;
  min-width: 0;
  height: 100%;
  border: none;
  outline: none;
  background: transparent;
  color: var(--text);
  font-size: 15px;
  font-family: inherit;
}
.sform input::placeholder { color: var(--text-3); }
.sform button {
  flex: none;
  width: 44px; height: 44px;
  border-radius: 50%;
  border: none;
  background: var(--pri);
  color: #fff;
  cursor: pointer;
  display: grid;
  place-items: center;
  box-shadow: 0 5px 20px -3px rgba(30, 128, 255, .6);
  transition: all .22s;
}
.sform button:hover { background: var(--pri-hover); transform: scale(1.05); }

.search-src { display: flex; justify-content: center; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.search-src span {
  font-size: 12.5px;
  color: var(--text-3);
  padding: 3px 12px;
  border-radius: 20px;
  transition: all .2s;
  cursor: pointer;
}
.search-src span:hover { color: var(--pri); background: var(--pri-l); }
.search-src span.active { color: var(--pri); background: var(--pri-l); }

/* ---------- 频道标签 ---------- */
.chan-bar {
  width: min(1100px, calc(100% - 48px));
  margin: 26px auto 0;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 8px;
}
.chan {
  padding: 6px 16px;
  border-radius: 50px;
  border: 1px solid var(--g-bd);
  background: var(--g-bg);
  color: var(--text-2);
  font-size: 13.5px;
  cursor: pointer;
  transition: all .22s;
  backdrop-filter: blur(12px);
  white-space: nowrap;
}
.chan:hover { color: var(--pri); border-color: var(--pri-bd); transform: translateY(-1px); }
.chan.on {
  color: #fff;
  background: var(--pri);
  border-color: transparent;
  box-shadow: 0 5px 20px -3px rgba(30, 128, 255, .6);
}

/* ==========================================================================
   内容容器
   ========================================================================== */
.container {
  width: 100%;
  max-width: 1900px;
  margin: 0 auto;
  padding: 26px 30px 50px;
  flex: 1;
}

.sec-head { display: flex; align-items: center; gap: 12px; margin: 0 0 18px; }
.sec-head h2 {
  margin: 0;
  font-size: 19px;
  font-weight: 700;
  letter-spacing: -.2px;
  position: relative;
  padding-left: 12px;
}
.sec-head h2::before {
  content: "";
  position: absolute;
  left: 0; top: 50%;
  transform: translateY(-50%);
  width: 4px; height: 18px;
  border-radius: 3px;
  background: var(--pri);
}
.sec-head .ln { flex: 1; height: 1px; background: linear-gradient(90deg, var(--g-bd), transparent); }
.sec-head .more { font-size: 13px; color: var(--text-3); white-space: nowrap; }
.sec-head .more:hover { color: var(--pri); }

/* ---------- 卡片栅格 ---------- */
.card-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 14px; }

.u-card {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 15px;
  border-radius: var(--radius);
  background: var(--g-bg);
  border: 1px solid var(--g-bd);
  box-shadow: var(--g-shadow);
  backdrop-filter: blur(18px) saturate(175%);
  -webkit-backdrop-filter: blur(18px) saturate(175%);
  transition: transform .3s ease, box-shadow .3s ease, background .3s;
  position: relative;
  overflow: hidden;
  min-height: 70px;
}
.u-card:hover { transform: translateY(-6px); box-shadow: var(--g-shadow-hover); background: var(--g-bg-hi); }
.u-card .fav {
  width: 40px; height: 40px;
  flex: none;
  border-radius: 50%;
  display: grid; place-items: center;
  background: rgba(128, 128, 128, .1);
  font-size: 13px;
  font-weight: 800;
  color: var(--pri);
  overflow: hidden;
}
.u-card .fav.brand {
  background: linear-gradient(135deg, var(--pri), var(--pri-hover));
  color: #fff;
  font-size: 12.5px;
  letter-spacing: -.2px;
}
.u-card .info { min-width: 0; flex: 1; }
.u-card .nm {
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: block;
}
.u-card .ds {
  margin: 1px 0 0;
  font-size: 12px;
  color: var(--text-3);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: block;
}

/* ---------- 资讯大卡 ---------- */
.news-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.n-card {
  display: flex;
  flex-direction: column;
  gap: 9px;
  padding: 16px 17px;
  border-radius: var(--radius-lg);
  background: var(--g-bg);
  border: 1px solid var(--g-bd);
  box-shadow: var(--g-shadow);
  backdrop-filter: blur(18px) saturate(175%);
  -webkit-backdrop-filter: blur(18px) saturate(175%);
  transition: transform .3s ease, box-shadow .3s ease, background .3s;
  position: relative;
  overflow: hidden;
}
.n-card::before {
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 3px;
  background: var(--tag, var(--pri));
  opacity: 0;
  transition: opacity .3s;
}
.n-card:hover { transform: translateY(-6px); box-shadow: var(--g-shadow-hover); background: var(--g-bg-hi); }
.n-card:hover::before { opacity: 1; }

.n-top { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--text-3); min-height: 21px; }
.n-tag {
  display: inline-flex;
  align-items: center;
  height: 21px;
  padding: 0 8px;
  border-radius: 5px;
  font-size: 11.5px;
  font-weight: 600;
  color: var(--tag, var(--pri));
  background: color-mix(in srgb, var(--tag, var(--pri)) 12%, transparent);
  white-space: nowrap;
}
.n-src { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 46%; }
.n-ago { margin-left: auto; white-space: nowrap; font-variant-numeric: tabular-nums; }

.n-title {
  margin: 0;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.5;
  color: var(--text);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 45px;
}
.n-card:hover .n-title { color: var(--pri); }

.n-desc {
  margin: 0;
  font-size: 12.5px;
  line-height: 1.65;
  color: var(--text-3);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 41px;
}

.skeleton {
  height: 132px;
  border-radius: var(--radius-lg);
  background: linear-gradient(100deg, var(--g-bg-lo) 20%, var(--g-bg-hi) 40%, var(--g-bg-lo) 60%);
  background-size: 220% 100%;
  animation: shimmer 1.4s linear infinite;
  border: 1px solid var(--g-bd);
}
@keyframes shimmer { from { background-position: 180% 0; } to { background-position: -80% 0; } }

.empty {
  padding: 56px 20px;
  text-align: center;
  color: var(--text-3);
  font-size: 14px;
  border-radius: var(--radius-lg);
  background: var(--g-bg-lo);
  border: 1px solid var(--g-bd);
}

.load-more-wrap { text-align: center; margin-top: 26px; }
.load-more {
  padding: 11px 40px;
  border-radius: 50px;
  border: 1px solid var(--g-bd);
  background: var(--g-bg-hi);
  color: var(--text-2);
  font-size: 14px;
  cursor: pointer;
  backdrop-filter: blur(12px);
  transition: all .25s;
}
.load-more:hover { color: var(--pri); border-color: var(--pri-bd); transform: translateY(-1px); }

/* ==========================================================================
   时间轴：复刻 .news-list
   ========================================================================== */
.news-list { position: relative; max-width: 1080px; }

.news-date {
  position: relative;
  margin-left: 15px;
  padding: 32px 20px 12px;
  font-size: 20px;
  line-height: 26px;
  font-weight: 700;
  color: var(--pri);
  border-left: 1px dashed rgba(153, 246, 228, .9);
}
.news-date::before {
  content: "";
  position: absolute;
  left: -8px; top: 38px;
  width: 16px; height: 16px;
  border-radius: 1px;
  background: var(--pri);
  box-shadow: 0 0 0 4px rgba(30, 128, 255, .14);
}

.news-item {
  position: relative;
  margin-left: 15px;
  padding: 20px 0 5px 20px;
  border-left: 1px dashed rgba(153, 246, 228, .9);
}
.news-item::before {
  content: "";
  position: absolute;
  left: -7px; top: 26px;
  width: 9px; height: 9px;
  border-radius: 50%;
  border: 4px solid var(--pri);
  background: var(--bg);
  box-sizing: content-box;
}
html[data-theme="dark"] .news-date,
html[data-theme="dark"] .news-item { border-left-color: rgba(45, 190, 200, .35); }
html[data-theme="dark"] .news-item::before { background: #10201e; }

.news-time { display: block; margin-bottom: 8px; font-size: 13px; color: var(--text-3); font-variant-numeric: tabular-nums; }
.news-content h2 { position: relative; margin: 0 0 6px; font-size: 17px; line-height: 1.45; font-weight: 600; }
.news-content h2 a { color: var(--text); }
.news-content h2 a:hover { color: var(--pri); }
.news-content p { margin: 0; font-size: 14px; line-height: 1.7; color: var(--text-2); }
.news-src {
  display: inline-block;
  margin-top: 7px;
  font-size: 12px;
  color: var(--text-3);
  padding: 2px 10px;
  border-radius: 20px;
  background: rgba(136, 136, 136, .1);
}
.news-src:hover { color: var(--pri); background: var(--pri-l); }

.tl-filter { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.tl-filter button {
  padding: 5px 14px;
  border-radius: 50px;
  border: 1px solid var(--g-bd);
  background: var(--g-bg-lo);
  color: var(--text-2);
  font-size: 13px;
  cursor: pointer;
  transition: all .2s;
}
.tl-filter button:hover { color: var(--pri); border-color: var(--pri-bd); }
.tl-filter button.on { color: #fff; background: var(--pri); border-color: transparent; box-shadow: 0 5px 18px -4px rgba(30, 128, 255, .6); }

/* ==========================================================================
   服务商卡片
   ========================================================================== */
.p-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 13px; }
.p-card {
  display: flex;
  flex-direction: column;
  gap: 7px;
  padding: 12px 13px;
  border-radius: var(--radius);
  background: var(--g-bg);
  border: 1px solid var(--g-bd);
  box-shadow: var(--g-shadow);
  backdrop-filter: blur(18px) saturate(175%);
  -webkit-backdrop-filter: blur(18px) saturate(175%);
  transition: transform .3s ease, box-shadow .3s ease;
  position: relative;
}
.p-card:hover { transform: translateY(-3px); box-shadow: var(--g-shadow-hover); }
.p-card.featured { border-color: var(--pri-bd); }
.p-card.featured::after {
  content: "推荐";
  position: absolute;
  top: 0; right: 0;
  padding: 2px 9px;
  font-size: 10px;
  font-weight: 700;
  color: #fff;
  background: var(--pri);
  border-radius: 0 var(--radius) 0 8px;
}
.p-head { display: flex; align-items: center; gap: 9px; min-width: 0; }
.p-logo {
  width: 32px; height: 32px;
  flex: none;
  border-radius: 9px;
  display: grid; place-items: center;
  font-size: 12px; font-weight: 800; color: #fff;
  background: linear-gradient(135deg, var(--pri), var(--pri-hover));
  box-shadow: 0 4px 11px -4px rgba(30, 128, 255, .5);
}
/* 名字区 flex-basis:0 让它按「剩余空间」分配，而不是按内容宽度抢位；
   状态标签 flex:none 固定不压缩。两者配合，长名字只会省略自己，不会挤走右边。 */
.p-head > div { min-width: 0; flex: 1 1 0; }
.p-head > .dot-st { flex: none; }
.p-name {
  font-size: 14px; font-weight: 700; line-height: 1.35;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.p-meta { font-size: 11.5px; color: var(--text-3); line-height: 1.5; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.p-desc {
  margin: 0; font-size: 12.5px; line-height: 1.55; color: var(--text-2);
  /* 固定占 2 行高度：字少的站也不会让卡片变矮，整行网格对齐 */
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  min-height: calc(2 * 1.55em);
}
.p-tags { display: flex; flex-wrap: wrap; gap: 5px; }
.p-tags .t { font-size: 10.5px; padding: 1px 7px; border-radius: 4px; background: var(--pri-l); color: var(--pri); font-weight: 500; }
.p-models { font-size: 11.5px; color: var(--text-3); line-height: 1.55; display: flex; flex-wrap: nowrap; gap: 4px; align-items: center; overflow: hidden; }
.p-price { display: flex; align-items: center; gap: 8px; padding-top: 8px; border-top: 1px solid var(--g-edge); margin-top: auto; }
.p-price > div { min-width: 0; }
.p-ratio { font-size: 17px; font-weight: 800; color: var(--pri); font-variant-numeric: tabular-nums; letter-spacing: -.4px; line-height: 1.3; }
.p-ratio small { font-size: 10.5px; font-weight: 500; color: var(--text-3); margin-left: 3px; letter-spacing: 0; }

.dot-st { display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; font-weight: 600; }
.dot-st i { width: 7px; height: 7px; border-radius: 50%; display: inline-block; }
/* 服务商卡片：紧凑版补充样式 */
.p-models .pm-k { flex: none; }
.p-models .pm-t {
  flex: none; max-width: 72px; overflow: hidden; text-overflow: ellipsis;
  font-size: 10.5px; padding: 1px 6px; border-radius: 4px;
  background: var(--g-bg-hi); border: 1px solid var(--g-edge); color: var(--text-2);
  white-space: nowrap;
}
.p-models .pm-more { font-size: 10.5px; color: var(--text-3); }
.p-models .pm-none { font-size: 10.5px; color: var(--text-3); }
/* base_url 与「访问官网」同一行：占据左侧剩余空间，过长省略 */
.p-base {
  font-family: ui-monospace, Consolas, monospace;
  font-size: 10.5px; color: var(--text-3);
  min-width: 0; flex: 1 1 auto;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.p-card .p-go {
  height: 28px; padding: 0 13px; font-size: 12px; border-radius: 7px;
  flex: none; margin-left: auto; order: 2;
  box-shadow: 0 3px 12px -4px rgba(30, 128, 255, .55);
}
/* 有 base_url 时它在左、按钮在右；没有时 <div> 左、按钮靠右，卡片仍然对齐 */
.p-card .p-base { order: 1; }

.st-ok i { background: #12b886; } .st-ok { color: #12b886; }
.st-slow i { background: #f59f00; } .st-slow { color: #f59f00; }
.st-down i { background: #f0555a; } .st-down { color: #f0555a; }
.st-unknown i { background: var(--text-3); } .st-unknown { color: var(--text-3); }

.btn {
  display: inline-flex; align-items: center; justify-content: center;
  height: 34px; padding: 0 16px;
  border-radius: 50px;
  font-size: 13px;
  cursor: pointer;
  border: 1px solid var(--ctl-bd);
  background: var(--g-bg-hi);
  color: var(--text-2);
  transition: all .22s;
  white-space: nowrap;
}
.btn:hover { color: var(--pri); border-color: var(--pri-bd); }
.btn.pri { border: none; color: #fff; background: var(--pri); box-shadow: 0 5px 18px -4px rgba(30, 128, 255, .6); }
.btn.pri:hover { background: var(--pri-hover); }
.btn.danger { color: #f0555a; }

/* ==========================================================================
   页脚 / toast / 后台
   ========================================================================== */
.footer { padding: 26px 30px 36px; text-align: center; font-size: 12.5px; color: var(--text-3); line-height: 1.9; }
.footer a { color: var(--text-2); }
.footer a:hover { color: var(--pri); }

.toast {
  position: fixed;
  left: 50%; bottom: 36px;
  transform: translate(-50%, 20px);
  padding: 11px 22px;
  border-radius: 50px;
  background: var(--g-bg-hi);
  border: 1px solid var(--g-bd);
  box-shadow: 0 14px 38px rgba(0, 0, 0, .18);
  backdrop-filter: blur(22px) saturate(180%);
  font-size: 13.5px;
  color: var(--text);
  opacity: 0;
  pointer-events: none;
  transition: all .3s;
  z-index: 200;
}
.toast.show { opacity: 1; transform: translate(-50%, 0); }

.panel { border-radius: var(--radius-lg); padding: 20px; }
.field { display: flex; flex-direction: column; gap: 5px; margin-bottom: 12px; }
.field label { font-size: 12px; font-weight: 600; color: var(--text-2); }
.field input, .field select, .field textarea {
  padding: 9px 12px;
  border-radius: 8px;
  border: 1px solid var(--g-bd);
  background: var(--g-bg-hi);
  color: var(--text);
  font-family: inherit;
  font-size: 13px;
  outline: none;
}
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--pri); }
.badge-on, .badge-off { padding: 1px 8px; border-radius: 5px; font-size: 11px; font-weight: 600; }
.badge-on { background: rgba(18, 184, 134, .14); color: #12b886; }
.badge-off { background: rgba(240, 85, 90, .12); color: #f0555a; }

/* ==========================================================================
   响应式
   ========================================================================== */
@media (max-width: 1400px) { .card-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 1500px) { .p-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 1200px) { .news-grid, .p-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 991px) {
  .sidebar { transform: translateX(-100%); }
  .sidebar.show { transform: translateX(0); }
  .main-content { margin-left: 0; }
  .menu-btn { display: grid; }
  .card-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 767px) {
  :root { --header-h: 60px; }
  .container { padding: 18px 14px 40px; }
  .hero-big { padding: 26px 0 18px; }
  .hero-logo { gap: 10px; margin-bottom: 18px; }
  .hero-logo .mark-lg { width: 60px; height: 60px; border-radius: 18px; font-size: 24px; }
  .hero-logo h1 { font-size: 22px; }
  .hero-logo p { font-size: 12px; }
  .super-search { width: calc(100% - 28px); }
  .sform { height: 50px; padding-left: 18px; }
  .sform button { width: 40px; height: 40px; }
  .chan-bar { width: calc(100% - 28px); gap: 6px; margin-top: 18px; }
  .chan { padding: 5px 13px; font-size: 13px; }
  /* 用 minmax(0, 1fr) 而不是 1fr：1fr 等价于 minmax(auto, 1fr)，
     最小值取内容的 min-content，卡片里的模型标签一行排不下时会把整条轨道顶宽，
     于是卡片比屏幕还宽、整页横向滚动。0 才能让它老老实实收缩。 */
  .news-grid, .p-grid, .card-grid { grid-template-columns: minmax(0, 1fr); }
  .header-nav { display: none; }
  .hide-sm { display: none; }
  .news-date { font-size: 17px; padding-top: 24px; }
  .news-item { padding-left: 14px; }
  /* 标题右侧的统计文字（"60 个模型族 × 85 家站 · 共 1051 条报价"）
     在窄屏一行放不下，nowrap 会顶出容器；这里让它换行，并收起装饰性的分隔线 */
  .sec-head { flex-wrap: wrap; }
  .sec-head .ln { display: none; }
  .sec-head .more { white-space: normal; font-size: 12px; }
}

/* ==========================================================================
   表单内嵌下拉（服务商页区域筛选 / 首页搜索引擎）
   ========================================================================== */
.sform select.region-select {
  flex: none;
  height: 38px;
  margin-right: 6px;
  padding: 0 10px;
  border: 1px solid var(--g-bd);
  border-radius: 50px;
  background: var(--g-bg-lo);
  color: var(--text-2);
  font-family: inherit;
  font-size: 13px;
  outline: none;
  cursor: pointer;
}
.sform select.region-select:focus { border-color: var(--pri); }

.sform select.engine-select {
  flex: none;
  height: 34px;
  margin-right: 6px;
  padding: 0 30px 0 12px;
  border: 1px solid var(--g-bd);
  border-radius: 50px;
  background-color: var(--g-bg-lo);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%238a8f99' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 11px center;
  color: var(--text-2);
  font-family: inherit;
  font-size: 13px;
  outline: none;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
}
.sform select.engine-select:focus { border-color: var(--pri); color: var(--pri); }

/* 服务商栅格与区块呼吸感 */
.p-grid { gap: 13px; }
.container > section + section { margin-top: 44px; }
.panel { margin-bottom: 20px; }
.chan-bar .chan[style*="cursor:default"] { opacity: .75; }

/* ==========================================================================
   AI 工具导航页（/tools）· 绿蓝主题
   ========================================================================== */
.tools-page { padding-bottom: 20px; }

/* ---------- 标题区 ---------- */
.tools-hero {
  display: flex;
  align-items: center;
  gap: 28px;
  flex-wrap: wrap;
  padding: 4px 0 22px;
}
.tools-hero-txt { flex: 1 1 260px; min-width: 0; }
.tools-hero-txt h1 {
  margin: 0;
  font-size: 25px;
  font-weight: 800;
  letter-spacing: -.6px;
  line-height: 1.22;
  color: #0b8f83;
}
html[data-theme="dark"] .tools-hero-txt h1 { color: #5aa7ff; }
.tools-hero-txt p { margin: 7px 0 0; font-size: 13.5px; color: var(--text-3); }

/* ---------- 搜索框 ---------- */
.tools-search {
  flex: 0 1 560px;
  min-width: 280px;
  height: 48px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 8px 0 15px;
  border-radius: 50px;
  background: var(--g-bg-hi);
  border: 1px solid var(--g-bd);
  box-shadow: 0 8px 26px -16px rgba(13, 120, 110, .45);
  backdrop-filter: blur(24px) saturate(180%);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  transition: box-shadow .26s, border-color .26s;
}
.tools-search:focus-within { border-color: var(--pri-bd); box-shadow: 0 12px 34px -16px rgba(30, 128, 255, .5); }
.tools-search .ts-ic { flex: none; color: var(--text-3); }
.tools-search input {
  flex: 1 1 auto;
  min-width: 0;
  height: 100%;
  border: none;
  outline: none;
  background: transparent;
  color: var(--text);
  font-family: inherit;
  font-size: 14.5px;
}
.tools-search input::placeholder { color: var(--text-3); }
.tools-search input::-webkit-search-cancel-button { -webkit-appearance: none; display: none; }
.ts-clear {
  flex: none;
  width: 20px; height: 20px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: rgba(136, 136, 136, .16);
  color: var(--text-3);
  font-size: 15px;
  line-height: 1;
}
.ts-clear:hover { background: rgba(136, 136, 136, .3); color: var(--text); }
.ts-split { flex: none; width: 1px; height: 20px; background: var(--g-edge); margin: 0 1px; }
.ts-ext {
  flex: none;
  height: 32px;
  padding: 0 13px;
  border-radius: 50px;
  border: none;
  background: var(--pri-l);
  color: var(--pri);
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
  transition: background .2s, color .2s;
}
.ts-ext:hover { background: var(--pri); color: #fff; }

/* ---------- 分类胶囊 ---------- */
/* 改为自动换行：原来 overflow-x:auto + 隐藏滚动条，鼠标够不到右侧胶囊 */
.cat-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 4px 0 8px;
  margin-bottom: 10px;
}
.cat-chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 34px;
  padding: 0 6px 0 13px;
  border-radius: 50px;
  border: 1px solid var(--ctl-bd);
  background: var(--g-bg);
  color: var(--text-2);
  font-size: 13.5px;
  font-weight: 500;
  line-height: 1;
  white-space: nowrap;
  transition: color .18s, border-color .18s, background .18s, box-shadow .18s, transform .18s;
}
.cat-chip svg { opacity: .72; flex: none; transition: opacity .18s; }
/* 计数徽章：原来是 6% 透明底 + #86909c 细字，实测与胶囊底只差 5/255，几乎看不见 */
.cat-chip span {
  font-size: 11.5px;
  font-weight: 600;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  color: var(--text-2);
  padding: 5px 8px;
  border-radius: 20px;
  background: rgba(29, 33, 41, .10);
  transition: color .18s, background .18s;
}
.cat-chip:hover {
  color: var(--pri);
  border-color: var(--pri-bd);
  background: var(--g-bg-hi);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px -4px rgba(30, 128, 255, .22);
}
.cat-chip:hover svg { opacity: 1; }
.cat-chip:hover span { color: #fff; background: var(--pri); }
.cat-chip:active { transform: translateY(0); }
.cat-chip.on {
  color: #fff;
  border-color: transparent;
  background: linear-gradient(120deg, #1e80ff 0%, #0060df 100%);
  box-shadow: 0 4px 14px -4px rgba(30, 128, 255, .5);
}
.cat-chip.on svg { opacity: 1; }
.cat-chip.on span { color: #fff; background: rgba(255, 255, 255, .28); }

/* ---------- 厂商快速锚点 ---------- */
/* 厂商多达十几个、每个厂商一二十行，单纯滚动找太累，加一排跳转。
   刻意做得比上面的筛选胶囊更轻（无边框、更矮、更小的字），
   否则三排胶囊挤在一起，分不出哪排是筛选、哪排是索引。 */
.anchor-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  padding: 0 0 6px;
  margin-bottom: 2px;
}
.ab-label {
  font-size: 12px;
  color: var(--text-3);
  margin-right: 2px;
}
.ab-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 26px;
  padding: 0 9px;
  border-radius: 7px;
  border: 1px solid transparent;
  background: var(--g-bg);
  color: var(--text-2);
  font-size: 12.5px;
  font-weight: 500;
  line-height: 1;
  white-space: nowrap;
  transition: color .18s, border-color .18s, background .18s;
}
.ab-chip span {
  font-size: 11px;
  font-weight: 600;
  line-height: 1;
  color: var(--text-3);
  font-variant-numeric: tabular-nums;
  transition: color .18s;
}
.ab-chip:hover {
  color: var(--pri);
  border-color: var(--pri-bd);
  background: var(--g-bg-hi);
}
.ab-chip:hover span { color: var(--pri); }

/* 锚点落点要躲开吸顶导航条，否则厂商标题被压在下面 */
.tool-block[id] { scroll-margin-top: calc(var(--header-h) + 14px); }

/* ---------- 分类区块 ---------- */
.tool-block { margin-top: 30px; }
.tool-block:first-of-type { margin-top: 12px; }

/* 区块小标题：淡色图标 + 标题 + 计数 + 右侧「查看全部」，底部一条细线收口 */
.tb-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding-bottom: 10px;
  margin-bottom: 16px;
  border-bottom: 1px solid var(--g-edge);
}
/* 分类标记：竖向渐变条。实心色块在任何缩放下都清晰，
   不像 14px 线稿图标那样在浅色底里糊成一团 */
.tb-head::before {
  content: "";
  flex: none;
  width: 4px;
  height: 17px;
  border-radius: 2px;
  background: linear-gradient(180deg, #4a9bff 0%, #1e80ff 55%, #0060df 100%);
  box-shadow: 0 1px 3px rgba(30, 128, 255, .35);
}
.tb-head h2 {
  margin: 0;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0;
  color: var(--text);
  white-space: nowrap;
}
.tb-num {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12.5px;
  font-weight: 500;
  color: var(--text-3);
  font-variant-numeric: tabular-nums;
}
.tb-num::before {
  content: "";
  width: 3px; height: 3px;
  border-radius: 50%;
  background: currentColor;
  opacity: .5;
}
.tb-sp { flex: 1; min-width: 8px; }
.tb-more {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 1px;
  font-size: 12.5px;
  color: var(--text-3);
  white-space: nowrap;
  transition: color .18s;
}
.tb-more svg { width: 13px; height: 13px; transition: transform .18s; }
.tb-more:hover { color: var(--pri); }
.tb-more:hover svg { transform: translateX(2px); }

.tool-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 14px;
}
.tool-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border-radius: 13px;
  background: var(--g-bg);
  border: 1px solid var(--g-bd);
  box-shadow: 0 1px 3px rgba(16, 60, 55, .04);
  backdrop-filter: blur(18px) saturate(175%);
  -webkit-backdrop-filter: blur(18px) saturate(175%);
  transition: transform .24s cubic-bezier(.22,.61,.36,1), box-shadow .24s, border-color .24s, background .24s;
  position: relative;
  overflow: hidden;
  min-height: 66px;
  min-width: 0;
}
.tool-card:hover {
  transform: translateY(-3px);
  border-color: var(--pri-bd);
  background: var(--g-bg-hi);
  box-shadow: 0 16px 30px -20px rgba(13, 100, 95, .5);
}

/* 站点图标 */
.tc-logo {
  position: relative;
  width: 36px; height: 36px;
  flex: none;
  display: grid;
  place-items: center;
  border-radius: 10px;
  overflow: hidden;
  background: #fff;
  border: 1px solid rgba(16, 60, 55, .07);
}
/* 深色主题下图标底仍保持浅色：多数 favicon 是深色 logo，压深底会看不清 */
html[data-theme="dark"] .tc-logo { background: #eef3f2; border-color: rgba(255, 255, 255, .12); }
.tc-logo img {
  width: 100%; height: 100%;
  object-fit: contain;
  padding: 5px;
  display: block;
}
.tc-logo b { display: none; font-size: 15px; font-weight: 800; color: #fff; line-height: 1; }
.tc-logo.fallback { background: linear-gradient(135deg, #1e80ff 0%, #0060df 100%); border-color: transparent; }
.tc-logo.fallback b { display: grid; place-items: center; }

.tc-body { min-width: 0; flex: 1 1 auto; display: flex; flex-direction: column; gap: 2px; }
.tc-name {
  font-size: 13.8px;
  font-weight: 600;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: color .2s;
}
.tool-card:hover .tc-name { color: var(--pri); }
.tc-desc {
  font-size: 12px;
  line-height: 1.5;
  color: var(--text-3);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  word-break: break-word;
}

.tools-foot { margin: 40px 0 8px; text-align: center; font-size: 12.5px; color: var(--text-3); }

/* ---------- 响应式 ---------- */
@media (max-width: 1280px) {
  .tool-grid { grid-template-columns: repeat(auto-fill, minmax(218px, 1fr)); }
}
@media (max-width: 991px) {
  .tools-hero { gap: 16px; }
  .tools-search { flex: 1 1 100%; }
}
@media (max-width: 767px) {
  .tools-hero { padding-bottom: 16px; }
  .tools-hero-txt h1 { font-size: 20px; }
  .tools-hero-txt p { font-size: 12.5px; }
  .tools-search { height: 44px; padding-left: 13px; }
  .tools-search input { font-size: 13.5px; }
  .ts-ext { height: 28px; padding: 0 9px; font-size: 11.5px; }
  .ts-split { display: none; }
  .cat-bar { padding: 2px 0 6px; gap: 7px; }
  .cat-chip { height: 31px; padding: 0 5px 0 10px; font-size: 12.5px; gap: 6px; }
  .tool-block { margin-top: 26px; }
  .tool-grid { grid-template-columns: repeat(auto-fill, minmax(148px, 1fr)); gap: 9px; }
  .tool-card { padding: 11px; min-height: 62px; }
  .tc-logo { width: 34px; height: 34px; border-radius: 9px; }
  .tc-name { font-size: 13px; }
  .tc-desc { -webkit-line-clamp: 1; font-size: 11.5px; }
}

/* ---------- 大模型表格 ---------- */
.model-table {
  border-radius: var(--radius);
  border: 1px solid var(--g-bd);
  background: var(--g-bg);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  overflow: hidden;
}
.mt-row {
  display: grid;
  grid-template-columns: minmax(150px, 1.4fr) 72px 60px minmax(160px, 1.05fr) minmax(0, 1.5fr) 86px;
  align-items: center;
  gap: 10px;
  padding: 11px 16px;
  font-size: 13px;
  border-top: 1px solid var(--g-edge);
}
.mt-row:first-child { border-top: 0; }
.mt-head {
  background: rgba(29, 33, 41, .035);
  font-size: 12px;
  font-weight: 600;
  color: var(--text-3);
  letter-spacing: .2px;
}
.mt-row:not(.mt-head):hover { background: rgba(30, 128, 255, .05); }
.mt-name { display: flex; align-items: center; gap: 7px; min-width: 0; }
/* 模型名做成链接：默认与普通标题同色，悬停才显蓝并带外链箭头 */
.mt-link {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  border-bottom: 1px solid transparent;
  transition: color .16s, border-color .16s;
}
.mt-link:hover { color: var(--pri); border-bottom-color: var(--pri); }
.mt-link::after {
  content: "↗";
  display: inline-block;
  margin-left: 3px;
  font-size: 11px;
  font-weight: 500;
  color: var(--text-3);
  transition: color .16s;
}
.mt-link:hover::after { color: var(--pri); }
.mt-name b {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.mt-tag {
  flex: none;
  font-size: 10.5px;
  font-weight: 600;
  line-height: 1;
  padding: 3px 6px;
  border-radius: 5px;
  color: #00a06a;
  background: rgba(0, 180, 42, .12);
}
.mt-k {
  display: inline-block;
  font-size: 11.5px;
  line-height: 1;
  padding: 4px 8px;
  border-radius: 5px;
  font-weight: 500;
  color: var(--text-2);
  background: rgba(29, 33, 41, .06);
}
.mt-k.k-旗舰 { color: #1e80ff; background: rgba(30, 128, 255, .11); }
.mt-k.k-推理 { color: #722ed1; background: rgba(114, 46, 209, .11); }
.mt-k.k-轻量 { color: #0086a8; background: rgba(15, 198, 194, .13); }
.mt-k.k-多模态 { color: #d91ad9; background: rgba(217, 26, 217, .11); }
.mt-k.k-开源 { color: #00a06a; background: rgba(0, 180, 42, .12); }
.mt-ctx { color: var(--text-2); font-variant-numeric: tabular-nums; font-size: 12.5px; }
.mt-price { color: var(--text-2); font-variant-numeric: tabular-nums; font-size: 12.5px; }
.mt-price b { color: var(--text); font-weight: 600; }
.mt-raw {
  display: block;
  margin-top: 2px;
  font-style: normal;
  font-size: 11px;
  color: var(--text-3);
}
.mt-go { display: flex; justify-content: flex-end; }
/* 中转站入口：数字是「多少家站在卖」，点进去直接到中转服务商页并已选中该模型。
   常态低调（灰字），悬停才亮蓝——一行一个链接已经够多，不能再抢价格的位置。 */
.mt-buy {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 24px;
  padding: 0 6px 0 8px;
  border-radius: 6px;
  border: 1px solid transparent;
  font-size: 12px;
  font-weight: 500;
  color: var(--text-3);
  white-space: nowrap;
  transition: color .16s, background .16s, border-color .16s;
}
.mt-buy span {
  font-size: 11px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--text-2);
  transition: color .16s;
}
.mt-buy svg { width: 11px; height: 11px; opacity: .55; transition: opacity .16s, transform .16s; }
a.mt-buy:hover {
  color: var(--pri);
  border-color: var(--pri-bd);
  background: var(--pri-l);
}
a.mt-buy:hover span { color: var(--pri); }
a.mt-buy:hover svg { opacity: 1; transform: translateX(1px); }
.mt-buy.off { opacity: .45; }

.mt-row.mt-head .mt-go { justify-content: flex-end; padding-right: 6px; }

.mt-free { color: #00a06a; font-weight: 500; font-size: 12.5px; }
.mt-note {
  color: var(--text-3);
  font-size: 12.5px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.tb-count { font-size: 12px; color: var(--text-3); }
.cat-sep {
  width: 1px;
  height: 20px;
  align-self: center;
  background: var(--g-edge);
  margin: 0 4px;
}
.models-note {
  margin: 26px 0 10px;
  font-size: 12.5px;
  line-height: 1.7;
  color: var(--text-3);
}

@media (max-width: 900px) {
  .mt-row {
    grid-template-columns: minmax(0, 1fr) 64px;
    row-gap: 6px;
    padding: 12px 14px;
  }
  .mt-head { display: none; }
  .mt-ctx, .mt-note { grid-column: 1 / -1; }
  .mt-price { grid-column: 1 / -1; }
  .mt-go { grid-column: 1 / -1; justify-content: flex-start; }
}

/* ---------- 热门大模型卡片 ---------- */
.hot-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
  gap: 16px;
  margin-top: 4px;
}
.hot-card {
  display: flex;
  flex-direction: column;
  padding: 16px 18px 14px;
  border-radius: var(--radius);
  border: 1px solid var(--g-bd);
  background: var(--g-bg);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  box-shadow: var(--g-shadow);
  transition: box-shadow .22s, transform .22s, border-color .22s;
}
.hot-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--g-shadow-hover);
  border-color: var(--pri-bd);
}
.hc-top {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 9px;
}
/* 右上角角标组：开源 / GitHub。撑到行尾并右对齐，
   用小号描边样式，不与左侧实心分类徽标抢视觉重量 */
.hc-corners {
  display: flex;
  align-items: center;
  gap: 5px;
  margin-left: auto;
  /* 压在整卡覆盖层之上，GitHub 才能单独点击 */
  position: relative;
  z-index: 3;
}
.hc-corner {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 22px;
  min-width: 22px;
  padding: 0 7px;
  border-radius: 6px;
  font-size: 10.5px;
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
  color: var(--text-3);
  background: var(--g-bg-lo);
  border: 1px solid var(--g-edge);
  transition: color .15s, background .15s, border-color .15s;
}
.hc-corner-gh { padding: 0 6px; color: var(--text-2); }
.hc-corner-gh:hover {
  color: #fff;
  background: #24292f;
  border-color: #24292f;
}
.hc-corner-open {
  color: #00a06a;
  border-color: rgba(0, 180, 42, .22);
  background: rgba(0, 180, 42, .09);
  letter-spacing: .02em;
}
.hc-badge {
  font-size: 11px;
  font-weight: 600;
  line-height: 1;
  padding: 4px 9px;
  border-radius: 6px;
  color: #fff;
  background: linear-gradient(120deg, #1e80ff, #0060df);
}
.hc-badge.k-推理 { background: linear-gradient(120deg, #8b5cf6, #6d28d9); }
.hc-badge.k-开源 { background: linear-gradient(120deg, #10b981, #059669); }
.hc-badge.k-多模态 { background: linear-gradient(120deg, #ec4899, #be185d); }
.hc-badge.k-性价比 { background: linear-gradient(120deg, #f59e0b, #d97706); }
.hc-kind {
  font-size: 11px;
  color: var(--text-3);
  padding: 3px 7px;
  border-radius: 5px;
  background: rgba(29, 33, 41, .06);
}
.hc-name {
  margin: 0 0 3px;
  font-size: 17px;
  font-weight: 700;
  color: var(--text);
  line-height: 1.3;
}
.hc-vendor {
  font-size: 12px;
  color: var(--text-3);
  margin-bottom: 8px;
}
.hc-tagline {
  margin: 0 0 8px;
  font-size: 13.5px;
  font-weight: 500;
  color: var(--pri);
  line-height: 1.5;
}
.hc-desc {
  margin: 0 0 12px;
  font-size: 13px;
  line-height: 1.72;
  color: var(--text-2);
}
.hc-strengths {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0 0 12px;
  padding: 0;
  list-style: none;
}
.hc-strengths li {
  font-size: 11.5px;
  line-height: 1;
  padding: 5px 8px;
  border-radius: 5px;
  color: var(--text-2);
  background: rgba(29, 33, 41, .05);
}
.hc-for {
  display: flex;
  gap: 7px;
  align-items: baseline;
  margin-bottom: 12px;
  padding: 8px 10px;
  border-radius: 7px;
  background: rgba(30, 128, 255, .06);
}
.hc-for-k {
  flex: none;
  font-size: 11px;
  font-weight: 600;
  color: var(--pri);
}
.hc-for-v {
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--text-2);
}
.hc-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: auto;
  padding-top: 12px;
  border-top: 1px solid var(--g-edge);
  font-variant-numeric: tabular-nums;
}
/** 左半：只剩上下文一个规格，做轻 */
.hc-specs {
  display: flex;
  align-items: center;
  gap: 5px;
  flex-wrap: wrap;
  min-width: 0;
}
.hc-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 22px;
  padding: 0 7px;
  border-radius: 6px;
  font-size: 11px;
  line-height: 1;
  white-space: nowrap;
  color: var(--text-3);
  background: var(--g-bg-lo);
  border: 1px solid var(--g-edge);
  transition: color .14s, border-color .14s;
}
.hc-chip svg { flex: none; opacity: .75; }
.hc-chip b {
  font-weight: 700;
  font-size: 12px;
  color: var(--text-2);
  letter-spacing: -.01em;
}
.hc-chip-ctx { padding-left: 6px; }
/** 右半：价格与入口，价格是这一块的主角 */
.hc-buy {
  display: flex;
  align-items: center;
  gap: 7px;
  flex: none;
}
/* 输入 / 输出两组，各自「标签在上、价格在下」，一眼能对上谁是谁 */
.hc-price {
  display: inline-flex;
  align-items: flex-end;
  gap: 12px;
  white-space: nowrap;
}
.hc-pg {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1px;
  line-height: 1.15;
}
.hc-pk {
  font-size: 10px;
  font-weight: 500;
  color: var(--text-3);
  letter-spacing: .04em;
}
.hc-pg b {
  font-size: 13.5px;
  font-weight: 700;
  letter-spacing: -.02em;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}
/* 输出价通常明显高于输入价，用强调色区分，两组才不会看起来一样重 */
.hc-pg + .hc-pg b { color: var(--pri); }
.hc-raw {
  font-size: 10.5px;
  color: var(--text-3);
  white-space: nowrap;
}
.hc-free { color: #00a06a; font-weight: 600; font-size: 12px; }
/* 整卡可点击：透明覆盖层铺满卡片，内容层抬到其上但本身不拦截点击 */
.hot-card { position: relative; }
.hc-cover {
  position: absolute;
  inset: 0;
  z-index: 2;
  border-radius: inherit;
  cursor: pointer;
}
.hot-card:hover .hc-name { color: var(--pri); }
.hot-card:hover .hc-link { color: #fff; background: var(--pri); }
.hot-card:hover .hc-link::after { opacity: 1; }
/* 键盘可达：聚焦整卡时给出焦点环 */
.hc-cover:focus-visible {
  outline: 2px solid var(--pri);
  outline-offset: 2px;
}
.hc-link { transition: color .18s, background .18s; }
.hc-link {
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: 6px;
  color: var(--text-3);
  background: rgba(29, 33, 41, .05);
  transition: color .18s, background .18s;
}
.hc-link:hover { color: #fff; background: var(--pri); }

@media (max-width: 700px) {
  .hot-grid { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .hot-card { padding: 14px; }
  /* 窄屏上价格和标签容易挤，让它们各占一行 */
  .hc-foot { flex-wrap: wrap; row-gap: 9px; }
  .hc-buy { margin-left: auto; }
}

/* ---------- 关于我们 ---------- */
.about-page { max-width: 780px; margin: 0 auto; }
.about-hero {
  text-align: center;
  padding: 34px 20px 30px;
  margin-bottom: 8px;
}
.ah-mark {
  display: inline-grid;
  place-items: center;
  width: 58px;
  height: 58px;
  margin-bottom: 16px;
  border-radius: 16px;
  color: #fff;
  background: linear-gradient(135deg, #4a9bff, #1e80ff 55%, #0060df);
  box-shadow: 0 8px 22px rgba(30, 128, 255, .28);
}
.about-hero h1 {
  margin: 0 0 12px;
  font-size: 27px;
  font-weight: 700;
  letter-spacing: .5px;
  color: var(--text);
}
.ah-sub {
  margin: 0;
  font-size: 14px;
  line-height: 1.9;
  color: var(--text-3);
}
.about-block {
  padding: 22px 26px;
  margin-bottom: 16px;
  border-radius: var(--radius);
  border: 1px solid var(--g-bd);
  background: var(--g-bg);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  box-shadow: var(--g-shadow);
}
.about-block h2 {
  margin: 0 0 14px;
  font-size: 16px;
  font-weight: 600;
  color: var(--text);
  display: flex;
  align-items: center;
  gap: 9px;
}
.about-block h2::before {
  content: "";
  width: 3px;
  height: 15px;
  border-radius: 2px;
  background: linear-gradient(180deg, #4a9bff, #0060df);
}
.about-block p {
  margin: 0 0 12px;
  font-size: 13.5px;
  line-height: 1.92;
  color: var(--text-2);
}
.about-block p:last-child { margin-bottom: 0; }
.about-block p b { color: var(--text); font-weight: 600; }
.about-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin-bottom: 16px;
}
.as-cell {
  padding: 18px 12px;
  text-align: center;
  border-radius: var(--radius);
  border: 1px solid var(--g-bd);
  background: var(--g-bg);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  box-shadow: var(--g-shadow);
}
.as-num {
  font-size: 24px;
  font-weight: 700;
  line-height: 1.2;
  color: var(--pri);
  font-variant-numeric: tabular-nums;
}
.as-label {
  margin-top: 6px;
  font-size: 11.5px;
  color: var(--text-3);
}
.about-rules { display: flex; flex-direction: column; gap: 16px; }
.ar-item { display: flex; gap: 13px; align-items: flex-start; }
.ar-idx {
  flex: none;
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: 7px;
  font-size: 12px;
  font-weight: 700;
  color: var(--pri);
  background: rgba(30, 128, 255, .1);
}
.ar-body h3 {
  margin: 1px 0 5px;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--text);
}
.ar-body p {
  margin: 0;
  font-size: 13px;
  line-height: 1.8;
  color: var(--text-2);
}
.about-tl { position: relative; padding-left: 20px; }
.about-tl::before {
  content: "";
  position: absolute;
  left: 4px;
  top: 6px;
  bottom: 6px;
  width: 1px;
  background: linear-gradient(180deg, rgba(30,128,255,.35), rgba(30,128,255,.08));
}
.at-item { position: relative; padding-bottom: 16px; }
.at-item:last-child { padding-bottom: 0; }
.at-dot {
  position: absolute;
  left: -20px;
  top: 6px;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #fff;
  border: 2px solid var(--pri);
  box-sizing: border-box;
}
.at-when {
  font-size: 11.5px;
  font-weight: 600;
  color: var(--pri);
  margin-bottom: 3px;
}
.at-what {
  font-size: 13.5px;
  line-height: 1.7;
  color: var(--text-2);
}
.about-cta {
  padding: 26px;
  text-align: center;
  border-radius: var(--radius);
  border: 1px solid var(--g-bd);
  background: var(--g-bg);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  box-shadow: var(--g-shadow);
}
.about-cta h2 { margin: 0 0 10px; font-size: 17px; font-weight: 600; color: var(--text); }
.about-cta p {
  margin: 0 auto 18px;
  max-width: 480px;
  font-size: 13px;
  line-height: 1.85;
  color: var(--text-2);
}
.ac-mail {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 38px;
  padding: 0 20px;
  border-radius: 9px;
  font-size: 13.5px;
  font-weight: 500;
  color: #fff;
  background: linear-gradient(120deg, #1e80ff, #0060df);
  box-shadow: 0 6px 16px rgba(30, 128, 255, .26);
  transition: transform .18s, box-shadow .18s;
}
.ac-mail:hover { transform: translateY(-1px); box-shadow: 0 9px 22px rgba(30, 128, 255, .34); }

/* ---- 意见反馈表单 ---- */
.fb-form {
  max-width: 480px;
  margin: 0 auto 18px;
  text-align: left;
}
.fb-kinds {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-bottom: 10px;
}
.fb-k {
  height: 28px;
  padding: 0 12px;
  border-radius: 7px;
  border: 1px solid var(--g-bd);
  font-size: 12.5px;
  color: var(--text-2);
  background: var(--bg);
  transition: color .15s, border-color .15s, background .15s;
}
.fb-k:hover { color: var(--pri); border-color: var(--pri); }
.fb-k.on {
  color: #fff;
  border-color: var(--pri);
  background: var(--pri);
}
.fb-form textarea,
.fb-contact {
  width: 100%;
  padding: 10px 12px;
  border-radius: 9px;
  border: 1px solid var(--g-bd);
  font-size: 13px;
  font-family: inherit;
  line-height: 1.7;
  color: var(--text);
  background: var(--g-bg-hi);
  transition: border-color .15s, box-shadow .15s;
}
.fb-form textarea { resize: vertical; min-height: 76px; }
.fb-form textarea:focus,
.fb-contact:focus {
  outline: none;
  border-color: var(--pri);
  box-shadow: 0 0 0 3px var(--pri-l);
}
.fb-form textarea::placeholder,
.fb-contact::placeholder { color: var(--text-3); }
.fb-foot {
  display: flex;
  gap: 9px;
  margin-top: 9px;
}
.fb-contact { flex: 1; min-width: 0; height: 36px; }
.fb-send {
  flex: 0 0 auto;
  height: 36px;
  padding: 0 20px;
  border-radius: 9px;
  font-size: 13px;
  font-weight: 500;
  color: #fff;
  background: linear-gradient(120deg, #1e80ff, #0060df);
  box-shadow: 0 4px 12px rgba(30, 128, 255, .24);
  transition: transform .16s, box-shadow .16s, opacity .16s;
}
.fb-send:hover { transform: translateY(-1px); box-shadow: 0 7px 18px rgba(30, 128, 255, .32); }
.fb-send:disabled { opacity: .6; transform: none; box-shadow: none; cursor: default; }
.fb-msg {
  margin: 9px 0 0 !important;
  min-height: 18px;
  font-size: 12.5px !important;
  color: var(--text-3) !important;
}
.fb-msg.ok { color: #0e9f6e !important; }
.fb-msg.bad { color: #e5484d !important; }
@media (max-width: 700px) {
  .fb-foot { flex-direction: column; }
  .fb-send { width: 100%; }
}
@media (max-width: 700px) {
  .about-stats { grid-template-columns: repeat(2, 1fr); }
  .about-block { padding: 18px; }
  .about-hero { padding: 20px 8px 18px; }
  .about-hero h1 { font-size: 22px; }
}

/* ---------- 官方直连平台（大模型厂商页） ---------- */
.tb-note { font-size: 12px; color: var(--text-3); }
.official-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 12px;
}
.off-card {
  display: block;
  padding: 14px 16px;
  border-radius: var(--radius);
  border: 1px solid var(--g-bd);
  background: var(--g-bg);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  box-shadow: var(--g-shadow);
  transition: transform .2s, box-shadow .2s, border-color .2s;
}
.off-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--g-shadow-hover);
  border-color: var(--pri-bd);
}
.of-top {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 7px;
}
.of-name {
  font-size: 14.5px;
  font-weight: 600;
  color: var(--text);
}
.off-card:hover .of-name { color: var(--pri); }
.of-top .dot-st { margin-left: auto; flex: none; }
.of-desc {
  margin: 0 0 9px;
  font-size: 12.5px;
  line-height: 1.65;
  color: var(--text-2);
}
.of-tags { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 8px; }
.of-tags .t {
  font-size: 11px;
  line-height: 1;
  padding: 4px 7px;
  border-radius: 5px;
  color: var(--text-2);
  background: rgba(29, 33, 41, .05);
}
.of-models {
  font-size: 11.5px;
  color: var(--text-3);
  line-height: 1.5;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
@media (max-width: 700px) {
  .official-grid { grid-template-columns: 1fr; gap: 10px; }
}

/* 中转页说明条 */
.prov-hint {
  margin-top: 12px;
  padding: 9px 13px;
  border-radius: 8px;
  font-size: 12.5px;
  line-height: 1.6;
  color: var(--text-2);
  background: rgba(30, 128, 255, .06);
  border: 1px solid rgba(30, 128, 255, .14);
}
.prov-hint a { color: var(--pri); font-weight: 500; }
.prov-hint a:hover { text-decoration: underline; }

/* ---------- 中转站模型展示与筛选 ---------- */
.prov-models {
  margin-top: 14px;
  padding: 10px 0 4px;
  border-top: 1px dashed var(--g-edge);
}
.pm-k {
  flex: none;
  font-size: 11.5px;
  color: var(--text-3);
  margin-right: 2px;
}
.p-models {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 5px;
  font-size: 12px;
  color: var(--text-3);
  line-height: 1.5;
}
.pm-t {
  font-size: 11px;
  line-height: 1;
  padding: 4px 7px;
  border-radius: 5px;
  color: var(--text-2);
  background: rgba(29, 33, 41, .05);
  font-family: ui-monospace, Consolas, monospace;
}
.pm-more {
  font-size: 11px;
  font-weight: 600;
  color: var(--pri);
  padding: 4px 6px;
}
.pm-none { font-size: 11.5px; color: var(--text-3); }

/* ---------- 收录投稿表单 ---------- */
/* 类型选择：工具 / 中转服务商。做成胶囊分段控件，
   和站点里其它「排序/费用类型」的 seg 保持一致，不再引入新的控件语言。 */
.sf-kind {
  display: inline-flex;
  padding: 3px;
  margin-bottom: 16px;
  border-radius: 9px;
  border: 1px solid var(--g-bd);
  background: var(--g-bg-hi);
}
.sf-kind input { position: absolute; opacity: 0; width: 0; height: 0; }
.sf-kind label {
  padding: 6px 16px;
  border-radius: 7px;
  font-size: 13px;
  font-weight: 500;
  color: var(--text-2);
  cursor: pointer;
  user-select: none;
  transition: color .16s, background .16s, box-shadow .16s;
}
.sf-kind label:hover { color: var(--text); }
.sf-kind input:checked + label {
  color: var(--pri);
  background: var(--g-bg);
  box-shadow: 0 1px 4px rgba(0,0,0,.08);
}
.sf-kind input:focus-visible + label { outline: 2px solid var(--pri-bd); outline-offset: 1px; }

.sub-form {
  margin-top: 16px;
  padding: 20px;
  border-radius: var(--radius);
  border: 1px solid var(--g-bd);
  background: var(--g-bg);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  box-shadow: var(--g-shadow);
}
.sf-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.sf-f { display: block; margin-bottom: 14px; }
.sf-k {
  display: block;
  margin-bottom: 6px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text-2);
}
.sf-k i { color: #e54d42; font-style: normal; margin-left: 1px; }
.sf-f input,
.sf-f select,
.sf-f textarea {
  width: 100%;
  padding: 9px 12px;
  border-radius: 8px;
  border: 1px solid var(--g-edge);
  background: var(--g-bg-lo);
  font-size: 13px;
  font-family: inherit;
  color: var(--text);
  transition: border-color .18s, box-shadow .18s;
}
.sf-f textarea { resize: vertical; line-height: 1.65; }
.sf-f input:focus,
.sf-f select:focus,
.sf-f textarea:focus {
  outline: none;
  border-color: var(--pri);
  box-shadow: 0 0 0 3px rgba(30, 128, 255, .12);
}
.sf-f input::placeholder,
.sf-f textarea::placeholder { color: var(--text-3); }
.sf-foot {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  margin-top: 4px;
}
.sf-note {
  flex: 1;
  margin: 0;
  font-size: 12px;
  line-height: 1.7;
  color: var(--text-3);
}
.sf-btn {
  flex: none;
  padding: 10px 22px;
  border: none;
  border-radius: 8px;
  font-size: 13.5px;
  font-weight: 600;
  font-family: inherit;
  color: #fff;
  background: var(--pri);
  cursor: pointer;
  transition: background .18s;
}
.sf-btn:hover { background: var(--pri-hover); }
.sf-stat {
  margin: 12px 0 0;
  font-size: 12px;
  color: var(--text-3);
}
.sub-result {
  margin-top: 14px;
  padding: 14px 16px;
  border-radius: 10px;
  font-size: 13px;
  line-height: 1.65;
}
.sub-result strong { display: block; font-size: 13.5px; margin-bottom: 3px; }
.sub-result p { margin: 0; }
.sub-result.ok { background: rgba(0, 180, 42, .08); color: #0a7c44; }
.sub-result.ok a { color: #0a7c44; text-decoration: underline; }
.sub-result.wait { background: rgba(255, 148, 0, .09); color: #a35b00; }
.sub-result.bad { background: rgba(229, 77, 66, .09); color: #b32a20; }
/* 提交结果提示：深色下这几个深绿/深棕字几乎看不见，要单独提亮 */
html[data-theme="dark"] .sub-result.ok { background: rgba(0, 180, 42, .15); color: #4ed4a0; }
html[data-theme="dark"] .sub-result.ok a { color: #4ed4a0; }
html[data-theme="dark"] .sub-result.wait { background: rgba(255, 148, 0, .15); color: #f0b45e; }
html[data-theme="dark"] .sub-result.bad { background: rgba(229, 77, 66, .17); color: #ff8b82; }
html[data-theme="dark"] .sf-k i { color: #ff8b82; }
@media (max-width: 700px) {
  .sf-row { grid-template-columns: 1fr; gap: 0; }
  .sf-foot { flex-direction: column; }
  .sf-btn { width: 100%; }
}

/* ---------- 提交收录：入口 + 弹窗 ---------- */
.sub-entry {
  display: flex;
  align-items: center;
  gap: 20px;
  margin-top: 14px;
  padding: 18px 20px;
  border-radius: var(--radius);
  border: 1px solid var(--g-bd);
  background: var(--g-bg);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  box-shadow: var(--g-shadow);
}
.se-txt { flex: 1; }
.se-txt p { margin: 0; font-size: 13.5px; line-height: 1.75; color: var(--text-2); }
.se-txt a { color: var(--pri); }
.se-txt a:hover { text-decoration: underline; }
.se-meta { margin-top: 6px !important; font-size: 12px !important; color: var(--text-3) !important; }
.se-meta b { color: var(--text-2); font-weight: 600; }
.se-btn {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 10px 20px;
  border: none;
  border-radius: 8px;
  font-size: 13.5px;
  font-weight: 600;
  font-family: inherit;
  color: #fff;
  background: var(--pri);
  cursor: pointer;
  transition: background .18s, transform .18s;
}
.se-btn:hover { background: var(--pri-hover); transform: translateY(-1px); }
.se-btn:active { transform: translateY(0); }

/* 弹窗本体 */
.mmodal {
  position: fixed;
  inset: 0;
  z-index: 900;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 24px 16px;
}
.mmodal.on { display: flex; }
.mm-mask {
  position: absolute;
  inset: 0;
  background: var(--mask);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
}
.mm-box {
  position: relative;
  width: 100%;
  max-width: 620px;
  max-height: calc(100vh - 48px);
  display: flex;
  flex-direction: column;
  border-radius: 14px;
  /* 走主题变量而不是写死 #fff：深色模式下原来是纯白面板，
     在暗背景上非常刺眼。这里顺便改成毛玻璃，和站内其它卡片一致 */
  background: var(--g-bg-hi);
  border: 1px solid var(--g-bd);
  box-shadow: var(--panel-shadow);
  backdrop-filter: blur(26px) saturate(180%);
  -webkit-backdrop-filter: blur(26px) saturate(180%);
  animation: mmIn .22s cubic-bezier(.22, .8, .3, 1);
  overflow: hidden;
}
@keyframes mmIn {
  from { opacity: 0; transform: translateY(14px) scale(.985); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
.mm-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 16px 20px;
  border-bottom: 1px solid var(--g-edge);
  flex: none;
}
.mm-head h3 { margin: 0; font-size: 15px; font-weight: 600; color: var(--text); }
.mm-x {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border: none;
  border-radius: 7px;
  background: transparent;
  color: var(--text-3);
  cursor: pointer;
  transition: background .16s, color .16s;
}
.mm-x:hover { background: var(--hover-bg); color: var(--text); }
.mm-body { padding: 18px 20px 20px; overflow-y: auto; }
.mm-body .sub-form {
  margin-top: 0;
  padding: 0;
  border: none;
  background: transparent;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

/* 免责声明勾选 */
.sf-agree {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin: 2px 0 14px;
  font-size: 12.5px;
  line-height: 1.6;
  color: var(--text-2);
  cursor: pointer;
}
.sf-agree input {
  flex: none;
  width: 15px;
  height: 15px;
  margin: 2px 0 0;
  accent-color: var(--pri);
  cursor: pointer;
}
.sf-agree a { color: var(--pri); }
.sf-agree a:hover { text-decoration: underline; }

@media (max-width: 700px) {
  .sub-entry { flex-direction: column; align-items: stretch; gap: 14px; }
  .se-btn { width: 100%; justify-content: center; }
  .mm-box { max-height: calc(100vh - 32px); }
  .mm-body { padding: 16px; }
}

/* ---------- 免责声明页 ---------- */
.disc-lead {
  margin: 22px 0 6px;
  padding: 16px 20px;
  border-radius: var(--radius);
  border: 1px solid var(--g-bd);
  background: var(--g-bg);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
}
.disc-lead p { margin: 0; font-size: 13.5px; line-height: 1.8; color: var(--text-2); }
.disc-updated {
  margin-top: 10px !important;
  font-size: 12px !important;
  color: var(--text-3) !important;
}
.disc-block h2 { display: flex; align-items: center; gap: 10px; }
.disc-idx {
  font-size: 12px;
  font-weight: 700;
  font-family: ui-monospace, Consolas, monospace;
  color: var(--pri);
  background: rgba(30, 128, 255, .09);
  padding: 2px 7px;
  border-radius: 5px;
  letter-spacing: .02em;
}
.disc-list {
  margin: 12px 0 0;
  padding: 0;
  list-style: none;
}
.disc-list li {
  position: relative;
  padding: 0 0 0 18px;
  margin-bottom: 11px;
  font-size: 13.5px;
  line-height: 1.85;
  color: var(--text-2);
}
.disc-list li:last-child { margin-bottom: 0; }
.disc-list li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 11px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--text-3);
  opacity: .55;
}
@media (max-width: 700px) {
  .disc-lead { padding: 14px 16px; }
  .disc-list li { font-size: 13px; line-height: 1.8; }
}

.ac-extra { margin-top: 8px !important; font-size: 12.5px !important; color: var(--text-3) !important; }
.ac-extra a { color: var(--pri); }
.ac-extra a:hover { text-decoration: underline; }

/* 侧栏底部：最近更新时间 */
.sf-update {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 6px;
  padding-top: 6px;
  border-top: 1px solid var(--g-edge);
  font-variant-numeric: tabular-nums;
  cursor: default;
}
.sf-dot {
  flex: none;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #00b42a;
  box-shadow: 0 0 0 2px rgba(0, 180, 42, .14);
}
@media (prefers-reduced-motion: no-preference) {
  .sf-dot { animation: sfPulse 2.6s ease-in-out infinite; }
}
@keyframes sfPulse {
  0%, 100% { opacity: 1; }
  50% { opacity: .45; }
}
/* ============================================================ 费率表 / 服务商表格
   共用：表头排序、筛选按钮、倍率条形。 */
.rate-bar { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin: 0 0 16px; }
.rate-search {
  display: flex; align-items: center; gap: 0;
  background: var(--g-bg-hi); border: 1px solid var(--ctl-bd);
  border-radius: var(--radius); overflow: hidden;
  backdrop-filter: blur(var(--blur)); -webkit-backdrop-filter: blur(var(--blur));
  min-width: 300px;
}
.rate-search input {
  flex: 1; min-width: 0; border: 0; outline: 0; background: transparent;
  padding: 8px 12px; font-size: 13px; color: var(--text); font-family: inherit;
}
.rate-search input::placeholder { color: var(--text-3); }
.rate-search button {
  border: 0; background: transparent; color: var(--text-3); cursor: pointer;
  padding: 0 11px; height: 34px; display: flex; align-items: center;
  transition: color .16s;
}
.rate-search button:hover { color: var(--pri); }
.rate-hint {
  width: 100%; font-size: 12px; color: var(--text-3); line-height: 1.7;
  padding: 8px 12px; border-radius: var(--radius);
  background: var(--pri-l); border: 1px solid var(--pri-bd);
}
.rate-hint b { color: var(--text-2); font-weight: 600; }

.rate-tools {
  display: flex; flex-wrap: wrap; gap: 10px 18px; align-items: center;
  margin: 0 0 12px;
}
.rt-grp { display: flex; align-items: center; gap: 6px; }
.rt-label { font-size: 12px; color: var(--text-3); font-weight: 600; letter-spacing: .3px; }
.rt-btn {
  border: 1px solid var(--g-bd); background: var(--g-bg-lo); color: var(--text-2);
  font-size: 12px; font-family: inherit; padding: 4px 10px; border-radius: 99px;
  cursor: pointer; transition: all .16s; white-space: nowrap;
}
.rt-btn:hover { border-color: var(--pri-bd); color: var(--pri); background: var(--pri-l); }
.rt-btn.on { background: var(--pri); border-color: var(--pri); color: #fff; }
.rt-count { margin-left: auto; font-size: 12px; color: var(--text-3); font-variant-numeric: tabular-nums; }

.rate-wrap {
  border-radius: var(--radius-lg); border: 1px solid var(--g-bd);
  background: var(--g-bg); backdrop-filter: blur(var(--blur)) saturate(180%);
  -webkit-backdrop-filter: blur(var(--blur)) saturate(180%);
  overflow: auto; max-height: 78vh;
}
.rate-table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 13px; }
.rate-table thead th {
  position: sticky; top: 0; z-index: 2;
  background: var(--g-bg-hi);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  text-align: left; font-size: 11.5px; font-weight: 700; letter-spacing: .04em;
  color: var(--text-3); padding: 10px 12px; white-space: nowrap;
  border-bottom: 1px solid var(--g-bd);
}
.rate-table thead th[data-sort-th], .rate-table thead th[data-psort] {
  cursor: pointer; user-select: none;
}
.rate-table thead th[data-sort-th]:hover,
.rate-table thead th[data-psort]:hover { color: var(--pri); }
.rate-table thead th .ind { display: inline-block; width: 0; height: 0; margin-left: 4px; }
.rate-table thead th.asc .ind,
.rate-table thead th.desc .ind {
  border-left: 3.5px solid transparent; border-right: 3.5px solid transparent;
}
.rate-table thead th.asc .ind { border-bottom: 5px solid var(--pri); }
.rate-table thead th.desc .ind { border-top: 5px solid var(--pri); }

.rate-table tbody td {
  padding: 9px 12px; border-top: 1px solid var(--g-edge); vertical-align: middle;
}
.rate-table tbody tr:hover { background: rgba(30, 128, 255, .055); }
.rate-table tbody tr.hide { display: none; }
.rt-num { text-align: right; font-variant-numeric: tabular-nums; }
.rate-table thead th.rt-num { text-align: right; }
.rt-model { min-width: 130px; }
.rt-fam { font-weight: 600; color: var(--text); }
.rt-var { margin-left: 6px; font-size: 10.5px; color: var(--text-3); }
.rt-low b { color: #00a870; font-weight: 700; }
html[data-theme="dark"] .rt-low b { color: #4ed4a0; }
.rt-avg { color: var(--text-2); }
.rt-cheap { white-space: nowrap; }
.rt-prov { color: var(--text); font-weight: 600; text-decoration: none; }
.rt-prov:hover { color: var(--pri); text-decoration: underline; }
.rt-grp-tag {
  display: inline-block; margin-left: 6px; padding: 1px 6px; border-radius: 99px;
  font-size: 10.5px; color: var(--text-3); background: var(--g-bg-lo);
  border: 1px solid var(--g-edge); white-space: nowrap;
}
.rate-row-bars { display: flex; gap: 2px; align-items: center; min-width: 120px; }
.rb {
  display: block; height: 8px; width: var(--w, 10%); min-width: 3px; max-width: 100%;
  border-radius: 2px;
  background: linear-gradient(90deg, #00a870, #4ec9a0);
  opacity: .78; transition: opacity .16s;
}
.rb:hover { opacity: 1; }
.rb:nth-child(n+2) { background: linear-gradient(90deg, #1e80ff, #66a6ff); opacity: .55; }
.rb-more { font-size: 10.5px; color: var(--text-3); margin-left: 4px; }

.prov-table .pt-logo {
  display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px; margin-right: 7px; border-radius: 6px;
  font-size: 10px; font-weight: 700; color: #fff; vertical-align: -6px;
  background: linear-gradient(135deg, #1e80ff, #4ec9a0);
}
.prov-table .pt-name { font-weight: 600; }
.pt-fams { max-width: 340px; }
.pt-fams .rt-grp-tag:first-child { margin-left: 0; }
.rt-act { text-align: right; white-space: nowrap; }
.rt-link { color: var(--pri); font-size: 12.5px; text-decoration: none; }
.rt-link:hover { text-decoration: underline; }

@media (max-width: 900px) {
  .rate-table { font-size: 12px; }
  .rt-cmp { display: none; }
  .rate-row-bars { display: none; }
  .rt-count { margin-left: 0; }
}

/* ============================================================ 中转站顶部筛选条
   横向排布，不占侧栏；chip 多选叠加，全部前端即时过滤。 */
.pf {
  margin: 0 0 14px;
  padding: 9px 12px;
  border-radius: var(--radius-lg);
  border: 1px solid var(--g-bd);
  background: var(--g-bg);
  backdrop-filter: blur(var(--blur)) saturate(180%);
  -webkit-backdrop-filter: blur(var(--blur)) saturate(180%);
  box-shadow: var(--g-shadow);
}
.pf-row {
  display: flex; align-items: flex-start; gap: 12px; flex-wrap: wrap;
  padding: 5px 0;
}
.pf-row + .pf-row { border-top: 1px solid var(--g-edge); }
.pf-row-main { align-items: center; gap: 10px; padding-top: 0; }

.pf-search {
  position: relative; display: flex; align-items: center; gap: 6px;
  flex: 0 1 210px; min-width: 150px;
  border: 1px solid var(--ctl-bd); border-radius: 99px;
  background: var(--g-bg-hi); padding: 0 10px; height: 31px;
  color: var(--text-3);
}
.pf-search:focus-within { border-color: var(--pri-bd); }
.pf-search input {
  flex: 1; min-width: 0; border: 0; background: transparent; outline: 0;
  font-size: 12.5px; font-family: inherit; color: var(--text); height: 100%;
}
.pf-search input::placeholder { color: var(--text-3); }
.pf-clear {
  border: 0; background: transparent; color: var(--text-3); cursor: pointer;
  font-size: 15px; line-height: 1; padding: 0 2px;
}
.pf-clear:hover { color: var(--text); }

/* 排序 chip：沿用 .pf-c 外观，只额外带上 pf-seg-b 供 JS 读取排序键 */

.pf-row-main .cat-bar { margin: 0; }
.pf-row-main .btn { flex: none; height: 31px; }
.prov-count {
  margin-left: auto; font-size: 12.5px; color: var(--text-3);
  font-variant-numeric: tabular-nums; white-space: nowrap;
}

/* 分面 */
/* flex-wrap 必须开着：窄屏下 .pf-label 被设成 flex: 1 0 100%（想让它独占一行），
   父容器不换行的话，标签会占满整行把 chip 直接挤出容器外，整页横向滚动。 */
.pf-facet { display: flex; align-items: flex-start; flex-wrap: wrap; gap: 9px; flex: 1 1 100%; }
.pf-facet-wide { flex: 1 1 100%; }
.pf-label {
  flex: none; font-size: 11px; color: var(--text-3); font-weight: 600;
  padding-top: 3px; min-width: 46px; letter-spacing: .04em;
}
.pf-chips { display: flex; flex-wrap: wrap; gap: 4px; flex: 1; }

.pf-c {
  display: inline-flex; align-items: center; gap: 4px;
  border: 1px solid var(--ctl-bd); background: var(--g-bg-hi);
  color: var(--text-2); border-radius: 99px; padding: 1px 8px;
  font-size: 11.5px; line-height: 1.7; font-family: inherit; cursor: pointer;
  transition: all .14s; white-space: nowrap;
}
.pf-c:hover { border-color: var(--pri-bd); color: var(--pri); }
.pf-c.on {
  background: var(--pri); border-color: var(--pri); color: #fff; font-weight: 600;
}
.pf-c i {
  font-style: normal; font-size: 10px; opacity: .62;
  font-variant-numeric: tabular-nums;
}
.pf-c.on i { opacity: .85; }
.pf-c.off, .pf-c:disabled {
  opacity: .34; cursor: not-allowed; text-decoration: line-through;
}
.pf-c.off:hover, .pf-c:disabled:hover { border-color: var(--ctl-bd); color: var(--text-2); }

/* 已选条件 */
.pf-active {
  display: flex; flex-wrap: wrap; gap: 6px; align-items: center;
  padding-top: 9px; margin-top: 2px; border-top: 1px solid var(--g-edge);
}
.pf-tag {
  display: inline-flex; align-items: center; gap: 5px;
  border: 1px solid var(--pri-bd); background: var(--pri-l); color: var(--pri);
  border-radius: 99px; padding: 2px 9px; font-size: 11.5px; font-family: inherit;
  cursor: pointer; transition: all .14s;
}
.pf-tag:hover { background: var(--pri); color: #fff; }
.pf-tag i { font-style: normal; font-size: 12px; opacity: .7; }
.pf-tag.clear { border-color: var(--g-bd); background: transparent; color: var(--text-2); }
.pf-tag.clear:hover { background: var(--text-3); color: #fff; }

.pf-empty {
  padding: 44px 20px; text-align: center; font-size: 13.5px; color: var(--text-3);
}
.pf-link {
  border: 0; background: transparent; color: var(--pri); cursor: pointer;
  font-family: inherit; font-size: 13.5px; text-decoration: underline; padding: 0;
}

/* ============================================================ 费率行（卡片核心特征）
   顺序：标签 — 数字 — 分组名，末尾分组数。
   标签与数字之间留出稳定间距，避免黏在一起；整行不换行、超长省略。 */
.p-rate-row {
  display: flex;
  align-items: baseline;
  gap: 0;
  min-width: 0;
  line-height: 1.2;
  padding: 2px 0 3px;
  white-space: nowrap;
  overflow: hidden;
}
/* 标签：小号、弱色，靠 padding 而不是 gap 撑开间距 */
.p-rate-k {
  font-size: 10.5px;
  color: var(--text-3);
  flex: none;
  padding-right: 9px;
  letter-spacing: .02em;
}
.p-rate-num {
  font-size: 16px;
  font-weight: 800;
  letter-spacing: -.4px;
  color: #0e9f6e;
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
  flex: none;
}
html[data-theme="dark"] .p-rate-num { color: #3ddc97; }
/* x 紧贴数字，像单位而不是独立词 */
.p-rate-x {
  font-size: 10.5px;
  font-weight: 700;
  color: #0e9f6e;
  opacity: .62;
  margin-left: 1px;
  flex: none;
}
html[data-theme="dark"] .p-rate-x { color: #3ddc97; }
/* 分组名：跟在 x 后面，可省略 */
.p-rate-g {
  font-size: 10.5px;
  color: #0e9f6e;
  opacity: .8;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
  margin-left: 6px;
}
html[data-theme="dark"] .p-rate-g { color: #3ddc97; }
/* 分组数：紧跟在内容后面，不再推到最右，避免中间大片空白 */
.p-rate-n {
  font-size: 10px;
  color: var(--text-3);
  flex: none;
  margin-left: 7px;
  padding-left: 7px;
  border-left: 1px solid var(--g-edge);
  font-variant-numeric: tabular-nums;
  opacity: .9;
}
.p-rate-none {
  font-size: 11px;
  color: var(--text-3);
  flex: none;
  padding-left: 1px;
}
.p-rate-row.is-empty .p-rate-none { color: var(--text-3); }

/* ============================================================ 模型单选（家族级）
   chip 复用 .pf-c 的外观，这里只补与「可换行 + 单选高亮」相关的部分。 */
.pms-chips { flex-wrap: wrap; }
.pms-c { position: relative; }
/* 「全部」单独一点强调，让人一眼看出默认态 */
.pms-c[data-model=""] { font-weight: 600; }
/* 选中态：实心主色，和可多选的普通 chip 区分开 */
.pms-c.on {
  background: var(--pri);
  border-color: var(--pri);
  color: #fff;
  font-weight: 600;
}
.pms-c.on i { color: rgba(255, 255, 255, .72); }
html[data-theme="dark"] .pms-c.on { color: #fff; }

/* 卡片上的「某个家族」费率态：淡色衬底，和默认的「最低费率」区分开 */
.p-rate-row.is-model .p-rate-k {
  color: var(--pri);
  font-weight: 600;
  max-width: 46%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.p-rate-row.is-model .p-rate-num { color: #0e9f6e; }
html[data-theme="dark"] .p-rate-row.is-model .p-rate-num { color: #3ddc97; }
.p-rate-row.is-model {
  background: var(--pri-l);
  border-radius: 6px;
  padding-left: 6px;
  padding-right: 6px;
  margin-left: -6px;
  margin-right: -6px;
}
.p-rate-row.is-missing .p-rate-none { color: var(--text-3); }
.p-card.no-model { opacity: .58; }
.p-card.no-model:hover { opacity: 1; }

.p-card[hidden] { display: none !important; }

@media (max-width: 700px) {
  .pf-row-main { gap: 8px; }
  .pf-search { flex: 1 1 100%; }
  .prov-count { order: 9; margin-left: 0; }
  .pf-label { padding-top: 0; flex: 1 0 100%; margin-bottom: 2px; }
}

/* ---------- 回到顶部 ---------- */
/* 默认隐藏并下沉 8px，滚过一屏才浮出，避免首屏多一个干扰元素 */
.to-top {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 60;
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  padding: 0;
  border-radius: 50%;
  color: var(--text-2);
  background: var(--g-bg);
  border: 1px solid var(--g-bd);
  box-shadow: var(--g-shadow);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  cursor: pointer;
  /* 隐藏态用 visibility + pointer-events，不用 transform 移出视口：
     fixed 定位元素一旦 translateY，right/bottom 的定位基准会跟着偏。 */
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .22s ease, visibility .22s,
              color .16s, border-color .16s, background .16s, box-shadow .16s;
}
.to-top.on {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}
.to-top:hover {
  color: #fff;
  background: var(--pri);
  border-color: var(--pri);
}
.to-top svg { transition: transform .22s ease; }
.to-top:active svg { transform: scale(.86); }
.to-top.on:hover svg { transform: translateY(-2px); }
.to-top:focus-visible {
  outline: 2px solid var(--pri);
  outline-offset: 2px;
}

/* 窄屏收到右下角更贴边，别压住卡片内容 */
@media (max-width: 700px) {
  .to-top { right: 14px; bottom: 16px; width: 38px; height: 38px; }
}

/* 尊重「减少动态效果」偏好：只淡入，不做位移 */
@media (prefers-reduced-motion: reduce) {
  .to-top { transition: opacity .18s, visibility .18s; }
  .to-top svg { transition: none; }
  .to-top.on:hover svg { transform: none; }
}

/* ==================== 资讯详情页 ==================== */
/* 详情页是新增的收录主力页，需要能被单独分享、单独阅读，
   所以正文按「可读长文」排版而不是卡片流。 */
/* 详情页整体做成一张「纸」：正文直接浮在页面背景上会显得零散，
   给它一层浅底和边框，阅读区才有边界感。
   宽度跟着容器走（最大 1080px）：原来固定 780px，在 1920 屏上两边空出
   400 多像素，正文挤在中间一条，看着很窄。 */
.art-page {
  max-width: 1080px;
  margin: 0 auto;
  padding: 32px 44px 36px;
  background: var(--g-bg);
  border: 1px solid var(--g-bd);
  border-radius: var(--radius-lg);
  box-shadow: 0 1px 2px rgba(29, 33, 41, .04), 0 8px 30px -20px rgba(29, 33, 41, .25);
}

.art-crumb {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 12.5px;
  color: var(--text-3);
  margin-bottom: 18px;
  flex-wrap: wrap;
}
.art-crumb a { color: var(--text-2); text-decoration: none; }
.art-crumb a:hover { color: var(--pri); }
.art-crumb-cur { color: var(--text-3); }

.art-h1 {
  font-size: 29px;
  line-height: 1.36;
  font-weight: 700;
  letter-spacing: -.3px;
  margin: 0 0 16px;
  color: var(--text);
}

/* 元信息做成一组小标签。原来用「·」串成一行，来源/作者/时间挤在一起，
   读者要逐字读才能分出字段；上面加一层浅底就一眼能扫。 */
.art-meta {
  display: flex;
  align-items: center;
  gap: 7px;
  flex-wrap: wrap;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--g-bd);
  margin-bottom: 22px;
}
.art-chip {
  display: inline-flex;
  align-items: center;
  padding: 3px 9px;
  border-radius: 6px;
  /* 用 --hover-bg 而不是不存在的 --ctl-bg：后者没定义，算出来是透明，
     标签看起来就是「没底」的一行字，等于白做。 */
  background: var(--hover-bg);
  border: 1px solid transparent;
  font-size: 12px;
  line-height: 1.5;
  color: var(--text-2);
  white-space: nowrap;
}
.art-chip-quiet { background: transparent; color: var(--text-3); padding-left: 2px; }
.art-dot { opacity: .5; }

.art-lead {
  font-size: 15.5px;
  line-height: 1.88;
  color: var(--text-2);
  background: var(--pri-l);
  border-left: 3px solid var(--pri);
  border-radius: 0 var(--radius) var(--radius) 0;
  padding: 14px 18px;
  margin: 0 0 26px;
}

/* 正文：中文长文需要更松的行距和更大的字号，否则一屏下来很累。
   justify 让右边缘对齐（中文没有断词问题，排出来比左对齐整齐）。 */
.art-body {
  font-size: 16.5px;
  line-height: 2.05;
  color: var(--text);
  text-align: justify;
  text-justify: inter-ideograph;
}
.art-body p { margin: 0 0 1.05em; }
.art-body p:last-child { margin-bottom: 0; }
.art-body p:empty { display: none; }

/* 引用来源块：明示出处是这套存档的合规基础，视觉上要能看见 */
.art-src {
  margin: 30px 0 22px;
  padding: 15px 17px;
  background: var(--g-bg);
  border: 1px solid var(--g-bd);
  border-radius: var(--radius-lg);
  box-shadow: var(--g-shadow);
}
/* 引用格式：等宽字体 + user-select:all，点一下就把整段选中，直接 Ctrl+C 即可。
   没有加复制按钮，省掉一段 JS，行为也更好预测。 */
.art-cite {
  display: inline-block;
  padding: 3px 8px;
  border-radius: 5px;
  background: var(--hover-bg);
  font-family: ui-monospace, SFMono-Regular, Consolas, "Liberation Mono", monospace;
  font-size: 12px;
  line-height: 1.7;
  color: var(--text-2);
  word-break: break-all;
  user-select: all;
  -webkit-user-select: all;
  cursor: text;
}
.art-src-row {
  display: flex;
  gap: 12px;
  font-size: 13px;
  line-height: 1.75;
  padding: 3px 0;
}
.art-src-k {
  flex: none;
  width: 66px;
  color: var(--text-3);
}
.art-src-v { flex: 1 1 auto; min-width: 0; color: var(--text-2); word-break: break-all; }
.art-ext { color: var(--pri); text-decoration: none; }
.art-ext:hover { text-decoration: underline; }

.art-actions { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 22px; }

.art-tip {
  font-size: 12.5px;
  line-height: 1.8;
  color: var(--text-3);
  padding-top: 16px;
  border-top: 1px solid var(--g-bd);
  margin: 0;
}

/* 相关资讯：内链密度靠它，也留住读者 */
.art-rel {
  max-width: 1080px;
  margin: 34px auto 0;
  padding-top: 22px;
  border-top: 1px solid var(--g-bd);
}
.art-rel-h { font-size: 15px; font-weight: 650; margin: 0 0 14px; color: var(--text); }
.art-rel-list { list-style: none; margin: 0; padding: 0; }
.art-rel-list li {
  display: flex;
  align-items: baseline;
  gap: 12px;
  padding: 9px 0;
  border-bottom: 1px solid var(--g-bd);
}
.art-rel-list li:last-child { border-bottom: none; }
.art-rel-list a {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 14px;
  color: var(--text);
  text-decoration: none;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.art-rel-list a:hover { color: var(--pri); }
.art-rel-t { flex: none; font-size: 12px; color: var(--text-3); }

/* 首页直出卡片的样式：原来骨架屏换成真实内容后需要自己的外观 */
.news-card {
  display: flex;
  flex-direction: column;
  gap: 9px;
  padding: 16px 17px;
  border-radius: var(--radius-lg);
  background: var(--g-bg);
  border: 1px solid var(--g-bd);
  box-shadow: var(--g-shadow);
  text-decoration: none;
  color: inherit;
  transition: transform .18s, box-shadow .18s, border-color .18s;
}
.news-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--g-shadow-hover);
  border-color: var(--pri-bd);
}
.nc-top { display: flex; align-items: center; gap: 8px; font-size: 11.5px; color: var(--text-3); }
.nc-src {
  padding: 1px 7px;
  border-radius: 5px;
  background: var(--pri-l);
  color: var(--pri);
  font-weight: 600;
}
.nc-time { margin-left: auto; }
.nc-title {
  font-size: 14.5px;
  line-height: 1.55;
  font-weight: 650;
  margin: 0;
  color: var(--text);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.nc-sum {
  font-size: 12.5px;
  line-height: 1.72;
  color: var(--text-2);
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.nc-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 11.5px;
  color: var(--text-3);
  margin-top: auto;
  padding-top: 4px;
}
.nc-go { color: var(--pri); font-weight: 600; }

@media (max-width: 640px) {
  /* 手机上 38px 的左右内边距会把正文压得很窄，几乎一行放不下几个字 */
  .art-page {
    padding: 20px 16px 24px;
    border-radius: var(--radius);
    margin: 0;
  }
  .art-h1 { font-size: 22px; line-height: 1.42; }
  .art-body { font-size: 16px; line-height: 1.9; text-align: left; }
  .art-lead { padding: 12px 14px; font-size: 14.5px; }
  .art-src-row { flex-direction: column; gap: 2px; }
  .art-src-k { width: auto; }
  .art-chip { font-size: 11.5px; padding: 2px 7px; }
}

/* ==================== 每日精选合集 ==================== */
.dg-page {
  max-width: 1080px;
  margin: 0 auto;
  padding: 24px 0 40px;
}

.dg-head {
  padding-bottom: 18px;
  border-bottom: 1px solid var(--g-bd);
  margin-bottom: 8px;
}

.dg-h1 {
  font-size: 26px;
  line-height: 1.4;
  font-weight: 700;
  margin: 0 0 10px;
  color: var(--text);
}

.dg-meta {
  font-size: 12.5px;
  color: var(--text-3);
  margin: 0;
  display: flex;
  align-items: center;
  gap: 7px;
  flex-wrap: wrap;
}

/* 编号列表：合集是「第几条」的阅读节奏，用有序列表比卡片流更合适 */
.dg-list {
  list-style: none;
  margin: 0;
  padding: 0;
  counter-reset: dg;
}

.dg-item {
  display: flex;
  gap: 15px;
  padding: 20px 0;
  border-bottom: 1px solid var(--g-bd);
}
.dg-item:last-child { border-bottom: none; }

.dg-num {
  flex: none;
  width: 30px;
  height: 30px;
  border-radius: 9px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  background: var(--pri-l);
  color: var(--pri);
  margin-top: 2px;
}

/* 前三名用主色实底，视觉上区分「头条」和「其余」 */
.dg-item:nth-child(-n+3) .dg-num {
  background: var(--pri);
  color: #fff;
}

.dg-main { flex: 1 1 auto; min-width: 0; }

.dg-title {
  font-size: 16.5px;
  line-height: 1.55;
  font-weight: 650;
  margin: 0 0 8px;
}
.dg-title a {
  color: var(--text);
  text-decoration: none;
}
.dg-title a:hover { color: var(--pri); }

.dg-sum {
  font-size: 13.5px;
  line-height: 1.8;
  color: var(--text-2);
  margin: 0 0 10px;
}

.dg-foot {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 12px;
  color: var(--text-3);
  flex-wrap: wrap;
}
.dg-src {
  padding: 1px 7px;
  border-radius: 5px;
  background: var(--g-bg-hi);
  color: var(--text-2);
  font-weight: 600;
}
.dg-time { font-variant-numeric: tabular-nums; }
.dg-ext {
  margin-left: auto;
  color: var(--pri);
  text-decoration: none;
  font-weight: 600;
}
.dg-ext:hover { text-decoration: underline; }

.dg-others { margin-top: 34px; }

/* 往期合集列表沿用 art-rel-list 的外观，只需去掉多余边距 */
.dg-archive { margin-top: 20px; }
.dg-archive a { font-size: 14.5px; }

@media (max-width: 640px) {
  .dg-h1 { font-size: 21px; }
  .dg-title { font-size: 15.5px; }
  .dg-item { gap: 11px; padding: 17px 0; }
  .dg-num { width: 26px; height: 26px; font-size: 12px; }
}

/* 首页每日精选入口条 */
.dg-entry {
  display: flex;
  align-items: center;
  gap: 13px;
  margin-top: 24px;
  padding: 13px 16px;
  border-radius: var(--radius-lg);
  background: linear-gradient(100deg, var(--pri-l), transparent 72%);
  border: 1px solid var(--pri-bd);
}
.dg-entry-ic {
  flex: none;
  width: 34px;
  height: 34px;
  border-radius: 10px;
  background: var(--pri);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
}
.dg-entry-main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.dg-entry-t {
  font-size: 14.5px;
  font-weight: 650;
  color: var(--text);
  text-decoration: none;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.dg-entry-t:hover { color: var(--pri); }
.dg-entry-d { font-size: 12px; color: var(--text-3); }
.dg-entry-go {
  flex: none;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--pri);
  text-decoration: none;
}
.dg-entry-go:hover { text-decoration: underline; }

@media (max-width: 640px) {
  .dg-entry-d { display: none; }
}

/* ==================== 资讯时间轴（/news） ==================== */
/* 合并了原首页信息流与 /timeline 时间轴，按天分组的长列表。 */

.page-h1 {
  font-size: 21px;
  font-weight: 700;
  margin: 0;
  color: var(--text);
}

.news-note {
  font-size: 12.5px;
  line-height: 1.8;
  color: var(--text-3);
  margin: 0 0 18px;
}
.news-note a { color: var(--pri); text-decoration: none; }
.news-note a:hover { text-decoration: underline; }

.news-filter-tip {
  font-size: 12.5px;
  color: var(--text-2);
  margin: 0 0 10px;
}
.news-filter-tip a { color: var(--pri); }

/* 频道筛选改成链接：禁用 JS 也能用，爬虫也能顺着抓到各频道的地址 */
.tl-filter a.chan {
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  cursor: pointer;
}
.tl-filter .cn {
  opacity: .5;
  margin-left: 4px;
  font-variant-numeric: tabular-nums;
}

/* 首页的资讯速览：紧凑单行，只做导读 */
.mini-news { display: flex; flex-direction: column; }
.mn-item {
  display: flex;
  align-items: baseline;
  gap: 12px;
  padding: 11px 2px;
  border-bottom: 1px solid var(--g-bd);
  text-decoration: none;
  color: inherit;
}
.mn-item:last-child { border-bottom: none; }
.mn-item:hover .mn-title { color: var(--pri); }
.mn-time {
  flex: none;
  font-size: 12px;
  color: var(--text-3);
  font-variant-numeric: tabular-nums;
  width: 42px;
}
.mn-title {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 14px;
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.mn-src {
  flex: none;
  font-size: 11.5px;
  color: var(--text-3);
  max-width: 110px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

@media (max-width: 640px) {
  .news-time { font-size: 11.5px; }
  .mn-src { display: none; }
  .mn-title { font-size: 13.5px; }
}

/* 时间轴里的每日合集条目：它是一篇自己写的文章，不是抓来的资讯，
   视觉上要和普通条目区分开，否则读者会以为是又一条外部新闻。 */
.news-item.is-digest {
  background: linear-gradient(100deg, var(--pri-l), transparent 70%);
  border-radius: 0 var(--radius) var(--radius) 0;
}
/* 深色主题有一条 html[data-theme="dark"] .news-item::before 把圆点填成暗色，
   它的特异性 (0,2,1) 高于 .news-item.is-digest::before 的 (0,2,0)，
   所以必须同样带上 html[data-theme] 前缀才能盖住，否则深色下合集圆点不是主色。 */
.news-item.is-digest::before,
html[data-theme="dark"] .news-item.is-digest::before {
  background: var(--pri);
  box-shadow: 0 0 0 4px rgba(30, 128, 255, .18);
}
.dg-mark {
  display: inline-block;
  margin-left: 8px;
  padding: 1px 8px;
  border-radius: 5px;
  background: var(--pri);
  color: #fff;
  font-size: 11px;
  font-weight: 600;
  vertical-align: middle;
  white-space: nowrap;
}

/* ---------------- 每日资讯统计 ----------------
   统计不是编辑精选，视觉上要比合集克制：用中性灰而不是主色，
   免得时间轴里两种标记都在抢注意力。 */
.news-item.is-stats {
  background: linear-gradient(100deg, var(--g-bg-lo), transparent 70%);
  border-radius: 0 var(--radius) var(--radius) 0;
}
.news-item.is-stats::before,
html[data-theme="dark"] .news-item.is-stats::before {
  background: var(--text-3);
  box-shadow: 0 0 0 4px var(--g-bg-lo);
}
.st-mark {
  display: inline-block;
  margin-left: 8px;
  padding: 1px 8px;
  border-radius: 5px;
  background: var(--g-bg-lo);
  color: var(--text-2);
  border: 1px solid var(--g-bd);
  font-size: 11px;
  font-weight: 600;
  vertical-align: middle;
  white-space: nowrap;
}

.st-page {
  max-width: 760px;
  margin: 0 auto;
  padding: 26px 0 50px;
}
.st-head { margin: 14px 0 22px; }
.st-h1 {
  font-size: 25px;
  line-height: 1.35;
  font-weight: 700;
  color: var(--text);
  margin: 0 0 10px;
}
.st-meta {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  color: var(--text-3);
  margin: 0;
}
.st-badge {
  padding: 2px 9px;
  border-radius: 5px;
  background: var(--pri-l);
  color: var(--pri);
  font-weight: 600;
  font-size: 12px;
}

.st-others { margin-top: 34px; }
.st-h2 {
  font-size: 16px;
  font-weight: 600;
  color: var(--text);
  margin: 0 0 14px;
  padding-bottom: 9px;
  border-bottom: 1px solid var(--g-bd);
}
.st-list { display: grid; gap: 8px; }
.st-item {
  display: flex;
  align-items: baseline;
  gap: 12px;
  padding: 10px 13px;
  border-radius: 8px;
  background: var(--g-bg);
  border: 1px solid var(--g-bd);
  text-decoration: none;
  transition: border-color .16s, background .16s;
}
.st-item:hover {
  border-color: var(--pri);
  background: var(--g-bg-lo);
}
.st-item-date {
  flex: 0 0 auto;
  font-size: 12px;
  color: var(--text-3);
  font-variant-numeric: tabular-nums;
}
.st-item-title {
  font-size: 13.5px;
  color: var(--text-2);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

@media (max-width: 640px) {
  .st-page { padding: 18px 0 36px; }
  .st-h1 { font-size: 20px; }
  
  .st-item { flex-direction: column; gap: 3px; }
  .st-item-title { white-space: normal; }
}

/* ---------------- 今日要闻 ----------------
   统计页顶部的重要资讯列表。标题可点击跳到站内详情，
   原文完整标题挂在 title 属性里，鼠标悬停能看到全称。 */
.st-hl { margin: 0 0 26px; }
.st-hl-list {
  list-style: none;
  counter-reset: hl;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 2px;
}
.st-hl-item {
  counter-increment: hl;
  position: relative;
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 9px 12px 9px 34px;
  border-radius: 7px;
  transition: background .15s;
}
.st-hl-item:hover { background: var(--g-bg-lo); }
.st-hl-item::before {
  content: counter(hl);
  position: absolute;
  left: 8px;
  top: 9px;
  width: 18px;
  text-align: right;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-3);
  font-variant-numeric: tabular-nums;
}
/* 前三条是当天最重要的，序号用主色点出来 */
.st-hl-item:nth-child(-n+3)::before { color: var(--pri); }
.st-hl-title {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--text);
  text-decoration: none;
}
.st-hl-item:hover .st-hl-title { color: var(--pri); }
.st-hl-src {
  flex: 0 0 auto;
  font-size: 12px;
  color: var(--text-3);
  white-space: nowrap;
}

@media (max-width: 640px) {
  .st-hl-item { flex-direction: column; gap: 3px; }
  .st-hl-src { padding-left: 0; }
}

/* 统计正文里的小节标题（来源分布 / 分类分布 / 高频话题）是纯文本行，
   加粗并拉开间距，让纯文本也有层次 */

.st-hl + 

/* 「今日精选」标题右侧的条数标注 */
.st-h2-n {
  margin-left: 8px;
  font-size: 12px;
  font-weight: 400;
  color: var(--text-3);
}

/* meta 行的分隔点 */
.st-dot { color: var(--text-3); opacity: .5; }

/* ---------------- 404 ---------------- */
/* 设计取舍：不做插画、不加动画。
   404 是个「意外页面」，用户到这里本来就有点烦，
   再堆视觉噪音只会更烦。只留三样：大号数字定位、一句话说清状况、
   一排能立刻点走的入口。 */

.nf-page {
  max-width: 720px;
  margin: 0 auto;
  padding: 48px 0 80px;
}

.nf-main { text-align: center; }

/* 数字做视觉锚点，渐变弱化「报错感」 */
.nf-code {
  font-size: 96px;
  font-weight: 900;
  line-height: 1;
  letter-spacing: -.055em;
  background: linear-gradient(135deg, var(--pri), var(--pri-l));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  opacity: .9;
  user-select: none;
}

.nf-title {
  margin: 14px 0 0;
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -.01em;
  color: var(--text);
}

.nf-text {
  margin: 10px auto 0;
  max-width: 420px;
  font-size: 13.5px;
  line-height: 1.75;
  color: var(--text-2);
}

.nf-actions {
  display: flex;
  gap: 10px;
  justify-content: center;
  margin-top: 22px;
}

/* 入口卡片：两列，窄屏一列。
   用 minmax(0,1fr) 而非 1fr——否则长文案会把栅格撑破。 */
.nf-links {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-top: 44px;
}

.nf-link {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-rows: auto auto;
  column-gap: 11px;
  row-gap: 1px;
  align-items: center;
  padding: 13px 15px;
  border: 1px solid var(--g-bd);
  border-radius: var(--radius);
  background: var(--g-bg);
  text-decoration: none;
  transition: border-color .16s, background .16s, transform .16s;
}

.nf-link:hover {
  border-color: var(--pri-bd);
  background: var(--g-bg-hi);
  transform: translateY(-1px);
}

.nf-ico {
  grid-row: 1 / 3;
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 9px;
  color: var(--pri);
  background: var(--pri-l);
}

.nf-link-t {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--text);
}

.nf-link-d {
  font-size: 11.5px;
  color: var(--text-3);
}

@media (max-width: 560px) {
  .nf-page { padding: 32px 0 56px; }
  .nf-code { font-size: 72px; }
  .nf-links { grid-template-columns: minmax(0, 1fr); margin-top: 32px; }
  .nf-actions { flex-direction: column; }
  .nf-actions .btn { width: 100%; }
}