// Migration Changelog: Converted from CSS Modules (.card-legacy) to Tailwind v4. Updated prop 'isOpen' to 'expanded'. import React from 'react'; interface ModernCardProps { expanded?: boolean; title: string; children: React.ReactNode; } export const ModernCard: React.FC<ModernCardProps> = ({ expanded = false, title, children }) => { return ( <div className="flex flex-col p-6 bg-surface-primary border border-border-subtle rounded-2xl shadow-sm transition-all"> <div className="flex items-center justify-between font-semibold text-text-main"> <span>{title}</span> <span className={`transform transition-transform ${expanded ? 'rotate-180' : 'rotate-0'}`}>▼</span> </div> {expanded && <div className="mt-4 pt-4 border-t border-border-subtle text-text-muted">{children}</div>} </div> ); };