@import url("ui-tokens.css?v=20261104-ui7");
/* ==========================================================================
   首页专用样式 home.css（仅 index.php 引用，不影响后台 / 用户端 / 客户端其他页面）
   风格参考 JZUPDATE：深绿主色 + 浅绿底 + 橙色点缀，宽屏舒展布局。
   不使用 Bootstrap 的 .container（其固定宽度会限制版心），改用自有 .hp-* 类。
   目录：1 变量与基础 | 2 顶部导航 | 3 首屏 | 4 查询表单与结果 | 5 能力介绍 | 6 页脚 | 7 响应式
   ========================================================================== */

/* ---------- 1. 变量与基础 ---------- */
.hp{
  --ink:var(--c-text); --muted:var(--c-text-muted); --brand:var(--c-primary); --brand-deep:var(--c-primary-dark);
  --line:var(--c-border); --canvas:var(--c-bg); --mint:var(--c-primary-soft); --orange:#a75a34;
  min-height:100vh; display:flex; flex-direction:column; box-sizing:border-box; padding-top:72px;   /* 让出固定顶部导航（nav.css）的高度 */
  background:var(--canvas); color:var(--ink);
  font:14px/1.75 var(--ui-font); text-align:left; -webkit-font-smoothing:antialiased;
}
.hp *{box-sizing:border-box;}
.hp a{color:var(--brand);text-decoration:none;}
.hp a:hover{text-decoration:underline;}
.hp-wrap{width:100%;max-width:var(--ui-content);margin:0 auto;padding-left:var(--ui-gutter);padding-right:var(--ui-gutter);}   /* 宽版心，替代原 580px 窄容器 */

