/* Kunfreight 鲲运科技 · 主页共享样式（public/home/home.css）
 *
 * 归属：主页线（index.html / about.html / contact.html）。**这条线之外的人也会引它**，
 *       所以：① 所有选择器都带 `kf-` 前缀，不与别人的类名撞车；② 不写任何影响全局的元素选择器
 *       （除 :root 变量与 box-sizing，都是全站无害的）；③ 不改 public/demo/**、public/tracking/**。
 *
 * CSP 约束（netlify.toml：script-src 'self' 'sha256-…'）：本文件是**外部样式表**，
 * 不引入任何脚本，也没有 @import。
 *
 * 配色沿用现有品牌（public/demo/demo.css 与 public/features/index.html）：
 *   深蓝绿 #16211d / 蓝 #1e5fa8 / 墨绿 #1f6f52 / 浅底 #f4f6f5
 */

:root {
  --kf-bg: #f4f6f5;
  --kf-card: #ffffff;
  --kf-ink: #16211d;
  --kf-muted: #5f736b;
  --kf-line: #dde5e1;
  --kf-brand: #1f6f52;
  --kf-brand-dark: #17553f;
  --kf-brand-soft: #e6f2ec;
  --kf-blue: #1e5fa8;
  --kf-blue-soft: #e8f1fb;
  --kf-warn: #a35a00;
  --kf-warn-soft: #fdf1e0;
  --kf-danger: #b3261e;
  --kf-shadow: 0 1px 3px rgba(16, 40, 32, .08), 0 8px 24px rgba(16, 40, 32, .06);
  /* 主区大卡的**重**投影（照样品 demo-home-v2 的 --sh-2；辅助区刻意没有投影） */
  --kf-shadow-heavy: 0 2px 6px rgba(16, 42, 33, .07), 0 14px 34px rgba(16, 42, 33, .09);
  --kf-radius: 14px;
  --kf-radius-lg: 20px;
  --kf-font: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB",
    "Microsoft YaHei", "Microsoft JhengHei", sans-serif;
  --kf-header-h: 64px;
}

* { box-sizing: border-box; }

html, body { margin: 0; padding: 0; }
html { scroll-behavior: smooth; }

body.kf-body {
  background: var(--kf-bg);
  color: var(--kf-ink);
  font: 15px/1.65 var(--kf-font);
  -webkit-text-size-adjust: 100%;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .kf-header .kf-nav-panel, .kf-dialog, .kf-card, .kf-header .kf-btn{ transition: none !important; }
}

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

.kf-skip {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--kf-brand); color: #fff; padding: 10px 16px; border-radius: 0 0 10px 0;
}
.kf-skip:focus { left: 0; }

/* ⚠️ 这里**故意不写全局 `.kf-wrap`**：内容线 `tools.css` 里 `.kf-wrap` 是
 *    `max-width:1240px; padding:30px 28px 8px`（他们正文的骨架）。
 *    home.css 会被他们的页面加载（顶部导航要注入）⇒ 一条全局 `.kf-wrap{width:min(1180px, …)}`
 *    会把他们的正文宽度从 1240 改成 1180（实测踩过，见报告"计算样式回归检查"）。
 *    ⇒ 顶栏的容器宽度只在 `.kf-header .kf-wrap` 里定义（见下）；主页正文自己的 `main > .kf-wrap`
 *      与宽屏规则放在后面的「主页主体」段里，各不干扰。 */

/* ============================ 顶栏 ============================ */
.kf-header {
  position: sticky; top: 0; z-index: 40;
  background: #fffffff2;
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--kf-line);
}
/* 顶栏自己的容器宽度（**锁在 .kf-header 内**，理由见上） */
.kf-header .kf-wrap { width: min(1180px, 100% - 40px); margin-inline: auto; }
.kf-header .kf-header-inner{
  min-height: var(--kf-header-h);
  display: flex; align-items: center; gap: 18px;
}

.kf-header .kf-brand{
  display: flex; align-items: center; gap: 10px; flex: none;
  text-decoration: none; color: var(--kf-ink);
}
.kf-header .kf-brand-mark{
  width: 34px; height: 34px; border-radius: 9px; flex: none;
  background: var(--kf-brand); color: #fff;
  display: grid; place-items: center;
  font: 700 18px/1 "Songti SC", STSong, "Microsoft YaHei", serif;
}
.kf-header .kf-brand-text{ display: flex; flex-direction: column; line-height: 1.15; }
.kf-header .kf-brand-name{ font-size: 17px; font-weight: 700; letter-spacing: -.2px; }
.kf-header .kf-brand-sub{ font-size: 11.5px; color: var(--kf-muted); letter-spacing: .04em; }

