/* app.wxss — 全局样式 + 设计 token（迁移自原型） */
page {
  /* ===== 颜色 ===== */
  --bg: #F2EDE6;
  --surface: #FBF8F3;
  --surface-2: #EDE6DC;
  --ink: #2E2A24;
  --ink-2: #6E665B;
  --ink-3: #A89F92;
  --accent: #E8A04B;
  --accent-deep: #C77E2E;
  --accent-soft: #F7E5CC;
  --success: #6B8E5A;
  --success-soft: #E2EBD9;
  --warn: #D98A4E;
  --danger: #C25A4E;
  --danger-soft: #F2DDD8;
  --line: rgba(46, 42, 36, 0.10);
  --line-2: rgba(46, 42, 36, 0.16);

  /* ===== 圆角 / 阴影 ===== */
  --radius: 36rpx;
  --radius-sm: 24rpx;
  --radius-pill: 999rpx;
  --shadow: 0 2rpx 4rpx rgba(46,42,36,0.04), 0 16rpx 48rpx rgba(46,42,36,0.06);
  --font: -apple-system, BlinkMacSystemFont, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
  --icon-size: 40rpx;
  --icon-size-sm: 36rpx;
  --tab-icon-size: 44rpx;
  --fab-icon-size: 52rpx;
  --form-label-size: 24rpx;
  --input-height: 84rpx;
  --input-font-size: 26rpx;
  --input-radius: 20rpx;
  --input-padding-y: 20rpx;
  --input-padding-x: 24rpx;
  --chip-font-size: 25rpx;
  --chip-padding-y: 12rpx;
  --chip-padding-x: 24rpx;
  --btn-height: 92rpx;

  background: var(--bg);
  color: var(--ink);
  font-family: var(--font);
  -webkit-font-smoothing: antialiased;
  line-height: 1.5;
  box-sizing: border-box;
}

view, text, button, input, textarea, image, scroll-view, picker { box-sizing: border-box; }
view, text, button, input, textarea, picker { font-family: var(--font); }
button, input, textarea { line-height: 1.5; }

/* ===== 通用工具类 ===== */
.muted { color: var(--ink-2); }
.tiny { font-size: 22rpx; }
.center { text-align: center; }
.row { display: flex; align-items: center; }

.card {
  background: var(--surface);
  border-radius: var(--radius);
  border: 1rpx solid var(--line);
  box-shadow: var(--shadow);
}

.field {
  padding: 22rpx 32rpx;
  border-bottom: 1rpx solid var(--line);
}

.field.last { border-bottom: none; }

.flabel {
  font-size: var(--form-label-size);
  color: var(--ink-2);
  margin-bottom: 12rpx;
  display: flex;
  align-items: center;
  gap: 12rpx;
}

.finput,
.fpicker,
.fpick,
.note-input,
.input-fake {
  min-height: var(--input-height);
  background: var(--surface-2);
  border-radius: var(--input-radius);
  padding: var(--input-padding-y) var(--input-padding-x);
  font-size: var(--input-font-size);
  color: var(--ink);
  line-height: 1.4;
}

input.finput,
input.note-input {
  height: var(--input-height);
}

.placeholder,
.fpicker.placeholder,
.input-fake.placeholder {
  color: var(--ink-3);
}

.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 16rpx;
}

.chip {
  font-size: var(--chip-font-size);
  padding: var(--chip-padding-y) var(--chip-padding-x);
  border-radius: var(--radius-pill);
  border: 1rpx solid var(--line-2);
  background: var(--surface-2);
  color: var(--ink);
  line-height: 1.4;
}

.chip.sel {
  background: var(--accent-soft);
  border-color: var(--accent);
  color: var(--accent-deep);
  font-weight: 600;
}

.chev,
.wr-ico,
.tab-ico,
.fab-ico,
.medal,
.ach-medal,
.photo-add,
.logo,
.paw,
.avatar,
.user-avatar,
.dog-avatar,
.hero-avatar,
.sel-avatar,
.sel-check,
.close {
  font-family: var(--font);
  line-height: 1;
}

.ui-ico {
  width: var(--icon-size);
  height: var(--icon-size);
  font-size: var(--icon-size);
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.btn-ico {
  width: var(--icon-size-sm);
  height: var(--icon-size-sm);
  font-size: var(--icon-size-sm);
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

/* ===== 基础按钮 ===== */
.btn {
  height: var(--btn-height);
  border-radius: var(--radius-pill);
  border: 1rpx solid var(--line-2);
  background: var(--surface);
  color: var(--ink);
  font-size: 28rpx;
  font-weight: 600;
  font-family: var(--font);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12rpx;
  width: 100%;
  line-height: 1;
  transition: transform .2s, opacity .2s, background .2s;
}
.btn::after { border: none; }
.btn.primary { background: var(--accent); color: #fff; border-color: transparent; }
.btn.danger { color: var(--danger); border-color: var(--danger-soft); }
.btn.ghost { background: transparent; }
.btn:active { transform: scale(0.98); opacity: 0.96; }