@import '../../../styles/variables.scss';
@import '../../../styles/mixins.scss';

// PageShell 已接管：min-height, background, safe-bottom
// NavBar 由 Taro 原生页面配置处理（index.config.ts navigationBarTitleText）

// ─── Body ───
.ds-body {
  padding: 0 var(--tk-gap-lg) calc(var(--tk-tabbar-space) + 20px);

  &--center {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 60vh;
    padding-top: 0;
  }
}

// ─── Hero ───
.ds-hero {
  background: linear-gradient(135deg, $pri 0%, $pri-d 100%);
  margin: 0 calc(var(--tk-gap-lg) * -1);
  padding: var(--tk-gap-2xl) var(--tk-gap-lg) var(--tk-gap-xl);
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: var(--tk-gap-lg);
}

.ds-hero__icon {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.15);
  @include flex-center;
  margin-bottom: var(--tk-section-gap);
}

.ds-hero__bt {
  font-size: 24px;
  font-weight: 700;
  color: $white;
  font-family: Georgia, 'Times New Roman', serif;
}

.ds-hero__title {
  @include section-title;
  color: $white;
  font-family: Georgia, 'Times New Roman', serif;
  margin-bottom: var(--tk-gap-xs);
}

.ds-hero__desc {
  font-size: var(--tk-font-body-sm);
  color: rgba(255, 255, 255, 0.75);
  text-align: center;
}

// ─── 设备类型标签 ───
.ds-types {
  margin-bottom: var(--tk-gap-md);
}

.ds-types__label {
  display: block;
  font-size: var(--tk-font-body-sm);
  font-weight: 600;
  color: $tx;
  margin-bottom: var(--tk-gap-sm);
  padding-left: 2px;
}

.ds-types__row {
  display: flex;
  gap: var(--tk-gap-xs);
}

.ds-type-tag {
  display: flex;
  align-items: center;
  gap: 6px;
  background: $card;
  border: 1px solid $bd-l;
  border-radius: $r-xs;
  padding: 8px 12px;
}

.ds-type-tag__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;

  &--heart { background: $dan; }
  &--bp { background: $pri; }
  &--glu { background: $wrn; }
}

.ds-type-tag__text {
  font-size: var(--tk-font-cap);
  color: $tx2;
}

// ─── 上次同步信息 ───
.ds-sync-info {
  margin-bottom: var(--tk-gap-sm) !important;
}

.ds-sync-info__inner {
  display: flex;
  align-items: center;
  gap: var(--tk-gap-md);
}

.ds-sync-info__icon-wrap {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: $acc-l;
  @include flex-center;
  flex-shrink: 0;
}

.ds-sync-info__check {
  font-size: 16px;
  color: $acc;
  font-weight: 700;
}

.ds-sync-info__text {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.ds-sync-info__title {
  font-size: var(--tk-font-body-sm);
  font-weight: 500;
  color: $tx;
}

.ds-sync-info__time {
  font-size: var(--tk-font-cap);
  color: $tx3;
  margin-top: 2px;
}

.ds-sync-info__badge {
  background: $acc-l;
  border-radius: $r-xs;
  padding: 4px 10px;
  font-size: var(--tk-font-cap);
  color: $acc;
  font-weight: 500;
}

// ─── 待上传警告 ───
.ds-warning {
  background: $wrn-l;
  border-radius: $r-sm;
  padding: 12px var(--tk-gap-md);
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: var(--tk-gap-lg);
}

.ds-warning__icon {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: $wrn;
  color: $white;
  font-size: 12px;
  font-weight: 700;
  @include flex-center;
  flex-shrink: 0;
}

.ds-warning__text {
  font-size: var(--tk-font-cap);
  color: $wrn;
  font-weight: 500;
}

// ─── 扫描按钮 ───
.ds-scan-btn-wrap {
  margin-top: var(--tk-gap-md);
}

// ─── 设备列表 ───
.ds-devices {
  margin-top: var(--tk-gap-lg);
}

.ds-devices__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--tk-gap-sm);
}