/* ---- 主菜单：dl > (dt[下拉项] + dd[面板]) / (dt > a[纯链接]) ---- */
.kf-header .kf-nav{ margin-left: auto; }
.kf-header .kf-nav-list{
  display: flex; align-items: center; gap: 2px;
  margin: 0; padding: 0; list-style: none;
}
.kf-header .kf-nav-item{ margin: 0; padding: 0; position: relative; }
/* 一个菜单标题有"两份表现"，靠宽度切换：
 *   · a.kf-nav-link[data-kf-full]  —— 宽屏用：本身带真 href（可右键新标签页打开、爬虫可跟随）
 *   · button.kf-nav-toggle         —— 窄屏用：纯展开按钮（点一下展开下面的列表）
 * 两份都留在 HTML 里（无 JS 时窄屏那份没作用，宽屏那份照常可点）；JS 给按钮补上跳转。
 *
 * ⚠️ 下面两条的**选择器必须比 .kf-nav-link 更具体**：`.kf-nav-link` 在文件后面设了
 .kf-header *    display:flex，若这里写成 `.kf-nav-toggle{display:none}`（同样只有 1 个类名），
 *    后写的 display:flex 会赢 ⇒ 宽屏上每个菜单项会**同时冒出链接和按钮两份**（实测踩过）。 */
.kf-header .kf-nav-item > dt > .kf-nav-toggle{ display: none; }
.kf-header .kf-nav-link{
  display: flex; align-items: center; gap: 6px;
  padding: 9px 12px; border-radius: 9px;
  color: var(--kf-ink); font-size: 14.5px; text-decoration: none; white-space: nowrap;
  border: 1px solid transparent; background: none; font-family: inherit; cursor: pointer;
}
.kf-header .kf-nav-link:hover{ background: var(--kf-brand-soft); color: var(--kf-brand-dark); }
.kf-header .kf-nav-link:focus-visible{ outline: 2px solid var(--kf-brand); outline-offset: 1px; }
.kf-header .kf-nav-item.kf-is-current > .kf-nav-link{ color: var(--kf-brand); }
.kf-header .kf-nav-item > dt{ margin: 0; }
.kf-header .kf-nav-panel ul{ list-style: none; margin: 0; padding: 0; }
.kf-header .kf-caret{
  width: 8px; height: 8px; border-right: 1.6px solid currentColor; border-bottom: 1.6px solid currentColor;
  transform: rotate(45deg) translate(-1px, -1px); flex: none; opacity: .7;
}
.kf-header .kf-optional{ font-size: 11px; color: var(--kf-muted); font-weight: 400; }
/* 「（暂无数据）」小字：只表示"今天库里没有真实航线"，不是"这个入口不能用"——
 * 点进去报价页会如实说明；所以用低调的灰色，不用警告色。
 * 它同时出现在**顶栏下拉**和**主页卡片**里 ⇒ 不能锁进 .kf-header。 */
.kf-mode-hint { font-size: 11.5px; color: var(--kf-muted); margin-left: 5px; white-space: nowrap; }

.kf-header .kf-nav-panel{
  position: absolute; top: calc(100% + 8px); left: 0; z-index: 30;
  min-width: 232px; margin: 0; padding: 8px;
  background: var(--kf-card); border: 1px solid var(--kf-line); border-radius: 12px;
  box-shadow: var(--kf-shadow);
  list-style: none;
  opacity: 0; visibility: hidden; transform: translateY(-4px);
  transition: opacity .14s ease, transform .14s ease, visibility .14s;
}
/* 面板与按钮之间的“桥”，避免鼠标从按钮移到面板时穿过空隙而收起 */
.kf-header .kf-nav-panel::before{ content: ""; position: absolute; left: 0; right: 0; top: -10px; height: 10px; }
.kf-header .kf-nav-panel a{
  display: block; padding: 8px 10px; border-radius: 8px;
  color: var(--kf-ink); font-size: 14px; text-decoration: none; white-space: nowrap;
}
.kf-header .kf-nav-panel a:hover{ background: var(--kf-brand-soft); color: var(--kf-brand-dark); }
.kf-header .kf-nav-panel .kf-panel-note{
  padding: 9px 10px 5px; font-size: 12px; color: var(--kf-muted);
  border-top: 1px solid var(--kf-line); margin-top: 6px;
}

/* 桌面：悬停展开（鼠标）+ 点击展开（键盘/触屏；由 home.js 加 data-kf-open）
 * ⚠️ 这里的 761px 与下面窄屏那条 820px 是同一套断点的两半：home.js 的 mqNarrow 也是 820px。
 *    三条必须一致，否则 761–820px 之间会同时出现"悬停浮层"和"汉堡菜单"。 */
