$ao-primary: #4C97E7;
$ao-primary-deep: #3A7EDB;
$ao-ink: #2E4975;
$ao-text: #303A4B;
$ao-text-secondary: #8B97A8;
$ao-text-muted: #9AA7B8;
$ao-text-placeholder: #C7CDD3;
$ao-border: #E6ECF3;
$ao-bg-page: #EEF3FA;
$ao-bg-card: #fff;
$ao-bg-field: #fff;
$ao-bg-active: #fff;
$ao-accent: #FF8A3D;
$ao-success: #3AC17C;
$ao-radius: 20rpx;
$ao-radius-sm: 16rpx;
$ao-section-gap: 32rpx;
$ao-title-gap: 20rpx;

@mixin ao-section {
	margin-bottom: $ao-section-gap;
}

@mixin ao-section-head {
	display: flex;
	align-items: center;
	margin-bottom: $ao-title-gap;

	&::before {
		content: '';
		width: 6rpx;
		height: 28rpx;
		border-radius: 3rpx;
		background: linear-gradient(180deg, $ao-primary, $ao-primary-deep);
		margin-right: 14rpx;
		flex-shrink: 0;
	}
}

@mixin ao-section-title {
	font-size: 30rpx;
	font-weight: 600;
	color: $ao-ink;
	line-height: 1.2;
}

@mixin ao-section-tag {
	margin-left: 12rpx;
	font-size: 22rpx;
	color: $ao-text-muted;
	background: $ao-bg-card;
	border: 1rpx solid $ao-border;
	border-radius: 8rpx;
	padding: 4rpx 12rpx;
}

@mixin ao-card {
	background: $ao-bg-card;
	border-radius: $ao-radius;
	border: 1rpx solid $ao-border;
	box-sizing: border-box;
}

@mixin ao-field-box {
	display: flex;
	align-items: center;
	height: 88rpx;
	background: $ao-bg-field;
	border: 1rpx solid $ao-border;
	border-radius: $ao-radius-sm;
	padding: 0 24rpx;
	box-sizing: border-box;
}

@mixin ao-option-item {
	display: flex;
	align-items: center;
	background: $ao-bg-card;
	border-radius: $ao-radius-sm;
	padding: 24rpx;
	margin-bottom: 16rpx;
	border: 2rpx solid $ao-border;
	box-sizing: border-box;
	transition: border-color 0.15s, background-color 0.15s;

	&.active {
		background: $ao-bg-card;
		border-color: $ao-primary;
	}

	&:last-child {
		margin-bottom: 0;
	}
}

@mixin ao-radio {
	width: 36rpx;
	height: 36rpx;
	border-radius: 50%;
	border: 3rpx solid #D2DAE5;
	flex-shrink: 0;
	box-sizing: border-box;

	&.checked {
		border-color: $ao-primary;
		background: $ao-primary;
		position: relative;

		&::after {
			content: '';
			position: absolute;
			left: 50%;
			top: 50%;
			width: 12rpx;
			height: 12rpx;
			border-radius: 50%;
			background: #fff;
			transform: translate(-50%, -50%);
		}
	}
}

@mixin ao-empty-tip {
	text-align: center;
	font-size: 26rpx;
	color: #B0BAC7;
	padding: 32rpx 0;
	background: $ao-bg-card;
	border-radius: $ao-radius-sm;
	border: 1rpx dashed $ao-border;
}

@mixin ao-primary-btn {
	height: 88rpx;
	padding: 0 36rpx;
	background: linear-gradient(135deg, $ao-primary, $ao-primary-deep);
	border-radius: $ao-radius-sm;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 30rpx;
	color: #fff;
	font-weight: 500;
	box-shadow: 0 6rpx 16rpx rgba(76, 151, 231, 0.24);
}

@mixin ao-panel-soft {
	@include ao-card;
}

@mixin ao-popup-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 28rpx 0 20rpx;
	border-bottom: 1rpx solid #F0F3F8;
}

@mixin ao-popup-panel {
	background: #fff;
	padding: 0 32rpx calc(24rpx + env(safe-area-inset-bottom));
	box-sizing: border-box;
}