.ds-devices__count {
  font-size: var(--tk-font-body-sm);
  font-weight: 600;
  color: $tx;
}

.ds-devices__rescan {
  font-size: var(--tk-font-cap);
  color: $pri;
  font-weight: 500;
}

.ds-device-card {
  display: flex;
  align-items: center;
  gap: 14px;
  background: $card;
  border-radius: $r-sm;
  padding: var(--tk-gap-md);
  margin-bottom: 10px;
  border: 1px solid $bd-l;
}

.ds-device-card__icon {
  width: 44px;
  height: 44px;
  border-radius: $r-sm;
  background: $pri-l;
  @include flex-center;
  flex-shrink: 0;
}

.ds-device-card__bt {
  font-size: 14px;
  font-weight: 700;
  color: $pri;
  font-family: Georgia, 'Times New Roman', serif;
}

.ds-device-card__info {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.ds-device-card__name {
  font-size: var(--tk-font-body);
  font-weight: 600;
  color: $tx;
}

.ds-device-card__adapter {
  font-size: var(--tk-font-cap);
  color: $tx3;
  margin-top: 3px;
}

.ds-device-card__signal {
  display: flex;
  align-items: flex-end;
  gap: 2px;
  height: 16px;
  margin-right: 6px;
}

.ds-signal-bar {
  width: 3px;
  border-radius: 1px;
  background: $bd;

  &--active {
    background: $acc;
  }
}

.ds-device-card__arrow {
  font-size: 18px;
  color: $tx3;
  font-weight: 300;
}

.ds-device-card--generic {
  border-style: dashed;
  border-color: $bd;

  .ds-device-card__icon {
    background: $surface-alt;
  }
}

.ds-devices__empty-hint {
  margin-top: var(--tk-gap-md);
  background: $card;
  border-radius: $r-sm;
  padding: 14px var(--tk-gap-md);
  border: 1px dashed $bd;
  display: flex;
  align-items: center;
  gap: 10px;
}

.ds-devices__empty-icon {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: $surface-alt;
  @include flex-center;
  font-size: 14px;
  color: $tx3;
  flex-shrink: 0;
}

.ds-devices__empty-title {
  display: block;
  font-size: var(--tk-font-cap);
  color: $tx2;
}

.ds-devices__empty-desc {
  display: block;
  font-size: var(--tk-font-cap);
  color: $tx3;
  margin-top: 2px;
}

// 空结果提示框（扫描完成但 0 设备）
.ds-devices--empty {
  display: flex;
  flex-direction: column;
  gap: var(--tk-gap-md);
}

.ds-devices__empty-box {
  background: $card;
  border-radius: $r;
  border: 2px dashed $bd;
  padding: var(--tk-gap-xl) var(--tk-gap-lg);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--tk-gap-xs);
}

.ds-devices__empty-box-icon {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: $wrn-l;
  color: $wrn;
  font-size: 22px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: var(--tk-gap-xs);
}

.ds-devices__empty-box-title {
  font-size: var(--tk-font-body);
  font-weight: 600;
  color: $tx;
}

.ds-devices__empty-box-desc {
  font-size: var(--tk-font-body-sm);
  color: $tx3;
  line-height: 1.5;
}

.ds-devices__rescan-wrap {
  margin-top: var(--tk-gap-xs);
}

// ─── 脉冲扫描动画 ───
.ds-pulse {
  position: relative;
  width: 140px;
  height: 140px;
  margin-bottom: var(--tk-gap-2xl);
}

.ds-pulse__ring {
  position: absolute;
  border-radius: 50%;
  border: 2px solid $pri-l;
  animation: ds-pulse-ring 2s ease-out infinite;

  &--1 { top: 0; left: 0; width: 140px; height: 140px; }
  &--2 { top: 15px; left: 15px; width: 110px; height: 110px; animation-delay: 0.5s; }
}