@media (hover: hover) and (min-width: 821px) {
  .kf-nav-item:hover > .kf-nav-panel,
  .kf-header .kf-nav-item:focus-within > .kf-nav-panel{ opacity: 1; visibility: visible; transform: none; }
}
.kf-header .kf-nav-item[data-kf-open="true"] > .kf-nav-panel{ opacity: 1; visibility: visible; transform: none; }
.kf-header .kf-nav-item[data-kf-open="true"] > .kf-nav-link{ background: var(--kf-brand-soft); color: var(--kf-brand-dark); }

/* 右侧账户区 */
.kf-header .kf-account{ display: flex; align-items: center; gap: 8px; flex: none; }
.kf-header .kf-who{
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 13.5px; color: var(--kf-muted); max-width: 190px;
}
.kf-header .kf-who b{ color: var(--kf-ink); font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kf-header .kf-who-dot{ width: 7px; height: 7px; border-radius: 50%; background: var(--kf-brand); flex: none; }

.kf-header .kf-hamburger{
  display: none; margin-left: auto;
  align-items: center; gap: 8px;
  background: none; border: 1px solid var(--kf-line); border-radius: 9px;
  padding: 8px 12px; font: inherit; font-size: 14px; color: var(--kf-ink); cursor: pointer;
}
.kf-header .kf-hamburger:hover{ border-color: var(--kf-brand); color: var(--kf-brand); }
.kf-header .kf-hamburger-bars{ display: grid; gap: 3px; }
.kf-header .kf-hamburger-bars i{ display: block; width: 16px; height: 2px; background: currentColor; border-radius: 2px; }

/* ============================ 按钮 ============================
 * `.kf-btn` 是**四处共用**的（顶栏账号区 / 主页 Hero / 卡片 / 登录对话框）
 * ⇒ **不能**只锁进 `.kf-header`（那样 Hero 与卡片的按钮会退化成普通文字链接，实测踩过）。
 * 改用 `:is(.kf-body, .kf-dialog, .kf-header)`：
 *   · `body.kf-body` 只出现在主页线三页 ⇒ 不影响内容线/后台线（它们 body 没这个类）；
 *   · `.kf-header` 覆盖**注入到他们页面**的顶栏账号区按钮（`admin.css` 的 `.kf-btn` 是白底描边，
 *     实测会把注入的「登录」按钮画成白底 —— 这里把特异性抬到 (0,3,0) 压过它，与加载顺序无关）；
 *   · `.kf-dialog` 覆盖同一份注入的登录对话框（那边 body 没有 kf-body）。
 * 他们正文里的 `.kf-btn` 不受影响（祖先里既无 .kf-body 也无 .kf-header/.kf-dialog）。
 */
:is(.kf-body, .kf-dialog, .kf-header) .kf-btn{
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 10px 18px; border-radius: 10px; border: 1px solid transparent;
  background: var(--kf-brand); color: #fff; font: inherit; font-size: 14.5px;
  text-decoration: none; cursor: pointer; white-space: nowrap;
}
:is(.kf-body, .kf-dialog, .kf-header) .kf-btn:hover{ filter: brightness(1.07); }
:is(.kf-body, .kf-dialog, .kf-header) .kf-btn:focus-visible{ outline: 2px solid var(--kf-ink); outline-offset: 2px; }
:is(.kf-body, .kf-dialog, .kf-header) .kf-btn:disabled{ opacity: .45; cursor: not-allowed; filter: none; }
:is(.kf-body, .kf-dialog, .kf-header) .kf-btn.kf-ghost{ background: #fff; color: var(--kf-brand); border-color: var(--kf-brand); }
:is(.kf-body, .kf-dialog, .kf-header) .kf-btn.kf-ghost:hover{ background: var(--kf-brand-soft); }
:is(.kf-body, .kf-dialog, .kf-header) .kf-btn.kf-quiet{ background: #fff; color: var(--kf-ink); border-color: var(--kf-line); }
:is(.kf-body, .kf-dialog, .kf-header) .kf-btn.kf-quiet:hover{ border-color: var(--kf-brand); color: var(--kf-brand); }
:is(.kf-body, .kf-dialog, .kf-header) .kf-btn.kf-sm{ padding: 7px 13px; font-size: 13.5px; border-radius: 9px; }
:is(.kf-body, .kf-dialog, .kf-header) .kf-btn.kf-block{ width: 100%; }

/* ============================ 主页主体 ============================
 * 这里的类（.kf-wrap / .kf-grid / .kf-card / .kf-hero…）**只有主页线三页**用，
 * 但那三页的 body 是 `kf-body` ⇒ 统一加 `.kf-body` 前缀，避免以后别人复用同名类时互相影响。
 */
.kf-body .kf-wrap { width: min(1180px, 100% - 40px); margin-inline: auto; }
.kf-main { display: block; }
.kf-section { padding: 46px 0 8px; }
.kf-section-head { margin-bottom: 20px; }
.kf-eyebrow {
  font-size: 12px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--kf-brand); margin: 0 0 8px;
}
.kf-h2 { font-size: 23px; margin: 0 0 8px; letter-spacing: -.3px; }
.kf-lead { margin: 0; color: var(--kf-muted); font-size: 15px; max-width: 62ch; }

/* ---- Hero（2026-10-12 改版：首屏两条主路 / 登录后两张「继续」卡） ----
 * ⚠️ 首屏与两张卡都用 `[hidden]` 切换形态，而它们里面有 display:grid/flex 的节点 ⇒
 *    必须让 [hidden] 强制生效，否则两种形态会同时出现（照样品那条 `[hidden]{display:none!important}`）。
 *    只锁在 `.kf-body` 下，不去影响别人的页面。 */
.kf-body [hidden] { display: none !important; }
.kf-hero { padding: 44px 0 30px; }
.kf-hero h1, .kf-hero-h1 {
  font-size: clamp(28px, 3.6vw, 42px); line-height: 1.22; letter-spacing: -.8px;
  margin: 0 0 14px; font-weight: 800;
}
.kf-hero h1 .kf-accent, .kf-hero-h1 .kf-accent, .kf-hero-copy b { color: var(--kf-brand); }
.kf-hero-en {
  font: 13.5px/1.5 Georgia, "Times New Roman", serif; color: var(--kf-muted);
  letter-spacing: .02em; margin: 0 0 16px;
}
.kf-hero-copy { color: var(--kf-muted); font-size: 16px; margin: 0 0 22px; max-width: 78ch; }
.kf-muted-note {
  margin: 18px 0 0; font-size: 12.5px; color: var(--kf-muted);
  line-height: 1.8; max-width: 96ch;
}
.kf-muted-note code, .kf-route-target code { color: var(--kf-brand-dark); font-weight: 600; }

/* 两条主路：并排、等宽、**都绿实心**（用户 2026-10-12 拍板：这是两条并列主路，不是主次） */
.kf-routes { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-top: 26px; }
.kf-route {
  position: relative; display: flex; flex-direction: column; gap: 10px; overflow: hidden;
  background: var(--kf-card); border: 1px solid var(--kf-line); border-radius: var(--kf-radius-lg);
  padding: 22px 22px 20px; box-shadow: var(--kf-shadow);
}
.kf-route::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--kf-brand); }
.kf-route.kf-route-alt::before { background: #2b5f8a; }
.kf-route-h { display: flex; align-items: center; gap: 10px; margin: 0; }
.kf-route-k { font-size: 12px; font-weight: 800; letter-spacing: .14em; color: var(--kf-muted); }
.kf-route-ic {
  width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center;
  font-size: 16px; background: var(--kf-brand-soft); color: var(--kf-brand-dark);
}
.kf-route.kf-route-alt .kf-route-ic { background: var(--kf-blue-soft); color: #1f4f75; }
.kf-route-t { font-size: 22px; font-weight: 800; letter-spacing: -.2px; margin: 0; }
.kf-route-d { font-size: 14.5px; color: var(--kf-muted); margin: 0; }
.kf-route-go { margin-top: auto; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding-top: 8px; }
.kf-route-target {
  font-size: 12.5px; color: var(--kf-muted); background: #f7fbf9;
  border: 1px dashed var(--kf-line); border-radius: 9px; padding: 7px 10px; flex: 1 1 210px;
}
.kf-btn-lg { font-size: 16px; padding: 14px 24px; border-radius: 12px; font-weight: 700; }

/* 已登录：两张「继续」卡（数字来自 GET /api/home/summary） */
.kf-resume { display: grid; grid-template-columns: 1.1fr .9fr; gap: 18px; margin-top: 24px; }
.kf-resume-card {
  background: var(--kf-card); border: 1px solid var(--kf-line); border-radius: var(--kf-radius-lg);
  padding: 20px 22px; box-shadow: var(--kf-shadow);
}
.kf-resume-h {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 0 0 12px;
  font-size: 13px; font-weight: 800; letter-spacing: .1em; color: var(--kf-muted);
}
.kf-status-line { margin: 0; padding: 10px 0; font-size: 13.5px; color: var(--kf-muted); line-height: 1.8; }
.kf-resume-line {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px;
  padding: 9px 0; border-top: 1px dashed var(--kf-line);
}
.kf-resume-body > .kf-resume-line:first-child { border-top: 0; }
.kf-resume-line .kf-k { font-size: 12.5px; color: var(--kf-muted); }
.kf-resume-line .kf-v { font-weight: 700; word-break: break-word; }
.kf-metrics { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.kf-metric { background: #f7fbf9; border: 1px solid #dcebe4; border-radius: 12px; padding: 12px 14px; }
.kf-metric .kf-n { font-size: 26px; font-weight: 800; color: var(--kf-brand-dark); line-height: 1.25; }
.kf-metric .kf-l { font-size: 12.5px; color: var(--kf-muted); }
.kf-chip {
  display: inline-block; font-size: 11.5px; font-weight: 700; border-radius: 999px;
  padding: 2px 8px; background: var(--kf-brand-soft); color: var(--kf-brand-dark);
}
.kf-chip.kf-chip-warn { background: var(--kf-warn-soft); color: var(--kf-warn); border: 1px solid #efd9a8; }
/* 顶栏「我的项目」旁边的小计数（已登录且有在途货运时才由 home.js 填字） */
.kf-nav-badge:empty { display: none; }
.kf-header .kf-nav-badge {
  background: var(--kf-brand); color: #fff; font-size: 11px; font-weight: 700;
  border-radius: 999px; padding: 1px 6px; line-height: 1.5;
}

/* ---- 主页内容区的卡片（**不是**导航项：顶栏是 5 个菜单项） ---- */
.kf-grid { display: grid; gap: 16px; }
.kf-grid-4 { grid-template-columns: repeat(4, 1fr); }
.kf-grid-3 { grid-template-columns: repeat(3, 1fr); }
.kf-grid-2 { grid-template-columns: repeat(2, 1fr); }

/* ---- 主区（价格平台 + 运输项目管理）：两张**大卡**，视觉更重 ----
 * 照样品：白底 + 重投影 + 各有一个主按钮 + 每行带一句话说明；辅助区则浅底、无投影、小字号。 */
.kf-sec-main { background: linear-gradient(180deg, var(--kf-bg), #fff); }
.kf-sec-aux { background: #f2f6f4; border-top: 1px solid var(--kf-line); padding-bottom: 46px; }
.kf-eyebrow-quiet { color: var(--kf-muted); }
.kf-h2-quiet { color: #2c3f38; font-size: 21px; }
.kf-main-grid { display: grid; grid-template-columns: 1.06fr .94fr; gap: 20px; align-items: start; }
.kf-card-main { padding: 24px; border-radius: var(--kf-radius-lg); box-shadow: var(--kf-shadow-heavy); }
.kf-card-main h3 { font-size: 20px; font-weight: 800; }
.kf-card-main > p { font-size: 14px; }
.kf-card-cta { margin: 0 0 16px !important; }
.kf-aux-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.kf-card-aux {
  background: rgba(255, 255, 255, .72); border: 1px solid #e4ebe8; border-radius: 12px;
  padding: 16px 17px; box-shadow: none;
}
.kf-card-aux h3 { font-size: 14px; font-weight: 700; display: flex; align-items: center; gap: 8px; }
.kf-card-aux p { font-size: 13px; }
.kf-card-aux .kf-card-links a { padding: 6px 8px; font-size: 13.5px; }
.kf-aux-badge {
  font-size: 10.5px; font-weight: 700; color: #7d9189;
  border: 1px solid #dbe4e0; border-radius: 999px; padding: 1px 6px;
}
/* 主区卡片里的「一行入口 + 一句话说明」。
 * ⚠️ 选择器必须比 `.kf-card-links a`（(0,2,0)，上面那条）更具体，否则 `align-items: center`
 *    会赢、每行文字被居中（实测踩过：要写 `.kf-card-links.kf-card-links-rich`）。 */
.kf-card-links.kf-card-links-rich a { align-items: flex-start; flex-direction: column; gap: 2px; padding: 9px 10px; text-align: left; }
.kf-card-links.kf-card-links-rich a .kf-row-d { font-size: 12.5px; color: var(--kf-muted); font-weight: 400; }

.kf-card {
  display: flex; flex-direction: column;
  background: var(--kf-card); border: 1px solid var(--kf-line); border-radius: var(--kf-radius);
  padding: 20px; box-shadow: var(--kf-shadow);
}
.kf-card h3 { margin: 0 0 6px; font-size: 17px; }
.kf-card p { margin: 0 0 14px; color: var(--kf-muted); font-size: 13.5px; }
.kf-card-links { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.kf-card-links a {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 7px 9px; border-radius: 8px; text-decoration: none;
  color: var(--kf-ink); font-size: 14px; border: 1px solid transparent;
}
.kf-card-links a:hover { background: var(--kf-brand-soft); color: var(--kf-brand-dark); }
.kf-card-links a.kf-locked::after {
  content: "需登录"; font-size: 11px; color: var(--kf-blue);
  background: var(--kf-blue-soft); border-radius: 999px; padding: 1px 8px; flex: none;
}
.kf-card-links a.kf-open::after {
  content: "公开"; font-size: 11px; color: var(--kf-brand);
  background: var(--kf-brand-soft); border-radius: 999px; padding: 1px 8px; flex: none;
}
.kf-card-note {
  margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--kf-line);
  font-size: 12px; color: var(--kf-muted);
}

.kf-fact-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.kf-fact-list li { display: flex; gap: 10px; font-size: 14px; }
.kf-fact-list i {
  flex: none; width: 22px; height: 22px; border-radius: 7px; background: var(--kf-brand-soft);
  color: var(--kf-brand); display: grid; place-items: center; font-size: 12px; font-style: normal; font-weight: 600;
}

/* ---- 提示条 ---- */
.kf-notice {
  margin-top: 22px; padding: 15px 18px; border-radius: 12px;
  border: 1px solid #cfe4d9; background: var(--kf-brand-soft);
  font-size: 13.5px; color: #274b3d; line-height: 1.75;
}
.kf-notice.kf-notice-quiet { background: #fff; border-color: var(--kf-line); color: var(--kf-muted); }
.kf-notice b { color: var(--kf-brand-dark); }

/* ============================ 页脚 ============================ */
.kf-footer {
  margin-top: 56px; border-top: 1px solid var(--kf-line); background: #fff;
  padding: 30px 0 34px; font-size: 13px; color: var(--kf-muted);
}
.kf-footer-inner { display: flex; gap: 24px; flex-wrap: wrap; justify-content: space-between; }
.kf-footer nav { display: flex; gap: 16px; flex-wrap: wrap; }
.kf-footer a { color: var(--kf-muted); text-decoration: none; }
.kf-footer a:hover { color: var(--kf-brand); text-decoration: underline; }
.kf-footer-disclaimer { margin: 18px 0 0; padding-top: 14px; border-top: 1px dashed var(--kf-line); line-height: 1.8; }

/* ============================ 对话框（登录 / 注册） ============================
 *
 * ⚠️ 除了 `.kf-dialog` 自身，其余选择器全部锁在 `.kf-dialog` 里面：`admin.css` 里另有
 *    `.kf-field` / `.kf-status`（值不同），不锁的话后台页的表单样式会被这里覆盖。
 */
.kf-dialog{
  border: 0; padding: 0; border-radius: 16px; background: var(--kf-card); color: var(--kf-ink);
  width: min(440px, calc(100vw - 28px));
  box-shadow: 0 24px 70px rgba(16, 40, 32, .28);
}
.kf-dialog::backdrop{ background: rgba(10, 24, 19, .48); }
.kf-dialog .kf-dialog-body{ padding: 22px; }
.kf-dialog .kf-dialog-head{ display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.kf-dialog .kf-dialog-title{ margin: 0; font-size: 19px; }
.kf-dialog .kf-dialog-why{ margin: 6px 0 0; font-size: 13px; color: var(--kf-muted); line-height: 1.7; }
.kf-dialog .kf-x{
  flex: none; width: 32px; height: 32px; border-radius: 9px; border: 1px solid var(--kf-line);
  background: #fff; color: var(--kf-muted); font: inherit; font-size: 17px; line-height: 1; cursor: pointer;
}
.kf-dialog .kf-x:hover{ border-color: var(--kf-brand); color: var(--kf-brand); }

.kf-dialog .kf-tabs{ display: flex; gap: 4px; margin: 16px 0 16px; border-bottom: 1px solid var(--kf-line); }
.kf-dialog .kf-tab{
  border: 0; background: none; font: inherit; font-size: 14.5px; cursor: pointer;
  padding: 9px 12px; color: var(--kf-muted); border-bottom: 2px solid transparent; margin-bottom: -1px;
}
.kf-dialog .kf-tab:hover{ color: var(--kf-ink); }
.kf-dialog .kf-tab[aria-selected="true"]{ color: var(--kf-brand); border-bottom-color: var(--kf-brand); font-weight: 600; }

.kf-dialog .kf-field{ margin-bottom: 12px; }
.kf-dialog .kf-field label{ display: block; font-size: 13px; color: var(--kf-muted); margin-bottom: 5px; }
.kf-dialog .kf-field .kf-req{ color: var(--kf-danger); }
.kf-dialog .kf-field input, .kf-dialog .kf-field textarea, .kf-dialog .kf-field select{
  width: 100%; padding: 10px 11px; border: 1px solid var(--kf-line); border-radius: 9px;
  font: inherit; font-size: 14px; background: #fff; color: var(--kf-ink);
}
.kf-dialog .kf-field input:focus, .kf-dialog .kf-field textarea:focus, .kf-dialog .kf-field select:focus{
  outline: 2px solid #bcdccc; outline-offset: 1px; border-color: var(--kf-brand);
}
.kf-dialog .kf-field textarea{ min-height: 104px; resize: vertical; }
.kf-dialog .kf-field-hint{ margin: 5px 0 0; font-size: 12px; color: var(--kf-muted); }
.kf-dialog .kf-row2{ display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }

.kf-dialog .kf-status{ margin: 12px 0 0; font-size: 13.5px; min-height: 18px; line-height: 1.7; }
.kf-dialog .kf-status[data-kf-tone="ok"]{ color: #1c5c40; }
.kf-dialog .kf-status[data-kf-tone="err"]{ color: var(--kf-danger); }
.kf-dialog .kf-status[data-kf-tone="warn"]{ color: var(--kf-warn); }
.kf-dialog .kf-status[data-kf-tone="busy"]{ color: var(--kf-muted); }

.kf-dialog .kf-form-actions{ margin-top: 16px; }
.kf-dialog .kf-mini{ margin: 12px 0 0; font-size: 12px; color: var(--kf-muted); line-height: 1.75; }
.kf-dialog .kf-divider{ border: 0; border-top: 1px dashed var(--kf-line); margin: 16px 0; }

/* ============================ 内容页（about / contact） ============================ */
.kf-page-head { padding: 38px 0 6px; }
.kf-page-head h1 { font-size: clamp(25px, 3vw, 33px); margin: 0 0 10px; letter-spacing: -.6px; }
.kf-crumbs { font-size: 13px; color: var(--kf-muted); margin: 0 0 14px; }
.kf-crumbs a { color: var(--kf-muted); text-decoration: none; }
.kf-crumbs a:hover { color: var(--kf-brand); text-decoration: underline; }
.kf-prose { background: var(--kf-card); border: 1px solid var(--kf-line); border-radius: var(--kf-radius);
  padding: 26px; box-shadow: var(--kf-shadow); }
.kf-prose h2 { font-size: 19px; margin: 26px 0 8px; }
.kf-prose h2:first-child { margin-top: 0; }
.kf-prose p { margin: 0 0 12px; color: #2b3a34; }
.kf-prose ul { margin: 0 0 12px; padding-left: 20px; color: #2b3a34; }
.kf-prose li { margin-bottom: 6px; }
/* 正文里的链接：默认没有任何下划线/颜色（reset 掉了）⇒ 这里补上，否则链接看起来像普通文字 */
.kf-prose a, .kf-side a, .kf-hero-card a { color: var(--kf-brand); text-decoration: underline; text-underline-offset: 2px; }
.kf-prose a:hover, .kf-side a:hover, .kf-hero-card a:hover { color: var(--kf-brand-dark); }
/* 卡片列表里的链接是"按钮样式"，不要下划线 */
.kf-prose .kf-card-links a, .kf-side .kf-card-links a { text-decoration: none; }
.kf-tag-todo {
  display: inline-block; font-size: 11.5px; color: var(--kf-warn); background: var(--kf-warn-soft);
  border-radius: 6px; padding: 1px 7px; vertical-align: 1px;
}
.kf-two-col { display: grid; grid-template-columns: 1.25fr .75fr; gap: 20px; align-items: start; }
.kf-side { background: var(--kf-card); border: 1px solid var(--kf-line); border-radius: var(--kf-radius);
  padding: 20px; box-shadow: var(--kf-shadow); }
.kf-side h3 { font-size: 15px; margin: 0 0 10px; }
.kf-side p { margin: 0 0 10px; font-size: 13.5px; color: var(--kf-muted); }

/* ============================ 窄屏：≤820px ============================
 * 2026-10-12 改版：断点从 760px 提到 **820px**，与样品一致（商品实测 390 下 5 项平铺会横向溢出
 * 197px；顶栏折成"品牌 + 账号 + 菜单"两行 + 整块可点开的列表后就归零）。 */
@media (max-width: 820px) {
  .kf-header .kf-wrap{ width: calc(100% - 28px); }

  /* 窄屏顶栏分两行（实测 390px 一行放不下，会挤到换行/溢出）：
   *   第 1 行：品牌（占满）+ 账户区（登录 / 注册 或 用户名 + 退出）
   *   第 2 行：整行的「菜单」按钮（点开下面整块列表）
   * 顺序靠 order 调整，不改 HTML 结构。 */
  .kf-header .kf-header-inner{
    min-height: 60px; gap: 8px 10px; flex-wrap: wrap;
    padding-top: 8px; padding-bottom: 8px;
  }
  .kf-header .kf-hamburger{ display: inline-flex; }
  .kf-header .kf-brand{ order: 1; flex: 1 1 auto; min-width: 0; }
  .kf-header .kf-brand-text{ min-width: 0; }
  .kf-header .kf-brand-name, .kf-header .kf-brand-sub{ overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .kf-header .kf-account{ order: 2; flex: none; gap: 6px; }
  .kf-header .kf-hamburger{ order: 3; flex: 1 1 100%; justify-content: center; margin-left: 0; }
  .kf-header .kf-nav{ margin-left: 0; }

  /* 导航项里那份"宽屏小字提示"在窄屏不显示（窄屏的说明放在各面板的 kf-panel-note 里） */
  .kf-header .kf-optional{ display: none; }

  /* 主菜单整体收成一块可点开的列表，挂在顶栏下方 */
  .kf-header .kf-nav{
    position: absolute; left: 0; right: 0; top: 100%;
    margin: 0; padding: 0 14px 14px;
    background: #fff; border-bottom: 1px solid var(--kf-line);
    box-shadow: 0 18px 28px rgba(16, 40, 32, .10);
    max-height: calc(100vh - 108px); overflow: auto;
    display: none;
  }
  .kf-header .kf-nav[data-kf-open="true"]{ display: block; }
  .kf-header .kf-nav-list{ display: block; }
  .kf-header .kf-nav-item{ border-bottom: 1px solid var(--kf-line); }
  .kf-header .kf-nav-item:last-child{ border-bottom: 0; }
  /* 窄屏：真链接那一份让位给"展开按钮"那一份（空间小，点就是展开） */
  .kf-header .kf-nav-item > dt > a.kf-nav-link[data-kf-full]{ display: none; }
  .kf-header .kf-nav-item > dt > .kf-nav-toggle{ display: flex; }
  .kf-header .kf-nav-link{ width: 100%; justify-content: space-between; padding: 13px 4px; font-size: 15.5px; border-radius: 0; }
  .kf-header .kf-nav-link:hover{ background: none; color: var(--kf-brand); }
  .kf-header .kf-caret{ width: 9px; height: 9px; }
  /* 下拉不再是浮层，而是可展开的列表：默认收起，点标题展开 */
  .kf-header .kf-nav-panel{
    position: static; min-width: 0; opacity: 1; visibility: visible; transform: none;
    border: 0; border-radius: 0; box-shadow: none; padding: 0 0 10px 8px;
    display: none;
  }
  .kf-header .kf-nav-panel::before{ display: none; }
  .kf-header .kf-nav-item[data-kf-open="true"] > .kf-nav-panel{ display: block; }
  .kf-header .kf-nav-item[data-kf-open="true"] > .kf-nav-link{ background: none; }
  .kf-header .kf-nav-panel a{ padding: 10px 8px; font-size: 14.5px; white-space: normal; }

  .kf-header .kf-account{ gap: 6px; }
  .kf-header .kf-who{ max-width: 96px; font-size: 12.5px; }
  .kf-header .kf-who b{ max-width: 72px; }

  .kf-hero { padding: 26px 0 20px; }
  .kf-hero-copy { font-size: 15px; }
  .kf-section { padding: 32px 0 4px; }
  .kf-h2 { font-size: 20px; }
  .kf-grid-4, .kf-grid-3, .kf-grid-2, .kf-two-col,
  .kf-main-grid, .kf-aux-grid, .kf-routes, .kf-resume { grid-template-columns: 1fr; }
  /* 窄屏：两条主路单列后按钮占满整行（照样品），避免"按钮 + 落点说明"挤成两行难看 */
  .kf-route-go { flex-direction: column; align-items: stretch; }
  .kf-route-go .kf-btn { width: 100%; }
  .kf-route-target { flex: 1 1 auto; text-align: center; }
  .kf-card-main { padding: 18px; }
  .kf-prose, .kf-side, .kf-hero-card { padding: 18px; }
  .kf-dialog .kf-row2 { grid-template-columns: 1fr; }
  .kf-footer-inner { flex-direction: column; gap: 14px; }
  .kf-dialog .kf-dialog-body{ padding: 18px; }
}

/* 中等宽度：四列卡片先收成两列，避免挤成一团 */
@media (min-width: 821px) and (max-width: 1040px) {
  .kf-grid-4 { grid-template-columns: repeat(2, 1fr); }
  .kf-aux-grid { grid-template-columns: repeat(2, 1fr); }
  .kf-resume { grid-template-columns: 1fr; }
}

/* 更窄（≤640px，含 390 实测）：顶栏一行放下「品牌 + 账号 + 菜单」 */
@media (max-width: 640px) {
  .kf-hero { padding: 28px 0 20px; }
  .kf-route { padding: 18px; }
  .kf-route-t { font-size: 19px; }
  .kf-metrics { grid-template-columns: 1fr 1fr; }
  .kf-resume-card { padding: 17px; }
}

/* 管理员会多一块「待审批订舱」（4 个数字）：2×2 排，别让第 4 个孤零零掉到第二行左边 */
@media (min-width: 821px) {
  .kf-resume-card:has([data-kf-summary-when="admin"]:not([hidden])) .kf-metrics { grid-template-columns: 1fr 1fr; }
}

@media print {
  .kf-header, .kf-header .kf-hamburger, .kf-footer, .kf-dialog{ display: none !important; }
  body.kf-body { background: #fff; }
}