/* ============================================================
       SHARED COMPONENTS
       ============================================================ */
    const Ornament = () => (
      <div className="flex items-center justify-center gap-3 my-3">
        <div className="ornament flex-1"></div>
        <Icon name="skull" className="w-3 h-3 text-gold opacity-60" />
        <div className="ornament flex-1"></div>
      </div>
    );

    const Header = ({ title, subtitle, onBack, action }) => (
      <div className="px-4 pt-4 pb-3 border-b border-line bg-gradient-to-b from-panel to-bg">
        <div className="flex items-center justify-between gap-3">
          <div className="flex items-center gap-2 min-w-0">
            {onBack && (
              <button onClick={onBack} className="p-2 -ml-2 text-parchmentDim hover:text-gold">
                <Icon name="chevronLeft" className="w-5 h-5" />
              </button>
            )}
            <div className="min-w-0">
              <h1 className="serif text-xl text-gold truncate">{title}</h1>
              {subtitle && <p className="text-xs text-muted mt-0.5 truncate">{subtitle}</p>}
            </div>
          </div>
          {action}
        </div>
      </div>
    );

    const Modal = ({ open, onClose, title, children, footer }) => {
      if (!open) return null;
      return (
        <div className="fixed inset-0 z-50 flex items-end sm:items-center justify-center" onClick={onClose}>
          <div className="absolute inset-0 bg-black/70 backdrop-blur-sm"></div>
          <div
            onClick={e => e.stopPropagation()}
            className="relative w-full sm:max-w-md bg-panel border-t-2 sm:border-2 border-gold/40 rounded-t-2xl sm:rounded-lg max-h-[90vh] flex flex-col panel-edge gold-glow"
          >
            <div className="flex items-center justify-between px-4 py-3 border-b border-line">
              <h2 className="serif text-lg text-gold">{title}</h2>
              <button onClick={onClose} className="p-1 text-muted hover:text-parchment">
                <Icon name="x" className="w-5 h-5" />
              </button>
            </div>
            <div className="flex-1 overflow-y-auto scroll-area p-4">{children}</div>
            {footer && <div className="border-t border-line p-3 flex gap-2 justify-end">{footer}</div>}
          </div>
        </div>
      );
    };

    const EmptyState = ({ icon, title, hint, action }) => (
      <div className="flex flex-col items-center justify-center text-center py-16 px-6">
        <div className="w-16 h-16 rounded-full border border-gold/30 flex items-center justify-center text-gold/60 mb-4">
          <Icon name={icon} className="w-8 h-8" />
        </div>
        <h3 className="serif text-gold text-lg mb-1">{title}</h3>
        <p className="text-sm text-muted max-w-xs mb-4">{hint}</p>
        {action}
      </div>
    );