/* ============================================================
   与官网 www.kiriniso.com 风格统一（2026-10-13 · YOYO）
   作用：把工具的配色/字体/圆角/按钮对齐官网 iso.css 的设计令牌
   方式：仅覆盖 CSS 变量与少数硬编码色，不改任何结构
   ============================================================ */
:root{
  /* 主蓝系：官网口径（#062744 深 → #0D4A85 主 → #1268B3 亮） */
  --blue-900:#04203A;
  --blue-800:#062744;
  --blue-700:#0D4A85;
  --blue-600:#1268B3;
  --blue-500:#1B82D6;
  --blue-100:#D6E7F7;
  --blue-50:#F2F8FE;
  /* 绿色：官网 --ok */
  --green-700:#0E6B45;
  --green-600:#12A87B;
  --green-100:#E6F7EE;
  /* 文字与线条：官网口径 */
  --ink:#12212F;
  --ink-2:#3D4C5A;
  --muted:#6C7C8C;
  --line:#E2E9F0;
  --bg:#F6F9FC;
  --amber:#9A6A00;
  --r:14px;
}

/* 字体与底色与官网一致 */
body{
  background:var(--bg);
  font-family:"PingFang SC","Microsoft YaHei","Hiragino Sans GB",system-ui,-apple-system,sans-serif;
}
a{color:var(--blue-600)}
a:hover{color:var(--blue-700)}

/* 深色区块：由「藏青」改为官网的深蓝渐变 */