.ds-pulse__center {
  position: absolute;
  top: 30px;
  left: 30px;
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: $pri-l;
  @include flex-center;
  animation: ds-pulse-dot 2s ease-in-out infinite;
}

.ds-pulse__bt {
  font-size: 24px;
  font-weight: 700;
  color: $pri;
  font-family: Georgia, 'Times New Roman', serif;
}

.ds-pulse__title {
  font-family: Georgia, 'Times New Roman', serif;
  font-size: var(--tk-font-h2);
  font-weight: 700;
  color: $tx;
  margin-bottom: var(--tk-gap-xs);
  text-align: center;
}

.ds-pulse__hint {
  font-size: var(--tk-font-body-sm);
  color: $tx3;
  text-align: center;
}

@keyframes ds-pulse-ring {
  0% { transform: scale(0.8); opacity: 0.6; }
  50% { transform: scale(1.3); opacity: 0; }
  100% { transform: scale(0.8); opacity: 0; }
}

@keyframes ds-pulse-dot {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.1); }
}

// ─── 连接动画 ───
.ds-connect-anim {
  position: relative;
  width: 100px;
  height: 100px;
  margin-bottom: 28px;
}

.ds-connect-anim__ring {
  position: absolute;
  top: 0;
  left: 0;
  width: 100px;
  height: 100px;
  border-radius: 50%;
  border: 3px solid $bd-l;
  border-top-color: $pri;
  animation: ds-connect-spin 1s linear infinite;
}

.ds-connect-anim__center {
  position: absolute;
  top: 20px;
  left: 20px;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: $pri-l;
  @include flex-center;
}

.ds-connect-anim__bt {
  font-size: 18px;
  font-weight: 700;
  color: $pri;
  font-family: Georgia, 'Times New Roman', serif;
}

.ds-connect-anim__title {
  font-family: Georgia, 'Times New Roman', serif;
  font-size: var(--tk-font-body-lg);
  font-weight: 700;
  color: $tx;
  margin-bottom: 6px;
  text-align: center;
}

.ds-connect-anim__sub {
  font-size: var(--tk-font-body-sm);
  color: $tx3;
  text-align: center;
}

@keyframes ds-connect-spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

// ─── 步骤指示器 ───
.ds-steps {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: var(--tk-gap-xl);
}

.ds-steps__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: $bd;

  &--done { background: $acc; }
  &--active {
    background: $pri;
    animation: ds-pulse-dot 1s ease-in-out infinite;
  }
}

.ds-steps__label {
  font-size: var(--tk-font-cap);
  color: $tx3;

  &--done { color: $tx3; }
  &--active { color: $pri; font-weight: 500; }
}

.ds-steps__line {
  width: 24px;
  height: 1px;
  background: $bd;

  &--active { background: $pri; }
}

// ─── 已连接状态卡 ───
.ds-connected-status {
  background: linear-gradient(135deg, $acc 0%, $acc-d 100%);
  border-radius: $r;
  padding: var(--tk-gap-md);
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: var(--tk-gap-md);
}

.ds-connected-status__icon {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.2);
  @include flex-center;
  flex-shrink: 0;
}

.ds-connected-status__bt {
  font-size: 14px;
  font-weight: 700;
  color: $white;
  font-family: Georgia, 'Times New Roman', serif;
}

.ds-connected-status__info {
  flex: 1;
}

.ds-connected-status__name {
  font-size: var(--tk-font-body);
  font-weight: 600;
  color: $white;
}

.ds-connected-status__sub {
  font-size: var(--tk-font-cap);
  color: rgba(255, 255, 255, 0.7);
  margin-top: 2px;
}

.ds-connected-status__badge {
  background: rgba(255, 255, 255, 0.2);
  border-radius: $r-xs;
  padding: 4px 10px;
  font-size: var(--tk-font-cap);
  color: $white;
}

// ─── 最新读数卡片 ───
.ds-latest-reading {
  margin-bottom: var(--tk-gap-md) !important;
}

