/* ============ 全局 ============ */
body {
  background: #F8F7FF;
  min-height: 100vh;
  font-family: -apple-system, BlinkMacSystemFont, 'PingFang SC', 'Helvetica Neue', sans-serif;
}

.container {
  width: 100%;
  min-height: 100vh;
}

/* ============ 分析中 ============ */
.analyzing-body {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

.analyzing-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}

.leaf-animation {
  width: 40px;
  height: 40px;
  animation: float 2s ease-in-out infinite;
}

.leaf-icon {
  width: 100%;
  height: 100%;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23C4B5FD'%3E%3Cpath d='M17 8C8 10 5.9 16.17 3.82 21.34l1.28.86C7.45 17.69 10 14.91 17 14c0-2.21 1.79-4 4-4s4 1.79 4 4c0 2.22-3.12 4.41-7.98 5.2l1.31.76C20.12 18.68 22 15.6 22 12c0-5.52-4.48-10-10-10-1.4 0-2.72.25-3.95.7l1.5 1.5C12.69 4.28 14.77 4 17 4c3.31 0 6 2.69 6 6s-2.69 6-6 6c-1.67 0-3.22-.59-4.48-1.6l1.49-1.49C13.99 14.23 15.66 14 17 14c2 0 4-1.5 4-4 0-.66-.13-1.3-.35-1.88l1.52-1.52C20.62 8.94 21 9.94 21 11c0 1.1-.9 2-2 2s-2-.9-2-2c0-1.1.9-2 2-2c.34 0 .66.09.95.24L18.7 7.3C17.82 6.56 17.36 6 17 6c-.55 0-1 .45-1 1s.45 1 1 1c.55 0 1-.45 1-1s-.45-1-1-1c-.34 0-.66.09-.95.24L15.7 5.3C14.82 4.56 14.36 4 14 4c-.55 0-1 .45-1 1s.45 1 1 1c.55 0 1-.45 1-1s-.45-1-1-1z'/%3E%3C/svg%3E") no-repeat center;
  background-size: contain;
}

@keyframes float {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50% { transform: translateY(-8px) rotate(4deg); }
}

.analyzing-text {
  font-size: 11px;
  color: #A78BFA;
  letter-spacing: 2px;
}

.progress-bar {
  width: 140px;
  height: 2px;
  background: #F5F3FF;
  border-radius: 1px;
  overflow: hidden;
}