.hero .hl{background:none!important;-webkit-background-clip:initial!important;background-clip:initial!important;color:#7FD1FF!important}
.hero .sub{color:rgba(255,255,255,.88)}

/* 按钮：与官网同款（实心主蓝 / 描边） */
.btn-primary{background:var(--blue-600)!important;box-shadow:0 4px 14px rgba(18,104,179,.28)!important}
.btn-primary:hover{background:var(--blue-700)!important}
.btn-line{border-color:var(--blue-100);color:var(--blue-700)}
.btn-line:hover{border-color:var(--blue-500);background:var(--blue-50)}

/* 卡片/分节：与官网一致的圆角与描边 */
.card,.step,.panel,.box{border-color:var(--line)}
.card:hover{border-color:var(--blue-100)}

/* 顶部品牌块：与官网同款蓝色方形标识 */
.mk{background:linear-gradient(140deg,#0D4A85,#1268B3)!important}


/* ===== 与官网首页同款：页头导航栏 + 页脚四栏 + 功能条 ===== */
.hd-in{height:66px}
.hd-cta{display:flex;gap:8px;align-items:center;margin-left:12px}
.brand .mk{width:38px;height:38px;border-radius:11px;background:linear-gradient(140deg,#0D4A85,#1268B3);
  color:#fff;font-weight:800;display:grid;place-items:center;font-size:15px}
.brand .tx{display:flex;flex-direction:column;line-height:1.25}
.brand .tx b{font-size:17px;color:var(--ink);letter-spacing:.2px}
.brand .tx i{font-style:normal;font-size:12px;color:var(--muted)}
.fnbar{border-top:1px solid var(--line);background:#fff}
.fnbar .nav{padding:6px 0;margin-left:0;justify-content:flex-start}
.ft{background:#062744;color:rgba(255,255,255,.72);padding:52px 0 26px;font-size:14.4px;margin-top:56px}
.ft-in{display:grid;grid-template-columns:1.5fr 1fr 1fr 1.2fr;gap:32px}
.ft-col h4{color:#fff;font-size:15.4px;margin-bottom:14px}
.ft-col a{display:block;color:rgba(255,255,255,.72);margin-bottom:9px}
.ft-col a:hover{color:#fff}
.ft-brand .brand{display:flex;align-items:center;gap:11px}
.ft-brand .brand-mark{width:38px;height:38px;border-radius:11px;display:grid;place-items:center;
  background:linear-gradient(140deg,#1268B3,#1B82D6);color:#fff;font-weight:800}
.ft-brand .brand-txt{display:flex;flex-direction:column;line-height:1.25}
.ft-brand .brand-txt b{color:#fff;font-size:17px}
.ft-brand .brand-txt i{font-style:normal;font-size:12px;color:rgba(255,255,255,.66)}
.ft-brand p{margin:14px 0 0;font-size:13.6px;line-height:1.8}
.ft-bottom{margin-top:34px;padding-top:20px;border-top:1px solid rgba(255,255,255,.14);
  display:flex;flex-wrap:wrap;gap:16px;font-size:13.4px}
.ft-bottom a{color:rgba(255,255,255,.72)}
@media(max-width:860px){.ft-in{grid-template-columns:1fr 1fr}}

/* ===== 顶栏与主站逐项对齐（2026-10-13）===== */
header.hd .hd-in > .nav { gap: 22px; }
header.hd .hd-in > .nav a { padding: 0; font-size: 14.6px; font-weight: 500; }
header.hd .hd-in > .nav a:hover { background: none; color: var(--blue-700); }
header.hd .hd-in > .nav a.on { background: none; color: var(--blue-700); font-weight: 600; }
.brand .mk { color:#fff !important; font-size:15px; font-weight:800; letter-spacing:.5px; }
.brand .tx b { font-weight: 700; }
.fnbar .nav a { font-size: 14px; }

/* ===== 全站横幅/深色块统一为主站渐变（2026-10-13）===== */
.phead, .jobhead { background: linear-gradient(125deg,#062744 0%,#0D4A85 52%,#1268B3 100%) !important; }
.phead { padding: 46px 0 44px; }
.phead h1, .jobhead h1 { font-size: clamp(24px,2.6vw,34px); letter-spacing:.3px; }
.pre { background:#062744 !important; color:#D6E7F7 !important; }
.mk { background: linear-gradient(140deg,#0D4A85,#1268B3) !important; }
.step .n { color:#0E6B45 !important; background:#E6F7EE !important; }
.ok-panel { border-color:#BFE9D8; background:linear-gradient(180deg,#F3FCF8,#fff); }

/* ===== 页头与主站内页 page-hero 完全一致（2026-10-13）=====
   主站 .page-hero{background:var(--blue-800)=#082C52; padding:36px 0}
        h1 27px / p 14.8px rgba(255,255,255,.8) / 面包屑 13.4px              */
.phead, .jobhead {
  background: #082C52 !important;          /* 纯色，与主站内页页头同色 */
  padding: 36px 0 !important;
}
.phead h1, .jobhead h1 {
  font-size: 27px !important; margin: 0 0 6px !important; letter-spacing: 0 !important; line-height: 1.34;
}
.phead p, .jobhead p { margin: 0 !important; color: rgba(255,255,255,.8) !important; font-size: 14.8px !important; }
.phead .eyebrow, .jobhead .eyebrow { display: none !important; }   /* 去掉「工具一」胶囊 */
.phead .wrap::before, .jobhead .wrap::before {
  content: "首页 › AI转版应用"; display: block;
  font-size: 13.4px; color: rgba(255,255,255,.7); margin-bottom: 12px;
}
.hero { padding: 58px 0 62px; }   /* 工具首页 hero 保持与主站首页 hero 同款渐变 */

/* ===== 工具首页 /tool/ 页头：与主站内页 /features 完全一致（2026-10-13）===== */
.hero {
  background: #082C52 !important;      /* 纯色，同主站 .page-hero */
  padding: 36px 0 !important;
  color: #fff;
}
.hero .eyebrow { display: none !important; }
.hero .wrap::before {
  content: "首页 › AI转版应用"; display: block;
  font-size: 13.4px; color: rgba(255,255,255,.7); margin-bottom: 12px;
}
.hero h1 { font-size: 27px !important; margin: 0 0 6px !important; letter-spacing: 0 !important; color: #fff !important; }
.hero .hl { background: none !important; -webkit-text-fill-color: #7FD1FF !important; color: #7FD1FF !important; }
.hero .sub { color: rgba(255,255,255,.8) !important; font-size: 14.8px !important; max-width: none; margin: 0 0 18px; }
.hero .btns { margin: 0 0 14px !important; }
.hero .btn-white { background:#fff !important; color:#0D4A85 !important; }
.hero .btn-line { background: rgba(255,255,255,.10) !important; border-color: rgba(255,255,255,.38) !important; color:#fff !important; }
.hero .badges li, .hero .badges span { font-size:12.5px; color:rgba(255,255,255,.86); background:rgba(255,255,255,.10); border:1px solid rgba(255,255,255,.18); padding:5px 11px; border-radius:999px; }