.ds-latest-reading__icon-wrap {
  width: 52px;
  height: 52px;
  border-radius: $r-sm;
  @include flex-center;
  flex-shrink: 0;

  &--heart {
    background: rgba($dan, 0.06);
  }
}

.ds-latest-reading__heart {
  font-size: 28px;
  color: $dan;
}

.ds-latest-reading__body {
  flex: 1;
  margin-left: var(--tk-gap-md);
}

.ds-latest-reading__label {
  display: block;
  font-size: var(--tk-font-cap);
  color: $tx3;
}

.ds-latest-reading__values {
  display: flex;
  align-items: baseline;
  gap: 4px;
  margin-top: 4px;
}

.ds-latest-reading__num {
  font-family: Georgia, 'Times New Roman', serif;
  font-size: 36px;
  font-weight: 700;
  color: $tx;
  @include serif-number;
}

.ds-latest-reading__unit {
  font-size: var(--tk-font-body-sm);
  color: $tx3;
}

// ─── 历史读数 ───
.ds-history {
  margin-bottom: var(--tk-gap-md);
}

.ds-history__title {
  display: block;
  font-size: var(--tk-font-body-sm);
  font-weight: 600;
  color: $tx;
  margin-bottom: var(--tk-gap-sm);
  padding-left: 2px;
}

.ds-history__list {
  background: $card;
  border-radius: $r-sm;
  overflow: hidden;
  box-shadow: $shadow-sm;
}

.ds-history__row {
  display: flex;
  align-items: center;
  padding: 12px var(--tk-gap-md);
  border-bottom: 1px solid $bd-l;

  &--last {
    border-bottom: none;
  }
}

.ds-history__type {
  width: 90px;
  font-size: var(--tk-font-body-sm);
  color: $tx2;
}

.ds-history__val-wrap {
  flex: 1;
  display: flex;
  align-items: baseline;
  gap: 3px;
}

.ds-history__val {
  font-family: Georgia, 'Times New Roman', serif;
  font-size: 20px;
  font-weight: 700;
  color: $tx;
  @include serif-number;
}

.ds-history__unit {
  font-size: var(--tk-font-cap);
  color: $tx3;
}

.ds-history__count {
  display: block;
  text-align: center;
  margin-top: var(--tk-gap-sm);
  font-size: var(--tk-font-cap);
  color: $tx3;
}

// ─── 操作按钮 ───
.ds-actions {
  display: flex;
  gap: var(--tk-gap-sm);
  margin-top: var(--tk-section-gap);
}

.ds-actions__upload {
  flex: 1;
  background: $pri;
  border-radius: $r-sm;
  padding: 14px;
  @include flex-center;
  box-shadow: $shadow-btn;
}

.ds-actions__upload-text {
  color: $white;
  font-size: var(--tk-font-body-lg);
  font-weight: 600;
}

.ds-actions__disconnect {
  width: 52px;
  background: $dan-l;
  border-radius: $r-sm;
  @include flex-center;
}

.ds-actions__disconnect-icon {
  font-size: 16px;
  color: $dan;
  font-weight: 700;
}

// ─── 同步完成 ───
.ds-done {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0 var(--tk-gap-lg);
}

.ds-done__icon {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: $acc-l;
  @include flex-center;
  margin-bottom: var(--tk-gap-xl);
}

.ds-done__check {
  font-size: 32px;
  color: $acc;
  font-weight: 700;
}

.ds-done__title {
  font-family: Georgia, 'Times New Roman', serif;
  font-size: var(--tk-font-h1);
  font-weight: 700;
  color: $tx;
  margin-bottom: var(--tk-gap-xs);
}

.ds-done__desc {
  font-size: var(--tk-font-body-sm);
  color: $tx3;
  text-align: center;
  margin-bottom: var(--tk-gap-lg);
}

.ds-done__stats {
  display: flex;
  gap: 12px;
  width: 100%;
  margin-bottom: var(--tk-gap-xl);
}