.progress-fill {
  height: 100%;
  background: linear-gradient(90deg, #C4B5FD, #A78BFA);
  border-radius: 1px;
  transition: width 0.15s ease;
}

/* ============ 结果页面 ============ */
.result-page {
  /* rpx 已随屏宽等比缩放；vw 用于微调上下留白使屏高适配更好 */
  padding: min(5.3vw, 24px) min(3.7vw, 18px) min(6.4vw, 28px);
  max-width: 375px;       /* 宽屏手机/平板不无限拉宽 */
  margin: 0 auto;
  box-sizing: border-box;
}

/* ========== 主视觉（全部居中） ========== */
.hero-block {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(5px + 0.5vw);
  margin-bottom: calc(23px + 1.0vw);
}

.compatibility-ring {
  /* 环形图随屏宽等比缩放，并限制最大最小值 */
  width:  min(40vw, 110px);
  height: min(40vw, 110px);
  min-width:  65px;
  min-height: 65px;
  position: relative;
}

.ring-fill {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  mask: radial-gradient(transparent 55%, black 56%);
  -webkit-mask: radial-gradient(transparent 55%, black 56%);
}

.ring-center {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  /* 内圆尺寸跟随环等比缩放 */
  width:  58%;
  height: 58%;
  background: white;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 1px 6px rgba(139, 92, 246, 0.08);
}

.compatibility-value {
  /* 字号也跟随环缩放 */
  font-size: min(5.3vw, 22px);
  font-weight: 800;
  color: #9B8AF6;
  line-height: 1;
}

.result-tag {
  display: inline-flex;
  background: linear-gradient(135deg, #A78BFA, #9B8AF6);
  color: white;
  font-size: min(2.9vw, 12px);
  font-weight: 600;
  padding: calc(2px + 0.2vw) calc(8px + 0.8vw);
  border-radius: 10px;
  letter-spacing: 0.5px;
}

.matching-formula {
  display: flex;
  align-items: center;
  gap: 3px;
  flex-wrap: wrap;
  justify-content: center;
}

.formula-prefix {
  font-size: min(2.4vw, 10px);
  color: #B0A8D0;
  font-weight: 500;
}

.formula-expr {
  font-size: min(2.9vw, 12px);
  color: #5B5670;
  font-weight: 600;
  background: #F5F3FF;
  padding: calc(1px + 0.2vw) calc(5px + 0.5vw);
  border-radius: 6px;
}

/* ========== 核心描述条（居左） ========== */
.desc-strip {
  background: white;
  border-radius: 8px;
  padding: calc(5px + 0.8vw) calc(6px + 0.8vw);
  margin-bottom: calc(4.5px + 0.6vw);
  box-shadow: 0 0.5px 4px rgba(139, 92, 246, 0.04);
  box-sizing: border-box;
}

.desc-label {
  font-size: min(2.8vw, 12px);
  color: #8B5CF6;
  font-weight: 600;
  line-height: 1.55;
}

.desc-text {
  font-size: min(2.8vw, 12px);
  color: #1F2937;
  line-height: 1.55;
}

.desc-divider {
  height: 0.5px;
  background: #F3F4F6;
  margin: calc(4px + 0.5vw) 0;
}

.desc-tag-row {
  display: flex;
  flex-direction: column;
  gap: 4px;
  align-items: flex-start;
}

.type-badge {
  display: inline-flex;
  background: linear-gradient(135deg, #F5F3FF, #EDE9FE);
  color: #8B5CF6;
  font-size: min(2.7vw, 11px);
  font-weight: 600;
  padding: calc(1px + 0.2vw) calc(5px + 0.5vw);
  border-radius: 5px;
}

.type-desc {
  font-size: min(2.8vw, 12px);
  color: #7C6F9C;
  line-height: 1.55;
  text-align: left;
}

/* ========== 2×2 洞察网格（居左） ========== */
.insight-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: calc(6px + 0.8vw);
}

.grid-card {
  width: calc(50% - 3px);
  background: white;
  border-radius: 7px;
  padding: calc(4px + 0.6vw) calc(4px + 0.6vw) calc(3px + 0.5vw);
  box-shadow: 0 0.5px 4px rgba(139, 92, 246, 0.04);
  box-sizing: border-box;
}

.grid-head {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-bottom: 5px;
}

.grid-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  flex-shrink: 0;
}

.dot-green  { background: #A78BFA; }
.dot-amber  { background: #A78BFA; }
.dot-blue   { background: #A78BFA; }
.dot-rose   { background: #A78BFA; }

.grid-title {
  font-size: min(2.9vw, 12px);
  font-weight: 700;
  color: #8B5CF6;
}

.grid-body {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.grid-item {
  font-size: min(2.8vw, 12px);
  color: #6B7280;
  line-height: 1.45;
  text-align: left;
  word-break: break-all;
}

/* ========== 居中二维码 ========== */
.qr-center-block {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(4px + 0.5vw);
  padding-top: calc(16px + 1.0vw);
  margin-bottom: calc(7px + 1.0vw);
}

.qr-caption {
  font-size: min(2.9vw, 12px);
  color: #9CA3AF;
  font-weight: 500;
}

.qr-center-wrap {
  /* 二维码随屏宽等比缩放，并限制最大/最小值 */
  width:  min(38vw, 130px);
  height: min(38vw, 130px);
  min-width:  70px;
  min-height: 70px;
  background: white;
  border-radius: 9px;
  padding: min(1.3vw, 6px);
  box-sizing: border-box;
  box-shadow: 0 1px 7px rgba(139, 92, 246, 0.08);
}

.qr-center-wrap.placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px dashed #DDD6FE;
  background: #F8F7FF;
  box-shadow: none;
}

.qr-center-img {
  width: 100%;
  height: 100%;
  border-radius: 5px;
}

.qr-placeholder-text {
  font-size: min(2.9vw, 12px);
  color: #A78BFA;
  text-align: center;
  line-height: 1.5;
}

/* ========== 品牌 ========== */
.brand-line {
  display: block;
  text-align: center;
  font-size: min(2.7vw, 11px);
  color: #C4B5FD;
  letter-spacing: 1px;
}