/**app.wxss —— 全局设计令牌与通用样式**/
@import "styles/icons.wxss";

page {
  --color-primary: #007AFF;
  --color-primary-aux: #5856D6;
  --color-pink: #FF2D55;
  --color-bg: #F2F2F7;
  --color-card: #FFFFFF;
  --color-hairline: #E5E5EA;
  --color-text-main: #000000;
  --color-text-secondary: #8E8E93;
  --color-text-tertiary: #C7C7CC;
  --color-green: #34C759;
  --color-orange: #FF9500;
  --color-red: #FF3B30;
  --color-yellow: #FFCC00;

  background: var(--color-bg);
  color: var(--color-text-main);
  font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Helvetica Neue", Arial, sans-serif;
  font-size: 30rpx;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

/* ===== 布局 ===== */
.page {
  min-height: 100vh;
  background: var(--color-bg);
  box-sizing: border-box;
}

/* ===== 卡片 ===== */
.card {
  background: var(--color-card);
  border-radius: 32rpx;
  padding: 32rpx;
  box-sizing: border-box;
}

/* ===== 发丝分隔线 ===== */
.hairline {
  border-bottom: 1rpx solid var(--color-hairline);
}
.hairline-t {
  border-top: 1rpx solid var(--color-hairline);
}

/* ===== 文本 ===== */
.t-main { color: var(--color-text-main); }
.t-sub { color: var(--color-text-secondary); }
.t-weak { color: var(--color-text-tertiary); }
.t-primary { color: var(--color-primary); }
.t-danger { color: var(--color-red); }
.t-green { color: var(--color-green); }
.t-orange { color: var(--color-orange); }

.fs-title { font-size: 68rpx; font-weight: 700; }
.fs-h1 { font-size: 40rpx; font-weight: 700; }
.fs-h2 { font-size: 34rpx; font-weight: 600; }
.fs-body { font-size: 30rpx; }
.fs-caption { font-size: 26rpx; }
.fs-note { font-size: 22rpx; }

.num { font-variant-numeric: tabular-nums; }

/* ===== 按钮 ===== */
.btn {
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  border-radius: 24rpx;
  font-size: 30rpx;
  font-weight: 600;
}
.btn-primary {
  height: 96rpx;
  background: var(--color-primary);
  color: #fff;
}
.btn-primary.disabled {
  opacity: 0.4;
}
.btn-primary:active { opacity: 0.7; }

.btn-secondary {
  height: 88rpx;
  background: var(--color-bg);
  color: var(--color-text-main);
}
.btn-secondary:active { opacity: 0.7; }

.btn-outline {
  height: 88rpx;
  border: 1rpx solid var(--color-primary);
  color: var(--color-primary);
  background: #fff;
  font-weight: 500;
}
.btn-outline:active { opacity: 0.7; }

.btn-danger-text {
  color: var(--color-red);
  font-size: 30rpx;
  font-weight: 500;
}

/* ===== 输入框 ===== */
.input {
  height: 88rpx;
  background: var(--color-bg);
  border-radius: 20rpx;
  padding: 0 24rpx;
  font-size: 28rpx;
  box-sizing: border-box;
  width: 100%;
}
.textarea {
  background: var(--color-bg);
  border-radius: 20rpx;
  padding: 20rpx 24rpx;
  font-size: 28rpx;
  width: 100%;
  min-height: 160rpx;
  box-sizing: border-box;
}

/* ===== 胶囊标签 ===== */
.tag {
  display: inline-flex;
  align-items: center;
  height: 44rpx;
  padding: 0 20rpx;
  border-radius: 22rpx;
  font-size: 22rpx;
  font-weight: 500;
  box-sizing: border-box;
}
.tag-blue { background: rgba(0, 122, 255, 0.1); color: #007AFF; }
.tag-gray { background: #F2F2F7; color: #8E8E93; }
.tag-green { background: rgba(52, 199, 89, 0.12); color: #34C759; }
.tag-orange { background: rgba(255, 149, 0, 0.12); color: #FF9500; }
.tag-red { background: rgba(255, 59, 48, 0.12); color: #FF3B30; }
.tag-indigo { background: rgba(88, 86, 214, 0.12); color: #5856D6; }

/* ===== 骨架屏 ===== */
.skeleton {
  background: linear-gradient(90deg, #F2F2F7 25%, #E5E5EA 37%, #F2F2F7 63%);
  background-size: 400% 100%;
  animation: skeleton-loading 1.4s ease infinite;
}
@keyframes skeleton-loading {
  0% { background-position: 100% 50%; }
  100% { background-position: 0 50%; }
}

/* ===== 悬浮按钮 ===== */
.fab {
  position: fixed;
  right: 32rpx;
  bottom: 180rpx;
  width: 108rpx;
  height: 108rpx;
  border-radius: 50%;
  background: var(--color-primary);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 8rpx 24rpx rgba(0, 122, 255, 0.35);
  z-index: 20;
}
.fab:active { opacity: 0.8; }

/* ===== 底部安全区 ===== */
.safe-bottom {
  padding-bottom: env(safe-area-inset-bottom);
}

/* ===== 通用列表行 ===== */
.list-row {
  display: flex;
  align-items: center;
  height: 88rpx;
  box-sizing: border-box;
}
.list-row:active { background: #F2F2F7; }

/* ===== 1:1 方图占位 ===== */
.square {
  position: relative;
  width: 100%;
  background: #F2F2F7;
  border-radius: 24rpx;
  overflow: hidden;
}
.square::after {
  content: '';
  display: block;
  padding-bottom: 100%;
}