.ds-done__stat {
  flex: 1;
  background: $card;
  border-radius: $r-sm;
  padding: var(--tk-gap-md);
  text-align: center;
  border: 1px solid $bd-l;
}

.ds-done__stat-num {
  display: block;
  font-family: Georgia, 'Times New Roman', serif;
  font-size: var(--tk-font-num);
  font-weight: 700;
  color: $tx;

  &--pri { color: $pri; }
  &--acc { color: $acc; font-size: var(--tk-font-body-lg); }
}

.ds-done__stat-label {
  display: block;
  font-size: var(--tk-font-cap);
  color: $tx3;
  margin-top: 4px;
}

// ─── 错误页面 ───
.ds-error-page {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0 var(--tk-gap-lg);
}

.ds-error-page__icon {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: $dan-l;
  @include flex-center;
  margin-bottom: var(--tk-gap-xl);
}

.ds-error-page__x {
  font-size: 28px;
  color: $dan;
  font-weight: 700;
}

.ds-error-page__title {
  font-family: Georgia, 'Times New Roman', serif;
  font-size: var(--tk-font-h2);
  font-weight: 700;
  color: $tx;
  margin-bottom: var(--tk-gap-xs);
}

.ds-error-page__desc {
  font-size: var(--tk-font-body-sm);
  color: $tx3;
  text-align: center;
  max-width: 260px;
  margin-bottom: var(--tk-gap-lg);
}

.ds-error-page__detail {
  width: 100%;
  background: $card;
  border-radius: $r-sm;
  padding: var(--tk-gap-md);
  border: 1px solid $bd-l;
  margin-bottom: var(--tk-gap-lg);
}

.ds-error-page__detail-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: var(--tk-font-cap);
  font-weight: 500;
  color: $tx;
  margin-bottom: 12px;
}

.ds-error-page__detail-row {
  display: flex;
  justify-content: space-between;
  padding: 4px 0;
  margin-bottom: 4px;

  &--last {
    margin-bottom: 0;
  }
}

.ds-error-page__detail-label {
  font-size: var(--tk-font-cap);
  color: $tx3;
}

.ds-error-page__detail-value {
  font-size: var(--tk-font-cap);
  color: $tx;
}

.ds-error-page__back {
  width: 100%;
  border-radius: $r-sm;
  padding: 14px;
  @include flex-center;
  margin-top: 10px;
  border: 1px solid $bd;
}

.ds-error-page__back-text {
  color: $tx2;
  font-size: var(--tk-font-body);
  font-weight: 500;
}

// ─── 加载态 ───
.ds-loading {
  @include flex-center;
  flex-direction: column;
  padding: 64px 24px;
  gap: var(--tk-gap-md);
}

.ds-loading__spinner {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 3px solid $bd-l;
  border-top-color: $pri;
  animation: ds-connect-spin 1s linear infinite;
}

.ds-loading__text {
  font-size: var(--tk-font-body-lg);
  color: $tx2;
}

// ─── 服务发现信息 ───
.ds-services-info {
  margin-bottom: var(--tk-gap-md) !important;
}

.ds-services-info__title {
  display: block;
  font-size: var(--tk-font-body-sm);
  font-weight: 600;
  color: $tx;
  margin-bottom: var(--tk-gap-sm);
}

.ds-services-info__caps {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.ds-cap-tag {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  border-radius: $r-xs;
  font-size: var(--tk-font-cap);

  &--on {
    background: rgba($acc, 0.08);
    color: $acc;
  }

  &--off {
    background: $surface-alt;
    color: $tx3;
  }
}

.ds-cap-tag__dot {
  font-size: 10px;
}

.ds-cap-tag__text {
  font-size: var(--tk-font-cap);
}

.ds-services-info__hint {
  margin-top: var(--tk-gap-sm);
  background: $wrn-l;
  border-radius: $r-xs;
  padding: 8px 12px;
}

.ds-services-info__hint-text {
  font-size: var(--tk-font-cap);
  color: $wrn;
  line-height: 1.5;
}