/* ==========================================================================
   首页 · 01 产品实况（Live Demo）—— 独立样式
   --------------------------------------------------------------------------
   为什么单独一份、不改 site.css：
     site.css 是全站共享（30 个页面），改它要全站回归；本区只服务首页，
     独立文件 + 独立版本戳，出问题可单独回滚，不动别人。
   颜色/圆角/字体全部复用 site.css 的 design token，不引入任何新色。
   类名沿用产品页（platform）那套 mn-* / cv-*，保证「首页演示」与
   「真实产品」视觉同源 —— 产品页改样式，这里同步跟进即可。
   ========================================================================== */

/* ---------- 状态条 + 面板 ---------- */
.demo-panel{background:#fff;border:1px solid var(--line);border-radius:var(--r4);
  box-shadow:0 30px 70px -46px rgba(11,31,42,.42);overflow:hidden;margin-top:46px}
.dp-bar{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;
  padding:15px 34px;border-bottom:1px solid var(--line-2);
  background:linear-gradient(180deg,#FBFEFE,#F5FAFB)}
.dp-tag{display:inline-flex;align-items:center;gap:8px;font-family:var(--font-mono);
  font-size:11px;letter-spacing:.13em;font-weight:600;color:var(--brand)}
.dp-tag i{width:6px;height:6px;border-radius:50%;background:var(--brand);
  box-shadow:0 0 0 3px rgba(15,110,120,.18);animation:pl 2.4s infinite}
.dp-hint{font-size:12px;color:var(--muted)}
.dp-body{padding:34px 34px 30px}

/* ---------- 搜索区（主角级尺寸） ---------- */
.hero-search{background:var(--mist);border:1px solid var(--line-2);border-radius:var(--r4);padding:34px 38px}
.hero-search .hs-h{margin:0 0 8px;font-size:27px;font-weight:700;color:var(--ink);letter-spacing:-.02em;line-height:1.3}
.hero-search .hs-p{margin:0 0 22px;font-size:15px;color:var(--muted);line-height:1.6}
.hero-search .hs-row{display:flex;gap:12px}
.hero-search .hs-in{flex:1;min-width:0;height:70px;border:1.5px solid #BFD6DA;border-radius:14px;
  padding:0 24px;font-size:18px;background:#fff;color:var(--ink);font-family:inherit}
.hero-search .hs-in:focus{outline:none;border-color:var(--brand);box-shadow:0 0 0 4px rgba(15,110,120,.12)}
.hero-search .hs-in::placeholder{color:#8FA3AC}
.hero-search .hs-row .btn{height:70px;padding:0 40px;white-space:nowrap;flex:0 0 auto;border-radius:14px;font-size:17px}
.hs-chips{display:flex;flex-wrap:wrap;gap:10px;margin-top:18px}
.hs-chips .lbl{font-size:13px;color:var(--muted);align-self:center;margin-right:2px}
.hs-chip{font-size:13.5px;color:var(--body);background:#fff;border:1px solid var(--line);
  border-radius:100px;padding:9px 17px;cursor:pointer;font-family:inherit;
  white-space:normal;text-align:left;max-width:100%;line-height:1.5;
  transition:border-color .18s,color .18s,background .18s}
.hs-chip:hover{border-color:var(--brand);color:var(--brand)}
.hs-chip.on{background:var(--brand-soft);border-color:var(--brand-line);color:var(--brand-ink);font-weight:600}

/* ---------- 结果区 ---------- */
.dp-result{margin-top:24px}
.dp-result-h{display:flex;align-items:baseline;justify-content:space-between;gap:14px;
  padding-bottom:12px;border-bottom:1px solid var(--line-2)}
.dp-result-t{font-size:15px;font-weight:700;color:var(--ink)}
.dp-result-m{font-size:12.5px;color:var(--muted)}
.mn-list{display:flex;flex-direction:column;gap:10px;margin-top:14px}
.mn-item{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:6px 20px;align-items:center;
  background:#fff;border:1px solid #E2EAED;border-radius:12px;padding:14px 18px;
  transition:border-color .18s,box-shadow .18s}
.mn-item:hover{border-color:#BBD7DB;box-shadow:0 2px 12px rgba(11,31,42,.06)}
.it-main{min-width:0}
.it-nm{font-size:15.5px;font-weight:700;color:var(--ink);line-height:1.35;word-break:break-word}
.it-loc{font-size:12.5px;color:var(--muted);margin-top:3px}
.it-cv{display:flex;flex-direction:column;gap:5px;align-items:flex-end;text-align:right;
  font-size:12.5px;color:var(--muted)}
.cv-locks{display:flex;flex-wrap:wrap;gap:5px 15px;justify-content:flex-end}
.cv-i{white-space:nowrap}
.cv-site{color:var(--brand);text-decoration:none;font-weight:600}
.cv-site:hover{text-decoration:underline}
.cv-lock{color:#9FB0B8;white-space:nowrap;letter-spacing:.5px}
.cv-none{color:#9FB0B8}
.cv-go{margin-top:4px;border:0;background:none;color:var(--cta);font-weight:700;font-size:12.5px;
  cursor:pointer;font-family:inherit;padding:0}
.cv-go:hover{text-decoration:underline}
.mn-note-line{margin:16px 0 0;font-size:12.5px;color:var(--muted);line-height:1.7}
.mn-hint{margin:14px 0 0;font-size:12.5px;color:#7E5D05;background:#FDF8EA;
  border:1px solid #F0E3BE;border-radius:8px;padding:10px 13px;line-height:1.7}

/* ---------- 检索中 / 空态 ---------- */
.dp-loading{display:flex;align-items:center;gap:10px;padding:26px 4px;color:var(--muted);font-size:13.5px}
.dp-spin{width:15px;height:15px;border-radius:50%;border:2px solid #D3E1E4;border-top-color:var(--brand);
  animation:dspin .7s linear infinite;flex:0 0 auto}
@keyframes dspin{to{transform:rotate(360deg)}}
.dp-skel{height:64px;border-radius:12px;background:linear-gradient(90deg,#F3F7F8,#E9F0F2,#F3F7F8);
  background-size:200% 100%;animation:dsk 1.3s ease-in-out infinite;margin-top:10px}
@keyframes dsk{0%{background-position:200% 0}100%{background-position:-200% 0}}

/* ---------- 底部 CTA ---------- */
.demo-cta{display:flex;align-items:center;gap:18px;flex-wrap:wrap;margin-top:32px}
.demo-note{font-size:13px;color:var(--muted)}

/* ---------- 响应式 ---------- */
@media(max-width:860px){
  .dp-body{padding:18px}
  .hero-search{padding:22px 20px}
  .hero-search .hs-h{font-size:21px}
  .hero-search .hs-p{font-size:14px;margin-bottom:16px}
  .hero-search .hs-in{height:58px;font-size:16px;padding:0 16px}
  .hero-search .hs-row{flex-direction:column;gap:10px}
  .hero-search .hs-row .btn{height:58px;width:100%;font-size:16px}
  .hs-chip{font-size:13px;padding:8px 14px}
  .mn-item{grid-template-columns:1fr;gap:10px}
  .it-cv{align-items:flex-start;text-align:left}
  .cv-locks{justify-content:flex-start;gap:5px 12px}
  .dp-bar{padding:12px 18px;row-gap:5px}
  .dp-result-h{flex-wrap:wrap;gap:2px}
  .demo-cta{gap:12px}
  .demo-cta .btn{width:100%;justify-content:center}
}