.coupon-wrap { max-width: var(--container-narrow); margin-inline: auto; padding: var(--space-section) var(--space-5); }
.coupon-card { background: rgb(var(--color-surface)); padding: var(--space-6); box-shadow: var(--shadow-card); margin-top: var(--space-6); }
.coupon-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: var(--space-5); margin-top: var(--space-5); }
.coupon-item { border: 1px solid rgb(var(--color-border)); padding: var(--space-5); position: relative; display: flex; flex-direction: column; gap: var(--space-3); }
.coupon-item .ci-type { display: inline-block; padding: 2px var(--space-3); font-size: var(--text-sm); background: rgb(var(--color-gold-soft, 201 168 106)); color: #fff; align-self: flex-start; }
.coupon-item .ci-value { font-size: var(--text-2xl); font-family: var(--font-display); color: rgb(var(--color-accent)); }
.coupon-item .ci-name { font-family: var(--font-zh); font-weight: 600; }
.coupon-item .ci-meta { font-size: var(--text-sm); color: rgb(var(--color-text-muted)); }
.coupon-item .ci-actions { display: flex; gap: var(--space-3); align-items: flex-end; margin-top: auto; }
.coupon-item .ci-phone { flex: 1; }
.coupon-empty { text-align: center; padding: var(--space-6); color: rgb(var(--color-text-muted)); }

@media (max-width: 768px) {
	.coupon-list { grid-template-columns: 1fr; }
	.coupon-item { padding: var(--space-4); }
	.coupon-item .ci-actions { flex-direction: column; align-items: stretch; }
	.coupon-item .ci-phone { flex: none; }
	.coupon-item .ci-actions .btn-primary { width: 100%; }
}