/* 全局通用样式 - 打牌记账 */

/* ========== 颜色变量 ========== */
/* 主色调：紫色渐变 */
/* 辅助色：绿色（成功）、橙色（警告）、红色（错误） */

/* ========== 基础样式 ========== */

/* 白色卡片 - 统一风格 */
.card {
  background: #1A1A1A;
  border-radius: 20rpx;
  padding: 32rpx 24rpx;
  box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.15);
  margin-bottom: 24rpx;
}

/* 卡片标题 */
.card-title {
  font-size: 32rpx;
  font-weight: bold;
  color: #FFFFFF;
  margin-bottom: 20rpx;
}

/* 卡片副标题 */
.card-subtitle {
  font-size: 26rpx;
  color: #B0B0B0;
  margin-bottom: 16rpx;
}

/* ========== 表单组件 ========== */

/* 表单标签 */
.form-label {
  display: block;
  font-size: 28rpx;
  font-weight: 600;
  color: #FFFFFF;
  margin-bottom: 16rpx;
}

/* 输入框 */
.form-input {
  width: 100%;
  background: #f8f9fa;
  border: 2rpx solid rgba(0, 0, 0, 0.1);
  border-radius: 12rpx;
  padding: 24rpx 20rpx;
  font-size: 30rpx;
  color: #FFFFFF;
  box-sizing: border-box;
  transition: all 0.3s;
}

.form-input:focus {
  border-color: #1A1A1A;
  background: #1A1A1A;
  box-shadow: 0 0 0 4rpx rgba(0, 0, 0, 0.1);
}

.form-input::placeholder {
  color: #ccc;
}

/* 提示文字 */
.form-hint {
  font-size: 24rpx;
  color: #B0B0B0;
  margin-top: 12rpx;
  display: block;
}

/* ========== 按钮样式 ========== */

/* 主按钮 - 绿色渐变 */
.btn-primary {
  width: 100%;
  background: linear-gradient(135deg, #50C878 0%, #06a854 100%);
  color: white;
  border-radius: 16rpx;
  padding: 28rpx;
  font-size: 32rpx;
  font-weight: bold;
  border: none;
  box-shadow: 0 8rpx 24rpx rgba(7, 193, 96, 0.4);
  transition: all 0.3s;
}

.btn-primary:active {
  opacity: 0.9;
  transform: scale(0.98);
}

.btn-primary[disabled] {
  background: #e0e0e0;
  color: #B0B0B0;
  box-shadow: none;
}

/* 次要按钮 - 橙色渐变 */
.btn-secondary {
  width: 100%;
  background: linear-gradient(135deg, #ff9a76 0%, #ff7e5f 100%);
  color: white;
  border-radius: 16rpx;
  padding: 28rpx;
  font-size: 32rpx;
  font-weight: bold;
  border: none;
  box-shadow: 0 8rpx 24rpx rgba(255, 154, 118, 0.4);
}

.btn-secondary:active {
  opacity: 0.9;
  transform: scale(0.98);
}

/* 紫色按钮 */
.btn-purple {
  width: 100%;
  background: linear-gradient(135deg, #1A1A1A 0%, #252525 100%);
  color: white;
  border-radius: 16rpx;
  padding: 28rpx;
  font-size: 32rpx;
  font-weight: bold;
  border: none;
  box-shadow: 0 8rpx 24rpx rgba(0, 0, 0, 0.4);
}

.btn-purple:active {
  opacity: 0.9;
  transform: scale(0.98);
}

/* 轮廓按钮 */
.btn-outline {
  width: 100%;
  background: #1A1A1A;
  color: #1A1A1A;
  border: 2rpx solid #1A1A1A;
  border-radius: 16rpx;
  padding: 28rpx;
  font-size: 32rpx;
  font-weight: bold;
  box-shadow: none;
}

.btn-outline:active {
  background: rgba(0, 0, 0, 0.05);
}

/* ========== 文字样式 ========== */

.text-primary {
  color: #1A1A1A;
}

.text-success {
  color: #50C878;
}

.text-warning {
  color: #ff9500;
}

.text-error {
  color: #ff3b30;
}

.text-muted {
  color: #B0B0B0;
}

.text-white {
  color: white;
}

/* ========== 标签样式 ========== */

.tag {
  display: inline-block;
  padding: 8rpx 20rpx;
  border-radius: 8rpx;
  font-size: 24rpx;
  font-weight: 500;
}

.tag-success {
  background: rgba(7, 193, 96, 0.1);
  color: #50C878;
}

.tag-warning {
  background: rgba(255, 149, 0, 0.1);
  color: #ff9500;
}

.tag-error {
  background: rgba(255, 59, 48, 0.1);
  color: #ff3b30;
}

.tag-info {
  background: rgba(0, 0, 0, 0.1);
  color: #1A1A1A;
}

/* ========== 分隔线 ========== */

.divider {
  height: 1rpx;
  background: rgba(0, 0, 0, 0.05);
  margin: 24rpx 0;
}

/* ========== 空状态 ========== */

.empty-state {
  text-align: center;
  padding: 100rpx 0;
}

.empty-icon {
  font-size: 80rpx;
  opacity: 0.3;
  margin-bottom: 20rpx;
}

.empty-text {
  font-size: 28rpx;
  color: rgba(255, 255, 255, 0.6);
}