/** app.wxss **/
page {
  --brand-main: #ff4d8d;
  --brand-main-press: #e83f7d;
  --brand-soft: #fff2f7;

  --bg-base: #fff7f5;
  --surface-1: #ffffff;
  --surface-2: #fff2f7;
  --surface-3: #ffeaf2;
  --border-soft: #f3dce6;

  --text-1: #1f1f1f;
  --text-2: #5c5c5c;
  --text-3: #8a8a8a;

  --state-success: #1fa971;
  --state-success-bg: #e8f8f1;
  --state-warning: #f59a23;
  --state-warning-bg: #fff5e8;
  --state-danger: #e5484d;
  --state-danger-bg: #ffecee;
  --state-pending: #6f6f6f;
  --state-pending-bg: #f2f2f2;

  --radius-sm: 12rpx;
  --radius-md: 16rpx;
  --radius-lg: 20rpx;
  --radius-pill: 999rpx;

  --space-1: 8rpx;
  --space-2: 12rpx;
  --space-3: 16rpx;
  --space-4: 20rpx;
  --space-5: 24rpx;
  --space-6: 32rpx;

  --font-caption: 24rpx;
  --font-body: 26rpx;
  --font-body-lg: 28rpx;
  --font-title-sm: 36rpx;
  --font-title-md: 44rpx;
  --font-title-lg: 52rpx;

  --btn-h: 88rpx;

  background: var(--bg-base);
  color: var(--text-1);
  display: flex;
  flex-direction: column;
}

.ui-page {
  min-height: 100vh;
  box-sizing: border-box;
  padding-left: var(--space-4);
  padding-right: var(--space-4);
  padding-bottom: calc(112rpx + env(safe-area-inset-bottom));
  padding-bottom: calc(112rpx + constant(safe-area-inset-bottom));
}

.ui-nav {
  height: 88rpx;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.ui-nav-side {
  min-width: 88rpx;
  min-height: 88rpx;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  color: var(--text-2);
  font-size: var(--font-body);
}

.ui-nav-title {
  font-size: var(--font-title-sm);
  font-weight: 700;
  color: var(--text-1);
}

.ui-card {
  border-radius: var(--radius-md);
  background: var(--surface-1);
  border: 1px solid var(--border-soft);
  padding: var(--space-4);
  box-sizing: border-box;
}

.ui-btn-primary {
  height: var(--btn-h);
  border-radius: var(--radius-md);
  background: var(--brand-main);
  color: #ffffff;
  font-size: var(--font-body-lg);
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}

.ui-btn-primary--disabled {
  opacity: 0.5;
}

.ui-btn-secondary {
  height: 88rpx;
  border-radius: var(--radius-md);
  background: #f4f4f4;
  color: var(--text-2);
  font-size: var(--font-body);
  display: flex;
  align-items: center;
  justify-content: center;
}

.ui-btn-ghost {
  height: 88rpx;
  border-radius: var(--radius-md);
  background: #ffffff;
  border: 1px solid var(--brand-main);
  color: var(--brand-main);
  font-size: var(--font-body);
  display: flex;
  align-items: center;
  justify-content: center;
}

.ui-pill {
  display: inline-flex;
  align-items: center;
  border-radius: var(--radius-pill);
  min-height: 52rpx;
  padding: 0 18rpx;
  font-size: var(--font-caption);
  font-weight: 600;
}

.ui-pill-success {
  background: var(--state-success-bg);
  color: var(--state-success);
}

.ui-pill-error {
  background: var(--state-danger-bg);
  color: var(--state-danger);
}

.ui-pill-pending {
  background: var(--state-pending-bg);
  color: var(--state-pending);
}

.ui-pill-warning {
  background: var(--state-warning-bg);
  color: var(--state-warning);
}

.ui-state-empty,
.ui-state-error {
  margin-top: var(--space-4);
  border-radius: var(--radius-md);
  padding: var(--space-4);
  text-align: center;
  font-size: var(--font-body);
}

.ui-state-empty {
  background: #fff;
  color: var(--text-3);
}

.ui-state-error {
  background: var(--state-danger-bg);
  color: var(--state-danger);
}

button {
  background: initial;
}

button::after {
  border: none;
}