/* ---------- 3. 首屏 ---------- */
.hp-main{flex:1;}
.hp-hero{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);align-items:center;gap:72px;padding-top:84px;padding-bottom:76px;}
.hp-eyebrow{display:inline-flex;align-items:center;gap:10px;color:var(--brand);font-size:11px;font-weight:600;letter-spacing:2px;}
.hp-eyebrow::before{content:"";width:22px;height:2px;background:var(--orange);}
.hp h1{margin:22px 0 18px;color:#203f36;font-size:clamp(34px,4vw,56px);font-weight:700;line-height:1.35;letter-spacing:-1px;}
.hp h1 em{color:var(--orange);font-style:normal;}
.hp-lead{max-width:520px;margin:0 0 30px;color:#657663;font-size:16px;line-height:2;}

/* 右侧深色信息面板 */
.hp-side{padding:34px 36px;border:1px solid #335444;border-radius:20px 20px 20px 5px;background:#1b4134;color:#ecf1de;box-shadow:0 24px 40px rgb(35 65 40 / 10%);}
.hp-side-cap{color:#bfd1b1;font-size:11px;letter-spacing:2px;}
.hp-side ul{margin:22px 0 0;padding:0;list-style:none;}
.hp-side li{display:flex;gap:16px;padding:18px 0;border-top:1px solid #3c5c45;}
.hp-side li:first-child{border-top:0;}
.hp-side li b{flex:none;width:28px;color:#b4d096;font-size:12px;font-weight:600;letter-spacing:1px;padding-top:2px;}
.hp-side li strong{display:block;margin-bottom:2px;color:#fff;font-size:16px;font-weight:600;}
.hp-side li span{color:#b6c9aa;font-size:13px;line-height:1.8;}

/* ---------- 4. 查询表单与结果 ---------- */
.hp-form{max-width:560px;}
.hp-form-tip{margin:0 0 10px;color:var(--muted);font-size:13px;}
.hp-form-row{display:flex;gap:12px;}
.hp-form-row input[type=text]{
  flex:1;min-width:0;height:54px;padding:0 18px;border:1px solid #cddbc9;border-radius:10px;
  background:#fff;color:var(--ink);font-size:16px;transition:border-color .15s,box-shadow .15s;
}
.hp-form-row input[type=text]:hover{border-color:#a0b89a;}
.hp-form-row input[type=text]:focus{outline:none;border-color:var(--brand);box-shadow:0 0 0 3px rgb(34 110 89 / 12%);}
.hp-form-row input[type=submit]{
  flex:none;height:54px;padding:0 30px;border:0;border-radius:10px;
  background:var(--brand-deep);color:#fff;font-size:15px;font-weight:600;cursor:pointer;transition:background .15s;
}
.hp-form-row input[type=submit]:hover{background:#103d32;}
.hp-result{max-width:560px;margin-top:22px;padding:18px 20px;border:1px solid var(--line);border-radius:12px;background:#fff;}
.hp-result label{display:block;margin:0 0 10px;color:var(--muted);font-size:13px;font-weight:400;}
.hp-result .alert{display:flex;align-items:center;gap:8px;margin:0;padding:12px 16px;border-radius:8px;font-size:15px;font-weight:600;}
.hp-result .alert img{width:20px;height:20px;}
.hp-result .alert-success{background:#e6f2ec;border-color:#cfe5d9;color:#2c6a4f;}
.hp-result .alert-danger{background:#f9ebea;border-color:#efd0cf;color:#8f3836;}

/* 快捷入口（保持原有 5 个链接） */
.hp-links{display:flex;flex-wrap:wrap;gap:10px;margin-top:30px;}
.hp-links .btn{
  padding:8px 16px;border:1px solid #cbdccc;border-radius:999px;background:#fff;color:var(--brand-deep);
  font-size:13px;font-weight:500;box-shadow:none;
}
.hp-links .btn:hover{background:#edf4ea;border-color:#a0b89a;color:var(--brand-deep);text-decoration:none;}
.hp-links .glyphicon{margin-right:5px;top:2px;color:var(--brand);}

/* ---------- 5. 能力介绍 ---------- */
.hp-features{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-top:1px solid #dce3d4;margin-bottom:64px;}
.hp-features article{padding:34px 32px 0;border-right:1px solid #dce3d4;}
.hp-features article:first-child{padding-left:0;}
.hp-features article:last-child{padding-right:0;border-right:0;}
.hp-features .no{color:#798963;font-size:11px;letter-spacing:1.5px;}
.hp-features h2{margin:12px 0 10px;color:#2e4b36;font-size:19px;font-weight:600;}
.hp-features p{margin:0;color:#6b7b65;font-size:13px;line-height:2;}

/* ---------- 6. 页脚 ---------- */
.hp-footer{border-top:1px solid #dce3d4;background:#fff;color:#7a886c;font-size:12px;}
.hp-footer .hp-wrap{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:8px 20px;padding-top:22px;padding-bottom:22px;}
.hp-footer a{color:#5f7a58;}

/* ---------- 8. 与全站共享的精简视觉规范 ---------- */
.hp h1{color:var(--ink);letter-spacing:-1.5px;}.hp-hero{gap:clamp(36px,5vw,88px);padding-top:88px;padding-bottom:82px;}.hp-side{border-radius:18px;border-color:#2e5442;box-shadow:var(--shadow);}.hp-links .btn{border-radius:8px;padding:9px 15px;}.hp-form-row input[type=text],.hp-form-row input[type=submit]{border-radius:9px;}.hp a:focus-visible,.hp button:focus-visible,.hp input[type=submit]:focus-visible{outline:3px solid #a9cbb8;outline-offset:3px;}.hp-result{overflow-wrap:anywhere;}.hp-footer{color:var(--muted);}.hp-features h2{color:var(--ink);}.hp-features p,.hp-lead{color:var(--muted);}
@media(max-width:900px){.hp-hero{padding-top:48px;padding-bottom:48px;}.hp h1{letter-spacing:-.75px;}}
@media(max-width:560px){.hp h1{font-size:32px;}.hp-side{border-radius:14px;}}
@media(prefers-reduced-motion:reduce){.hp *{transition:none!important;}}

@media (max-width:1100px){
  .hp-hero{gap:44px;}
}
@media (max-width:900px){
  .hp-hero{grid-template-columns:minmax(0,1fr);gap:40px;padding-top:48px;padding-bottom:48px;}
  .hp-features{grid-template-columns:minmax(0,1fr);margin-bottom:40px;}
  .hp-features article,.hp-features article:first-child,.hp-features article:last-child{padding:24px 0;border-right:0;border-bottom:1px solid #dce3d4;}
  .hp-features article:last-child{border-bottom:0;}
}
@media (max-width:560px){
  .hp h1{font-size:32px;}
  .hp-form-row{flex-direction:column;}
  .hp-form-row input[type=submit]{width:100%;}
  .hp-side{padding:24px 22px;}
  .hp-footer .hp-wrap{flex-direction:column;align-items:flex-start;}
}

/* 新增：客服面板与使用帮助（本次补齐的首页模块） */
.hp-kf{max-width:560px;margin-top:14px;padding:14px 18px;border:1px solid var(--line);border-radius:12px;background:#fff;color:var(--ink);}
.hp-kf-body{display:flex;align-items:flex-start;gap:18px;flex-wrap:wrap;}
.hp-kf-text{flex:1 1 200px;min-width:0;}
.hp-kf-label{font-size:12px;color:var(--muted);margin-bottom:4px;}
.hp-kf-id{font-size:20px;font-weight:700;letter-spacing:.02em;color:var(--ink);margin-bottom:10px;word-break:break-all;}
.hp-kf-copy{margin:0;}
.hp-kf-tip{margin:10px 0 0;font-size:12px;color:var(--muted);line-height:1.5;}
.hp-kf-qr{flex:0 0 auto;}
.hp-kf-qr img{display:block;width:132px;height:132px;object-fit:cover;border-radius:10px;border:1px solid var(--line);background:#f7faf7;}
.hp-help{margin:8px 0 56px;padding:32px 36px;border:1px solid var(--line);border-radius:16px;background:#fff;}
.hp-help h2{margin:0 0 18px;font-size:22px;color:var(--ink);}
.hp-help dl{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px 40px;margin:0;}
.hp-help dt{margin:0 0 6px;font-size:15px;color:var(--brand-deep);}
.hp-help dd{margin:0;color:var(--muted);line-height:1.8;}
#hp-help{scroll-margin-top:90px;}
html{scroll-padding-top:90px;}
@media(max-width:767px){:root{--ui-gutter:16px;}.hp{padding-top:64px;}#hp-help{scroll-margin-top:80px;}}   /* 与 theme.css / nav.css 的手机端边距一致，保证各页导航位置相同 */
@media(max-width:900px){.hp-help dl{grid-template-columns:minmax(0,1fr);}.hp-help{padding:24px 22px;}}

/* ==========================================================================
   响应式补充（r1）：首页 / 工单页触控区域（顶部导航已统一为 nav.css 的共享导航）。
   ========================================================================== */
@media(max-width:767px){
  .hp-footer .hp-wrap a{display:inline-block;padding:6px 0;}
  .hp-kf{overflow-wrap:anywhere;}
  .hp-kf-body{flex-direction:column-reverse;align-items:stretch;}
  .hp-kf-qr{align-self:center;}
  .hp-kf-qr img{width:168px;height:168px;}
  .hp-kf-copy{width:100%;min-height:44px;}
}
@media(max-width:560px){
  .hp-links .btn{flex:1 1 calc(50% - 10px);justify-content:center;min-height:44px;}
  .hp-form-row input[type=text],.hp-form-row input[type=submit]{height:50px;font-size:16px;}
  .hp-form-row input[type=text]{flex:none;width:100%;}
}
/* 横屏手机：高度很矮，避免首屏内容被头部和上下留白挤掉。 */
@media(max-height:480px) and (orientation:landscape){
  .hp-hero{padding-top:28px;padding-bottom:28px;}
  .tk-wrap{padding-top:24px;}
}
/* 触屏设备（含平板）：扩大页脚链接的点击区域，视觉位置不变；鼠标设备不受影响。 */
@media(pointer:coarse) and (min-width:768px){
  .hp-footer .hp-wrap a{display:inline-block;padding:10px 0;}
}