:root{
  --bg:#f5f7fa;
  --card:#ffffff;
  --ink:#1a2233;
  --ink-2:#5b6675;
  --ink-3:#98a2b3;
  --line:#e6eaf0;
  --brand:#17569b;
  --brand-2:#2a7fd4;
  --brand-soft:#eaf2fb;
  --ok:#0f9d58;
  --warn:#d97706;
  --danger:#d92d20;
  --radius:14px;
  --shadow:0 1px 2px rgba(16,24,40,.04),0 8px 24px rgba(16,24,40,.06);
}

*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;padding:0}
body{
  background:var(--bg);color:var(--ink);
  font:15px/1.65 -apple-system,BlinkMacSystemFont,"PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;
  -webkit-font-smoothing:antialiased;
  display:flex;flex-direction:column;min-height:100vh;
}

/* ---------- 顶栏 ---------- */
.topbar{
  position:sticky;top:0;z-index:20;
  display:flex;align-items:center;justify-content:space-between;
  padding:12px 18px;
  background:rgba(255,255,255,.88);backdrop-filter:saturate(180%) blur(12px);
  border-bottom:1px solid var(--line);
}
.brand{display:flex;align-items:center;gap:8px}
.logo{
  display:inline-flex;align-items:center;justify-content:center;
  width:30px;height:30px;border-radius:8px;
  background:linear-gradient(135deg,var(--brand),var(--brand-2));
  color:#fff;font-size:12px;font-weight:700;letter-spacing:.5px;
}
.brand-name{font-weight:600;font-size:15px}
.brand-sub{font-size:12px;color:var(--ink-3)}

