.page { padding: 32rpx; min-height: 100vh; background: #f5f6f8; } .title { margin-bottom: 24rpx; font-size: 40rpx; font-weight: 600; } .notice { margin-top: 32rpx; color: #777777; } .section-title { margin: 32rpx 0 16rpx; font-size: 32rpx; font-weight: 600; } .duration-row, .action-grid, .benefit-grid { display: flex; gap: 16rpx; flex-wrap: wrap; margin-bottom: 24rpx; } .benefit-grid input { box-sizing: border-box; flex: 1 1 280rpx; min-height: 72rpx; padding: 0 20rpx; border: 1rpx solid #d9dde5; border-radius: 12rpx; background: #ffffff; } .benefit-list { display: flex; flex-direction: column; gap: 16rpx; margin-bottom: 20rpx; } .benefit-option { padding: 22rpx; border: 2rpx solid #d9dde5; border-radius: 12rpx; background: #ffffff; } .benefit-option.active { border-color: #1f6feb; background: #eef5ff; } .option-head { display: flex; gap: 16rpx; align-items: flex-start; justify-content: space-between; } .option-title { flex: 1; min-width: 0; font-size: 30rpx; font-weight: 600; word-break: break-all; } .option-value { flex: 0 0 auto; color: #1f6feb; font-weight: 600; } .action-grid button { flex: 1 1 280rpx; } .selected { color: #ffffff; background: #1f6feb; } .result-card { margin-top: 20rpx; padding: 28rpx; border-radius: 16rpx; background: #ffffff; line-height: 1.7; } .result-title { font-size: 32rpx; font-weight: 600; } .success { margin: 16rpx 0; color: #17823b; } .muted { color: #777777; line-height: 1.6; } .error { margin: 16rpx 0; color: #c73535; }