.card {
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    overflow: hidden;
    transition: box-shadow var(--transition), transform var(--transition);
}
.card:hover { box-shadow: var(--shadow-md); }
.card--elevated { box-shadow: var(--shadow); }
.card--featured { border-color: var(--color-primary); box-shadow: 0 0 0 2px var(--color-primary-bg); }
.card__header { padding: var(--space-5) var(--space-6); border-bottom: 1px solid var(--color-border); }
.card__body { padding: var(--space-6); }
.card__footer { padding: var(--space-4) var(--space-6); border-top: 1px solid var(--color-border); background: var(--color-bg-secondary); }

/* Plan Card */
.plan-card { display: flex; flex-direction: column; height: 100%; }
.plan-card__image-wrap { position: relative; aspect-ratio: 16/9; overflow: hidden; background: var(--color-bg-tertiary); }
.plan-card__image { width: 100%; height: 100%; object-fit: cover; transition: transform var(--transition-slow); }
.plan-card:hover .plan-card__image { transform: scale(1.03); }
.plan-card__badge { position: absolute; top: var(--space-3); left: var(--space-3); display: flex; gap: var(--space-1); flex-wrap: wrap; }
.badge { display: inline-flex; align-items: center; padding: 2px var(--space-2); font-size: var(--text-xs); font-weight: var(--font-semibold); border-radius: var(--radius-full); }
.badge--featured { background: #fef3c7; color: #92400e; }
.badge--momentum { background: #dbeafe; color: #1e40af; }
.badge--primary { background: var(--color-primary-bg); color: var(--color-primary); }
.badge--success { background: var(--color-success-bg); color: var(--color-success); }
.badge--error { background: var(--color-error-bg); color: var(--color-error); }
.badge--warning { background: var(--color-warning-bg); color: var(--color-warning); }
.badge--gray { background: var(--color-bg-tertiary); color: var(--color-text-secondary); }
.plan-card__body { padding: var(--space-4); flex: 1; display: flex; flex-direction: column; }
.plan-card__category { font-size: var(--text-xs); color: var(--color-primary); font-weight: var(--font-semibold); text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: var(--space-2); }
.plan-card__title { font-size: var(--text-base); font-weight: var(--font-bold); margin-bottom: var(--space-2); line-height: var(--leading-tight); }
.plan-card__desc { font-size: var(--text-sm); color: var(--color-text-secondary); line-height: var(--leading-relaxed); flex: 1; }
.plan-card__analyst { display: flex; align-items: center; gap: var(--space-2); margin-top: var(--space-4); padding-top: var(--space-4); border-top: 1px solid var(--color-border); }
.plan-card__analyst-avatar { width: 28px; height: 28px; border-radius: var(--radius-full); object-fit: cover; }
.plan-card__analyst-name { font-size: var(--text-xs); font-weight: var(--font-medium); }
.plan-card__footer { padding: var(--space-4); border-top: 1px solid var(--color-border); display: flex; align-items: center; justify-content: space-between; }
.plan-card__price { font-size: var(--text-xl); font-weight: var(--font-bold); color: var(--color-primary); }
.plan-card__price-label { font-size: var(--text-xs); color: var(--color-text-secondary); font-weight: var(--font-normal); }

/* Stat Card */
.stat-card { padding: var(--space-5); display: flex; align-items: flex-start; gap: var(--space-4); }
.stat-card__icon { width: 44px; height: 44px; border-radius: var(--radius-md); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.stat-card__icon--primary { background: var(--color-primary-bg); color: var(--color-primary); }
.stat-card__icon--success { background: var(--color-success-bg); color: var(--color-success); }
.stat-card__icon--warning { background: var(--color-warning-bg); color: var(--color-warning); }
.stat-card__icon--error { background: var(--color-error-bg); color: var(--color-error); }
.stat-card__value { font-size: var(--text-2xl); font-weight: var(--font-bold); line-height: 1; }
.stat-card__label { font-size: var(--text-sm); color: var(--color-text-secondary); margin-top: var(--space-1); }