/*
 * 雷宇实验室 · 财务信任测评 UI v2
 * 微信：ai20352046
 */

:root{
  --paper:#f2efe8;
  --paper-2:#e8e4da;
  --ink:#172028;
  --ink-soft:#53606a;
  --white:#fffdf8;
  --blue:#3157d5;
  --blue-dark:#1f3695;
  --coral:#f06a4f;
  --mint:#8bd8c4;
  --sun:#ffd56a;
  --line-2:rgba(23,32,40,.13);
  --line-strong:rgba(23,32,40,.22);
  --shadow-2:0 18px 55px rgba(31,38,43,.10);
  --shadow-3:0 30px 85px rgba(31,38,43,.14);
}

html{background:var(--paper)}
body{
  color:var(--ink);
  background:
    radial-gradient(circle at 2% 2%,rgba(240,106,79,.13),transparent 23%),
    radial-gradient(circle at 98% 8%,rgba(49,87,213,.12),transparent 25%),
    var(--paper);
  font-family:Inter,"PingFang SC","Microsoft YaHei",system-ui,-apple-system,sans-serif;
}
body:before{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  opacity:.2;
  background-image:radial-gradient(rgba(23,32,40,.28) .55px,transparent .55px);
  background-size:8px 8px;
  mask-image:linear-gradient(to bottom,#000,transparent 45%);
}

.app{width:min(calc(100% - 32px),920px);padding:22px 0 52px}
.topbar{
  position:relative;
  z-index:30;
  min-height:62px;
  margin:0 0 18px;
  padding:10px 14px;
  border:1px solid rgba(255,255,255,.75);
  border-radius:20px;
  color:var(--ink);
  background:rgba(255,253,248,.78);
  box-shadow:0 8px 30px rgba(31,38,43,.07);
  backdrop-filter:blur(18px);
}
.brand{gap:11px;color:var(--ink);font-size:13px;letter-spacing:.05em}
.brand>span:last-child{display:grid;line-height:1.1}
.brand small{margin-top:4px;color:#7b858c;font:700 8px/1.1 ui-monospace,monospace;letter-spacing:.16em}
.mark{
  width:36px;height:36px;
  border:0;border-radius:12px;
  background:var(--ink);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.14);
}
.mark:before{color:var(--sun)}
.mark:after{color:var(--white)}
.privacy{color:#5f6b73;border-color:var(--line-2);background:rgba(255,255,255,.58);font-weight:650}

.screen{animation:uiRise .42s cubic-bezier(.2,.75,.2,1) both}
@keyframes uiRise{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}

.hero{
  position:relative;
  min-height:490px;
  padding:clamp(32px,6vw,68px);
  overflow:hidden;
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  border:1px solid rgba(255,255,255,.22);
  border-radius:38px;
  color:#fff;
  background:
    linear-gradient(135deg,rgba(255,255,255,.08),transparent 45%),
    linear-gradient(145deg,#1b2f99 0%,#3157d5 46%,#5b74da 100%);
  box-shadow:var(--shadow-3);
  isolation:isolate;
}
.hero:before{
  content:"";
  position:absolute;
  width:310px;height:310px;
  top:-105px;right:-65px;
  border-radius:50%;
  background:var(--coral);
  box-shadow:-210px 135px 0 -85px var(--sun),-80px 285px 0 -120px var(--mint);
  z-index:-1;
}
.hero:after{
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  background:linear-gradient(to top,rgba(12,26,94,.38),transparent 62%);
}
.hero-issue{
  position:absolute;
  top:27px;left:clamp(28px,6vw,68px);
  padding:8px 11px;
  border:1px solid rgba(255,255,255,.25);
  border-radius:999px;
  font:750 10px/1 ui-monospace,monospace;
  letter-spacing:.15em;
  background:rgba(9,24,91,.18);
}
.eyebrow{margin-bottom:18px;color:#dfe6ff}
.eyebrow:before{background:var(--sun)}
h1{max-width:720px;font-size:clamp(43px,7.6vw,76px);line-height:1.06;letter-spacing:-.055em;color:#fff}
h1 em{position:relative;color:#fff;white-space:nowrap}
h1 em:after{content:"";position:absolute;left:0;right:0;bottom:3px;height:10px;z-index:-1;background:var(--coral);transform:rotate(-1.5deg);border-radius:3px;opacity:.96}
.lead{max-width:690px;margin-top:24px;color:rgba(255,255,255,.82);font-size:17px;line-height:1.8}
.hero-foot{display:flex;flex-wrap:wrap;gap:10px;margin-top:28px}
.hero-foot span{padding:7px 10px;border:1px solid rgba(255,255,255,.2);border-radius:999px;color:rgba(255,255,255,.88);font-size:11px;background:rgba(10,25,91,.18)}

.card{
  margin:16px 0;
  padding:clamp(21px,4vw,30px);
  border:1px solid rgba(255,255,255,.86);
  border-radius:26px;
  color:var(--ink);
  background:rgba(255,253,248,.92);
  box-shadow:var(--shadow-2);
}
.quote{
  position:relative;
  margin-top:20px;
  padding:28px 30px 28px 92px;
  border:1px solid rgba(23,32,40,.08);
  background:var(--ink);
  color:#fff;
}
.quote:before{content:"“";position:absolute;left:28px;top:18px;color:var(--sun);font:700 76px/.9 Georgia,serif}
.quote strong{color:#fff;font-size:18px}
.quote p{color:#aebbc2}

.value-grid{gap:12px;margin:20px 0}
.value{
  min-height:128px;
  padding:20px;
  border:0;
  border-radius:24px;
  color:var(--ink);
  background:var(--white);
  box-shadow:0 10px 34px rgba(31,38,43,.08);
}
.value:nth-child(1){background:#ffd9cf}
.value:nth-child(2){background:#dce4ff}
.value:nth-child(3){background:#ccefe5}
.value b{color:var(--ink);font-family:Inter,"PingFang SC",sans-serif;font-size:31px;letter-spacing:-.05em}
.value span{color:#4d5a62;font-weight:650}

.field label{color:var(--ink);font-size:14px}
.field small{color:#7d878d}
.select{
  color:var(--ink);
  background-color:#f7f5ef;
  border:1px solid var(--line-2);
  background-image:linear-gradient(45deg,transparent 50%,var(--blue) 50%),linear-gradient(135deg,var(--blue) 50%,transparent 50%);
  box-shadow:inset 0 1px rgba(255,255,255,.8);
}
.select:focus{border-color:rgba(49,87,213,.55);box-shadow:0 0 0 4px rgba(49,87,213,.10)}

.primary,.secondary,.ghost,.choice{
  min-height:54px;
  border-radius:16px;
  transition:transform .18s ease,box-shadow .18s ease,background .18s ease;
}
.primary{color:#fff;background:var(--blue);box-shadow:0 12px 30px rgba(49,87,213,.22)}
.primary:hover{background:#2649bf;box-shadow:0 16px 34px rgba(49,87,213,.28)}
.secondary{color:var(--ink);background:#fff;border:1px solid var(--line-2)}
.secondary:hover{border-color:var(--line-strong);background:#f8f6f0}
.ghost{color:var(--blue);background:transparent;border:1px solid rgba(49,87,213,.30)}
.micro{color:#727d84}

.progress-wrap{padding:10px 0 18px;background:linear-gradient(var(--paper) 68%,transparent)}
.progress-meta{color:#67747b;font-weight:700}
.track{height:9px;background:rgba(23,32,40,.08)}
.fill{background:linear-gradient(90deg,var(--coral),var(--sun))}
.question-card{min-height:540px;border-color:rgba(23,32,40,.06);background:var(--white)}
.q-num{color:var(--blue);font-family:ui-monospace,monospace}
.q-section{border:0;color:var(--blue-dark);background:#dfe6ff;font-weight:750}
.q-text{max-width:720px;color:var(--ink);font-size:25px;line-height:1.52}
.q-sub,.hints{color:#78838a}
.likert button{
  border:1px solid var(--line-2);
  color:var(--ink);
  background:#f8f6f0;
}
.likert button:hover,.choices .choice:hover{border-color:rgba(49,87,213,.40);background:#edf1ff}
.likert button.selected,.choices .choice.selected{color:#fff;background:var(--blue);box-shadow:0 10px 24px rgba(49,87,213,.20)}
.choice{color:var(--ink);background:#f8f6f0;border-color:var(--line-2)}
.choice .letter{color:var(--blue);background:#e3e9ff}
.choice.selected .letter{color:#fff;background:rgba(255,255,255,.18)}

.result-head{padding:30px 6px 12px}
.result-kicker{color:var(--blue);font-weight:850}
.result-title{color:var(--ink);font-size:clamp(38px,6vw,58px);letter-spacing:-.04em}
.result-sub{color:#66737b}
.score-grid{gap:28px}
.ring{background:conic-gradient(var(--coral) 0deg,rgba(23,32,40,.07) 0deg);box-shadow:inset 0 0 0 1px var(--line-2)}
.ring:after{background:var(--white);border-color:rgba(23,32,40,.08)}
.ring-content b,.score-copy h3{color:var(--blue)}
.ring-content span,.score-copy p{color:#66737b}
.section-title h3{color:var(--ink)}
.section-title span{color:#7a858c}
.signal-top span{color:var(--blue)}
.signal-track{background:rgba(23,32,40,.08)}
.signal-fill{background:linear-gradient(90deg,var(--blue),var(--coral))}
.insight{color:#34424a}
.insight strong{color:var(--blue)}
.badge{color:#1e6c58;background:#dff5ee;border-color:#b8e5d8}
.badge.warn{color:#8b5b00;background:#fff1c9;border-color:#f2da91}
.badge.danger{color:#a43b25;background:#ffe1da;border-color:#f4b9aa}
.compare-box,.metric,.day{border-color:var(--line-2);background:#f7f5ef}
.compare-box b,.metric b,.day b{color:var(--blue)}
.compare-arrow{color:var(--coral)}
.evidence div{border-left-color:var(--blue);background:#eef1fb;color:#35434b}
.checklist li{border-color:var(--line-2);background:#f7f5ef}
.checklist li:before{color:#fff;background:var(--blue)}
.script{border-left-color:var(--coral);background:#fff0eb;color:#3e4850}
.day span{color:#435159}
.card.quote strong{color:#fff}

.paywall{border:0;background:var(--ink);color:#fff}
.pay-top{border-bottom-color:rgba(255,255,255,.12);background:linear-gradient(135deg,rgba(49,87,213,.65),rgba(240,106,79,.32))}
.pay-top .small{color:#dfe6ff}
.pay-title,.price b{color:#fff}
.price span,.pay-body .lock-note{color:#aebbc2}
.feature-list li{color:#e9eff1}
.feature-list li:before{color:var(--mint)}
.lock-note{border-color:rgba(255,255,255,.12);background:rgba(255,255,255,.04)}

.modal{align-items:center;background:rgba(18,24,29,.58);backdrop-filter:blur(15px)}
.modal-card{max-width:540px;border:1px solid rgba(255,255,255,.70);border-radius:28px;color:var(--ink);background:var(--paper);box-shadow:var(--shadow-3)}
.modal-head h3{color:var(--ink)}
.modal-head .eyebrow{color:var(--blue)}
.modal-head .eyebrow:before{background:var(--coral)}
.close{border-color:var(--line-2);color:var(--ink);background:#fff}
.payment-box{border:1px solid rgba(49,87,213,.22);background:#e8edff}
.payment-box b{color:var(--blue)}
.payment-box p{color:#66737b}
.pay-status{color:var(--blue)!important}
.pay-open{border-color:rgba(49,87,213,.28);color:var(--blue)}
.payment-box.is-paid{border-color:#8ed2c0;background:#def4ed}

.review{border-color:var(--line-2);background:var(--white)}
.test-log{color:#4f5c63;background:#f3f1eb;border-color:var(--line-2)}
.coverage div{border-color:var(--line-2)}
.coverage b{color:var(--blue)}
.footer{border-top-color:var(--line-2);color:#6c777e}
.footer-brand strong{color:var(--ink)}
.footer-brand .mark{background:var(--ink)}
.wechat{border-color:rgba(49,87,213,.20);background:#e8edff;color:var(--blue)}
.wechat button{color:var(--blue-dark)}
.legal{color:#7c878d}
.toast{color:#fff;background:var(--ink)}

@media(max-width:700px){
  .hero{min-height:470px;border-radius:30px;padding:34px 24px}
  .hero-issue{left:24px}
  .hero:before{width:230px;height:230px;top:-70px;right:-65px}
  .quote{padding:25px 22px 25px 70px}
  .quote:before{left:20px;font-size:58px}
}

@media(max-width:580px){
  .app{width:min(calc(100% - 22px),920px);padding:12px 0 35px}
  .topbar{min-height:56px;margin-bottom:11px;border-radius:17px}
  .brand .mark{width:33px;height:33px}
  .hero{min-height:500px;border-radius:26px;padding:34px 21px 28px}
  .hero-issue{top:20px;left:21px;font-size:9px}
  h1{font-size:43px}
  .lead{font-size:15px;line-height:1.72}
  .hero-foot{gap:6px;margin-top:20px}
  .value-grid{grid-template-columns:1fr 1fr}
  .value{min-height:110px;padding:17px}
  .value:nth-child(3){grid-column:1/-1;min-height:96px}
  .card{border-radius:22px;padding:20px}
  .quote{padding:23px 18px 23px 62px}
  .quote:before{left:17px;top:17px;font-size:52px}
  .question-card{min-height:500px}
  .q-text{font-size:22px}
  .likert{gap:4px}
  .likert button{height:49px;border-radius:11px}
  .modal{padding:10px;align-items:flex-end}
  .modal-card{border-radius:26px 26px 18px 18px}
}

@media print{
  body{background:#fff}
  body:before{display:none}
  .card{border-color:#d8dde0;background:#fff;box-shadow:none}
  .result-title,.section-title h3,.score-copy h3,.ring-content b{color:#1d3ea0}
}

@media(prefers-reduced-motion:reduce){
  *,*:before,*:after{scroll-behavior:auto!important;animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
}