/* ============================================================
   诊断预约页 — 样式
   ============================================================ */

/* ---------- HERO ---------- */
.dg-hero{
  position:relative; overflow:hidden; padding:132px 0 72px;
  background:
    radial-gradient(900px 520px at 85% 0%, rgba(46,116,201,.24) 0%, transparent 60%),
    radial-gradient(700px 460px at 5% 90%, rgba(242,116,56,.18) 0%, transparent 60%),
    linear-gradient(168deg, var(--ink) 0%, var(--ink-2) 55%, #14314F 100%);
  color:#fff;
}
.dg-hero-bg{
  position:absolute; inset:0; pointer-events:none;
  background-image:
    linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px);
  background-size:64px 64px;
  mask-image:radial-gradient(ellipse 80% 70% at 40% 30%, #000 30%, transparent 76%);
  -webkit-mask-image:radial-gradient(ellipse 80% 70% at 40% 30%, #000 30%, transparent 76%);
}
.dg-hero-inner{
  position:relative; display:grid; grid-template-columns:1.35fr .65fr; gap:56px; align-items:start;
}
.dg-hero h1{ font-size:42px; line-height:1.3; margin-bottom:18px; font-weight:800; letter-spacing:-.02em; }
.dg-hero-copy > p{ font-size:16.5px; line-height:1.9; color:rgba(255,255,255,.76); margin-bottom:26px; }
.dg-hero-copy > p b{ color:#fff; }

.dg-hero-list{ display:flex; flex-direction:column; gap:12px; margin-bottom:30px; }
.dg-hero-list li{
  display:flex; align-items:flex-start; gap:12px;
  font-size:15px; color:rgba(255,255,255,.82); line-height:1.75;
}
.dg-hero-list span{
  flex-shrink:0; width:22px; height:22px; border-radius:50%; margin-top:2px;
  display:grid; place-items:center; font-size:12px; font-weight:700;
  background:rgba(255,154,86,.2); color:var(--accent-lt);
  border:1px solid rgba(255,154,86,.4);
}
.dg-price-tag{
  display:inline-flex; align-items:baseline; gap:12px; flex-wrap:wrap;
  padding:14px 24px; border-radius:var(--r);
  background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.16);
  backdrop-filter:blur(6px);
}
.dg-price-tag b{ font-size:28px; color:var(--accent-lt); font-weight:800; letter-spacing:-.01em; }
.dg-price-tag em{ font-style:normal; font-size:13.5px; color:rgba(255,255,255,.6); }

.dg-hero-side{ display:flex; flex-direction:column; gap:16px; }
.dg-qr-card{
  background:linear-gradient(160deg, rgba(255,255,255,.13), rgba(255,255,255,.05));
  border:1px solid rgba(255,255,255,.18); border-radius:20px; padding:26px 24px;
  text-align:center; backdrop-filter:blur(12px);
}
.dg-qr-card .qr-frame{ margin:0 auto 16px; width:176px; height:176px; }
.dg-qr-card p{ font-size:13.5px; color:rgba(255,255,255,.72); line-height:1.8; }
.dg-qr-card b{ color:var(--accent-lt); }
.dg-qr-card .qr-img{
  width:100%; height:100%; object-fit:contain; border-radius:10px;
  background:#fff; display:block;
  box-shadow:0 4px 18px rgba(0,0,0,.18);
}
.dg-qr-tel{
  margin-top:10px; font-size:12.5px; color:rgba(255,255,255,.55);
}
.dg-qr-tel a{
  color:var(--accent-lt); font-weight:600; text-decoration:none;
  border-bottom:1px dashed rgba(255,255,255,.25);
}
.dg-qr-tel a:hover{ color:#fff; border-bottom-color:var(--accent-lt); }
.dg-tip{
  display:flex; gap:9px; align-items:flex-start;
  font-size:13px; color:rgba(255,255,255,.62); line-height:1.75;
}
.dg-tip svg{ flex-shrink:0; margin-top:3px; }
.dg-tip b{ color:rgba(255,255,255,.85); }

/* ---------- 表单区 ---------- */
.dg-form-section{ padding:64px 0 96px; background:var(--paper-2); }
.dg-layout{ display:grid; grid-template-columns:1.4fr .6fr; gap:36px; align-items:start; }

.dg-sec-title{ font-size:26px; margin-bottom:8px; }
.dg-sec-desc{ font-size:14.5px; color:var(--tx-2); margin-bottom:28px; }
.req{ color:var(--accent); font-style:normal; font-weight:700; }

.dg-form{ display:flex; flex-direction:column; gap:22px; }

.fg{
  background:var(--paper); border:1px solid var(--line);
  border-radius:var(--r-lg); padding:28px 28px 30px; margin:0;
}
.fg legend{
  display:flex; align-items:center; gap:10px;
  font-size:17px; font-weight:700; color:var(--ink); padding:0 4px; margin-bottom:6px;
}
.fg-n{
  font-size:12px; font-weight:800; color:var(--accent);
  background:rgba(242,116,56,.1); padding:3px 8px; border-radius:6px; letter-spacing:.06em;
}

.field-row{ display:grid; grid-template-columns:1fr 1fr; gap:18px; }
.field{ display:flex; flex-direction:column; gap:8px; margin-bottom:20px; }
.field:last-child{ margin-bottom:0; }
.field > label{
  font-size:14px; font-weight:600; color:var(--ink);
  display:flex; align-items:center; gap:8px; flex-wrap:wrap;
}
.hint{ font-size:12.5px; font-weight:400; color:var(--tx-3); }
.field-note{
  font-size:13px; color:var(--tx-3); line-height:1.75; margin:-2px 0 6px;
  padding:10px 14px; background:var(--paper-2); border-radius:8px;
  border-left:2px solid var(--line);
}

.field input[type=text],
.field select,
.field textarea{
  width:100%; font-family:inherit; font-size:15px; color:var(--tx);
  padding:12px 14px; border:1.5px solid var(--line); border-radius:10px;
  background:var(--paper); outline:none;
  transition:border-color .2s var(--ease), box-shadow .2s var(--ease);
}
.field textarea{ resize:vertical; line-height:1.75; min-height:76px; }
.field input::placeholder, .field textarea::placeholder{ color:#AAB4C4; }
.field input:focus,
.field select:focus,
.field textarea:focus{
  border-color:var(--accent); box-shadow:0 0 0 4px rgba(242,116,56,.12);
}
.field select{
  appearance:none; cursor:pointer;
  background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%237A879B' stroke-width='2.4'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 14px center; padding-right:38px;
}
.field.invalid input,
.field.invalid select,
.field.invalid textarea{ border-color:#D9534F; }

/* Chips 多选 */
.chips{ display:flex; flex-wrap:wrap; gap:9px; }
.chip{
  font-family:inherit; font-size:14px; color:var(--tx-2);
  padding:9px 16px; border-radius:999px; cursor:pointer;
  background:var(--paper); border:1.5px solid var(--line);
  transition:all .2s var(--ease);
}
.chip:hover{ border-color:#C6D0E0; color:var(--ink); }
.chip.on{
  background:linear-gradient(135deg,var(--accent),var(--accent-lt));
  border-color:var(--accent); color:#fff; font-weight:600;
  box-shadow:0 4px 14px -6px rgba(242,116,56,.6);
}

/* 同意 */
.dg-agree{ padding:4px 2px; }
.cbx{ display:flex; gap:11px; align-items:flex-start; cursor:pointer; }
.cbx input{
  flex-shrink:0; width:18px; height:18px; margin-top:3px; cursor:pointer;
  accent-color:var(--accent);
}
.cbx span{ font-size:13.5px; color:var(--tx-2); line-height:1.8; }

.dg-error{
  padding:14px 18px; border-radius:10px; margin-bottom:4px;
  background:rgba(217,83,79,.08); border:1px solid rgba(217,83,79,.3);
  color:#C93C38; font-size:14px; line-height:1.7;
}
.dg-submit-note{
  text-align:center; font-size:12.5px; color:var(--tx-3); margin-top:-8px;
}

/* ---------- 结果面板 ---------- */
.dg-result{
  background:var(--paper); border:2px solid var(--accent);
  border-radius:var(--r-lg); padding:32px 30px;
  box-shadow:0 24px 56px -28px rgba(242,116,56,.55);
}
.dgr-head{ display:flex; gap:16px; align-items:flex-start; margin-bottom:22px; }
.dgr-head[hidden]{ display:none; }
[hidden]{ display:none !important; }
.dgr-icon{
  width:46px; height:46px; border-radius:12px; flex-shrink:0; display:grid; place-items:center;
  background:linear-gradient(135deg,var(--accent),var(--accent-lt)); color:#fff;
}
.dgr-head h3{ font-size:20px; margin-bottom:6px; }
.dgr-head p{ font-size:14.5px; color:var(--tx-2); line-height:1.8; }
.dgr-head b{ color:var(--accent); }

/* 成功版标题：图标换绿色渐变 + 文案加重 */
.dgr-success .dgr-icon{ background:linear-gradient(135deg,#16A34A,#22C55E); }
.dgr-success h3{ color:#127A38; }

/* 核验凭证徽章：显示飞书 record_id 后 4 位 */
.dgr-rid{
  display:inline-flex; align-items:center; gap:10px;
  margin-top:14px; padding:8px 14px; border-radius:10px;
  background:rgba(22,163,74,.07); border:1px solid rgba(22,163,74,.2);
}
.dgr-rid-label{ font-size:12.5px; color:#127A38; font-weight:600; letter-spacing:.5px; }
.dgr-rid-code{
  font-family:'SF Mono',Menlo,Consolas,monospace; font-size:14.5px; font-weight:700;
  color:#127A38; background:#fff; padding:3px 10px; border-radius:6px;
  border:1px solid rgba(22,163,74,.18); letter-spacing:1.2px;
}

/* 微信引导卡片：成功态专用，鼓励家长扫码加老师 */
.dgr-wechat{
  margin-top:8px; padding:18px 20px; border-radius:14px;
  background:linear-gradient(135deg,#FFFBF5,#FFF1E3);
  border:1px solid rgba(242,116,56,.2);
  display:flex; flex-direction:column; gap:14px;
}
.dgr-wechat-head{ display:flex; flex-direction:column; gap:2px; }
.dgr-wechat-head strong{ font-size:15px; color:#1a1a1a; }
.dgr-wechat-head span{ font-size:13px; color:#7d7d7d; }
.dgr-wechat-body{ display:flex; gap:16px; align-items:center; }
.dgr-wechat-qr{
  flex:none; width:96px; height:96px; border-radius:10px;
  background:#fff; padding:6px;
  box-shadow:0 4px 12px -6px rgba(0,0,0,.12);
}
.dgr-wechat-qr img{ width:100%; height:100%; display:block; }
.dgr-wechat-info{ flex:1; min-width:0; }
.dgr-wechat-info p{ margin:0; line-height:1.7; }
.dgr-wechat-info b{ color:#1a1a1a; font-size:14px; }
.dgr-wechat-tip{ font-size:13px; color:#5a5a5a; }
.dgr-wechat-tel{ font-size:13px; color:#5a5a5a; margin-top:4px; }
.dgr-wechat-tel a{ color:var(--accent); text-decoration:none; font-weight:600; }
.dgr-wechat-tel a:hover{ text-decoration:underline; }
@media (max-width: 480px){
  .dgr-wechat-body{ flex-direction:column; align-items:flex-start; }
  .dgr-wechat-qr{ width:120px; height:120px; align-self:center; }
}

.dgr-body{
  margin:0 0 22px; padding:20px 22px; border-radius:12px;
  background:var(--paper-2); border:1px solid var(--line);
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,"PingFang SC",monospace;
  font-size:13.5px; line-height:2; color:var(--tx);
  white-space:pre-wrap; word-break:break-word; max-height:400px; overflow:auto;
}
.dgr-sync{
  display:flex; align-items:flex-start; gap:9px;
  padding:13px 18px; border-radius:10px; margin:0 0 18px;
  font-size:13.5px; line-height:1.75; font-weight:600;
}
.dgr-sync::before{ content:''; flex:none; width:7px; height:7px; border-radius:50%; margin-top:8px; }
.dgr-sync-ok{ background:rgba(22,163,74,.08); color:#127A38; border:1px solid rgba(22,163,74,.2); }
.dgr-sync-ok::before{ background:#16A34A; }
.dgr-sync-pending{ background:rgba(31,95,168,.07); color:var(--primary); border:1px solid rgba(31,95,168,.18); }
.dgr-sync-pending::before{ background:var(--primary-lt); animation:blink 1s infinite; }
.dgr-sync-fail{ background:rgba(242,116,56,.09); color:#B8500F; border:1px solid rgba(242,116,56,.24); }
.dgr-sync-fail::before{ background:var(--accent); }
@keyframes blink{ 0%,100%{ opacity:1; } 50%{ opacity:.25; } }

.dgr-actions{ display:flex; gap:12px; flex-wrap:wrap; margin-bottom:18px; }
.dgr-tip{
  display:flex; gap:9px; align-items:flex-start;
  font-size:13.5px; color:var(--tx-2); line-height:1.8;
  padding:12px 16px; border-radius:10px; background:var(--paper-2);
}
.dgr-tip svg{ flex-shrink:0; margin-top:3px; color:var(--tx-3); }
.dgr-tip b{ color:var(--ink); }

/* ---------- 侧栏 ---------- */
.dg-side{ display:flex; flex-direction:column; gap:16px; position:sticky; top:92px; }
.dg-side-card{
  background:var(--paper); border:1px solid var(--line);
  border-radius:var(--r); padding:24px 24px 26px;
}
.dg-side-card h4{ font-size:15.5px; margin-bottom:12px; color:var(--ink); }
.dg-side-card p{ font-size:13.5px; color:var(--tx-2); line-height:1.9; }
.dg-side-card p + p{ margin-top:12px; }
.dg-side-card b{ color:var(--ink); }

.dg-side-flow ol{ display:flex; flex-direction:column; gap:11px; }
.dg-side-flow li{
  display:flex; align-items:flex-start; gap:11px;
  font-size:13.5px; color:var(--tx-2); line-height:1.7;
}
.dg-side-flow span{
  flex-shrink:0; width:20px; height:20px; border-radius:50%; margin-top:2px;
  display:grid; place-items:center; font-size:11.5px; font-weight:700;
  background:var(--paper-3); color:var(--primary);
}

.dg-side-quote{
  background:linear-gradient(150deg, var(--ink) 0%, var(--ink-3) 100%);
  border-color:transparent; color:#fff;
}
.dg-side-quote p{ font-size:15.5px; color:rgba(255,255,255,.86); line-height:1.9; }
.dg-side-quote b{ color:var(--accent-lt); }

.dg-side-warn{
  background:linear-gradient(160deg, rgba(10,23,41,.04), rgba(10,23,41,.02));
}
.dg-side-warn b{ color:var(--ink); }

/* ============================================================
   两份报告
   ============================================================ */
.rp-section{
  background:var(--paper-2);
  border-bottom:1px solid var(--line);
  padding:76px 0 80px;
}
.rp-head{ max-width:760px; margin-bottom:38px; }
.rp-head h2{
  font-size:32px; line-height:1.4; color:var(--ink);
  margin:10px 0 16px; letter-spacing:-.01em;
}
.rp-head h2 b{ color:var(--accent); }
.rp-sub{ font-size:15.5px; line-height:1.9; color:var(--tx-2); }
.rp-sub b{ color:var(--ink); }

.rp-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:22px; margin-bottom:24px; }
.rp-card{
  background:var(--paper); border:1px solid var(--line);
  border-radius:var(--r-lg); padding:30px 30px 32px;
  transition:all .26s var(--ease);
}
.rp-card:hover{ transform:translateY(-3px); box-shadow:0 22px 46px -26px rgba(10,23,41,.32); }
.rp-card-post{ border-color:rgba(242,116,56,.32); }

.rp-top{ display:flex; align-items:center; gap:13px; margin-bottom:12px; }
.rp-flag{
  font-size:11.5px; font-weight:800; letter-spacing:.1em;
  padding:5px 12px; border-radius:6px; flex:none;
}
.rp-flag-pre{ background:rgba(31,95,168,.1); color:var(--primary); }
.rp-flag-post{ background:rgba(242,116,56,.12); color:var(--accent); }
.rp-top h3{ font-size:21px; color:var(--ink); }

.rp-when{
  display:inline-flex; align-items:center; gap:7px;
  font-size:12.5px; color:var(--tx-3); font-weight:600;
  padding-bottom:18px; margin-bottom:20px;
  border-bottom:1px dashed var(--line);
  width:100%;
}
.rp-list{ display:flex; flex-direction:column; gap:15px; }
.rp-list li{
  font-size:14px; line-height:1.8; color:var(--tx-2);
  padding-left:16px; position:relative;
}
.rp-list li::before{
  content:''; position:absolute; left:0; top:11px;
  width:5px; height:5px; border-radius:50%; background:var(--accent); opacity:.55;
}
.rp-list li b{
  color:var(--ink); font-size:14.5px;
  display:inline-flex; align-items:center; gap:7px;
}
.rp-list li b::after{
  content:''; width:14px; height:1.5px; background:var(--line); border-radius:2px;
}

.rp-note{
  display:flex; align-items:flex-start; gap:11px;
  background:var(--ink); color:rgba(255,255,255,.8);
  border-radius:var(--r); padding:18px 22px;
  font-size:14px; line-height:1.85;
}
.rp-note svg{ flex:none; margin-top:5px; color:var(--gold); }
.rp-note b{ color:#fff; }

/* ============================================================
   针对性访谈
   ============================================================ */
.iv-section{ padding:82px 0 88px; background:var(--paper); }
.iv-head{ max-width:800px; margin-bottom:36px; }
.iv-head h2{ font-size:34px; line-height:1.4; margin:10px 0 16px; color:var(--ink); }
.iv-head h2 b{ color:var(--primary); }
.iv-head p{ font-size:15.5px; line-height:1.95; color:var(--tx-2); }
.iv-process{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
.iv-card{ border:1px solid var(--line); border-radius:var(--r-lg); padding:28px 26px 30px; background:linear-gradient(160deg,#fff,#F8FAFD); }
.iv-card > span{ font-size:11px; font-weight:800; letter-spacing:.12em; color:var(--accent); }
.iv-card h3{ margin:10px 0; font-size:18px; color:var(--ink); }
.iv-card p{ font-size:13.5px; line-height:1.85; color:var(--tx-2); }
.iv-questions{ display:grid; grid-template-columns:.75fr 1.25fr; gap:40px; align-items:center; margin-top:22px; padding:32px 34px; border-radius:var(--r-lg); background:linear-gradient(145deg,var(--ink),var(--ink-3)); color:#fff; }
.iv-q-copy > span{ font-size:11.5px; letter-spacing:.12em; color:var(--accent-lt); font-weight:800; }
.iv-q-copy h3{ margin-top:10px; font-size:22px; line-height:1.55; }
.iv-questions ul{ display:grid; grid-template-columns:1fr 1fr; gap:10px 18px; }
.iv-questions li{ position:relative; padding:12px 14px 12px 30px; border-radius:10px; background:rgba(255,255,255,.07); color:rgba(255,255,255,.78); font-size:13px; line-height:1.7; }
.iv-questions li::before{ content:'?'; position:absolute; left:11px; top:11px; color:var(--accent-lt); font-weight:800; }

/* ---------- 出场动画（预约页专用，主站在 style.css 里） ---------- */
.reveal{ opacity:0; transform:translateY(22px); transition:opacity .7s var(--ease), transform .7s var(--ease); }
.reveal.in{ opacity:1; transform:none; }

/* ---------- 响应式 ---------- */
@media (max-width:1080px){
  .dg-hero-inner{ grid-template-columns:1fr; gap:40px; }
  .dg-layout{ grid-template-columns:1fr; }
  .dg-side{ position:static; }
  .rp-grid{ grid-template-columns:1fr; }
  .iv-questions{ grid-template-columns:1fr; gap:22px; }
}
@media (max-width:720px){
  .dg-hero{ padding:108px 0 52px; }
  .dg-hero h1{ font-size:29px; }
  .field-row{ grid-template-columns:1fr; }
  .fg{ padding:22px 20px 24px; }
  .dgr-actions .btn{ width:100%; }
  .nav-links{ display:none; }

  .rp-section{ padding:52px 0 56px; }
  .rp-head h2{ font-size:25px; }
  .rp-card{ padding:24px 20px 26px; }
  .rp-top h3{ font-size:19px; }
  .iv-section{ padding:56px 0 60px; }
  .iv-head h2{ font-size:26px; }
  .iv-process{ grid-template-columns:1fr; }
  .iv-questions{ padding:26px 22px; }
  .iv-questions ul{ grid-template-columns:1fr; }
}