/* ---------- 布局 ---------- */
.wrap{flex:1;width:100%;max-width:680px;margin:0 auto;padding:18px 16px 32px}
.view{animation:fade .25s ease}
.hidden{display:none !important}
@keyframes fade{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

.card{
  background:var(--card);border-radius:var(--radius);box-shadow:var(--shadow);
  padding:20px;margin-bottom:16px;
}
.hero{padding:24px 20px}
.tag{
  display:inline-block;font-size:12px;color:var(--brand);
  background:var(--brand-soft);border-radius:99px;padding:3px 10px;margin-bottom:10px;
}
h1{font-size:22px;line-height:1.35;margin:0 0 8px;letter-spacing:-.2px}
h2{font-size:15px;margin:0 0 12px;color:var(--ink)}
.lead{margin:0 0 12px;color:var(--ink-2);font-size:14px}
.sub{margin:-6px 0 16px;color:var(--ink-3);font-size:13px}
.meta-row{display:flex;gap:14px;flex-wrap:wrap}
.meta{font-size:12.5px;color:var(--ink-3)}
.meta b{color:var(--ink-2);font-weight:600}

.checks{list-style:none;padding:0;margin:0}
.checks li{
  position:relative;padding-left:24px;margin-bottom:8px;font-size:14px;color:var(--ink-2);
}
.checks li::before{
  content:"✓";position:absolute;left:0;top:0;
  color:var(--ok);font-weight:700;font-size:13px;
}
.nice{
  margin-top:6px;padding-top:12px;border-top:1px dashed var(--line);
  font-size:13px;color:var(--ink-3);
}

/* ---------- 表单 ---------- */
.field{display:block;margin-bottom:14px}
.field > span{display:block;font-size:13px;color:var(--ink-2);margin-bottom:6px}
.field i{color:var(--danger);font-style:normal}
.field input[type=text],.field input[type=tel],.field input[type=email]{
  width:100%;padding:11px 13px;font-size:15px;color:var(--ink);
  border:1px solid var(--line);border-radius:10px;background:#fbfcfe;
  outline:none;transition:.15s;
}
.field input:focus{border-color:var(--brand-2);background:#fff;box-shadow:0 0 0 3px rgba(42,127,212,.12)}
.field input[type=file]{
  width:100%;font-size:13px;color:var(--ink-2);
  padding:10px;border:1px dashed var(--line);border-radius:10px;background:#fbfcfe;
}

.consent{
  display:flex;gap:9px;align-items:flex-start;
  font-size:12.5px;color:var(--ink-2);line-height:1.6;
  background:#fbfcfe;border:1px solid var(--line);border-radius:10px;
  padding:11px 12px;margin:4px 0 16px;cursor:pointer;
}
.consent input{margin-top:3px;flex:none;width:15px;height:15px;accent-color:var(--brand)}
.consent a{color:var(--brand-2);text-decoration:none}
.consent a:hover{text-decoration:underline}

.btn{
  display:inline-flex;align-items:center;justify-content:center;
  width:100%;padding:13px 18px;font-size:15px;font-weight:600;
  border:none;border-radius:10px;cursor:pointer;transition:.15s;
  font-family:inherit;
}
.btn.primary{background:linear-gradient(135deg,var(--brand),var(--brand-2));color:#fff;
  box-shadow:0 4px 14px rgba(23,86,155,.22)}
.btn.primary:hover{filter:brightness(1.06)}
.btn.primary:active{transform:translateY(1px)}
.btn.ghost{background:#fff;color:var(--brand);border:1px solid var(--line);margin-top:8px}
.btn:disabled{opacity:.55;cursor:not-allowed;box-shadow:none}

.hint{font-size:12px;color:var(--ink-3);margin:10px 0 0}
.hint.center{text-align:center}
.hint.err{color:var(--danger)}

/* ---------- 进度 ---------- */
.progress-wrap{margin-bottom:14px}
.progress-label{display:flex;justify-content:space-between;font-size:12px;color:var(--ink-3);margin-bottom:6px}
.progress-bar{height:5px;background:#e8edf4;border-radius:99px;overflow:hidden}
.progress-fill{height:100%;width:0;border-radius:99px;
  background:linear-gradient(90deg,var(--brand),var(--brand-2));transition:width .4s ease}

/* ---------- 对话 ---------- */
#view-chat{display:flex;flex-direction:column;min-height:calc(100vh - 148px)}
#view-chat .chat{flex:1;padding-bottom:8px}
.msg{display:flex;margin-bottom:14px;animation:fade .2s ease}
.msg .bubble{
  max-width:86%;padding:12px 15px;border-radius:14px;font-size:14.5px;line-height:1.68;
  white-space:pre-wrap;word-break:break-word;
}
.msg.a{justify-content:flex-start}
.msg.a .bubble{
  background:#fff;color:var(--ink);border:1px solid var(--line);
  border-bottom-left-radius:4px;box-shadow:var(--shadow);
}
.msg.c{justify-content:flex-end}
.msg.c .bubble{
  background:linear-gradient(135deg,var(--brand),var(--brand-2));color:#fff;
  border-bottom-right-radius:4px;
}
.typing{display:flex;gap:4px;padding:14px 16px}
.typing span{
  width:6px;height:6px;border-radius:50%;background:#c3ccd8;
  animation:blink 1.2s infinite;
}
.typing span:nth-child(2){animation-delay:.2s}
.typing span:nth-child(3){animation-delay:.4s}
@keyframes blink{0%,60%,100%{opacity:.3}30%{opacity:1}}

/* ---------- 输入区 ---------- */
.composer{
  position:sticky;bottom:0;display:flex;gap:10px;align-items:flex-end;
  padding:10px 0 0;background:linear-gradient(#f5f7fa00,#f5f7fa 40%);
}
.composer textarea{
  flex:1;resize:none;max-height:140px;
  padding:12px 14px;font-size:15px;line-height:1.55;font-family:inherit;color:var(--ink);
  border:1px solid var(--line);border-radius:12px;background:#fff;
  outline:none;transition:.15s;box-shadow:var(--shadow);
}
.composer textarea:focus{border-color:var(--brand-2);box-shadow:0 0 0 3px rgba(42,127,212,.12)}
.btn.send{
  width:46px;height:46px;flex:none;border-radius:12px;padding:0;
  background:linear-gradient(135deg,var(--brand),var(--brand-2));color:#fff;
  font-size:19px;font-weight:700;
}

/* ---------- 完成 ---------- */
.done{text-align:center;padding:36px 24px}
.done-icon{
  width:56px;height:56px;line-height:56px;border-radius:50%;
  background:#e8f6ee;color:var(--ok);font-size:26px;font-weight:700;
  margin:0 auto 16px;
}

/* ---------- 弹层 ---------- */
.modal{
  position:fixed;inset:0;z-index:50;display:flex;align-items:center;justify-content:center;
  background:rgba(16,24,40,.45);padding:20px;
}
.modal-box{
  background:#fff;border-radius:16px;padding:22px;max-width:520px;width:100%;
  max-height:80vh;overflow:auto;
}
.modal-box h3{margin:0 0 14px;font-size:16px}
.modal-box ol{padding-left:20px;margin:0 0 18px;font-size:13.5px;color:var(--ink-2);line-height:1.8}
.modal-box li{margin-bottom:8px}

@media (max-width:420px){
  h1{font-size:20px}
  .wrap{padding:14px 12px 28px}
  .card{padding:17px}
}