hms/apps/miniprogram/src/pages/pkg-health/veepoo-measure/index.scss

// Veepoo 测量结果 + 上传页样式
// 设计原型: docs/design/veepoo-measure-prototype.html
@import '../../../styles/variables.scss';

.vm-page {
  min-height: 100vh;
  background: var(--tk-bg-primary, $bg);
}

// ── 连接中（等待跳转态） ──
.vm-connect {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  padding: 0 32px;

  &__anim {
    position: relative;
    width: 120px;
    height: 120px;
    margin-bottom: 24px;
  }

  &__ring {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    border: 3px solid $pri;
    animation: vm-pulse-ring 2s ease-out infinite;
  }

  &__center {
    position: absolute;
    inset: 20px;
    border-radius: 50%;
    background: $pri;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  &__bt {
    color: #fff;
    font-size: 20px;
    font-weight: 700;
  }

  &__title {
    font-family: Georgia, 'Times New Roman', serif;
    font-size: var(--tk-font-h2, 22px);
    font-weight: 700;
    color: $tx;
    margin-bottom: 8px;
  }

  &__hint {
    font-size: var(--tk-font-body-sm, 14px);
    color: $tx3;
  }
}

@keyframes vm-pulse-ring {
  0% { transform: scale(1); opacity: 1; }
  100% { transform: scale(1.4); opacity: 0; }
}

// ── 上传页面 ──
.vm-upload {
  min-height: 100vh;
  padding-bottom: 40px;

  &__header {
    padding: var(--tk-gap-lg, 24px) var(--tk-page-padding, 20px) var(--tk-gap-md, 16px);
  }

  &__title {
    display: block;
    font-family: Georgia, 'Times New Roman', serif;
    font-size: var(--tk-font-h2, 22px);
    font-weight: 700;
    color: $tx;
    line-height: 1.3;
  }

  &__subtitle {
    display: block;
    font-size: var(--tk-font-body-sm, 14px);
    color: $tx3;
    margin-top: 4px;
  }
}

// ── 结果卡片网格 ──
.vm-results-grid {
  padding: 0 var(--tk-page-padding, 20px);
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--tk-gap-sm, 12px);
}

.vm-result-card {
  background: $card;
  border-radius: var(--tk-card-radius, 16px);
  padding: var(--tk-gap-md, 16px);
  box-shadow: $shadow-sm;
  position: relative;
  overflow: hidden;

  &--full {
    grid-column: 1 / -1;
  }

  &--empty {
    opacity: 0.5;
  }

  &__badge {
    position: absolute;
    top: 0;
    left: 0;
    width: 4px;
    height: 100%;
    border-radius: 0 4px 4px 0;
  }

  &__label {
    display: block;
    font-size: var(--tk-font-cap, 13px);
    color: $tx2;
    margin-bottom: 8px;
    padding-left: 8px;
  }

  &__row {
    display: flex;
    align-items: baseline;
    gap: 4px;
    padding-left: 8px;
  }

  &__value {
    font-family: Georgia, 'Times New Roman', serif;
    font-size: var(--tk-font-num-lg, 34px);
    font-weight: 700;
    color: $tx;
    line-height: 1;
  }

  &__unit {
    font-size: var(--tk-font-cap, 13px);
    color: $tx3;
  }

  &__tag {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    margin-top: 8px;
    margin-left: 8px;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: var(--tk-font-micro, 11px);
    font-weight: 500;

    &--normal {
      background: $acc-l;
      color: $acc;
    }

    &--warning {
      background: $wrn-l;
      color: $wrn;
    }

    &--danger {
      background: $dan-l;
      color: $dan;
    }
  }

  &__placeholder {
    padding-left: 8px;
    font-size: var(--tk-font-body-sm, 14px);
    color: $tx3;
  }

  &--sleep {
    padding-bottom: 12px;
  }
}

// ── 睡眠数据行 ──
.vm-sleep-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 6px 8px;
  margin-left: 8px;

  &__day {
    font-size: var(--tk-font-body-sm, 14px);
    color: $tx2;
    min-width: 40px;
  }

  &__time {
    font-family: Georgia, 'Times New Roman', serif;
    font-size: var(--tk-font-body, 16px);
    font-weight: 600;
    color: $tx;
  }

  &__quality {
    font-size: 12px;
    color: $wrn;
    margin-left: auto;
  }
}

// ── 底部上传播区 ──
.vm-upload-footer {
  padding: var(--tk-gap-lg, 24px) var(--tk-page-padding, 20px) var(--tk-gap-xl, 32px);

  &__hint {
    display: block;
    font-size: var(--tk-font-cap, 13px);
    color: $tx3;
    text-align: center;
    margin-bottom: var(--tk-gap-sm, 12px);
  }

  &__btn {
    width: 100%;
  }

  &__time {
    display: block;
    font-size: var(--tk-font-micro, 11px);
    color: $tx3;
    text-align: center;
    margin-top: var(--tk-gap-sm, 12px);
  }
}

// ── 长者模式 ──
.elder-mode {
  .vm-results-grid {
    grid-template-columns: 1fr;
  }

  .vm-result-card__value {
    font-size: var(--tk-font-num-lg, 40px);
  }
}